1 of 17

Графічні зображення та гіперпосилання на вебсторінці

За навчальною програмою 2017 року

Урок 32

8

teach-inf.com.ua

2 of 17

Графічні зображення �та гіперпосилання на вебсторінці

Розділ 4 § 22

Сайт стає більш цікавим і наочним, якщо його вебсторінки доповнити графічними зображеннями, а також застосувати гіперпосилання.

8

3 of 17

Вставляння малюнків

Розділ 4 § 22

Щоб вставити на вебсторінку малюнок з файлу, необхідно скористатися тегом:

В атрибуті можна використовувати імена графічних файлів із розширеннями:

.jpg

.gif

.png

.bmp

назва тегу, призначеного для вставляння зображення

атрибут, в якому вказується ім’я файлу з малюнком, що міститься в одній папці з HTML-файлом

8

4 of 17

Вставляння малюнків

Розділ 4 § 22

Якщо малюнок і HTML-файл містяться в різних папках, то, крім імені файлу, потрібно вказувати шлях до нього із зазначенням назв відповідних папок.

Якщо малюнок міститься у вкладеній папці images:

Якщо малюнок міститься у зовнішній папці images:

8

5 of 17

Вставляння малюнків

Розділ 4 § 22

Для визначення способу розташування малюнка на вебсторінці використовують певні атрибути тегу. Наведемо можливе розташування малюнка на вебсторінці та обтікання його текстом.

малюнок з лівого краю, обтікання текстом праворуч:

відстань між текстом і малюнком по вертикалі 10 пікселів, по горизонталі — 30 пікселів:

8

6 of 17

Вставляння малюнків

Розділ 4 § 22

Продовження…

Примітка. Якщо навести вказівник на малюнок, з’явиться текст — Моє фото. Крім того, значення параметра alt буде виведене на екран замість малюнка, якщо у браузері вимкнуто показ малюнків.

опис малюнка:

ширина малюнка 100 пікселів, висота — 20% від висоти робочої області вікна браузера:

8

7 of 17

Вставляння малюнків

Розділ 4 § 22

Продовження…

товщина рамки навколо малюнка — 5 пікселів:

8

8 of 17

Додавання гіперпосилань

Розділ 4 § 22

Сайт складається з багатьох вебсторінок, пов’язаних гіперпосиланнями, одна з яких є головною.

Ця сторінка сайту зазвичай міститься у файлі index.html і відкривається першою

index.html

8

9 of 17

Додавання гіперпосилань

Розділ 4 § 22

Для створення гіперпосилань на вебсторінки сайту та зовнішні ресурси інтернету використовують тег <a>...</a>.

Приклад додавання гіперпосилань до рисунків і фрагментів тексту. Нехай в одній папці з файлом index.html створено файл prf.html, який містить вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, яке матиме такий вигляд:

<a href = "prf.html"> Подивитися фото </a>

8

10 of 17

Додавання гіперпосилань

Розділ 4 § 22

Щоб гіперпосилання можна було додати до малюнка, необхідно вказати тег вставляння малюнка:

То гіперпосилання спрацює під час клацання малюнка.

8

11 of 17

Додавання гіперпосилань

Розділ 4 § 22

HTML-код головної вебсторінки може мати такий вигляд:

8

12 of 17

Додавання гіперпосилань

Розділ 4 § 22

Для повернення на головну сторінку на інших вебсторінках сайту мають бути відповідні гіперпосилання. Наприклад:

<а href=

"index.html">Головна</a>

8

13 of 17

Розгадайте ребус

Гіперпосилання

Розділ 4 § 22

8

14 of 17

Питання для самоперевірки

Як вставити малюнок на вебсторінку?

У чому відмінність між значеннями атрибутів для вставлення малюнку із поточної, внутрішньої і зовнішньої папок?

Як вирівняти малюнок за правим краєм вікна браузера?

Як задати розмір малюнка? Що означає розмір у відсотках?

Розділ 4 § 22

Як створити гіперпосилання?

Як додати до малюнка гіперпосилання на іншу вебсторінку?

8

15 of 17

Домашнє завдання

Проаналізувати

§ 22, ст. 143-145

Розділ 4 § 22

8

16 of 17

Працюємо за комп’ютером

Розділ 4 § 22

Сторінка

145

8

17 of 17

Дякую за увагу!

За навчальною програмою 2017 року

Урок 32

8

teach-inf.com.ua