30

9
За новою програмою
Урок 30
Поняття мови
розмітки
гіпертексту

9
Розмітка гіпертексту засобами HTMLРозділ 6
§ 21
Текстові редактори мають у своєму арсеналі
інструменти для форматування текстових документів.
Розглянемо, як відбувається форматування гіпертекстів
для їхнього відображення у вікні браузера.

9
Поняття про мову HTMLРозділ 6
§ 21
Звичайний текст можна пристосувати для
відображення у вікні браузера спеціальними
командами — тегами, сукупність яких разом із
правилами їхнього використання називають мовою
розмітки.
HTML (англ. HyperText
Markup Language — мова
розмітки гіпертексту) — це
мова тегів, якою пишуться
гіпертекстові документи для
мережі Інтернет.

9
Поняття про мову HTMLРозділ 6
§ 21
Таким чином, веб-сторінка являє собою створений
мовою HTML документ, відображений у вікні браузера.
HTML не є мовою програмування.

9
html-документРозділ 6
§ 21
Текст html-файла набирають у
будь-якому редакторі, наприклад у
Блокноті, та зберігають із
розширенням:
або

9
§ 21
Можна зберегти у форматі html.
Документи
Word
Презентації
PowerPoint
Таблиці Excel

9
§ 21
З тегами html зручно працювати у спеціалізованих
редакторах:
PSPad Notepad++ та ін.

9
§ 21
Тег — це записана в кутових дужках о команда
мови HTML, яку виконує браузер.
<HTML>
<HEAD>
<TITLE> Найпростіша
веб-сторінка
</TITLE>
</HEAD>
<BODY>
Ця сторінка створена за допомогою простих тегів
</BODY>
</HTML>

9
§ 21
Для правильного відображення браузером веб-сторінки
необхідно дотримуватись такої структури html-документа:
<html> початок документа
<head> заголовок документа зі службовою інформацією
<title> містить назву, що відображатиметься на
вкладці </title>
</head> кінець заголовка документа
<body> «тіло» документа: все, що відображається на
веб-сторінці </body>
</html> кінець документа

9
§ 21
У мові HTML розмір (регістр) символів не має
значення.

9
Форматування текстівРозділ 6
§ 21
Тегами мови HTML можна визначити вигляд об'єктів,
зокрема текстових фрагментів, на веб-сторінці.
Теги бувають:
Парними
(контейнери)
Непарними
b — парний тег
... напівжирного
шрифту
br — непарний тег
 або 
переведення рядка

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

9
§ 21
Тег body з атрибутами кольору фону (bgkolor) і
кольору тексту (text):
У вікні текстового
редактора
У вікні браузера
<body text="white"
bgcolor="green">
Привіт!
</body>
</htm>

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

9
§ 21
Розглянемо дію деяких тегів форматування тексту:
ДіяТег Запис
Переведення рядка Непарний
Новий абзац із відступом Непарний
Заголовок: <h6> - найменший, <h1> -
найбільший
<h> Парний
Напівжирний шрифт Парний
Курсив Парний
Підкреслений шрифт Парний
Розмір (size 1..7) і колір (color) шрифту Парний

9
§ 21
Розглянемо приклад застосування атрибутів.
У вікні текстового редактора У вікні браузера
<body text="blue" bgcolor="yellow" >
<h1>Розділ 6<h1>
§21 HTML
 
 Застосування тсгів


 
Teг - це команда
HTML
</body>

9
§ 21
В атрибутах керування кольором, окрім англійської
назви кольорів (red, green, blue, yellow, black, white та
ін.), можна вказати код RGB-кольору, «змішуючи»
шістнадцяткові значення червоного, зеленого та
синього кольорів у межах від 00 до FF:
#000000 Чорний (black)
#FFFFFF Білий (white)
#FF0000 Червоний (red)
#00FF00
Зелений
(green)
#0000FF Синій (blue)
#FFFF00
Жовтий
(yellow)
#654321
Відтінок
коричневого
#123456
Відтінок
синього

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>

9
§ 21
Для маркованого списку використовують тег:
<ul>...</ul>
З атрибутом type, який задає вигляд маркера:
"disk" "circle" "square"
• о ■

9
§ 21
Для нумерованих списків використовують тег:
<ol>...</ol>
З атрибутами type, який задає тип нумерації:
“ 1 " " А " " І "
арабські
цифри
латинські
літери
римська
нумерація
Start для задавання початкового номеру арабськими
цифрами.

9
Питання для самоперевіркиРозділ 6
§ 20
1. Що таке мова HTML?
2. Яка структура html-документа?
3. Що таке тег і атрибут тегу?
4. Назвіть кілька тегів форматування тексту.
5. Із чого складається код кольору?
6. Назвіть теги маркованого та нумерованого
списків.

30

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 30

Similar to 30 (19)

More from maksi100

More from maksi100 (17)

Recently uploaded

Recently uploaded (10)

30