Лекція 10. ГРАФІКА

 

Лекція 10. ГРАФІКА

 

Графіка Web-сторінок може містити як прості зображення, так і складні. Важливим у використанні графіки є не міра її складності, а ефективність у питаннях передавання тієї інформації, яку необхідно надати користувачам.

Горизонтальні лінії

Горизонтальні лінії є простим способом поділу великих текстів або виділення частини документа.

Для розміщення горизонтальної лінії використовується тег <HR> (Horizontal Rule). Internet Explorer підтримує різні атрибути тега <HR>, які дозволяють управляти розміром, товщиною, вирівнюванням, кольором і виглядом тіні від лінії.

Атрибути тега <HR>

WIDTH =pixels|persent               Дозволяє змінити розмір лінії, задавши

його в пікселях або в відсотках від ширини екрана

ALIGH=LEFT|RIGHT|CENTER

Задає вирівнювання частини лінії

(за

 

замовчуванням 1)

 

SIZE=n

 

COLOR=RGB(або назва кольору)

Задає товщину лінії (за замовчуванням 1)

 

Задає колір, яким відображається лінія

 

ПРИКЛАД

Файл у форматі HTML:

<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 і WIDTH. Висота і ширина вимірюються в пікселях.

 

Атрибути тега <IMG SRC=”URL”>

WIDTH =px                       Встановлює ширину зображення (у пікселях)

HIGHT = px                       Встановлює висоту зображення (у пікселях) ALIGN=TOP|MIDDLE|

BOTTOM| LEFT|RIGHT    Контролює розташування тексту

Значення атрибуту ALIGN:

 

TOP                                    Вирівнює текст по верху зображення

 

MIDDLE                             Вирівнює базову лінію тексту по центру зображення

 

BOTTOM                           Вирівнює базову лінію по низу зображення

 

LEFT                                   Розташовує зображення ліворуч,                   дозволяючи                                            тексту

“обтікати” зображення праворуч

 

RIGHT                                Розташовує зображення праворуч, дозволяючи тексту

“обтікати” зображення ліворуч

 

Ефективним для розміщення зображень є застосування атрибутів тега <BR>. Використання тега <BR> в його основному варіанті у тексті, який обтікає зображення, просто розбиває рядок без переривання ефекту обтікання. Щоб перервати рядок і очистити поле праворуч або ліворуч від зображення,

застосовують атрибут СLЕАR.

Атрибут СLЕАR тега <ВR> використовується для того, щоб зупинити у зазначеній точці обтікання текстом об’єкта, а потім продовжити текст у порожній зоні за об’єктом. Текст, який продовжується за об’єктом, вирівнюється у відповідності із значеннями LEFT, RIGHT або АLL атрибуту СLЕАR:

<BR СLЕАR=LЕFТ> - перериває рядок і очищає ліве поле

(текст буде продовжений, починаючи з найближчого порожнього лівого поля);

<BR СLЕАR=RIGHT> - перериває рядок і очищає праве поле (текст буде продовжений, починаючи з найближчого порожнього правого поля);

<BR СLЕАR=АLL> перериває рядок і очищає обидва поля (текст  буде продовжений, як тільки ліве і праве поля виявляться порожніми).

Наприклад, якщо зображення вирівняне ліворуч, а текст обтікає його праворуч, тоді необхідно очистити ліве поле, щоб якийсь інший елемент, який слідує за текстом, не виявився розміщеним праворуч від зображення.

Приклад (текст буде розташований поряд з малюнком; після <BR CLEAR=LEFT> буде очищене ліве поле, і наступний текст буде розташований, починаючи з найближчого порожнього лівого поля):

<IMG SRC=“ім’я файла” ALIGN=LEFT>

На цьому малюнку зображено....

<BR CLEAR=LEFT>

Атрибут ALT тега IMG  визначає текст, який відображається броузером на місці зображення, якщо броузер не може знайти файл із зображенням або включений    у    текстовий    режим.    Текст,    записаний    у    атрибут    ALT,

відображається біля курсору мишки при наведенні її вказівника на малюнок. У

атрибуті, як правило, вказується текст з описом зображення.

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE>

</HEAD>

<BODY>

<H2><P ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </P>

<HR SIZE=8 WIDTH=40% COLOR=RED> </H2>

<IMG  SRC=”MAMAI5.JPG”  WIDTH=200  HIGHT=200  ALIGN=LEFT ALT =”Козак Мамай”>

<P ALIGN= CENTER>Етнографічний довідник </P>

</BODY>

</HTML>



Відображення файлу програмою-браузером:

 


Створення маркованого списку із графічними маркерами

При необхідності для створення маркованого списку можна створити свої власні графічні зображення для використання їх як маркерів.

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Моя перша HTML-сторінка</TITLE>

</HEAD>

<BODY>

<H2><P ALIGN= CENTER>ПОСЕЛЕННЯ, ЖИТЛО, ЗАБУДОВА </P>

<HR SIZE=8 WIDTH=40% COLOR=RED> </H2>

<IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “>

<A HREF=”1.HTM”>

<FONT SIZE=5><B>Типи поселень</B></FONT></A><BR>

Поселення землеробської людності України, які складалися з будівель, пристосованих для життя, різноманітних підсобних занять, утримання свійських тварин та зберігання продуктів, сягають глибини віків.<BR>

<IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “>

<A HREF=”2.HTM”>

<FONT SIZE=5><B> Типи народного житла</B></FONT></A><BR>

В основі типології традиційного сільського житлового комплексу також лежить поділ території України на зони, проте він більш розгалужений і детальніший.

</BODY>

</HTML>

 

Відображення  файла програмою-броузером:

 

 

При використанні графічних маркерів слід звернути увагу на такі особливості:

- текст елементу списка знаходиться ближче до графічного зображення, ніж у звичайному невпорядкованому списку;

- центр графічного зображення не вирівнюється по центру текстового рядка;

- якщо текстовий елемент списку перевищує у довжину один рядок, він не вирівнюється так, щоб другий рядок починався точно під першим – другий і всі наступні рядки починаються під графічним зображенням. Графічне зображення може бути використане як гіперпосилання:

<A  HREF=  “http://www.e-helper.tk”> <IMG  SRC=”адреса графічного файла”></A>