Memahami Struktur HTML
Setelah kita mengenal cara membuat sebuah halaman web sederhana, kita akan mengenal lebih dalam mengenai struktur HTML dan beberapa tag yang sering digunakan pada pengembangan aplikasi web. Mari kita mulai dengan membuat sebuah kode HTML sederhana lagi.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kode HTML</title>
</head>
<body>
<h1 style="color: blue;">Ini adalah Heading 1</h1>
<p>Ini adalah contoh paragraf pertama. Paragraf adalah cara yang bagus untuk mengatur teks dalam sebuah halaman web.</p>
<h2>Ini adalah Heading 2</h2>
<p style="color: green;">Ini adalah contoh paragraf kedua. Kali ini kita mengubah warnanya menjadi hijau menggunakan atribut "style".</p>
<p>Ini adalah paragraf ketiga yang mengandung beberapa<br>line breaks.<br>Line breaks membantu kita membuat jeda dalam teks.</p>
</body>
</html>
Dalam contoh ini, kita menggunakan tag<h1>, <h2>, dan<p>untuk membuat heading dan paragraf. Penggunaan atribut "style" pada elemen<h1>dan<p> mengubah warna teks menjadi biru dan hijau. Selain itu, kita juga menggunakan tag <br>untuk membuat jeda baris di dalam paragraf ketiga.
Kode ini adalah contoh sederhana dari cara HTML digunakan untuk memformat dan mengorganisasi teks dalam halaman web. Teman-teman bisa mencoba mengganti warna atau mencoba tag dan atribut lainnya untuk melihat bagaimana halaman web berubah!
Struktur Umum Dokumen HTML
Dokumen HTML memiliki struktur yang terdiri dari beberapa bagian utama. Ini adalah struktur umumnya:
Tag HTML: Setiap dokumen HTML dimulai dengan tag
<html>. Tag ini adalah pembungkus utama untuk seluruh konten dalam dokumen HTML.Head: Bagian
<head>mengandung informasi meta tentang dokumen, seperti judul halaman, tautan ke file CSS, dan pengaturan lainnya. Ini adalah bagian yang tidak akan ditampilkan di halaman web itu sendiri, tetapi berisi informasi penting tentang halaman tersebut.Body: Bagian
<body>adalah tempat konten utama dari halaman web ditempatkan. Ini termasuk teks, gambar, tautan, elemen-elemen HTML lainnya, dan apa pun yang akan ditampilkan di halaman web.
Atribut pada Setiap Tag HTML
Atribut dalam HTML memberikan informasi tambahan tentang elemen. Mereka digunakan untuk mengubah atau menentukan karakteristik elemen, seperti warna, ukuran, tautan, atau identifikasi unik. Contoh atribut termasuk class, id, style, href, src, dan banyak lagi.
Pada contoh sebelumnya, kita menggunakan atribut style yang fungsinya untuk mengubah tampilan dari sebuah elemen HTML, color: blue merupakan kode CSS yang berfungsi sebagai nilai dari atribut style tersebut. Tentu saja, teman-teman dapat mencoba memberikan nilai berbeda untuk mendapatkan perubahan lainnya.
Closing Tags dan Self-Closing Tags dalam HTML
Jika teman-teman perhatikan, sebuah elemen HTML memiliki tag pembuka dan penutup yang membungkus nilai berupa teks di dalamnya. Namun ada beberapa juga yang menutup dirinya sendiri.
Closing Tags (Tag Penutup):
Banyak elemen HTML memerlukan dua tag: tag pembuka (opening tag) dan tag penutup (closing tag).
Tag pembuka digunakan untuk memulai elemen, sementara tag penutup digunakan untuk mengakhiri elemen tersebut.
Tag penutup memiliki format yang sama dengan tag pembuka, tetapi dengan tambahan garis miring (
/) sebelum nama elemen.
<p>Ini adalah paragraf dengan tag pembuka dan tag penutup.</p>
<a href="https://www.example.com">Ini adalah tautan dengan tag pembuka dan tag penutup.</a>Self-Closing Tags (Tag yang Menutup Diri Sendiri):
Beberapa elemen HTML tidak memerlukan tag penutup karena mereka tidak memiliki konten di dalamnya atau kontennya bersifat opsional.
Elemen-elemen ini menggunakan self-closing tags, yang hanya terdiri dari tag pembuka tanpa tag penutup.
Self-closing tags biasanya diakhiri dengan tanda garis miring dan kurung sudut tutup (
/>).
<img src="gambar.jpg" alt="Deskripsi Gambar" />
<br />
<input type="text" />Rerefensi
https://www.w3schools.com/TAGS/default.asp https://www.w3schools.com/html/html_attributes.asp
Last updated