Лабораторна робота № 8
Графіка на веб-сторінці
Мета роботи: отримати навики по розміщенню графіки на веб-сторінках, створенню карт зображень
ТЕОРЕТИЧНІ ВІДОМОСТІ
Графіка — це прикраса веб-вузла. Під графікою мають на увазі значки, малюнки, фотографії і карти зображень. При розміщенні графіки на веб-сторінках необхідно стежити за тим, щоб розмір графічних файлів був якомога менше.
Для вставки зображення в текстHTML-документа використовується елемент IMG. Для завдання цього HTML-елемента застосовується одинарний тег <IMG> Атрибути тега <IMG>:
o Src — задає URI зображення;
oAlt — альтернативний текст, який відображається на місці зображення, якщо по яких-небудь причинах само зображення не може бути показане;
o Border — задає товщину межі навколо малюнка в пікселах; o Align — визначає вирівнювання зображення;
o Height — задає висоту зображення в пікселах;
o Width — визначає ширину зображення в пікселах;
oVspace — задає величину вільного простору між зображенням і текстом зверху і знизу
o Hspace — визначає величину вільного простору між зображенням і текстом справа і зліва;
oName дозволяє ідентифікувати зображення так, що на нього можуть посилатися різні сценарії.
Обов'язковим атрибутом тега<IMG> є Scr. Атрибути height і Width використовуються для того, щоб браузер ще до завантаження зображення міг правильно розташувати його в тексті. Також ці атрибути можна застосовувати для примусової зміни (стиснення або збільшення) розміру зображення.
Вирівнювання зображень
За допомогою атрибуту ALIGN можна задати спосіб вирівнювання зображення на веб-сторінці. На мал. 1 перший малюнок вирівняно управо, другий — вліво (лістинг
1)
Лістінг1. Приклад вирівнювання зображень на веб-сторінці |
|
|
||||
<HTML> |
|
|
|
|
|
|
<HEAD><TITLE>PICTURE</TITLE></HEAD> |
|
|
|
|||
<BODY> |
|
|
|
|
|
|
<H1 align=center>Обтікання текстом об'єктів</H1> |
|
|
||||
<IMG SRC="016.jpg" width="200" height="230" align=right> |
|
|||||
<FONT size=5> |
Карти |
зображень |
дозволяють користувачеві |
|||
зв'язувати |
посилання |
на |
інші |
документи |
з |
ок |
частинами зображень.
1
Клацаючи мишею на частинах зображення, так званих активних
областях, користувач |
може |
виконувати |
ті |
або |
інші |
дії, |
||||
переходити до інших документів. |
|
представлення |
графіч |
|||||||
Тег |
<MAP>применяется |
для |
|
|||||||
зображення у вигляді карти з активними областями. активні |
||||||||||
області можна |
ідентифікувати |
по спливаючій підказці, яка |
||||||||
з'являється |
при |
наведенні |
на |
таку |
область |
покаж |
||||
миші.Контейнер, що складається |
з тегов <MAP> |
і |
</MAP>, є |
|||||||
блоком описувачів активних областей.</FONT> |
|
|
|
|||||||
<BR> |
|
|
|
|
|
|
|
|
|
|
<BR> |
|
|
|
|
|
|
|
|
|
|
<BR> |
|
|
|
|
|
|
|
|
|
|
<IMG SRC="017.jpg" width="200" height="230" align=left> |
|
|||||||||
<FONT |
size=5> |
Щоб |
включити |
підтримку |
карти |
зображення, |
||||
необхідно ввести атрибут USEMAP |
в тег IMG: |
|
|
|
||||||
IMG SCR="URL" USEMAP="URL#MAP_NAME" |
|
|
|
|
|
|||||
Даний атрибут указує, в якому місці знаходиться карта
зображення. |
Карта |
зображення |
визначає, якій |
ділянці |
зображення яка URL-адрес відповідає. Карта-зображення може |
||||
знаходитися |
в тому |
ж документі, що |
і зображення, |
або в |
іншому документі. |
|
|
|
|
</BODY> |
|
|
|
|
</HTML> |
|
|
|
|
Мал. 1. Приклад вирівнювання зображень на веб-сторінці
2
На малюнку 2 показаний приклад розміщення чотирьох зображень шириною 140 і висотою 154 пікселів кожне в таблиці (лістинг 2).
Лістинг 2. Приклад створення чотирьох малюнків в таблиці
<HTML>
<HEAD><TITLE>PICTURE</TITLE></HEAD> <BODY BGCOLOR=#A1633D>
<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=0> <TR>
<TD>
<IMG SRC="012.jpg" WIDTH="160" HEIGHT="154"> </TD>
<TD>
<IMG SRC="013.jpg" WIDTH="160" HEIGHT="154"> </TD>
</TR>
<TR>
<TD>
<IMG SRC="014.jpg" WIDTH="160" HEIGHT="154"> </TD>
<TD>
<IMG SRC="017.jpg" WIDTH="160" HEIGHT="154"> </TD>
</TR>
</BODY></HTML>
Мал. 2. Чотири малюнки в таблиці
3