Seperti yang telah saya jelaskan pada artikel membuat halaman html statis, pada dasarnya sebuah file html “kosong” terdiri dari:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>

</head>
<body>

</body>
</html>

Berdasarkan markup diatas, dapat disimpulkan bahwa sebuah halaman html terdiri dari dua elemen: <head></head> dan <body></body>.

Lebih detail mengenai halaman HTML dapat anda temukan di artikel wikipedia mengenai HTML.

Elemen <head>

Elemen <head> merupakan elemen yang berisikan informasi mengenai halaman web yang tengah dibuka, yang tidak akan ditampilkan secara visual di halaman browser.

Pada halaman web modern, umumnya elemen <head> mengandung:

  • elemen title, yang menunjukkan judul dari halaman yang tengah dibuka dan muncul pada toolbar browser.
  • elemen meta, yang menunjukan informasi metadata mengenai halaman web yang tengah diakses.
  • elemen link, yang menunjukan hubungan antara halaman web yang dibuka dan file lain. Umumnya digunakan untuk “memasukkan” file CSS ke halaman web yang bersangkutan.
  • elemen script, digunakan untuk memasukkan script yang bekerja pada sisi klien seperti JavaScript.

Contoh keempat elemen diatas dalam satu file HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Ini judul halaman yang tengah anda lihat</title>
<link rel="stylesheet" type="text/css" media="all" href="http://outstando.com/wp-content/themes/twentyten/style.css" />
<meta name="generator" content="WordPress 3.0" />
<script type="text/javascript" src="http://outstando.com/wp-content/plugins/syntax-highlighter-and-code-prettifier/scripts/shCore.js"></script>
</head>
<body>

</body>
</html>

Selain keempat elemen diatas, terdapat juga elemen style yang digunakan untuk memasukkan perintah stylesheet dan base untuk menetapkan alamat dan target dari semua link yang berada di dalam halaman web. Bagaimanapun, elemen base jarang dijumpai penggunaannya dan elemen style jarang digunakan karena paradigma saat ini untuk memisahkan stylesheet dengan halaman web agar mudah dalam pengorganisasiannya.

Lebih detail mengenai elemen <head> dapat anda pelajari di artikel w3school mengenai <head>.

Elemen <body>

Elemen <body> merupakan elemen dimana informasi yang akan ditampilkan di layar browser diletakkan.

Pada dasarnya, elemen yang diletakkan diantara tag <body> terdiri dari tiga jenis:

  • Markup struktural: menunjukan tujuan dari text. contoh, tag heading <h2></h2>
  • Markup presentasional: menunjukan tampilan dari informasi, terlepas dari fungsinya. contoh: <strong></strong>
  • Markup hypertext: markup yang membuat bagian dari dokumen menghubungkan ke dokumen yang lain. contoh: <a href=""></a>

Setiap tag html yang diletakkan dalam sebuah file html dapat diberikan atribut (attribute):

  • id : untuk memberi identitas unik dari setiap elemen. Tidak boleh ada dua id dengan value yang sama dalam sebuah halaman web.
  • class : untuk memberi identitas yang terklasifikasi untuk beberapa elemen. Bisa terdapat beberapa class dengan value yang sama dalam sebuah halaman web.
  • title : memberi penjelasan subtextual dari sebuah elemen. Title tidak akan tampil secara visual namun umumnya akan dimunculkan dalam sebuah tooltip jika di-hover.

Contoh dari ketiga atribut diatas dalam sebuah elemen:

<a href="http://outstando.com" id="blog-title" title="blog mengenai desain dan pengembangan web">Outstando</a>

Elemen-elemen yang memiliki atribut id dan class ini dapat di-styling melalui CSS dan diberikan behavior tertentu melalui JavaScript.

Lebih detail mengenai <body> dapat anda pelajari dari artikel w3school mengenai <body>.

Share Your Thought