Elemen <head> yang ada pada HTML adalah wadah atau penampung untuk elemen HTML yang lain. Contohnya elemen berikut: , <style>, <meta>, <link>, <script>, dan <base>.</p>. Show Elemen <head> adalah wadah untuk metadata pada HTML dan ditempatkan di antara tag <html> dan tag <body> . Metadata HTML adalah data tentang dokumen HTML dan meetadata tidak akan ditampilkan ketika sebuah kode dijalankan. Metadata biasanya menentukan judul dokumen, kumpulan karakter, style script, dan informasi meta lainnya. Elemen <title> pada HTMLElemen <title> mendefinisikan judul dokumen. Judul harusnya hanya berupa teks, dan teks tersebut ditampilkan di bilah judul browser atau di tab halaman. Tag <title> sangat diperlukan dalam dokumen HTML. Isi judul halaman sangat penting untuk mengoptimalkan mesin pencari atau search engine optimization (SEO). Title pada halaman digunakan oleh algoritma mesin pencari untuk memutuskan urutan saat daftar halaman dalam hasil pencarian. Elemen <title>
Jadi, ketika mebuat sebuah judul cobalah membuatnya seakurat mungkin dan bermakna. Contoh sederhana dokumen HTML : <!DOCTYPE html> <html> <head> <title>Halaman judul yang bermakna</title> </head> <body> <p>Konten pada elemen body akan ditampilkan di jendela browser.</p> <p>Konten pada elemen title akan ditampilkan di tab browser, di favorit dan di hasil mesin pencari.</p> </body> </html> Elemen <style> HTMLElemen <style> pada HTML dapat digunakan untuk menentukan informasi style pada suatu halaman web. Contoh : <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> </head> <body> <h1>Ini adalah Heading</h1> <p>Ini adalah paragraf.</p> </body> </html> Elemen <link> HTMLElemen <link> mendefinisikan hubungan antara dokumen saat ini dengan file eksternal. Tag <link> paling sering digunakan untuk menautkan ke style sheet eksternal. Contoh : <!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>Ini adalah Heading</h1> <p>Ini adalah paragraf.</p> </body> </html> Elemen<meta> biasanya digunakan untuk menentukan set karakter, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan viewport. Metadata tidak akan ditampilkan di halaman, tetapi digunakan oleh browser untuk menunjukan cara menampilkan konten atau memuat ulang halaman, digunakan oleh mesin pencari untuk mencari kata kunci, dan layanan web lainnya. Contoh : Menentukan set karakter yang digunakan: Menentukan kata kunci untuk mesin pencari:
Menentukan deskripsi halaman web Anda:
Menentukan penulis halaman:
Merefresh dokumen setiap 30 detik:
Mengatur viewport agar situs web terlihat bagus di semua perangkat:
Contoh penggunaan tag <meta> : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Tutorial web gratis"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> </head> <body> <p>Semua informasi meta masuk ke dalam bagian Head.</p> </body> </html> Mengatur Viewportviewport adalah area halaman web yang dapat terlihat oleh pengguna. Viewport bervariasi pada setiap perangkat , viewport akan lebih kecil di ponsel dibandingkan di layar komputer. Anda harus menyertakan elemen <meta> berikut di semua halaman web Anda:
Elemen <meta> diatas berfungsi untuk memberikan instruksi kepada browser tentang bagaimana cara mengontrol dimensi dan skala halaman. width= bagian lebar perangkat menyetel lebar halaman agar mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat). Bagian initial-scale = 1.0 menyetel tingkat zoom awal saat halaman pertama kali dimuat oleh browser. Elemen <script> HTMLElemen <script> digunakan untuk mendefinisikan client-side JavaScript. JavaScript berikut menulis “Halo JavaScript!” menjadi elemen HTML dengan id = “demo”. Contoh : <!DOCTYPE html> <html> <head> <title>Page Title</title> <script> function myFunction() { document.getElementById("demo").innerHTML = "Halo JavaScript!"; } </script> </head> <body> <h1>Halaman webku</h1> <p id="demo">Sebuah Paragraf</p> <button type="button" > Elemen <base> HTMLElemen <base> digunakan untuk menentukan URL dasar dan / atau target untuk semua URL relative dalam sebuah halaman. Elemen <base> harus memiliki salah satu dari href atau atribut target, atau keduanya. Perhatikan bahwa hanya boleh ada satu elemen <base> dalam sebuah dokumen. Contoh : <!DOCTYPE html> <html> <head> <base href="http://clipart-library.com/stickman.html" target="_blank"> </head> <body> <h1>Elemen base</h1> <p><img src="http://clipart-library.com/images/zcXnAMqcB.jpg" width="50" height="39" alt="Stickman"> - Perhatikan bahwa kami hanya menentukan alamat relatif untuk gambar. Karena kami telah menentukan URL dasar di bagian head, browser akan mencari gambar di "http://clipart-library.com/stickman.html" .</p> <p><a href="tags/tag_base.asp">tag HTML base</a> - perhatikan bahwa tautan terbuka di jendela baru, meskipun tidak memiliki atribut target = "_ blank". Ini karena atribut target dari elemen dasar disetel ke "_blank".</p> </body> </html> Ringkasan Bab
Element head HTML
Sekian pembahasan dari bab kali ini, semoga bermanfaat.
Kode yang di tulis dengan huruf tebal merupakan penambahan tag head dan title. Coba simpan terlebih dahulu kode di atas.Coba lihat pada bagian Title Bar Browser anda. Sebelumnya Title Bar Browser anda tidak menampilkan judul sebuah halaman yang di tulis dan sesudahnya Title Bar Browser anda Menunjukkan adanya judul Karya Pertamaku. kode yang di simpan sesudah tag dan sebelum tag , tidak akan di tampilkan pada halaman browser anda. Di tempat tersebut kita dapat memasukkan meta, style dan lain-lain. Pengertian Tag Head dan Title Reviewed by Unknown on 23.31 Rating: |