HTML - Урок 8. Робота із зображеннями - тег img

Зображення на веб-сторінках можуть використовуватися двома способами: як фон і як самостійне зображення. Рекомендується використання трьох форматів графіки: JPEG, GIF та PNG. Саме їх підтримують усі браузери, для інших форматів можуть знадобитися спеціальні засоби.

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

У всіх наступних прикладах шляху до зображень будуть прописані, виходячи з того, що зображення знаходяться в папці images, а сторінки в папці site, що знаходиться на тому ж рівні.

Фонові зображення

Фонове їх зображення заповнює собою весь простір елемента якого воно задано. Так, вказавши у тезі атрибут background="fon.gif"малюнком fon.gif буде залито все вікно браузера.

Приклад коду: Результат

Задаючи фоновий малюнок документа, не забувайте вказувати також параметр bgcolor. Це пов'язано з тим, що у користувача може бути відключено завантаження зображень та вашого гарного фонувін не побачить. Тоді браузер і використовуватиме параметр bgcolor.

Вбудовування зображень

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

Приклад коду:

Тег img Інший вміст документа

Результат:

Решта вмісту документа

Погодьтеся, текст поруч із картинкою виглядає не дуже красиво.

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

Цей параметр має кілька значень. Розглянемо їх усі на прикладах.

Приклад коду з параметром align="left"

Тег img з параметром align="left" Картинка зліва, а текст обтікає її праворуч, і цей текст може займати кілька рядків.

Результат:

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

Приклад коду з параметром align="right"

Тег img з параметром align="right" Картинка справа, а текст обтікає її ліворуч і цей текст може займати кілька рядків.

Результат:

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

Приклад коду з параметром align="top"

Тег img з параметром align="top" Верхня межа зображення вирівнюється найвищим елементом поточного рядка. Зображення як би вбудовується в рядок. Якщо зображення велике, то рядок розсувається на цю висоту.

Результат:

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

Приклад коду з параметром align="texttop"

Тег img з параметром align="texttop" Верхня межа зображення вирівнюється по найвищому текстовому елементу поточного рядка (велика літера рядка).

Результат:

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

Приклад коду з параметром align="middle"

Тег img з параметром align="middle" Вирівнювання середини зображення базової лінії поточного рядка.

Результат:

Вирівнювання середини зображення базової лінії поточного рядка. * великий шрифт зроблений для різниці між middle absmiddle

Приклад коду з параметром align="absmiddle"

Тег img з параметром align="absmiddle" Вирівнювання середини зображення посередині поточного рядка.

Результат:

Вирівнювання середини зображення посередині поточного рядка.

Приклад коду з параметром align="bottom"

Тег img з параметром align="bottom" Вирівнювання нижньої межі зображення базової лінії поточного рядка.

Результат:

Вирівнювання нижньої межі зображення базової лінії поточного рядка.

Приклад коду з параметром align="absbottom"

Тег img з параметром align="absbottom" Вирівнювання нижньої межі зображення нижньої межі поточного рядка.

Результат:

Вирівнювання нижньої межі зображення на нижній межі поточного рядка.

Якщо ми хочемо, щоб текст розташовувався під картинкою, необхідно використовувати тег
з параметром clear, який забороняє обтікання. Обтікання можна заборонити з правої сторони(right), з лівого боку (left) та з обох сторін (all).

Приклад коду:

Заборона обтікання картинки
Інші елементи документа

Результат:

Інші елементи документа

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

Будь-яке зображення має розмір, заданий у пікселі. При вбудовуванні зображення на сторінку, можливо, вам доведеться зменшити розмір вихідної картинки.

Для цього у тега існують параметри width- ширина та height- Висота. Вони задаються у пікселах або у відсотках (відсоток від ширини екрана)

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

Приклад коду:

Результат:

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

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

Приклад коду:

Тег img з відступами Решта вмісту документа тепер не прилипає до зображення.

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

Для вставки зображення в 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можуть набувати значень у відсотках. Але! Слід врахувати, що це відсотки розміру вікна браузера. У такому разі також можна вказати лише один параметр, а другий - опустити.

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

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

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

