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

3 Картинки у HTML

Створи історію в картинках!

Картинка в html вставляється за допомогою тега img. У нього є атрибут scr, куди ми додамо посилання на картинку і ще кілька необов’язкових атрибутів.

В src можна вставити посилання на картинку в інтернеті. Для таких тренувальних сторінок, як у нас, цього буде цілком достатньо, адже в інтернеті море картинок!

Також можна додати файл картинки в проєкт і написати лише його назву.

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

Також досить часто треба виставити розміри картинки. Для цього допоможуть height (висота) і width (ширина):

<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: Ось кілька тегів для роботи з текстом. Використайте, якомога більше. (Ці теги також потрібно відкрити й закрити):

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *