ширина вимірюються в пікселях.
Атрибути тега <IMG SRC= “URL”>
WIGTH = px Встановлює ширину зображення (у пікселях)
HIGTH = px Встановлює висоту зображення (у пікселях)
ALIGN = TOP|MIDDLE
BOTTOM|LEFT|RIGHT контролює розташування тексту.
Значення атрибуту ALIGN:
TOP Вирівнює текст по верху зображення.
MIDDLE Вирівнює базову лінію тексту по центру зображення.
BOTTOM Вирівнює базову лінію по низу зображення.
LEFT Розташовує зображення ліворуч, дозволяючи тексту обтікати зображення праворуч.
RIGHT Розташовує зображення праворуч, дозволяючи тексту обтікати зображення ліворуч.
Ефективним для розміщення зображень є застосування атрибутів тега <BR>. Використання тега <BR>в основному його варіанті у тексті, який обтікає зображення, просто розбиває рядок без переривання ефекту обтікання. Щоб перервати рядок і очистити поле праворуч або ліворуч від зображення, застосовують атрибут CLEAR.
Атрибут <CLEAR> тега <BR> використовується для того, щоб зупинити у зазначеній точці обтікання текстом об’єкта, а потім продовжити текст у порожній зоні за об’єктом. Текст , який продовжується за об’єктом, вирівнюється у відповідності зі значенням LEFT, RIGHT або ALL атрибуту CLEAR:
<BR CLEAR=LEFT> - перериває рядок і очищає ліве поле (текст буде продовжений, починаючи з найближчого порожнього лівого поля); <BR CLEAR=RIGHT> - перериває рядок і очищає праве поле (текст буде продовжений, починаючи з найближчого порожнього правого поля); <BR CLEAR=ALL> - перериває рядок і очищає обидва поля (текст буде продовжений як тільки ліве і праве поля виявляться порожніми).
Приклад (текст буде розташований поряд з малюнком, після <BR CLEAR=LEFT> буде очищене ліве полу і наступний текст буде розташований, починаючи з найближчого порожнього лівого поля): <IMG SRC=»ІМ’Я ФАЙЛА» ALIGN=LEFT>
НА ЦЬОМУ МАЛЮНКУ ЗОБРАЖЕНО…. <BR CLEAR=LEFT>
Атрибут ALT тега IMG визначає текст, який відображається броузером на місці зображення, якщо броузер не може знайти файл із зображенням або включений текстовий режим. Текст, записаний у атрибут ALT, відображається біля курсору мишки при наведенні її вказівника на малюнок. У атрибуті, як правило, вказується текст з описом зображення.
Приклад
<HTML> <HEAD>
<TITLE>моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H2><P ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА</P>
<HR SIZE=8 WIDTH=40% COLOR=RED> </H2>
<IMG SRC=”MAM15.JPG” WIDHT=200 HIGTH=200 ALIGN=LEFT ALT=”КОЗАК МАМАЙ”>
<P ALIGN=CENTER>ЕТНОГРАФІЧНИЙ ДОВІДНИК</P>
</BODY> </HTML>
Створення маркірованого списку з графічними маркерами
Приклад
<HTML> <HEAD>
<TITLE>моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H2><P ALIGN=CENTER>Поселення, житло, забудова </P>
<HR SIZE=8 WIDTH=40% COLOR=RED> </H2>
<IMG SRC=”BUT1.JPG” WIDHT=60 ALT=” ”>
<A HREF=”1.HTM”> <FONT SIZE=5>
<B>Типи поселень</B></FONT></A>
<BR>
Поселення української людності, які складалися з будівель, пристосованих до життя, різноманітних підсобних занять, утримання свійських тварин та зберігання продуктів, сягають глибини віків. <BR>
<IMG SRC=”BUT1.JPG” WIDHT=60 ALT=” ”>
<A HREF=”2.HTM”> <FONT SIZE=5><B> Типи народного житла </B></FONT>
</A><BR> В основі типології традиційного сільського житлового комплексу також лежить поділ території України на зони, проте він більш розгалужений і детальніший.
</BODY> </HTML>
При використанні графічних маркерів слід звернути увагу на такі особливості:
текст елементу списку знаходиться ближче до графічного зображення, ніж у звичайному впорядкованому списку;
центр графічного зображення не вирівнюється по центру текстового рядка
якщо текстовий елемент списку перевищує у довжину один рядок, він не вирівнюється так, щоб і другий рядок починався точно під першим – другий і всі наступні рядки починаються під графічним зображенням.
Графічне зображення може бути використане як гіперпосилання:
<A HREF=”http://www.nbuv.gov.ua”> <IMG SRC=”адреса графічного файла”></A>
Хід роботи:
Занести в звіт результати виконання наведених прикладів.
Встановити у HTML-документі блакитний колір фону і жов-тий колір тексту.
У HTML-документі назву документа виконати зеленим коль-ором, а найбільш інформативні слова виділити синім кольо-ром.
Встановити фонове зображення і розмістити на ньому тексто-ву інформацію шрифтом відповідного кольору.
Представити інформацію у вигляді трьох рядків тексту, розміщених один під одним по центру екрана, підкреслених лінією синього кольору розміром 8.
розташувати на сторінці текст і малюнок так, щоб текст (не менше 50 слів) обтікав зображення ліворуч, зеленого кольору, розміром 8 (для парних варіантів), праворуч, червоного, розміру 5 - для непарних.
Вставити малюнок до HTML-документа, зробивши його розмір 50х40 пікселів.
Модифікувати наведений приклад таким чином: після слів «етнографічний довідник» вставити ще один малюнок, вирівнявши його по правій межі, а після першого малюнка очистити ліве поле.
Висновок: На даній лабораторній роботі я опанував технологію використання графічних
зображень при оформленні HTML-документа.
