2.2.1. Вставляємо зображення в Web-сторінку

Зображення вставляються в Web-сторінки за допомогою одинарного тега <IMG>.

Тег <IMG> має наступні параметри:

· src – задає URL-адресу файлу графічного зображення ;

<IMG src=" pic1 . jpg ">

<IMG src="http://www.site. com.ua / pic1 . jpg ">

· width – дозволяє вказати ширину зображення в пікселах;

· height - дозволяє вказати висоту зображення в пікселах;

ПРИМІТКА: Значення параметрів width і height можуть не відповідати реальним розмірам зображення. В цьому випадку Web-браузер виконає перемасштабування. Якщо значення одного з параметрів вказати неправильно, то зображення буде спотворено. Якщо вказати тільки один параметр, то значення другого буде розраховано пропорційно значенню першого.

ПОРАДА: Завжди вказуйте значення параметрів width і height, тому що це дозволить Web-браузеру від форматувати Web-сторінку до завантаження зображень. В іншому випадку завантаження кожного зображення призведе до необхідності провести форматування ще раз, що в свою чергу призведе до переміщення інших елементів Web-сторінки. В результаті картинка у вікні Web-браузера буде смикатися.

· border – задає товщину межі зображення;

· alt – дозволяє задати рядок тексту, який буде виводитися на місці появи зображення до його завантаження або при відключеній графіці, а також при неможливості завантажити зображення. Крім того, при наведенні курсора миші на зображення, текст, вказаний в параметрі alt можна побачити як текст підказки;

· align – дозволяє вказати розташування зображення щодо тексту або інших елементів Web-сторінки. Параметр може приймати такі значення:

· left – зображення вирівнюється по лівому краю, а текст обтікає його з правого боку;

· right - зображення вирівнюється по правому краю, а текст обтікає його з лівого боку;

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

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

· middle – центр зображення вирівнюється по базовій лінії поточного рядка;

· hspace – дозволяє вказати відступ від зображення до тексту по горизонталі;

· vspace - дозволяє вказати відступ від зображення до тексту по вертикалі.

Приклад використання зображення на сторінці розглянемо за допомогою Лістингу 2.5:

Лістинг 2.5. Використання зображень

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<IMG src="pic1.jpg" width="250" height="173" border="2" alt="Веселий песик"> left ">

</BODY>

</HTML>

2.2.2. Використовуємо зображення як фон

Параметр background тега <BODY> дозволяє задати фоновий малюнок для документа.

<BODY background=" pic2.jpg " bgcolor=" blue ">

< H 1> "Тіло" документу </ H 1>

</BODY>

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

2.3. Гіперпосилання

Гіперпосилання дозволяють за допомогою натиснення клавіші мишкі швидко переходити від одного документу до другого. Саме гіперпосилання зв’язали всі Web-сторінки в єдину мережу.