РОЗМІЧАННЯ ТЕКСТУ ЗАСОБАМИ HTML
Поняття про мову HTML
Текстові редактори мають інструменти для форматування. Як відбувається форматування гіпертексту для відображення у вікні браузера?
Поняття про мову HTML
Щоб браузер потрібним чином відображав дані на вебсторінках, застосовують спеціальні позначки — теги, сукупність яких разом із правилами їх використання називають мовою розмітки гіпертексту.
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це набір тегів та правила їх застосування для створення гіпертекстових документів. HTML не є мовою програмування.
Поняття про мову HTML
Таким чином, вебсторінка сайту являє собою текстовий документ, розмічений тегами HTML для відображення у вікні браузера.
HTML не є мовою програмування.
HTML-документ
HTML-документ (HTML-файл) є текстовим документом, тому створити його можна в будь-якому текстовому редакторі, з яким ви працювали.
Наприклад:
Блокнот
Word
Notepad++
Sublime Text
HTML-документ
Тег — це позначка (мітка) мови HTML, записана в кутових дужках <>, яку опрацьовує браузер.
HTML-документ
Базову структуру HTML-документа визначають такі теги:
<html> | Початок документа |
<head> | Початок заголовка – службової частини коду |
<title> | Назва, що виводитиметься на вкладці браузера |
</title> | Кінець назви |
</head> | Кінець заголовка |
<body> | Початок тіла документа, яке виводить браузер |
</body> | Кінець тіла документа |
</html> | Кінець документа |
HTML-документ
Приклад відображення вебсторінки:
Форматування тексту
Текст із тегами можна розташовувати довільно: розбивати на абзаци, виділяти відступи. У HTML-документі розмір і накреслення символів, які відображаються у вікні браузера, визначаються розміткою.
�
Теги мови HTML визначають вигляд і функціонування об’єктів на вебсторінці сайту.
Форматування тексту
Теги бувають
Парними
<Ь»...</Ь> — парний тег накреслення жирний.
Непарними
<br> або <br/> — непарний тег розриву рядка.
Парний тег складається із відкривального тегу і закривального тегу, який починається символом «/». Теги з помилками або такі, що не підтримуються браузером, ігноруються.
Форматування тексту
Розглянемо деякі теги форматування тексту:
<p> | Парний | Новий абзац із відступом |
<h1> | Парний | Заголовок: <h1> - найвищий рівень, <h6> - найнижчий |
<i> | Парний | Курсив |
Форматування тексту
Тег може містити атрибути, значення яких впливають на його дію. Атрибути записуються у відкривальному тегу після його назви.
Значення атрибутів, що містять пропуски, беруть в одинарні або подвійні лапки. Для решти значень це не обов’язково.
Форматування тексту
Застосуємо атрибути text (колір тексту) і bgcolor (колір тла)
Форматування тексту
Розглянемо приклад застосування атрибутів
Марковані та нумеровані списки
Для створення маркованого списку використовують тег:
<ul>...</ul>
З атрибутом type, який задає вигляд маркера:
Марковані та нумеровані списки
Для створення нумерованих списків використовують тег:
<оі>...</оі>
З атрибутами type
Тип нумерації:
"1" — арабські цифри,
"А" — латинські літери,
"І" — римська нумерація тощо)
start — задання початкового номера
в списку арабськими цифрами.
Марковані та нумеровані списки
Елементи списку розмічають тегами
<1і>...</1і>
Питання для самоперевірки�
1. Що таке HTML?
2. Що таке тег? Наведіть приклади парних і непарних тегів.
3. Назвіть складові базової структури HTML-документа.
4. Що таке атрибут тегу?
5. Якими засобами HTML можна змінити колір тла вебсторінки?
6. Які теги використовують для створення списків?
Правила ТБ
Працюємо за комп’ютером
Домашнє завдання
створити шаблон документа html.
Дякую за увагу!