HTML хуудасны бүтэц

Хөтөч хуудсыг хүлээн аваад түүнийг ямар байдлаар хөрвүүлэхээ тодорхойлдог. Хуудасны хамгийн эхний тег нь <HTML> байх ёстой. Учир нь энэ тег нь таны хуудсыг HTML дээр бичигдсэн гэдгийг хөтөчид мэдэгдэж байгаа юм. Хамгийн жижиг HTML хуудас нь доорх хэлбэртэй байна:

<HTML> ...Хуудасны бие хэсэг... </HTML>

Хуудасны толгойн хэсэг <HEAD> болон түүний элементүүд

Хуудасны толгойн хэсгийн тэг нь <HTML> тэгийн араас шууд байрлах ба хуудасны бие хэсэгт дахин хаана ч ашиглагдахгүй. Энэхүү тег нь хуудасны ерөнхий утгыг илэрхийлдэг бөгөөд хуудасны харагдах хэлбэрт ямарч нөлөө үзүүлдэггүй. <HEAD> тегийн дотор ямар нэгэн текст бичихгүй байх хэрэгтэй. Нээлтийн <HEAD> тегийн араас <TITLE>, <BASE>, <LINK>,<SCRIPT> г.м хуудасны тодорхойлогч тегүүд байрлах бөгөөд бүх тодорхойлолтыг дууссны дараа </HEAD> тег бичигдэнэ.

Санамж. Техник талаасаа <HTML>, <HEAD> ба <BODY> төрлийн тегүүдэд нээлтийн ба хаалтын тегүүд заавал байх албагүй. Гэхдээ эдгээрийг ашиглах нь хөтөч хуудсыг утга бүхий хэсгүүдэд шууд хуваахад амар болгож өгдөг тул дээрх төрлийн тэгүүдийг ашиглаж байхыг чухалчлан сануулъя.

Хуудасны толгой <TITLE>

<HEAD> тегийн цорын ганц заавал байх элемент бол <TITLE>  </TITLE> тегүүд ба эдгээр нь хуудсны нэрийг тодорхойлон хөтөч хуудсыг үзүүлж байгаа цонхны толгой хэсэгт гаргадаг. Жишээ:

<html> 
<head>
<title>Хуудасны толгой</title>
</head>
<body>
Хуудасны бие
</body>
</html>

Үр дүн

Онолын хувьд хуудасны нэрийн уртад хязгаарлалт байдаггүй боловч практикт 60 тэмдэгтээс илүүгүй байлгахыг зөвлөдөг. Өөрийн хуудсанд "Эхний хуудас", "Хоёрдугаар хуудас" гэх мэтийн нэрүүдийг битгий өгөөрэй. Учир нь хуудасны нэр нь материалын агуулгыг илэрхийлж байхаас гадна <title> </title> тегүүд нь сайтыг бусдад түгээх, сайжруулахад багагүй үүрэгтэй байдаг.

BASE тег

Дан <BASE> тегийг хуудасны бүтэн URL хаягийг заахад ашигладаг. Энэ нь ямар хэрэгтэй вэ? Интернетээр хэсэж байгаад та ямар нэгэн html хуудсыг дараа нь үзэх зорилгоор өөрийн компьютер дээр хадгалсан гэе. Тэгвэл хуудас дээрх бүх зургууд улаан чагт болон хувирна. Гэхдээ та интернетэд холбогдсон, хуудас дээр <base> тег байсан бол хөтөч хэрэгцээтэй файлуудыг хаанаас олон татан авахыг мэдэх юм. Энэ тегид утга нь хуудасны хаяг болох цорын ганц href гэсэн атрибут байдаг. Жишээ нь

<html>
<head>
<title>Хуудасны бүтэц</title>
<base href="http://www.e-surgalt.com/">
</head>
<body>
Хуудасны бие
</body>
</html>

LINK тег

Дан <LINK> тегийг хуудаст гадны файл оруулахад ашигладаг. Жишээлбэл та сайтдаа CSS файлыг ашиглах бол түүнийг тусдаа файл болгон хадгалаад дараа нь бүх хуудсанд оруулан ашиглаж болох юм.

