Ingin tahu bagaimana sebuah halaman web tercipta? Jawabannya ada pada HTML (HyperText Markup Language). HTML adalah pondasi dasar dari setiap website yang ada di internet. Tanpa HTML, browser tidak akan tahu bagaimana cara menampilkan teks, gambar, tombol, atau video di layar Anda.
Kabar baiknya, HTML adalah bahasa yang paling ramah pemula dan bisa dipelajari dalam hitungan jam. Panduan ini akan membawa Anda memahami dasar-dasar HTML untuk mulai merancang halaman website pertama Anda sendiri.
Apa Sebenarnya HTML Itu?
HTML bukanlah bahasa pemrograman untuk membuat logika rumit (seperti menghitung data atau mengambil keputusan), melainkan bahasa markup. Fungsinya adalah untuk menstrukturkan konten di dalam sebuah halaman web.
Bayangkan sebuah rumah:
-
HTML adalah kerangka atau tembok rumah (menentukan letak pintu, jendela, dan ruangan).
-
CSS adalah cat dinding dan dekorasinya (memperindah tampilan).
-
JavaScript adalah sistem kelistrikan dan interaksinya (membuat lampu menyala atau pintu otomatis).
Struktur Dasar Dokumen HTML
Setiap file HTML memiliki kerangka standar yang wajib ada. Anda bisa mengetik kode di bawah ini menggunakan aplikasi teks editor gratis seperti VS Code atau Notepad, lalu simpan dengan nama index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah halaman website pertama yang saya buat sendiri menggunakan HTML.</p>
</body>
</html>
Penjelasan Struktur:
-
<!DOCTYPE html>: Memberitahu browser bahwa dokumen ini menggunakan standar HTML5 terbaru. -
<html>: Tag pembuka seluruh elemen dokumen HTML. -
<head>: Berisi informasi meta, tautan gaya, dan judul halaman (title) yang muncul di tab browser. -
<body>: Berisi semua konten yang akan tampak dilihat pengguna di layar, seperti teks, gambar, dan tombol.
Mengenal Tag HTML yang Sering Digunakan
Dalam HTML, kita menggunakan Tag (diapit oleh tanda kurung siku < >) untuk memberi tahu browser bagaimana teks atau objek harus ditampilkan. Sebagian besar tag memiliki pasangan penutup dengan garis miring </>.
-
Heading (Judul): Digunakan untuk judul teks dari
<h1>(paling besar/penting) hingga<h6>(paling kecil).-
<h1>Ini Judul Utama</h1>
-
-
Paragraf: Digunakan untuk blok teks biasa.
-
<p>Ini adalah paragraf teks penjelasan.</p>
-
-
Tautan (Link): Digunakan untuk mengarahkan pengguna ke halaman lain menggunakan atribut
href.-
<a href="[https://google.com](https://google.com)">Kunjungi Google</a>
-
-
Gambar: Digunakan untuk menampilkan gambar dengan atribut
src(sumber file) danalt(teks alternatif).-
<img src="foto.jpg" alt="Foto Profil Saya">
-
-
Daftar (List): Membuat daftar berurutan (
<ol>) atau tidak berurutan (<ul>) dengan isi item (<li>).
Langkah Praktis Membuat Halaman Profil Sederhana
Untuk mempercepat pemahaman, mari buat proyek mini berupa halaman web profil pribadi:
-
Buka teks editor Anda (seperti VS Code).
-
Buat file baru bernama
profil.html. -
Masukkan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Profil Saya</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Halo! Nama saya adalah calon seorang *Web Developer*.</p>
<h2>Hobi Saya</h2>
<ul>
<li>Membaca Buku Teknologi</li>
<li>Menulis Kode Pemrograman</li>
<li>Bermain Game Strategi</li>
</ul>
<p>Hubungi saya via <a href="https://linkedin.com">LinkedIn</a>.</p>
</body>
</html>
-
Simpan file tersebut, lalu klik dua kali pada file
profil.htmluntuk membukanya langsung di browser langganan Anda (Chrome, Edge, atau Firefox).
Langkah Selanjutnya
Setelah menguasai struktur dasar HTML ini, langkah berikutnya adalah mempelajari CSS (Cascading Style Sheets) agar website sederhana Anda tidak terlihat membosankan dan memiliki warna serta tata letak yang menarik.
Bagian mana dari struktur HTML di atas yang ingin Anda coba eksplorasi lebih lanjut, menambahkan tautan gambar atau membuat daftar menu navigasi?