1 of 26

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

2-ге видання, оновлене

Урок 27

Інформатика

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.

Рівень стандарту 10(11)

2 of 26

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

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

Згадаємо, що принцип її використання полягає в тому, що до простого тексту за допомогою текстового редактора додаються мітки (теги), які визначають структуру, вигляд і поведінку окремих елементів документа.

Розділ 4

§ 27

3 of 26

Теги та атрибути

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

Теги бувають:

Парними (контейнери)

Непарними

b — парний тег

<b>...</b> напівжирного шрифту

br — непарний тег

<br> або <br/> переведення рядка

Розділ 4

§ 27

4 of 26

Теги та атрибути

Тег, що починається із символу «/», називають закриваючим. Дія html-тегу залежить від значень його параметрів, так званих атрибутів.

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

Розділ 4

§ 27

5 of 26

Форматування текстів

Тег body з атрибутами кольору фону (bgkolor) і кольору тексту (text):

У вікні текстового редактора

У вікні браузера

Привіт!

</body>

</htm>

Розділ 4

§ 27

6 of 26

Форматування текстів

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

Розділ 4

§ 27

7 of 26

Теги та атрибути

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

Розділ 4

§ 27

8 of 26

Теги структури документа

Для правильного відображення браузером веб-сторінки необхідно дотримуватись такої структури html-документа:

Початок коду HTML

<html>

Початок і закінчення заголовкової частини документа

Початок і закінчення тіла документа

Закінчення коду HTML

</html>

Розділ 4

§ 27

9 of 26

Теги структури документа

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

Кодування, використане при збереженні документа. Можливі значення атрибута charset: utf-8, windows-1251 тощо

Назва документа, яка з’явиться в заголовку вікна браузера

Розділ 4

§ 27

10 of 26

Теги структурування тексту

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

Початок і закінчення абзацу. Атрибут align задає вирівнювання рядків абзацу й може набувати значень: left — за лівим краєм, center — по центру, right — за правим краєм

Початок і закінчення заголовка 1-го рівня. Підтримується 6 рівнів заголовків

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

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

Розділ 4

§ 27

11 of 26

Теги структурування тексту

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

Елемент списку (маркованого чи нумерованого)

Початок і закінчення таблиці

Початок і закінчення рядка таблиці

Початок і закінчення клітинки таблиці

Початок і закінчення клітинки з заголовком таблиці

Якщо частина тексту з якоїсь причини не повинна оброблятися та виводитися у браузері, її вміщують у тег коментаря:

Розділ 4

§ 27

12 of 26

Теги форматування тексту

Форматування тексту може виконуватися на двох рівнях.

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

виділений

<cite>...

</cite>

цитата

<strong>...

</strong>

дуже виділений

<code>...

</code>

програмний код

Розділ 4

§ 27

13 of 26

Теги форматування тексту

(Продовження…) Форматування тексту може виконуватися на двох рівнях.

Фізичний рівень. У цьому випадку теги прямо описують властивості символів (накреслення, розмір, колір тощо) чи абзаців.

жирний

закреслений

підкреслений

підрядковий

курсив

надрядковий

вирівняти по центру

Розділ 4

§ 27

14 of 26

Теги структури документа

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

Розглянемо інші теги. Для вставлення зображень використовують тег <img>:

Розділ 4

§ 27

15 of 26

Теги форматування тексту

За цим тегом буде виведено малюнок з файла house.png, що знаходиться в папці img, яка, у свою чергу, розташована в одній папці з HTML-документом.

Якщо цей файл недоступний, то буде виведено його опис, тобто значення атрибута alt: Мій будинок

Розділ 4

§ 27

16 of 26

Теги структури документа

Гіперпосилання в документ додають за допомогою тегу <a>:

За цим тегом буде відкрито HTML -документ із файла page2.html, що знаходиться в папці pages, яка, у свою чергу, розташована в одній папці з HTML-документом, у якому знаходиться посилання.

Розділ 4

§ 27

17 of 26

Теги структури документа

Якщо атрибут target:

відсутній або має значення self

має значення

blank

то документ буде відкрито в тому самому вікні браузера

спричинить відкриття документа в новому вікні або вкладці

Розділ 4

§ 27

18 of 26

Розглянемо приклад використання HTML

<html>

<head>

<title>Цікаве програмування</title>

</head>

<body>

<h1>Мови програмування</h1>

<h2>Паскаль</h2>

<p>Паскаль — <em>мова програмування</em>, розроблена для навчання програмуванню, пізніше стала мовою, придатною для розробки складних проектів.

<h3>Огляд команд</h3>

<tr><th>ReadLn</th><th>введення даних</th></tr>

<tr><td>ReadLn</td><td>введення даних</td></tr>

<tr><td>WriteLn</td><td>виведення даних</td></tr>

</table>

</body>

</html>

Розділ 4

§ 27

19 of 26

Редактори HTML

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

Але зручніше скористатися редакторами HTML — спеціалізованими редакторами, які мають такі засоби, як:

підсвічування тегів

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

структурування коду на екрані для покращення сприйняття тощо

Розділ 4

§ 27

20 of 26

Редактори HTML

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

pspad.com

Розділ 4

§ 27

21 of 26

Редактори HTML

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

Робота в них нагадує підготовку документа за допомогою текстового процесора. Більшість СКВ мають у своєму складі редактор HTML, можливості якого залежать від конкретного випадку.

Розділ 4

§ 27

22 of 26

Розгадайте ребус

Розмітка

Розділ 4

§ 27

23 of 26

Питання для самоперевірки

Поясніть принцип гіпертекстової розмітки тексту.

Опишіть теги структури документа.

Наведіть приклади та опишіть дію тегів структурування тексту?

Поясніть особливість форматування тексту на фізичному рівні.

Які теги використовують для формування таблиць?

Які можливості надають редактори HTML?

Розділ 4

§ 27

24 of 26

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

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

§ 27, с. 151-155

Розділ 4

§ 27

25 of 26

Працюємо за комп’ютером

Сторінка

154-155

Розділ 4

§ 27

26 of 26

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

2-ге видання, оновлене

Урок 27

Інформатика

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.

Рівень стандарту 10(11)