Базові поняття мови розмітки гіпертексту HTML

Розробка уроку

Тема: базові поняття мови розмітки гіпертексту, структура HTML-документа, форматування символів і тексту.

Мета: по завершенню вивчення учень

має уявлення: про мову розмітки гіпертексту HTML;
пояснює: базові поняття мови розмітки гіпертексту;
описує: структуру HTML-документа;
уміє:
- створювати за допомогою текстового редактора HTML-файл;
- виконуючи форматування символів і тексту;
- використовувати браузер для перегляду створеного HTML-документа;
- виконувати редагування та створення нескладної веб-сторінки.

Обладнання: комп’ютер зі встановленими ОС і браузером, проектор.

Структура уроку

Організаційний момент.
Актуалізація опорних знань.
Інструктаж з ТБ.
Вивчення нового матеріалу.
Закріплення вивченого матеріалу.
Підбиття підсумків уроку.
Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

Що таке веб-сайт?
Що таке веб-документ?
Що таке гіпертекст?
Що таке гіперпосилання?
Для чого призначено браузер?

3. Інструктаж з ТБ
4. Вивчення нового матеріалу

Наразі більшість веб-документів створюють за допомогою мови розмітки гіпертексту HTML (англійською Hyper Text Markup Language — мова розмітки гіпертексту).

