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

Додавання зображення

Щоб додати зображення на веб-сторінку використовується елемент <img>, атрибут src якого визначає адресу графічного файлу. Загальний синтаксис додавання зображення наступний.
<img src="<адрес>" alt="<альтернативний текст>">
Обидва атрибута src і alt є обов'язковими.

Атрибут src задає шлях до графічного файлу, для його вказівки можна використовувати як абсолютний, так і відносний адресу. 

Як визначити шлях до зображення для розміщення його на веб-сторінці? Як приклад візьмемо файл з ім'ям target.png, який зберігається в папці images кореня сайту.

http://example.ru/images/target.png
Якщо адреса починається з протоколу (http: // або https: //), то мова йде про абсолютну адресу. Зображення завжди буде завантажуватися із зазначеної адреси в Інтернеті, навіть при збереженні веб-сторінки на локальний комп'ютер.

//example.ru/images/target.png
Це абсолютна адресу зображення без вказівки протоколу. Браузер самостійно підставить потрібний протокол, на якому працює сайт (http: // або https: //). Такого роду адреси не працюють на локальних веб-сторінках, а тільки в Інтернеті під управлінням веб-сервера.

 /images/target.png
Якщо на початку адреси варто коса риска (/), це означає, що папка images розташовується в корені сайту. Одна папка може бути вкладена в іншу, тому шлях може збільшитися. Наприклад, /assets/images/target.png означає, що папка assets розташовується в корені сайту, в ній зберігається папка images, всередині якої розташований файл target.png.

../images/target.png
Дві точки з косою рисою на початку адреси (../) говорять про те, що папка з зображенням знаходиться на рівень вище в структурі папок щодо HTML-документа. На рис. 1 показаний файл source.html, в який потрібно вставити малюнок target.png.
images / target.png
Ім'я папки без всяких точок на початку адреси повідомляє, що HTML-документ і папка з зображенням знаходяться на одному рівні 
target.png
Єдине ім'я файлу говорить про те, що зображення і веб-сторінка розташовуються в одному місці

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

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

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

Приклад 2. Використання alt
Якщо для зображень потрібно видима підказка, то слід скористатися глобальним атрибутом title, який можна додавати до будь-якого елементу, а не тільки до картинок. При наведенні курсора на зображення з'явиться текст, що містить значення атрибута title:

Зміна розмірів малюнка

Для зміни розмірів малюнка у елемента <img> передбачені атрибути width (ширина) і height (висота). Як значення використовуються пікселі або відсотки. У прикладі  показано додавання цих атрибутів до <img>:
Атрибути width і height не є обов'язковими, після завантаження зображення браузер самостійно встановить його вихідний розмір. В основному ці атрибути застосовуються в наступних цілях:
  • зарезервувати місце під картинку;
  • зменшити розмір великих фотографій;
  • поліпшити якість зображення для дисплеїв Retina, які відрізняються високою щільністю пікселів і деталізацією зображень.
Атрибути width і height не обов'язково повинні йти разом. Якщо якийсь із цих атрибутів не вказано, то браузер самостійно підставить потрібне значення виходячи з пропорцій зображення.
Крім пікселів в якості розмірів допустимо використовувати відсотковий запис. В такому випадку ширина задається щодо батьківського елементу.

<img src="img/square.png" alt="" width="100%">
Завдання для самостійного виконання

Завдання  № 1. Вирівнювання зображень

1. В мережі Інтернет знайти зображення квітів у форматі .jpg, зберегти на локальний диск у свою папку. Перейменувати файл з квітами у kvitu.jpg. Запустіть програму редактору коду і ввести наступний HTML код:
<HTML>
<TITLE> Вирівнювання зображень </TITLE>
<BODY> Вирівнювання <IMC SRC=kvitu.jpg ALIGN=top> по верхньому краю
<Р> Вирівнювання  по <IMG SRC= kvitu.jpg ALIGN=BASELINE>базовій лінії
</BODY>
</HTML>
2. Зберегти файл та  переглянути в браузері результат.

Завдання  № 2. Задання розмірів зображень

1. Запуститиь програму редактору коду і ввести наступний HTML код:
<HTML>
<TITLE> Задання розмірів зображень </ TITLE>
<BODY>
<IMG SRC = kvitu.jpg WIDTH = 300>
<IMG SRC = kvitu.jpg >
<IMG SRC = kvitu.jpg WIDTH = 75>
</ BODY>
</ HTML>

Завдання № 3. Використання параметрів HSPACE і VSPACE

1.     Знайти в мережі  зображення лисиці, зберегти у свою папку під іменем fox.jpg. Запустити програму редактору коду і ввести  наступний HTML-код:
<HTML>
<Title> Використання параметрів HSPACE і VSPACE </ title>
<BODY>
<IMG SRC = fox.jpg ALIGN = left HSPACE = 20 VSPACE= 20 >
Лисиця - одна з популярних героїнь дитячих казок. Вона струнка, витончена, у неї подовжений тулуб  на невисоких ногах. З усієї її загальної довжини приблизно 40% припадає на пухнастий хвіст. Дивно добре пристосувалася вона до самих різних рівням, але більше інших любить відкриті місця з невеликим лісом, ярами, пагорбами, уникає лише глухої тайги і пустель.
Лисиця дуже моторна, звичайна манера її пересування - некваплива рисця. Лисиця - чудовий мисливець: Крім спостережливості та кмітливості, у неї відмінна зорова пам'ять, гарний нюх і гострий слух
</ BODY>
</ Html>

Завдання № 4. Використання параметру BORDER

1.     . Запустити програму редактору коду і ввести  наступний HTML-код:
<HTML>
<TITLE> Зображення в рамці </ TITLE>
<BODY>
<IMG SRC = fox.jpg >
<IMG SRC = fox.jpg BORDER = 1>
<IMG SRC = fox.jpg  BORDER = 5>
<IMG SRC = fox.jpg BORDER = 10>
</ BODY>
</ HTML>

Завдання № 4. Альтернативний текст

1. Запустити програму редактору коду і ввести  наступний HTML-код
<TITLE>Альтернативний текст </TITLE>
<BODY>
<IMG SRC= fox.jpg ALT="лисиця">
</BODY>
</HTML>

Завдання №5. Породи собак

1. Створити у свої папці папку проекту dog, в папці dog  створити файл index.html та папку   img. В папку  img  з мережі інтрнет   помістити   зображення порід собак в форматах .jpg або .png. В файлі index.html на сторінці розмістити  заголовок 1 рівня "Породи собак". У заголовках 2 рівня розмістити назву породи собаки, опис породи та  фотографію породи.

2.  Після формування вмісту сторінки створити перелік посилань на породи собак після заголовку 1 рівня і якоря в для цих посилань в заголовках 2 рівня по тексту

Завдання №6. Улюблена казка

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

Завдання №7

1. Вірус пошкодив вихідний  код вихідного файлу,  потрібно  його відновити, зкачайте собі  у робочу папку  пошкодженй  файл, та виправте помилки

Перевіврка знань