HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat halaman web. Jika Anda baru mulai belajar web development, memahami struktur dasar HTML adalah langkah pertama yang sangat penting. Artikel ini akan membantu Anda memahami struktur dasar HTML dalam waktu singkat, sehingga Anda bisa mulai membangun halaman web pertama Anda!
baca juga : Bagaimana Teknologi Modern Mengoptimalkan Pengelolaan Perpustakaan?
1. Apa Itu HTML?
HTML adalah bahasa yang digunakan untuk memberi struktur pada halaman web. Ini terdiri dari elemen-elemen yang digunakan untuk menampilkan konten seperti teks, gambar, video, dan lainnya. HTML bekerja dengan tag yang memberi tahu browser bagaimana konten tersebut harus ditampilkan.
2. Struktur Dasar HTML
Struktur dasar HTML terdiri dari beberapa elemen penting. Berikut adalah contoh struktur dasar halaman HTML:
htmlCopy<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Web Saya</title>
</head>
<body>
<h1>Selamat Datang di Website Saya!</h1>
<p>Ini adalah halaman web pertama saya. Selamat belajar HTML!</p>
</body>
</html>
Penjelasan Elemen:
<!DOCTYPE html>: Mendeklarasikan bahwa dokumen ini adalah HTML5.<html>: Elemen root dari halaman HTML.<head>: Bagian yang berisi metadata seperti informasi karakter, judul halaman, dan link ke file CSS.<meta charset="UTF-8">: Mendefinisikan karakter encoding untuk halaman.<title>: Menentukan judul halaman web yang muncul di tab browser.<body>: Bagian ini berisi konten utama dari halaman web yang terlihat oleh pengunjung.<h1>: Tag untuk membuat judul utama di halaman.<p>: Tag untuk membuat paragraf teks.
3. Tag Penting dalam HTML
Beberapa tag HTML yang paling sering digunakan meliputi:
<h1>hingga<h6>: Digunakan untuk membuat heading atau judul, dengan<h1>adalah yang terbesar.<p>: Digunakan untuk paragraf teks.<a>: Digunakan untuk membuat link ke halaman lain.<img>: Digunakan untuk menampilkan gambar.<ul>,<ol>, dan<li>: Digunakan untuk membuat daftar (unordered, ordered, dan list item).
Contoh Penggunaan Tag <a> dan <img>:
htmlCopy<a href="https://www.example.com">Kunjungi Website</a>
<img src="gambar.jpg" alt="Deskripsi Gambar">
4. Membuat Daftar dengan HTML
HTML memungkinkan Anda untuk membuat daftar dengan dua cara:
- Unordered List (Daftar Tidak Terurut): Menggunakan tag
<ul>dan<li>untuk item. - Ordered List (Daftar Terurut): Menggunakan tag
<ol>dan<li>untuk item yang terurut.
Contoh Daftar:
htmlCopy<h2>Daftar Belanja</h2>
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
<h2>Langkah-langkah Membuat Kue</h2>
<ol>
<li>Ambil bahan</li>
<li>Campur bahan</li>
<li>Panggang</li>
</ol>
5. Menambahkan Gambar di Halaman Web
Untuk menambahkan gambar, Anda menggunakan tag <img>. Tag ini memerlukan atribut src (source) untuk menentukan sumber gambar dan alt untuk memberikan deskripsi gambar.
baca juga : Software Wajib Punya untuk Freelancer: Kerja Cerdas, Hasil Dahsyat!
Contoh Gambar:
htmlCopy<img src="gambar.jpg" alt="Gambar dari halaman web saya" width="300">
6. Formulir Input di HTML
HTML juga memungkinkan Anda membuat formulir untuk mengumpulkan data dari pengguna. Berikut adalah contoh sederhana dari formulir HTML:
htmlCopy<form action="/submit" method="POST">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Kirim">
</form>
penulis ; Karlina Sapitri