Гіпертекстові посилання

Гіпертекстовими посиланнями (або hiperlink) називаються виділені області документа, що дозволяють перейти до іншої його частини або до іншого документа у мережі. Гіперпосилання складаються із " внутрішньої" частини, тобто адреси документа, на котру ми посилаємося, і " зовнішньої" частини, яку видно на екрані і яку називають якорем гіперпосилання. Якір може являти собою слово або групу слів, графічне зображення або його частину. Текстові гіперпосилання виділені іншим кольором і досить часто підкреслені. Графічні гіперпосилання часто обведені рамкою того ж кольору, яким виділяються текстові гіперпосилання. Для створення гіперпосилань служить тег виду:

< A HREF=" адрес" TARGET=" вікно" > текст посилання< /A>

Опція TARGET може бути не вказана. У цьому випадку документ відкривається у поточному вікні броузера. Якщо вказано, що TARGET=¢ ¢ _BLANK¢ ¢, тоді документ відкривається у новому вікні. Текст гіперпосилань тега < A> може бути довільним.

Гіперпосилання бувають: абсолютні, відносні, внутрішні. Повна адреса документа в мережі називається URL. Гіперпосилання, у якому вказаний повний URL документа, називається абсолютним і використовується для зв¢ язку із зовнішніми ресурсами Інтернету. Наприклад:

< A HREF=" https://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=UTF-8" >

< 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 для самостійного виконання

1. Створіть документ links.html із заголовком “Мої гіперпосилання” і збережіть його у тій самій папці, що і документ myself.html (лабораторна робота №1). Додайте в links.html перелік гіперпосилань на різні ресурси Інтернету. Наприклад:

Поштова служба http: /www.mail.ru/

Пошуковий сервер http: /www.rambler.ru/ і т.ін. — всього 6-8 гіперпосилань.

При зверненні до них документи повинні відкриватися у новому вікні.

2. Додайте у верхню частину документа links.html гіперпосилання “на головну сторінку”, яке повертає назад до документа myself.html.

3. Додайте у документ myself.html строку “Мої гіперпосилання”, що адресує документ links.html. Документ має відкриватися у поточному вікні.

4. Зробіть підпис із файла myself.html гіперпосиланням на вашу електронну адресу.

5. Додайте у нижню частину файла myself.html гіперпосилання “у початок сторінки”, котре адресує перший рядок документа.