Struktur dasar dokumen HTML
Selamat datang di panduan singkat mengenai contoh membuat HTML. HTML (HyperText Markup Language) adalah tulang punggung dari hampir semua halaman web yang Anda lihat di internet. Memahami dasar-dasarnya adalah langkah pertama yang krusial bagi siapa pun yang tertarik pada pengembangan web.
HTML bukanlah bahasa pemrograman; ia adalah bahasa markup yang digunakan untuk menyusun struktur konten halaman web. Ia menggunakan serangkaian "tag" untuk mendefinisikan elemen seperti paragraf, judul, tautan, gambar, dan tabel. Tanpa HTML, halaman web hanya akan berupa teks mentah tanpa format.
Setiap dokumen HTML yang valid harus memiliki struktur dasar yang konsisten. Jika Anda mencari contoh membuat html yang paling mendasar, Anda akan selalu menemukan empat elemen utama ini:
<!DOCTYPE html>: Deklarasi ini memberi tahu browser bahwa dokumen tersebut ditulis menggunakan HTML versi terbaru (HTML5).<html>: Ini adalah elemen akar dari seluruh halaman. Semua elemen lain berada di dalamnya.<head>: Berisi metadata tentang dokumen HTML, seperti judul halaman (yang muncul di tab browser), tautan ke CSS, dan deskripsi.<body>: Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, video, dan tautan.Mari kita lihat contoh membuat html dalam bentuk kode yang bisa langsung Anda coba:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halaman Percobaan Saya</title>
</head>
<body>
<h1>Halo Dunia! Ini Halaman HTML Pertama Saya</h1>
<p>Saya berhasil membuat dokumen HTML dasar. Sekarang saya bisa menambahkan lebih banyak elemen.</p>
<a href="https://www.example.com">Kunjungi situs contoh</a>
</body>
</html>
Dalam HTML, kita menggunakan tag yang biasanya berpasangan: tag pembuka (misalnya, <p>) dan tag penutup (misalnya, </p>). Konten diletakkan di antara kedua tag tersebut.
Selain tag, terdapat juga atribut. Atribut memberikan informasi tambahan tentang suatu elemen dan selalu ditempatkan di dalam tag pembuka. Contoh atribut yang sangat umum adalah href pada tag tautan (<a>) dan src pada tag gambar (<img>).
Untuk menyematkan gambar, kita memerlukan atribut src (source) untuk menunjuk lokasi gambar dan atribut alt (alternative text) untuk deskripsi teks jika gambar gagal dimuat:
<img src="path/ke/gambar.jpg" alt="Deskripsi singkat tentang gambar ini">
Mempelajari contoh membuat html secara bertahap akan membantu Anda membangun fondasi yang kuat. Setelah Anda menguasai struktur dasar ini, langkah selanjutnya adalah menggabungkannya dengan CSS (Cascading Style Sheets) untuk membuat tampilan visual yang menarik dan responsif, terutama untuk perangkat seluler seperti yang kita terapkan pada tampilan artikel ini.
Ingatlah, HTML berfokus pada SEMANTIK (makna konten), sementara CSS berfokus pada PRESENTASI (tampilan konten). Menguasai keduanya secara bersamaan adalah kunci sukses dalam web development modern. Teruslah berlatih dengan mencoba membuat daftar, tabel, dan formulir sederhana untuk memperkuat pemahaman Anda.