Лабораторна робота
Тема: Колір фону і тексту. Графічні зображення в HTML-документі.
Мета: Опанувати технологію використання графічних зображень при оформленні HTML-документа.
Теоретичні відомості
Колір фону і тексту може задаватись шістнадцятковими значен-нями RRGGBB (Red, Green, Вlue) червоного, зеленого і синього кольорів відповідно або позначеннями кольорів англійською мовою. Яскравість кожної складової вимірюється цілим числом, яке у де-сятковій системі числення знаходиться у межах від 0 до 255, а в шістнадцятковій може приймати значення від 0 до 9 і від А до F (00, 01,..., 09, ОA,..., FF). Значення 00 є мінімальним, а FF - максималь-ним, наприклад:
Червоний Red #FF0000
Зелений Green #00FF00
Синій Blue #0000FF
Застосовуючи різні значення інтенсивності червоного, зеленого і синього кольорів, можна одержати такі відтінки:
darkblue #00008В
greenyellow #АDFF2F
lightcoral #F08080
tomato #FF6347
Тег <ВОDY> містить список додаткових параметрів, які управ-ляють використанням фонових зображень і визначають кольори гіпертекстових посилань і тексту.
Атрибути тегу <ВОDY>
ВGCOLOR Задає колір фону
ТЕХТ Задає колір тексту
ВАСКGROUND Визначає зображення, яке використовується як фонове
Для визначення кольору фону документа тег <ВОDY> записуєть-ся таким чином (атрибуту BGCOLOR можуть бути надані як RGB-коди, так і безпосередньо назви кольорів англійською мовою):
<ВОDY BGCOLOR=#FF0000> або
<ВОDY ВGCOLOR=RED> - фон документа буде червоного кольору.
<ВODY ТЕХТ=#FF0000> або
<ВODY ТЕХТ=#RED> - колір тексту в документі буде червоним.
Атрибути можуть бути записані одночасно:
<ВODY BGCOLOR=RED ТЕХТ=WHIТЕ> - колір фону черво-ний, колір тексту - білий.
Для зміни кольору абзацу або будь-якого слова в тексті можна скористатись атрибутом СOLOR тега <FONT> ... </FONT>:
<FONT COLOR=#FF0000> або <FONT COLOR= RED >.
Примітка. У випадку, якщо є потреба створити колір, коду і назви якого немає у наведених довідкових матеріалах, можна скористатись будь-яким графічним редактором (в тому числі, і найпростішим -PAINT). У кожному графічному редакторі є палітра для «змішування кольорів», де можна дізнатись про інтенсивність трьох складових будь-якого кольору, представлену у десятковій формі. Щоб одержа-ти їх шістнадияткові значення, слід скористатись Калькулятором -стандартною програмою Windows. Для цього необхідно:
- завантажити PAINT;
- увійти в пункт меню Палитра-Изменить палитру -Определить цвет;
- користуючись повзунками, обрати потрібний колір і відтінок;
- завантажити Калькулятор;
- перевести його у розширений режим Вид-Инженерный;
- ввести інтенсивність кольору (наприклад, червоний колір має інтенсивність 226) і перейти на шістнадцяткове числення (ре-жим Нех); у віконці калькулятора буде написано Е2 - це шістнадцяткове значення деcяткового 226;
перейти у десятковий режим - ввести наступний код інтенсив-ності кольору - перейти у режим Нех і таким чином визначи-ти інтенсивність всіх трьох складових.
ГРАФІЧНЕ ЗОБРАЖЕННЯ ЯК ФОН
При необхідності можна використати зображення (графічний файл) як фон для сторінки. Зображення, використане як фон, як мозаїка, багаторазово повторюється в робочому вікні і заповнює його.
WWW-броузери підтримують обмежену кількість форматів файлів для вбудованих зображень, і не всі броузери можуть відобра-жати кожен з цих форматів у вікні НТМL-документа. Два найбільш популярних формати, які підтримуються Іnternet Explorer і більшістю інших броузерів - формати GIF і JPEG (графічні файли у цих форматах мають розширення .GIF і .JPG).
Графічний формат GIF - найбільш популярний формат вклю-чення вбудованих зображень у WWW-сторінки, оскільки він під-тримується всіма графічними броузерами. Файли у цьому форматі можуть містити максимум 256 кольорів. Це також єдиний формат, який підтримує прозорість кольору і дозволяє стискання без втрати якості. Формат широко застосовується для створення різних еле-ментів Web-сторінок: кнопки, іконки, банери, анімаційні зображен-ня та інші швидкозавантажувані зображення із низьким кольоровідображенням.
Формат JPEG був розроблений як засіб для стискання зображень з палітрою на 16,7 млн. можливих кольорів. Можливість роботи з повноцінною палітрою обумовлює перевагу JPEG над GIF при де-монстрації сканованих фотографій, картин, малюнків та інших зоб-ражень. При стисканні файла відчуваються втрати якості зображен-ня. Великий розмір файлів обумовлює їхнє повільне завантаження на Web-сторінку.
Для використання зображення як фону необхідно вказати шлях до файла на диску, у якому знаходиться зображення. Наприклад, зображення знаходиться у файлі 008.gif у папці ІМG на диску С:. В цьому випадку тег <ВОDY> з атрибутом встановлення фонового зображення буде записаний таким чином:
<ВОDY BACKGROUND=«С:/IМG/008.GIF»>.
У випадку, якщо файл зображення знаходиться у тій же папці, що і НТМL-документ, шлях до файла можна не вказувати, просто вказати його ім'я (як у наведеному нижче прикладі).
ПРИКЛАД
файл у форматі НТМL:
<HTML> <НEAD> <ТІТLЕ>Моя перша НТМL-сторінка</ТІТLЕ> </НЕАD>
<ВОDY ВАСКGROUND=«008.gіf»>
</ВODY > </НТМL>
Горизонтальні лінії. Горизонтальні лінії є простим способом поділу великих текстів або виділення частини документу.
Для розміщення горизонтальної лінії використовується тег <HR> (Horizontal Rule). Internet Explorer підтримує різні атрибути тега <HR> які дозволяють управляти розміром, товщиною, вирівнюванням, кольором і виглядом тіні від лінії.
Атрибути тега <HR>
WIDTH = pixels|persent дозволяє змінити розмір лінійки, задавши його в пікселях або в процентах від ширини екрана.
ALIGN = LEFT|RIGHT|CENTER задає вирівнювання частини лінійки (за замовчуванням 1)
SIZE = n задає товщину лінії
(за замовчуванням 1)
COLOR=RGB (або назва кольору) Задає колір, яким відображається лінія.
Приклад
<HTML> <HEAD> <TITLE>моя перша HTML-сторінка </TITLE> </HEAD>
<BODY>
<H2 ALIGN= CENTER>УКРАЇНСЬКА МИНУВЩИНА </H2>
<HR SIZE= 8 WIDTH= 40% COLOR=RED>
</H2><BR>
<P ALIGN=CENTER>ЕТНОГРАФІЧНИЙ ДОВІДНИК</P>
</BODY> </HTML>
Графічні зображення
Графічні зображення, які демонструються на Web-сторінках зберігаються в окремих файлах. Для вміщення зображення на сторінку використовують тег <IMG SRC=”URL”>, де URL – це адреса файла, який містить графічні дані.
Розташування тексту, який слідує за зображенням, і те, як зображення розташоване на сторінці, контролює атрибут ALIGN. За замовчуванням текст з’являється внизу зображення.
Internet Explorer дозволяє використовувати можливості тега IMG, які надають можливість задавати значення висоти і ширини зображення за допомогою атрибутів HIGHT і WIGHT. Висота і
