Кольорове оформлення сторінок засобами HTML

Опис тегів тіла документа починається з тега ВОDУ. На відміну від тега НЕАD, тег ВОDУ має атрибути, за допомогою яких можна задавати колір фону, посилань, тексту.

Атрибут ВАСКGRОUND визначає колір фонового рисунку, на якому відображається текст документа. Так, якщо джерелом для фону HTML– документа є графічний файл image.gif, то у відкриваючому тегі тіла BODY з'являється відповідний атрибут:

<ВОDУ ВАСКGRОUND="image.gif">

Як видно з цього прикладу, як значення даного атрибута використовується адреса в скороченій формі URL. У даному випадку – це адреса локального файлу.

У таблиці 6.2 наведені наступні атрибути тегу BODY.

Таблиця 6.2

Атрибути тегу BODY

Атрибут	Значення
ВGСОLОR=#FFFFFF	Колір тіла
ТЕХТ=#0000FF	Колір тексту
VLINK =#FF0000	Колір пройдених гіпертекстових посилань
LINK =#00FF00	Колір гіпертекстового посилання

У даній таблиці рядок #ХХХХХХ визначає колір у термінах RGB у шістнадцятковому представленні. Також є можливість задавати кольори за назвою. Далі в таблиці 6.3 приведені назви кольорів, визначені в стандарті HTML 4 і відповідні їм RGB–коди. Відзначимо, що багато сучасних браузерів виходять за рамки стандартів і підтримують набагато більше назв кольорів.

Таблиця 6.3

Назви та шістнадцяткові коди кольорів

Назва	Код	Назва	Код
Aqua	#00FFFF	Navy	#000080
Black	#000000	Olive	#808000
Blue	#0000FF	Purple	#800080
Fuchsia	#FF00FF	Red	#FF0000
Gray	#808080	Silver	#C0C0C0
Green	#008000	Teal	#008080
Lime	#00FF00	White	#FFFFFF
Maroon	#800000	Yellow	#FFFF00

Значення атрибутів у таблиці 6.2 визначають колір тексту як синій, тіла – білий, пройденого посилання – червоний, а нового посилання – зелений.

Застосувуються також атрибути LEFTMARGIN =n і ТОРМАRGІ =n у тегі <ВОDУ>. Атрибут LEFTMARGIN= задає ліве поле для всієї сторінки. ТОРМАRGІ= визначає верхнє поле. Число n –показує ширину полів в пікселах. Наприклад, тег <ВОDУ LEFTMARGIN ="40"> створить на всій сторінці ліве поле шириною 40 пікселів. При n рівному 0 – ліве поле відсутнє.

Приклад 8. Покращіть кольорове оформлення сторінок. До кожної сторінки додайте дату останнього оновлення сторінки та інформацію про студента виконавця (курс, форма навчання, група, ПІБ).

8. Вирівнювання елементів. За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у клітинках таблиці, броузер вирівнює до лівого краю екрана чи клітинки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати до центру екрана чи до правого краю. Таблиці вирівнюють відносно екрана або відносно тексту, який її облямовує. Текст у клітинках таблиці вирівнюють до центру чи до країв у горизонтальному чи вертикальному напрямках. Для цього до об'єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або в тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" — зліва, "center" — до центру, "right" — справа, "top" — угорі, "middle" — посередині, "bottom" — унизу. Останні три значення може мати також параметр VALIGN.

Для вдалого розташування таблиць чи рисунків варто поекспери-ментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселях або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці півсторінки у горизонтальному напрямку.

Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії дає червону полосу товщиною З0 пікселів.

Довідка. Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега <PRE>...</PRE>. Текст у середині цього тега оформляють засобами табуляції. Броузер такий текст переформатовувати не буде.

Завдання 5. У файлі file4.htm створіть таблицю з оцінками. Новий файл назвіть file5.htm. Перегляньте його у броузері. Поекспериментуйте з

9. Вставляння графічних і відеофайлів. Графічні зображення (фотографії, картинки, піктограми тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на Web-сторінці за допомогою команди, що описується одинарним тегом <IMG> з параметрами:

Обов'язковим є лише перший параметр SRC. Альтернативний текст — це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою в пікселях або відсотках.

Зображення можна подати в рамці (що рекомендують робити), якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER=" товщина рамки в пікселях".

Праворуч і ліворуч від картинки, яку облямовує текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".

За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки:

<IMG DYNSRC=" адреса відео-файлу">.

10. Вставляння звуку і відеозображення. Важливо пам'ятати, що звукові файли мають розширення назв au, wav, mid, midi, ra, а відеофайли — avi, vivo, mpeg. Щоб вставити звук чи відео, достатньо як значення параметра HREF у тезі Гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад,

Тепер <А HREF="mysound.wav"> послухайте мене (150К) </А>.

Текст " послухайте мене 150K" стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.

Щоб звуковий чи відеоефект повторювався декілька разів, наприклад, 2, у тезі <А> використовують параметр LOOP=2.

Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC = "адреса звукового файлу">. Інший спосіб - використайте тег <EMBED SRС="адреса звукового файлу" > і, окрім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо.

Поняття про динамічні ефекти. Динамічними називаються ефекти, коли графічні зображення на Web-сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацав ня над ними мишею, текст "біжить" уздовж екрана.

Розглянемо ефект біжучого тексту у полосі, що має висоту HEIGHT = "висота в шкселях" і тло BGCOLOR ="Колір тла". Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме:

<MARQUEE BGCOLOR="green" HUGHT = 40> Світлана Світлана</ MARQUEE>

Обидва слова будуть пробігати в полосі справа наліво, заходитимуть за край екрана і з'являтимуться знову справа. Даний тег рекомендують застосовувати до заголовків сторінки.

Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік.

Обмеження кількості проходів, наприклад, числом 5, задається параметром LOOP=5. Полосу можна відцентрувати за допомогою параметрів HSPASE і VSPASE. Швидкість руху задає параметр SCROLLAMOUNT=3, де конкретне значення вибирають з диапазону від 1(повільно) до 10 (швидко).

Завдання 6. Запишіть свій голос за допомогою програми Фонограф у звуковий файл і вставте звук в основну сторінку. Вставте у файл file5.htm гіперпосилання на об’єкти: графічні, звукові та відеофайли, а також у файл file4.htm. Застосуйте гіперпосилання для переходу на початок чи кінець сторінки. Застосуйте тег MARQUEE до одного з заголовків і проекспериментуйте з його параметрами.

Практичне завдання

Вивчите теоретичний матеріал. Виконайте всі приклади, позначивши в тегах <TITLE> номер приклада та свою фамілію.