Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Челендж: Зображення | Media and Tables
Знайомство з HTML

Челендж: ЗображенняЧелендж: Зображення

🏁 Мета

Попрактикуйтесь у використанні абсолютного шляху для зображень в HTML. Після виконання цього завдання ви:

  • Набудете практичного досвіду використання абсолютного шляху в документі HTML;
  • Дізнаєтеся, як забезпечити значущий текст alt для зображень, щоб забезпечити доступність та зручність для користувача.
content

📋 Завдання

  1. Переконайтеся, що атрибут src першого зображення використовує абсолютний шлях. Ви можете знайти зображення за посиланням: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png;
  2. Використовуйте абсолютний шлях для атрибуту src другого зображення. Доступ до зображення тут: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png;
  3. Вкажіть відповідне значення атрибута alt для обох зображень. Пам'ятайте, що значення alt є важливим для надання контексту у разі невдалого завантаження зображень або для користувачів, які користуються читачами екрану.
html

index.html

css

index.css

js

index.js

  1. Використовуйте тег img для визначення зображення;
  2. Використовуйте атрибут src для визначення місцезнаходження зображення;
  3. Використовуйте атрибут alt для надання описового тексту для зображення;
  4. Ви можете використовувати атрибут width для визначення ширини зображення;
  5. Ви можете використовувати атрибут `height для визначення висоти зображення.
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 4. Розділ 3
course content

Зміст курсу

Знайомство з HTML

1. Веб Розробка

Світ ВебуЩо таке Інтернет?Розуміння того, як Працює ІнтернетЯк Працює Веб-СайтFrontend проти BackendШлях до Успіху

2. Теги та Атрибути

Розкриття Потенціалу Тегів та Атрибутів HTMLТегиАтрибутиПарні та Одиночні тегиРозмітка ТекстуЧелендж 1: Розмітка ТекстуЧелендж 2: Розмітка ТекстуЧелендж 3: Розмітка ТекстуРозмітка Тексту Спеціального ПризначенняЧелендж: Розмітка Тексту Спеціального ПризначенняВалідація

3. Структура Документа

Секрети Структурних Веб-сторінокСтруктураHead ДокументаПотік ДокументуЧелендж: Структура ДокументаІнструменти Розробника

4. Медіа та Таблиці

Магія Мультимедіа та Динамічних ТаблицьЗображенняЧелендж: ЗображенняЗображення Спеціального ПризначенняГрафічні ФорматиВбудовування Аудіо та ВідеоЧелендж: Аудіо та ВідеоТаблиціЧелендж: Таблиці

5. Форми

Сила Форм: Взаємодійте та ЗалучайтеОснова для Створення ФормиLabel для Input ЕлементаАтрибути Елементу Input Типи Елементу Input Челендж: Input та LabelЕлемент TextareaЕлемент SelectЕлемент DatalistГрупування Елементів Форм

Знайомство з HTML

Челендж: ЗображенняЧелендж: Зображення

🏁 Мета

Попрактикуйтесь у використанні абсолютного шляху для зображень в HTML. Після виконання цього завдання ви:

  • Набудете практичного досвіду використання абсолютного шляху в документі HTML;
  • Дізнаєтеся, як забезпечити значущий текст alt для зображень, щоб забезпечити доступність та зручність для користувача.
content

📋 Завдання

  1. Переконайтеся, що атрибут src першого зображення використовує абсолютний шлях. Ви можете знайти зображення за посиланням: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png;
  2. Використовуйте абсолютний шлях для атрибуту src другого зображення. Доступ до зображення тут: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png;
  3. Вкажіть відповідне значення атрибута alt для обох зображень. Пам'ятайте, що значення alt є важливим для надання контексту у разі невдалого завантаження зображень або для користувачів, які користуються читачами екрану.
html

index.html

css

index.css

js

index.js

  1. Використовуйте тег img для визначення зображення;
  2. Використовуйте атрибут src для визначення місцезнаходження зображення;
  3. Використовуйте атрибут alt для надання описового тексту для зображення;
  4. Ви можете використовувати атрибут width для визначення ширини зображення;
  5. Ви можете використовувати атрибут `height для визначення висоти зображення.
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 4. Розділ 3
some-alt