Предмет: Інформатика (Базовий модуль)
Тема: Поняття про мову розмічання гіпертекстового документа.
Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Поняття про мову розмічання гіпертекстового документа
Урок:
Поняття про мову розмічання гіпертекстового документа
26.11.2023
Опис уроку (учням цей опис не показується):
Вміст уроку:
1
1
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — стандартизована мова розмітки документів для перегляду веб-сторінок у браузері. Веб-браузери отримують HTML документ від сервера за протоколами HTTP/HTTPS або відкривають з локального диска, далі інтерпретують код в інтерфейс, який відображатиметься на екрані монітора.
Елементи HTML є будівельними блоками сторінок HTML. За допомогою конструкцій HTML, зображення та інші об'єкти, такі як інтерактивні форми, можуть бути вбудовані у візуалізовану сторінку. HTML надає засоби для створення структурованих документів, позначаючи структуру тексту, наприклад заголовки, абзаци, списки, посилання, цитати та інші елементи.
Елементи HTML — основні компоненти мови розмітки HTML. HTML-документ складається з головного елементу html, до змісту якого додаються інші елементи.
Кожен елемент має свою унікальну назву, яка записується латинськими літерами і не чутлива до їхнього регістру. В загальному вигляді елемент має три складові: теги (початковий та кінцевий), атрибути та вміст (контент).
Тег (дескриптор) – керуюча конструкція мови HTML.
Атрибути задають технічну інформацію про елемент.
Зміст елемента — це вся необхідна текстова та графічна інформація документа, яка буде відтворюватися браузером на екрані.
Теги бувають одинарними і парними. Парні теги називають контейнерами. Більшість тегів є парними, наприклад: тег означення HTML-файлу < HTML > …</ HTML > парні теги позначають початок і кінець області дії відповідної команди. Теги записуються у кутових дужках. Тег, що закриває область дії. Має слеш, не забувайте його, інакше тег працюватиме не правильно.
Для написання коду можна використовувати будь-який текстовий редактор. Наприклад, звичайний Блокнот чи інший текстовий редактор, такий як Notepad++, у якому здійснюється кольорова розмітка тексту та вбудовані засоби перевірки та інші інструменти полегшення розробки.
Загалом, структура простої веб-сторінки виглядає так:
<!DOCTYPE HTML>
<html>
<head>
<title>Структура HTML документа</title>
</head>
<body>
<h1>Hello HTML!</h1>
</body>
</html>
Спочатку вказується специфікація, котрій відповідає сторінка – <!doctype html>. Далі йде тег <html> , котрий закривається у самому кінці документа. У межах документа виділяється два великі розділи: <head> та <body> У першому задається деякий службовий опис сторінки, підключаються додаткові файли тощо. Другий розділ містить основний вміст сторінки: тексти, зображення, мультимедійні елементи.
Розглянемо деякі основні теги:
Назва документа — текст між тегами <title> і </title>.
До тексту назви не застосовують форматування. Назва має бути короткою, інформативною і адекватно відображати зміст документа.
У заголовку документа можуть міститися деякі важливі дані, які використовуються браузерами, але в більшості випадків не відображаються, — метадані. Для цього використовується елемент meta, який задають одинарним тегом <meta> з такими атрибутами:
name — назва змінної;
content — значення змінної;
charset — кодування документа, наприклад utf-8;
lang — код мови, що визначає мову значень змінної;
http-equiv — вказує назву додаткового параметра.
Теги форматування символів (дескриптори стилів) завжди є парними:
<b>…</b> — жирне написання;
<i>…</i> — курсив;
<u>…</u> — підкреслення;
<strike>…</strike> — перекреслення;
<tt>…</tt> — стала ширина літер;
<sub>…</sub> — нижній індекс;
<sup>…</sup> — верхній індекс;
<big>…</big> — збільшити шрифт;
<small>…</small> — зменшити шрифт;
Примітка. Застосовують вкладення тегів аналогічно до використання дужок різного вигляду. Наприклад, жирний курсив задають таким чином:
<b><i>текст</i></b>.
Форматування тексту мовою HTML виконують з використанням спеціальних тегів:
<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6>— відображення заголовків відповідно 1, 2, 3, 4, 5 і 6 рівнів — перелічено у порядку зменшення розміру шрифту. Як усталено, заголовок буде вирівняно за лівим краєм вікна;
<p>…</p>— створення нового абзацу без відступу у першому рядку, між абзацами буде порожній рядок;
<pre>…</pre>— відображення тексту у повній відповідності до форматування, здійсненого за допомогою текстового редактора (пропуски, невідтворювані символи кінця рядка);
<nobr>…</nobr>— заборона перенесення слів, яку можна подавити тегом <wbr>;
<br>— обривання рядка без пропуску рядка;
<hr>— проведення горизонтальної лінії.
<center>…</center> — центрування;
Перші два види тегів (з перелічених вище) мають атрибут align з такими можливими значеннями:
center — центрування;
justify — вирівнювання за шириною;
left — вирівнювання за лівим краєм;
right — вирівнювання за правим краєм
Рефлексія від 0 учнів
Сподобався:
0
Так: 0
Ні: 0
Зрозумілий:
0
Так: 0
Ні: 0
Потрібні роз'яснення:
0
Ні: 0
Так: 0