HTML menjadi fondasi utama dalam pembuatan website. Hampir seluruh halaman web yang dibuka melalui browser dibangun menggunakan HTML sebagai kerangka dasarnya. Bagi siapa pun yang ingin belajar menjadi web developer, memahami HTML merupakan langkah pertama yang wajib dikuasai sebelum berlanjut ke CSS maupun JavaScript.
Materi HTML Basic dari W3Schools menjelaskan bahwa HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk menyusun struktur halaman web. Dengan HTML, kita dapat membuat judul, paragraf, gambar, tautan, tabel, formulir, hingga berbagai elemen lain yang tampil di browser. HTML bukan bahasa pemrograman, melainkan bahasa markup yang berfungsi mengatur susunan konten pada sebuah halaman website.
Mengenal Struktur Dasar HTML
Setiap dokumen HTML memiliki struktur yang hampir sama. Browser akan membaca struktur tersebut untuk menampilkan halaman sesuai dengan isi kode yang dibuat.
Berikut contoh struktur HTML paling sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah halaman HTML pertama saya.</p>
</body>
</html><!DOCTYPE html>berfungsi memberi tahu browser bahwa dokumen menggunakan HTML5.<html>merupakan elemen utama yang membungkus seluruh isi halaman.<head>berisi informasi halaman seperti judul, metadata, serta pengaturan lainnya.<title>menentukan judul yang muncul pada tab browser.<body>berisi seluruh konten yang akan tampil kepada pengunjung website.
Membuat Heading
Heading digunakan sebagai judul pada halaman web. HTML menyediakan enam tingkatan heading, mulai dari <h1> hingga <h6>.
Contoh:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Bagian</h3><h1> biasanya digunakan untuk judul utama halaman karena memiliki tingkat prioritas paling tinggi bagi pembaca maupun mesin pencari. Sementara <h2> hingga <h6> dipakai untuk membentuk struktur isi artikel agar lebih rapi.Membuat Paragraf
Untuk menampilkan teks biasa digunakan tag <p>.
Contohnya:
<p>Belajar HTML ternyata cukup mudah dipahami jika dipelajari secara bertahap.</p>
<p>Setiap elemen memiliki fungsi yang berbeda sesuai kebutuhan.</p>Menambahkan Link
Agar pengunjung dapat berpindah ke halaman lain, HTML menyediakan tag <a>.
Contoh:
<a href="https://www.mkacademy.id">
Kunjungi MK Academy
</a>href digunakan untuk menentukan alamat tujuan yang akan dibuka ketika link diklik.Menampilkan Gambar
Website akan terlihat lebih menarik jika dilengkapi gambar.
Contoh penulisannya:
<img src="gambar.jpg"
alt="Belajar HTML"
width="500">srcmenunjukkan lokasi file gambar.altmemberikan deskripsi apabila gambar gagal dimuat.widthmenentukan lebar gambar.
Contoh Coding HTML Lengkap
Berikut contoh halaman HTML sederhana yang menggabungkan heading, paragraf, gambar, dan link.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Dasar</title>
</head>
<body>
<h1>Belajar HTML</h1>
<p>HTML merupakan bahasa markup yang digunakan untuk membuat struktur website.</p>
<img src="html.jpg" alt="Belajar HTML" width="400">
<br><br>
<a href="https://www.w3schools.com">
Belajar HTML Gratis
</a>
</body>
</html>index.html, lalu dibuka menggunakan browser, maka seluruh elemen akan tampil sesuai urutan yang dibuat.Tips Belajar HTML Lebih Cepat
Supaya proses belajar lebih efektif, ada beberapa langkah yang bisa dilakukan.
- Gunakan editor seperti Visual Studio Code.
- Simpan file menggunakan ekstensi
.html. - Jalankan file langsung melalui browser.
- Biasakan mencoba setiap contoh kode agar memahami hasilnya.
- Pelajari fungsi setiap tag sedikit demi sedikit sebelum masuk ke CSS dan JavaScript.
W3Schools juga menyediakan fitur Try It Yourself yang memungkinkan pengguna mengubah kode HTML dan langsung melihat hasilnya tanpa harus menginstal aplikasi tambahan. Cara ini sangat membantu pemula memahami perubahan yang terjadi pada halaman web secara langsung.
HTML merupakan fondasi dalam pengembangan website. Dengan memahami struktur dokumen, heading, paragraf, link, gambar, serta elemen dasar lainnya, seseorang sudah memiliki bekal awal untuk membuat halaman web sederhana. Setelah menguasai HTML, proses belajar dapat dilanjutkan ke CSS untuk mempercantik tampilan dan JavaScript agar website menjadi lebih interaktif.
Bagi yang ingin memperdalam kemampuan web development, latihan secara rutin menjadi kunci utama. Semakin sering mencoba membuat halaman baru, semakin mudah memahami cara kerja HTML beserta berbagai tag yang tersedia.
