2. 9
Малюнки та гіперпосилання
на веб-сторінціРозділ 6
§ 22
Веб-сторінка стає більш цікавою і зручною, якщо її
оформити малюнками та графічними елементами.
3. 9
Вставляння малюнківРозділ 6
§ 22
Щоб вставити малюнок на веб-сторінку, необхідно
скористатися тегом
<img src="my.jpg">
Замість my.jpg можна вставити ім'я будь-якого іншого
файла з малюнком з розширенням:
Де my.jpg — ім'я графічного файла, який міститься в
одній папці з файлом html-документа.
.jpg .gif .png .bmp
4. 9
Вставляння малюнківРозділ 6
§ 22
Якщо малюнок і html-файл не знаходяться в одній
папці, то:
• малюнок знаходиться у вкладеній папці images:
<img src="images/my.jpg">
• малюнок знаходиться у зовнішній папці images:
<img src="../images/my.jpg">
• малюнок знаходиться у папці images на сайті
interactive.ranok.com.ua:
<img
src="http://interactive.ranok.com.ua/images/my.jpg">
5. 9
Вставляння малюнківРозділ 6
§ 22
Для опису взаємного розміщення малюнка
(наприклад, pr1.png) і тексту документа
використовують такі теги:
• малюнок з правого краю, обтікання текстом ліворуч:
<img src=pr1.png align=right>
• відстань між текстом і малюнком по вертикалі 10
пікселів і по горизонталі 30 пікселів:
<img src=pr1.png Vspace=10 Hspace=30>
6. 9
Вставляння малюнківРозділ 6
§ 22
Продовження…
Якщо встановити вказівник миші на малюнок,
з'явиться вказаний текст — моє фото. Крім того,
значення параметра alt буде виведене на екран
браузером замість малюнка, якщо відображення
малюнків вимкнуте.
• опис малюнка:
<img src=pr1.png alt="моє фото">
• ширина малюнка 100 пікселів:
<img src=pr1.png width=100>
7. 9
Вставляння малюнківРозділ 6
§ 22
Продовження…
• висота малюнка 20 % від висоти робочої області
браузера:
<img src=pr1.png height=20%>
• товщина рамки навколо малюнка 5 пікселів:
<img src=pr1.png border=5>
8. 9
ГіперпосиланняРозділ 6
§ 22
Сайт може складатись із багатьох пов'язаних
гіперпосиланнями веб-сторінок, одна з яких є
головною. Вона відкривається першою і пов'язана з
іншими сторінками за допомогою гіперпосилань.
9. 9
ГіперпосиланняРозділ 6
§ 22
Файл головної сторінки називають, як правило,
інші файли можна називати як завгодно наприклад,
about_me.html friends.html photos.html
index.html
10. 9
ГіперпосиланняРозділ 6
§ 22
Для успішного керування розробкою сайта
файли краще розмістити в одній папці з html-
документом або у вкладених папках.
Нехай в одній папці з файлом index.html створено
новий файл prf.html, зміст якого може бути довільним і
містити вашу фотографію. Для цього випадку у файлі
index.html фразу подивитися моє фото можна зробити
гіперпосиланням, яке матиме такий вигляд:
<а href="prf.html"> подивитися моє фото </а>
11. 9
ГіперпосиланняРозділ 6
§ 22
Гіперпосиланням може бути і малюнок. Якщо замість
тексту вказати тег вставляння малюнка:
<а
href="prf.html“><img
src=foto1.jpg></a>
То гіперпосилання
спрацює під час клацання
малюнка.
12. 9
ГіперпосиланняРозділ 6
§ 22
Головна веб-сторінка може містити такий набір тегів і
тексту:
<html>
<body>
<а href="first.html">Перша сторінка</а><br>
<а href="second.html">Друга сторінка</а><br>
<а href="third.html">Третя сторінка</а><br>
</body>
</html>
13. 9
ГіперпосиланняРозділ 6
§ 22
Для повернення до головної сторінки на інших
сторінках повинні бути відповідні посилання.
Наприклад, такі:
<а href=
"index.html">
Головна</a>
14. 9
Питання для самоперевіркиРозділ 6
§ 22
1. Як вставити малюнок на веб-сторінку?
2. Як вирівняти малюнок по лівому краю вікна
браузера?
3. Як встановити розміри малюнка на все вікно
браузера?
4. Як створити гіперпосилання?
5. Як зробити малюнок гіперпосиланням на іншу html-
сторінку?
