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) ><видео></код>).

Семантик HTML

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

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

Дүгнэлт

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

hyper text markup хэл