5. Зображення

• Вставка зображення

• Розміри зображення

• Рамка довкола зображення

• Альтернативний текст

• Вирівнювання зображення

• Відступи довкола зображення

• Розбиття зображення на частини

• Вправа

Вставка зображення

Для вставки зображення в html-документ використовується непарний тег <img>, який поміщається в те місце документа, де має бути вставлене зображення. В цього тега є обов'язковий параметр src, значення якого вказує дорогу до потрібного зображення в каталозі вашого сайту.

Наприклад, аби помістити на сторіночку зображення:

в потрібному місці документа поміщається строчка:

<img src="http://www.mysite.com/img/1.png">

Це дає браузеру зрозуміти, що в кореневому каталозі сайту www.mysite.com є підкаталог img, в нім лежить зображення з ім'ям 1.png, яке і потрібно помістити на сторіночці.

Тут ми вказали повну дорогу (або абсолютна адреса) до зображення. А можна вказати відносну адресу зображення:

<img src="img/1.png">

Таку строчку браузер інтерпретує так: у каталозі, де лежить даний html-документ, є підкаталог img, в нім лежить зображення з ім'ям 1.png, яке і потрібно помістити на сторіночці.

А ось приклад вказівки відносної адреси зображення, якщо у вашого сайту складніша структура і попередній приклад не личить:

<img src="../img/1.png">

Таку строчку браузер інтерпретує так: поєднання символів ../ означає, що з каталога, де лежить даний html-документ, потрібно вийти на рівень вгору; а далі як в попередньому прикладі: у тому каталозі, де ми виявилися є підкаталог img, в нім лежить зображення з ім'ям 1.png, яке і потрібно помістити на сторіночці.

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

Розміри зображення

Розмір кожного зображення задається двома параметрами: ширина і висота. В тега <img> є відповідні параметри: width і height. Ці параметри набувають значень в пікселах (px).

Ви можете задати дійсні розміри зображення:

<img src="img/1.png" width="176" height="146">

Це робити необов'язково, але корисно, оскільки трохи прискорює процес завантаження сторіночки браузером (браузеру не доводиться самостійно обчислювати ці величини). Якщо розміри зображення відразу задані в параметрах тега <img>, то під дане зображення буде виділено місце на сторіночці, і структура сторіночки при завантаженні вже не мінятиметься - текст стрибати, наприклад.

А можете збільшити або зменшити зображення, привласнивши параметрам width і height інші значення. Причому, якщо ви хочете пропорційно змінити обоє параметра, досить вказати нове значення лише одному з них, а другий - просто опустити. Браузер обчислить його автоматично.

Наприклад, аби збільшити наше зображення в 1,5 разу, можна написати:

<img src="img/1.png" width="264"> або <img src="img/1.png" width="264" height="219">

Результат буде один:

Ще параметри width і height можуть набувати значень у відсотках. Але! Слід врахувати, що це відсотки від розміру вікна браузеру. В такому разі теж можна вказати лише один параметр, а другий - опустити.

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

<img src="img/1.png" width="50%">

І ми отримаємо: