Створи історію в картинках!
Картинки в html вставляються за допомогою тега img. У нього є атрибут scr, куди ми додамо посилання на картинку і ще кілька необов’язкових атрибутів.
В src можна вставити посилання на картинку в інтернеті. Для таких тренувальних сторінок, як у нас, цього буде цілком достатньо, адже в інтернеті море картинок!
Також можна додати файл картинки в HTML проєкт і написати лише його назву.
alt дуже корисний атрибут, додайте опис картинки. Якщо вона з якихось причин не відобразиться у когось, ви побачите лише опис, але це допоможе розібратися з тим, чому не відобразилася картинка і яка саме.
Також досить часто треба виставити розміри картинки. Для цього допоможуть height (висота) і width (ширина). Додайте такий код у файл index.html:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">Достатньо використати один з цих атрибутів і картинка вже змінить розміри.
Створюємо історію в картинках
Сьогодні ми створимо історію в картинках. Вона може бути правдива або ні. Головне, щоб в ній було багато картинок. Ось, наприклад, така, не дуже правдива історія:
1: Створіть новий проєкт. Додайте назву історії за допомогою заголовку <h1> (або будь-якого іншого)
2: Додайте текст, а в середину абзацу вставте тег картинки. Самі картинки можна знайти в інтернеті. Якщо забули, як це робити, завітайте на минулий урок.
<h1>Ні слова правди...</h1>
<p>Мене звуть Паула і це моє фото:
<img src="https://hairstylecamp.com/wp-content/uploads/black-hairstyle-for-school-girls.jpg.webp" alt="Моє фото" height="100px">
</p>3: Додайте ще пару речень у розповідь і ще картинок. Зробіть свою історію захоплюючою!
Level Up
1: Трохи оновіть свої картинки:
Закругліть кути у картинки:
<img src = "картинка.jpg" alt = "Стрибок" style = "border-radius: 15px">Зробіть овальну або круглу картинку:
<img src = "картинка.jpg" alt = "Стрибок" style = "border-radius: 50%">
2: Додайте картинку-фон. Для цього замініть тег <body> на :
<body style="background-image: url('https://img.jpg');">Поставте правильне посилання.
3: Ось кілька тегів для роботи з текстом. Використайте, якомога більше. (Ці теги також потрібно відкрити й закрити):
