HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan menyusun konten di web.
Dalam panduan ini, kita akan membahas dasar-dasar HTML, mulai dari pengenalan hingga teknik yang lebih maju, sehingga Anda dapat memulai perjalanan Anda dalam pengembangan web.
1. Apa Itu HTML?
HTML adalah bahasa yang digunakan untuk membuat struktur halaman web. Dengan HTML, Anda dapat menentukan elemen-elemen seperti teks, gambar, tautan, dan banyak lagi.
HTML menggunakan tag untuk menandai elemen-elemen ini, yang kemudian diinterpretasikan oleh browser untuk ditampilkan kepada pengguna.
2. Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang harus diikuti. Berikut adalah contoh struktur dasar dokumen HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di Panduan HTML</h1>
<p>Ini adalah paragraf pertama Anda.</p>
</body>
</html>Penjelasan Struktur:
<!DOCTYPE html>: Menunjukkan bahwa dokumen ini adalah dokumen HTML5.
<html>: Elemen root dari dokumen HTML.
<head>: Bagian yang berisi informasi meta, judul, dan link ke stylesheet.
<body>: Bagian yang berisi konten yang akan ditampilkan di halaman.
3. Tag HTML Dasar
Berikut adalah beberapa tag HTML dasar yang sering digunakan:
<h1> hingga <h6>: Tag untuk heading, dengan <h1> sebagai yang paling penting.
<p>: Tag untuk paragraf.
<a>: Tag untuk tautan (anchor).
<img>: Tag untuk menampilkan gambar.
<ul> dan <ol>: Tag untuk daftar tidak terurut dan terurut.
<div>: Tag untuk membuat blok konten.
Contoh Penggunaan Tag:
<h2>Daftar Belanja</h2>
<ul>
<li>Apel</li>
<li>Jeruk</li>
<li>Anggur</li>
</ul>4. Atribut dalam HTML
Atribut memberikan informasi tambahan tentang elemen HTML. Atribut ditulis di dalam tag pembuka. Contoh atribut yang umum digunakan adalah href untuk tautan dan src untuk gambar.
Contoh Penggunaan Atribut:
<a href="https://www.example.com">Kunjungi Website</a>
<img src="gambar.jpg" alt="Deskripsi Gambar">5. Membuat Tautan dan Menyisipkan Gambar
Tautan dan gambar adalah elemen penting dalam halaman web. Berikut adalah cara membuat tautan dan menyisipkan gambar:
Membuat Tautan:
<a href="https://www.google.com" target="_blank">Buka Google</a>Menyisipkan Gambar:
<img src="logo.png" alt="Logo Perusahaan" width="200" height="100">6. Membuat Formulir
Formulir memungkinkan pengguna untuk mengirimkan data. Berikut adalah contoh sederhana formulir HTML:
<form action="/submit" method="post">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Kirim">
</form>7. CSS dan HTML
CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan tata letak halaman HTML. Anda dapat menghubungkan file CSS eksternal atau menulis CSS langsung di dalam tag <style> di bagian <head>.
Contoh Menghubungkan CSS:
<link rel="stylesheet" href="styles.css">8. Praktik Terbaik dalam Menulis HTML
Gunakan tag semantik untuk meningkatkan aksesibilitas.
Selalu tutup tag yang dibuka.
Gunakan atribut alt pada gambar untuk SEO dan aksesibilitas.
Jaga agar kode tetap bersih dan terorganisir.
9. Kesimpulan
HTML adalah fondasi dari setiap halaman web. Dengan memahami dasar-dasar HTML, Anda dapat mulai membangun situs web Anda sendiri.
Teruslah berlatih dan eksplorasi lebih lanjut tentang HTML dan teknologi web lainnya untuk meningkatkan keterampilan Anda.
Dengan panduan ini, Anda sekarang memiliki pemahaman yang lebih baik tentang dasar-dasar HTML. Selamat belajar dan semoga sukses dalam perjalanan pengembangan web Anda!