Поняття про мову

розмічання
гіпертекстового
документа

10
За навчальною програмою 2018 року
 Розділ 4
Запитання
10
§ 4.2

1. Які етапи створення веб-сайтів?

2. Які засоби можуть бути використані для створення
веб-сайтів?
3. Які об'єкти можна
вставити на веб-
сторінку?

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

Під час створення веб-сайтів можуть бути використані

різні засоби та технології.
Розробка веб-сторінок
здійснюється шляхом написання їх
HTML-коду.
Як ви вже знаєте, HTML (англ.
Hyper Text Markup Language — мова
розмічання гіпертексту) — це мова,
призначена для визначення
структури та оформлення веб-
сторінок.
© Вивчаємо інформатику teach-inf.at.ua
 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

HTML-код веб-сторінок сайту можна написати в

текстовому редакторі та зберегти у файлах з
розширенням імені htm або html. Для написання коду
можна використовувати будь-який текстовий редактор,
наприклад:
Блокнот –
Notepad++
стандартну SublimeText
(notepad-plus-
програму (sublimetext.com)
plus.org)
Windows
інтегроване середовище
Brackets (brackets.io) розробки NetBeance
© Вивчаємо інформатику teach-inf.at.ua
(netbeans.org) або ін.
 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

HTML-код веб-сторінки може складатися із сотень або

навіть тисяч рядків. Для спрощення розробки веб-
сторінок можуть використовуватися візуальні редактори
HTML-коду, наприклад:

Adobe
Microsoft
Dreamweaver
FrontPage та ін.

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

У таких редакторах створення веб-сторінок

виконується на основі готових шаблонів оформлення,
об'єкти сторінок можуть бути вставлені з колекцій
об'єктів.
Такі програми є прикладами
WYSIWYG-редакторів (англ. What You
See Is What You Get — що ви бачите,
то ви й отримуєте). HTML-код
сторінки в цих середовищах
генерується автоматично та
зберігається у файлах.

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

Засобами для автоматичного створення веб-сайтів є

також системи керування вмістом веб-сайту WCMS
(англ. Web Content Management System — система
керування веб-контентом) — програми для організації
веб-сайтів чи інших інформаційних ресурсів в Інтернеті
чи окремих комп'ютерних мережах.
Вони мають набори шаблонів оформлення веб-
сторінок і модулів, які роблять сайт динамічним:

стрічка каталог форма гостьова

форум
новин файлів опитування книга тощо.

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

Контент веб-сторінок — текст і нетекстові об'єкти,

призначені для розміщення на веб-сторінках —
зберігається в базі даних. Генерація веб-сторінок
виконується системою за запитом користувача.
HTML-код
згенерованої сторінки
не зберігається в
окремому файлі, а
надсилається
безпосередньо у
браузер користувача.
© Вивчаємо інформатику teach-inf.at.ua
 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

Сайт під керуванням WCMS має панель управління, що

надає адміністратору сайту інструменти для додавання,
редагування та видалення матеріалів на сайті.
Популярними системами керування вмістом веб-сайтів є:

WordPress Joomla Drupal Moodle та ін.

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Засоби розробки веб-сайтів
10
§ 4.2

Деякі онлайн-системи конструювання сайтів

одночасно з послугами з розробки та адміністрування
веб-сайтів надають доменне ім'я сайту та послуги
хостингу. Такими є системи:

Сайти Google Weebly Webnode uCoz та ін.

sites.google. webnode.
weebly.com ucoz.ua
com com.ua
У цих системах створення веб-сайту здійснюється у
режимі онлайн відразу на сервері хостингу.
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Розглянемо одну з технологій створення веб-сайтів —

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

створення гіперпосилань, які використовуються для переходу до

інших сторінок або інших частин поточної сторінки;

створення форм для реєстрації або опитування відвідувачів сайту;

включення зображень, звуку, відео- та інших об'єктів до веб-сторінок.

© Вивчаємо інформатику teach-inf.at.ua

 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

HTML-код веб-сторінки складається з:

Тексту Тегів
який (англ. tag — ярлик, ознака) —
відображатиметься команд, що визначають:
на сторінці;  структуру документа (заголовки, абзаци,
списки, таблиці тощо);
 формат тексту (колір символів тексту,
розмір, вид шрифту, колір фону тощо);
 вставлення та розміщення на сторінці
