Artikel ini akan menjelaskan konsep dasar HTML dengan cara yang sederhana dan mudah dipahami. Jangan takut jika Kamu menemui tag yang belum kamu lihat sebelumnya, kami akan membahasnya secara sederhana.
Mengenal Dokumen HTML
Setiap dokumen HTML harus dimulai dengan deklarasi tipe dokumen <!DOCTYPE html>
. Deklarasi ini penting agar browser dapat menampilkan halaman web dengan benar. Dokumen HTML itu sendiri berada di antara tag <html>
dan </html>
, sementara konten yang terlihat oleh pengguna berada dalam tag <body>
dan </body>
.
Contoh Struktur Dasar HTML
<!DOCTYPE html>
<html>
<body>
<h1>Judul Pertama Saya</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Memahami Deklarasi <!DOCTYPE>
Deklarasi <!DOCTYPE>
digunakan untuk memberi tahu browser jenis dokumen yang sedang digunakan, sehingga halaman web dapat ditampilkan dengan benar. Deklarasi ini harus ditempatkan di bagian paling atas dokumen, sebelum tag HTML lainnya. Dalam HTML5, deklarasi ini ditulis sebagai:
<!DOCTYPE html>
Judul dalam HTML
Judul dalam HTML ditentukan dengan menggunakan tag <h1>
hingga <h6>
, dengan <h1>
sebagai judul yang paling penting dan <h6>
yang paling kurang penting. Berikut adalah contohnya:
<h1>Ini adalah Judul 1</h1>
<h2>Ini adalah Judul 2</h2>
<h3>Ini adalah Judul 3</h3>
Paragraf dalam HTML
Paragraf dalam HTML ditandai dengan tag <p>
. Berikut adalah contoh penulisan paragraf dalam HTML:
<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah paragraf lainnya.</p>
Tautan dalam HTML
dibuat dengan menggunakan tag <a>
, di mana tujuan tautan ditentukan melalui atribut href
. Berikut adalah contohnya:
<a href="https://aessaputra.net">Ini adalah tautan</a>
Gambar dalam HTML
Untuk menampilkan gambar di HTML, gunakan tag <img>
. Atribut penting dalam tag ini meliputi src
(sumber gambar), alt
(teks alternatif), width
(lebar), dan height
(tinggi). Contoh penggunaan tag gambar:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Cara Melihat Kode Sumber HTML
Jika Kamu penasaran tentang bagaimana suatu halaman web dibuat, Kamu bisa melihat kode sumber HTML dengan cara berikut:
- Tekan
CTRL + U
pada halaman yang ingin Kamu periksa. - Klik kanan pada halaman dan pilih “Lihat Sumber Halaman” untuk membuka tab baru yang berisi kode sumber HTML.
- Untuk memeriksa elemen tertentu, klik kanan pada elemen tersebut dan pilih “Periksa”. Di sini, Kamu akan melihat kode HTML dan CSS yang digunakan untuk membentuk elemen tersebut. Kamu juga bisa mengedit HTML atau CSS langsung dari panel yang terbuka.
Dengan menguasai dasar-dasar HTML ini, Kamu akan lebih siap untuk membuat dan mengedit halaman web secara mandiri.