У тега є ще один необов'язковий параметр border. З його допомогою можна встановити товщину рамки навколо зображення. За умовчанням товщина рамки зображення нульова, тобто. рамки немає.

Наприклад, так можна додати до нашої картинки рамку завтовшки 3 пікселі:

Ось що покаже нам браузер:

Колір рамки відповідає кольору тексту на сторінці, заданому за допомогою параметра textтега (Див. Урок 6. Властивості сторінки – параметри тега body), за замовчуванням це чорний колір.

І якщо Ви не бажаєте бачити рамку, примусово надайте параметру borderнульове значення:

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

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

Коли і якщо картинка завантажилася, альтернативний текстбуде показуватися при наведенні курсору миші на цю картинку.

Для додавання альтернативного тексту використовується параметр altтега , якому надається рядкове значення, обов'язково укладене у лапки.

Можна створити багаторядковий альтернативний текст.

Для цього достатньо вставити перенесення рядка в HTML-документі.

текст">

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

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

Нижче наведено таблицю можливих значень параметра align:

Параметри texttop, top, middle, absmiddle, baseline, bottomзадають вирівнювання зображення по вертикалі. А параметри leftі rightдають браузеру зрозуміти, з якого боку текст повинен обтікатизображення.

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

Щоб при обтіканні текст не прилягав до зображення, можна задати відступи навколо зображення. Зробити це можна за допомогою параметрів hspace(відступи ліворуч і праворуч) та vspace(відступи зверху та знизу) тега .

У наступному прикладі показано випадок, коли текст обтікає зображення, при цьому зображення вирівняне по лівому краю і має відступи навколо, рівні 5 пікселів:

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

Ось результат у браузері:

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

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

Трапляються випадки, коли на сторінці необхідно помістити велике зображення. Але тоді сторінка довго завантажуватиметься. Що ж робити?

Один із можливихВаріантів виходу з положення - розрізати зображення на частини та розмістити його на сторінці за допомогою таблиці. A щоб зображення виглядало як ціле, необхідно у таблиці видалити кордон і всі відступи всередині та між осередками. Тобто. присвоїти відповідним параметрам тега

нульові значення: border="0", cellspacing="0", cellpadding="0".

У прикладі ми розбили зображення на 4 частини. Ось як виглядатиме таблиця:

А ось результат:

Всім привіт!!! За цією статтею ви навчитеся вставляти картинку в HTML документ. Це зовсім не складно. Але спочатку я хотів би вам дати кілька рекомендацій з приводу картинок на веб-сторінці.

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

Приступимо.

Як вставити картинку в html?
Так, як я казав – тут складного нічого немає, додайте цей html код.

kartinka - це назва картинки
jpg – це розширення картинки. Розширення може бути gif, png, bmp.

Якщо зображення розміщено в папці images, тоді шлях до картинки буде таким:

images - назва папки, де лежить картинка "kartinka.jpg".

Якщо картинка лежить на іншому сайті, код буде таким:

https://www.сайт – це адреса сайту.

приклад :

Для цього просто укласти картинку між елементом посилання:

Атрибути для картинок

ALIGN – цей атрибут призначений для обтікання чи вирівнювання картинки по горизонталі.
left - вирівнювання по лівому краю, текст буде обтікати праворуч.
right - вирівнювання праворуч, текст обтікає зліва.

Результат :

вирівнювання по правому краю

HSPACE – відступи від картинки по горизонталі (у пікселях).
VSPACE – відступи від картинки по вертикалі (у пікселях).

Результат :

відступи від картинки

HEIGHT – висота зображення (пікселях).
WIDTH – ширина зображення (пікселях).

Результат :

TITLE - це заголовок картинки. Заголовок відображатиметься, якщо навести на картинку курсор мишки.

title="Всем привіт - сайт!!!!}">

Результат :

заголовок картинки

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

Результат :

Якщо ж змінити значення border на 5:

Результат :

Будь-яку картинку можна зробити тлом. Для цього в мітці body пропишіть атрибут background .

