Panduan Dasar-Dasar Coding HTML

HTML, singkatan dari HyperText Markup Language, adalah bahasa standar yang digunakan untuk membuat dan menyusun konten di halaman web. Jika Anda membayangkan sebuah website sebagai sebuah bangunan, maka HTML adalah kerangka dasarnya—struktur utama yang menentukan di mana letak dinding, jendela, dan pintu.

Memahami dasar-dasar HTML adalah langkah pertama yang krusial bagi siapa pun yang ingin terjun ke dunia pengembangan web, baik itu untuk membuat blog sederhana atau membangun aplikasi web yang kompleks. HTML bekerja dengan menggunakan serangkaian "tag" untuk menandai elemen-elemen tertentu dalam dokumen.

<html> <head> <body> Struktur Utama Halaman

Representasi Visual Struktur Dasar HTML

Struktur Dasar Dokumen HTML

Setiap dokumen HTML yang valid harus dimulai dengan deklarasi tipe dokumen dan memiliki struktur dasar tertentu. Tag ini berfungsi sebagai kerangka induk tempat semua elemen lain akan ditempatkan.

Struktur intinya terdiri dari tiga bagian utama:

  1. <!DOCTYPE html>: Mendefinisikan bahwa dokumen ini adalah HTML5. Ini harus menjadi baris pertama.
  2. <html>: Elemen akar dari halaman HTML.
  3. <head>: Berisi informasi meta tentang dokumen (judul, charset, tautan CSS, dll.) yang tidak ditampilkan langsung di halaman utama.
  4. <body>: Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, tautan, dan tabel.

Contoh Template HTML Sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul Halaman Saya</title>
</head>
<body>
    <h1>Selamat Datang di Halaman Saya</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>

Tag Paling Umum yang Harus Anda Ketahui

Setelah Anda menguasai strukturnya, fokus selanjutnya adalah pada elemen-elemen yang membangun konten di dalam tag <body>.

1. Heading (Judul)

Heading digunakan untuk memberikan hierarki pada konten. Ada enam tingkatan, dari yang paling penting (H1) hingga yang kurang penting (H6).

<h1>Judul Utama (Hanya satu per halaman)</h1>
<h2>Subjudul Bagian Besar</h2>
<h3>Judul Topik Kecil</h3>

2. Paragraf dan Pemformatan Teks

Teks biasa dimasukkan menggunakan tag paragraf.

<p>Ini adalah contoh teks paragraf.</p>
<p>Anda bisa membuat teks menjadi <strong>tebal</strong> atau <em>miring</em>.</p>
<br> <!-- Tag ini digunakan untuk baris baru (line break) -->

3. Tautan (Hyperlinks)

Tautan memungkinkan navigasi antar halaman web. Tag utamanya adalah <a> (anchor), dan atribut href menentukan tujuan tautan tersebut.

<a href="https://www.google.com" target="_blank">Kunjungi Google</a>

4. Gambar

Gambar disisipkan menggunakan tag <img>. Ini adalah tag "self-closing" (tidak memerlukan tag penutup). Atribut src menunjukkan lokasi gambar, dan alt sangat penting untuk aksesibilitas dan SEO.

<img src="path/ke/gambar.jpg" alt="Deskripsi singkat tentang gambar ini">

Atribut: Memberikan Informasi Tambahan

Tag seringkali memerlukan atribut untuk memberikan informasi tambahan atau konfigurasi. Atribut selalu ditulis di dalam tag pembuka dan terdiri dari pasangan nama="nilai".

Contoh atribut yang sudah kita lihat meliputi:

Menguasai dasar-dasar ini—struktur dokumen, tag konten utama (H1-P), tautan, dan gambar—akan memberi Anda fondasi yang kuat untuk mulai membuat halaman web Anda sendiri. HTML adalah bahasa yang relatif mudah dipelajari karena sifatnya yang deklaratif: Anda hanya perlu memberitahu browser apa yang harus ditampilkan, bukan bagaimana cara menampilkannya (itulah tugas CSS).

Teruslah berlatih dengan membuat file .html baru di komputer Anda dan membukanya di browser untuk melihat hasilnya secara instan. Konsistensi adalah kunci dalam menguasai dasar-dasar coding!

Related Posts