ФЕДОРІВСЬКИЙ ЦЕНТР ПО Міністерство освіти і науки України
Предпросмотр
(урок інформатики в групі 18Т1 від 06.04.2020р.)
Наразі більшість веб-документів створюють за допомогою мови розмітки гіпертексту HTML (англійською Hyper Text Markup Language — мова розмітки гіпертексту).
Гіпертекст — це текст для перегляду на комп’ютері, який містить зв’язки з іншими документами («гіперзв’язки» чи «гіперпосилання»). Читач має змогу перейти до пов’язаних документів безпосередньо з вихідного (первинного) тексту, активувавши посилання.
Призначення HTML — описати зовнішній вигляд документа за умови, що розміри екрану і масштаб подання тексту можуть змінюватися у процесі перегляду.
Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html.
Документ HTML можна розглядати як сукупність вказівок і даних — як безпосередньо розміщених у документі, так і пов’язаних з ним посиланнями, які при інтерпретації програмою-броузером відтворюють вигляд сторінок документа. Згідно з прийнятими в інформатиці визначеннями, документ HTML вважають програмою, описаною мовою високого рівня. Вказівки HTML називають тегами.
Дескрипторами називають ті теги, які вказують на спосіб відтворення інформації програмою-браузером.
Теги — вказівки HTML — записують у «кутових» дужках, утворених символами «<» і «>» — «менше» й «більше».
Контейнери — це парні теги.
Контейнери позначають початок і кінець області дії відповідної вказівки. Між цими тегами може міститися текст та інші теги. Тег, що закриває область дії, порівняно з тим, що відкриває, має додаткову косу риску одразу після «кутової» дужки.
Oпис властивостей контейнера записують у першому дескрипторі контейнера через пропуск після назви контейнера або з нового рядка. Нечислові значення параметрів прийнято записувати у лапках.
HTML-файл — це програма подання тексту, написана мовою HTML, яку опрацьовує браузер і подає результат у своєму програмному вікні.
Для створення HTML-файлу можна використати найпримітивніший текстовий редактор. Наприклад, Блокнот (NotePad) для ОС Windows.
Структура HTML-документа (згідно зі стандартом HTML 4.01)
- Оголошення типу документа(англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.
- Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.
- Тіло документа, розташоване у межах контейнера <body>або <frameset>, — містить основну інформацію про опис документа.
Приклад.
<!doctype html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Змістовна частина документа
</body>
</html>
Перший рядок HTML-документа зазвичай містить інформацію про версію мови HTML.
Тег html вказує браузеру, що він опрацьовує HTML-код. Все, що розташовано між парними тегами <html> і </html> є HTML-документом
Назва документа — текст між тегами <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 — вирівнювання за правим краєм
і атрибут title — текст підказки.
Крім цього тег <p>…</p> має атрибут tabindex, який задає порядковий номер абзаца при переміщенні HTML-документом у вікні браузера за допомогою клавіші Tab.
Властивості шрифту: гарнітуру, розмір і колір задають відповідно як значення атрибутів face, size та color контейнера font.
Якщо першим тегом у тілі сторінки є такий:
<font face=”ubuntu, calibri” size=”+2″>
і якщо на комп’ютері встановлено шрифт ubuntu, то буде застосовано саме його для відображення тексту. Інакше браузер застосує шрифт calibri, а при відсутності останнього — деякий стандартний шрифт. Зазвичай із зарубками. Наприклад, Times New Roman для ОС Windows.
Розміри символів шрифту можуть бути від 1 до 7 (перелічено від найменшого до найбільшого). Розмір 3 вважають стандартним, він приблизно відповідає 10 пунктам. Значення “+2″ атрибута size означає, що розмір шрифту має бути на дві одиниці більший ніж стандартний, тобто п’ятий.
Колір тексту можна задати його назвою англійською мовою:
- aqua — бірюзовий;
- black — чорний;
- blue — світло-синій;
- fuchsia — бузковий;
- gray — сірий;
- green — зелений;
- lime — салатовий;
- maroon — бордовий;
- navy — синій;
- olive — оливковий;
- purple — фіолетовий;
- red — червоний;
- silver — сріблястий;
- teal — сіро-зелений;
- white — білий;
- yellow — жовтий.
Колір можна задати кодами кольорової моделі RGB, як це роблять при роботі з графічним редактором. Наприклад, #ff7800.
Контактну інформацію записують у контейнері <address>…</address>.
Коментар записують у контейнері <comment>…</comment> або використовують тег <!–текст–>. Текст всередині цих тегів на екран браузера не буде показано.
