BAB 022 - Head HTML

<head> adalah tempat inisialisasi data-data halaman Htm (metadata)

Dimana data ini nantinya dapat digunakan oleh user, browser, search engine, dll.

Elemen ini berada paling atas, tepat dibawah tag <html>

Elemen-elemen dari metadata ini diantaranya : <title>, <style>, <meta>, <link>, <script>, dan <base>

 

 

Tag <title>

adalah untuk memberikan judul halaman html.

Contoh :

<html>
<head>
    <title>Belajar HTML 5</title>
</head>

 

 

Tag <style>

Tag <style> adalah tempat untuk Internal CSS.

Contoh :

<html>
<head>
<style>
    body {background-color:powderblue;}
    h1 {color: red;}
    p {color: blue;}
</style>
</head>

 

 

Tag <link>

Tag <link> adalah tempat untuk mendefinisikan Eksternal CSS.


Contoh

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>

 

 

Tag <meta>

Tag <meta> tempat memberikan nilai property dari halaman Html tersebut.

Nilai-nilai properti yang dapat dimasukkan bebas sesuai dengan kebutuhan sipembuat/developer halaman Html tersebut.

Beberapa contoh metadata yang umum dipakai :

Digunakan oleh browser :

<meta charset="UTF-8"> set karakter yang digunakan
<meta http-equiv="refresh"content="30"> refresh halaman setelah 30 detik

 

Digunakan oleh Search Engine :

<meta name="description" content="Step By Step belajar Html 5 dari pemula hingga menguasai"> deskripsi halaman web
<meta name="keywords" content="belajar html, tutorial html"> keywords halaman web


Informasi Author & Contact :

<meta name="author" content="Andy">
<meta name="contact" content="yesnetijen@gmail.com">

 

 

Mengatur Viewport

Model web yang lagi populer saat ini adalah Web Responsive, yaitu web yang tataletaknya otomatis menyesuaikan perangkat yang digunakan (desktop/mobile).

yesnetijen.web.id ini juga sudah responsive, cobalah buka di desktop dan juga buka di Handpone, dan perhatikan bagaimana halaman web ini menyesuaikan tata letaknya. Umumnya tata letak ini menggunakan Grid, untuk pembahasan lebih detailnya nanti akan kita bahas pada Tutorial berikutnya.

HTML5 memperkenalkan metode untuk memungkinkan perancang web mengendalikan viewport, melalui Tag <meta>

Area halaman web yang terlihat pengguna. Ini bervariasi dengan perangkat, dan akan lebih kecil di ponsel daripada di layar komputer. Kita harus memasukkan <meta> elemen viewport berikut di semua halaman web kita:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> viewport memberikan petunjuk browser pada bagaimana mengontrol dimensi halaman dan scaling.

width=device,
perangkat mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

initial-scale = 1,0
bagian menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.


Sebelumnya
BAB 021 - Iframe
  Berikutnya
BAB 023 - Spesial Karakter

 

(0) Komentar

Beri komentar





Hanya komentar yang sudah di-approve admin yang tampil.

KESIMPULAN : <head> adalah tempat inisialisasi data-data halaman Htm (metadata) Dimana data ini nantinya dapat digunakan oleh user, browser, search engine, dll. Elemen ini berada paling atas, tepat dibawah tag <html> Elemen-elemen dari metadata ini diantaranya : <title>, <style>, <meta>, <link>, <script>, dan <base>     Tag <title> adalah untuk memberikan judul halaman html. Contoh : <html> <head>     <title>Belajar HTML 5</title> </head>     Tag <style> Tag <style> adalah tempat untuk Internal CSS. Contoh : <html> <head> <style>     body {background-color:powderblue;}     h1 {color: red;}     p {color: blue;} </style> </head>     Tag <link> Tag <link> adalah tempat untuk mendefinisikan Eksternal CSS. Contoh <html> <head>     <link rel="stylesheet" href="style.css"> </head>     Tag <meta> Tag <meta> tempat memberikan nilai property dari halaman Html tersebut. Nilai-nilai properti yang dapat dimasukkan bebas sesuai dengan kebutuhan sipembuat/developer halaman Html tersebut. Beberapa contoh metadata yang umum dipakai : Digunakan oleh browser : <meta charset="UTF-8"> set karakter yang digunakan <meta http-equiv="refresh"content="30"> refresh halaman setelah 30 detik   Digunakan oleh Search Engine : <meta name="description" content="Step By Step belajar Html 5 dari pemula hingga menguasai"> deskripsi halaman web <meta name="keywords" content="belajar html, tutorial html"> keywords halaman web Informasi Author & Contact : <meta name="author" content="Andy"> <meta name="contact" content="yesnetijen@gmail.com">     Mengatur Viewport Model web yang lagi populer saat ini adalah Web Responsive, yaitu web yang tataletaknya otomatis menyesuaikan perangkat yang digunakan (desktop/mobile). yesnetijen.web.id ini juga sudah responsive, cobalah buka di desktop dan juga buka di Handpone, dan perhatikan bagaimana halaman web ini menyesuaikan tata letaknya. Umumnya tata letak ini menggunakan Grid, untuk pembahasan lebih detailnya nanti akan kita bahas pada Tutorial berikutnya. HTML5 memperkenalkan metode untuk memungkinkan perancang web mengendalikan viewport, melalui Tag <meta> Area halaman web yang terlihat pengguna. Ini bervariasi dengan perangkat, dan akan lebih kecil di ponsel daripada di layar komputer. Kita harus memasukkan <meta> elemen viewport berikut di semua halaman web kita: <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta> viewport memberikan petunjuk browser pada bagaimana mengontrol dimensi halaman dan scaling. width=device, perangkat mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat). initial-scale = 1,0 bagian menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.

 

 

Step By Step Belajar HTML 5

 

 

Artikel Lainnya :