HTML <head> элемент нь дараах элементүүдийн сав (container) юм: <title>, <style>, <meta>, <link>, <script>, болон <base>.
HTML <head> Элемент #
<head> элемент нь мета өгөгдлийн (өгөгдлийн тухай өгөгдөл) сав бөгөөд <html> шошго болон <body> шошгоны хооронд байрладаг.
- HTML мета өгөгдөл нь HTML баримт бичгийн тухай өгөгдөл юм.
- Мета өгөгдөл нь хуудас дээр харагддаггүй.
- Мета өгөгдөл нь ихэвчлэн баримт бичгийн гарчиг, тэмдэгтийн багц, загвар, скрипт болон бусад мета мэдээллийг тодорхойлдог.
HTML <title> Элемент #
<title> элемент нь баримт бичгийн гарчгийг тодорхойлдог. Гарчиг нь зөвхөн текст байх ёстой бөгөөд хөтчийн гарчгийн мөр эсвэл хуудасны таб (tab) дээр харагддаг.
Анхаар: HTML баримт бичигт
<title>элемент байх шаардлагатай!
Хуудасны гарчгийн агуулга нь хайлтын системийн оновчлолд (SEO) маш чухал! Хайлтын системийн алгоритмууд хайлтын үр дүнд хуудсуудыг жагсаах дарааллыг шийдэхдээ хуудасны гарчгийг ашигладаг.
<title> элемент нь:
- Хөтчийн хэрэгслийн мөрөнд гарчгийг тодорхойлдог.
- Хуудсыг “favorites” (дуртай)-д нэмэх үед хуудасны гарчгийг өгдөг.
- Хайлтын системийн үр дүнд хуудасны гарчгийг харуулдаг.
Тиймээс гарчгийг аль болох үнэн зөв, утга учиртай болгохыг хичээгээрэй!
Жишээ:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Утга учиртай хуудасны гарчиг</title>
</head>
<body>
Баримт бичгийн агуулга......
</body>
</html>
HTML <style> Элемент #
<style> элемент нь нэг HTML хуудсанд зориулсан загварын мэдээллийг тодорхойлоход ашиглагддаг:
Жишээ:
HTML
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML <link> Элемент #
<link> элемент нь одоогийн баримт бичиг болон гадны нөөц хоорондын хамаарлыг тодорхойлдог.
<link> шошгыг ихэвчлэн гадны загварын хуудас (style sheets) руу холбоход ашигладаг:
Жишээ:
HTML
<link rel="stylesheet" href="mystyle.css">
HTML <meta> Элемент #
<meta> элементийг ихэвчлэн тэмдэгтийн багц, хуудасны тайлбар, түлхүүр үгс, баримт бичгийн зохиогч болон viewport тохиргоог зааж өгөхөд ашигладаг.
Мета өгөгдөл нь хуудас дээр харагдахгүй боловч хөтчүүд (агуулгыг хэрхэн харуулах эсвэл хуудсыг дахин ачаалах), хайлтын системүүд (түлхүүр үгс) болон бусад веб үйлчилгээнүүдэд ашиглагддаг.
Жишээнүүд:
- Тэмдэгтийн багцыг тодорхойлох:HTML
<meta charset="UTF-8"> - Хайлтын системд зориулсан түлхүүр үгсийг тодорхойлох:HTML
<meta name="keywords" content="HTML, CSS, JavaScript"> - Веб хуудасны тайлбарыг тодорхойлох:HTML
<meta name="description" content="Үнэгүй веб хичээлүүд"> - Хуудасны зохиогчийг тодорхойлох:HTML
<meta name="author" content="John Doe"> - Баримт бичгийг 30 секунд тутамд шинэчлэх:HTML
<meta http-equiv="refresh" content="30"> - Веб сайтыг бүх төхөөрөмж дээр сайн харагдуулахын тулд viewport-ийг тохируулах:HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport Тохиргоо #
Viewport бол хэрэглэгчийн веб хуудасны харагдах хэсэг юм. Энэ нь төхөөрөмжөөс хамаарч өөр өөр байдаг – гар утас дээр компьютерын дэлгэцээс жижиг байх болно.
Та бүх веб хуудсандаа дараах <meta> элементийг оруулах хэрэгтэй:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Энэ нь хөтөч (browser)-д хуудасны хэмжээ, масштабыг хэрхэн хянах талаар зааварчилгаа өгдөг.
width=device-widthхэсэг нь хуудасны өргөнийг төхөөрөмжийн дэлгэцийн өргөнийг дагаж мөрдөхөөр тохируулдаг (энэ нь төхөөрөмжөөс хамаарч өөр өөр байна).initial-scale=1.0хэсэг нь хөтөч хуудсыг анх ачаалах үед масштабын эхний түвшнийг тохируулдаг.
HTML <script> Элемент #
<script> элемент нь клиент талын JavaScript-ийг тодорхойлоход ашиглагддаг.
Дараах JavaScript нь id="demo" бүхий HTML элемент дотор “Hello JavaScript!” гэж бичнэ:
Жишээ:
HTML
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
HTML <base> Элемент #
<base> элемент нь хуудас дахь бүх харьцангуй (relative) URL-уудын үндсэн URL болон/эсвэл зорилтот байршлыг (target) тодорхойлдог.
<base> шошгонд href эсвэл target атрибутын аль нэг нь, эсвэл хоёулаа байх ёстой. Баримт бичигт зөвхөн нэг л <base> элемент байж болно!
Жишээ:
Хуудас дээрх бүх холбоосуудад үндсэн URL болон үндсэн зорилтот байршлыг тодорхойлох:
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.asp">HTML base Tag</a>
</body>
Бүлгийн Дүгнэлт #
<head>элемент нь мета өгөгдлийн (өгөгдлийн тухай өгөгдөл) сав юм.<head>элемент нь<html>шошго болон<body>шошгоны хооронд байрладаг.<title>элемент нь шаардлагатай бөгөөд баримт бичгийн гарчгийг тодорхойлдог.<style>элемент нь нэг баримт бичигт зориулсан загварын мэдээллийг тодорхойлоход ашиглагддаг.<link>шошгыг ихэвчлэн гадны загварын хуудас руу холбоход ашигладаг.<meta>элементийг ихэвчлэн тэмдэгтийн багц, хуудасны тайлбар, түлхүүр үгс, баримт бичгийн зохиогч болон viewport тохиргоог зааж өгөхөд ашигладаг.<script>элемент нь клиент талын JavaScript-ийг тодорхойлоход ашиглагддаг.<base>элемент нь хуудас дахь бүх харьцангуй URL-уудын үндсэн URL болон/эсвэл зорилтот байршлыг тодорхойлдог.
Дасгал? #
Дараах элементүүдийн аль нь head хэсэгт байрлах ёсгүй вэ?
<title><link><body>
HTML head Элементүүд #
| Шошго | Тайлбар |
<head> | Баримт бичгийн тухай мэдээллийг тодорхойлно |
<title> | Баримт бичгийн гарчгийг тодорхойлно |
<base> | Хуудас дээрх бүх холбоосын үндсэн хаяг эсвэл үндсэн зорилтот байршлыг тодорхойлно |
<link> | Баримт бичиг болон гадны нөөц хоорондын хамаарлыг тодорхойлно |
<meta> | HTML баримт бичгийн тухай мета өгөгдлийг тодорхойлно |
<script> | Клиент талын скриптийг тодорхойлно |
<style> | Баримт бичигт зориулсан загварын мэдээллийг тодорхойлно |
Та HTML-ийн бүх боломжит шошгуудын жагсаалтыг манай HTML Шошгын Лавлахаас үзнэ үү.
