HTML head elementi
HTML <head> elementi
quyidagi elementlar uchun idish hisoblanadi:
<title>, <style>,
<meta>, <link>, <script> va <base>.
HTML <head> elementi
<head> elementi metama’lumotlar (ma’lumot haqidagi ma’lumot) uchun idish bo‘lib, <html> tegi va <body> tegi oralig‘iga joylashtiriladi.
HTML metama’lumotlari — bu HTML hujjati haqidagi ma’lumotdir. Metama’lumotlar sahifada ko‘rsatilmaydi.
Metama’lumotlar odatda hujjat sarlavhasi, belgilar to‘plami, uslublar, skriptlar va boshqa meta ma’lumotlarni belgilaydi.
HTML <title> elementi
<title> elementi hujjatning sarlavhasini aniqlaydi.
Sarlavha faqat matn bo‘lishi kerak va u brauzerning sarlavha qatorida yoki sahifa varag‘ida ko‘rsatiladi.
HTML hujjatlarida <title> elementi majburiy!
Sahifa sarlavhasining mazmuni qidiruv tizimini optimallashtirish (SEO) uchun juda muhim! Sahifa sarlavhasi qidiruv natijalarida sahifalarni ro‘yxatlash tartibini belgilashda qidiruv tizimi algoritmlari tomonidan ishlatiladi.
<title> elementi:
- brauzer vositalar panelida sarlavha belgilaydi
- sahifa sevimlilarga qo‘shilganda unga sarlavha beradi
- qidiruv tizimi natijalarida sahifa uchun sarlavha ko‘rsatadi
Shuning uchun sarlavhani imkon qadar aniq va mazmunli qilishga harakat qiling!
Oddiy HTML hujjati:
Misol
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
O‘zingiz sinab ko‘ring »
HTML <style> elementi
<style> elementi bitta HTML sahifasi uchun uslub ma’lumotlarini belgilashda ishlatiladi:
Misol
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
O‘zingiz sinab ko‘ring »
HTML <link> elementi
<link> elementi joriy hujjat va tashqi resurs o‘rtasidagi munosabatni aniqlaydi.<link>
tegi ko‘pincha tashqi uslublar jadvallariga havola qilishda ishlatiladi:
Maslahat: CSS ni to‘liq o‘rganish uchun CSS darsligimizga o‘ting.
HTML <meta> elementi
<meta> elementi odatda belgilar to‘plami, sahifa tavsifi, kalit so‘zlar, hujjat muallifi va viewport sozlamalarini belgilashda ishlatiladi.
Metama’lumotlar sahifada ko‘rsatilmaydi, lekin brauzerlar (mazmunni qanday ko‘rsatish yoki sahifani qayta yuklash), qidiruv tizimlari (kalit so‘zlar) va boshqa veb-xizmatlar tomonidan ishlatiladi.
Misollar
Ishlatiladigan belgilar to‘plamini belgilang:
<meta charset="UTF-8">
Qidiruv tizimlari uchun kalit so‘zlarni belgilang:
<meta name="keywords" content="HTML, CSS, JavaScript">
Veb-sahifangiz tavsifini belgilang:
<meta name="description" content="Free Web tutorials">
Sahifa muallifini belgilang:
<meta name="author" content="John Doe">
Hujjatni har 30 soniyada yangilang:
<meta http-equiv="refresh" content="30">
Saytingiz barcha qurilmalarda yaxshi ko‘rinishi uchun viewport sozlang:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> teglariga misol:
Misol
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
O‘zingiz sinab ko‘ring »
Viewport’ni sozlash
Viewport — bu foydalanuvchining veb-sahifaning ko‘rinadigan qismi. U qurilmaga qarab o‘zgaradi - mobil telefondada kompyuter ekraniga qaraganda kichikroq bo‘ladi.
Barcha veb-sahifalaringizga quyidagi <meta> elementini kiritishingiz kerak:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bu brauzerga sahifa o‘lchamlari va masshtabini qanday boshqarish bo‘yicha ko‘rsatmalar beradi.
width=device-width qismi sahifa kengligini qurilma ekran kengligiga mos qiladi (qurilmaga qarab farq qiladi).
initial-scale=1.0 qismi sahifa brauzerda birinchi marta yuklanganda boshlang‘ich masshtab darajasini belgilaydi.
Mana viewport meta tegisiz veb-sahifa va shu veb-sahifaning viewport meta tegi bilan holatiga misol:
Maslahat: bu sahifani telefon yoki planshetda ko‘rayotgan bo‘lsangiz, farqni ko‘rish uchun quyidagi ikkita havolani bosishingiz mumkin.
HTML <script> elementi
<script> elementi klient tomonidagi (client-side) JavaScriptlarni aniqlashda ishlatiladi.
Quyidagi JavaScript "Hello JavaScript!" matnini id="demo" bo‘lgan HTML elementiga yozadi:
Misol
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
O‘zingiz sinab ko‘ring »
Maslahat: JavaScript ni to‘liq o‘rganish uchun JavaScript darsligimizga o‘ting.
HTML <base> elementi
<base> elementi sahifadagi barcha nisbiy URL manzillar uchun bazaviy URL va/yoki maqsadni (target) belgilaydi.
<base> tegida href yoki target atributidan kamida bittasi, yoki ikkalasi ham bo‘lishi shart.
Hujjatda faqat bitta <base>
elementi bo‘lishi mumkin!
Misol
Sahifadagi barcha havolalar uchun standart URL va standart maqsad (target) belgilang:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
O‘zingiz sinab ko‘ring »
Bob xulosasi
<head>elementi metama’lumotlar (ma’lumot haqidagi ma’lumot) uchun idishdir<head>elementi<html>tegi va<body>tegi oralig‘iga joylashtiriladi<title>elementi majburiy va u hujjatning sarlavhasini aniqlaydi<style>elementi bitta hujjat uchun uslub ma’lumotlarini belgilashda ishlatiladi<link>tegi ko‘pincha tashqi uslublar jadvallariga havola qilishda ishlatiladi<meta>elementi odatda belgilar to‘plami, sahifa tavsifi, kalit so‘zlar, hujjat muallifi va viewport sozlamalarini belgilashda ishlatiladi<script>elementi klient tomonidagi JavaScriptlarni aniqlashda ishlatiladi<base>elementi sahifadagi barcha nisbiy URL manzillar uchun bazaviy URL va/yoki maqsadni belgilaydi
HTML head elementlari
| Tag | Tavsif |
|---|---|
| <head> | Hujjat haqidagi ma’lumotlarni belgilaydi |
| <title> | Hujjatning sarlavhasini belgilaydi |
| <base> | Sahifadagi barcha havolalar uchun standart manzil yoki standart maqsadni belgilaydi |
| <link> | Hujjat va tashqi manba o‘rtasidagi munosabatni belgilaydi |
| <meta> | HTML hujjat haqidagi metama’lumotlarni belgilaydi |
| <script> | Mijoz tomonidagi skriptni belgilaydi |
| <style> | Hujjat uchun uslub ma’lumotlarini belgilaydi |
Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.
Video: HTML head
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!