Картинки

Насправді ви вже можете здогадатися, як додати картинку на сайт 🙂 Бо всі знання для цього у вас уже є: ви працювали з тегами та атрибутами, вмієте інші html-файли. І знаєте всю логіку html.

Картинка працює, як і все інше:

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

— оскільки картинка — це файл, на нього можна послатися, так само як і на html-файл

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

Лишилось лише дізнатися, який тег позначає картинку.

Додаємо картинку

Тег картинки — <img>. Це одинарний тег, тому закривати його не потрібно.

Але, як і тег <a></a>, тег <img> не працює без конкретних атрибутів.

Тому ми додаємо до нього атрибут:

<img src=””> — і між лапками впишемо повний шлях до нашої картинки

Додаємо картинку з іншого сайту

Що треба вписати між лапок, щоб додати картинку з іншого сайту?

Заходимо в Google, шукаємо будь-яке зображення. І копіюємо посилання саме на картинку: клік правою кнопкою миші → «копіювати URL картинки».

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

Ми для зразка взяли випадкову карту України з гуглу. Ось, як це виглядає:<img src=”http://s1.thingpic.com/images/Q5/qWVt5EwjLFB8Z2hRSzGH7Etq.jpeg”>

👉 Як це виглядає у коді?

Додаємо власну картинку

Тут все ще простіше: беремо картинку, кладемо її в теку, та прописуємо до неї шлях, як у випадку з page2.html. Але професійніше буде, якщо ми створимо теку, в яку будемо додавати всі картинки з сайту.

Створимо нову теку img

Виходить так:

<img src=”img/Screenshot_5.png”>

В атрибут додали повний шлях до файлу та його назву.

👉 Як це виглядає у коді?

Можна відредагувати зображення

Картинка може виглядати неестетично: наприклад, бути завеликою і не гармонійно виглядати на сторінці. Зберігати, в якомусь сторонньому редакторі налаштовувати розмір — це довго та незручно. Ви можете просто за допомогою атрибуту скорегувати її так, як вам потрібно.

Зараз заглиблюватися в деталі не будемо, але завдяки одному атрибуту невеличкі налаштування внесемо. За допомогою атрибуту widht зробимо коректний розмір картинки.

Width вказує ширину картинки, а висоту підбирає автоматично, щоб зберегти пропорцію. Наприклад, ми скорегуємо картинку, щоб її ширина була 500 пікселів.

Виглядатиме так:

<img src=”img/Screenshot_5.png” width=”500px”>
👉 Як це виглядає у коді?