Лабораторна робота № 3

ТЕМА: Графіка і гіперпосилання в HTML.

Мета: Навчитися використовувати в HTML-документах графічні зображення і вивчити особливості їхнього розташування в документі. Освоїти застосування гіперпосилань і вивчити їхньої можливості. Закріпити на практиці отримані знання і навички.

Теоретичні відомості

Просте посилання можна записати у вигляді:

<А HREF="http://polyn.net.kiae.su/index.html"> Індекс бази даних "Полин" </А>

Іншою формою використання тега А є визначення точок усередині тексту, на які можна посилатися. Такий метод використовується, коли документ не можна поділити на частини і необхідно швидко пересуватися зі змісту по тексті.

<А NAME=point">

Для посилання на таку точку в іншому документі використовують таку форму URL:

<А HREF=" http://polyn.net.kiae.su/index.html #point">

Посилання на точку "point" y документі "index.html"</A>

Посилатися можна не тільки на документ HTML, a i на будь-який файл. При цьому якщо браузер уміє відчиняти даний тип файла, те його вміст буде відображено в браузері, інакше буде задане питання: "Записати файл або спробувати його відчинити, використовуючи список асоціацій типів файла". Якщо ми хочемо, щоб посиланням на інший документ був малюнок, то тег <IMG> повинний бути тілом тега <А>.

Приклад:

<А HREF="next. html"><IMG SRC="RightArrow. gif x/A>

Зовнішні посилання

Структура зовнішнього посилання складається з покажчика (якоря) і адреси. Існують два способи запису адреси переходу по зовнішньому посиланню.

Абсолютний. У значенні параметра href указується повний шлях до ресурсу, посилання на який ставиться в документі, наприклад:

<А HREF="http://www.site.ru/docs/pagel.html">Перехід на сторінку 1</А>

Відносний. У значенні параметра href указується шлях кінцевого документа, до якого розміщена сторінка, що містить посилання, наприклад:

<А HREF="page2.html">Перехід на сторінку 2 зі сторінки 1</А>

Такий формат запису зовнішнього посилання має на увазі розташування файлу на page2.html (на який указує гіперпосилання) у тому ж каталозі, що і файл page1.html (з якого буде здійснюватися перехід).

Тепер спробуємо ускладнити ситуацію і припустимо, що файл page2.html розміщений у корені сайта www.site.uа, а файл page1.html як і раніше, міститься в каталозі docs. У цьому випадку запис зовнішнього посилання з використанням відносного шляху до файла набуде такого вигляду:

<А HREF=".../page2.html"> Перехід на сторінку 2 зі сторінки 1</А>

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

Варто пам'ятати, що зовнішнє посилання, шлях до якого відносний, може вести тільки на документи існуючого сайта. Перенести відвідувача на сторінку інтернет-ресурсу (наприклад, із сайта www.sitel.ua на www.site2.ua) таке посилання не може.

Графічне зображення як посилання

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

<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a>

Внутрішні посилання

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

Структура внутрішнього гіперпосилання включає двох частин — саме посилання і її іменний ідентифікатор (діез плюс ім'я елемента, аналогічне значенню параметра href самого гіперпосилання), що дозволяє переміститися в потрібне місце електронного документа. Приклад складання внутрішніх гіперпослань приведений у листинге 2.16.

Варто помітити, що для позначення місця, у яке потрібно перенести користувача документа, застосовується порожня конструкція <а NAME="font"x/A>. Справа в тому, що при створенні внутрішніх посилань візуально виділяти розташування іменного ідентифікатора не має змісту, тому що основна мета — перехід у відповідний розділ поточного документа.

Основні параметри тега <а> наведені в таблиці.

Параметр	Функція
HREF	Вказівка адреси переходу по гіперпосланню
TARGET	Визначення місця призначення переходу (поточне/нове вікно)
STYLE	Завдання стильового шаблона
CLASS	Указівка класу стильового шаблона
NAME	Іменний ідентифікатор внутрішнього гіперпосилання

Хід роботи

1. Продовжити створення особистого сайту. Створити HTML-документ, що містить у собі зміст вашого особистого сайту.

2. Збережіть документ під назвою index.html.

3. Кожен пункт змісту оформити як гіперпосилання на відповідні HTML-документи, створені на попередніх лабораторних роботах (avtobiogr.html, hobby.html, spisok.html).

4. У документі avtobiogr.html розмістіть особисту фотографію. Використаний тег запишіть у звіт.

5. У документ hobby.html вставте графічне зображення, що ілюструє ваші інтереси. Використаний тег запишіть у звіт.

6. Додайте графічне зображення у документ spisok.html. Використаний тег запишіть у звіт.

Вимоги

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

2. Задати текстовий опис зображення в момент завантаження картинки.

3. Обов'язково вказати позицію картинки щодо поточної текстового рядка.

4. Документ повинний містити графічне зображення у виді гіперпосилання.

Звіт

Повинен містити вихідний текст HTML-коду і використані теги у завданнях

4-6.

Підготовка до лабораторної роботи 4:

Підготуйте мінімум 4-8 фотографій у цифровому форматі (.gif, .jpeg, .png) зі свого життя.

Контрольні питання

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

2. Для чого вони використовуються?

3. Який контейнер використовується для запису гіперпосилання?

4. Що є значенням атрибута HREF?

5. Як зробити так, щоб посиланням на інший документ був малюнок?

6. Опишіть призначення й основні атрибути тегу <IMG>.

7. Які графічні формати підтримуються Web броузерами?

8. У чому переваги використання атрибутів WIDTH I HEIGHT?

9. Як зберігається графічне зображення, використовуване в HTML-документі?