Img - Html тег для вставки картинки (Src), вирівнювання і обтікання її текстом (align), а так само завдання фону (background)

1. Використання тега Img і його атрибутів Src, Width і Height
2. Як вставити картинку з посиланням, призначення Alt і Title в Img?
3. Обтікання картинки текстом в Html - атрибут Align тега Img
4. Background - як зробити фон для сайту в чистому Html

Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Про те, які саме формати растрової графіки (Gif, Png, Jpg) і в яких випадках краще за все буде використовувати для вставки картинок на сторінки свого сайту, ми докладно встигли поговорити з статті, посилання на яку наведено трохи вище.

Сьогодні ж ми детально розглянемо всі аспекти використання тега Img для вставки зображень, подивимося як задати обтікання фотографії текстом в Html коді, дізнаємося як використовувати зображення в якості фону для сайту, як змінювати їх розмір і задавати вирівнювання (по центру, вліво і вправо).

Використання тега Img і його атрибутів Src, Width і Height

Отже, давайте подивимося, як можна використовувати графіку на своєму сайті. По-перше, це можливість вставки зображення як елемента (об'єкта) в Html код сторінки. Якраз саме така вставка здійснюється за допомогою Img, який є особливим - рядковим елементом з заміщаються контентом, до яких відносяться лише чотири елемента мови гіпертекстової розмітки , Одні з яких ми вже згадали, а три інших - Iframe (Сучасний варіант використання фреймів), Object і Embed (Для вставки відео і іншого медіа контенту).

Поводиться він в точності як рядковий елемент, але ось всередині нього відображається сторонній зовнішній контент (фото в разі Img або відео і флеш в разі Object і Embed). Будь-який з цих чотирьох елементів має на увазі наявність зовнішнього файлу, який буде довантажувати ось в цю саму область, задану в ньому атрибутами.

Для вказівки шляху до графічного файлу, який повинен довантажуватися на сторінку, служить спеціальний атрибут Src.

<Img src = "путь_до_файла_ізображенія">

Браузер користувача при розборі Html коду сторінки, як тільки зустріне в ньому тег Img, відразу ж створює область для сатиричного елемента, в яку завантажується зовнішній файл (наприклад, фотографія). Шлях до файлу браузер бере з вмісту Src.

Коли зображення починає завантажуватися з вашого сервера на комп'ютер користувача, браузер визначає справжні розміри цієї картинки і розсовує на ці самі розміри ту малу область, яку створив при виявленні в коді елемента ІМГ.

Якщо ви хочете, щоб браузер відразу ж виділяв для цього елемента область потрібного розміру, а не потім її зраджував при отриманні даних про розмір завантажуваного зображення, то ви повинні буде обов'язково вказати атрибути Width і Height.

<Img src = "шлях до файлу зображення" width = "ширина картинки в пікселях" height = "висота зображення в пікселях">

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

На сервер заливається графічний файл великого розміру і вагою в кілька мегабайт (відразу після фотографування без обробки) і прописується до нього шлях в Src. А для того, щоб зображення не займало б весь екран, в тег Img дописують Width і Height з прийнятними розмірами по ширині і висоті.

І що виходить в результаті? Відвідувач такого сайту спостерігає гнітюче повільну подгрузку зображення в порівняно малу область, задану в згаданих атрибутах (кілька мегабайт ваги вписуються в розмір 300 на 400 пікселів).

Тому відразу ж робіть картинки для викладання в Веб того самого розміру, який ви будете показувати на сайті і прописувати в Width і Height тега Img. Поважайте своїх користувачів і не витрачайте даремно їх трафік (особливо мобільний). стиснути фото можна, наприклад, в FastStone Image Viewer або будь-якому іншому графічному ректора, наприклад, онлайн фотошопі Пікслр .

До речі, крім завчасного зменшення розміру зображень для вставки на сторінки сайту, слід з усією ретельністю підійти ще й до оптимізації ваги. Часом можна без втрати якості добитися кратного підвищення ваги графічних файлів, що призведе до набагато більш швидкої їх завантаженні і зниження навантаження на сервер хостингу. Можете для цієї мети скористатися дуже зручним і ефективним онлайн сервісом по оптимізації зображень .

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

Тобто Src може містити, наприклад, такі записи:

<Img src = "названіе_файла"> <img src = "папка / названіе_файла"> <img src = "https://ktonanovenkogo.ru/папка/название_файла">

У першому випадку, графічний файл повинен лежати в тій же папці, що і файл вашої веб сторінки (в разі використання вами CMS , Перші два варіанти вам навряд чи підійдуть, хоча для завдання фонового зображення в CSS це дуже зручно). По-другому випадку, графіка лежить в теці щодо файлу вашої сторінки, ну, а в третьому випадку, в Src вказано абсолютний шлях до файлу з картинкою.

І тут слід звернути увагу, що картинка, яку ви вставляєте в Html код, може лежати абсолютно на будь-якому сервері. Тобто ви можете, припустимо, скопіювати шлях до неї на моєму блозі і вставити цей шлях в атрибут Src тега Img на своєму сайті. Все буде чудово працювати, правда, якщо я не забороню подібні дії в .htaccess на своєму сервері, але це вже окрема пісня ( погуглити на тему " Захист від хотлінк »).

Взагалі, за правилами мови Html, на вашому сервері зобов'язаний перебувати тільки сам документ (web сторінка), а всі інші документи і файли (графіка, відео, скрипти, стилі), які будуть довантажуватися разом з ним, можуть перебувати на різних серверах.

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

Як вставити картинку з посиланням, призначення Alt і Title в Img?

Якщо Img за своєю суттю є рядковим елементом, то його можна просто вважати великою літерою, а значить нам ніщо не заважає зробити зображення посиланням, уклавши цей тег всередину гіперпосилання. Взагалі, про це я вже досить докладно писав у недавній статті про створення гіперпосилання в Html коді , Але трохи повторитися буде не гріх.

<a href="https://ktonanovenkogo.ru"> <img src = "https://ktonanovenkogo.ru/image/webcamxp.png"> </a>

У браузері IE навколо картинки, яку ви зробили посиланням, з'явиться рамочка шириною в три пікселя. Щоб її прибрати, вам потрібно буде додати в тег Img атрибут Border зі значенням нуль:

<a href="https://ktonanovenkogo.ru"> <img border = 0 src = "https://ktonanovenkogo.ru/image/webcamxp.png"> </a>

Для всіх тих випадків, коли графічний файл з яких-небудь причин не може довантажити разом з Html документом (шлях до нього прописаний не вірно або ж ще щось), передбачений спеціальний атрибут Alt.

Alt виконує роль альтернативного подання зображення. Що відбувається в тому випадку, коли графіка не вантажиться? Браузер все одно, виявивши в коді елемент Img, формує під нього область, яка в залежності від використовуваного користувачем браузера може або залишатися заданого розміру, або схлопуватися.

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

<Img src = "шлях до файлу зображення" width = "545" height = "50">

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

Робиться це за допомогою спеціального атрибута Title, який в нашому випадку вставляється в Img. Він по суті є спливаючій підказкою і його можна використовувати практично для всіх видимих ​​на сторінці елементах Html коду, коли вам потрібно щось додатково пояснити.

Раніше, до речі, до підказці приводило і додавання тексту Alt, але зараз від такої поведінки відмовляються і цей атрибут тепер в основному виконує тільки роль альтернативного тексту, а Title використовується виключно для спливаючих підказок.

<Img src = "https://ktonanovenkogo.ru/image/rss_no_drop1.pngя" height = "71" width = "90" alt = "" title = "">

Насправді вміст Alt і Title тега Img не тільки служить для зручності відвідувачів вашого сайту, але і може надавати дуже істотну роль на успішність просування вашого проекту.

Для цього потрібно не забувати вживати в них ключові слова , Як я про це неодноразово писав, наприклад, в статті про просування сайту своїми силами або ж в публікації про те, як розкрутити сайт самому .

Ключові слова в Alt і Title (особливо в Alt) можуть помітно поліпшити ранжування вашого сайту , А так в сервісах пошуку по зображеннях (картинкам) Яндекса або Google . Однак з цим потрібно бути обережним, бо досить легко можна потрапити під фільтр за спам від Яндекса або Гугла .

Обтікання картинки текстом в Html - атрибут Align тега Img

Тепер давайте поговоримо про вирівнювання вставлених зображень в Html коді. У всіх чотирьох малих елементів з заміщаються контентом (Img, Iframe, Object і Embed) є можливість вирівнювання за допомогою атрибута Align. Але він взагалі-то застосовується тільки для блокових елементів, а згадані теги - рядкові.

Тому деякі значення Align для Img (наприклад, завдання обтікання картинки текстом) означатимуть зовсім інше, ніж при використанні цього ж атрибута в блокових елементах ( параграфах P, заголовках H1-H6 і т.п.).

Взагалі, вирівнювання картинок за допомогою Align при використанні в Img можна розділити на дві групи.

Отже, що ж відбувається, коли ми вставляємо графічний файл в текст документа? Фактично він встає як одна велика буква:

За замовчуванням використовується вирівнювання по нижньому краю, тобто додавання в елемент Img атрибута align = "bottom" нічого не змінить. Але зате можна спробувати задати вирівнювання картинки по верхньому краю, додавши в елемент align = "top":

<Img src = "https://ktonanovenkogo.ru/image/rss_no_drop1.png" align = "top">

У цьому випадку відбулося вирівнювання тексту в рядку, де розташована фотографія, по верхньому її краю.

Можливо ще одне значення цього атрибута align = "middle":

<Img src = "https://ktonanovenkogo.ru/image/rss_no_drop1.png" align = "middle">

В цьому випадку текст в рядку з картинкою буде вирівнюватися по середині цього самого малюнка.

Але крім вирівнювання по вертикалі в Html передбачено і обтікання картинок текстом, для чого використовуються значення - Left і Right. Ця група значень атрибута Align сильно відрізняється від попередньої.

При використанні значень Left і Right всередині елемента Img ми добиваємося, так званого, обтікання картинки текстом, яке задається в Html коді. У цьому випадку малюнок стає плаваючим елементом (аналог Float в CSS) і текст починає її обтікати.

Наприклад, при align = "left" ми отримаємо такий результат:

<Img src = "https://ktonanovenkogo.ru/image/rss_no_drop1.png" align = "left">

Значення Left в Img означає, що фото плаває в ліву сторону, а текст її обтікає справа. У разі align = "right" картинка буде плавати в праву сторону, а текст її буде обтікати зліва:

<Img src = "https://ktonanovenkogo.ru/image/rss_no_drop1.png" align = "right">

При завданні обтікання зображення текстом є один нюанс - текст дуже близько розташовується від нього, що створює неприємний оці ефект прилипання. Дану проблему зовсім легко вирішити за допомогою CSS властивостей padding або margin , Але і в чистому Html існує своє рішення.

Для цього можна використовувати атрибути елемента Img - Hspace і Vspace. За допомогою них віджимається оточуючий текст від зображення. Hspace задає відступи зліва і праворуч від зображення до оточуючого його тексту, а Vspace - зверху і знизу. Відступи задаються в пікселах , Наприклад:

<Img src = "https://ktonanovenkogo.ru/image/rss_no_drop1.png" align = "left" hspace = "30" vspace = "30">

Background - як зробити фон для сайту в чистому Html

Графічні файли можна використовувати не тільки як елементи коду сторінки, а й як заливку в якості її фону. взагалі, фон для сайту в мові Html можна задати або кольором, або за допомогою фонових зображень. Ну, а в сучасної верстці з використанням властивостей CSS , Фонові картинки (background image) є одним з основних елементів, бо ніяких оформлювальних елементів, вставлених за допомогою Img на сторінках сучасних сайтів, немає.

Тому фонові зображення грають дуже важливу роль в сучасній верстці з використанням CSS (поговоримо про це в наведеній статті). Поки ж ми розглянемо, як це все робиться в чистому Html за допомогою атрибута Background елемента Body і тегів таблиці Table , Показує шлях до графічного файлу, яким буде залита web сторінка або ж таблиця (або її окремий осередок).

Наприклад, додавши в Body атрибут Background такого вигляду:

<Body background = "https://ktonanovenkogo.ru/image/bgkletka.gif">

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

Фонове зображення, починаючи з лівого верхнього кута, повторюється відразу по двох осях (абсцис і ординат). Подальше зістиковується з попереднім і т.д. До речі, якщо ви захочете залити фон сторінки або таблиці одним кольором, то для цього вам потрібно використовувати вже не Background, а атрибут bgcolor, як значення якого ви може вставити код кольору , Наприклад, так:

<Body bgcolor = "# f0f8ff">

То отримаємо наступний колір фону заданий через bgcolor:

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

Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru

Збірки по темі

Використовую для заробітку