Dasar-Dasar HTML: Panduan Lengkap untuk Pemula

Pelajari dasar-dasar html dengan panduan lengkap ini, cocok untuk pemula yang ingin memahami struktur dan elemen dasar dalam web development.

HTML HyperText Markup Language adalah fondasi utama dalam pembuatan halaman web Dengan HTML, Anda dapat membuat struktur dasar sebuah situs, mulai dari teks, gambar, hingga elemen interaktif Bagi pemula yang ingin mempelajari web development, memahami dasar-dasar HTML adalah langkah awal yang penting

Apa Itu HTML

HTML adalah bahasa markup yang digunakan untuk menyusun dan menampilkan konten di web Berbeda dengan bahasa pemrograman seperti JavaScript atau Python, HTML tidak memiliki logika pemrograman, melainkan hanya berfungsi untuk mengatur tampilan elemen-elemen di dalam halaman web

Struktur dasar sebuah dokumen HTML biasanya diawali dengan deklarasi !DOCTYPE html diikuti dengan elemen html, head, dan body Berikut contoh sederhana

• !DOCTYPE html
• html lang="id"
• head
• meta charset="UTF-8"
• title Halaman Pertama Saya title
• head
• body
• h1 Selamat Datang di Website Saya h1
• p Ini adalah contoh dasar HTML p
• body
• html

Gambar 1 . Ilustrasi HTML

Struktur Dasar HTML

Dokumen HTML terdiri dari berbagai elemen yang memiliki fungsi berbeda-beda Berikut adalah beberapa elemen penting yang sering digunakan:

• html Elemen utama yang menampung semua konten halaman
• head Berisi informasi meta seperti judul title, stylesheet link, dan skrip script
• body Bagian utama yang berisi konten yang akan ditampilkan di browser
• h1 sampai h6 Digunakan untuk judul dengan tingkat kepentingan yang berbeda
• p Menandai paragraf dalam dokumen
• a Membuat tautan hyperlink ke halaman lain
• img Menampilkan gambar dalam halaman web

Gambar 2 . Ilustrasi Struktur HTML

Elemen Teks dan Gambar HTML

HTML memungkinkan kita untuk mengatur teks dan gambar dengan berbagai elemen Untuk memformat teks, kita dapat menggunakan

• b atau strong Membuat teks menjadi tebal
• i atau em Membuat teks menjadi miring
• u Memberikan garis bawah pada teks
• Contoh penggunaan elemen teks
• p strong HTML strong adalah bahasa markup untuk membuat halaman web p
• Sedangkan untuk menambahkan gambar, kita bisa menggunakan elemen img seperti berikut
• img src="gambar.jpg" alt="Gambar Contoh" width="300"

Gambar 3 . Ilustrasi Teks dan Gambar HTML

Tautan dan Daftar dalam HTML

Tautan link dalam HTML menggunakan elemen a, sedangkan daftar bisa berupa daftar tidak berurutan ul atau daftar berurutan ol

Contoh tautan

• a href="https://www.example.com" Kunjungi Website a
• Contoh daftar tidak berurutan
• ul
• li HTML li
• li CSS li
• li JavaScript li
• ul
• Contoh daftar berurutan
• ol
• li Pahami dasar HTML li
• li Pelajari CSS li
• li Praktik dengan proyek kecil li
• ol

Gambar 4 . Ilustrasi Tautan dan Daftar HTML

Formulir dan Input dalam HTML

Formulir dalam HTML memungkinkan pengguna untuk menginput data, seperti teks, email, dan tombol kirim

Contoh formulir sederhana

• form action="submit.php" method="post"
• label for="nama" Nama label
• input type="text" id="nama" name="nama" required
• python
• Copy
• Edit
• label for="email" Email label
• input type="email" id="email" name="email" required
• button type="submit" Kirim button
• form

Gambar 5 . Ilustrasi Formulir dan Input HTML

Kesimpulan

HTML adalah dasar dari semua halaman web yang kita lihat di internet Dengan memahami elemen-elemen HTML seperti teks, gambar, tautan, daftar, dan formulir, Anda dapat mulai membangun situs web sendiri Langkah berikutnya setelah menguasai HTML adalah mempelajari CSS untuk mempercantik tampilan dan JavaScript untuk menambahkan interaktivitas Semakin banyak latihan, semakin cepat Anda mahir dalam web development

---

Credit :
Penulis : Dzaki Syafian
Gambar oleh HTML dari Pixabay