HTML хэлний үндсэн элемент болон хэрэглээ
Оршил
Jekyll theme ашиглан вебсайт хийж байгаа тохиолдолд HTML хэрэглэхгүйгээр шинэ постныхоо агуулгыг бичих боломжтой. Гэвч илүү гоё харагдацтай пост оруулхын тулд HTML хэлийг сурах шаардлага бий.
HTML нь анхан түвшинд хэрэглэхэд маш энгийн амархан бөгөөд анх сурч эхлэхэд нээх хүндрэл байхгүй.
Үндсэн элементүүдийг сурангаа жишиг байдлаар нэг блог пост хамтдаа бичиж үзэцгээе.
HTML хэл танилцуулга
Нэг өгүүлбэрээр хэлбэл HTML нь вебпэйжүүдын арга яс гэж хэлж болно. Ихэнхдээ front-end хөгжүүлэгчдийн хамгийн эхэнд сурдаг хэл бөгөөд front-end хөгжүүлэлтүүдийн гол ажлуудын нэг юм. Тэгвэл HTML гэж яг юу вэ? HTML нь вебпэйж дэхь агуулга болох зураг, бичвэр, бичлэгүүд яаж байрлахыг тодорхойлдог. HTML нь англи хэлээр HyperText Markup Language гэсэн үгний товчлол бөгөөд markup хэл нь энгийн текстийг хэрхэн харагдахыг тодорхойлдог гэж ойлгож болно. Өөрөөр тайлбарвал бичвэр, зураг болон өөр бусад агуулгыг HTML элемент хэлбэрээр бичигсэнээр компьютер таних билээ. Хэрвээ ямарваа HTML элементээр бичигдээгүй бол компьютер маань энгийн бичвэрийг таних боломжгүй байгаа билээ.
Front-end хөгжүүлэгчээр ажиллах тохиолдолд юун түрүүнд HTML хэл сураад дараа нь CSS болон JavaScript суран илүү дараагийн түвшний вебпэйж хийх боломжтой.
HTML элементүүд
Өмнө хэлсэнчлэн HTML хэлний үндсэн нэгж нь элемент (element) юм. Эдгээр элемент нь вебпэйжийн үндсэн бүтэц болон агуулгыг тодорхойлдог. Бүх элемент нь эхлүүлэгч хаяг (opening tag), агуулга (content) болон төгсгөгч хаяг (closing tag) гэсэн 3 бүрэлдэхүүнээс тогтоно. Жишээ нь дараах paragraph element-ын <p> нь эхлүүлэгч хаяг, Сайн байн уу? гэсэн хэсэг нь агуулга бөгөөд </p> нь төгсгөгч хаяг болно. HTML эхлүүлэгч болон төгсгөгч хаяг буюу tag нь тухайн элементийн тэмдэглэгээ болон онгойлогч (opening) болон хаагч(closing) хаалтнаас бүрдэнэ. Жишээ нь p элемент тэмдэглэгээ нь paragraph буюу цогцолборыг илэрхийлж байгаа. Эхлүүлэгч хаягтай ялгаатай нь төгсгөгч хаяг нь элемент тэмдэглэгээний өмнө нь forward slash буюу налуу зураастай.
<body>
<p>Сайн байна уу?</p>
</body>
HTML element нь элементийн нэрнээс хамаараад дотроо олон төрөлтэй. Төрөл болгоныг хамтдаа сурцгаая.
1. Үндсэн элементүүд
<!DOCTYPE html>: HTML version таниулах
Бүх HTML doc нь HTML version илэрхийлсэн элемент болох DOCTYPE-ээр эхлэнэ. Ямарваа нэг version number байхгүй дан html гэж бичих тохиолдолд хамгийн сүүлийн үеийн version-ээр танигдах болно.
<!DOCTYPE html>
<html>
<!-- Бусад агуулга -->
</html>
<html>элемент: Бусдах бүх HTML элементүүдийг агуулна Дээрхи код хэсэгт үзүүлсэн шиг DOCTYPE-аас бүх элементүүд нь<html>гэсэн элементэнд агуулагдах ёстой.<head>элемент: вебпэйжийн талаархи мета мэдээлэл агуулсан хэсэг Энэхүү элемэнт дотор бичигдсэн мэдээлэл нь вебпэйж дээр шууд харагддаггүй бөгөөд web tab-ны дээд хэсэгт харагдах гарчиг зэрэг мэдээллийг энэхүү хэсэгт оруулна
<head>
<title>My Webpage</title>
<!-- Бусад агуулга-->
</head>
<body>элемент: Вебпэйж дээр шууд харагдах бүх агуулгыг энэхүү элемент дотор оруулна.
<body>
<h1>Тавтай морилно уу!</h1>
<p>Манай пэйжийг зорин ирсэн явдалд баярлалаа</p>
</body>
2. Тексттэй холбоотой элементүүд
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Янз бүрийн хэмжээтэй гарчигууд
<h1>Гол гарчиг</h1>
<h2>Дэд гарчиг</h2>
<p>цогцолбор элемент: p нь paragraph гэсэн үгний товчлол бөгөөд бичвэрийг цогцолбор хэлбэрт бичихэд ашиглана.
<p>This is a paragraph. </p>
<strong>, <em>: бичвэрийг тодотгож өгөх strong нь бичвэрийг bold болгох бол em нь italics болгоно.
<strong>bold</strong>
<em>italics</em>
3. Жагсаалттай холбоотой элементүүд
<ul>: Дараалалгүй лист элемент Дараах зааврын дагуу<ul>элементийн дотор<li>тэмдэглэгээ ашиглан дараалалгүй лист үүсгэнэ
<ul>
<li>Item 1 </li>
<li>Item 2 </li>
</ul>
<ol>: Тоон дараалалт лист үүсгэх Мөн адилаар<li>элемент ашиглан дараах байдлаар дараалалт лист үүсгэнэ.
<ol>
<li>First</li>
<li>Second</li>
</ol>
4. Медиатай холбоотой элементүүд
<a>: Линк оруулах Эхлүүлэгч хаяг нь дотроо src гэсэн attribute ашиглаад линкээ бичих бөгөөд эхлүүлэгч болон төгсгөгч хаягны хооронд линкний тайлбар бичиг болох нэрийг бичиж өгнө.
<a src="https://www.google.com/">google</a>
target гэсэн attribute-г _blank болгосноор хэрэглэгч линк дээр дарахад шинэ web tab нээгдэх тохиргоо хийж болно.
img: Зураг оруулах Энэхүү элемент зөвхөн эхлүүлэгч хаягнаас бүрдэх бөгөөд src attribute ашиглан зурагны файл байрлалыг оруулна. Мөнхүү alt гэсэн attribute ашиглан хараагүй хүн болон эсвэл зураг уншигдахгүй байх үед зургийг тайлбарлах өгөх зорилготой бичвэр оруулна.
<img src="cute_dog.jpg" alt="Эгдүүтэй нохойны зураг"/>
Мөнхүү alt гэсэн attribute ашиглан хараагүй хүн болон эсвэл зураг уншигдахгүй байх үед зургийг тайлбарлах өгөх зорилготой бичвэр оруулна.
<video>: Бичлэг оруулах. Дараах attribute-ууд ашиглана. src: бичлэгний файл хаяг зааж өгөх controls: тоглуулах, зогсоох зэрэг controls-уудыг идэвхжүүлэх тохиргоо width & height: бичлэгний урт өргөний мэдээлэл оруулах autoplay: автоматаар бичлэгийг шууд эхлүүлэх тохиргоо loop: дуусангуутаа тасралтгүй дахин эхлэх тохиргоо
<video src="video.mp4" controls autoplay loop width="400" height="300">
Your browser does not support the video tag.
</video>
Мөн эхлүүлэгч болон төгсөгч хаягны хооронд бичлэг уншигдахгүй байгаа тохиолдолд харуулах бичвэрийг оруулж өгч болно.
<audio>: Аудио оруулах Видеотой адилхан attribute-уудтай тэгэхдээ width болон height байхгүй
<audio src="audio.mp3" controls autoplay loop>
Your browser does not support the audio tag.
</audio>
Энэхүү блогоор front-end хөгжүүлтийн үндсэн нэг хэл болох хэлниий үндсэн элементүүдийг сурлаа. Дараагийн блогуудаар илүү нарийн элементүүдийн сурцгаая.
Leave a comment