Тема: Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання

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

Мета: вивчити структуру та основні типи посилань, опанувати способи створення

гіперзв’язків у HTML-документах.

Завдання №1

1. Створила на робочому столі папку Web. У папці Web створила Web-сторінку, яка повинна відображати список знаків зодіаку. Список знаків зодіаку представила у вигляді маркованого списку. Документ має назву index.html.

2. За допомогою Notepad++ створила два HTM-документи, які будуть відображати

інформацію про відповідний знак зодіаку, наприклад, документи lion.htm та scorpion.htm.Вставила до створених файлів два довільні зображення. Зберегла створені HTM-документи в папці Web.

3. Створила в документі index.html два гіперпосилання до створених файлів,

наприклад, до файлів lion.htm та scorpion.htm відповідно.

4. Додала на Web-сторінку index.html два абзаци, які містять інформацію про два

знаки зодіаку. Створила гіпертекстові посилання в документі index.html на створені абзаци.

5. Створила у кінці документа index.html гіпертекстове посилання, на початок

документа index.html.

6. Створила у документі index.html гіпертекстове посилання на будь-який файл, що

перебуває на робочому столі.

Завдання №2

1. Створила папку Web_2. У папці Web_2 створіть Web-сторінку

з назвою reference.html.

2. Додала до створеної Web-сторінки reference.html два будь-яких gif зображення.

3. Змінила перше зображення, виставила його ширину 180 (висота вираховується

автоматично).

4. Змінила друге зображення, зробила його ширину 80.

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

Приклад:

<LI> Людина набагато розумніша, ніж їй це треба для щастя.

<LI> Нікому не поставити нас на коліна! Ми лежали і будемо лежати!

<LI> Думаю, не помилюся, якщо промовчу.

<LI> Прошу послати мене на курси підвищення зарплати.

</OL>

6. Додала до сторінки reference.html ще один нумерований список, який повинен

міститися після попереднього. Нумерація в списку повинна бути великими римськими цифрами і починатися з чотирьох.

Приклад:

<LI> Життя, звичайно, не вдалася, а в іншому все нормально.

<LI> Якщо вам довго не телефонують родичі або друзі, значить у них усе добре.

<LI> Вибачите, що я говорю, коли ви перебиваєте.

</OL> 7. Відокремити перше зображення від тексту по вертикалі й по горизонталі по 20

пікселів.

8. Додала до сторінки reference.html третє зображення. Зробила третє зображення

в рамці, товщина якої 10 пікселів.

9. Додала до першого зображення альтернативний текст.

10. Зробила наприкінці сторінки посилання у вигляді графічного зображення.

Приклад:

<IMG src=D:\distr_fom\FOTO\веб\ E-MAIL\5.gif align=right alt="Простий

малюнок">

Приклад виконання завдання:

<HEAD>

<TITLE>Закони Мерфи</TITLE>

</HEAD>

<BODY>

<IMG src=D:\distr_fom\FOTO\веб\ E-MAIL\5.gif align=right WIDTH=180

HSPACE=20 VSPACE=20 alt="Простий малюнок">

<LI>Людина набагато розумніша, ніж їй це треба для щастя.

<LI> Нікому не поставити нас на коліна! Ми лежали і будемо лежати!

<LI> Думаю, не помилюся, якщо промовчу.

<LI> Прошу послати мене на курси підвищення зарплати.

</OL>

<LI> Ціль визначає калібр.

<LI> Першим вітається той, у кого слабіші нерви.

<LI> Мудрість не завжди приходить із віком. Буває, що вік приходить один.

</OL>

<LI> Життя, звичайно, не вдалася, а в іншому все нормально.

<LI> Якщо вам довго не телефонують родичі або друзі, значить у них всі добре.

<LI> Вибачите, що я говорю, коли ви перебиваєте.

</OL>

<BR> Мало знати собі ціну-<IMG src=D:\distr_fom\FOTO\веб\ E- MAIL\23.gif

align=absmiddle WIDTH=80 border=10 bordercolor=red > треба ще користуватися попитом

<P> <IMG src=D:\distr_fom\FOTO\веб\GERB\usa.gif align=bottom >Якщо дружина

зненацька дарує вам краватку, виходить,

<BR> нова норкова шубка їй уже не подобається.

<A hrif=E:\Documents and Settings\vika\Мої документи\HTML\Мерфи.doc> <IMG

src=D:\distr_fom\FOTO\веб\OTHER\book.gif></A>

</BODY>

</HTML>

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

1. Що таке внутрішнє гіперпосилання? Як воно організується?

У Web-сторінки можна включати гіперпосилання двох типів: внутрішні та

зовнішні. Внутрішні гіперпосилання використовуються для переміщення в межах

однієї Web-сторінк.

Для того, щоб внутрішнє гіперпосилання на деякий текст стало можливим, цей

текст необхідно помітити:

<a name="Some_name"> Текст, на який робиться посилання </a>

2. Що таке зовнішнє гіперпосилання? Як воно організується? Зовнішні гіперпосилання оформлюються за допомогою параметра "href" тега "а" та мають вигляд:

<a href="шлях"> Текст гіперпосилання </a>

Наприклад:

<a href="main/malunok.bmp"> Цікавий малюнок </a>

Якщо документ знаходиться на іншому комп'ютері, треба вказати його URL

адресу.

Наприклад:

Цікавий малюнок </a

3.Як використовувати зображення у вигляді гіперпосилання? Графічні елементи як посилання. Існує два способи використовувати
зображення як гіперпосилання: все графічне зображення або окремі частини
одного зображення. Ще один тип посилання називається графічною схемою
(image map), що досить часто використовують для організації навігації по
сторінках Web-Вузла.

Висновок. Вивчила структуру та основні типи посилань, опанувати способи створення гіперзв’язків у HTML-документах.