<LINK> тег нь хэдэн атрибутуудтай.

  • href - нь оруулан ирэх файлын URL-хаягийг заана
  • rel - тухайн файл нь гадаад файлтай харьцаж байгаа төрлийг заана. Жишээ нь: rel="stylesheet" гэдэг нь гадаад файл нь тухайн хуудасны хэвийг тодорхойлно гэсэн үг
  • type - гадаад файлын төрөл, шинжийг заана

Жишээ

<html>
<head>
<title>Хуудасны бүтэц</title>
<base href="http://www.e-surgalt.com/">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Хуудасны бие
</body>
</html>

META тег

Энэ тегийн мэдээллүүд нь HTML тэй ямарч холбогдолгүй хэдий ч тегийг ашигласнаар дараах асуудлуудыг шийдвэрлэхэд маш эвтэйхэн

  • Хуудасны кодчлолыг заан өгөх. Жишээ нь юникодын монгол текстийг хувьд <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  • Хуудасны түлхүүр үгсийг заах. <meta http-equiv="KEYWORDS" content="тег, html хуудасны бүтэц, хуудасны гарчиг">
  • Хуудасны талаарх хураангуй тодорхойлолт оруулах. <meta http-equiv="DESCRIPTION" content="Хуудасны толгойн хэсэг болон түүний элементүүд"> гэх мэт

<META> тегийн атрибутуудыг авч үзвэл

  • http-equiv - материалын төрөл, түлхүүр үгнүүд, тодорхойлолт гэх мэтийн тегийн шинжийг тодорхойлно.
  • name - тегийн нэмэлт тодорхойлолтуудыг зааж өгөхөд ашиглана. Хэрвээ бичээгүй орхисон бол http-equiv параметртэй ижил гэж үзнэ.
  • content - http-equiv параметрийн утга

Жишээ

<html>
<head>
<title>Хуудасны бүтэц</title>
<base href="/">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="KEYWORDS" content="тег, html хуудасны бүтэц, хуудасны гарчиг">
<meta http-equiv="DESCRIPTION" content="Хуудасны толгойн хэсэг болон түүний элементүүд">
</head>
<body>
Хуудасны бие
</body>
</html>

SCRIPT тег

Программын код агуулсан гадаад файлыг оруулахад <script></script> тегүүдийг ашиглана. Жишээ нь та өөрийн ихэнх хуудастаа javascript -ийн функцуудыг ашигладаг бол тэдгээрийг function.js гэсэн тусдаа файлд хадгалаад <script> тегт гадаад файлынхаа замыг заан өгч хуудсандаа оруулан ирж болно.
Ингэснээр хуудасны кодын бичлэгийн уншигдах байдлыг сайжруулахын зэрэгцээ хуудас ачааллагдах хурдыг өндөр болгоно.

Энэ тег нь дараах параметруудтай.

  • language - программ бичигдсэн хэлийг заана. HTML 4.0 -д энэхүү параметрийг хэрэглэхгүй харин оронд нь type параметрийг ашиглахыг зөвөлсөн байдаг.
  • type - хэлний MIME төрлийг заана.
  • src - программыг агуулсан гадаад файлын замыг заана.

Программын файлыг харьцангуй хаягаар заасан жишээ

<html>
<head>
<title>Хуудасны бүтэц</title>
<base href="/">
<link rel="stylesheet" type="text/css" href="style.css"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="KEYWORDS" content="тег, html хуудасны бүтэц, хуудасны гарчиг">
<meta http-equiv="DESCRIPTION" content="Хуудасны толгойн хэсэг болон түүний элементүүд">
<script type="text/javascript" src="function.js"> </script>
</head>
<body>
Хуудасны бие
</body>
</html>

Хуудасны бие <BODY>

