Pad materi sebelumnya, kita sudah belajar Tutorial Belajar HTML5 Bagian 17 : Cara Membuat Formulir di HTML, selanjutnya kita akan membahas lebih dalam terkait header di dokumen HTML.
Kita sebelumnya sudah mempelajari bahwa dokumen HTML biasa akan memiliki struktur berikut:
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
Pada tutorial kali ini, kita akan membahas sedikit lebih banyak detail tentang bagian header yang diwakili oleh tag HTML <head>.
Tag <head> adalah tempat dari berbagai tag penting seperti tag <title>, <meta>, <link>, <base>, <style>, <script>, dan <noscript>.
Tag <title> HTML
Tag HTML <title> digunakan untuk menentukan judul dokumen HTML.
Berikut adalah contoh pemberian judul pada dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag HTML Title</title>
</head>
<body>
<p>Hello, Dunia !</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag HTML <meta>
Tag HTML <meta> digunakan untuk menyediakan metadata tentang dokumen HTML yang meliputi informasi tentang halaman kedaluwarsa, pembuat halaman, daftar kata kunci, deskripsi halaman dll.
Baca juga, Tutorial Belajar HTML5 Bagian 8 : Pengertian & Fungsi Tag Meta Pada HTML.
Berikut beberapa penggunaan penting dari tag <meta> di dalam dokumen HTML :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag HTML Meta</title>
<!-- Berisi daftar kata kunci -->
<meta name = "keywords" content = "html, belajar tag html, fungsi tag meta ">
<!-- Berisi deskripsi halaman -->
<meta name = "description" content = "Pada tutorial ini kita akan belajar tag HTML yaitu fungsi tag meta ">
<!-- Informasi penulis -->
<meta name = "author" content = "Mbah WP ">
<!-- Jenis konten halaman -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Refreshing delay halaman -->
<meta http-equiv = "refresh" content = "30">
<!-- Expiry halaman -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag untuk memberitahu robot mesin pencari untuk meng-index, follow halaman atau sebaliknya -->
<meta name = "robots" content = "noindex, nofollow/index,follow">
</head>
<body>
<p>Halo, Dunia!</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag HTML <base>
Tag <base> HTML digunakan untuk menentukan URL dasar untuk semua URL relatif dalam sebuah halaman, yang berarti semua URL lainnya akan digabungkan menjadi URL dasar saat mencari item tertentu.
Misalnya, semua halaman dan gambar yang akan dicari setelah menambahkan URL yang diberikan dengan URL dasar https://mbahwp.com/directory
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag HTML Base</title>
<base href = "https://mbahwp.com/" />
</head>
<body>
<img src = " /wp-content/uploads/2017/07/Logo-Mbah-WP.png" alt = "Logo Image"/>
<a href = "/cara-menggunakan-editor-blok-gutenberg-wordpress/" taget = “_blank” title = "Cara Menggunakan editor WordPress "/>Cara Menggunakan editor Guttenberg WordPress </a>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag HTML <link>
Tag HTML <link> digunakan untuk menentukan hubungan antara dokumen saat ini dan sumber eksternal.
Baca juga, Tutorial Belajar HTML5 Bagian 13 : Cara Membuat Link di HTML.
Berikut adalah contoh untuk menautkan file CSS eksternal yang berada di sub-direktori css dalam root web :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag HTML link</title>
<base href = "https://mbahwp.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Halo, Dunia!</p>
</body>
</html>
Tag HTML <style>
Tag HTML <style> digunakan untuk mempercantik tampilan dokumen HTML dengan menyisipkan kode CSS.
Berikut adalah contoh untuk mendefinisikan beberapa aturan style sheet di dalam tag <style> :
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://mbahwp.com/" />
<style type = "text/css">
.contohclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "contohclass">Halo, Dunia!</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Tag HTML <script>
Tag HTML <script> biasanya digunakan jika kita ingin menyisipkan kode javascript ke dalam dokumen HTML.
Berikut adalah contoh menggunakan JavaScript dalam kode HTML :
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
Browser akan menampilkan hasil sebagai berikut, Anda dapat mencoba mengklik tombol yang ada kemudian lihat respon browser :
Semoga tutorial ini membantu Anda mempelajari tentang tag apa saja yang diletakkan di dalam header sebuah dokumen HTML.