background="ваш_фон.jpg">

На картинному фоні може відображатись текст.

приклад :

Результат :

Картинка як тло

На цій ноті можна було б закінчити тему "Як вставити картинку в HTML", але знаю, що багатьох цікавить питання, а як поставити картинку по центру.
Щоб поставити картинку по центру, вам достатньо застосувати такий фокус:

Ось тепер точно все. Переходимо до наступного уроку.

Подорожуючи Інтернетом Ви звичайно ж бачите на багатьох сайтах різні картинки, банери, фотографії, графічні зображення. Сьогодні ми навчимося вставляти зображення на сторінку HTML.

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

Під час підготовки зображень слід врахувати кілька моментів.

1. Оскільки веб-сторінка завантажується через мережу, істотним чинником виступає розмір ("вага") графічного файлу, вбудований у web-документ. Чим він менший, тим швидше з'явиться зображення.

2. Досить часто фізичні розміри зображення (ширину та висоту) необхідно обмежити (зменшити) по ширині та висоті. Наприклад, встановити по ширині трохи більше 700-800 пікселів. Інакше зображення не поміститься у вікні браузера, і з'являться смуги прокручування.

Формати графіки для веб-сайтів

Найбільш широке поширення для веб-графіки набули два основних формати: GIFі JPEG. Такі якості як: багатофункціональність, універсальність, невеликий обсяг вихідних файлів при достатньому хорошій якості, співслужили цим форматам гарну службуфактично визначивши їх як стандарт для веб-зображень.

Є ще формат: PNG, який також підтримується браузерами при додаванні зображень і існує у двох варіантах: PNG-8і PNG-24. Однак популярність формату PNGсильно поступається за визнанням форматів GIF та JPEG.

Зазвичай для зображень (картинок) створюють окрему папку в кореневому каталозі і складають усі зображення для сайту. Іноді таких папок буває кілька (якщо цього вимагає структура сайту або Вам так простіше орієнтуватися). Цю папку найчастіше називають: imgабо images (зображення). У коді web-сторінки прописують повний шлях до графічного файлу (де лежить зображення), а також ім'я даного файлу(картинки), який Ви хочете вставити у html-документ.

Пишемо код для вставки картинки на web-сторінку

Для вставки зображень у HTML документ використовується конструкція, вказана в Лістинг 8.1.Цей код вставляється в потрібне місце веб-сторінки (туди, де Ви бажаєте бачити картинку).

На нашій we-сторінці, присвяченій автомобілям, я підготував та вставив два зображення. Код вставки першого зображення Ви бачите у Лістингу 8.1.

Лістинг 8.1.

Ось так буде виглядати перше вставлене зображення на веб-сторінці сайту:

А тепер прокоментую докладніше те, що написано в Лістинге 8.1.

Саме зображення "вставляється" за допомогою тега: img src. Повністю запис виглядає так: img src="img/mers1.jpg", де "img/mers1.jpg"- Вказує, що наша картинка лежить в папці: img, а ім'я графічного файлу (картинки): mers1.jpg.

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

Давайте розглянемо додаткові параметри:

border="0"– вказує, що рамки навколо зображення немає, спробуйте змінити 0 на інше число, наприклад на 1 , - відповідає товщині рамки навколо зображення в 1 піксель, 2 – відповідає товщині рамки навколо зображення у два пікселі тощо.

Важливо! Якщо ви плануєте зробити зображення посиланням, обов'язково вказуйте значення: border="0".

width="400"– вказує, що ширина зображення становить: 400 пікселів(Встановіть реальну цифру ширини ваших зображень).

height="209"- Вказує, що висота зображення становить: 209 пікселів(Встановіть реальну цифру висоти ваших зображень).

Якщо не вказати параметри: widthі heightто зображення може отримати геометричні спотворення.

hspace="20"– вказує на відступ тексту навколо зображення 20 пікселів.

align="left"– це вже знайомий Вам тег….. Правильно, позначає вирівнювання по лівому краю, також може приймати значення: right- Вирівнювання по правому краю.

