Лабораторна робота 5
Тема: Гіпертекстові посилання.
Постановка задачі: Створити документ links.html із заголовком “Мої гіперпосилання” і збережіть його у тій самій папці, що і документ myself.html (лабораторна робота №1). Додайте в links.html перелік гіперпосилань на різні ресурси Інтернету. Наприклад:
Поштова служба http:/www.mail.ru/
Пошуковий сервер http:/www.rambler.ru/ і т.ін. — всього 6-8 гіперпосилань.
При зверненні до них документи повинні відкриватися у новому вікні.
Додайте у верхню частину документа links.html гіперпосилання “на головну сторінку”, яке повертає назад до документа myself.html.
Додайте у документ myself.html строку “Мої гіперпосилання”, що адресує документ links.html. Документ має відкриватися у поточному вікні.
Зробіть підпис із файла myself.html гіперпосиланням на вашу електронну адресу.
Додайте у нижню частину файла myself.html гіперпосилання “у початок сторінки”, котре адресує перший рядок документа
Гіпертекстовими посиланнями (або hiperlink) називаються виділені області документа, що дозволяють перейти до іншої його частини або до іншого документа у мережі. Гіперпосилання складаються із "внутрішньої" частини, тобто адреси документа, на котру ми посилаємося, і "зовнішньої" частини, яку видно на екрані і яку називають якорем гіперпосилання. Якір може являти собою слово або групу слів, графічне зображення або його частину. Текстові гіперпосилання виділені іншим кольором і досить часто підкреслені. Графічні гіперпосилання часто обведені рамкою того ж кольору, яким виділяються текстові гіперпосилання. Для створення гіперпосилань служить тег виду:
<A HREF="адрес" TARGET="вікно">текст посилання</A>
Опція TARGET може бути не вказана. У цьому випадку документ відкривається у поточному вікні броузера. Якщо вказано, що TARGET=_BLANK, тоді документ відкривається у новому вікні. Текст гіперпосилань тега <A> може бути довільним.
Гіперпосилання бувають: абсолютні, відносні, внутрішні. Повна адреса документа в мережі називається URL. Гіперпосилання, у якому вказаний повний URL документа, називається абсолютним і використовується для звязку із зовнішніми ресурсами Інтернету. Наприклад:
<A HREF="http://www.mail.ru/index.html" TARGET="_BLANK">російський сервер</A>
Відносне гіперпосилання вказує на документ, в якому опускається загальна адресна частина. Наприклад, із документа index.html посилаємося на test.html:
<A HREF="test.html" TARGET="_BLANK">документ test.html</A>
При використанні відносного гіперпосилання можна звертатися до папок, котрі є вкладеними або батьківськими по відношенню до папки, у якій розміщений вихідний документ. Наприклад, гіперпосилання на малюнок з іменем my.jpg, що знаходиться у папці images:
<A HREF="images/my.jpg">погляньте на малюнок</A>
Дуже часто у ролі гіперпосилання виступає малюнок, тоді можемо записати:
<A HREF=page2.html><IMG src=hyperpic.gif></A>
Внутрішні гіперпосилання призначені для навігації у межах документа. Вони мають вигляд:
<A HREF="#закладка">якір посилання</A>
а для створення закладки служить тег такого вигляду:
<A NAME="закладка">якір закладки</A>
Імена закладок повинні бути унікальними у межах документа. Наприклад, якщо перше слово документа помістити у тег:
<A NAME=start>…</A>
У нижній частині документа можна розмістити гіперпосилання:
<A HREF=#start>до початку сторінки...</A>
Гіперпосилання виділяються кольором або підкреслюванням залежно від того, як налаштований броузер. Для цього використовують атрибути LINK= та VLINK= тега <BODY>. Наприклад:
<BODY LINK=pink VLINK=green ALINK=red>
Жоден сайт не обійдеться без гіперпосилання типу “Написати веб-майстеру”, “Моя електронна адреса”. Таким чином, веб-майстер розраховує отримувати листи електронною поштою від вдячних відвідувачів. Для цього записують таким чином:
<A HREF="mailto:ekremer@ukr.net">Написати мені листа</A>
Завдання 1. Створити гіперпосилання у межах поточного документа.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Розклад занять груп
</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">
<FONT COLOR="RED" SIZE="7" FACE="ARIAL">
<TABLE WIDTH=100%>
<TR>
<TD><A HREF="#ПН">Понеділок</А></TD>
<TD>Вівторок</ТD>
<TD>Середа</ТD>
<TD>Четвер</TD>
<TD>П’ятниця</TD>
<TD>Cyбoтa</TD>
</TR>
</TABLE>
<BR><BR><BR><BR><BR><BR>
<P ALIGN=CENTER>
<FONT COLOR="RED" SIZE="6" FACE="ARIAL">
<B> Розклад занять груп
</B></FONT><BR></P>
<FONT COLOR="BLUE"SIZE="4" FACE="COURIER">
<A NAME="ПН"> Понеділок </A></B></FONT><BR>
<table width="100%" border="1" cellspacing="0" cellpadding="0"bordercolorlight="#009966" bordercolordark="#9999FF">
<tr bgcolor="#9999FF">
<td> Урок</td>
<td> 1 група</td>
<td> 2 група</td>
<td> 3 група</td>
</tr>
<tr bgcolor="#33CCCC">
<td> 1</td>
<td> Інформатика</td>
<td> Історія</td>
<td> Математика</td>
</tr>
<tr bgcolor="#33CCCC">
<td> 2</td>
<td> Фізика</td>
<td> Література</td>
<td> Англійська мова</td>
</tr>
<tr bgcolor="#33CCCC">
<td> 3</td>
<td> Математика</td>
<td> Математика</td>
<td> Історія</td>
</tr>
</table>
</BODY>
</HTML>
Зберегти документ під іменем hiper_link.html.
Завдання 2. Створити гіперпосилання на попередній документ link1.html.
<HTML>
<HEAD>
<TITLE> Навчальний файл HTML</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR= "#008080" SIZE="7">
<B> Розклад </B></FONT><BR>
<FONT SIZE="6"> <I> занять на понеділок </I>
</FONT><BR><BR>
<IMG SRC="CLOCK.JPG">
</P>
<CENTER>
<TABLE WIDTH=60%>
<TR><TD><A HREF="hiper_link.html">1 група </А></TD>
<TD>2 група </TD> </TR>
<TR><TD>3 група </TD>
<TD>4 група </TD> </TR>
<TR><TD>5 група</TD><TD>6 група </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Завдання до лабораторної роботи №5 для самостійного виконання
Створити документ links.html із заголовком “Мої гіперпосилання” і збережіть його у тій самій папці, що і документ myself.html (лабораторна робота №1). Додайте в links.html перелік гіперпосилань на різні ресурси Інтернету. Наприклад:
Поштова служба http:/www.mail.ru/
Пошуковий сервер http:/www.rambler.ru/ і т.ін. — всього 6-8 гіперпосилань.
При зверненні до них документи повинні відкриватися у новому вікні.
Додайте у верхню частину документа links.html гіперпосилання “на головну сторінку”, яке повертає назад до документа myself.html.
Додайте у документ myself.html строку “Мої гіперпосилання”, що адресує документ links.html. Документ має відкриватися у поточному вікні.
Зробіть підпис із файла myself.html гіперпосиланням на вашу електронну адресу.
Додайте у нижню частину файла myself.html гіперпосилання “у початок сторінки”, котре адресує перший рядок документа.