HTML / HTML гэж юу вэ?

HTML гэж юу вэ?

HTML бол HyperText Markup Language гэсэн үгийн товчлол юм. Та одоо уншиж буй энэ хуудас HTML-ээр бүтээгдсэн — гарчиг, параграф, зураг, товч бүгд HTML элемент юм.

HTML бол программчлалын хэл биш. Энэ бол тэмдэглэгээний хэл (markup language) — вэб хуудасны агуулга ба бүтцийг тодорхойлдог.

HTML, CSS, JavaScript — ялгаа

Вэб хөгжүүлэлтийн гурван үндсэн технологи байдаг:

HTML — Бүтэц. "Энд гарчиг байна, энд параграф байна, энд зураг байна" гэж хэлдэг.

CSS — Харагдах байдал. "Гарчиг улаан өнгөтэй байна, фонт 24px байна" гэж хэлдэг.

JavaScript — Үйлдэл. "Товч дарахад энэ зүйл болно" гэж хэлдэг.

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

Анхны HTML код

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Миний анхны хуудас</title>
  </head>
  <body>
    <h1>Сайн уу, дэлхий!</h1>
    <p>Энэ бол миний анхны вэб хуудас.</p>
  </body>
</html>

Хөтчид энэ кодыг нээвэл "Сайн уу, дэлхий!" гэсэн том гарчиг ба доор нь параграф харагдана.

Tag гэж юу вэ?

HTML <tag> гэсэн хаалтаар бичигдэнэ. Ихэнх tag нь нээлтийн болон хаалтын хосоор ирдэг:

html
<h1>Энэ гарчиг</h1>
<p>Энэ параграф</p>
<strong>Энэ bold текст</strong>
  • <h1> — нээлтийн tag
  • </h1> — хаалтын tag (/ тэмдэгтэй)
  • Хоёрын хооронд байх зүйл бол агуулга юм

Зарим tag хаалтын хос шаардахгүй — тэдгээрийг self-closing tag гэнэ:

html
<img src="зураг.jpg" alt="Зургийн тайлбар" />
<br />
<input type="text" />

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

Бүх HTML файл дараах үндсэн бүтэцтэй байдаг:

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <!-- Хөтчид зориулсан мэдээлэл — хэрэглэгч харахгүй -->
    <meta charset="UTF-8" />
    <title>Хуудасны гарчиг (tab-д харагдана)</title>
  </head>
  <body>
    <!-- Хэрэглэгч харах бүх агуулга энд байна -->
    <h1>Гарчиг</h1>
    <p>Агуулга</p>
  </body>
</html>

<!DOCTYPE html> — Хөтчид "Энэ орчин үеийн HTML5 баримт бичиг" гэж мэдэгдэнэ.

<html> — Бүх HTML-ийн эх tag. lang="mn" нь хэл заана.

<head> — Хуудасны тухай мэдээлэл: гарчиг, тэмдэгт, холбоос гэх мэт. Хэрэглэгч шууд харахгүй.

<body> — Хэрэглэгч харах бүх агуулга: текст, зураг, товч гэх мэт.

Хөтчид HTML харах

HTML сурахад тусгай програм шаардахгүй. Ингэж эхэлнэ:

  1. Компьютерт index.html нэртэй файл үүсгэнэ
  2. Дотор нь дээрх жишээ кодыг бичнэ
  3. Файлыг Chrome эсвэл Firefox хөтчид нээнэ

Хуудас хадгалагдах бүрт хөтчид F5 дарж refresh хийвэл өөрчлөлт харагдана.

Тайлбар бичих

HTML-д тайлбар <!-- --> хаалтаар бичнэ:

html
<!-- Энэ тайлбар мөр — хөтчид харагдахгүй -->
<h1>Гарчиг</h1>

<!--
  Олон мөрт тайлбар
  ингэж бичнэ
-->
<p>Параграф</p>

Тайлбар хөтчид харагдахгүй боловч хуудасны source код-д харагдана. Нууц мэдээлэл бичихгүй.

Дараагийн хичээлд:

HTML баримт бичгийн бүтцийг дэлгэрэнгүй судалж, head болон body tag-ийн дотор юу байрладгийг практикаар үзнэ.

Дараах хичээл →Хуудасны бүтэц