alt="Вигляд машини спереду" !}– тут прописується альтернативний текст, який висвічується під час наведення мишки на зображення.

Точно так само ми "вставимо" на web-сторінку і друге зображення, з тією лише різницею, що вирівняне воно буде по правому краю.

Коментарі до цієї статті (уроку):

Скажіть, будь ласка, де саме треба створити папку img?

Папка img - це просто умовна назва, можете обізвати її як завгодно, аби самі потім зрозуміли. Створювати її можна будь-де, для простоти створіть її в кореневому каталозі і складіть туди всі зображення.

Справа в тому, що картинка не відображається, лише напис. У чому може бути справа? Дякую.

Подивіться уважно Лістинг 8.1 вище. Візьміть його до себе. У кореневому каталозі (там, де лежать усі HTML-файли вашого сайту) зробіть папку img . Помістіть у цю папку усі ваші зображення. У списку змініть mers1.jpg на назву фашого файлу. Значення width і height так само поміняйте реальні розміри вашого файла. Успіхів.

Дякую, все вийшло.

Здрастуйте.У мене таже ситуація,що і попереднього оратора:прописую код як у вас,міняю тільки назву файлу:замість mers.1/jpeg вставляю зв'язку мерседес/jpeg.На сторінці з'являється тільки вікно з написом зверху "Вигляд автомобіля спереду",а зображення немає.На мій,браузер не може знайти шлях до фото або він не правильно прописаний.ВІД МІЙ КОД: б

Подивіться уважно на свій код img/мерседес/jpeg. Ви правильно зрозуміли, браузер не знаходить шлях до графічного файлу. 2. Неправильно вказано ім'я файлу, дивіться як mers1.jpg

Ну ось я скопіював код вставив у мене овал без картинки в овалі у верху написано посилання!

Здрастуйте!Проблема така ж, створила папку з назвою img там же де і документи сайту, в цій папці збережені зображення з назвою 1.jpg, прописую все як на вашому прикладі.

Якщо Ви помітили у мене картинка лежить в папці img

Дуже корисна стаття для "web-майстрів". Єдине зауваження до атрибуту "alt". Щодо малюнка в статті дається таке його тлумачення: "alt="Вигляд машини спереду)" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

ось мій код ТАК ЧОМУ Ж КАРТИНКА СТАВИТЬСЯ ЗБОКУ, КОЛИ ЗАВДАННЯ ДЛЯ НЕЇ CENTER?

А якщо я візьму зображення з чужого сайту це не буде порушенням авторських прав?

Поясніть, чому при викладанні HTML документана сервер на місці зображення пусті місця в кадрі. Хоча до викладки, зображення були як слід.

Дмитре, чудес не буває, Ви десь припустилися помилки, перевірте всі шляхи до картинок, тобто. як прописані картинки у коді.

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

АндрійК,зверніть будь ласка на мій лист.не можу ніяк вставити зображення,вводжу все правильно але ніяк,виявляється тільки рамка і напис

Ельвіра, Ваш лист я прочитав, як і всі інші коментарі та листи. Але відповідати щось куди... на село дідусеві???

не знаю чому у всіх запара!? потрібно просто коди не копіювати-потім вставляти, а самим прописувати і все буде працювати .. ось текст моєї картинки

Скопіював Ваш лістинг, вставив свої значення-картинка є. Далі вбиваю нижче те саме (вручну) картинки немає-що за диво?

