HTML dan Teknologi Web

Satu halaman web adalah hasil kerja sama banyak teknologi: HTML menyusun struktur, CSS mengatur tampilan, dan JavaScript menambahkan interaksi. Di belakang layar, HTTP dan DNS mengantar dokumen sampai ke browser, lalu engine browser mengolahnya menjadi tampilan. Pada Chapter ini kita memetakan teknologi-teknologi tersebut secara ringkas dan melihat bagaimana HTML menjadi titik temu di antara semuanya. Peta ini sekaligus menutup section pengenalan dan menunjuk arah belajar kita berikutnya.

Peta Teknologi di Sekitar HTML #

Tabel berikut memetakan teknologi di sekitar HTML beserta peran masing-masing:

Tidak semua teknologi di atas perlu dikuasai mendalam. Urutan belajar yang baik dimulai dari HTML karena posisinya paling dasar: CSS mengatur tampilan elemen, JavaScript mengubah elemen, dan HTTP hanya mengantarnya. Setelah struktur kuat, teknologi berikutnya jauh lebih mudah dipelajari.

Browser dan Engine di Baliknya #

Setiap browser dibangun di atas engine, yaitu perangkat inti yang berisi parser HTML, perender, dan JavaScript engine. Engine menentukan cara dokumen dibaca dan dirender:

Ketiga engine mengikuti Living Standard yang sama, sehingga dokumen yang sama diproses dengan aturan yang sama. Perbedaan kecil tetap ada pada fitur terbaru, dan halaman MDN mencatat dukungan tiap engine. Nama engine tidak perlu dihafal; yang penting adalah menyadari bahwa hasil render bisa sedikit berbeda antarbrowser.

HTML sebagai Titik Temu #

Contoh berikut menghubungkan hampir semua teknologi pada peta di atas dalam satu dokumen kecil. Elemen link menyambungkan CSS, elemen a membuat hyperlink, dan elemen script menyambungkan JavaScript; ketiganya dibahas pada section masing-masing. Simpan kode ini sebagai file titik-temu.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Warung Kopi Melati</title>
  <link rel="stylesheet" href="gaya.css">
</head>
<body>
  <h1>Warung Kopi Melati</h1>
  <p>Perkenalan warung beserta alamatnya.</p>
  <p>Kunjungi <a href="kontak.html">halaman kontak</a> untuk melihat peta lokasi.</p>
  <script src="interaksi.js"></script>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Warung Kopi Melati" dan dua paragraf pengantar
  - Tampilan mengikuti gaya.css bila file tersedia
  - Teks "halaman kontak" berupa tautan yang dapat diklik
  - Script interaksi.js berjalan bila file tersedia

Mari kita telaah peran setiap baris penting pada dokumen ini:

1. Baris 1-5: boilerplate yang telah kita kenal, berisi doctype, elemen akar, pengodean karakter, dan judul tab.
2. Baris 6 (<link rel="stylesheet" href="gaya.css">): menyambungkan HTML dengan CSS; browser mengirim HTTP request tersendiri untuk mengunduh gaya.css.
3. Baris 8-10: struktur konten berupa heading dan paragraf pengantar.
4. Baris 11 (<a href="kontak.html">): hyperlink; pengunjung yang mengekliknya memicu permintaan baru untuk dokumen kontak.html.
5. Baris 12 (<script src="interaksi.js">): menyambungkan JavaScript; browser mengunduh lalu menjalankan script yang dapat membaca DOM.

File gaya.css, kontak.html, dan interaksi.js hanyalah nama rujukan; sediakan filenya sendiri bila ingin hasil lengkap. Validator tetap menganggap dokumen valid karena keberadaan file rujukan tidak diperiksa, dan tanpa file tersebut halaman tetap tampil dengan tampilan bawaan.

Rute Belajar di Course Ini #

Section pengenalan berakhir di sini, dan course berlanjut dengan urutan yang dibangun bertahap:

• Persiapan Lingkungan: menyiapkan editor dan browser, membuat file HTML pertama, mengenal DevTools.
• Struktur Dokumen: doctype, html, head, dan body secara mendalam.
• Elemen dan Atribut: cara menulis markup yang benar, termasuk nested dan void elements.
• Teks, Links, Images, Lists, dan Tables: konten halaman yang kaya.
• Semantic HTML dan Forms: struktur bermakna serta input dari pengunjung.
• HTML dan CSS / HTML dan JavaScript: dua teknologi yang menempel pada struktur yang kita bangun.
• Proyek: merangkai seluruh konsep menjadi halaman utuh.

Dengan peta teknologi ini, kita dapat mengikuti section berikutnya tanpa kehilangan arah. Buka bagian Persiapan Lingkungan, siapkan editor dan browser, lalu mulai menulis file HTML pertama kita.

Referensi resmi untuk pendalaman:

• MDN Web Docs — An overview of HTTP
• MDN Web Docs — HTML
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Warung Kopi Melati</title>
  <link rel="stylesheet" href="gaya.css">
</head>
<body>
  <h1>Warung Kopi Melati</h1>
  <p>Perkenalan warung beserta alamatnya.</p>
  <p>Kunjungi <a href="kontak.html">halaman kontak</a> untuk melihat peta lokasi.</p>
  <script src="interaksi.js"></script>
</body>
</html>