Yuniza

Tutorial HTML: Mengenal Head, Body dan Footer

4 min


Mengenal Head Body dan Footer Pada HTML

Halaman website itu ibarat manusia. Pada halaman website terdapat head, body dan footer. Jika website diilustrasikan sebagai tubuh manusia, maka beginilah strukturnya:

  1. <head> adalah otak (termasuk rambut);
  2. <body> adalah keseluruhan badan (dari kepala sampai lutut);
  3. <footer> adalah kaki (dari lutut sampai jempol kaki).

Sementara dalam penerapan kode, struktur dari <head>, <body>, dan <footer> adalah sebagai berikut:

Di antara tiga tag di atas, hanya tag <body> dan <footer> yang akan menampilkan objek pada layar utama browser. Sementara tag <head> hanya sebagai pemberi informasi dan penghubung komunikasi data internal atau eksternal dalam operasional website.

Apakah penjelasannya sedikit rumit untuk dimengerti…? Okay, untuk sekarang ikuti saja dulu tutorialnya dengan memahami fungsi dari tag <head>.

Fungsi Kode tag <head>

Ketika kamu mengunjungi sebuah website, sebut saja twitter.com, maka secara otomatis twitter.com akan memproses kode HTML yang ada di antara <head> dan </head>. Kode yang dimuat di antara <head> dan </head> tersebut biasanya tag HTML berikut:

  1. <title>
  2. <base>
  3. <link>
  4. <meta>
  5. <script>
  6. <style>

Enam tag HTML di atas pada umumnya ditempatkan di dalam tag <head> dan </head> yang nantinya digunakan untuk kebutuhan global pada setiap halaman website.

Selain untuk kebutuhan global dalam website, tag head juga berfungsi untuk menyaring informasi singkat tentang website kamu dalam mesin pencari Google, atau bisa juga berfungsi sebagai indikator informasi tentang website kamu ketika dibagikan di jejaring sosial seperti Facebook dan Twitter.

Objek di atas adalah sebuah contoh indikator informasi singkat yang diambil oleh Twitter dari tag head pada website Yuniza di artikel Membuat Paragraf HTML Untuk Pemula.

Penempatan Kode <head> Dalam HTML

Tag <head> diletakkan di awal kode HTML setelah tag <html>. Penempatan tag <head> adalah mutlak, yang artinya tag <head> tidak bisa ditempatkan setelah <body> atau <div>. Secara teknis, browser akan mengabaikan tag <head> yang ditulis di tempat yang salah.

Untuk lebih memahami penempatan kode dan kinerja dari tag <head>, ikuti contoh studi kasus yang ada di bawah ini.

Kamu memiliki 5 halaman website, yaitu halaman Home, About, Service, Portfolio, dan Contact. Setiap halaman tersebut memiliki gaya navigasi yang sama, warna latar navigasi hijau dan warna teks putih. Untuk memudahkan kembali setiap pembuatan navigasi pada setiap halaman, kamu bisa mencantumkan link menuju gaya CSS antara tag <head> dan </head>.

Untuk lebih mudah memahaminya, lihat contoh kode yang ada di bawah ini.

Simpan kode di atas dengan nama home.html. Setelah file tersebut tersimpan, buat lagi sebuah file dengan kode yang ada di bawah ini.

Simpan kode di atas dengan nama gaya-navigasi.css dalam folder yang sama dengan file home.html.

Setelah kedua file tersebut tersimpan, buat kembali file dengan nama about.html dengan kode yang sama persis seperti home.html, tapi hilangkan kode <link rel="stylesheet" href="gaya-navigasi.css"> pada file about.html.

Lihat hasilnya, apakah ada perbedaan tampilan antara home.html dengan about.html? Jika ada perbedaan, silahkan cari faktor yang menyebabkan terjadinya perbedaan tersebut.

Untuk melanjutkan tutorial, klik tombol Next Page yang ada di bawah ini.

5/52 ratings

What's Your Reaction?

SebelSebel
0
Sebel
PusingPusing
0
Pusing
SedihSedih
0
Sedih
KocakKocak
0
Kocak
Terkesan!Terkesan!
0
Terkesan!
KecewaKecewa
0
Kecewa
Zapra Gartiast

Perkenalkan, nama saya adalah Zapra Gartiast dan saya salah satu penulis di website Yuniza. Telah berpengalaman dalam internet dan pengembangan website sejak tahun 2009. Bukan ahli teknologi, namun tertarik dengan berbagai hal menarik dalam teknologi.

Berikan Komentar

avatar
  Subscribe  
Notify of
Choose A Format
Story
Formatted Text with Embeds and Visuals