Лабораторна робота№7
Тема: Графіка
Мета: Опанувати технологію використання графічних зображень при оформленні HTML-документа.
Теоретичні відомості.
Графіка Web-сторінок може містити як прості зображення, так і складні. Важливим у використанні графіки е не міра її складності, а ефективність у питаннях передавання тієї інформації, яку необхідно надати користувачам.
Горизонтальні лінії
Горизонтальні лінії е простим способом поділу великих текстів або виділення частини документа.
Для розміщення горизонтальної лінії використовується тег <HR> (Horizontal Rule). Internet Explorer підтримує різні атрибути тега <HR>, які дозволяють управляти, розміром, товщиною, вирівнюванням, кольором і виглядом тіні від лінії.
Атрибути тега <HR>
WIDTH =pixels|percent Дозволяє змінити розмір лінійки, задавши його в пікселях або в процентах від ширини екрана.
ALIGH*LEFT|RIGHT|CENTER Задає вирівнювання частини лінійки (за замовчуванням 1).
SIZE=n Задає товщину лінії (за замовчуванням 1).
COLOR=RGB(a6o назва кольору) Задає колір, яким відображається лінія.
ПРИКЛАД
Файл у форматі HTML:
<HTML> <HEAD>
< TITLE >Моя перша HTML-сторінка</TITLE>
</HEAD> <BODY>
<H2 ALIGN» CENTER>УKPAЇHCbKA МИНУВЩИНА
<HR SIZE=8 WIDTH=40% COLOR=RED>
</H2><BR>
<P ALIGN= CENTER>Єтнoфaфiчний довідник</Р>
</BODY>
</HTML>
Графічні зображення
Графічні зображення, які демонструються на Web-сторінках, зберігаються в окремих файлах. Для вміщення зображення на сторінку використовують тег <IMG SRC=«URL»>, де URL - адреса файла, який містить графічні дані,
Розташування тексту, який слідує за зображенням, і те, як зображення розташоване на сторінці, контролює атрибут ALIGN. За замовчуванням текст з'являється внизу зображення.
Internet Explorer дозволяє використовувати властивості тега IMG, які надають можливість задавати значення висоти і ширини зображення за допомогою атрибутів HIGHT і WIDTH. Висота і ширина вимірюються в пікселях.
Атрибути тега <IMG SRC=«URL»>
WIDTH =px Встановлює ширину зображення (у пікселях).
HIGНТ = рх Встановлює висоту зображення (у пікселях).
ALIGN=TOP|MIDDLE|BOTTOM| LEFT|RIGHT Контролює розташування тексту.
Значення атрибуту ALIGN
ТОР Вирівнює текст по верху зображення.
MIDDLE Вирівнює базову лінію тексту по центру зображення.
BOTTOM Вирівнює базову лінію по низу зображення.
LEFT Розташовує зображення ліворуч, дозволяючи тексту обтікати зображення праворуч
RIGHT Розташовує зображення праворуч, дозволяючи тексту обтікати зображення ліворуч.
Ефективним для розміщення зображень е застосування атрибутів тега <BR>. Використання тега <BR> в його основному варіанті у тексті, який обтікає зображення, просто розбиває рядок без переривання ефекту обтікання. Щоб перервати рядок і очистити поле праворуч або ліворуч від зображення, застосовують атрибут CLEAR.
Атрибут CLEAR тега <BR> використовується для того, щоб зупинити у зазначеній точці обтікання текстом об'єкта, а потім продовжити текст у порожній зоні за об'єктом. Текст, який продовжується за об'єктом, вирівнюється у відповідності із значеннями LEFT, RIGHT або ALL атрибуту CLEAR:
<BR CLEAR=LEFT> - перериває рядок і очищає ліве поле (текст буде продовжений, починаючи з найближчого порожнього лівого поля);
<BR CLEAR=RIGHT> - перериває рядок і очищає праве поле (текст буде продовжений, починаючи з найближчого порожнього правого поля);
<BR CLEAR=ALL> перериває рядок і очищає обидва поля (текст буде продовжений, як тільки ліве і праве поля виявляться порожніми).
Наприклад, якщо зображення вирівняне ліворуч, а текст обтікає його праворуч, тоді необхідно очистити ліве поле, щоб якийсь інший елемент, який слідує за текстом, не виявився розміщеним праворуч від зображення.