28-10-2021, 11:19

Урок №5. Создание гиперссылок

Часть текста, название, участок изображения, имеющие ссылки на другой текст внутри этого же документа или на другой документ в сети Интернет, называются гипертекстовой связью (Hypertext link) или гипертекстовой ссылкой

Часть текста, название, участок изображения, имеющие ссылки на другой текст внутри этого же документа или на другой документ в сети Интернет, называются гипертекстовой связью (Hypertext link) или гипертекстовой ссылкой.

Изображение или участок текста, слово, с которым связаны гиперсвязи, называется якорем (anchor), линком (link) или ссылкой.

На экране якорь выделяется каким-либо образом на фоне остального текста — подчеркиванием и особым цветом, который устанавливается по умолчанию.

Чтобы превратить обычный документ в гипертекстовый, в него нужно вставить гипертекстовые связи.

Для этого используют парный тег <А href=" ">...</А>.

Атрибут href определяет URL-адрес ссылки (Uniform Resource Locator—унифицированный локатор ресурса), на которую будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тегами (в данном случае объект обозначен многоточием).

Например,

<А href="https://www.anecdot.ru">Анекдоты</А>

Если ссылка производится на документ, находящийся в той же папке, что и исходный документ, достаточно указать только имя файла:

<А href="U2.html">Устройство компьютера</А>

Для гиперссылки можно создать всплывающую подсказку к тексту ссылки с помощью атрибута title="текст":

<А href="U2.html" title="Блоки ПК">Устройство компьютера</А>

Якорем гиперссылки может быть не только текст, но и рисунок:

<A href="new.htm"><img src="ris.gif"></A>

Для перехода внутри одного документа используются два тега <A>.

Первая команда с атрибутом href является источником перехода (якорем), вторая с атрибутом name — приемником.

<A href="#метка">Текст</A> — задание перехода по метке.

...

<A name="метка">Метка</A>—сюда браузер переходит по ссылке.

На экране ничего не отображается.

Гиперссылки можно использовать для размещения звуковых или видео-файлов:

<A href="Zvuk.wav"> Послушайте песенку (90K)</A>

Размер звукового файла указан в килобайтах! Работая со звуковыми файлами, не забывайте, что фрагменты звука должны быть короткими.

Обычно браузер устанавливает цветовое оформление ссылок по умолчанию.

Можно изменить эти настройки специальными атрибутами тега <BODY>:

link — цвет неактивированных ссылок;

vlink — цвет посещенных ссылок;

alink — цвет активной ссылки.

<BODY link="green" alink="lime" vlink="gray" >

Задание №1

Создайте два HTML-документа, отличающихся цветом фона. Сохраните их под именами STR1.HTML и STR2.HTML соответственно.

Создайте гиперссылки с первого документа на второй и обратно.

Первый HTML-документ.
<HTML><HEAD>
<TITLE>Страничка A</TITLE>
</HEAD>
<BODY bgcolor="yellow">
<Н1 align="center">Cтраничка А</H1>
<A href="STR2.HTML">Вперед</A>
</BODY>
</HTML>
Второй HTML-документ.
<HTML><HEAD>
<TITLE>Страничка Б</TITLE>
</HEAD>
<BODY bgcolor="green">
<Н1 align="center">Cтраничка Б</H1>
<A href="STR1.HTML">Назад</A>
</BODY>
</HTML>

Задание №2

Создайте гипертекстовый документ, состоящий из 4 страниц.

        

Для этого создайте новую папку с именем «Гиперссылки». Скопируйте в нее рисунки  с изображением мишки, зайки и лошадки.

Создайте следующие документы и свяжите их гипертекстовой связью.
Документ Start.html.
Заголовок «Агния Барто».

Маркированный список: Мишка, Зайка, Лошадка.

На каждый элемент списка — гиперссылка соответственно на документы page1.html, page2.html, page3.html.

При желании добавьте фоновую картинку.

<HTML>
<HEAD>
<TITLE>Агния Барто</TITLE>
</HEAD>
<BODY>
<H1 align="center">Стихи Агнии Барто</H1>
<UL>
<LI><A href="PAGE1.HTML">Мишка</A></LI>
<LI><A href="PAGE2.HTML">Зайка</A></LI>
<LI><A href="PAGE3.HTML">Лошадка</A></LI>
<UL>
</BODY>
</HTML>

Документ Page1.html

Заголовок "Мишка".

Текст:

Уронили мишку на пол,
Оторвали мишке лапу.
Всё равно его не брошу —
Потому что он хороший.

Картинка медвежонка справа, ширина картинки 100px.

Под стихотворением слово НАЗАД с гиперссылкой на первый документ.

<HTML>
<HEAD>
<TITLE>Мишка. Агния Барто</TITLE>
</HEAD>
<BODY>
<H1 align="center">Мишка</H1>
<IMG SRC="MISH.JPG" align="right" width="100px">
<P>Уронили мишку на пол,<BR>
Оторвали мишке лапу.</P>
<P>Всё равно его не брошу —<BR>
Потому что он хороший.</P>
<A href="START.HTML">НАЗАД</A>
</BODY>
</HTML>

Страницы Page2.html и Page3.html создайте самостоятельно по аналогии с Page1.

Домашнее задание:

Создайте гипертекстоввй документ, в котором разместите длинное стихотворение (любое).

В начале стихотворения поставьте ссылку на его конец. А В конце стихотворения - ссылку на начало.  

Более подробную информацию о программировании на языке HTML можно получить на курсах clubpixel. Зайдите на сайт и выберите курс создание Веб-сайтов. Онлайн-школа Pixel это удобный способ обучить детей основам программирования.


Уважаемые читатели!

Все материалы с сайта можно скачивать абсолютно бесплатно. Все материалы проверены антивирусом и не содержат скрытых скриптов.

Материалы в архиве не помечены водяными знаками!

Если материал нарушает чьи-то авторские права, просьба написать нам по обратной связи, указав авторство материала. Мы обязуемся либо убрать материал, либо указать прямую ссылку на автора.

Сайт пополняется материалами на основе бесплатной работы авторов. Eсли вы хотите отблагодарить их за работу и поддержать наш проект, вы можете перевести любую, не обременительную для вас сумму на счет сайта.
Заранее Вам спасибо!!!





Уважаемые посетители! Все комментарии проходят модерацию. Поэтому ваше сообщение появится через некоторое время.

Добавление комментария
Имя:* E-Mail: