1. Тема заняття:Тема заняття:
Оформлення тексту в HTML-Оформлення тексту в HTML-
документі.документі.
Теги управління зовнішнімТеги управління зовнішнім
виглядом HTML-документу.виглядом HTML-документу.
Теги форматування символів.Теги форматування символів.
Мета:Мета: Сформулювати основні принципи оформлення
тексту WEB -сторінок;
• Ознайомити учнів з тегами форматування тексту та тегами
управління зовнішнім виглядом HTML-документуHTML-документу;
• Продемонструвати використання цих команд на конкретних
прикладах оформлення WEB -сторінок;
• Сформувати навички та вміння форматування тексту на
WEB -сторінках;
2. • Форматування тексту засобами HTML
реалізується за допомогою спеціальних символів.
Всі теги форматування тексту використовуються
тільки в розділі <body>і є парними тегами.
Найчастіше використовуються такі теги:
• <b><b> призначений для відображення
тексту напівжирним шрифтом;
• <i><i> призначений для відображення
тексту курсивом;
• <u> призначений для відображення
тексту підкресленим;
3. • <s><s> призначений для відображення тексту
перекресленими символами;
• <sub><sub> призначений для відображення тексту у
вигляді верхнього індексу;
• <sup><sup> призначений для відображення тексту у
вигляді нижнього індексу;
• <font><font> призначений для визначення параметрів
шрифту. За допомогою цього тегу можливо
визначити колір символів, їх розмір та тип
шрифту. Зміна параметрів шрифту відбувається
за допомогою змін параметрів тегу color, size
та face
4. ТегТег <font><font>
•Параметр color.
Дозволяє змінювати
колір символів.
Наприклад:
•Текст зеленого кольору
можна реалізувати так
<font color = “green”>
ЗЕЛЕНИЙ </font>
•Параметр face.
Дозволяє задавати тип
шрифту, яким браузер
буде виводити текст. Для
цього в якості значення
параметру необхідно
вказати назву шрифту.
Наприклад: вивід тексту
шрифтом Arial можна
реалізувати так:
<font face = “Arial”>
ШРИФТ Arial </font>
5. Параметр size.
•Дозволяє визначати розмір символів.
Розмір задається в умовних одиницях від 1
до 7. фактичний розмір умовних одиниць
залежить від характеристик екрану
монітора користувача та налаштувань
браузера. Цифра 1 – найменший символ, 7-
найбільший. Розмір символу при
стандартних налаштуваннях – 3
<font size = Х> СИМВОЛИ В АБСОЛЮНИХ
ВЕЛИЧИНАХ </font>
<font size =± Х> СИМВОЛИ В ВІДНОСНИХ
ВЕЛИЧИНАХ </font>
ТегТег <font><font>
6. Інші теги форматування текстуІнші теги форматування тексту
• <big><big> ТЕКСТТЕКСТ </ big ></ big > - збільшення розміру
шрифту. Розмір шрифту збільшується на
одиницю відносно поточного рівня.
• <small><small> ТЕКСТТЕКСТ </ small ></ small > - зменшення
розміру шрифту. Розмір шрифту зменшується
на одиницю відносно поточного рівня.
• <em><em> ТЕКСТТЕКСТ </em></em> виділення важливих
фрагментів тексту. текст відображається
курсивом.
• <marquee><marquee> ТЕКСТТЕКСТ </marquee></marquee>
створення “рухомого рядка”
7. • Парний тег <nobr><nobr> на відміну від тегу <br><br>
використовується для заборони
переводу рядку
• Тег <p><p> призначений для розділу тексту
веб-сторінки на окремі абзаци. Даний
може використовуватися з
необов'язковим параметром ALIGNALIGN –
задає вирівнювання тексту відносно
країв сторінки, може приймати значення:
• 1) "right" – по правому краю;
• 2) "center" – по центру;
• 3) "left" – по лівому краю (за
замовчуванням);
• 4) "justify" – по ширині сторінки.
9. • Тег <<hrhr>> призначений для виведення в вікні
горизонтальної лінії, до і після якої
вставляються порожні рядки.
ПараметрПараметр ПризначенняПризначення
alignalign Визначення горизонтального
вирівнювання лінії. Можливі значення:
left (по лівому краю) center (по центру)
right (по правому краю). Якщо периметр
align не використаний то застосовується
вимірювання «по центру»
colorcolor Встановлення кольору
noshednoshed Відміняє рельєфність лінії
sizesize Визначає товщину лінії
widthwidth Встановлює довжину лінії
10. Теги форматування заголовків
• Для того, щоб розбити текст на логічні
частини , використовують заголовки
• Мова розмітки гіпертексту підтримує шість
рівнів заголовків документів
<h1> Заголовок 1 рівня </h1>
<h2> Заголовок 2 рівня </h2>
…….
<h6> Заголовок 6 рівня </h6>
12. Всі теги є парними та можуть використовуватися з
необов’язковим параметром alignalign, який служить
для горизонтального вирівнювання тексту
Значення
параметру
Наслідки використання
LeftLeft Текст вирівнюється по лівій
стороні вікна браузера
CentreCentre Текст вирівнюється по центу
вікна браузера
RightRight Текст вирівнюється по правій
стороні вікна браузера
JustifyJustify Текст вирівнюється по ширині
вікна браузера.
13. Практична робота
•Практичне завдання:
•1. Відкрити програму Блокнот
(Пуск/Программы/Стандартные/Блокнот).
•2. Створити HTML-докумет.
•2.1. Назвати документ Wold Wide Web.
•2.2. Задати фон документу жовтий.
•2.3. Створити заголовок 2-го рівня, текст
курсивом, колір червоний, розмістити його
по середині - Всесвітня павутина-
14. •2.4. Вирівнювання по лівому краю, три пробіли,
текст 4-м розміром, колір зелений, напівжирний,
стиль Arial, Web-сторінки зробити курсивом У-
1978- р автор ідеї гіпертексту запропонував її
узагальнити-- зв’язати гіпертекстові документи-
Web-сторінки- по всьому світу. -Відтоді почався-
бурхливий розвиток-Web. -Саме гіпертекст-- є
основою- Web. -Завдяки йому- Web-сторінка
стає інтерактивною
•2.5. Вирівнювання по ширині, три пробіли,
розмір тексту 5, колір синій, стиль Time New
Roman, слово гіпертекст у всіх відмінках
підкреслене Гіпертекст не має ні початку ні
кінця, - він нагадує павутину з- невизначеним
центром.- У цьому полягає важлива
особливість- гіпертексту, - інформація ніяк не
впорядковується,- документи можуть-
зв’язуваться один з одним за допомогою
посилань.
•2.6. Проведіть горизонтальну лінію червоного
кольору, розміру 6 і довжиною 60%, по правому
краю
15. •2.7. По правому краю, текст розміром 4, колір
maroon, стиль Impact, слова оживлення,
перетворення зробити розміром 6, курсивом і
змінити колір на сірий
•Останнім часом з’явилася тенденція до-
„оживлення”- Web-сторінок:- анімації
зображень,- використання біжучих рядків, -
рухомих- піктограм на кнопках, мультиплікації. -
Використовуються такі ефекти- „перетворення”,
- коли курсор миші потрапляє на-- якийсь об’єкт
- - цей- об’єкт змінює свій вигляд
•3. Збережіть файл у папці зі своїм прізвищем
під іменем: zavdan_1.html.
•4. Відкрийте створений файл і передивіться
результат роботи, якщо вас щось не
задовольняє права кнопка миші на тексті Web-
сторінки і виберіть з контекстного меню пункт
Просмотр- HTML-кода або пункт меню Вид.-
Просмотр- HTML-кода та вносимо зміни і ще
раз зберігаємо, а у вікні броузера Internet
Explorer необхідно обновити вашу Web-сторінку
zavdan_1.html, натиснувши кнопку Обновить
16. Домашнє завдання
•Опрацювати конспект
•Оформити власну веб-сторінку на
тему “Моє хобі” з використання
тегів форматування та управляння
зовнішнім виглядом HTML-зовнішнім виглядом HTML-
документудокументу
