Графіка та мультимедіа для вебсередовища

 Уроки 19, 20

17.11.2025

Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на вебсторінках


Вітаю! Сьогодні узагальнюємо роботу з графікою в HTML та тренуємося додавати стікери та емодзі у HTML код

Крок 1: Пригадуємо

👉Додаємо відео👈
Додати відео на сторінку можна різними способами.

Найпростіший:
відкрити відео на YouTube;
скопіювати код вставки у форматі <>;
вставити в середовище.
Приклад:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Bg_tJvCA8zw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

</iframe>

Крок 2: ПРАКТИЧНА РОБОТА

Посилання (якщо не буде тривоги)

Кроки 3-4 виконуємо, якщо буде обмаль часу

Крок 3:Опрацюй інформацію щодо додавання емодзі

Посилання

Крок 4: Переглянь таблицю з кодами для емодзі

Посилання

👉Крок 5: Завдання

Додай емодзі до сайту за посиланням

1 картинка - 3 бали

________________________________________

Уроки 17, 18

10.11.2025

Мультимедіа на вебсторінках 

Вітаю! Сьогодні опрацюємо додавання мультимедіа на вебсторінки

Крок 1: Переглянь презентацію

Посилання на презентацію
Як додати відео (інструкція)

Як додати відео з YouTube (інструкція) - скористайтеся нею при виконанні практичного завдання

💪Крок 2: Завдання
на 9 балів

Змінити на інше відео

на 12 балів

Змінити на інше відео та змінити розміри для відео у режимах "Великий", "Маленький", "Нормальний"

___________________________________________

Уроки 15, 16

27.10.2025

Графіка для вебсередовища. Методи створення та збереження зображень для вебсторінок


Вітаю! Сьогодні продовжуємо працювати з HTML,  опрацюємо створення графіки для вебсторінок, вивчимо методи створення та збереження зображень для вебсторінок

Крок 1: Як створювати графіку для вебсередовища

Ми вже працювали з графікою при створенні сайту-резюме. Але розглянемо детальніше в цьому розділі

Посилання на презентацію

Крок 2: Опрацьовуємо приклади

Види графіки

Створення SVG фігур

💪Крок 3: Завдання
на 9 балів

Зміни колір заливки фігури у коді за посиланням

на 12 балів

Зміни колір заливки, форму фігури, колір контуру та розмір фігури у коді за посиланням

Немає коментарів:

Дописати коментар