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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

або

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

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

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

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


documentbbyqjev.html
documentbbyqqpd.html
documentbbyqxzl.html
documentbbyrfjt.html
documentbbyrmub.html
Документ Вставка зображення