Logo Universitas Teknokrat Indonesia

Bukan Sulap! Kuasai HTML Dasar dalam Sehari, Bisa Kok

Kategori: Teknologi
Gambar untuk Bukan Sulap! Kuasai HTML Dasar dalam Sehari, Bisa Kok

Pernahkah Anda membayangkan membuat halaman web pertama Anda sendiri? Mungkin terdengar sulit dan rumit, penuh dengan kode yang tidak bisa dimengerti. Anggapan itu tidak sepenuhnya salah, tetapi jika Anda tahu kuncinya, menguasai dasar-dasar HTML (HyperText Markup Language) bisa dilakukan dalam waktu yang jauh lebih singkat dari yang Anda kira. Bahkan, hanya dalam satu hari! HTML adalah fondasi dari semua halaman web. Tanpa HTML, tidak akan ada teks, gambar, atau tautan yang bisa Anda lihat di internet. Ini bukanlah bahasa pemrograman, melainkan bahasa markup yang berfungsi untuk menyusun struktur konten web.

Artikel ini akan membimbing Anda langkah demi langkah untuk memahami HTML dasar, mulai dari alat yang Anda butuhkan hingga tag-tag paling penting yang akan Anda gunakan. Mari kita singkirkan mitos bahwa coding itu sulit dan buktikan bahwa Anda bisa menguasai HTML dalam sehari.

baca juga Ustaz Terkenal di Bandung Dilaporkan ke Polisi oleh Mantan Istri, Diduga Lakukan Kekerasan terhadap Anak

Persiapan: Alat yang Dibutuhkan

Sebelum memulai, Anda hanya memerlukan dua alat sederhana yang pasti sudah ada di komputer Anda:

  1. Teks Editor: Anda bisa menggunakan Notepad (Windows), TextEdit (macOS), atau editor kode yang lebih canggih seperti Visual Studio Code, Sublime Text, atau Notepad++. Editor kode canggih biasanya memiliki fitur pewarnaan sintaks (syntax highlighting) yang memudahkan Anda membaca kode, tetapi untuk permulaan, editor bawaan pun sudah cukup.
  2. Web Browser: Gunakan Google Chrome, Mozilla Firefox, atau Microsoft Edge. Anda akan menggunakan browser ini untuk melihat hasil dari kode HTML yang Anda tulis.

Itu saja! Anda tidak memerlukan koneksi internet, perangkat lunak berbayar, atau spesifikasi komputer yang tinggi. Semua yang Anda butuhkan ada di desktop Anda.

Fondasi HTML: Struktur Dasar Halaman Web

Setiap dokumen HTML memiliki struktur dasar yang sama. Anggap saja ini seperti kerangka rumah. Anda bisa menambahkan ornamen dan perabot (konten), tetapi kerangkanya harus ada.

Berikut adalah struktur dasar yang wajib Anda ketahui:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web Saya</title>
</head>
<body>

    <h1>Halo, Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>

</body>
</html>

Mari kita bedah kode di atas:

  • <!DOCTYPE html>: Deklarasi ini memberitahu browser bahwa ini adalah dokumen HTML versi terbaru. Selalu letakkan ini di baris pertama.
  • <html>: Ini adalah tag pembuka dan penutup utama yang membungkus semua konten HTML.
  • <head>: Bagian ini berisi metadata tentang halaman, seperti judul halaman, tautan ke file CSS, atau skrip. Konten di dalam <head> tidak akan terlihat di halaman web itu sendiri.
  • <title>: Tag ini menentukan judul halaman yang akan muncul di tab browser.
  • <body>: Ini adalah "badan" dari dokumen HTML. Semua konten yang akan terlihat oleh pengguna, seperti teks, gambar, tautan, dan video, berada di dalam tag ini.

baca juga Workshop Inovasi Robot Mobile dan Alat Pintar Deteksi Kebencanaan di SMA Negeri 2 Tulang Bawang Tengah

Tag-Tag Penting yang Wajib Dikuasai

Setelah memahami strukturnya, kini saatnya berkenalan dengan tag-tag HTML yang paling sering digunakan. Ingat, tag HTML terdiri dari tag pembuka (<tag>) dan tag penutup (</tag>).

1. Tag Judul dan Paragraf

Untuk membuat teks, Anda akan menggunakan tag-tag berikut:

  • <h1> hingga <h6>: Tag judul (heading). <h1> adalah yang terbesar dan paling penting, sementara <h6> adalah yang terkecil.
  • <p>: Tag untuk membuat paragraf.

Contoh:

HTML

