2. 9
Розмітка гіпертексту засобами HTMLРозділ 6
§ 21
Текстові редактори мають у своєму арсеналі
інструменти для форматування текстових документів.
Розглянемо, як відбувається форматування гіпертекстів
для їхнього відображення у вікні браузера.
3. 9
Поняття про мову HTMLРозділ 6
§ 21
Звичайний текст можна пристосувати для
відображення у вікні браузера спеціальними
командами — тегами, сукупність яких разом із
правилами їхнього використання називають мовою
розмітки.
HTML (англ. HyperText
Markup Language — мова
розмітки гіпертексту) — це
мова тегів, якою пишуться
гіпертекстові документи для
мережі Інтернет.
4. 9
Поняття про мову HTMLРозділ 6
§ 21
Таким чином, веб-сторінка являє собою створений
мовою HTML документ, відображений у вікні браузера.
HTML не є мовою програмування.
8. 9
html-документРозділ 6
§ 21
Тег — це записана в кутових дужках о команда
мови HTML, яку виконує браузер.
<HTML>
<HEAD>
<TITLE> Найпростіша
веб-сторінка
</TITLE>
</HEAD>
<BODY>
Ця сторінка створена за допомогою простих тегів
</BODY>
</HTML>
9. 9
html-документРозділ 6
§ 21
Для правильного відображення браузером веб-сторінки
необхідно дотримуватись такої структури html-документа:
<html> початок документа
<head> заголовок документа зі службовою інформацією
<title> містить назву, що відображатиметься на
вкладці </title>
</head> кінець заголовка документа
<body> «тіло» документа: все, що відображається на
веб-сторінці </body>
</html> кінець документа
11. 9
Форматування текстівРозділ 6
§ 21
Тегами мови HTML можна визначити вигляд об'єктів,
зокрема текстових фрагментів, на веб-сторінці.
Теги бувають:
Парними
(контейнери)
Непарними
b — парний тег
<b>...</b> напівжирного
шрифту
br — непарний тег
<br> або <br/>
переведення рядка
12. 9
Форматування текстівРозділ 6
§ 21
Тег, що починається із символу «/», називають
закриваючим. Дія html-тегу залежить від значень його
параметрів, так званих атрибутів.
Атрибут — це
додаткова
інформація, що
записується біля
відкриваючого тега.
13. 9
Форматування текстівРозділ 6
§ 21
Тег body з атрибутами кольору фону (bgkolor) і
кольору тексту (text):
У вікні текстового
редактора
У вікні браузера
<body text="white"
bgcolor="green">
Привіт!
</body>
</htm>
14. 9
Форматування текстівРозділ 6
§ 21
Зазвичай значення атрибутів беруть у лапки.
Теги з помилками або такі, що не підтримуються
використовуваним браузером, ігноруються.
15. 9
Форматування текстівРозділ 6
§ 21
Розглянемо дію деяких тегів форматування тексту:
ДіяТег Запис
Переведення рядка<br> Непарний
Новий абзац із відступом<p> Непарний
Заголовок: <h6> - найменший, <h1> -
найбільший
<h> Парний
Напівжирний шрифт<b> Парний
Курсив<i> Парний
Підкреслений шрифт<u> Парний
Розмір (size 1..7) і колір (color) шрифту<font> Парний
16. 9
Форматування текстівРозділ 6
§ 21
Розглянемо приклад застосування атрибутів.
У вікні текстового редактора У вікні браузера
<body text="blue" bgcolor="yellow" >
<h1>Розділ 6<h1>
<p>§21 HTML
<br>
<font color="red" size="3"
<b><i><u> Застосування тсгів
</u></i></b>
</font>
<br>
<b>Teг</b> - <font color="greer"> це команда
HTML</font>
</body>
17. 9
Форматування текстівРозділ 6
§ 21
В атрибутах керування кольором, окрім англійської
назви кольорів (red, green, blue, yellow, black, white та
ін.), можна вказати код RGB-кольору, «змішуючи»
шістнадцяткові значення червоного, зеленого та
синього кольорів у межах від 00 до FF:
#000000 Чорний (black)
#FFFFFF Білий (white)
#FF0000 Червоний (red)
#00FF00
Зелений
(green)
#0000FF Синій (blue)
#FFFF00
Жовтий
(yellow)
#654321
Відтінок
коричневого
#123456
Відтінок
синього
18. 9
Марковані та нумеровані спискиРозділ 6
§ 21
Елементи списку розмічають тегами <lі>...</lі>
У вікні текстового редактора У вікні браузера
<ul type="square">
<li>Іванов</li>
<li>Бойко</li>
<li>Шевченко</li>
</ul>
<ol type="I">
<li>Інформатика</li>
<li>Фізика</li>
<li>Хімія</li>
</ol>
19. 9
Марковані та нумеровані спискиРозділ 6
§ 21
Для маркованого списку використовують тег:
<ul>...</ul>
З атрибутом type, який задає вигляд маркера:
"disk" "circle" "square"
• о ■
20. 9
Марковані та нумеровані спискиРозділ 6
§ 21
Для нумерованих списків використовують тег:
<ol>...</ol>
З атрибутами type, який задає тип нумерації:
“ 1 " " А " " І "
арабські
цифри
латинські
літери
римська
нумерація
Start для задавання початкового номеру арабськими
цифрами.
21. 9
Питання для самоперевіркиРозділ 6
§ 20
1. Що таке мова HTML?
2. Яка структура html-документа?
3. Що таке тег і атрибут тегу?
4. Назвіть кілька тегів форматування тексту.
5. Із чого складається код кольору?
6. Назвіть теги маркованого та нумерованого
списків.
