Веб-сторінка стає більш цікавою та наочною, якщо її доповнити малюнками та графічними елементами.
Вставляння малюнків
Щоб вставити малюнок на веб-сторінку, необхідно скористатися тегом <img src="my.jpg">, де img — ім’я тегу, призначеного для вставляння зображення, src="my.jpg" — атрибут, в якому вказується ім’я файла з малюнком.
В атрибуті можна використовувати імена графічних файлів із розширенням .jpg, .jpеg, .gif, .png або .bmp. Якщо малюнок і html-файл розташовані не в одній папці, то крім імені файла зазначають шлях до нього.
Якщо малюнок міститься:
• у вкладеній папці images: <img src="images/my.jpg">
• у зовнішній папці images: <img src="../my.jpg">
Для визначення способу розташування малюнка на веб-сторінці використовують окремі атрибути тегу.
Розглянемо приклад розташування малюнка "pr1.png" на веб-сторінці (див. рисунок):
• малюнок з лівого краю, обтікання текстом праворуч:
<img src="pr1.png" align="left">
• відстань між текстом і малюнком по вертикалі 10 пікселів, по горизонталі — 30 пікселів: <img src="pr1.png" vspace="10" hspace="30">
• опис малюнка: <img src="pr1.png" alt-'моє фото">
Примітка. Якщо навести вказівник миші на малюнок, з’явиться текст — моє фото. Крім того, значення параметра alt буде виведене на екран замість малюнка, якщо у браузері режим показу малюнків вимкнуто.
• ширина малюнка 100 пікселів, висота — 20 % від висоти робочої області браузера: <img src="pr1.png" width="100" height="20%">
• товщина рамки навколо малюнка 5 пікселів:
<img src="pr1.png" border="5">
Гіперпосилання
Сайт може складатись із багатьох пов’язаних гіперпосиланнями веб-сторінок, одна з яких є головною. Головна веб-сторінка відкривається першою. Файл головної сторінки називають, як правило, index.html.
Для створення гіперпосилань на веб-сторінки сайта та зовнішні ресурси мережі Інтернет використовують тег <a>...</a>.
Нехай в одній папці з файлом index.html створено файл prf.html, який містить вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, яке матиме такий вигляд:
<a href=ꞋꞋprf.htmlꞋꞋ> Подивитися фото </a>
Як гіперпосилання можна використати малюнок. Для цього треба вказати тег вставляння малюнка: <a href=ꞋꞋprf.htmlꞋꞋ><img src=ꞋꞋfoto1.jpgꞋꞋ></a>
Мті-код головної веб-сторінки може мати такий вигляд:
<html>
<body>
<a href=ꞋꞋfirst.htmlꞋꞋ>Перша сторінка</a><br>
<a href=ꞋꞋsecond.htmlꞋꞋ>Друга сторінка</a><br>
<a href=ꞋꞋthird.htmlꞋꞋ>Третя сторінка</a><br>
</body>
</html>
Під час клацання напису Перша сторінка (Друга сторінка, Третя сторінка) відбудеться перехід за гіперпосиланням.
Для повернення на головну сторінку на інших веб-сторінках мають бути відповідні посилання. Наприклад: <a href=ꞋꞋindex.htmlꞋꞋ>Головна</a>