Хуудасны биеийн тег нь HTML хуудасны цонхонд харагдах хэсгүүдийг илэрхийлнэ. Хуудасны бие хэсэг нь өөр хуудасны холбоос, тескт, зураг г.м төрөл бүрийн мэдээллийг агуулна. Хуудасны бие хэсэг нь <BODY> ба </BODY> тегүүдийн дунд оршино. Энэ нь таны хуудасны утга илэрхийлсэн текст болон график мэдээллийг агуулсан үзэгдэх хэсэг юм. Хэдийгээр <BODY> тегт заавал байх параметрууд байхгүй ч гэсэн ихэнх хөтөчүүд одоог хүртэл дэмждэг параметруудыг авч үзвэл

  • alink - идэвхитэй холбоосын өнгө. Холбоосын харагдах өнгө нь түүн дээр зүүн даралт хийхэд идэвхитэй холбоосын өнгөөр солигдоно
  • vlink - хуудсанд нь зочилсон холбоосуудын өнгө. Өөрөөр хэлбэл зүүн даралт хийн шилжилт хийгдсэн холбоосууд
  • background - дэвсгэр зургаар ашиглагдах зургийг заана. Энэ зураг нь цонхны харагдах бүх зайг дүүргэдэг. Хэрвээ зургийн хэмжээ нь хөтөчийн цонхны хэмжээнээс бага байвал тухайн зургийг давтах замар цонхыг дүүргэнэ. Иймээс дэвсгэр зургийг сонгон авахдаа анхааралтай хандах хэрэгтэй.
  • bgcolor - хуудасны дэвсгэр өнгийг заана.
  • leftmargin - хөтөчийн цонхны зүүн хязгаараас хуудасны агуулга хүртлэх зайг тодорхойлно.
  • rightmargin - хөтөчийн цонхны баруун хязгаараас хуудасны агуулга хүртлэх зайг тодорхойлно.
  • topmargin - хөтөчийн цонхны дээд хязгаараас хуудасны агуулга хүртлэх зайг тодорхойлно.
  • bottommargin - хөтөчийн цонхны доод хязгаараас хуудасны агуулга хүртлэх зайг тодорхойлно.
  • text - хуудасны хэмжээнд текстийн өнгийг тогтооно.

Жишээ

<html>
<head>
<title>HTML биеийн тегүүд</title>
<base href="http://mysite.mn/">
<link rel="stylesheet" type="text/css" href="style.css"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="KEYWORDS" content="тег, html хуудасны бүтэц, хуудасны гарчиг">
<meta http-equiv="DESCRIPTION" content="Хуудасны толгойн хэсэг болон түүний элементүүд">
<script type="text/javascript" src="function.js"> </script>
</head>
<body bgcolor="khaki" leftmargin="100" topmargin="50" rightmargin="50" bottommargin="50" text="gray" alink="red" vlink="green">
Энгийн текст <br>
<a href="index.html">index.html хуудасны холбоос</a> <br>
<a href="map.html">map.html хуудасны холбоос</a>
</body>
</html>



Тайлбар

HTML нь бусад хэлнүүдийн адилаар хуудасны бие хэсэгт тайлбар оруулах боломжтой байдаг. Тайлбар нь хуудсыг сүлжээгээр дамжуулах үед бие хэсэгт хадгалагдах боловч броузероор харахад гарч ирэхгүй. Тайлбарыг бичих:

<!-- Энэ бол тайлбар -->

Тайлбар нь хуудасны хаана ч хичнээн ч хэмжээгээр байж болно.

Бид энэхүү хичээлээр HTML хуудасны бүтцийн талаар үзлээ.

Санамж.
Таны бүх HTML хуудаснууд доорх хэлбэртэй байх хэрэгтэй гэдгийг сануулъя. Тегүүд ч жишээнд үзүүлсэн дарааллаар байрлах ёстой.

<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

Хичээлээр үзсэн бусад тегүүдийг хэрэгцээтэй үед нь дараа нь нэмэн оруулж болно. Бидний цаашид үзэх бүх тегүүд <body> </body> тег хооронд байрлах бөгөөд тэдний дараалалд зарчмын онцын ялгаа байдаггүй.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 3933 Нийтийн

Бид өмнөх хичээлүүдээр фотошоп дээр сайтын загвараа гаргасан. Энэхүү цуврал хичээлүүдээр сайтын загвараа хэрхэн программчлах талаар үзэх болно. Сайтын загварыг фотошоп дээр хийх хичээлүүд сайтын Программууд цэсний Фотошоп дэд бүлэгт нийтлэгдсэн байгаа. Учир нь тэдгээр хичээлүүдэд сайтын программчлалтай холбоо багатай цэвэр дизайны холбогдолтойн дээр фотошопоор хийх ажиллагаанууд байсан билээ. Гэхдээ эдгээр хичээлүүд бүхэлдээ сайтыг хэрхэн бүтээх тухай цогц хичээлүүдэд хамрагдана. Хичээлийг үйл ажиллагааны онцлогийг харгалзан зохих хэсгүүдэд хуваан оруулсан юм. Хичээлүүдийг үзэхийн өмнө тухайн сэдвийн ерөнхий ойлголтуудын талаарх хичээлийг үзсэн байвал илүү үр дүнтэйг сануулъя. Бид Фотошоп дээр доорх зурагт үзүүлсэн сайтын загварыг хийгээд байгаа.

  Нээгдсэн тоо: 2463 Төлбөртэй