нетекстових об'єктів (графічних зображень,
анімації, відео- та аудіофайлів тощо) та
інше.
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

HTML-код веб-сторінки опрацьовується браузером. Браузер

відображає текст і вміст уставлених нетекстових об'єктів, їх
форматування відповідно до визначеної структури.
Фрагмент веб-сторінки та фрагмент HTML-коду

© Вивчаємо інформатику teach-inf.at.ua

 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Теги розміщуються в дужках <і>. Наприклад,

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

<b> Текст, оформлений напівжирним накресленням <b>.

© Вивчаємо інформатику teach-inf.at.ua

 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Деякі теги мають атрибути для уточнення дії тегу.

Атрибутам надаються значення. Атрибути та їх значення
розміщують всередині відкриваючого тегу. Після імені
атрибута ставлять знак =, значення атрибута
обмежують лапками. Між тегом й атрибутом та між
різними атрибутами вставляють пропуск. Структура
запису тегу з атрибутом:
<тег атрибут = "значення"> фрагмент документа </тег>
Наприклад:
<font color = "red"> Текст червоного кольору </font>

© Вивчаємо інформатику teach-inf.at.ua

 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Усередині одних тегів можуть бути

розміщені інші теги. Важливо, щоб тег,
який був відкритий останнім, закривався
першим.
Наприклад, заголовок першого рівня, що записаний
символами червоного кольору, може бути створений з
використанням таких тегів:
<h1> <font color = "red"> Текст заголовка </font> </hl>

© Вивчаємо інформатику teach-inf.at.ua

 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

У першому рядку HTML-коду сторінки рекомендується

розміщувати тег !doctype. Він вказує браузеру версію мови
HTML, яку використано для створення веб-сторінки. Для
останньої п'ятої версії HTML тег має вигляд:

© Вивчаємо інформатику teach-inf.at.ua

 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Весь код веб-сторінки міститься між тегами:

<html> та </html>
Цей код поділено на дві частини:

службову інформаційну
Службова частина HTML-коду сторінки містить
відомості, потрібні для правильного відображення веб-
сторінки браузером і для пошукових систем. Уміст
службової частини розміщено між тегами:
<head> та </head>
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Інформаційна частина коду сторінки містить дані,

призначені для перегляду відвідувачами веб-сторінки.
Уміст інформаційної частини розташовано між тегами:

<body> <!doctype html>

<html>
та <head>
Службова частина
</body>
</head>
Таким чином, <body>
рекомендується така Інформаційна частина
структура HTML-коду </body>
веб-сторінки: </html>
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

У службовій частині коду доцільно розміщувати такі

теги:
для визначення назви сторінки, що відображатиметься
title на вкладці браузера, наприклад <title> Моя перша
сторінка </title>;
містить службові дані для браузерів і пошукових систем.
Атрибут charset указує на таблицю кодування символів, яку
використано під час створення веб-сторінки — Windows-
1251 при кодуванні кирилиці в операційній системі
meta Windows або UTF-8 при використанні кодової таблиці
Юнікод. Наприклад, <meta charset = "UTF-8 ">.
Використання тегу із цим атрибутом важливе для
правильного відображення символів тексту браузером.
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Частина коду веб-сторінки, яка містить контент і теги,

що визначають способи його відображення на веб-
сторінці, розміщується в інформаційній частині веб-
сторінки між тегами та.
<body> та </body>
У тегу body атрибут bgcolor указує на колір фону веб-
сторінки:
<body bgcolor=«yellow»> Колір фону сторінки —
жовтий </body>

© Вивчаємо інформатику teach-inf.at.ua

 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Значення кольорів можна записувати відповідними

англійськими словами.
Наведемо приклади тегів мови HTML, що можуть бути
розміщені в інформаційній частині веб-сторінки.
Приклади тегів мови HTML
Тег Призначення Приклад
h1-h6 Для визначення тексту заголовків
<hl> Заголовок першого рівня </hl>
різних рівнів. Усього визначено 6
<h2> Заголовок другого рівня </Ь2>...
рівнів заголовків
p Для визначення меж абзацу <р> Текст абзацу </р>
br Задає перенесення тексту на новий Текст першого рядка <br> Текст
рядок другого рядка
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

