Розділ 1 · Завдання 8

Зображення

Картинка з інтернету — а потім і власне фото з комп'ютера.

Крок 1. Картинка з інтернету

Додай нижче все, що вже є:

index.html
<p>Моя картинка:</p>
<img src="https://picsum.photos/300/200">
  
Як це працює

<img> не закривається (як і <br>). Адреса картинки вказується в атрибуті src.

Крок 2. Своя картинка замість інтернетної

1. Клацни на картинку правою кнопкою миші → «Зберегти зображення як» — збережи її на комп'ютер.

2. Біля файлу index.html створи нову папку і назви її images.

3. Перемісти збережену картинку в цю папку.

4. Клацни на картинку в папці правою кнопкою → «Перейменувати» → назви її photo.jpg.

5. Поверніся в Блокнот і зміни рядок з картинкою:

index.html
<img src="images/photo.jpg">
  
Зверни увагу

images/ означає «зайди в папку images», а photo.jpg — назва файлу всередині неї.

Крок 3. Розмір картинки

Якщо картинка занадто велика, задай їй розмір атрибутами width і height — числа означають розмір у пікселях:

index.html
<img src="images/photo.jpg" width="300" height="200">
  
Спробуй

Зміни ці числа і подивись, як картинка змінює розмір на сторінці.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща