Включення картинок у веб-сторінку завжди приводить до успішних проектів або просто до гарного і красивого інтерфейсу сайту.

За допомогою якої ж команди можна помістити графічний елемент на html-сторінку?

Усі картинки, фотографічні знімки, ілюстрації, графіки, схеми вставляються в документ за допомогою такого тега, який не вимагає закриваючої частини:

<img src="image.jpg">

Де «image.jpg» - це власне картинка-об’єкт з її іменем і розширенням.

Уся інформація, розташована між лапками є посиланням (тобто, шляхом до картинки).

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

1. Якщо ж картинка лежить у папці, яка лежить у вашій основній папці, то шлях до неї буде виглядати так:

<img src="papka/image.jpg">

2. Якщо картинка лежить на рівень вище, а сама сторінка перебуває в піддиректорії, то посилання буде іншим:

<img src="../image.jpg"> 3. Якщо картинка розміщена на іншому сайті, то шлях прописується повністю:

<img src="http: // www. sait. com. ua / images/image.jpg">

На практиці, для своєї ж зручності, картинку завжди потрібно класти в одну папку з веб-сторінкою і ніякої плутанини не буде.

Також важливо знати, що IMAGE.jpg, image.JPG, image.jpg і IMAGE.JPG - це різні імена файлів і регістр імен завжди потрібно враховувати.

Після вставки картинки виникає питання: що потрібно зробити, аби увесь текст розташовувався поруч із картинкою, а не тільки один його рядок?

Згадаємо про атрибут ALIGN", який відповідає за вирівнювання і використовується з багатьма іншими тегами.

Атрибут «align» є і у картинок:

<img src="image.jpg" align="left">

У такому випадку картинка буде притиснута до лівого краю екрана, а текст буде обтікати її праворуч.

Щоб розмістити картинку праворуч, а текст обтікав її ліворуч, треба прописати Right":

<img src="image.jpg" align="right">

Але це ще не всі параметри. Текст може розташовуватися:

• внизу картинки - <img src="image.jpg" align="bottom">

• посередині - <img src="image.jpg" align="middle">

• вгорі - <img src="image.jpg" align="top">

Крім параметра «ALIGN» для тега < img > є ще кілька атрибутів:

VSPACE - визначає відстань між текстом і малюнком по вертикалі; задається в пікселях.

Наприклад: <img src="image.jpg" vspace="20">, де 20 – це кількість пікселів екрана монітора.

HSPACE - задає відстань між текстом і малюнком по горизонталі. Відстань задається теж у пікселях.

Наприклад: <img src="image.jpg" hspace="30">.

ALT - короткий опис картинки. Якщо навести курсором миші на малюнок і потримати його секунду, то «вискочить» опис картинки (працює тільки в Internet Explorer).

Опис картинкам задавати потрібно (особливо, якщо вони є кнопками), тому що є користувачі, які «блукають» по Інтернету з відключеною графікою.

А без атрибута «ALT» їм не буде видно на що натискати - якщо картинка не відображається, при заданому «alt», можна побачити напис про призначення картинки.

<img src="image.jpg" alt="малюнок">

BORDER – задає в пікселях товщину рамки навколо картинки. <img src="image.jpg" border="4"> 

WIDTH - ширина самої картинки в пікселях. Якщо ширину не задавати, то вона буде дорівнювати реальній ширині картинки.

HEIGHT - висота самої картинки в пікселях. Якщо висоту не задавати, то вона буде дорівнювати реальній висоті картинки.