АндрійК будь ласка скажіть де помилка? скілько пробував не виходить((

Андрію, підкажіть, чому не вдається побачити картинку. Мій код: Напис є, картинки нема. Мою адресу: [email protected]Дякую.

Теж довго мучилася, але вийшло! Дійсно, папку imj треба відкрити в HTML-документі.

Обов'язково спробую,Дякую

ІІІІІІІІУууууу крррррроші мої

теж довго мучився, виявляється папка з картинками повинна лежати там де і index.html , дякую вам Олена

Андрій я вставляю:

Андрій я вставляю: і у мене немає картинки в документі тільки напис! Моя адреса: [email protected]

мій код ... теж немає картинки. Папка img знаходиться в тій же папці, що і index... допоможіть, будь ласка. [email protected]Дякую!

Ну не знаю. Прочитала усі коментарі. Перепробувала все. Копіювала, вставляла свої дані. Нічого не виходить. Папка з картинками (img) лежить там, де index.html. Але картинки нема. Замість неї хрестик червоний та напис.Працюю у браузері IE. Ось що я ввела:

Подивилася HTMLкод сторінки на місці фото в уроці: Код на сторінці відрізняється від того, що в лістингу. Чому? і, до речі, на сторінці код "mers1.jpg" підкреслять. Скопіювати із підкресленням не вдалося. Пробувала і так вставляти. Все одно картинки немає. В чому справа?

Самі питаємо, самі й відповідаємо. Довго мучилася картинка не вставлялася. Виявилося: 1, замість тега src у мене було srk 2. заплуталася, коли становила шлях до картинки. Перейменувала папку на IMG і все вийшло. На це витратила майже два дні. Але це того варте.

Кохання, зате тепер Ви це запам'ятаєте на все життя:) жартую звичайно, не ображайтеся. А якщо серйозно, то якщо людина не залишає зворотної адреси, то допомогти їй практично неможливо.

Здрастуйте а підкажіть як розмістити одне зображення зверху друге нижче зліва, а третє знизу праворуч))))

...........у чому моя помилка відсутності зображення?

У коді все правильно, якщо нічого не наплутали, все має працювати. Але назву файлу (картинки) пишіть англійськими літерами. Багато серверів не сприймають латиницю.

Але ось що дивно... поки називала папку різними іменами, ніяк картинка не хотіла з'являтися, хоч шлях був прописаний правильно. Як тільки назвала IMG, відразу з'явилася. У чому каверза?

Марино, ніякої каверзи та провокацій немає:). У код Лістінга 8.1. зазначено, що це зображення лежить у папці: img. Якщо Ви змінюєте у себе на хості назву папки для зображень, то поміняйте і в лістингу, от і вся хитрість.

Я намагаюся вставити зображення! прописую все через блокнот я все вірно роблю може через блокнот не варто?

І відкриваю все у мозилі файр фокс останній))

Шлях моєї картинки і C:Documents and SettingsденісРобочий стілkoffevinogradwwwImg і сама картинка названа gif теж в назву входить 1.gif...Я в блокноті роблю так

робив та повний шлях не виходить мозила не бачить фото еxpoler червоним хрестом виділяє

Денис, перейменуйте папку Img на img , тобто. все великими літерами, і шлях до неї теж перейменуйте. Багато серверів некоректно відображають великі регістри.

у мене все те саме питання: чому не зображення, а тільки напис. я створила окрему папку для сайту: у ній Web-сторінка та малюнок. Вставила: ДОПОМОГТИ, У ЧОМУ ПОМИЛКА МОЯ ПОШТА: [email protected]

А як зробити картинку, щоб її можна було збільшувати чи зменшувати?

У мене також чомусь не центрує картинку. У чому каверза?.. Код такий:

Сподіваємося, що ця стаття Вам буде корисною. Приємного прочитання!

Зображення миттєво дають нам зрозуміти, наскільки цей сайт чи стаття можуть бути для нас цікавими, створюють настрій, по-новому можуть розкрити тему. Іноді одне фото коштує тисячі слів.

Але й частувати ними не варто, якщо ви не інстаграм чи інтернет-магазин. Бажано, щоб зображення:

• були інформативними
• відповідали колірній гамі вашого сайту
• були доречні

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

Для тих, хто не любить переплачувати, наприкінці статті ми приготували бонус- Список декількох фотобанків, де можна скачати величезну кількість якісних красивих матеріалів абсолютно безкоштовно 🙂

Формати зображень

У Всесвітньому павутинні в основному використовуються 3 види зображень:

gif(Graphics Interchange Format - формат для обміну зображеннями)

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

