Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках�Практична робота 3
За навчальною програмою 2018 року
Урок 19
10
(11)
Актуалізація опорних знань і життєвого досвіду
Розділ 3 § 19
Пропоную розповісти про свої досягнення за останні уроки з розділу «Графіка та мультимедіа для веб-середовища».
Я дізнався...
Я навчився...
Я вже зробив...
Я став розуміти...
Я переконався...
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Повторюємо
Розділ 3 § 14
Для розміщення на веб-сторінках в Інтернеті використовують растрові зображення у форматах:
JPG
GIF
PNG
Оскільки ці формати передбачають стискання даних і файли мають менший обсяг, ніж відповідні файли форматів без стискання.
9
© Вивчаємо інформатику teach-inf.at.ua
Графіка для веб-середовища
Розділ 3 § 14
Щоб вставити малюнок на веб-сторінку, необхідно скористатися тегом:
<img src="my.jpg">
Замість my.jpg можна вставити ім'я будь-якого іншого файла з малюнком з розширенням:
Де my.jpg — ім'я графічного файла, який міститься в одній папці з файлом html-документа.
.jpg
.gif
.png
.bmp
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Графіка для веб-середовища
Розділ 3 § 14
Деякі атрибути тегу img:
src
Вказує URL-адресу зображення
width
Вказує ширину зображення
height
Вказує висоту зображення
alt
Вказує альтернативний текст для зображення
usemap
Визначає зображення як зображення на стороні клієнта
ismap
Визначає зображення у вигляді зображення на стороні сервера
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мультимедіа на веб-сторінках
Розділ 3 § 17
Як додати аудіо на веб-сторінку?
<audio src="audio.mp3" controls></audio>
Шлях до файлу
Додати панель керування
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мультимедіа на веб-сторінках
Розділ 3 § 17
Приклад використання HTML тега <audio>:
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мультимедіа на веб-сторінках
Розділ 3 § 17
Як додати відео на веб-сторінку?
<video src="video.mp4" controls</video>
Шлях до файлу
Додати панель керування
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мультимедіа на веб-сторінках
Розділ 3 § 17
Приклад використання HTML тега <video>:
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Гіперпосилання
Розділ 3 § 19
Сайт може складатись із багатьох пов'язаних гіперпосиланнями веб-сторінок, одна з яких є головною. Вона відкривається першою і пов'язана з іншими сторінками за допомогою гіперпосилань.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Гіперпосилання
Розділ 3 § 19
Файл головної сторінки називають, як правило,
інші файли можна називати як завгодно наприклад,
about_me.html
friends.html
photos.html
index.html
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Гіперпосилання
Розділ 3 § 19
Для успішного керування розробкою сайта файли краще розмістити в одній папці з html-документом або у вкладених папках.
Нехай в одній папці з файлом index.html створено новий файл prf.html, зміст якого може бути довільним і містити вашу фотографію. Для цього випадку у файлі index.html фразу подивитися моє фото можна зробити гіперпосиланням, яке матиме такий вигляд:
<а href="prf.html"> подивитися моє фото </а>
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Гіперпосилання
Розділ 3 § 19
Гіперпосиланням може бути і малюнок. Якщо замість тексту вказати тег вставляння малюнка:
<а href="prf.html“><img src=foto1.jpg></a>
То гіперпосилання спрацює під час клацання малюнка.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Гіперпосилання
Розділ 3 § 19
Головна веб-сторінка може містити такий набір тегів і тексту:
<html>
<body>
<а href="first.html">Перша сторінка</а><br>
<а href="second.html">Друга сторінка</а><br>
<а href="third.html">Третя сторінка</а><br>
</body>
</html>
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Гіперпосилання
Розділ 3 § 19
Для повернення до головної сторінки на інших сторінках повинні бути відповідні посилання. Наприклад, такі:
<а href=
"index.html">Головна</a>
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Розгадайте ребус
Гіперпосилання
«Ребуси українською» © rebus1.com
Розділ 3 § 19
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Продовж речення
Розділ 3 § 19
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Домашнє завдання
Розділ 3 § 19
Розповісти у соціальних мережах про досягнення на уроках інформатики.
Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань графіки та мультимедіа для веб-середовища.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Працюємо за комп’ютером
Практична робота 3
Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках
Розділ 3 § 19
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Працюємо за комп’ютером
Розділ 3 § 19
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Дякую за увагу!
За навчальною програмою 2018 року
Урок 19
10
(11)