Apa Itu HTML?
HTML (HyperText Markup Language) merupakan bahasa pemrograman dasar yang digunakan untuk membangun struktur dan konten situs web. HTML merupakan bahasa markup yang menggunakan tag-tag untuk menentukan elemen-elemen yang membentuk halaman web. Tag-tag ini berfungsi sebagai petunjuk bagi browser web untuk menampilkan konten secara benar.
HTML merupakan pondasi bagi setiap situs web, dan setiap programmer web perlu memahami dasar-dasarnya.
Cara Kerja HTML
HTML menggunakan tag untuk mendefinisikan berbagai jenis konten dalam sebuah halaman web. Tag biasanya diawali dengan karakter "<" dan diakhiri dengan karakter ">". Setiap tag memiliki nama tertentu yang menunjukkan jenis konten yang didefinisikan.
Contohnya:
<p>mendefinisikan sebuah paragraf teks<h1>mendefinisikan sebuah judul tingkat 1<img>mendefinisikan sebuah gambar
Tag dapat berisi atribut yang memberikan informasi tambahan tentang elemen tersebut. Atribut biasanya ditulis dalam bentuk "nama="nilai".
Contohnya:
<img src="gambar.jpg" alt="Gambar deskripsi">mendefinisikan sebuah gambar dengan sumber "gambar.jpg" dan teks alternatif "Gambar deskripsi".
Struktur Dasar HTML
Setiap halaman HTML memiliki struktur dasar yang sama, yaitu:
- DOCTYPE declaration: Menentukan versi HTML yang digunakan.
- HTML tag: Tag utama yang menandai awal dan akhir dari halaman HTML.
- Head tag: Berisi informasi tentang halaman web seperti judul, meta data, dan link ke file CSS.
- Body tag: Berisi konten utama yang ditampilkan di browser web.
Berikut adalah contoh struktur dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
<h1>Judul Utama</h1>
<p>Ini adalah paragraf teks.</p>
</body>
</html>
Elemen HTML
HTML memiliki berbagai elemen yang dapat digunakan untuk membangun konten situs web. Berikut beberapa contoh:
- Elemen Teks:
<p>: Untuk membuat paragraf teks.<h1>,<h2>,<h3>, ...: Untuk membuat judul.<strong>: Untuk membuat teks tebal.<em>: Untuk membuat teks miring.<br>: Untuk membuat baris baru.
- Elemen Gambar:
<img>: Untuk menampilkan gambar.
- Elemen Tabel:
<table>,<tr>,<td>: Untuk membuat tabel.
- Elemen Daftar:
<ul>: Untuk membuat daftar tidak terurut (bullet list).<ol>: Untuk membuat daftar terurut (numbered list).<li>: Untuk mendefinisikan item daftar.
- Elemen Link:
<a>: Untuk membuat link ke halaman lain.
- Elemen Formulir:
<form>: Untuk membuat formulir input.<input>: Untuk membuat input teks, tombol, dan lainnya.<select>: Untuk membuat menu drop-down.<textarea>: Untuk membuat area input teks multi-baris.
Atribut HTML
Atribut digunakan untuk memberikan informasi tambahan tentang elemen HTML. Berikut beberapa atribut penting:
src: Digunakan pada elemen gambar (<img>) untuk menentukan sumber gambar.alt: Digunakan pada elemen gambar (<img>) untuk menyediakan teks alternatif jika gambar tidak dapat ditampilkan.href: Digunakan pada elemen link (<a>) untuk menentukan URL tujuan link.target: Digunakan pada elemen link (<a>) untuk menentukan cara membuka link (misalnya, di jendela baru).name: Digunakan untuk memberikan nama pada elemen HTML.id: Digunakan untuk memberikan ID unik pada elemen HTML.
CSS dan JavaScript
HTML dapat bekerja sama dengan CSS (Cascading Style Sheets) dan JavaScript untuk membuat situs web yang lebih interaktif dan menarik.
- CSS digunakan untuk mengatur tampilan situs web, seperti warna, font, dan layout.
- JavaScript digunakan untuk menambahkan interaktivitas dan fungsionalitas dinamis pada situs web.
Contoh Kode HTML
Berikut adalah contoh kode HTML untuk membuat halaman web sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Sederhana</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah halaman web sederhana yang dibuat dengan HTML.</p>
<img src="gambar.jpg" alt="Gambar deskripsi">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="https://www.google.com">Kunjungi Google</a>
</body>
</html>
Kesimpulan
HTML merupakan bahasa dasar yang penting untuk memahami cara membangun situs web. Dengan mempelajari HTML, kita dapat membuat struktur dan konten halaman web yang kompleks dan menarik.
Selain itu, HTML juga merupakan dasar untuk memahami bahasa pemrograman web lainnya seperti CSS dan JavaScript yang digunakan untuk meningkatkan interaktivitas dan fungsionalitas situs web.