HTML (HyperText Markup Language) adalah fondasi dari semua halaman web. Artikel ini akan membimbing Anda melalui semua aspek penting dari HTML, mulai dari pengenalan hingga topik-topik lanjutan dengan penjelasan yang mendalam dan menyeluruh.
1. HTML Introduction
HTML adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web. HTML memungkinkan Anda untuk mengatur konten menjadi berbagai struktur seperti paragraf, heading, gambar, tabel, dan lainnya. Dengan HTML, developer dapat menampilkan informasi dengan cara yang terstruktur dan mudah dibaca oleh pengguna maupun mesin pencari.
HTML pertama kali dikembangkan oleh Tim Berners-Lee pada awal 1990-an, dan sejak saat itu telah berevolusi melalui berbagai versi. Versi terbaru, HTML5, memperkenalkan fitur semantik, multimedia bawaan (seperti video dan audio), serta kemampuan interaktif lainnya yang tidak memerlukan plugin tambahan.
2. HTML Editors
Untuk menulis HTML, Anda memerlukan editor teks. Ada dua jenis editor yang umum digunakan:
- Editor Teks Sederhana: Notepad (Windows), TextEdit (Mac)
- Editor Kode Profesional: Visual Studio Code, Sublime Text, Atom, Brackets
Editor profesional biasanya dilengkapi dengan fitur seperti highlight sintaks, autocomplete, linting, dan integrasi dengan terminal atau sistem kontrol versi seperti Git, sehingga sangat memudahkan pengembangan.
3. HTML Basic
Struktur dasar dokumen HTML mencakup beberapa elemen utama, seperti <!DOCTYPE html>, <html>, <head>, dan <body>. Berikut adalah contoh struktur HTML paling dasar:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Setiap halaman HTML dimulai dengan deklarasi doctype yang memberi tahu browser bahwa ini adalah dokumen HTML5. Elemen <head> digunakan untuk menyisipkan informasi metadata seperti judul halaman, charset, link CSS, dan lainnya. Sedangkan semua konten yang akan ditampilkan kepada pengguna diletakkan dalam <body>.
4. HTML Elements
Elemen HTML terdiri dari tag pembuka dan penutup, dan biasanya memiliki konten di dalamnya. Contohnya:
<p>Ini adalah paragraf.</p>
Beberapa elemen bersifat kosong (self-closing) dan tidak memerlukan tag penutup, contohnya:
<img src="logo.png" alt="Logo"> <br>
Semua elemen HTML bisa memiliki atribut untuk menambahkan informasi tambahan atau modifikasi perilaku elemen tersebut.
5. HTML Attributes
Atribut HTML memberikan detail tambahan tentang elemen HTML. Atribut ditulis di dalam tag pembuka, terdiri dari nama dan nilai. Contoh:
<a href="https://www.google.com" target="_blank">Kunjungi Google</a>
Atribut umum:
href: URL tujuan untuk tautan.src: Sumber file untuk gambar atau iframe.alt: Teks alternatif untuk gambar.class: Nama kelas untuk CSS.id: Penanda unik untuk elemen.
Atribut bisa digunakan untuk styling, interaksi, aksesibilitas, dan fungsionalitas lainnya.
6. HTML Headings
Baca juga:
HTML memiliki enam level heading, dari <h1> sampai <h6>. Heading digunakan untuk menunjukkan struktur hierarki konten pada halaman.
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Seksi</h3>
Heading <h1> biasanya digunakan sekali di setiap halaman untuk mewakili topik utama, dan heading berikutnya digunakan untuk subbagian.
7. HTML Paragraphs
Paragraf adalah blok teks yang didefinisikan dengan elemen <p>. HTML secara otomatis menambahkan jarak sebelum dan sesudah paragraf.
<p>Ini adalah satu paragraf.</p>
Untuk memecah baris tanpa memulai paragraf baru, gunakan elemen <br>.
8. HTML Styles
Anda dapat memberikan gaya pada elemen HTML menggunakan atribut style, tetapi cara ini tidak dianjurkan untuk proyek besar. Contoh penggunaan inline style:
<p style="color:red; font-size:18px;">Ini adalah teks berwarna merah.</p>
Namun, untuk pengembangan skala besar, Anda sebaiknya menggunakan CSS terpisah agar kode HTML tetap bersih dan terstruktur.
9. HTML Formatting
HTML menyediakan berbagai elemen untuk memformat teks, seperti:
<b>atau<strong>untuk teks tebal<i>atau<em>untuk teks miring<mark>untuk menandai teks<small>untuk teks lebih kecil<del>untuk teks dicoret<ins>untuk teks yang disisipkan
Contoh:
<p><strong>Penting:</strong> Jangan lupa menyimpan pekerjaan Anda.</p>
10. HTML Quotations
Untuk menampilkan kutipan, Anda dapat menggunakan tag berikut:
<blockquote>untuk kutipan panjang<q>untuk kutipan pendek<cite>untuk referensi sumber<abbr>untuk singkatan
<blockquote cite="https://example.com">
Ini adalah kutipan dari sumber luar.
</blockquote>
11. HTML Comments
Komentar tidak akan ditampilkan di browser dan digunakan untuk menambahkan catatan atau menjelaskan kode.
<!-- Ini adalah komentar -->
Komentar sangat berguna dalam tim pengembang atau untuk dokumentasi pribadi.
(Artikel ini akan dilanjutkan pada bagian kedua dengan pembahasan lengkap dan panjang untuk setiap topik lanjutan seperti HTML Colors, CSS, Links, Images, Favicon, Tables, Lists, dan lainnya.)
