001. Pengenalan HTML : Struktur & Element Dasar
Last update at Januari 30, 2024 by Dani
Apa itu HTML?
HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan menyusun konten pada halaman web. HTML memberikan dasar untuk menyusun elemen-elemen dasar seperti teks, gambar, dan hyperlink.
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>Keterangan :
<!DOCTYPE html>: Menentukan versi HTML yang digunakan (HTML5).<html>: Memulai elemen HTML.<head>: Berisi informasi-informasi meta dan pengaturan dokumen.<meta charset="UTF-8">: Menentukan karakter set dokumen (UTF-8 untuk Unicode).<meta name="viewport" content="width=device-width, initial-scale=1.0">: Menentukan tampilan responsif untuk perangkat bergerak.<title>: Menentukan judul halaman yang akan muncul di tab peramban.<body>: Tempat untuk semua konten yang akan ditampilkan di halaman web.
Elemen-elemen Dasar HTML
1. Text
<h1>Heading 1</h1>
<p>Paragraf teks.</p>
<strong>Teks tebal</strong>
<em>Teks miring</em>2. Gambar (Image)
<img src="gambar.jpg" alt="Deskripsi gambar">atau bisa dengan URL gambar
<img src="https://domain.com/url-gambar.jpg" alt="Deskripsi gambar">3. Link
<a href="https://www.contohlink.com" target="_blank">Contoh Link</a>4. Daftar (List)
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
</ul>
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
</ol>5. Formulir (Form)
<form action="/proses-data" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Kirim">
</form>Atribut Penting
id: Memberikan identifikasi unik pada elemen.class: Menentukan satu atau lebih kelas untuk elemen.src: Menentukan sumber (source) gambar atau media.alt: Deskripsi alternatif untuk gambar (penting untuk aksesibilitas).href: Alamat URL untuk tautan.
Pentingnya Aksesibilitas:
Pastikan untuk menggunakan atribut alt pada elemen <img> untuk memberikan deskripsi alternatif pada gambar, membantu pengguna dengan keterbatasan penglihatan.
Latihan:
- Buat halaman HTML sederhana dengan judul “Berita Hari Ini”, tambahkan beberapa paragraf teks, gambar, dan tautan.
- Buat formulir sederhana dengan tiga form nama, email, password.
Dengan memahami dasar-dasar HTML, Anda dapat membangun struktur dasar halaman web dan melanjutkan untuk mempelajari CSS dan JavaScript untuk meningkatkan tampilan dan fungsionalitasnya.