(Продовження…)
Приклади тегів мови HTML
Тег Призначення Приклад
b Задає напівжирне накреслення
<b> Напівжирний шрифт </b>
фрагмента тексту
i Задає курсивне накреслення
<і> Курсивний шрифт </і>
фрагмента тексту
u Задає підкреслення фрагмента
<u> Підкреслений шрифт </u>
тексту
font Задає значення властивостей символів <font color= "blue" size="5" face=
фрагмента тексту. Атрибут color "Arial"> Текст синього кольору
установлює колір символів, size — збільшеного розміру, шрифт символів
розмір символів (1 — найменший, 7 — Arial </font>
найбільший), face — шрифт
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

(Продовження…)
Приклади тегів мови HTML
Тег Призначення Приклад
img Забезпечує вставлення до веб-
сторінки зображення, що міститься у
вказаному графічному файлі. <img src="image.jpg">
Значенням атрибута scr є ім'я або
URL-адреса графічного файла
a Забезпечує створення
гіперпосилання на вказану веб-
<a href="second_page.html">
сторінку. Значенням атрибута href є
Перейти до другої сторінки </а>
ім'я html-файла або URL-адреса
веб-сторінки, до якої відбудеться
перехід після вибору гіперпосилання
© Вивчаємо інформатику teach-inf.at.ua
 Мова розмічання гіпертекстових
Розділ 4
документів HTML
10
§ 4.2

Повніший список тегів і прикладів їх використання

для створення веб-сторінок можна знайти на різних
ресурсах Інтернету, наприклад,

Вікіпідручнику HTML конструювання

uk.wikibooks.org/wiki/HTML htmlbook.in.ua

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Для тих, хто хоче знати більше
10
§ 4.2

Опис мови HTML уперше

запропонував у 1991 році
британський учений Тім Бернерс-Лі
(нар. у 1955 р.). У документі з
назвою HTML Tags:
info.cern.ch/hypertext/
WWW/MarkUp/Tags.html)
Містився опис перших 20 тегів для
розмітки документів. Тринадцять із
тих тегів існують ще й досі в мові
HTML.
© Вивчаємо інформатику teach-inf.at.ua
 Розділ 4
Для тих, хто хоче знати більше
10
§ 4.2

У 1994 році Тім Бернерс-Лі заснував Консорціум

Всесвітньої павутини W3C (англ. World Wide Web
Consortium — консорціум всесвітньої павутини), який
очолює до сьогодні. Консорціум займається розробкою і
впровадженням стандартів для Інтернету, у тому числі
затверджує специфікацію мови HTML.
У 2014 році було
рекомендовано
стандарт п'ятої версії
мови — HTML5.

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Створення веб-сторінки мовою HTML
10
§ 4.2

Розглянемо процес створення

веб-сторінок з використанням
текстового редактора Notepad++.
notepad-plus-plus.org

За замовчуванням текст, що вводиться в редакторі,

кодується з використанням кодової таблиці Юнікод.
© Вивчаємо інформатику teach-inf.at.ua
 Розділ 4
Створення веб-сторінки мовою HTML
10
§ 4.2

Після введення коду веб-сторінки та збереження

документа у файлі, тип якого Hyper Text Markup
Language file, елементи коду будуть подані різними
кольорами залежно від їх типу:

текст числа теги

значення
атрибути тегів коментарі тощо.
атрибутів

© Вивчаємо інформатику teach-inf.at.ua

 Розділ 4
Створення веб-сторінки мовою HTML
10
§ 4.2

Щоб побачити, як відображається веб-сторінка в

браузері, можна виконати Виконати  Launch in Chrome.
Після цього буде запущено на виконання браузер
Google Chrome, у вікні якого відобразиться створена
веб-сторінка.

2
© Вивчаємо інформатику teach-inf.at.ua
 Розділ 4
Створення веб-сторінки мовою HTML
10
§ 4.2

Наведену на малюнку структуру коду рекомендується

використовувати в усіх веб-сторінках, які ви
створюватимете.

© Вивчаємо інформатику teach-inf.at.ua