Гіпертекст — це текст для перегляду на комп'ютері, який містить зв'язки з іншими документами («гіперзв'язки» чи «гіперпосилання»). Читач має змогу перейти до пов'язаних документів безпосередньо з вихідного (первинного) тексту, активувавши посилання.

1989 року Тім Бернерс-Лі запропонував упровадити гіпертекстову систему документів. Наприкінці 1991 року він опублікував у Інтернеті перший загальнодоступний опис мови розмітки HTML — «HTML теги». Він же створив і першу програму для перегляду гіпертекстових документів — браузер. Бернерс-Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року Спеціальна Комісія Інтернет-розробок (IETF) офіційно визначила її такою, опублікувавши першу специфікацію HTML.

Призначення HTML — описати зовнішній вигляд документа за умови, що розміри екрану і масштаб подання тексту можуть змінюватися у процесі перегляду.

Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html.

Документ HTML можна розглядати як сукупність вказівок і даних — як безпосередньо розміщених у документі, так і пов’язаних з ним посиланнями, які при інтерпретації програмою-броузером відтворюють вигляд сторінок документа. Згідно з прийнятими в інформатиці визначеннями, документ HTML вважають програмою, описаною мовою високого рівня. Вказівки HTML називають тегами.

Дескрипторами називають ті теги, які вказують на спосіб відтворення інформації програмою-браузером.

Теги — вказівки HTML — записують у «кутових» дужках, утворених символами «<» і «>» — «менше» й «більше».

Контейнери — це парні теги.

Контейнери позначають початок і кінець області дії відповідної вказівки. Між цими тегами може міститися текст та інші теги. Тег, що закриває область дії, порівняно з тим, що відкриває, має додаткову косу риску одразу після «кутової» дужки.

Oпис властивостей контейнера записують у першому дескрипторі контейнера через пропуск після назви контейнера або з нового рядка (приклади див. далі). Нечислові значення параметрів прийнято записувати у лапках.

HTML-файл — це програма подання тексту, написана мовою HTML, яку опрацьовує браузер і подає результат у своєму програмному вікні.

Для створення HTML-файлу можна використати найпримітивніший текстовий редактор. Наприклад, Блокнот (NotePad) для ОС Windows. Інколи, у середовищі цих редакторів здійснено виділення кольором дескрипторів. Наприклад, у середовищі Kate для ОС Linux Mint KDE. Хоча привабливішим видається використання спеціалізованих редакторів з поданням сторінки різними способами. Наприклад, редактора Kompozer чи Sublime Text.

Структура HTML-документа (згідно зі стандартом HTML 4.01)

Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.
Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.
Тіло документа, розташоване у межах контейнера <body> або <frameset>, — містить основну інформацію про опис документа.

Приклад 1.

<!doctype html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
<body>
  Змістовна частина документа
</body>
</html>

Приклад 2. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути початок коду даної сторінки. У ньому описано таке:

Оголошення типу документа — <!doctype html>.
Заголовок документа — <head><title>Приклад 2</title></head>.
Тіло документа — <body>…</body>.

Перший рядок HTML-документа зазвичай містить інформацію про версію мови HTML. Для того, щоб вказати версію HTML 4.01 без небажаних для цієї версії елементів й атрибутів, а також фреймів, можна використати таке визначення типу документа:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">

Використання версії HTML 4.01 навіть з небажаними для цієї версії елементами й атрибутами, а також фреймами задають таким чином:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN">

Найсучасніше визначення, що вказує на використання стандарту HTML5, таке:

<!doctype html>

Тег html вказує браузеру, що він опрацьовує HTML-код. Все, що розташовано між парними тегами <html> і </html> є HTML-документом. У першому деcкрипторі:

атрибутом version можна задати версію HTML:
<html version="4.01"> ;
атрибутом lang можна задати основну мову документа, скажімо українську:
<html lang="uk-ua"> .

Назва документа — текст між тегами <title> і </title>.

До тексту назви не застосовують форматування. Назва має бути короткою, інформативною і адекватно відображати зміст документа.

У заголовку документа можуть міститися деякі важливі дані, які використовуються браузерами, але в більшості випадків не відображаються, — метадані. Для цього використовується елемент meta, який задають одинарним тегом <meta> з такими атрибутами:

name — назва змінної;
content — значення змінної;
charset — кодування документа, наприклад utf-8;
lang — код мови, що визначає мову значень змінної;
http-equiv — вказує назву додаткового параметра.

Атрибут lang потрібно використовувати для створення списку ключових слів певною мовою, на які відгукнеться пошукова система при запиті. Наприклад, англійською:

<meta name="keywords" lang="en" content="html,web-design,hypertext,site,…">

Значення атрибута http-equiv та опис дії атрибута content (після тире):

Expires — задає дату і час оновлення документа;
Content-Language — аналог атрибуту lang тега html;
Content-Type — вказує тип документа та кодування символів;
Refresh — задає інтервал у секундах між оновленнями вмісту документа.

Приклади опису властивостей тега body:

bgcolor="white" — задати білий колір тла;
text="black" — задати чорний колір тексту;
background="picture.jpg" — задати зображення для тла;
bgproperties="fixed" — зображення тла не прокручувати;
style="text-align:justify;" — вирівнювати текст за шириною.

Крім цих атрибутів тега body використовують і такі:

link — колір невідвіданих гіперпосилань;
vlink — колір відвіданих гіперпосилань;
alink — колір гіперпосилань, обраних користувачем;
contenteditable — дозвіл (значення true) або заборона (значення false для елемента body або inherit для усіх інших елементів) користувачу редагувати HTML-документ у браузері.

Для введення в HTML-документ зарезервованих символів мови HTML (наприклад, > або &) або символів, які неможливо ввести з клавіатури, передбачено механізм посилань на символи.

Посилання на символи:

&#D; — задає символ, код якого має значення D у десятковій системі числення;
&#xH; — задає символ, код якого має значення H у шістнадцятковій системі числення;
&назва_символа; — дозволяє використовувати іменоване посилання на символ.

Для найпоширеніших символів у мові HTML передбачено назви. У наступній таблиці вказано деякі посилання і вигляд відповідного символа.

HTML-код	Десятковий код		Опис
			нерозривний пробіл
£	£	£	фунт стерлінгів
€	€	€	знак євро
¶	¶	¶	символ параграфа
§	§	§	параграф
©	©	©	знак copyright
®	®	®	знак зареєстрованої торгової марки
™	™	™	знак торгової марки
°	°	°	градус
±	±	±	плюс-мінус
¼	¼	¼	дріб одна четверта
½	½	½	дріб одна друга
¾	¾	¾	дріб три четвертих
&frac13;	⅓	⅓	дріб одна третя
&frac23;	⅔	⅔	дріб дві третіх
&frac15;	⅕	⅕	дріб одна п'ята
&frac25;	⅖	⅖	дріб дві п'ятих
&frac35;	⅗	⅗	дріб три п'ятих
&frac45;	⅘	⅘	дріб чотири п'ятих
&frac16;	⅙	⅙	дріб одна шоста
&frac56;	⅚	⅚	дріб п'ять шостих
&frac18;	⅛	⅛	дріб одна восьма
&frac38;	⅜	⅜	дріб три восьма
&frac58;	⅝	⅝	дріб п'ять восьма
&frac78;	⅞	⅞	дріб сім восьма
×	×	×	знак множення
÷	÷	÷	знак ділення
&fnof;	ƒ	ƒ	знак функції
	⋮	⋮	три крапки по вертикалі
	⋯	⋯	три крапки по горизонталі
	⋰	⋰	три крапки по діагоналі
	⋱	⋱	три крапки по діагоналі
грецькі літери
Α	Α	Α	грецька велика літера альфа
Β	Β	Β	грецька велика літера бета
Γ	Γ	Γ	грецька велика літера гамма
Δ	Δ	Δ	грецька велика літера дельта
Ε	Ε	Ε	грецька велика літера епсилон
Ζ	Ζ	Ζ	грецька велика літера дзета
Η	Η	Η	грецька велика літера ця
Θ	Θ	Θ	грецька велика літера тета
Ι	Ι	Ι	грецька велика літера йота
Κ	Κ	Κ	грецька велика літера каппа
Λ	Λ	Λ	грецька велика літера лямбда
Μ	Μ	Μ	грецька велика літера мю
Ν	Ν	Ν	грецька велика літера ню
Ξ	Ξ	Ξ	грецька велика літера ксі
Ο	Ο	Ο	грецька велика літера омикрон
Π	Π	Π	грецька велика літера пі
Ρ	Ρ	Ρ	грецька велика літера ро
Σ	Σ	Σ	грецька велика літера сигма
Τ	Τ	?	грецька велика літера тау
Υ	Υ	Υ	грецька велика літера іпсилон
Φ	Φ	Φ	грецька велика літера фі
Χ	Χ	Χ	грецька велика літера хі
Ψ	Ψ	Ψ	грецька велика літера псі
Ω	Ω	Ω	грецька велика літера омега
α	α	α	грецька мала літера альфа
β	β	β	грецька мала літера бета
γ	γ	γ	грецька мала літера гамма
δ	δ	δ	грецька мала літера дельта
ε	ε	ε	грецька мала літера епсилон
ϵ		ϵ	грецька мала літера епсилон
ζ	ζ	ζ	грецька мала літера дзета
η	η	η	грецька мала літера ета
θ	θ	θ	грецька мала літера тета
ι	ι	ι	грецька мала літера йота
κ	κ	κ	грецька мала літера каппа
λ	λ	λ	грецька мала літера лямбда
μ	μ	μ	грецька мала літера мю
ν	ν	ν	грецька мала літера ню
ξ	ξ	ξ	грецька мала літера ксі
ο	ο	ο	грецька мала літера омикрон
π	π	π	грецька мала літера пі
ρ	ρ	ρ	грецька мала літера ро
σ	ς	σ	грецька мала літера сигма
τ	τ	τ	грецька мала літера тау
υ	υ	υ	грецька мала літера іпсилон
φ	φ	φ	грецька мала літера фі
ϕ		ϕ	грецька мала літера фі
χ	χ	χ	грецька мала літера хі
ψ	ψ	ψ	грецька мала літера псі
ω	ω	ω	грецька мала літера омега
Стрілки
←	←	←	стрілка вліво
↑	↑	↑	стрілка вгору
→	→	→	стрілка вправо
↓	↓	↓	стрілка вниз
↔	↔	↔	стрілка вліво-вправо
&varr;	↕	↕	стрілка вгору-вниз
&varr;	↖	↖	стрілка ліворуч-вгору
&varr;	↗	↗	стрілка праворуч-вгору
&varr;	↘	↘	стрілка праворуч-вниз
&varr;	↙	↙	стрілка ліворуч-вниз
Інші символи
&spades;	♠	♠	знак масті «піки»
&clubs;	♣	♣	знак масті «трефи»
&hearts;	♥	♥	знак масті «черви»
&diams;	♦	♦	знак масті «бубни»
"	"	"	подвійні лапки
&	&	&	амперсанд
<	<	<	знак «менше»
>	>	>	знак «більше»
≤	≤	≤	знак «не перевищує»
≥	≥	≥	знак «не менше»
знаки пунктуації
…	…	…	багатокрапка
′	′	′	одиночний штрих
″	″	″	подвійний штрих
–	–	–	коротке тире
—	—	—	довге тире
‘	‘	‘	ліві лапки
’	’	’	праві лапки
&sbquo;	‚	‚	нижні лапки
“	“	“	ліві подвійні лапки
”	”	”	праві подвійні лапки
&bdquo;	„	„	нижні подвійні лапки
«	«	«	ліва подвійна кутова дужка
»	»	»	права подвійна кутова дужка

Теги форматування символів (дескриптори стилів) завжди є парними:

<b>…</b> — жирне написання;
<i>…</i> — курсив;
<u>…</u> — підкреслення;
<strike>…</strike> — ~~перекреслення~~;
<tt>…</tt> — стала ширина літер;
<sub>…</sub> — _нижній індекс;
<sup>…</sup> — ^{верхній} індекс;

<big>…</big> — збільшити шрифт;
<small>…</small> — зменшити шрифт;
<em>…</em> — логічний наголос — діє майже завжди як <i>;
<cite>…</cite> — цитування — діє майже завжди як <i>;
<code>…</code> — текст коду — діє майже завжди як <tt>;
<samp>…</samp> — результат виконання програми — діє майже завжди як <tt>;
<strong>…</strong> — виділення — діє майже завжди як <b>;
<dfn>…</dfn> — текст означення (залежно від браузера);
<var>…</var> — назва змінної або параметра — діє майже завжди як <i>;
<kbd>…</kbd> — назва клавіші — діє майже завжди як <tt>;
<xmp>…</xmp> — — діє майже завжди як <tt>.

У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними.

Примітка. Застосовують вкладення тегів аналогічно до використання дужок різного вигляду. Наприклад, жирний курсив задають таким чином:

<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>;
<center>…</center> — центрування;
<br> — обривання рядка без пропуску рядка;
<hr> — проведення горизонтальної лінії.

Перші два види тегів (з перелічених вище) мають атрибут align з такими можливими значеннями:

center — центрування;
justify — вирівнювання за шириною;
left — вирівнювання за лівим краєм;
right — вирівнювання за правим краєм

і атрибут title — текст підказки.

Крім цього тег <p>…</p> має атрибут tabindex, який задає порядковий номер абзаца при переміщенні HTML-документом у вікні браузера за допомогою клавіші Tab.

Приклад 3. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути код сторінки і проаналізувати його дію.

Властивості шрифту: гарнітуру, розмір і колір задають відповідно як значення атрибутів 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.

Приклад 4. Перейти на сторінку, використати вказівку контексного меню Переглянути джерело сторінки (назву подано для Google Chrome), переглянути код у даному місці, де подано приклади використання різних кольорів.

Контактну інформацію записують у контейнері <address>…</address>.

Коментар записують у контейнері <comment>…</comment> або використовують тег . Текст всередині цих тегів на екран браузера не буде показано.

Перелік тегів HTML5 можна знайти на порталі mozilla.org.

5. Закріплення вивченого матеріалу

Для чого призначено мову HTML?
Опишіть структуру HTML-документа.
Що таке тег? Що таке контейнер?
Які властивості має тіло документа? Як їх задають?
Якими тегами форматують символи?
Якими тегами вирівнюють текст?
Як задають властивості шрифту: гарнітуру, розмір і колір?
Як коментувати HTML-код?

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Домашнє завдання
Вивчити матеріал уроку. Створити HTML-сторінку за матеріалом сторінки з підручника (з довільної дисципліни), на якій максимально повно використано форматування символів і абзаців.

Текст упорядкувала Марховська Ірина Володимирівна, вчитель спеціалізованої школи № 185 імені Володимира Вернадського Святошинського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 03.11.2014 по 21.11.2014.