HTML Head dan Body
Materi kali ini merupakan inti dari materi sebelumnya. Struktur dokumen HTML terbagi menjadi 2 bagian utama, yaitu head dan body. Bagian head umumnya berisi sumber daya yang akan digunakan, sedangkan body yaitu isi/ konten yang ingin ditampilkan di dalam sebuah halaman website.
Tag Head
Penulisan tag <head> berada diantara tag <html> dan <body>. Fungsi elemen head pada HTML adalah menjadi wadah dari elemen metadata lainnya yaitu tag <title>, <meta>, <style>, <link> dan <script>.
1. Elemen <title>
Tag <title>berfungsi untuk membuat title atau judul yang tampil pada title bar di web. Judul tersebut tidak tampil di halaman website.
 |
| output tag <title> |
2. Element <meta>
adalah elemen yang mendefinisikan metadata tentang dokumen HTML. Metadata merupakan data sebuah data (informasi) tentang sebuah data. Metadata tidak tampil di halaman website, tetapi dapat di uraikan oleh search engine atau mesin pencari.
Berikut adalah tag meta yang sering digunakan :
1. Meta robots
Meta robots berfungsi untuk menentukan akses kepada robot yang datang ke halaman website kita. Robot disini artinya pengunjung yang bukan manusia tetapi mesin yang mengakses halaman web kita untukl mendapatkan informasi.
Contoh tag memberikan akses kepada robot :
<meta name="robots" content="index, follow"/>
KIta bisa melakukan block kepada robot agar tidak mendapatkan akses ke website kita dengan cara mengganti content menjadi "noindex, nofollow".
2. Meta description
Meta deskripsi bertujuan untuk memberikan deskripsi tentang konten yang ada di dalam website kita. Dengan menuliskan deskripsi yang ringkas, jelas, dan menarik, banyak orang yang tertarik untuk mengunjungi website kita sehingga berpeluang mendapatkan traffic yang lebih tinggi.
Contoh tag description :
<meta name="description" content="Ini adalah deskripsi website kamu"/>
3. Meta viewport
Meta viewport ini bertujuan untuk mengatur width dan height website kita agar lebih responsive di semua device.
Contoh tag viewport :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. Element <style>
Element ini digunakan untuk memperindah website dengan menggunakan css dalam satu file html. Penulisan css berada di dalam tag <style>
<style>.contoh {color: blue;}</style>
4. Elemnt <link>
Element ini berfungsi untuk menghunbungkan website kita dengan file atau halaman lain. Terdapat beberapa link yang sering digunakan saat ini. Berikut adalah link yang sering digunakan :
1. Link icon
Link icon digunakan untuk menambahkan logo atau gambar website kita yang terletak di sebelah kiri title website. Caranya dengan menggunakan file berformat ico, png, atau jpg. Contoh :
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
2. Link stylesheet
Link ini berfungsi untuk menghubungkan halaman website kita dengan file css, Perbedaan link stylesheet dengan tag <style> adalah pada tempat letak code css. Pada link stylesheet, kode css berada diluar file html, yaitu file css terpisah. Sedangkan pada tag <style>, kode css habur berada di file html atau inline css.
Contoh menghubungkan file html dengan css menguunakan stylesheet :
<link rel="stylesheet" href="style.css">
3. Link cononical
Link conocial digunakan untuk memberi informasi kepada roobots bahwa halaman tersebut sama dengan link yang ada pada conotial. Contohnya :
<link rel="conocial" href="https://www.google.com">
4. Element <script>
Element <script> digunakan untuk menghubungkan file HTML dengan Javascript. Terdapat 2 cara menghubungkannya yaitu dengan inline javascript (berada di dalam satu file html) dan external file (Berada di dalam file .js dan berada diluar file html).
Contoh inline javascript :
<script>isi kode javascript</script>
Contoh external file :
<script type='text/javascript' src='https://www.example.com/style.js'></script>
Tag Body
Didalam tag <body> ini berisi konten yang ingin ditampilkan di dalam halaman website kita. Untuk pembahasan lebih lengkap mengenai tag apa saja yang ada di dalam <body> akan ada di artikel selanjutnya.
Makasih kak bermanfaat
BalasHapus