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

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

Під час створення веб-сайтів можуть бути використані різні засоби та технології.

Розробка веб-сторінок здійснюється шляхом написання їх HTML-коду.

Як ви вже знаєте, HTML (англ. Hyper Text Markup Language — мова розмічання гіпертексту) — це мова, призначена для визначення структури та оформлення веб-сторінок.

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

HTML-код веб-сторінок сайту можна написати в текстовому редакторі та зберегти у файлах з розширенням імені htm або html. Для написання коду можна використовувати будь-який текстовий редактор, наприклад:

Блокнот – стандартну програму Windows

Notepad++

(notepad-plus-plus.org)

SublimeText (sublimetext.com)

Brackets (brackets.io)

інтегроване середовище розробки NetBeance (netbeans.org) або ін.

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

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

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

У таких редакторах створення веб-сторінок виконується на основі готових шаблонів оформлення, об'єкти сторінок можуть бути вставлені з колекцій об'єктів.

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

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

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

Вони мають набори шаблонів оформлення веб-сторінок і модулів, які роблять сайт динамічним:

форум

стрічка новин

каталог файлів

форма опитування

гостьова книга тощо.

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

Контент веб-сторінок — текст і нетекстові об'єкти, призначені для розміщення на веб-сторінках — зберігається в базі даних. Генерація веб-сторінок виконується системою за запитом користувача.

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

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

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

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

WordPress

Joomla

Drupal

Moodle та ін.

10

Засоби розробки веб-сайтів

Розділ 4 § 4.2

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

Сайти Google

Weebly

Webnode

uCoz та ін.

У цих системах створення веб-сайту здійснюється у режимі онлайн відразу на сервері хостингу.

sites.google.com

weebly.com

webnode.

com.ua

ucoz.ua

10

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

Розділ 4 § 4.2

Розглянемо одну з технологій створення веб-сайтів — написання коду веб-сторінок з використанням мови HTML. У мові HTML реалізовано засоби для:

10

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

Розділ 4 § 4.2

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

Тексту

Тегів

який відображатиметься на сторінці;

(англ. tag — ярлик, ознака) — команд, що визначають:

• структуру документа (заголовки, абзаци, списки, таблиці тощо);
• формат тексту (колір символів тексту, розмір, вид шрифту, колір фону тощо);
• вставлення та розміщення на сторінці нетекстових об'єктів (графічних зображень, анімації, відео- та аудіофайлів тощо) та інше.

10

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

Розділ 4 § 4.2

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

Фрагмент веб-сторінки та фрагмент HTML-коду

10

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

Розділ 4 § 4.2

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

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

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

тег для розміщення на сторінці горизонтальної лінії.

<hr>

10

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

Розділ 4 § 4.2

Деякі теги мають атрибути для уточнення дії тегу. Атрибутам надаються значення. Атрибути та їх значення розміщують всередині відкриваючого тегу. Після імені атрибута ставлять знак =, значення атрибута обмежують лапками. Між тегом й атрибутом та між різними атрибутами вставляють пропуск. Структура запису тегу з атрибутом:

<тег атрибут = "значення"> фрагмент документа </тег>

Наприклад:

<font color = "red"> Текст червоного кольору </font>

10

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

Розділ 4 § 4.2

Усередині одних тегів можуть бути розміщені інші теги. Важливо, щоб тег, який був відкритий останнім, закривався першим.

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

<h1> <font color = "red"> Текст заголовка </font> </hl>

10

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

Розділ 4 § 4.2

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

10

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

Розділ 4 § 4.2

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

службову

інформаційну

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

<head>

</head>

та

<html>

</html>

та

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

10

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

Розділ 4 § 4.2

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

<body>

</body>

та

Таким чином, рекомендується така структура HTML-коду веб-сторінки:

<!doctype html>

<html>

<head>

Службова частина

</head>

<body>

Інформаційна частина

</body>

</html>

10

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

Розділ 4 § 4.2

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

для визначення назви сторінки, що відображатиметься на вкладці браузера, наприклад <title> Моя перша сторінка </title>;

title

містить службові дані для браузерів і пошукових систем. Атрибут charset указує на таблицю кодування символів, яку використано під час створення веб-сторінки — Windows-1251 при кодуванні кирилиці в операційній системі Windows або UTF-8 при використанні кодової таблиці Юнікод. Наприклад, <meta charset = "UTF-8 ">. Використання тегу із цим атрибутом важливе для правильного відображення символів тексту браузером.

meta

10

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

Розділ 4 § 4.2

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

<body>

</body>

та

У тегу body атрибут bgcolor указує на колір фону веб-сторінки:

<body bgcolor=«yellow»> Колір фону сторінки — жовтий </body>

10

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

Розділ 4 § 4.2

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

Наведемо приклади тегів мови HTML, що можуть бути розміщені в інформаційній частині веб-сторінки.

Приклади тегів мови HTML

10

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

Розділ 4 § 4.2

(Продовження…)

Приклади тегів мови HTML

10

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

Розділ 4 § 4.2

(Продовження…)

Приклади тегів мови HTML

10

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

Розділ 4 § 4.2

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

Вікіпідручнику

HTML конструювання

uk.wikibooks.org/wiki/HTML

htmlbook.in.ua

10

Для тих, хто хоче знати більше

Розділ 4 § 4.2

Опис мови HTML уперше запропонував у 1991 році британський учений Тім Бернерс-Лі (нар. у 1955 р.). У документі з назвою HTML Tags:

info.cern.ch/hypertext/ WWW/MarkUp/Tags.html)

Містився опис перших 20 тегів для розмітки документів. Тринадцять із тих тегів існують ще й досі в мові HTML.

10

Для тих, хто хоче знати більше

Розділ 4 § 4.2

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

У 2014 році було рекомендовано стандарт п'ятої версії мови — HTML5.

10

Створення веб-сторінки мовою HTML

Розділ 4 § 4.2

Розглянемо процес створення веб-сторінок з використанням текстового редактора Notepad++.

За замовчуванням текст, що вводиться в редакторі, кодується з використанням кодової таблиці Юнікод.

notepad-plus-plus.org

10

Створення веб-сторінки мовою HTML

Розділ 4 § 4.2

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

текст

числа

теги

атрибути тегів

значення атрибутів

коментарі тощо.

10

Створення веб-сторінки мовою HTML

Розділ 4 § 4.2

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

1

2

10

Створення веб-сторінки мовою HTML

Розділ 4 § 4.2

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

10

Домашнє завдання

Проаналізувати

§ 4.2, ст. 114-122

Розділ 4 § 4.2

10

Дякую за увагу!

10