<h1>Ini Judul Utama</h1>
<h2>Ini Subjudul</h2>
<p>Ini adalah paragraf berisi teks. Anda bisa menulis apa saja di sini.</p>

2. Tag Tautan (Link)

Membuat tautan ke halaman lain adalah salah satu fungsi paling mendasar dari web. Untuk ini, Anda menggunakan tag <a> (anchor).

Contoh:

HTML

<a href="https://www.google.com">Kunjungi Google</a>
  • href: Atribut ini menentukan alamat URL tujuan tautan.
  • target="_blank": Atribut opsional yang bisa ditambahkan untuk membuka tautan di tab baru.

3. Tag Gambar

Untuk menampilkan gambar, Anda menggunakan tag <img>. Tag ini unik karena tidak memiliki tag penutup.

Contoh:

HTML

<img src="gambar_saya.jpg" alt="Deskripsi gambar" width="300" height="200">
  • src: Atribut ini menentukan lokasi file gambar. Bisa berupa nama file di folder yang sama atau URL gambar di internet.
  • alt: Atribut ini sangat penting. Ini adalah teks alternatif yang akan ditampilkan jika gambar gagal dimuat. Teks ini juga membantu mesin pencari dan pembaca layar untuk memahami konten gambar.
  • width dan height: Atribut untuk mengatur ukuran gambar dalam piksel.

Latihan Praktik: Buat Halaman Web Pertama Anda

Sekarang, saatnya menggabungkan semua yang sudah Anda pelajari. Buka teks editor Anda dan ikuti langkah-langkah di bawah ini:

  1. Salin kode struktur dasar HTML ke editor Anda.
  2. Ubah judul halaman menjadi "Halaman Web Pertamaku".
  3. Di dalam tag <body>, buatlah judul <h1> dengan nama Anda.
  4. Di bawahnya, buat paragraf <p> yang menjelaskan sedikit tentang diri Anda.
  5. Tambahkan tag <img> yang menautkan ke gambar profil Anda.
  6. Terakhir, tambahkan tag <a> yang mengarah ke akun media sosial favorit Anda.

Setelah selesai, simpan file dengan nama index.html. Pastikan ekstensi file-nya adalah .html, bukan .txt.

Sekarang, navigasi ke lokasi file tersebut di komputer Anda, klik kanan pada file index.html, lalu pilih Open with dan pilih browser favorit Anda. Tada! Anda baru saja membuat halaman web pertama Anda.

Tips dan Trik: Menguasai HTML Lebih Cepat

  • Belajar dari Source Code: Saat Anda mengunjungi sebuah situs web, klik kanan di halaman tersebut dan pilih View Page Source atau Lihat Sumber Halaman. Ini akan membuka kode HTML dari halaman tersebut, dan Anda bisa belajar bagaimana situs-situs nyata dibangun.
  • Gunakan Editor Kode: Meskipun Notepad cukup, beralih ke editor kode seperti Visual Studio Code akan sangat membantu. Fitur seperti autocomplete dan live server akan membuat proses belajar lebih cepat dan menyenangkan.
  • Jangan Takut Salah: Kesalahan adalah bagian dari proses belajar. Jika halaman Anda tidak terlihat seperti yang diharapkan, periksa kembali penulisan tag dan atribut Anda. Mayoritas masalah berasal dari kesalahan kecil seperti lupa tag penutup atau salah ketik.

Bukan Akhir, Ini Baru Permulaan

Menguasai HTML dasar dalam sehari memang bisa dilakukan. Namun, perlu diingat bahwa ini hanyalah langkah pertama. Untuk membuat halaman web yang menarik secara visual, Anda perlu mempelajari CSS (Cascading Style Sheets). CSS adalah bahasa yang bertanggung jawab atas tampilan dan gaya halaman web—warna, layout, font, dan lainnya. Setelah itu, untuk membuat halaman web menjadi interaktif, Anda akan memerlukan JavaScript.

HTML, CSS, dan JavaScript adalah trio utama dalam pengembangan web. HTML menyediakan kerangka, CSS memberikan sentuhan artistik, dan JavaScript menghidupkannya.

Jadi, jangan berhenti di sini. Setelah Anda berhasil membuat halaman pertama, teruslah berlatih dan bereksperimen. Pahami setiap tag yang Anda gunakan dan cari tahu apa fungsi dari tag-tag lain. Ingat, perjalanan seribu mil dimulai dari satu langkah, dan langkah pertama Anda dalam dunia coding bisa dimulai dengan satu hari saja. Selamat mencoba dan selamat datang di dunia web!

Penulis : tanjali mulia nafisa

Bagikan ke WhatsApp