Календар
«    Квітень 2025    »
ПнВтСрЧтПтСбНд
 123456
78910111213
14151617181920
21222324252627
282930 
img
Хмарина тегів
a Absolute align-items autoplay color container css description display div flex flex-direction Flexbox footer form Google Maps h1 head header height href html id iframe img justify-content li maxlength minlength p pattern placeholder required section src table title ul width пз
Показати всі теґи
Опитування
Оцініть роботу двигуна
Понеділок
жов 28

Урок 5. Робота з зображеннями — тег img, атрибути, альтернативний текст

admin
admin

Адміністратор

 Уроки HTML  29  0

План уроку: Робота з зображеннями — тег <img>, атрибути, альтернативний текст (25-30 хвилин)


1. Вступ: Про що цей урок (2-3 хвилини)

  • З цього уроку ви дізнаєтесь, як додавати зображення на вебсторінку за допомогою тега <img>. Ви навчитесь використовувати атрибути для зміни розміру зображень та дізнаєтесь, чому важливо додавати альтернативний текст для зображень.


2. Тег <img>: основи (5 хвилин)

  • Ціль: Пояснити учням, як використовувати тег <img> для вставки зображень.

  • Кроки:

    • Тег <img> використовується для відображення зображень на вебсторінці.
    • Він є самозакриваючим (не має закриваючого тега, лише <img />).
    • Основний атрибут тега — це src, який вказує шлях до файлу зображення.
    • Інший важливий атрибут — це alt, який використовується для додавання альтернативного тексту (опису зображення для випадків, коли зображення не завантажується або для користувачів із вадами зору).

  • Приклад коду:

    <img src="images/kotik.jpg" alt="Милий котик" />
    Аналогія: Уявіть, що тег  — це вікно, через яке ви "дивитесь" на зображення. Якщо вікно закрите (зображення не завантажилось), опис підкаже вам, що там повинно бути.


3. Атрибути: ширина, висота та альт (10 хвилин)

  • Ціль: Пояснити, як використовувати атрибути для налаштування зовнішнього вигляду зображення та доступності контенту.

Атрибут src
  • Вказує шлях до файлу зображення (або локальний шлях, або URL).
  • Приклад:
  • <img src="images/kotik.jpg" alt="Милий котик" />

Атрибут alt (альтернативний текст)
  • Це опис зображення, який важливий з точки зору доступності (для людей із вадами зору, які використовують екранні читачі).
  • Також відображається, якщо зображення не завантажилося.
  • Приклад:

  • <img src="images/kotik.jpg" alt="Милий котик, який сидить на підвіконні" />

Атрибути width і height

  • Використовуються для задання розмірів зображення (в пікселях).

  • Приклад:

  • <img src="images/kotik.jpg" alt="Милий котик" width="300" height="200" />

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

  • Пояснення з прикладом:

    • Ось зображення котика з альтернативним текстом і зміненою шириною.
      <img src="images/kotik.jpg" alt="Котик біля вікна" width="400" />
  • Аналогія: Якщо ви вставляєте зображення у фоторамку (на сайт), вам потрібно не тільки знати, де його знайти (атрибут src), але й підказати, що на ньому зображено, якщо раптом його не видно (атрибут alt), і вирішити, якого розміру зробити рамку (атрибути width і height).


4. Практика (10 хвилин)

  • Ціль: Учні на практиці додадуть зображення на свою вебсторінку та налаштують його параметри.

  • Завдання:

    • Створити HTML-сторінку та додати туди кілька зображень.
    • Задати кожному зображенню атрибути alt для опису та width, щоб задати бажаний розмір.

  • Приклад завдання:

    • Додати на сторінку зображення сонця та місяця з відповідними розмірами та альтернативними текстами.

    • <!DOCTYPE html>
<html>
<head>
  <title>Зображення на сторінці</title>
</head>
<body>
  <h1>Природа</h1>
  <img src="images/sun.jpg" alt="Яскраве сонце на синьому небі" width="300" />
  <img src="images/moon.jpg" alt="Місяць у нічному небі" width="200" />
</body>
</html>

  • Обговорення:

    • Запропонувати учням змінити розмір зображень і подивитися, як це впливає на сторінку.
    • Попросити видалити атрибут alt і пояснити, чому це не дуже хороша ідея з точки зору доступності.


5. Підсумок і запитання (5 хвилин)

  • Ціль: Закріпити знання про тег <img>, атрибути src, alt, width, height.
  • Що повторити:
    • Що таке тег <img> і як він використовується для додавання зображень.
    • Навіщо потрібен атрибут alt.
    • Як змінювати розміри зображень за допомогою атрибутів width і height.
  • Запитання:
    • Що робить атрибут src?
    • Для чого потрібен альтернативний текст для зображення?
    • Як задати зображенню ширину в 500 пікселів?


Домашнє завдання

  • Створити сторінку, на якій буде кілька зображень різних розмірів із прописаними альтернативними текстами. Використати зображення власного вибору (можна завантажити з інтернету).


Цей урок дозволить учням зрозуміти, як додавати зображення на сторінки, налаштовувати їх розміри та робити їх доступними для всіх користувачів, навіть тих, хто не може побачити їх безпосередньо.



html img src alt width height






Дивіться також:
{title
Урок 13. Теги метаінформації: Метатеги для SEO та соціальних мереж
28-10-2024, 14:55
{title
Урок 4. Шрифти та типографіка: Задання шрифтів, розмірів, ваги, висоти рядка
30-10-2024, 15:29
{title
Придбання та оплата скрипта
16-09-2024, 20:55
{title
Урок 15. Вбудовування карт: Використання Google Maps чи інших сервісів
28-10-2024, 15:21
{title
Урок 1. Вступ до CSS: Що таке CSS, підключення CSS до HTML
29-10-2024, 11:54
{title
Урок 9. Форми (частина 1): Текстові поля, кнопки, чекбокси, радіо-кнопки
28-10-2024, 14:13
Коментарі (0)