Mengenal Dasar-dasar HTML untuk Pengembangan Website
HTML (Hypertext Markup Language) merupakan bahasa markup yang digunakan untuk membangun struktur dasar dari halaman web. Ini adalah fondasi dari setiap situs web dan menjadi kunci utama dalam mengorganisir dan menampilkan konten secara online. Dalam artikel ini, kita akan membahas dasar-dasar HTML yang diperlukan untuk memulai pengembangan website.
1. Struktur Dasar HTML
Setiap halaman HTML dimulai dengan elemen-elemen dasar. Berikut adalah struktur dasar HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman web -->
</body>
</html><!DOCTYPE html>: Menentukan versi HTML yang digunakan (HTML5).<html lang="en">: Elemen utama yang mengelilingi seluruh konten halaman.<head>: Mengandung informasi tentang dokumen seperti judul, meta tags, dan stylesheet.<meta charset="UTF-8">: Menentukan karakter set yang digunakan (UTF-8 adalah yang paling umum).<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengoptimalkan tampilan di perangkat berbeda.<title>: Menentukan judul halaman yang akan ditampilkan di tab browser.<body>: Mengandung semua konten yang akan ditampilkan di halaman web.
2. Elemen HTML Dasar
HTML memanfaatkan elemen-elemen untuk merinci dan mengelompokkan konten. Berikut adalah beberapa elemen dasar:
<h1>,<h2>, …,<h6>: Heading untuk level 1 hingga 6.<p>: Paragraf teks.<a href="url">: Hyperlink untuk membuat tautan ke halaman lain.<img src="url" alt="deskripsi">: Menyisipkan gambar dengan deskripsi alternatif.<ul>,<ol>,<li>: Membuat daftar tak terurut (bullet) atau terurut (numbered).
Contoh penggunaan elemen:
<h1>Judul Utama</h1>
<p>Ini adalah paragraf teks.</p>
<a href="https://www.contoh.com">Tautan Contoh</a>
<img src="gambar.jpg" alt="Deskripsi Gambar">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>3. Atribut HTML
Atribut memberikan informasi tambahan tentang elemen dan umumnya terdapat di dalam tag pembuka elemen. Beberapa contoh atribut meliputi:
class: Menetapkan nama kelas untuk elemen, digunakan untuk pemformatan CSS.id: Memberikan identifikasi unik untuk elemen tertentu.style: Menyematkan gaya langsung ke elemen.src,alt: Atribut gambar untuk menentukan sumber dan deskripsi alternatif.
Contoh:
<p class="teks-merah" id="paragraf-utama">Ini adalah paragraf dengan kelas dan id tertentu.</p>
<img src="gambar.jpg" alt="Deskripsi Gambar" style="width: 100%;">Kesimpulan
Dengan memahami dasar-dasar HTML, Anda dapat membuat struktur dasar untuk halaman web Anda. HTML memberikan fondasi yang kuat untuk memahami konsep-konsep dasar dalam pengembangan web dan merupakan langkah pertama yang penting dalam memahami teknologi web secara menyeluruh. Dengan praktik dan eksperimen, Anda akan semakin memahami dan mahir dalam menggunakan HTML untuk membuat halaman web yang interaktif dan menarik.
