HTML - Head elementi

HTML <head> elementi quyidagi elementlar uchun konteyner hisoblanadi: <title>, <style>, <meta>, <link>, <script>, va <base>.

HTML `<head>` elementi

<head> elementi metadata (ma'lumotlar haqida ma'lumot) uchun konteyner bo'lib, <html> tegidan keyin va <body> tegidan oldin joylashadi.

HTML metadata — bu HTML hujjati haqida ma'lumot. Metadata sahifada ko'rsatilmaydi.

Metadata odatda hujjat sarlavhasi, belgilar to'plami, uslublar, skriptlar va boshqa meta ma'lumotlarni belgilaydi.

HTML `<title>` elementi

<title> elementi hujjat sarlavhasini belgilaydi. Sarlavha faqat matndan iborat bo'lishi kerak va brauzerning sarlavha panelida yoki sahifa tabida ko'rsatiladi.

<title> elementi HTML hujjatlarida majburiy!

Sahifa sarlavhasi qidiruv tizimlari uchun juda muhim. Qidiruv tizimi algoritmlari sahifalarni natijalar ro'yxatida tartiblashda sarlavhadan foydalanadi.

<title> elementi:

Brauzer panelida sarlavha ko'rsatadi
Sahifa favoritlarga qo'shilganda sarlavha beradi
Qidiruv natijalarida sahifa sarlavhasini ko'rsatadi

Shuning uchun, sarlavhani aniq va mazmunli qilib yozishga harakat qiling!

Misol:

html

<!DOCTYPE html>
<html>
<head>
  <title>Ma'noli Sahifa Sarlavhasi</title>
</head>
<body>
  Hujjatning mazmuni......
</body>
</html>

HTML `<style>` elementi

<style> elementi bitta HTML sahifa uchun uslub ma'lumotlarini belgilashda ishlatiladi.

Misol:

html

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

HTML `<link>` elementi

<link> elementi joriy hujjat va tashqi resurs o'rtasidagi munosabatni belgilaydi.

<link> tegi ko'pincha tashqi uslub fayllariga bog'lash uchun ishlatiladi.

Misol:

html

<link rel="stylesheet" href="meninguslubim.css">

TIP

CSS haqida to'liq ma'lumot olish uchun CSS Darsligi sahifasiga tashrif buyuring.

HTML `<meta>` elementi

<meta> elementi odatda belgilar to'plami, sahifa tavsifi, kalit so'zlar, hujjat muallifi va viewport sozlamalarini belgilash uchun ishlatiladi.

Metadata sahifada ko'rsatilmaydi, lekin brauzerlar (mazmunni qanday ko'rsatish yoki sahifani yangilash), qidiruv tizimlari (kalit so'zlar), va boshqa web xizmatlar tomonidan ishlatiladi.

Misollar

Belgilar to'plamini belgilash:

html

<meta charset="UTF-8">

Qidiruv tizimlari uchun kalit so'zlarni belgilash:

html

<meta name="keywords" content="HTML, CSS, JavaScript">

Web sahifa tavsifini belgilash:

html

<meta name="description" content="Bepul Web darsliklar">

Sahifa muallifini belgilash:

html

<meta name="author" content="Jahonbek">

Hujjatni har 30 soniyada yangilash:

html

<meta http-equiv="refresh" content="30">

Web-saytingiz barcha qurilmalarda yaxshi ko'rinishi uchun viewportni sozlash:

html

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

<meta> teglar misoli:

html

<meta charset="UTF-8">
<meta name="description" content="Bepul Web darsliklar">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Jahonbek">

Viewportni sozlash

Viewport — bu foydalanuvchining web sahifada ko'rinadigan maydoni. U qurilmaga qarab o'zgaradi — telefon ekranida kichikroq, kompyuter ekranida kattaroq bo'ladi.

Quyidagi <meta> elementini barcha web sahifalaringizga qo'shishingiz kerak:

html

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

Bu brauzerga sahifa o'lchamlari va masshtabini boshqarish bo'yicha ko'rsatma beradi.

width=device-width qismi sahifa kengligini qurilma ekraniga moslashtiradi.
initial-scale=1.0 qismi sahifa birinchi yuklanganda boshlang'ich masshtabni belgilaydi.

Quyida viewport meta tegi yo'q va bor sahifa misollari keltirilgan:

TIP

Agar ushbu sahifani telefon yoki planshetda ko'rayotgan bo'lsangiz, quyidagi ikki havolani bosib farqni ko'rishingiz mumkin.

HTML `<script>` elementi

<script> elementi mijoz tomoni JavaScriptlarni belgilash uchun ishlatiladi.

Quyidagi JavaScript HTML elementga id="namuna" bo'lgan joyga "Salom JavaScript!" yozadi:

Misol:

html

<script>
function salomFunksiya() {
  document.getElementById("namuna").innerHTML = "Salom JavaScript!";
}
</script>

TIP

JavaScript haqida to'liq ma'lumot olish uchun JavaScript Darsligi sahifasiga tashrif buyuring.

HTML `<base>` elementi

<base> elementi sahifadagi barcha nisbiy URLlar uchun asosiy URL va/yoki targetni belgilaydi.

<base> tegida href yoki target atributi bo'lishi shart, yoki ikkalasi ham bo'lishi mumkin.

Hujjatda faqat bitta <base> elementi bo'lishi mumkin!

Misol:

Barcha havolalar uchun asosiy URL va asosiy targetni belgilash:

html

<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.md">HTML base Tag</a>
</body>

Bob yakuni

<head> elementi metadata (ma'lumotlar haqida ma'lumot) uchun konteyner
<head> elementi <html> va <body> teglar orasida joylashadi
<title> elementi majburiy va hujjat sarlavhasini belgilaydi
<style> elementi bitta hujjat uchun uslub ma'lumotlarini belgilaydi
<link> tegi ko'pincha tashqi uslub fayllariga bog'lash uchun ishlatiladi
<meta> elementi odatda belgilar to'plami, sahifa tavsifi, kalit so'zlar, hujjat muallifi va viewport sozlamalarini belgilash uchun ishlatiladi
<script> elementi mijoz tomoni JavaScriptlarni belgilash uchun ishlatiladi
<base> elementi sahifadagi barcha nisbiy URLlar uchun asosiy URL va/yoki targetni belgilaydi

HTML head elementlari

Teg	Tavsifi
`<head>`	Hujjat haqida ma'lumotni belgilaydi
`<title>`	Hujjat sarlavhasini belgilaydi
`<base>`	Sahifadagi barcha havolalar uchun asosiy manzil yoki targetni belgilaydi
`<link>`	Hujjat va tashqi resurs o'rtasidagi munosabatni belgilaydi
`<meta>`	HTML hujjati haqida metadata belgilaydi
`<script>`	Mijoz tomoni skriptni belgilaydi
`<style>`	Hujjat uchun uslub ma'lumotlarini belgilaydi

TIP

Barcha HTML teglar ro'yxatini ko'rish uchun HTML Teglar Ma'lumotnomasi sahifasiga tashrif buyuring.

HTML - Head elementi ​