28_matvienko-web
.pdfРОЗДІЛ 5. КОЛІР ФОНУ І ТЕКСТУ
Мета: навчитись застосовувати кольори для оформлення елементів HTML-документа.
При розробці сторінок можна використати теги з атрибутами, які впливають на колір фону і тексту сторінки.
Колір фону і тексту може задаватись шістнадцятковими значеннями RRGGBB (Red, Green, Blue) червоного, зеленого і синього кольорів відповідно або позначеннями кольорів англійською мовою. Яскравість кожної складової вимірюється цілим числом, яке у десятковій системі числення знаходиться у межах від 0 до 255, а в шістнадцятковій може приймати значення від 0 до 9 і від
A до F (00, 01,..., 09, 0A,...,FF). Значення 00 є мінімальним, а FF -
максимальним, наприклад: |
|
|
Червоний |
Red |
#FF0000 |
Зелений |
Green |
#00FF00 |
Синій |
Blue |
#0000FF |
Застосовуючи різні значення інтенсивності червоного, зеленого і синього |
||
кольорів, можна одержати такі відтінки: |
||
darkblue |
|
#00008B |
greenyellow |
|
#ADFF2F |
lightcoral |
|
#F08080 |
tomato |
|
#FF6347 |
У Додатку 2 наведено таблицю англійських назв кольорів і відповідні коди RGB.
Тег <BODY> містить список додаткових параметрів, які управляють використанням фонових зображень і визначають кольори гіпертекстових посилань і тексту.
Атрибути тегу <BODY>
BGCOLOR |
Задає колір фону |
TEXT |
Задає колір тексту |
BACKGROUND |
Визначає зображення, яке використовується як |
фонове
Для визначення кольору фону документа тег <BODY> записується таким чином (атрибуту BGCOLOR можуть бути надані як RGB-коди, так і
безпосередньо назви кольорів англійською мовою):
<BODY BGCOLOR=#FF0000> або
<BODY BGCOLOR=RED> - фон документа буде червоного кольору.
<BODY TEXT=#FF0000> або
<BODY TEXT=RED> - колір тексту в документі буде червоним. Атрибути можуть бути записані одночасно:
<BODY BGCOLOR=RED TEXT=WHITE> - колір фону червоний,
колір тексту - білий.
21
Для зміни кольору абзаца або будь-якого слова в тексті можна скористатись атрибутом COLOR тега <FONT>… </FONT>:
<FONT COLOR=#FF0000>
або
<FONT COLOR= RED >.
Примітка. У випадку, якщо є потреба створити колір, коду і назви якого немає у наведених довідкових матеріалах, можна скористатись будь-яким графічним редактором (в тому числі, і найпростішим - PAINT). У кожному графічному редакторі є палітра для “ змішування кольорів”, де можна дізнатись про інтенсивність трьох складових будь-якого кольору, представлену у десятковій формі. Щоб одержати їх шістнадцяткові значення,
слід скористатись Калькулятором – стандартною програмою Windows.
Для цього необхідно:
-завантажити PAINT;
-увійти в пункт меню Палитра-Изменить палитру -Определить цвет;
-користуючись повзунками, обрати потрібний колір і відтінок;
-завантажити Калькулятор;
-перевести його у розширений режим Вид-Инженерный;
-ввести інтенсивність кольору (наприклад, червоний колір має інтенсивість 226) і перейти на шістнадцяткове числення (режим Hex): у віконці калькулятора буде написано Е2 – це шістнадцяткове значення деяткового 226;
-перейти у десятковий режим – ввести наступний код інтенсивності кольору – перейти у режим Hex і таким чином визначити інтенсивність всіх трьох складових.
Графічне зображення як фон
При необхідності можна використати зображення (графічний файл) як фон для сторінки. Зображення, використане як фон, як мозаїка, багаторазово повторюється в робочому вікні і заповнює його.
WWW-броузери підтримують обмежену кількість форматів файлів для вбудованих зображень, і не всі броузери можуть відображати кожен з цих форматів у вікні HTML-документа. Два найбільш популярних формати, які підтримуються Internet Explorer і більшістю інших броузерів – формати GIF і JPEG (графічні файли у цих форматах мають розширення .GIF і .JPG).
Графічний формат GIF - найбільш популярний формат включення вбудованих зображень у WWW-сторінки, оскільки він підтримується всіма графічними броузерами. Файли у цьому форматі можуть містити максимум 256 кольорів. Це також єдиний формат, який підтримує прозорість кольору і дозволяє стискання без втрати якості. Формат широко застосовується для створення різних елементів Web-сторінок: кнопки, іконки, банери1, анімаційні
1 Банер (від англ.banner) - рекламне зображення на Web-сторінці, яке виконує роль гіперпосилання на ресурс Інтернет, який рекламується.
22
зображення та інші швидкозавантажувані зображення із низьким кольоровідображенням.
Формат JPEG був розроблений як засіб для стискання зображень з палітрою на 16,7 млн. можливих кольорів. Можливість роботи з повноцінною палітрою обумовлює перевагу JPEG над GIF при демонстрації сканованих фотографій, картин, малюнків та інших зображень. При стисканні файла відчуваються втрати якості зображення. Великий розмір файлів обумовлює їх повільне завантаження на Web-сторінку.
Для використання зображення як фону необхідно вказати шлях до файла на диску, у якому знаходиться зображення. Наприклад, зображення знаходиться у файлі 008.gif у папці IMG на диску С:. В цьому випадку тег <BODY> з атрибутом встановлення фонового зображення буде записаний таким чином:
<BODY BACKGROUND=”C:/IMG/008.GIF”>.
У випадку, якщо файл зображення знаходиться у тій же папці, що і HTML-документ, шлях до файла можна не вказувати, просто вказати його ім’я (як у наведеному нижче прикладі).
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY BACKGROUND=”008.gif”> </BODY >
</HTML>
23
Відображення файла програмою-броузером:
Завдання для самостійної роботи
1.Встановити у HTML-документі блакитний колір фону і жовтий колір тексту.
2.У HTML-документі назву документа виконати зеленим кольором, а найбільш інформативні слова виділити синім кольором.
3.Встановити фонове зображення і розмістити на ньому текстову інформацію шрифтом відповідного кольору.
Запитання для самоперевірки
1.Який атрибут використовується для встановлення фонового зображення?
2.Який атрибут задає колір фону сторінки?
3.Який атрибут задає колір тексту у всьому тілі документа?
4.За допомогою якого атрибута встановлюється колір шрифту? Дати пояснення застосування RGB.
5.Чи можна використовувати одночасно атрибути BGCOLOR та
BACKGROUND?
6. Файли яких форматів застосовуються у вигляді графічних зображень у Web-документах?За допомогою якого атрибута встановлюється колір шрифту? Дати пояснення застосування RGB.
24
РОЗДІЛ 6. СТИЛІ ЗАГОЛОВКІВ
Мета: опанувати основні стилі заголовків, що використовуються в HTML-документах.
Функції заголовків
Рубрикація – це система заголовків видання й позначуваних ними підрозділів (рубрик), яка виражає логічний чи інший зв`язок і супідрядність частин тексту.
Завдяки різноманітним видавничо-оформительським прийомам (різному розміщенню заголовків відносно тексту) і художньо-поліграфічним засобам (написанню і розміру шрифту) читач бачить, який заголовок головний, а який підпорядкований, а також які заголовки і підрозділи однакові за рівнем. Це допомагає читачеві вільно орієнтуватись в структурі видання і сприймати значення кожного заголовка. Заголовки організовують, спрямовують і полегшують читання, посилюють довідкову функцію публікації.
Рубрикація – це така система заголовків, у якій заголовки різної значущості посідають різні щаблі (від вищого через проміжні до нижчого). Термін “ щабель” умовно позначає значущість заголовка: на першому, верхньому, щаблі стоять заголовки найвищої значущості, на другому, наступному - заголовки, значущість яких менша за значущість заголовків першого щабля на один крок і так далі.
Заголовки характеризуються такими ознаками:
1.Міра змістовності, склад і форма заголовка.
2.Місце заголовка на сторінці відносно основного тексту.
3.Взаємодія заголовка з текстом.
4.Характер частини тексту, позначеної заголовком.
Мова HTML використовує шість стилів заголовків для виділення тексту. Стилі нумеруються від 1 до 6, причому розмір шрифту заголовку першого стилю є найбільшим.
Стандарт мови HTML нараховує 11 атрибутів тега заголовка, але не всі вони реалізовані у більшості програм-броузерів. Розглянемо тільки атрибут АLIGN, який дозволяє вирівнювати текст за правою, лівою межею або по центру. За замовчуванням1 текст вирівнюється за лівою межею. Даний атрибут застосовується також до графіки і таблиць.
Значення атрибута АLIGN такі ж, як і для тегу розбиття тексту на абзаци
<p> (див. Розділ 4).
Основні стилі заголовків
<Hn>…</Hn>, де n – номер стилю від 1 до 6 - виділяє текст різними стилями
ПРИКЛАД
1 “ За замовчуванням” – наперед задане значення, яке застосовується, поки користувач не зминить його на інше.
25
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </H1> <H2 ALIGN=CENTER>ЕТНОГРАФІЧНИЙ ДОВІДНИК</H2> <H3 ALIGN=RIGHT>ТРАДИЦІЙНЕ ЖИТЛО</H3> <H4>НАРОДНІ ЗАНЯТТЯ</H4>
<H5 ALIGN=RIGHT>УКРАЇНСЬКА КУХНЯ</H5> <H6>НАЦІОНАЛЬНЕ ВБРАННЯ</H6>
</BODY>
</HTML>
Відображення файла програмою-броузером:
Завдання для самостійної роботи
1.Створити титульну сторінку. Відпрацювати стилі заголовків на
сторінці.
2.До кожного із стилів застосувати атрибут ALIGN з різними значеннями.
3.Задати для створених стилів заголовків різні фізичні стилі.
Запитання для самоперевірки
1.Які теги використовуються для встановлення різних стилів
заголовку?
2.Чим відрізняються різні стилі заголовка?
3.Чи можна встановлювати одночасно стиль заголовка і певний фізичний стиль?
26
РОЗДІЛ 7. СПИСКИ
Мета: опанувати методи створення різних видів списків у HTMLдокументі.
Списки надають зручну можливість представлення інформації в документах.
Елементи списків всіх типів мають відступ від лівої межі екрана.
Тип |
Теги списку Теги елементів |
||
Нумерований |
<OL>…</OL> |
<LI>…</LI> - |
елемент списку |
Маркірований |
<UL>…</UL> |
<LI>…</LI> - |
елемент списку |
Список описів |
<DL>…</DL> |
<DD>…</DD> - |
назва терміну |
<DT>…</DT>- визначення терміну
За замовчуванням елементи впорядкованого списку нумеруються цілими числами, починаючи з 1. До тега нумерованого списку <OL> існує атрибут TYPE. Встановлюючи TYPE рівним “ А”, “ а”, “ І”, “ і”, можна змінити схему нумерації на великі літери, малі літери, великі або малі римські цифри відповідно.
Атрибут START дозволяє задавати початкове значення для нумерації (за замовчуванням START=1, але можна вказати будь-яке додатне число).
Атрибут TYPE тега <UL> дозволяє змінювати вигляд маркера TYPE=disk - маркер має вигляд диска;
TYPE=circle - маркер має вигляд кола; TYPE=square - маркер має вигляд квадрата.
ПРИКЛАД (нумерований список)
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<P ALIGN=CENTER>
<B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник </I><BR>
<OL>
<LI>ТРАДИЦІЙНЕ ЖИТЛО</LI> <LI>НАРОДНІ ЗАНЯТТЯ</LI> <LI>УКРАЇНСЬКА КУХНЯ</LI> <LI>НАЦІОНАЛЬНЕ ВБРАННЯ</LI>
</OL>
</P>
</BODY>
27
</HTML>
Відображення файла програмою-броузером:
ПРИКЛАД (маркірований список)
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </H1><BR> <H2 ALIGN=CENTER>Етнографічний довідник </H2><BR>
<P ALIGN= CENTER><B>УКРАЇНСЬКА КУХНЯ </B> </P>
<UL>
<LI>ПОВСЯКДЕННА Й СВЯТКОВА ЇЖА ТА НАПОЇ</LI> <LI>РЕЖИМ І СЕЗОННІСТЬ ХАРЧУВАННЯ, ХАРЧОВІ ЗАБОРОНИ
</LI>
<LI>ОБРЯДОВА ЇЖА</LI> </UL>
</BODY>
</HTML>
Відображення файла програмою-броузером:
ПРИКЛАД (список описів):
28
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H1 ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА
</H1><BR>
<H2 ALIGN=CENTER>Етнографічний довідник</H2><BR> <P ALIGN=CENTER><B>ОБРЯДОВА ЇЖА</B> </P>
<DL>
<DT><B>ПАСКА</B></DT>
<DD>весняний обрядовий хліб, який готували до Великодня. Дуже здобне вчинене тісто на яйцях, маслі, сметані, олії, цукрі добре вимішували і ставили у тепле місце сходити.</DD>
<DT><B>КУТЯ</B>
<DD>подається на стіл у Святий вечір, у переддень Різдва. На Правобережжі кутю готували з пшениці, а на сході - з ячменю і заправляли тертим маком, горіхами, медом і узваром. </DD>
</DL>
</BODY>
</HTML>
Відображення файла програмою-броузером:
Завдання для самостійної роботи
Використовуючи наведений нижче перелік: Старовинна обрядовість Сімейні звичаї та обряди
Свята й обряди календарного циклу Трудова обрядовість Свята громадських об’єднань Обрядова їжа
29
необхідно:
1.Подати інформацію у вигляді нумерованого списку. Перелік повинен починатись з літери D.
2.Подати інформацію у вигляді нумерованого списку, починаючи з
номера 3.
3.Подати інформацію у вигляді списку описів, причому фізичним стилем обрати підкреслення.
Приклад для списку описів:
ЗЕЛЕНІ СВЯТА – українська назва християнського свята Трійці, що відзначається на 50-й день після Паски. Троїцько-русальна обрядовість знаменувала завершення весняного і початок літнього календарного циклу. В основі її лежали культ рослинності, магія закликання майбутнього врожаю.
4. Представити інформацію у вигляді списку з комбінованою нумерацією , наприклад:
I.ТРАДИЦІЙНЕ ЖИТЛО
A.Поселення, житло, забудова
B.Житло в духовному світі селянина II. НАРОДНІ ЗАНЯТТЯ
A.Види господарської діяльності
B.Ремесла і промисли
1.Гончарство
2.Ковальство
C.Господарське начиння
Запитання для самоперевірки
1.Які існують види списків?
2.Яку схему можна обрати для нумерованого списку?
3.Чи можна вставити до нумерованого списку маркірований?
4.Який атрибут використовується для зміни схеми нумерації?
30