Холбоосын тег a

html хуудасны хамгийн чухал ойлголтуудын нэг бол холбоос. Интернет хуудас үзэж байхдаа бид товч эсвэл текст дээр дараад хэрэгтэй хуудас руу шилждэг. Эдгээр хуудаснууд нь тухайн сервер дээр байж болохоос гадна ертөнцийн нөгөө өнцөгт байрлах серверт ч байж болно. Ямарч тохиолдолд хуудас руу тэр дороо л шууд шилждэг.
Өөр хуудсанд шилжихийн тулд хаана дарахыг та хэрхэн мэдэх вэ? Холбоосын өнгө өөр байх эсвэл доогуур зураастай эсвэл хулганы заагчийг аваачихад дүрс нь өөр болох гэх мэтээр хараад мэдэхээр байдаг.
Энэ мэт өөрчлөлтүүдийг хариуцаж байдаг контейнер-тег бол <a></a> юм. Харин хэрэглэгч зүүн даралт хийхэд хаашаа шилжүүлэхийг тегийн href атрибут тодорхойлно.

  Нээгдсэн тоо: 1657 Төлбөртэй

Хэрэглэгч мэдээлэл оруулах боломжийг форм олгодог. Та интернетээр хэсэж байхдаа төрөл бүрийн сорилго, асуулга, санал хураалт зэрэгтэй нэг бус удаа тааралдаж байсан байх. Энэ бүгдийг өөрийн веб сайтад хийхэд форм хэрэгтэй болдог. Энд онцлоход html форм нь өөрөө зөвхөн мэдээлэл оруулах боломжийг л олгодог бөгөөд харин оруулсан мэдээллийг боловсруулж чаддаггүй гэдгийг хэлэх хэрэгтэй. HTML нь бүтцийг бий болгох хэл болохоос программчлалын хэл биш. Мэдээллийг боловсруулахад javascript, php гэх мэтийн хэлүүдийг ашигладаг.
Хичээлээр бид өөрийн хуудаст html формыг нэмэхэд сураад түүнд оруулсан мэдээллийг хэрхэн боловсруулахыг php, javascript -ын талаарх хичээлүүдээс үзээрэй.
Ингээд html форм нь <form></form> тегүүдээр өгөгдөнө. Формын үлдсэн бүх элементүүд эдгээр тегүүдийн хооронд байрлана.

  Нээгдсэн тоо: 2726 Төлбөртэй

Фрейм бүтцийн жишээ

Хөтөчийн цонхыг фреймүүдэд хувааж болдог. Өөрөөр хэлбэл зэрэгцэн орших хэсгүүдэд хуваана гэсэн үг. Эдгээр хэсгүүдэд өөр өөр html хуудаснуудыг ачааллаж болно. Жишээн дээр тодорхой үзүүлье. Доорх код бүхий index.html файлыг үүсгээрэй.

<html>
<head>
<title>Фреймтэй ажиллах</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<frameset rows="30%, 10%, 60%" >
<frame>
<frame>
<frame>
</frameset>
</html>

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 27

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 57

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 59

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 61

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 81

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 89

 

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 74

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 59

 

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 77

 
Энэ долоо хоногт

Арифметик прогресийн 5-р гишүүн 8,4 харин 10-р гишүүн 14,4 тэнцүү бол энэ прогресийн 22-р гишүүнийг ол.

Нээгдсэн тоо : 1084

 

Дарааллын эхний n гишүүний нийлбэр томьёогоор өгөгджээ. Хэрэв энэ дараалал геометр прогресс бол q -г ол, арифметик прогресс бол d -г ол.

Нээгдсэн тоо : 776

 

бол M·N=?

Нээгдсэн тоо : 1067