Friday, April 26, 2024
TutorialTutorial Software

Lebih Dekat dengan Struktur Dokumen HTML5

Yohannes Suwarto

Layaknya dokumen standar lainnya, HTML5 juga memiliki struktur tertentu. Secara garis besar, struktur dokumen HTML5 cuma terdiri dari dua bagian, yaitu head dan body. Namun tentunya ada beberapa detail lain yang perlu diperhatikan juga.

Bagian head diawali dengan tag <head> dan ditutup dengan pasangannya, yaitu </head>. Bagian body diapit oleh tag <body> dan </body>. Bagian head dan body tersebut harus diapit lagi oleh tag <html> dan </html>. Dan jangan lupa, di baris paling awal harus ada deklarasi dokumen HTML sebagai berikut:

<!DOCTYPE html>

Rekomendasi Produk PCplus

Jadi secara lengkap, struktur dokumen HTML5 terlihat seperti Listing 1. Listing 1 ini tidak ditujukan untuk dijalankan pada browser, melainkan hanya menunjukkan struktur dokumen HTML5 saja.

Bagian Head

Bagian head HTML5 digunakan untuk menyimpan berbagai informasi mengenai isi dokumen tersebut. Paling sedikit, bagian head harus mengandung judul dokumen. Judul dokumen ini diapit oleh tag <title> dan </title> serta akan ditampilkan pada bagian title bar browser.

Selain judul dokumen, bagian head dapat mengandung informasi-informasi berikut:

• Metadata: berisi berbagai data tambahan tentang dokumen HTML5 seperti nama pengarang/penulis, tanggal publikasi, deskripsi isi dokumen, kata kunci, dan lain-lain. Informasi ini dinyatakan oleh tag <meta> saja, tanpa tag penutup </meta>.

• Base URL: menentukan basis lokasi untuk link-link yang ada pada dokumen. Informasi ini dinyatakan oleh tag <base> saja, tanpa tag penutup </base>.

• Link: menentukan link ke dokuman lain yang terkait erat dengan dokumen HTML5, misalnya skrip CSS yang digunakan dalam desain halaman web. Informasi ini dinyatakan oleh tag <link> saja, tanpa tag penutup </link>.

• Objek: berisi informasi mengenai objek yang mungkin ada pada dokumen HTML5. Objek yang mungkin terkandung pada dokumen HTML5 antara lain adalah video, audio, dan animasi flash. Informasi ini dinyatakan dengan diapit oleh tag <object> dan </object>.

• Skrip: berisi informasi mengenai skrip pemrograman yang mungkin ada pada dokumen HTML5. Skrip pemrograman ini umumnya bersifat client-side seperti JavaScript. Informasi ini dinyatakan dengan diapit oleh tag <script> dan </script>.

• Style: berisi informasi mengenai desain halaman web dalam format CSS yang langsung dituliskan di bagian head, bukan pada dokumen terpisah. Jika hendak dituliskan pada dokumen terpisah, gunakan link. Informasi ini dinyatakan dengan diapit oleh tag <style> dan </style>.

Informasi yang ada pada bagian head ini nantinya akan dibahas seiring dengan makin dalamnya pembahasan mengenai HTML5 ini. Sementara ini yang akan lebih banyak digunakan hanya tag <title> saja.

Bagian Body

Bagian body HTML5 merupakan bagian yang nantinya diterjemahkan dan ditampilkan oleh browser. Di bagian inilah terkandung berbagai tag yang menyatakan desain dokumen HTML. Jadi bisa dibayangkan pastilah akan banyak terdapat tag HTML yang bisa digunakan di bagian ini. Karena itu PCplus akan membahasnya sedikit demi sedikit mulai dari yang paling mudah terlebih dahulu.

Yang pertama adalah paragraf. Sebuah dokumen yang terstruktur dengan baik pastilah terdiri dari beberapa paragraf. Untuk memisahkan antara satu paragraf dengan paragraf yang lain digunakan tag <p>. Tag ini harus ditutup dengan pasangannya, yaitu </p>.

Untuk sekedar ganti baris tanpa ganti paragraf, digunakan tag <br>. Karena tag ini tidak memiliki pasangan maka ditulis dengan <br />. Ganti baris pada dokumen HTML5 perlu diberi tag sendiri karena meski pada kode HTML-nya ganti baris tetapi browser tidak akan menampilkannya pada baris terpisah.

Untuk memberikan format tampilan tertentu terhadap teks, tersedia beberapa tag berikut:
• <b> dan </b> untuk menampilkan teks secara tebal.
• <i> dan </i> untuk menampilkan teks secara miring.
• <u> dan </u> untuk menampilkan teks dengan garis bawah.
• <font> dan </font> untuk menentukan jenis font.
• <img /> untuk menampilkan gambar.
• <hr /> untuk menampilkan garis horisontal.

Nah, rasanya cukup untuk edisi kali ini. Sekarang saatnya mempraktekkan ilmu yang sudah diberikan ke dalam bentuk dokumen HTML5. Buatlah dokumen HTML5 seperti tersaji pada Listing 2 dan simpan dengan nama struktur. html. Bila dibuka dengan browser, hasilnya akan nampak seperti Gambar 1.

t6-431-html-gb-01

Dalam menuliskan dokumen HTML5, yang sangat perlu diperhatikan adalah letak tag, jangan sampai tag pembuka dan penutup tumpang tindih. Berikut adalah contoh yang benar:

<b><i>teks</i></b>

Sementara yang ini adalah contoh yang salah:

<b><i>teks</b></i>

Jika dokumen HTML yang ingin dibuat mengandung struktur yang terbagi-bagi menjadi judul bab, subbab, sub-subbab, dan seterusnya hingga kedalaman enam level, kamu bisa menggunakan tag <h1> hingga <h6> (beserta tag penutup masing-masing) untuk menuliskan judul-judul bab tersebut. Huruf h pada tag tersebut merupakan singkatan dari header.

Contohnya diberikan pada Listing 3 yang diberi nama header. html dan hasilnya diperlihatkan pada Gambar 2. Perhatikan bahwa setiap level header memiliki ukuran font berbeda.

t6-431-html-gb-02

Listing 1
<!DOCTYPE html>
<html>
<head>
…isi bagian head…
</head>
<body>
…isi bagian body…
</body>
</html>

Listing 2
<!DOCTYPE html>
<html>
<head>
<title>Struktur Dokumen HTML5</title>
</head>
<body>
<h1>Aku adalah dokumen HTML5</h1>
<p>Ini adalah paragraf pertama yang ada di dokumen ini. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
<hr />
<p>Ini adalah paragraf kedua. <br />
<b>Ini nampak tebal.</b><br />
<i>Ini nampak miring.</i><br />
<u>Ini bergaris bawah.</u><br />
Ini akhir paragraf kedua.</p>
</body>

Listing 3
<!DOCTYPE html>
<html>
<head>
<title>Struktur Dokumen HTML5</title>
</head>
<body>
<h1>Judul Bab</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
<br />
<h2>Judul SubBab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
<br />
<h3>Judul Sub-SubBab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla adipiscing, lectus a vulputate ultricies,
nisl nisi aliquam mauris, et convallis libero ligula id mi.</p>
</body>
</html>

 

Naskah: Yahya Kurniawan [[email protected]]

Yohannes Suwarto

Staff laboratorium perangkat keras PT. Prima Infosarana Media. Memiliki spesialisasi pengujian produk konsumer, termasuk notebook dan PC desktop.

Komentar kamu