Вставляння малюнків
Щоб вставити малюнок на вебсторінку, необхідно скористатися тегом <img src = "my.jpg">, де img — ім’я тегу, призначеного для вставляння зображення, src = "my.jpg" — атрибут, в якому вказується ім’я файлу з малюнком.
 
В атрибуті можна використовувати імена графічних файлів із розширеннями .jpg, .jpеg, .gif, .png або .bmp. Якщо малюнок і HTML-файл містяться в різних папках, то, крім імені файлу, потрібно зазначати шлях до нього.
Приклад:
Якщо малюнок міститься у вкладеній папці images:
<img src = "images/my.jpg">
Якщо малюнок міститься у зовнішній папці images:
<img src = "../images/my.jpg">
Для визначення способу розташування малюнка на вебсторінці використовують окремі атрибути тегу. Розглянемо можливе розташування малюнка на вебсторінці (рис.1).
 
8.PNG
Рис.1
 
Опишемо малюнки і пояснимо HTML-коди:
  • малюнок з лівого краю, обтікання текстом праворуч:
    <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>.
 
Атрибут href визначає URL-адресу сторінки на яку вказує посилання. Оскільки в якості адреси посилання може використовуватися документ будь-якого типу, то результат переходу за посиланням залежить від кінцевого файлу. За замовчуванням новий документ завантажується в поточне вікно браузера, однак це властивість можна змінити за допомогою атрибута target . Якщо атрибут href відсутній, то теґ <a> не є гіперпосиланням.
 
Нехай в одній папці з файлом index.html створено файл prf.html, який містить вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, яке матиме такий вигляд:
<a href = "prf.html"> Подивитися фото </a>
 
Гіперпосилання можна додати до малюнка. Для цього треба вказати тег вставляння малюнка:
<a href = "prf.html"><img src = "foto1.jpg"></a>
Приклад:
HTML-код головної вебсторінки може мати такий вигляд:
<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>
Джерела:
Інформатика : підруч. для 8 кл. закл. загал. серед. освіти / [О. О. Бондаренко, В. В. Ластовецький, О. П. Пилипчук, Є. А. Шестопалов]. — Харків : Вид-во «Ранок», 2021