Tutorial HTML / Apa itu HTML dan apa perannya dalam halaman web?

HTML (HyperText Markup Language, bahasa markup untuk hypertext) memberikan struktur dan makna pada konten halaman web. Ini menandai judul, paragraf, daftar, tautan, dan komponen lain dari sebuah dokumen. CSS terutama menentukan penampilan dan tata letak; JavaScript dapat menambahkan perilaku sebagai respons terhadap input pengguna.

Apa itu HTML?

HTML adalah bahasa penanda: Elemen-elemen yang digunakan menjelaskan tugas apa yang dimiliki sebuah konten dalam dokumen. Kata-kata yang sama bisa menjadi judul, paragraf biasa, atau tautan. Elemen HTML membuat perbedaan ini terlihat. Tautan juga menghubungkan dokumen di web satu sama lain.

Perhitungan dan logika pemrograman bersyarat bukanlah tugas utama HTML. Fokusnya adalah struktur dan makna. Pengantar standar HTML dari WHATWG menjelaskan bahasa dan tugas elemen-elemennya.

Tugas apa yang dijalankan HTML di sebuah situs web?

Sebuah situs web dapat berisi judul, teks isi, navigasi, gambar, dan formulir. HTML menetapkan elemen yang sesuai untuk konten ini dan menjelaskan hubungan mereka. Contoh lengkap berikut juga menunjukkan bagaimana elemen-elemen ini dimasukkan ke dalam struktur dasar sebuah dokumen.

• Menandai konten: h1 hingga h6 menandai judul, p paragraf, dan ul atau ol daftar.
• Menyusun dokumen: Elemen dapat membedakan bagian kepala, bagian navigasi, dan konten utama.
• Menghubungkan halaman dan memungkinkan input: a membuat tautan. Dengan form dan elemen input, pengguna dapat mengirimkan informasi.

Struktur ini membantu browser dan teknologi bantu, seperti program pembaca layar, untuk menafsirkan halaman. Oleh karena itu, pilih elemen berdasarkan tujuan kontennya. Penampilan defaultnya saja bukan kriteria pemilihan yang memadai.

Apa perbedaan HTML, CSS, dan JavaScript?

HTML menetapkan konten dan maknanya. CSS (Cascading Style Sheets, dalam bahasa Indonesia disebut lembar gaya berlapis) mengatur tampilan, misalnya warna, jenis huruf, jarak, dan tata letak. JavaScript dapat merespons klik dan masukan atau mengubah konten di halaman.

Pembagian ini adalah titik awal yang berguna, tetapi bukan batas yang kaku. Beberapa elemen HTML sudah membawa interaksi, dan CSS dapat mengubah tampilan atau melakukan animasi tergantung pada keadaan. Saat memulai, fokuslah terlebih dahulu pada menandai konten dengan elemen yang sesuai.

Bagaimana browser menampilkan kode HTML?

Dalam cuplikan ini, h1 menandai sebuah judul, p sebuah paragraf, dan ul dengan li sebuah daftar.

<h1>Catatan Hari Ini</h1>
<p>HTML menyusun konten.</p>
<ul>
  <li>Judul</li>
  <li>Paragraf</li>
</ul>

Peramban menafsirkan elemen-elemen tersebut dan menampilkan sebuah judul, sebuah paragraf, dan di bawahnya dua item daftar dengan penanda butir. Tanda kurung sudut dari tag-tag tersebut tidak muncul sebagai teks halaman normal. Bandingkan elemen-elemen dengan konten yang ditampilkan. Jenis huruf dan jarak sebenarnya tergantung pada peramban dan CSS dari halaman.

Membuat file HTML sederhana

Lengkapi cuplikan dengan struktur dasar sebuah dokumen. Salin contoh lengkap berikut ke editor teks, simpan sebagai index.html dengan pengkodean karakter UTF-8, dan buka file tersebut di browser. Gunakan teks biasa alih-alih dokumen teks yang diformat.

<!doctype html>
<html lang="id-ID">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Catatan Hari Ini</title>
  </head>
  <body>
    <h1>Catatan Hari Ini</h1>
    <p>HTML menyusun konten.</p>
    <ul>
      <li>Judul</li>
      <li>Paragraf</li>
    </ul>
  </body>
</html>

head berisi informasi seperti judul dokumen dan pengkodean karakter. body berisi konten utama halaman. Bahkan tanpa CSS tambahan, browser menampilkan konten dengan gaya bawaan yang sudah ditetapkan.

Di editor, ubah satu per satu teks di dalam title, judul h1, lalu paragraf. Simpan setelah setiap perubahan dan muat ulang halaman. Bandingkan judul di tab browser dengan konten yang terlihat: Perubahan pada title tidak secara otomatis mengubah judul dalam dokumen. Setelah itu, kembalikan kode contoh awal.