--Head Element--
Head Element
Element head berada di urutan paling atas dibawah tag <html> pada struktur HTML berikut :
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> |
Sekarang kita akan membahas element element yang sering digunakan dan diletakkan di dalam element head :
- Element Meta
Tag <meta> berfungsi untuk memberi informasi mengenai halaman HTML yang saat ini sedang ditampilkan
- Meta charset : berfungsi memberi instruksi kepada web browser tentang bagaimana cara menerjemahkan karakter-karakter yang ada di dalam halaman HTML.
Pada HTML 4 meta charset ditulis seperti ini : <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Namun pada HTML 5 penulisannya jauh lebih ringkas : <meta charset="UTF-8">
Ketika kita menuliskan struktur HTML dan didalamnya kita letakkan meta charset ataupun tidak, kita tidak bisa melihat perbedaannya karena meta charset ini sendiri berhubungan bagaimana web browser memproses pada karakter karakter yang berada di dalam HTML- Meta Author, Keywords dan DescriptionKetika kita menuliskan Meta Author, Keywords dan Description maka ketiga meta tersebut berhubungan dengan SEO (Search Engine Optimization) yaitu digunakan untuk mempermudah mesin pencari seperti google untuk mendapatkan informasi dari website yang kita buat. Sehingga ketika kita memasang ketiga meta tersebut di dalam struktur HTML kita, kita tidak bisa melihat perbedaannya karena itu berhubungan dengan web browser memberikan informasi kepada ‘robot’ / mesin pencari.
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta name="author" content="Makanan Nusantara"> <meta name="keywords" content="Rendang, Bubur Menado, Gulai Nangka Muda, Lontong Tahu, Soto Makasar"> <meta name="description" content="Situs Tentang Makanan Nusantara"> <title></title> </head> <body> </body> </html> |
- Meta Refresh
Meta refresh digunakan untuk melakukan web refresh / reload pada halaman website kita, Contoh : jika kita ingin web refresh / reload website kita setiap 60 detik sekali, maka kita cukup menuliskan code meta refresh <meta http-equiv="refresh" content="60">
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta http-equiv="refresh" content="60"> <title></title> </head> <body> </body> </html> |
- Meta tag Viewport
Meta Viewport yang ditulis seperti ini : <meta name="viewport" content="width=device-width, initial-scale=1">
Digunakan pada web dengan desain responsive (responsive web design). Secara garis besar, meta tag viewport ditambahkan agar desain responsive dapat tampil sempurna di dalam layar berukuran kecil (seperti tablet atau smartphone).
Meta tag viewport ini nanti akan kita praktekan saat kita belajar dengan web responsive di materi selanjutnya
NOTE : Untuk Meta tag X-UA-Compatible dan Meta tag Robots, Silahkan teman-teman baca, namun untuk saat ini belum bisa diterapkan saat ini karena ini sudah masuk ke tingkat teknis, jika nanti sudah sudah mampu membuat sebuah website dengan HTML maka silahkan kembali untuk mempelajari kedua meta tag tersebut.
- Meta tag X-UA-Compatible
Meta tag X-UA-Compatible yang ditulis seperti ini : <meta http-equiv="X-UA-Compatible" content="IE=edge">
Meta tag X-UA-Compatible digunakan untuk menangani permasalahan terkait web browser Internet Explorer. IE memiliki mode compatibility view yang aktif ketika halaman web diakses dari komputer lokal atau diakses dari dalam intranet. Fitur ini membuat perlakuan berbeda dalam menangani halaman web (mirip quirks mode). Meta tag diatas akan memaksa IE untuk tidak masuk ke mode compatibility view.
- Meta tag Robots
Meta tag Robots yang ditulis seperti ini :
<meta name="robots" content="index, follow"> atau <meta name="robots" content="noindex, nofollow">
Meta tag robots digunakan untuk memberi pesan kepada search engine bagaimana halaman web akan diproses, jika nilai atribut content adalah “index, follow“, maka mesin pencari akan mengindex halaman tersebut (dimasukkan ke dalam hasil pencarian). Namun jika nilai atribut content adalah “noindex, nofollow“, maka isi web tidak akan dimasukkan ke hasil pencarian (mungkin halaman web bersifat rahasia dan anda tidak ingin seseorang mengaksesnya dari google).
Meta tag Robots yang ditulis seperti ini :
<meta name="robots" content="index, follow"> atau <meta name="robots" content="noindex, nofollow">
Meta tag robots digunakan untuk memberi pesan kepada search engine bagaimana halaman web akan diproses, jika nilai atribut content adalah “index, follow“, maka mesin pencari akan mengindex halaman tersebut (dimasukkan ke dalam hasil pencarian). Namun jika nilai atribut content adalah “noindex, nofollow“, maka isi web tidak akan dimasukkan ke hasil pencarian (mungkin halaman web bersifat rahasia dan anda tidak ingin seseorang mengaksesnya dari google).
- Element TitleElement title berfungsi untuk menampilkan judul pada halaman website yang kita buat. Contoh :
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Belajar HTML - NIOMIC</title> </head> <body> </body> </html> |
Ketika kita jalankan, kita bisa melihat hasilnya seperti ini :
- Element LinkElement Link akan sering kita gunakan ketika kita berhubungan dengan file lain, contoh ketika kita ingin menghubungkan HTML kita dengan file css, code nya : <link href="style.css" rel="stylesheet">
Kita akan membahas hal tersebut nanti saat kita memasuki pembelajaran CSS.
Sekarang kita akan menggunakan Element Link Untuk membuat Favicon :
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <link rel="icon" href="http://www.iconarchive.com/download/i97515/sicons/basic-round-social/facebook.ico" type="image/x-icon"> <title>Belajar HTML - NIOMIC</title> </head> <body> </body> </html> |
Ketika dijalankan akan menampilkan :
- Gambar dari internet
Pada contoh materi diatas, kita menampilkan favicon dari internet yaitu melalui link Icon tersebut diambil dari :
Icon tersebut diambil dari : http://www.iconarchive.com/download/i97515/sicons/basic-round-social/facebook.ico
Contoh jika kita memakai gambar ini : https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-512.png
code :
<link rel="icon" href="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-512.png" type="image/png">
- Gambar dari local
Jika kita meletakkan gambar dalam folder tempat kita menuliskan code HTML nya
<link rel="icon" href="google-icon.png" type="image/png">
Jika gambar kita letakkan dalam folder img
maka codenya : <link rel="icon" href="img/google-icon.png" type="image/png">
NOTE :
Pada atribute type="image/png"> kita bisa menggantinya sesuai dengan gambar yang kita masukkan, jika gambar yang dimasukkan adalah jpg maka pada atribute type menjadi type="image/jpg">, dan jika gambarnya .ico menjadi type="image/x-icon">
- Element BASEElement base bersifat global, dan digunakan untuk memasukan sebuah link secara global.
Element base ini akan kita coba praktekkan saat kita belajar materi HTML selanjutnya, karena element base berhubungan dengan element lain. agar ketika kita praktekkan menjadi lebih paham.
Element base ditulis seperti ini : <base href="/media/images/" target="_blank"> - Element ScriptElement Script digunakan untuk menginput script ke dalam halaman HTML, element script sering digunakan untuk menuliskan code Javascript, baik yang dituliskan secara internal ataupun menghubungkan secara eksternal, code script ditulis seperti ini :<script type="text/javascript"></script>
Element script akan kita praktekkan nanti saat kita mulai belajar javascript. - Element StyleElement Style digunakan untuk menginput kode style ke dalam halaman HTML. Element Style ditulis seperti ini :<style type="text/css"></style>
Element Style akan kita pelajari, saat memasuki materi pembelajaran CSS - Element NOSCRIPTElement Noscript digunakan untuk menampilkan informasi ketika browser mematikan javascriptnya. Element noscript ditulis seperti ini : <noscript>Silahkan aktifkan javascript, untuk mengakses situs ini</noscript>
Karena ini sudah masuk hal teknis, maka element noscript hanya bisa kita praktekkan saat kita sudah memasuki materi pembuatan website dengan javascript di dalamnya.
Do you realize there is a 12 word phrase you can tell your partner... that will induce deep emotions of love and instinctual attraction for you deep inside his chest?
BalasHapusThat's because hidden in these 12 words is a "secret signal" that triggers a man's instinct to love, treasure and care for you with his entire heart...
12 Words Will Trigger A Man's Desire Impulse
This instinct is so built-in to a man's genetics that it will drive him to try better than ever before to build your relationship stronger.
As a matter of fact, triggering this mighty instinct is so binding to achieving the best ever relationship with your man that the moment you send your man one of these "Secret Signals"...
...You will soon find him expose his heart and mind to you in a way he never experienced before and he'll identify you as the only woman in the world who has ever truly fascinated him.