Лабораторна робота №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 нумерований список, який повинен міститися після першого зображення. Нумерація в списку повинна бути арабськими цифрами.
Приклад:
<OL type=l>
<LI> Людина набагато розумніша, ніж їй це треба для щастя.
<LI> Нікому не поставити нас на коліна! Ми лежали і будемо лежати!
<LI> Думаю, не помилюся, якщо промовчу.
<LI> Прошу послати мене на курси підвищення зарплати.
</OL>
6. Додала до сторінки reference.html ще один нумерований список, який повинен
міститися після попереднього. Нумерація в списку повинна бути великими римськими цифрами і починатися з чотирьох.
Приклад:
<OL type=A>
<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="Простий малюнок">
<OL type=l>
<LI>Людина набагато розумніша, ніж їй це треба для щастя.
<LI> Нікому не поставити нас на коліна! Ми лежали і будемо лежати!
<LI> Думаю, не помилюся, якщо промовчу.
<LI> Прошу послати мене на курси підвищення зарплати.
</OL>
<OL type=I start=5>
<LI> Ціль визначає калібр.
<LI> Першим вітається той, у кого слабіші нерви.
<LI> Мудрість не завжди приходить із віком. Буває, що вік приходить один.
</OL>
<OL type=A>
<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 href="http://www.abc.com/main/malunok.bmp">
Цікавий малюнок </a
3.Як використовувати зображення у вигляді гіперпосилання? Графічні елементи як посилання. Існує два способи використовувати
зображення як гіперпосилання: все графічне зображення або окремі частини
одного зображення. Ще один тип посилання називається графічною схемою
(image map), що досить часто використовують для організації навігації по
сторінках Web-Вузла.
Висновок. Вивчила структуру та основні типи посилань, опанувати способи створення гіперзв’язків у HTML-документах.
