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