Саҳифаи аввал

Ин барои чӣ лозим аст

Ҳар сайте, ки ту мекушоӣ, ҳуҷҷати HTML аст. Браузер файли матниро зеркашӣ мекунад, онро мехонад ва саҳифаро мекашад: сарлавҳаҳо, сархатҳо, тугмаҳо, расмҳо. HTML (HyperText Markup Language — «забони нишонагузории гиперматн») барнома нест, балки нишонагузорӣ аст: он ба браузер мегӯяд, ки дар саҳифа чӣ ҳаст — ин сарлавҳа, ин сархат, ин рӯйхат.

Ин унсурҳо чӣ гуна менамоянд (ранг, андоза, ҷойгиршавӣ)-ро CSS муайян мекунад — ба он дар мавзӯи 8 мерасем. Рафтор (ҳангоми пахш чӣ мешавад) — JavaScript. Ҳоло асоситаринро меомӯзем: сохтор.

Тег — ин нишона аст

Тег — калимае дар қавсҳои кунҷдор. Аксари тегҳо ҷуфт мебошанд: кушояндаи <p> ва пӯшандаи </p> (бо хати моил). Ҳар чизе, ки байни онҳост, — мундариҷа. Ҳамаи ин якҷоя унсур номида мешавад.

<p>Ин сархати матн аст.</p>

Натиҷа: сатри оддии матн — сархат.

<p> — аз калимаи paragraph (сархат). Браузер дар боло ва поёни сархат худаш фосила мегузорад.

Сарлавҳаҳои h1–h6

Сарлавҳаҳо шаш дараҷа доранд: <h1> — асосӣ ва калонтарин, <h6> — хурдтарин.

<h1>Дастурҳои пухтупаз</h1>
<h2>Наҳорӣ</h2>
<h3>Тухмбирён</h3>
<p>Ду тухмро бо шир омехта кунед.</p>

Натиҷа: «Дастурҳои пухтупаз»-и калон ва ғафс, дар зери он сарлавҳаи хурдтари «Наҳорӣ», боз хурдтар «Тухмбирён» ва матни оддии дастур.

Сарлавҳаҳо — нақшаи саҳифа, мисли мундариҷаи китоб. Системаҳои ҷустуҷӯ (Google, Яндекс) ва барномаҳои хониши экран барои одамони нобино онҳоро истифода мебаранд, то фаҳманд, ки саҳифа дар бораи чист. Бинобар ин қоида: <h1> дар саҳифа одатан як аст — номи он, қисмҳо — <h2>, зерқисмҳо — <h3>.

Тегҳои танҳо

Баъзе тегҳо чизе барои «печондан» надоранд, ҷуфти пӯшанда надоранд:

<p>Сатри якум<br>Сатри дуюм</p>
<hr>
<p>Матн баъди хат</p>

Натиҷа: дар сархати якум матн ба сатри нав гузаронида шудааст (<br> — break, гузариш), баъд хати уфуқӣ (<hr>), баъд боз як сархат.

Сохтори ҳуҷҷат

Файли ҳақиқии HTML (масалан index.html) ҳамеша аз рӯи як скелет сохта мешавад:

<!DOCTYPE html>
<html lang="tg">
  <head>
    <meta charset="utf-8">
    <title>Саҳифаи аввалини ман</title>
  </head>
  <body>
    <h1>Салом, ҷаҳон!</h1>
    <p>Ин саҳифаи аввалини ман аст.</p>
  </body>
</html>

Сатр ба сатр:

• <!DOCTYPE html> — «ин HTML-и муосир аст». Сатри аввал навишта мешавад, ҳамеша якхела.
• <html lang="tg"> — решаи ҳуҷҷат; lang="tg" хабар медиҳад, ки матн бо забони тоҷикӣ аст.
• <head> — «сар»: маълумоти хизматӣ, дар худи саҳифа намоён нест.
• <meta charset="utf-8"> — рамзгузорӣ. Бе он ҳарфҳои ҳ, ӯ, қ метавонанд ба аломатҳои нофаҳмо табдил ёбанд.
• <title> — матн дар ҷадвалчаи браузер ва дар натиҷаҳои ҷустуҷӯ.
• <body> — «бадан»: ҳар чизе, ки меҳмон мебинад.

Натиҷа: дар ҷадвалча «Саҳифаи аввалини ман» навишта шудааст, дар худи саҳифа — сарлавҳа ва сархат.

Дар муҳаррири тарафи рост метавон бе скелет навишт — браузер <html>, <head> ва <body>-ро худаш илова мекунад. Аммо дар файлҳои ҳақиқӣ скелет ҳатмист.

Дохилшавӣ

Унсурҳо мисли қуттиҳо як ба дигаре гузошта мешаванд: <head> ва <body> дар дохили <html>, сархатҳо — дар дохили <body>. Унсури дохилиро фарзандӣ, берунаро волидӣ меноманд. Барои намоён будани дохилшавӣ, сатрҳои дохилиро бо фосила (2 фосила) пеш мекунанд.

Қоидаи асосӣ: бо тартиби баръакс пӯш. Он чи охир кушода шуд, аввал пӯшида мешавад.

<p>Ин <strong>муҳим</strong> аст.</p>

Шарҳҳо

Матни байни <!-- ва -->-ро браузер нишон намедиҳад. Ин қайдҳо барои худ ва дигар барномасозон аст:

<!-- Дар ин ҷо меню мешавад -->
<p>Матни саҳифа</p>

Натиҷа: танҳо «Матни саҳифа» намоён аст.

Браузер HTML-ро чӣ тавр мехонад

Браузер файлро аз боло ба поён мехонад ва аз тегҳо дарахти унсурҳоро месозад (онро DOM меноманд). Фосилаҳо ва гузаришҳои зиёдатии сатрро дар матн ба як фосила муттаҳид мекунад:

<p>Фосилаҳои      бисёр
ва гузариш</p>

Натиҷа: Фосилаҳои бисёр ва гузариш — дар як сатр. Сатри нав лозим бошад — <br> ё <p>-и нав лозим аст.

Хатоҳои маъмул

1. Тегро напӯшиданд. <h1>Сарлавҳа бе </h1> — ва тамоми матни поён ҳам сарлавҳаи калон мешавад. Ислоҳ: тегҳои ҷуфтро ҳамеша пӯш.
2. Хати моил ба тарафи нодуруст. <\p> ба ҷои </p> — браузер намефаҳмад. Хати моил оддӣ аст: /.
3. Дохилшавии нодуруст. <p><strong>матн</p></strong> — тегҳо «бурида мегузаранд». Дуруст: <p><strong>матн</strong></p>.
4. Якчанд <h1> барои ҳарфи калон. Дараҷаи сарлавҳаро аз рӯи маъно интихоб мекунанд, андозаро баъд дар CSS иваз мекунанд.
5. Сатрҳои холӣ ба ҷои сархат. Тугмаи Enter дар матн ҳеҷ чиз намедиҳад — ҳар сархат <p>-и худро талаб мекунад.

Ёддошт

Тег	Чӣ кор мекунад
<!DOCTYPE html>	сатри аввали ҳар файли HTML
<html lang="tg">	решаи ҳуҷҷат
<head>	қисми хизматӣ: <meta charset="utf-8">, <title>
<body>	тамоми мундариҷаи намоён
<h1> … <h6>	сарлавҳаҳо аз рӯи дараҷа, <h1> — яке дар саҳифа
<p>	сархат
<br>	гузариши сатр (танҳо)
<hr>	хати уфуқӣ (танҳо)
<!-- … -->	шарҳ