Memasuki dunia pengembangan web bisa terasa menakutkan dengan banyaknya bahasa dan teknologi yang ada. Namun, di balik semua itu, ada satu fondasi utama yang wajib dikuasai oleh siapa pun yang ingin berkecimpung di dunia web: HTML. Artikel pertama dari seri “Belajar HTML” ini akan mengupas tuntas apa itu HTML, mulai dari pengertian dasarnya hingga peran vitalnya dalam membangun sebuah halaman web.
Apa Itu HTML?
HTML adalah singkatan dari Hypertext Markup Language. Mari kita bedah setiap katanya untuk memahami maknanya secara menyeluruh:
- Hypertext: Ini merujuk pada teks yang memiliki tautan (link) ke teks atau dokumen lain. Kemampuan untuk saling terhubung inilah yang menjadi inti dari World Wide Web, memungkinkan kita untuk bernavigasi dari satu halaman ke halaman lainnya dengan mudah.
- Markup Language (Bahasa Markah): Berbeda dengan bahasa pemrograman yang penuh dengan logika dan algoritma, HTML adalah bahasa yang menggunakan “tanda” atau “tag” untuk memberikan struktur dan makna pada konten di sebuah halaman web. Sederhananya, HTML memberitahu browser bagaimana cara menampilkan teks, gambar, dan elemen lainnya.
Jadi, HTML bukanlah bahasa pemrograman, melainkan bahasa markah standar yang berfungsi untuk membuat dan menyusun struktur konten pada sebuah halaman web. Anggaplah HTML sebagai kerangka atau tulang punggung dari sebuah bangunan (website).
Fungsi Utama HTML
Peran HTML dalam sebuah website sangatlah fundamental. Tanpa HTML, browser tidak akan tahu bagaimana cara menampilkan halaman web dengan benar. Berikut adalah beberapa fungsi utama dari HTML:
- Memberikan Struktur Halaman: Fungsi paling dasar dari HTML adalah untuk mendefinisikan berbagai bagian dari sebuah halaman web, seperti judul, paragraf, daftar (list), gambar, dan lain-lain.
- Membangun Navigasi: Melalui penggunaan hyperlink (
<a>), HTML memungkinkan pengguna untuk berpindah dari satu halaman ke halaman lain di dalam satu situs web yang sama ataupun ke situs web yang berbeda. - Menyematkan Konten Multimedia: HTML memungkinkan penyisipan berbagai jenis media seperti gambar, video, dan audio ke dalam halaman web, membuatnya lebih informatif dan menarik.
- Membuat Formulir Interaktif: HTML menyediakan elemen-elemen untuk membuat formulir yang dapat diisi oleh pengguna, seperti formulir pendaftaran, login, atau kolom komentar.
Penting untuk dipahami bahwa HTML bekerja sama dengan dua teknologi web lainnya: CSS (Cascading Style Sheets) untuk mengatur tampilan visual (desain, warna, tata letak) dan JavaScript untuk menambahkan interaktivitas dan fungsionalitas dinamis. Jika HTML adalah kerangkanya, maka CSS adalah cat dan dekorasinya, sementara JavaScript adalah sistem kelistrikan dan perpipaannya.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang harus diikuti. Struktur ini terdiri dari beberapa elemen esensial yang “membungkus” konten di dalamnya. Berikut adalah contoh struktur dasar sebuah file HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Ini adalah Judul Utama</h1>
<p>Ini adalah sebuah paragraf.</p>
</body>
</html>
Mari kita bedah setiap bagiannya:
<!DOCTYPE html>: Deklarasi ini mendefinisikan bahwa dokumen ini adalah dokumen HTML5. Ini adalah baris pertama yang harus ada di setiap file HTML.<html>: Elemen ini adalah elemen akar (root) dari sebuah halaman HTML. Semua elemen lain harus berada di dalam tag pembuka<html>dan tag penutup</html>.<head>: Bagian ini berisi informasi meta tentang halaman web yang tidak ditampilkan secara langsung di konten utama. Contohnya adalah judul halaman (yang muncul di tab browser), tautan ke file CSS, dan informasi lainnya.<title>: Menentukan judul halaman web. Teks di antara tag ini akan muncul pada tab atau judul jendela browser.<body>: Elemen ini berisi semua konten yang akan ditampilkan kepada pengguna, seperti teks, gambar, video, tautan, dan lain-lain. Semua yang Anda lihat di halaman web berada di dalam bagian ini.
Dengan memahami pengertian dan struktur dasar ini, Anda telah mengambil langkah pertama yang paling penting dalam perjalanan belajar HTML dan pengembangan web. Pada artikel-artikel selanjutnya, kita akan mulai mendalami berbagai macam tag dan elemen yang bisa Anda gunakan untuk membangun halaman web yang lebih kompleks dan kaya fitur.
