Belajar HTML dari Nol: Membangun Tulang Punggung Halaman Web
Halo Sobat Jurnal Coding! Coba tarik napas dalam-dalam dan rasakan aura semangat di sekitarmu. Setelah melewati fase pembersihan pola pikir dan menyiapkan seluruh kotak perkakas (seperti Text Editor dan akun GitHub), hari ini kita akhirnya resmi memulai petualangan paling seru di dunia web development. Kita akan belajar cara membangun sebuah website!
Perlu kamu ketahui, setiap website yang ada di seluruh penjuru internet saat ini—mulai dari mesin pencari Google yang minimalis, media sosial Facebook yang super padat, toko online Tokopedia, hingga blog Jurnal Coding tempat kamu membaca tulisan ini—semuanya dibangun di atas satu fondasi dasar yang sama. Fondasi dasar tersebut bernama **HTML**.
Bagi orang awam, melihat barisan kode HTML yang dipenuhi oleh tanda kurung siku seperti ``, ``, atau `` terasa seperti melihat tulisan hieroglif Mesir kuno yang bikin pusing. Tapi jangan panik dulu, karena hari ini kita akan membongkar habis rahasia HTML menggunakan analogi yang sangat akrab dengan kehidupan sehari-hari kita.
### HTML Bukan Bahasa Pemrograman! (Mari Meluruskan Mitos)
Sebelum kita masuk ke contoh kodenya, ada satu fakta unik yang wajib kamu ketahui agar kamu tidak ditertawakan oleh para programmer senior di forum internet. Catat ini baik-baik di otakmu: **HTML secara teknis bukanlah sebuah bahasa pemrograman.**
HTML singkatan dari *HyperText Markup Language* (Bahasa Markah). Kenapa dia tidak disebut bahasa pemrograman? Karena HTML tidak memiliki logika! HTML tidak bisa berpikir, tidak bisa menghitung matematika (seperti kalkulator yang kita buat kemarin), tidak bisa memproses data keuangan, dan tidak bisa mengambil keputusan If/Else.
Tugas HTML murni hanya satu: memberikan struktur, perintah susunan, dan menandai teks agar browser komputer tahu apa fungsi dari tulisan tersebut.
### Analogi Cetak Biru Arsitektur Rumah
Untuk membayangkan bagaimana sebuah website bekerja, mari kita gunakan analogi proses pembangunan sebuah Rumah Mewah. Sebuah website utuh yang profesional dibangun oleh tiga komponen utama yang saling bekerja sama secara harmonis:
1. **HTML adalah Struktur Bangunan Rumah.**
HTML bertindak sebagai struktur beton, tiang besi penyangga, susunan batu bata dinding, kerangka atap, dan pembagian ruang (di mana letak ruang tamu, di mana letak kamar mandi). Tanpa HTML, rumahmu tidak akan pernah berdiri tegak.
2. **CSS adalah Desain Interior dan Estetika.**
Setelah struktur rumah dari HTML selesai, rumah tersebut tentu saja masih terlihat kaku dan jelek (murni semen abu-abu). Di sinilah CSS masuk memberikan warna cat dinding (misal warna hitam elegen), memasang keramik marmer, memilih jenis lampu gantung, dan menghias gorden jendela agar rumah nyaman dipandang mata.
3. **JavaScript adalah Aliran Listrik dan Sistem Otomatis.**
Rumah yang sudah kokoh (HTML) dan sudah cantik (CSS) tidak akan bisa berfungsi cerdas tanpa adanya listrik. JavaScript bertindak sebagai kabel listrik yang membuat sakelar lampu bisa diklik, menghidupkan AC otomatis saat suhu panas, membuka gerbang pagar otomatis menggunakan sensor wajah, dan menyalakan pompa air kolam renang.
Hari ini, fokus utama kita adalah menjadi seorang arsitek dasar: kita akan merakit susunan besi dan batu bata pertama kita menggunakan HTML!
### Memahami Mantra Tag dan Elemen HTML
Cara kerja HTML adalah dengan membungkus teks menggunakan simbol tanda kurung siku yang biasa kita sebut sebagai **Tag**. Hampir seluruh Tag di dalam HTML diciptakan berpasangan: ada Tag Pembuka untuk memulai instruksi, dan ada Tag Penutup untuk mengakhiri instruksi (ditandai dengan simbol garis miring `/`).
Mari kita lihat bagaimana wujud cetak biru kerangka HTML yang paling standar di dunia industri:
<html>
<head>
<title>Halaman Pertama Saya</title>
</head>
<body>
<h1>Selamat Datang di Website Saya!</h1>
<p>Ini adalah paragraf pertama yang saya tulis dari udara kosong.</p>
</body>
</html>
Mari kita bedah anatomi makhluk di atas satu per satu dengan santai:
- `` : Ini adalah kalimat permisi kepada browser (seperti Chrome) untuk memberi tahu bahwa file ini adalah file dokumen HTML versi modern (HTML5).
- `` dan `` : Ini adalah batas wilayah kedaulatan utama website-mu. Seluruh kode website wajib ditulis di dalam kurungan tag ini.
- `` dan `` : Bagian kepala. Ini adalah area rahasia website yang isinya tidak akan dimunculkan di layar monitor pengunjung. Fungsinya untuk menyimpan informasi latar belakang, seperti judul tab browser yang dibungkus oleh tag ``.<br />
- `<body>` dan `</body>` : Bagian tubuh. Ini adalah area paling vital! Seluruh teks, gambar, tombol, atau video yang ingin kamu pamerkan agar bisa dilihat dan dibaca oleh pengunjung website wajib diletakkan di dalam tag body ini.<br />
<br />
Perhatikan juga tag `<h1>` yang merupakan singkatan dari *Heading 1*. Tag ini bertindak seperti judul utama koran (teks otomatis menjadi besar dan tebal), sedangkan tag `<p>` singkatan dari *Paragraph* yang berfungsi untuk menampung tulisan artikel biasa.<br />
<br />
### Rasakan Sensasi Menjadi Pencipta Halaman Web<br />
<br />
Cobalah praktikkan ini sekarang juga demi memuaskan rasa penasaranmu. Buka VS Code, buat file baru, ketikkan kerangka kode di atas murni hasil ketikan tanganmu sendiri (jangan malas dengan sistem copy-paste, agar otot jarimu terbiasa!), lalu simpan file tersebut dengan nama indeks.html. <br />
<br />
Setelah tersimpan, buka folder tempat kamu menyimpan file tersebut lewat komputer, klik kanan pada file indeks.html, lalu pilih opsi **Open With > Google Chrome**.<br />
<br />
*BUM!* Lihatlah layar monitormu saat ini. Kamu baru saja berhasil menciptakan sepotong halaman web pribadimu yang pertama di dunia. Meskipun tampilannya saat ini masih sangat kaku (teks hitam polos dengan latar belakang putih bersih), getaran kepuasan saat melihat tulisan buatanmu tayang di dalam browser adalah langkah awal yang sangat sakral. Kamu bukan lagi sekadar konsumen penikmat internet; kamu resmi naik kasta menjadi produsen pembuat internet!<br />
<br />
Di artikel Jurnal Coding selanjutnya, kita akan memanggil pasukan CSS untuk menyulap halaman putih kaku ini menjadi sebuah mahakarya visual masa depan yang super modis dan elegan. Tetap semangat, jaga nyala apimu, dan mari kita melangkah ke tutorial menghias CSS! </div>
<div class="reaction-container">
<h3>Apa pendapatmu tentang artikel ini?</h3>
<form action="artikel.php?id=13" method="POST" class="reaction-buttons">
<button type="submit" name="tipe_reaksi" value="jempol" class="btn-reaction">
👍 <span class="count">0</span>
</button>
<button type="submit" name="tipe_reaksi" value="hati" class="btn-reaction">
❤️ <span class="count">0</span>
</button>
<button type="submit" name="tipe_reaksi" value="api" class="btn-reaction">
🔥 <span class="count">0</span>
</button>
</form>
</div>
<div class="related-articles">
<h3>Artikel Terkait</h3>
<div class="article-grid">
<article class="glass-panel article-card">
<div class="article-img-wrap">
<img src="https://images.pexels.com/photos/196646/pexels-photo-196646.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Ilustrasi" class="article-img">
</div>
<div class="article-content">
<div>
<a href="index.php?kategori=Konsep+Dasar" class="kategori-badge notranslate">
Konsep Dasar <span class="badge-count-inline">25 Artikel</span>
</a>
<h3>Kamus JavaScript (Bagian 4): Memanipulasi HTML dengan DOM</h3>
</div>
<a href="artikel.php?id=84" class="read-more">Baca →</a>
</div>
</article>
<article class="glass-panel article-card">
<div class="article-img-wrap">
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&auto=format" alt="Ilustrasi" class="article-img">
</div>
<div class="article-content">
<div>
<a href="index.php?kategori=Konsep+Dasar" class="kategori-badge notranslate">
Konsep Dasar <span class="badge-count-inline">25 Artikel</span>
</a>
<h3>Buku Contekan JavaScript (Bagian 3): Menyusun Function dan Array</h3>
</div>
<a href="artikel.php?id=83" class="read-more">Baca →</a>
</div>
</article>
<article class="glass-panel article-card">
<div class="article-img-wrap">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600&auto=format" alt="Ilustrasi" class="article-img">
</div>
<div class="article-content">
<div>
<a href="index.php?kategori=Konsep+Dasar" class="kategori-badge notranslate">
Konsep Dasar <span class="badge-count-inline">25 Artikel</span>
</a>
<h3>Buku Contekan JavaScript (Bagian 2): Logika Kondisi dan Perulangan</h3>
</div>
<a href="artikel.php?id=82" class="read-more">Baca →</a>
</div>
</article>
</div>
</div>
</div>
</article>
</main>
</div>
</div>
<footer class="glass-panel" style="text-align: center; padding: 20px;">
<p>© 2026 Jurnal Coding. Semua Hak Dilindungi. | <a href="privacy.php" style="color: #00ffff; text-decoration: none;">Privacy Policy</a> | <a href="disclaimer.php" style="color: #00ffff; text-decoration: none;">Disclaimer</a></p>
</footer>
<script>
function copyToClipboard(url) {
navigator.clipboard.writeText(url).then(function() {
const copyBtn = document.getElementById('copyBtn');
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = "✅ Tautan Disalin!";
copyBtn.style.color = "#00ffff";
copyBtn.style.borderColor = "#00ffff";
setTimeout(() => {
copyBtn.innerHTML = originalText;
copyBtn.style.color = "#fff";
copyBtn.style.borderColor = "rgba(255,255,255,0.2)";
}, 2500);
}).catch(function(err) {
console.error('Gagal menyalin: ', err);
alert("Gagal menyalin tautan.");
});
}
</script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
Perlu kamu ketahui, setiap website yang ada di seluruh penjuru internet saat ini—mulai dari mesin pencari Google yang minimalis, media sosial Facebook yang super padat, toko online Tokopedia, hingga blog Jurnal Coding tempat kamu membaca tulisan ini—semuanya dibangun di atas satu fondasi dasar yang sama. Fondasi dasar tersebut bernama **HTML**.
Bagi orang awam, melihat barisan kode HTML yang dipenuhi oleh tanda kurung siku seperti ``, ``, atau `` terasa seperti melihat tulisan hieroglif Mesir kuno yang bikin pusing. Tapi jangan panik dulu, karena hari ini kita akan membongkar habis rahasia HTML menggunakan analogi yang sangat akrab dengan kehidupan sehari-hari kita.
### HTML Bukan Bahasa Pemrograman! (Mari Meluruskan Mitos)
Sebelum kita masuk ke contoh kodenya, ada satu fakta unik yang wajib kamu ketahui agar kamu tidak ditertawakan oleh para programmer senior di forum internet. Catat ini baik-baik di otakmu: **HTML secara teknis bukanlah sebuah bahasa pemrograman.**
HTML singkatan dari *HyperText Markup Language* (Bahasa Markah). Kenapa dia tidak disebut bahasa pemrograman? Karena HTML tidak memiliki logika! HTML tidak bisa berpikir, tidak bisa menghitung matematika (seperti kalkulator yang kita buat kemarin), tidak bisa memproses data keuangan, dan tidak bisa mengambil keputusan If/Else.
Tugas HTML murni hanya satu: memberikan struktur, perintah susunan, dan menandai teks agar browser komputer tahu apa fungsi dari tulisan tersebut.
### Analogi Cetak Biru Arsitektur Rumah
Untuk membayangkan bagaimana sebuah website bekerja, mari kita gunakan analogi proses pembangunan sebuah Rumah Mewah. Sebuah website utuh yang profesional dibangun oleh tiga komponen utama yang saling bekerja sama secara harmonis:
1. **HTML adalah Struktur Bangunan Rumah.**
HTML bertindak sebagai struktur beton, tiang besi penyangga, susunan batu bata dinding, kerangka atap, dan pembagian ruang (di mana letak ruang tamu, di mana letak kamar mandi). Tanpa HTML, rumahmu tidak akan pernah berdiri tegak.
2. **CSS adalah Desain Interior dan Estetika.**
Setelah struktur rumah dari HTML selesai, rumah tersebut tentu saja masih terlihat kaku dan jelek (murni semen abu-abu). Di sinilah CSS masuk memberikan warna cat dinding (misal warna hitam elegen), memasang keramik marmer, memilih jenis lampu gantung, dan menghias gorden jendela agar rumah nyaman dipandang mata.
3. **JavaScript adalah Aliran Listrik dan Sistem Otomatis.**
Rumah yang sudah kokoh (HTML) dan sudah cantik (CSS) tidak akan bisa berfungsi cerdas tanpa adanya listrik. JavaScript bertindak sebagai kabel listrik yang membuat sakelar lampu bisa diklik, menghidupkan AC otomatis saat suhu panas, membuka gerbang pagar otomatis menggunakan sensor wajah, dan menyalakan pompa air kolam renang.
Hari ini, fokus utama kita adalah menjadi seorang arsitek dasar: kita akan merakit susunan besi dan batu bata pertama kita menggunakan HTML!
### Memahami Mantra Tag dan Elemen HTML
Cara kerja HTML adalah dengan membungkus teks menggunakan simbol tanda kurung siku yang biasa kita sebut sebagai **Tag**. Hampir seluruh Tag di dalam HTML diciptakan berpasangan: ada Tag Pembuka untuk memulai instruksi, dan ada Tag Penutup untuk mengakhiri instruksi (ditandai dengan simbol garis miring `/`).
Mari kita lihat bagaimana wujud cetak biru kerangka HTML yang paling standar di dunia industri:
<html>
<head>
<title>Halaman Pertama Saya</title>
</head>
<body>
<h1>Selamat Datang di Website Saya!</h1>
<p>Ini adalah paragraf pertama yang saya tulis dari udara kosong.</p>
</body>
</html>
Mari kita bedah anatomi makhluk di atas satu per satu dengan santai:
- `` : Ini adalah kalimat permisi kepada browser (seperti Chrome) untuk memberi tahu bahwa file ini adalah file dokumen HTML versi modern (HTML5).
- `` dan `` : Ini adalah batas wilayah kedaulatan utama website-mu. Seluruh kode website wajib ditulis di dalam kurungan tag ini.
- `` dan `` : Bagian kepala. Ini adalah area rahasia website yang isinya tidak akan dimunculkan di layar monitor pengunjung. Fungsinya untuk menyimpan informasi latar belakang, seperti judul tab browser yang dibungkus oleh tag `