HTML нь Hypertext Markup Language гэсэн үгийн товчлол юм. Энэ нь вэб хуудас бүтээхэд ашигладаг тусгай хэл юм. Таныг вэб сайтад зочлоход компьютер HTML уншдаг үг, зураг, холбоосыг харуулдаг. HTML-ийг вэбсайтын барилгын материал гэж бодоорой. Та байшин, машин барихдаа легогийн хэсгүүдийг ашигладагтай адил бид вэб хуудас бүтээхдээ HTML хаягуудыг ашигладаг.
HTML нь вэб хуудсан дээрх текст, зураг, видео, холбоосыг хэрхэн харуулахыг компьютерт зааж өгдөг код юм. Энэ нь танд зориулж зураг зурж буй найздаа заавар өгөхтэй адил юм. HTML нь вэб хуудасны нэг хэсгийн эхлэл ба төгсгөлийг тэмдэглэхдээ хаяг гэж нэрлэгддэг өнцгийн хаалт доторх үгсийг ашигладаг.
Таны зочилсон вэбсайт бүр ямар нэгэн байдлаар HTML ашигладаг. HTML-гүй бол танд харагдах вэб хуудас байхгүй байх байсан. HTML нь агуулгыг зохион байгуулахад тусалдаг бөгөөд хуудсыг хэрхэн харуулахыг компьютерт хэлж өгдөг. Энэ бол вэб хөгжүүлэлтэд хамгийн түрүүнд суралцах зүйл бөгөөд энэ нь интернетийг ажиллуулдаг!
HTML баримт бичиг нь тусгай бүтэцтэй байдаг. Энэ нь <code><!DOCTYPE html></code> нэртэй тунхаглалаас эхэлдэг бөгөөд энэ нь компьютерт тухайн хуудас HTML-г ашиглаж байгааг хэлдэг. Дараа нь баримт бичгийг толгой ба бие гэсэн хоёр үндсэн хэсэгт хуваана.
Маш энгийн HTML баримт дараах байдалтай байна.
<код><!DOCTYPE html>
<html>
<толгой>
<title>Миний анхны вэб хуудас</title>
</head>
<бие>
<p>Сайн уу, дэлхий минь!</p>
</body>
</html> </code>
Энэ жишээний <head> хэсэг нь хуудасны гарчгийг өгөх ба <body> хэсэг нь дэлгэцэн дээр гарч ирэх агуулгыг байрлуулах газар юм.
HTML нь вэб хуудасны өөр өөр хэсгүүдийг тэмдэглэхдээ шошго ашигладаг. Таг гэдэг нь өнцгийн хаалт доторх үг юм. Жишээлбэл, <code><p></code> нь компьютерт дараах зүйл нь догол мөр гэдгийг хэлдэг. Та догол мөрийг дуусгахдаа төгсгөлийг харуулахын тулд <code></p></code> хаалтын шошгыг ашиглана.
HTML дэх элемент нь нээх таг, зарим агуулга, хаалтын тагнаас бүрдэнэ. Жишээ нь:
<code><p>Энэ бол догол мөр.</p></code>
Шошго бүр нь вэб хөтөчид агуулгыг хэрхэн харуулахыг заадаг.
HTML-д олон шошго байдаг. Хамгийн түгээмэл зарим нь:
Аттрибутууд нь HTML элементийн талаар нэмэлт мэдээлэл өгдөг. Тэдгээр нь шошгоны өнцгийн хаалт доторх нээлтийн шошгонд нэмэгддэг. Хамгийн түгээмэл шинж чанарууд нь зургийн шошготой хамт хэрэглэгддэг src болон alt шинж чанарууд юм.
Жишээлбэл, зураг нэмэхийн тулд та дараах зүйлийг бичиж болно.
<code><img src="picture.jpg" alt="Сайхан зураг"></code>
Энд src нь хөтчид зургийн файл хаана байгааг зааж өгөх бөгөөд хэрэв харуулах боломжгүй бол alt дүрсний тайлбарыг өгнө.
HTML баримт бичиг нь хоёр хэсэгт хуваагдана:
Холбоосууд нь нэг хуудаснаас нөгөө хуудас руу шилжих боломжийг олгодог. HTML дээр бид <a> таг ашиглан холбоос үүсгэдэг. Шошго доторх href шинж чанар нь хөтөч рүү холбоосын очих газрыг зааж өгдөг.
Жишээ нь:
<code><a href="https://www.example.com">Example.com руу зочилно уу</a></code>
Энэ холбоос дээр дарахад таны хөтөч example.com вэб сайт нээгдэнэ.
Зураг нь вэб хуудсыг гэрэлтүүлж, илүү сонирхолтой болгодог. Зураг нэмэхийн тулд <img> тагийг ашиглана. <img> таг нь хаах таггүй гэдгийг санаарай.
Та хэрхэн зураг нэмэх вэ:
<code><img src="sunflower.jpg" alt="Гэрэлт наранцэцэг"></code>
Энэ код нь хөтөч дээр наранцэцгийн дүрсийг харуулахыг хэлдэг. src шинж чанар нь зургийн байршлыг заадаг бөгөөд alt шинж чанар нь зургийн тайлбарыг өгдөг.
Жагсаалтууд нь мэдээллийг эмх цэгцтэй хэлбэрт оруулдаг. HTML дээр хоёр үндсэн төрлийн жагсаалт байдаг:
Энд дараалалгүй жагсаалтын жишээ байна:
<код><ul>
<li>Apple</li>
<li>Банана</li>
<li>Интоор</li>
</ul> </code>
Мөн дараалсан жагсаалтын жишээ энд байна:
<код><ol>
<li>Эхлээд</li>
<li>Хоёр дахь</li>
<li>Гурав дахь</li>
</ol> </code>
Хүснэгтүүд нь мэдээллийг мөр, баганад харуулахад тусалдаг. Эдгээр нь өгөгдлийг харьцуулах эсвэл сүлжээнд байгаа зүйлсийг жагсаах шаардлагатай үед хэрэгтэй.
HTML хүснэгтийн энгийн жишээ энд байна:
<код><хүснэгтийн хүрээ="1">
<tr>
<th>Нэр</th>
<th>Нас</th>
</tr>
<tr>
<td>Алис</td>
<td>10</td>
</tr>
</ хүснэгт > </ код >
Энэ хүснэгтэд <tr> нь хүснэгтийн мөрийг тодорхойлж, <th> нь хүснэгтийн толгой хэсэгт (тодон текст), <td> нь хүснэгтийн өгөгдөлд (нүдүүд) ашиглагддаг.
HTML нь танд дуу, видео зэрэг мультимедиа нэмэх боломжийг олгодог. <audio> тагийн тусламжтайгаар та дууны файлуудыг оруулж болно. <video> шошгоны тусламжтайгаар та вэб хуудсандаа видео тоглуулагч оруулах боломжтой.
Энд видео оруулах кодын жишээ байна:
<code><video width="320" height="240" удирдлага>
<source src="movie.mp4" type="video/mp4">
</video> </code>
Энэ код нь тоглуулах, түр зогсоох эсвэл дууны хэмжээг өөрчлөх товчлуур бүхий видео тоглуулагчийг үүсгэдэг. Controls шинж чанар нь хөтчид эдгээр товчлууруудыг харуулахыг хэлдэг.
Интернэт дэх бүх вэбсайтыг HTML ашиглан бүтээдэг. Та сургуулийнхаа вэб сайт, хөгжилтэй тоглоомын сайтад зочилж эсвэл онлайн түүх уншиж байна гэж төсөөлөөд үз дээ. HTML нь текст, зураг болон бусад агуулгыг цэгцлэхийн тулд хөшигний ард ажиллаж байгаа бөгөөд ингэснээр та тэдгээрийг тодорхой харж болно.
Жишээлбэл, та дуртай хүүхэлдэйн киноныхоо дүрийг онлайнаар харах юм уу эсвэл линк дээр дарж хөгжилтэй сэдвийн талаар илүү ихийг унших юм бол HTML үүнийг хийх боломжтой.
Энгийн төслийг харцгаая. Та муур шиг дуртай амьтныхаа тухай жижиг вэб хуудас хийхийг хүсч байна гэж төсөөлөөд үз дээ. Та гарчиг, муурны тухай догол мөр, зураг, тэр ч байтугай муурны хөгжилтэй баримт бүхий вэбсайтын холбоосыг оруулж болно.
Таны HTML код дараах байдалтай харагдаж болно.
<код><!DOCTYPE html>
<html>
<толгой>
<title>Миний дуртай амьтан</title>
</head>
<бие>
<h1>Муурны тухай бүх зүйл</h1>
<p>Муурууд хөгжилтэй, зөөлөн байдаг. Тэд унтах, дуу алдах дуртай. Олон хүмүүс муурыг тэжээвэр амьтан болгох дуртай.</p>
<img src="cat.jpg" alt="Хөөрхөн муур">
<a href="https://www.catfacts.com">Муурын талаар нэмэлт мэдээлэл авах</a>
</body>
</html> </code>
Энэ төсөл нь гарчиг, догол мөр, зураг, холбоосыг ашигладаг. Энэ нь олон хэсгээс бүрдсэн вэб хуудас бүтээхэд HTML-г хэрхэн ашигладаг болохыг харуулж байна.
HTML нь вэб хуудасны бүтцийг бий болгодог бол вэбсайтыг хөгжилтэй байдлаар харагдуулдаг бусад хэрэгслүүд байдаг.
Хэдийгээр өнөөдөр бид HTML-ийн талаар суралцаж байгаа ч CSS болон JavaScript-ийн талаар мэдэх нь вэб хуудас хэрхэн бүтээдгийг ойлгоход тусалдаг.
Та HTML-г судлах явцдаа өөр олон хаягуудыг олох болно. Эндээс өөр хэдэн мэдэх хэрэгтэй:
Эдгээр шошгууд нь таны контент вэб хуудсан дээр хэрхэн харагдахыг илүү хянах боломжийг танд олгоно.
HTML анх үүсгэгдсэн цагаасаа хойш маш их өөрчлөгдсөн. Цаг хугацаа өнгөрөхөд олон шинэ шошго, функцүүд нэмэгдсэн. HTML-ийн шинэ хувилбар бүр нь нарийн төвөгтэй, үзэсгэлэнтэй вэбсайтуудыг бий болгоход хялбар болгодог. Өнөөдөр HTML нь CSS болон JavaScript-тэй хамтран ажиллаж, ашиглахад хөгжилтэй, гайхалтай харагдах орчин үеийн вэбсайтуудыг бүтээдэг.
Энэхүү хувьсал нь HTML нь сурахад хялбар бөгөөд энгийн вэб хуудсуудаас эхлээд нарийн төвөгтэй вэб програмуудыг бүтээхэд хангалттай хүчтэй гэсэн үг юм.
HTML сурах нь хөгжилтэй ч интернетэд аюулгүй байх нь үргэлж чухал байдаг. Та вэбсайтад зочлох эсвэл онлайн контентыг судлахдаа ямар нэгэн зүйлд эргэлзэж байвал насанд хүрсэн хүнээс тусламж хүсэхээ бүү мартаарай. Таны аюулгүй байдал хамгийн түрүүнд тавигддаг бөгөөд HTML сурах нь үргэлж хөгжилтэй, аюулгүй туршлага байх ёстой.
Өнөөдөр таны сурсан зарим чухал нэр томъёог харцгаая:
HTML нь бодит ертөнцийн олон тохиргоонд ашиглагддаг. Энд зарим жишээ байна:
Эдгээр жишээнүүд нь HTML нь өдөр тутмын амьдралын олон хэсэгт хэрхэн маш хэрэгтэй хэрэгсэл болохыг харуулж байна.
Өнөөдөр бид HTML нь Hypertext Markup Language- ийн товчлол гэдгийг олж мэдсэн. Энэ нь вэб хуудас үүсгэх үндсэн хэл юм. Энд санах хэрэгтэй гол санаанууд байна:
HTML бол таны интернетээс харж буй вэбсайт бүрийн үндэс суурь юм. Шошго, шинж чанарууд гэх мэт энгийн барилгын блокуудын тусламжтайгаар та хөгжилтэй, интерактив хуудас үүсгэж болно. Та үргэлжлүүлэн суралцах тусам HTML нь вэб хуудсуудыг амилуулах, интернетийг судлахад хэрэгтэй, сонирхолтой газар болгоход хэрхэн тусалж байгааг харах болно.
