Primer lesson: hyper text markup хэл

Гипертекст тэмдэглэгээний хэл ( HTML )

HTML нь Hypertext Markup Language гэсэн үгийн товчлол юм. Энэ нь вэб хөтөч дээр харуулахад зориулагдсан баримт бичгийн стандарт тэмдэглэгээний хэл юм. HTML Cascading Style Sheets ( CSS ) зэрэг технологи, JavaScript зэрэг скрипт хэлээр тусалж болно.

Вэбийн үндэс суурь

Үндсэндээ интернет бол дэлхий даяар холбогдсон компьютеруудын асар том сүлжээ юм. Энэ сүлжээтэй бидний харьцах үндсэн арга бол интернетээр холбогддог, хоорондоо холбогдсон гипертекст баримт бичгийн систем болох World Wide Web ( WWW ) юм. WWW -ийн гол цөм нь HTML хэлээр бичигдсэн баримт бичиг болох вэб хуудсууд юм. HTML сайтуудын үндсэн бүтцийг хангадаг бөгөөд дараа нь CSS болон JavaScript зэрэг бусад технологиор сайжруулж, өөрчилдөг.

HTML баримт бичгийн бүтэц

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

 <!DOCTYPE html>
<html>
    <толгой>
        <title>Хуудасны гарчиг</title>
    </head>
    <бие>
        <h1>Энэ бол Гарчиг</h1>
        <p>Энэ бол догол мөр.</p>
    </body>
</html>

Энэ код нь гарчиг, гарчиг, текстийн догол мөр бүхий үндсэн вэб хуудсыг тодорхойлдог.

HTML элементүүд ба шошго

HTML баримтууд нь HTML элементүүдээс бүрдэнэ. Элемент бүрийг эхлэлийн шошго, зарим агуулга, төгсгөлийн шошгооор төлөөлдөг. Элементийн эхлэл ба төгсгөлийн шошгууд нь ижил бөгөөд зөвхөн төгсгөлийн шошго нь элементийн нэрний өмнө налуу зураастай байдаг.

Жишээлбэл, <code><p></code> таг нь текстийн догол мөрийг хавсаргах бөгөөд дараах бүтэцтэй байна.

 <p>Энэ бол жишээ догол мөр юм.</p>

Өөр өөр элементүүд нь өөр өөр зорилготой. Жишээ нь:

Гарчигт <code><h1>...</h1></code>-аас <code><h6>...</h6></code> тэмдэглэгээг ашигладаг.
<code><a></code> таг нь гипер холбоосыг тодорхойлдог.
<code><img></code> шошго нь баримт бичигт зураг оруулдаг.

Атрибутууд

HTML элементүүд нь элементүүдийн талаар нэмэлт мэдээлэл өгөх шинж чанаруудтай байж болно. Шинж чанаруудыг элементийн эхлэлийн таг дотор байрлуулсан бөгөөд ихэвчлэн <code>name="value"</code> гэх мэт нэр/утга хосоор өгөгддөг.

Жишээлбэл, зураг оруулахын тулд бид зургийн URL-г зааж өгөхийн тулд <code><img></code> тагийг <code>src</code> (эх сурвалж) шинж чанартайгаар ашигладаг:

 <img src="url to image.jpg" alt="Зургийн тайлбар">

<code>alt</code> шинж чанар нь зургийг харуулах боломжгүй тохиолдолд өөр текстээр хангана.

Холбоос ба навигаци

<code><a></code> тагийг ашигласнаар вэбийн харилцан холболтын үндэс болох гипер холбоосууд үүсдэг. Гипер линк нь өөр вэб хуудас, нэг хуудасны өөр хэсэг, эсвэл татаж авах боломжтой файлтай холбогдож болно. Жишээ нь:

 <a href="https://example.com">Example.com руу зочилно уу</a>

Энэ нь <code>https://example.com</code> руу холбоос үүсгэдэг.

Жагсаалтууд

HTML жагсаалт үүсгэх элементүүдээр хангадаг. Үндсэн хоёр төрлийн жагсаалт байдаг:

Зүйлүүдийн дараалал чухал биш эрэмбэлэгдээгүй жагсаалтууд (<code><ul></code>). Эрэмбэлэгдээгүй жагсаалтад байгаа зүйлсийг сумаар тэмдэглэсэн.
Зүйлүүдийн дараалал чухал байдаг эрэмбэлэгдсэн жагсаалтууд (<code><ol></code>). Захиалгат жагсаалтад байгаа зүйлсийг дугаарласан байна.

Жагсаалтын зүйл бүрийг <code><li></code> (жагсаалтын зүйл) таг дотор хавсаргасан болно.

HTML5

HTML5 нь мультимедиа болон интерактив баримт бичгийн орчин үеийн хэрэгцээг тусгасан олон шинэ боломжуудыг нэвтрүүлсэн стандартын хамгийн сүүлийн үеийн хувьсал юм. Эдгээрт шинэ бүтцийн элементүүд (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>), график элементүүд (зураг зурахад <code><canvas></code>, графикийн хувьд <code><svg></code>), өргөтгөх боломжтой медиа векторууд орно. (<code><audio></code> ба <code><video></code>).

Семантик HTML

Семаль HTML нь вэб хуудасны мэдээллийн семантик буюу утгыг бататгахын тулд HTML тэмдэглэгээг ашиглахыг хэлдэг. Элементүүд хэрхэн харагдах, ажиллахыг тодорхойлохоос илүүтэй (энэ нь CSS болон JavaScript-д зориулсан ажил) семантик HTML агуулгын бүтэц, төрлийг нарийн тодорхойлдог. Жишээлбэл, <code><article></code> шошго нь доторх агуулга нь нийтлэл болохыг илэрхийлдэг бол <code><nav></code> таг нь навигацийн цэсийг илэрхийлдэг.

Семаль HTML ашиглах нь вэб контентын хүртээмж, хайлтыг сайжруулж, илүү ашиглах боломжтой, олж илрүүлэх боломжтой болгодог.

Дүгнэлт

HTML бол вэб хуудасны үндсэн бүтцийг хангадаг World Wide Web-ийн тулгын чулууны технологи юм. Шошго, шинж чанар, элементүүдийг ашигласнаар HTML бүтэцлэгдсэн баримт бичгийг үүсгэх боломжийг олгодог. HTML ойлгож, ашигласнаар энгийн текст баримт бичгээс эхлээд интерактив мультимедиа туршлага хүртэл вэб дээр ашиглах боломжтой өргөн хүрээний агуулгыг бий болгож чадна. Вэб хөгжүүлэлтийн үндэс суурь болохын хувьд HTML хэлийг эзэмшсэн байх нь вэб дээр дизайн хийх эсвэл хөгжүүлэхийг хүссэн хэн бүхэнд зайлшгүй шаардлагатай.

hyper text markup хэл