HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat struktur halaman web. Bisa dibilang, HTML ini seperti pondasi sebuah rumah. Tanpa pondasi yang kuat, rumah tidak akan kokoh, begitu juga dengan website tanpa HTML. Artikel ini akan membahas beberapa tag dasar yang sering digunakan dalam HTML, seperti <div>, <p>, <h1>, <img>, dan <a>. Dengan memahami tag-tag ini, kamu bisa mulai membuat halaman web yang sederhana dan terstruktur dengan baik.
1. Tag <div>: Membagi Halaman
Tag <div> digunakan untuk membagi halaman web menjadi beberapa bagian. Tag ini tidak mempengaruhi tampilan halaman secara langsung, tetapi sangat berguna untuk mengelompokkan elemen-elemen lain agar lebih terorganisir.
Contoh:
<div>
<p>Ini adalah teks dalam sebuah div.</p>
</div>
Penjelasan: Tag <div> sering digunakan untuk membagi halaman menjadi blok-blok terpisah yang bisa diberi style menggunakan CSS. Misalnya, kamu bisa memberi warna latar belakang atau margin agar konten dalam <div> lebih rapi. Tag ini sangat berguna saat membangun layout halaman.
2. Tag <p>: Membuat Paragraf
Tag <p> digunakan untuk membuat paragraf dalam halaman web. Setiap kali kamu ingin menambahkan teks dalam bentuk paragraf, kamu cukup menulisnya di dalam tag ini. Tag <p> juga secara otomatis memberikan jarak antar paragraf, jadi kamu tidak perlu khawatir teks akan saling menempel.
Contoh:
<p>Ini adalah sebuah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>Penjelasan: Tag <p> sangat penting karena membantu mengorganisir teks menjadi blok-blok yang mudah dibaca. Dengan menggunakan tag ini, setiap kalimat akan terlihat terpisah dengan jarak yang cukup, membuat halaman web lebih rapi dan nyaman dibaca.
3. Tag <h1> hingga <h6>: Judul Halaman
Tag <h1> hingga <h6> digunakan untuk membuat judul atau heading di halaman web. <h1> adalah yang terbesar, sedangkan <h6> yang terkecil. Penggunaan heading yang tepat membantu menyusun konten dengan hierarki yang jelas, sehingga pengunjung dan mesin pencari dapat lebih mudah memahami struktur halaman.
Contoh:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub-sub Judul</h3>Penjelasan: Menjaga urutan heading yang benar sangat penting. Gunakan <h1> untuk judul utama halaman, lalu gunakan <h2> untuk subjudul dan seterusnya. Struktur heading yang baik juga membantu dalam optimasi mesin pencari (SEO), karena mesin pencari dapat memahami hierarki informasi di halaman kamu.
4. Tag <img> dalam HTML: Menambahkan Gambar
Tag <img> digunakan untuk menyisipkan gambar ke dalam halaman web. Berbeda dengan tag lainnya, tag <img> tidak memiliki tag penutup, hanya atribut yang wajib diisi seperti src untuk menunjukkan sumber gambar dan alt untuk deskripsi gambar.
Contoh:
<img src="gambar.jpg" alt="Deskripsi gambar">
Penjelasan:
src: Menunjukkan lokasi file gambar, bisa berupa URL atau path lokal.alt: Menyediakan deskripsi gambar, yang penting terutama bagi pengguna dengan keterbatasan penglihatan. Selain itu, deskripsi ini juga muncul jika gambar gagal dimuat.
Dengan menambahkan gambar, halaman web menjadi lebih menarik secara visual. Pastikan gambar yang digunakan relevan dengan konten dan memiliki kualitas yang baik.
5. Tag <a> pada HTML: Membuat Tautan
Tag <a> digunakan untuk membuat tautan atau hyperlink yang menghubungkan satu halaman dengan halaman lain. Hyperlink ini memungkinkan pengunjung untuk berpindah ke halaman web lain atau bahkan bagian tertentu di halaman yang sama.
Contoh:
<a href="https://www.google.com">Kunjungi Google</a>Penjelasan:
href: Atribut ini berisi alamat tujuan dari tautan. Bisa berupa halaman lain di website yang sama, atau menuju situs lain di internet.- Teks yang ada di antara tag
<a>adalah yang akan tampil sebagai link yang bisa diklik oleh pengunjung.
Tautan ini memudahkan navigasi di web dan memungkinkan pengunjung untuk menjelajahi lebih banyak informasi. Penggunaan tautan yang jelas dan terstruktur membuat pengunjung merasa lebih nyaman saat menjelajah halaman web kamu.
6. Menggunakan CSS dan JavaScript dengan HTML
Walaupun HTML memberikan struktur dasar, tampilan halaman web sangat bergantung pada CSS dan JavaScript. CSS digunakan untuk styling, sedangkan JavaScript digunakan untuk memberikan interaktivitas pada halaman.
Contoh Integrasi CSS:
<style>
p {
color: blue;
font-size: 16px;
}
</style>Contoh Integrasi JavaScript:
<script>
function greet() {
alert("Selamat datang di website kami!");
}
</script>Dengan menambahkan CSS, kamu bisa memperindah tampilan halaman, seperti mengubah warna teks atau layout. Sedangkan JavaScript memungkinkan kamu membuat halaman yang interaktif, seperti memberikan peringatan pop-up atau memvalidasi form.
Kesimpulan
Tag-tag dasar HTML seperti <div>, <p>, <h1>, <img>, dan <a> sangat penting untuk membangun struktur halaman web. Dengan menguasai penggunaan tag-tag ini, kamu sudah bisa membuat halaman web yang sederhana namun tetap terstruktur dengan baik.
Untuk membuat halaman web yang lebih menarik dan interaktif, kamu bisa memadukan HTML dengan CSS dan JavaScript. Selain itu, kamu bisa terus belajar dan menggali pengetahuan lebih dalam dengan mengikuti kelas pelatihan seperti Web Master Expert atau pelatihan lainnya di Dhuo Creative. Jangan lupa untuk mencari sumber belajar lain yang dapat membantu kamu berkembang, misalnya melalui Instagram Les Komputer Medan atau bekerja sama dengan tim profesional di Dhuocreative yang siap membantu perjalanan belajar kamu.
Selamat belajar dan semoga sukses dalam perjalanan menguasai web development!