Поняття про мову розмічання гіпертекстового документа
За навчальною програмою 2018 року
Урок 27
10
Мова розмічання�гіпертекстового документа
Розділ 4 § 27
З основами мови розмічання гіпертекстових документів ви знайомилися в 9 класі.
Згадаємо, що принцип її використання полягає в тому, що до простого тексту за допомогою текстового редактора додаються мітки (теги), які визначають структуру, вигляд і поведінку окремих елементів документа.
10
Теги та атрибути
Розділ 4 § 27
Теги записують у дужках <> (знаки «менше» і «більше») малими або великими англійськими літерами. Помилковими тегами браузер нехтує.
Теги бувають:
Парними (контейнери)
Непарними
b — парний тег
<b>...</b> напівжирного шрифту
br — непарний тег
<br> або <br/> переведення рядка
10
Теги та атрибути
Розділ 4 § 27
Тег, що починається із символу «/», називають закриваючим. Дія html-тегу залежить від значень його параметрів, так званих атрибутів.
Атрибут — це додаткова інформація, що записується біля відкриваючого тега.
10
Форматування текстів
Розділ 6 § 21
Тег body з атрибутами кольору фону (bgkolor) і кольору тексту (text):
У вікні текстового редактора
У вікні браузера
<body text="white" bgcolor="green">
Привіт!
</body>
</htm>
10
Форматування текстів
Розділ 6 § 21
Зазвичай значення атрибутів беруть у лапки. Теги з помилками або такі, що не підтримуються використовуваним браузером, ігноруються.
10
Теги та атрибути
Розділ 4 § 27
Текст із тегами може розташовуватися довільно: розбиватися на абзаци, виділятися відступами тощо. Під час перегляду в браузері цим буде знехтувано, а вигляд документа визначатиметься тільки тегами.
10
Теги структури документа
Розділ 4 § 27
Для правильного відображення браузером веб-сторінки необхідно дотримуватись такої структури html-документа:
Початок коду HTML
<html>
Початок і закінчення заголовкової частини документа
<head>...</head>
Початок і закінчення тіла документа
<body>...</body>
Закінчення коду HTML
</html>
10
Теги структури документа
Розділ 4 § 27
У заголовковій частині розміщують службову інформацію, яка не призначена для виведення в робочому полі вікна браузера:
Кодування, використане при збереженні документа. Можливі значення атрибута charset: utf-8, windows-1251 тощо
<meta charset="utf-8">
Назва документа, яка з’явиться в заголовку вікна браузера
<title>...</title>
10
Теги структурування тексту
Розділ 4 § 27
Текст, який уміщено в тілі документа, структурують за допомогою відповідних тегів (далі в таблицях наведено лише частину тегів).
Початок і закінчення абзацу. Атрибут align задає вирівнювання рядків абзацу й може набувати значень: left — за лівим краєм, center — по центру, right — за правим краєм
<p >...</p>
Початок і закінчення заголовка 1-го рівня. Підтримується 6 рівнів заголовків
<h1>...</h1>
Початок і закінчення маркованого списку
<ul>...</ul>
Початок і закінчення нумерованого списку
<ol>...</ol>
10
Теги структурування тексту
Розділ 4 § 27
Продовження…
Елемент списку (маркованого чи нумерованого)
<li>...</li>
Початок і закінчення таблиці
<table>...</table>
Початок і закінчення рядка таблиці
<tr>...</tr>
Початок і закінчення клітинки таблиці
<td>...</td>
Початок і закінчення клітинки з заголовком таблиці
<th>...</th>
Якщо частина тексту з якоїсь причини не повинна оброблятися та виводитися у браузері, її вміщують у тег коментаря:
<!-- … -->
10
Теги форматування тексту
Розділ 4 § 27
Форматування тексту може виконуватися на двох рівнях.
Логічний рівень. У цьому випадку розмітка показує, чому позначено той чи інший фрагмент, тобто яку роль він відіграє в тексті.
<em>...</em>
виділений
<cite>...
</cite>
цитата
<strong>...
</strong>
дуже виділений
<code>...
</code>
програмний код
10
Теги форматування тексту
Розділ 4 § 27
(Продовження…) Форматування тексту може виконуватися на двох рівнях.
Фізичний рівень. У цьому випадку теги прямо описують властивості символів (накреслення, розмір, колір тощо) чи абзаців.
<b>...</b>
жирний
<s>...</s>
закреслений
<u>...</u>
підкреслений
<sub>...</sub>
підрядковий
<i>...</i>
курсив
<sup>...</sup>
надрядковий
<center>...</center>
вирівняти по центру
10
Теги структури документа
Розділ 4 § 27
Якщо передбачається подальший розвиток і підтримка сайта, то слід надати перевагу логічному форматуванню. Це, зокрема, дасть можливість автоматизувати регулярне змінення дизайну сайта.
Розглянемо інші теги. Для вставлення зображень використовують тег <img>:
<img src="шлях та ім’я файла" alt="опис малюнка">
10
Теги форматування тексту
Розділ 4 § 27
<img src="img/house.png" alt="Мій будинок">
За цим тегом буде виведено малюнок з файла house.png, що знаходиться в папці img, яка, у свою чергу, розташована в одній папці з HTML-документом.
Якщо цей файл недоступний, то буде виведено його опис, тобто значення атрибута alt: Мій будинок
10
Теги структури документа
Розділ 4 § 27
Гіперпосилання в документ додають за допомогою тегу <a>:
<a href="шлях та ім’я файла" target="спосіб відкриття">
<a href="pages/page2.html" target=blank>
За цим тегом буде відкрито HTML -документ із файла page2.html, що знаходиться в папці pages, яка, у свою чергу, розташована в одній папці з HTML-документом, у якому знаходиться посилання.
10
Теги структури документа
Розділ 4 § 27
Якщо атрибут target:
відсутній або має значення self
має значення
blank
то документ буде відкрито в тому самому вікні браузера
спричинить відкриття документа в новому вікні або вкладці
10
Теги структури документа
Розділ 4 § 27
Розглянемо приклад використання HTML. У фрагменті HTML-документа використано деякі з розглянутих тегів:
<html>
<head>
<title>Цікаве програмування</title>
</head>
<body>
<h1>Мови програмування</h1>
<h2>Паскаль</h2>
<p>Паскаль — <em>мова програмування</em>, розроблена для навчання програмуванню, пізніше стала мовою, придатною для розробки складних проектів.
<h3>Огляд команд</h3>
<table border=1>
<tr><th>ReadLn</th><th>введення даних</th></tr>
<tr><td>ReadLn</td><td>введення даних</td></tr>
<tr><td>WriteLn</td><td>виведення даних</td></tr>
<!-- Тут будуть описані інші команди -->
</table>
</body>
</html>
10
Редактори HTML
Розділ 4 § 27
Додати HTML-розмітку до тексту можна за допомогою будь-якого текстового редактора.
Але зручніше скористатися редакторами HTML — спеціалізованими редакторами, які мають такі засоби, як:
підсвічування тегів
автоматичне додавання та перевірка наявності парних тегів
структурування коду на екрані для покращення сприйняття тощо
10
Редактори HTML
Розділ 4 § 27
До таких програм належить PSPad — безкоштовний текстовий редактор для підготовки документів різними мовами програмування та розмітки, зокрема й HTML. Сайт програми:
pspad.com
10
Редактори HTML
Розділ 4 § 27
Найшвидше підготувати HTML-документ дозволяють редактори, які працюють за принципом WYSIWYG (англ. What You See Is What You Get — що бачиш, те й отримаєш).
Робота в них нагадує підготовку документа за допомогою текстового процесора. Більшість СКВ мають у своєму складі редактор HTML, можливості якого залежать від конкретного випадку.
10
Розгадайте ребус
Розмітка
Розділ 4 § 27
10
Питання для самоперевірки
Розділ 4 § 27
10
Домашнє завдання
Проаналізувати
§ 27, ст. 151-155
Розділ 4 § 27
10
Працюємо за комп’ютером
Розділ 4 § 27
Сторінка
154-155
10
Дякую за увагу!
За навчальною програмою 2018 року
Урок 27
10