- •Міністерство освіти і науки України
- •Поради при створенні Web-сторінки
- •Завдання до лабораторних робіт
- •Лабораторна робота №1 Простий документ html. Форматування тексту
- •Завдання до лабораторної роботи №1 для самостійного виконання
- •Студент групи *-ек а.П.Іванов Лабораторна робота №2 Графіка
- •Завдання до лабораторної роботи №2 для самостійного виконання
- •Лабораторна робота №3 Таблиці
- •Завдання до лабораторної роботи №3 для самостійного виконання
- •Лабораторна робота №4 Списки
- •Завдання до лабораторної роботи №4 для самостійного виконання
- •Лабораторна робота №5 Гіпертекстові посилання
- •Завдання до лабораторної роботи №5 для самостійного виконання
- •Лабораторна робота №6 Сенсорні зображення
- •Завдання до лабораторної роботи №6 для самостійного виконання
- •Лабораторна робота №7 Створення і використання форм
- •Завдання до лабораторної роботи №7 для самостійного виконання
- •Лабораторна робота №8 Фрейми
- •Завдання до лабораторної роботи №8 для самостійного виконання
- •Використана література
Лабораторна робота №5 Гіпертекстові посилання
Гіпертекстовими посиланнями (або 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>