jpeg, він же jpg(Joint Photographic Experts Group - Об'єднана група експертів з фотографії -так називається організація-розробник)

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

png(Portable Network Graphics - Портативна мережева графіка . Вимовляється як і ping, тобто. )

цей формат спочатку розроблявся для Інтернету, тобто. зображення зазвичай мало "важить" і не гальмує сторінку під час завантаження. Цей формат створено на заміну застарілого gif, але, на відміну від нього, не підтримує анімацію. Png-8, Як і gif, використовує всього 256 кольорів. Формат png-24підтримує 16 млн кольорів, правда і вага вже немаленька. Png-32містить стільки ж кольорів, як і png-24, і плюс до цього дозволяє отримати зображення з прозорим фоном , причому можна регулювати рівень прозорості. При зменшенні розмірів png не відбувається втрати кольору.

Підсумуємо

gif- для анімації

jpeg- для фотографій

png- для іконок, кнопок, фонів, логотипів, скріншотів, креслень, текстів, фотографій із прозорим фоном

Вставка зображення у html-файл

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

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

Отже, щоб підключити зображення до вашої веб-сторінки, потрібно написати такий код:

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

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

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

Висота та ширина зображень

Також можна встановити висоту та ширину зображення, якщо оригінальне зображення напр. більше, ніж вам потрібна.

У HTML5 це рекомендується робити за допомогою CSS або атрибуту style , ось так:

У цьому прикладі ми взяли 30% від ширини, але не оригінального іміджу, а розмір вікна браузера. Коли ширина = 100%, зображення відкривається на всю ширину браузера. Запам'ятайте цю особливість відсотківяк одиниці виміру.

До речі, якби ми написали лише ширину, результат був би той самий, спробуйте:

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

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

Спробуйте запустити такий код і подивіться на результат:

Завжди встановлюйте розмір зображення. Зазвичай картинки вантажаться довше, ніж решта html-коду. Якщо браузер знатиме, скільки місця резервувати на іміджі, він зможе продовжити завантаження сайту, не чекаючи, поки завантажаться зображення.

Трохи нафталіну

Якщо вам доведеться колупатися в коді сайту, створеного на HTML-4 або ще раніше, то ви помітите, що розміри зображень встановлюються за допомогою спеціальних атрибутів width і height. Це застарілий метод, хоча все ще валідний HTML5. Проте рекомендуємо використовувати style, т.к. на атрибути width і height можуть впливати внутрішні чи зовнішні стилі, які житимуть у браузері чи вашому CSS-файлі. Ми зупинимося на цьому детальніше, коли розглядатимемо CSS, а поки просто подивіться приклад, як стилі впливають на атрибути висоти та ширини.

У цьому вікні три вкладки: на першій ви бачите html-код, на другий код CSS, ну а на останній - як завжди результат. Це працює, якби перша вкладка була файлом index.html, друга – файлом style.css, а третя – браузером. Так от зараз у нашому CSS написано, що всі елементи з тегом img мають ширину 100%. Розміри атрибутів width та height за замовчуванням у пікселях, тому тут не треба дописувати жодних одиниць.

Різниця в результаті в наявності 🙂

Також у старих версіях html використовувалися такі атрибути:

align, за допомогою якого вирівнювалося зображення по горизонталі чи вертикалі.

hspace- відступ ліворуч і праворуч від зображення до навколишнього контенту (напр. тексту або сусідньої картинки)

vspace- відступ зверху та знизу від картинки до контенту навколо.

border- задавав товщину рамки навколо зображення (за умовчанням вона дорівнює нулю)

Зараз усі ці маніпуляції (і набагато більше) робляться за допомогою CSS, тому ми вирішили не забивати вам цим голову. Якщо все ж таки цікаво, як працювати з цими атрибутами - пишіть у коментарях, ми додамо цей пункт 🙂

Розміщення картинки в коді

Від того, де ми розташуємо наш теґ залежить від того, як він відображатиметься у браузері.

Приклад №1 - перед параграфом:

Такі елементи як

І

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

Приклад №2 – на початку параграфа

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

Підписи до ілюстрацій

Щоб позначити чи підписати фото на сторінці використовується тег