Asosoi-zaboni-HTML

1.

Асосҳои забони HTML
Дарси шиносоӣ — Синфи 9
Пайравӣ ба дунёи эҷоди сомонаҳо

Савол барои шумо
Биёед андешем!
Ҳар рӯз мо сомонаҳои гуногунро дар
интернет мебинем — шабакаҳои иҷтимоӣ,
бозиҳо, сомонаҳои таҳсилӣ. Аммо шумо то
ҳол фикр кардаед, ки ин саҳифаҳо аз чӣ
сохта шудаанд?
Савол асосӣ: Сомонаҳо аз чӣ иборатанд ва
HTML чист?
Имрӯз мо ҷавоби ин саволҳоро хоҳем ёфт
ва қадами аввалро ба эҷоди сомонаи худ
гузорем!

3.

HTML чист?
Маъно
Вазифа
Муҳим!
HTML ин маънои HyperText Markup
HTML сохтори саҳифаи сомонаро
HTML забони барноманависӣ нест,
Language — Забони нишонгузории
муайян мекунад — матнҳо, тасвирҳо,
балки забони нишонгузорӣ аст
гипермати
истинодҳо
Дар калимаҳои соддатар: HTML ба браузер (Chrome, Firefox) мегӯяд, ки матн, тасвир ё видео дар куҷо ва чӣ гуна нишон дода шавад.
Ин монанди дастурамал барои сохтани саҳифаи веб аст.
Масалан, агар шумо хоҳед, ки сарлавҳа калонтар бошад ё расм нишон дода шавад, шумо бо ёрии тегҳои HTML ин корро мекунед.

4.

Барои чӣ HTML лозим аст?
При создании этого изображения
произошла ошибка
Эҷоди сомонаҳо
Намоиши матн
Тасвирҳо ва медиа
Истинодҳо
HTML асоси ҳамаи сомонаҳост
Сарлавҳаҳо, параграфҳо,
Илова кардани расмҳо,
Сохтани пайвандҳо байни
— аз саҳифаи оддӣ то
рӯйхатҳо — ҳама бо HTML
видеоҳо ва дигар мазмуни
саҳифаҳо ва сомонаҳои
шабакаҳои иҷтимоии калон
тартиб дода мешаванд
визуалӣ
гуногун
Бидуни HTML, браузер намедонад, ки мазмунро чӣ гуна нишон диҳад. HTML ба ҳар як қисми саҳифа маъно медиҳад.

5.

Файли HTML
Хусусиятҳои файли HTML
Файлҳои HTML суффикси махсус доранд — .html ё
.htm
Мисол
Файли асосии сомона маъмулан
index.html ном дорад. Ин аввалин
саҳифае мебошад, ки браузер онро
мекушояд.
Чӣ гуна кор мекунад?
Файли .html-ро эҷод мекунед
Дар браузер (Chrome, Firefox) мекушоед
Браузер кодро мехонад ва саҳифаро нишон
медиҳад
Шумо метавонед файли HTML-ро дар ҳар як
муҳаррири матнӣ (Notepad, VS Code) эҷод кунед!

6.

Сохтори асосии HTML
Ҳар як саҳифаи HTML сохтори стандартӣ дорад. Ин монанди скелети сомона аст, ки ҳама чиз дар он ҷойгир мешавад.
<!DOCTYPE html>
<html>
<head>
<title>Сарлавҳаи саҳифа</title>
</head>
<body>
<h1>Салом, ҷаҳон!</h1>
<p>Ин саҳифаи аввалин ман аст.</p>
</body>
</html>
Ин шаблони пояи ҳар як сомонаро ташкил медиҳад. Ҳар як тег (ибораҳо дар байни < ва >) вазифаи махсус дорад.
Эзоҳ: Тегҳо маъмулан ҷуфтанд — тег кушоянда <html> ва тег пӯшанда </html>

7.

Шарҳи сохтор
<!DOCTYPE html>
<html>
<head>
<title>
Ба браузер мегӯяд, ки ин
Тег асосии сомона —
Маълумоти хизматӣ —
Сарлавҳае, ки дар
файл HTML5 аст —
ҳамаи мазмун дар дохили
сарлавҳаи саҳифа,
варақчаи браузер нишон
версияи нави HTML
он ҷойгир мешавад
истинодҳо ба CSS ва
дода мешавад
дигар танзимот
<body>
Мазмуни асосии саҳифа —
ҳамаи он чӣ, ки корбар
мебинад (матн, тасвир,
видео)
Ҳар як қисм вазифаи муайян дорад. Агар шумо хоҳед, ки чизе дар саҳифа дида шавад, онро дар <body> менависед!

8.

Тегҳои асосии HTML
<h1> то <h6>
<p>
<br>
Сарлавҳаҳо — аз калонтарин (h1) то
Параграф — барои матни оддӣ
Шикасти сатр — гузариш ба сатри нав
<a>
<img>
<ul>, <ol>, <li>
Истинод — пайванд ба саҳифаи дигар
Тасвир — барои намоиши расм
Рӯйхатҳо — бо нуқтаҳо ё рақамҳо
хурдтарин (h6)
Бо ёрии ин тегҳо шумо метавонед сомонаи пурмазмун эҷод кунед. Ҳар як тег вазифаи муайян дорад ва онҳоро омӯхтан осон аст!

9.

Мисоли коди HTML
Биёед мисоли амалиро бинем. Ин коди оддӣ саҳифаи сода эҷод мекунад:
<!DOCTYPE html>
<html>
<head>
<title>Саҳифаи ман</title>
</head>
<body>
<h1>Хуш омадед ба сомонаи ман!</h1>
<p>Ман донишҷӯи синфи 9 ҳастам ва HTML-ро
меомӯзам.</p>
<p>Эҷоди сомона хеле ҷолиб аст!</p>
<a href="https://google.com">Ба Google</a>
</body>
</html>
Натиҷа дар браузер:
Маслиҳат
Файлро ҳамчун index.html захира кунед ва дар
браузер кушоед. Шумо натиҷаро фавран хоҳед
дид!
Сарлавҳаи калон: "Хуш омадед ба сомонаи ман!"
Ду параграфи матн
Истинод ба Google
Ҳамин! Шумо саҳифаи аввалинро эҷод кардед. Ин осон аст, вай?

10.

Хулоса
01
02
03
HTML — қадами аввал
Осон барои омӯхтан
Асос барои минбаъд
HTML пояи ҳамаи сомонаҳост. Омӯхтани
Шумо дар як рӯз метавонед саҳифаи оддӣ
Пас аз HTML, шумо CSS (барои дизайн) ва
он қадами аввал ба дунёи
эҷод кунед. Бо машқ ва вақт, шумо
JavaScript (барои интерактивӣ) омӯхта
барноманависии веб мебошад.
сомонаҳои мураккаб сохта метавонед.
метавонед.
Вазифаи амалӣ: Имрӯз файли index.html эҷод кунед, коди содда нависед ва дар браузер бинед. Гузаронидани вақт бо HTML шумо ба
барномасоз табдил хоҳад шуд!
Муваффақият дар омӯзиши HTML!

English Русский Rules