Как сделать гиперссылку в html

2. Гиперссылки в HTML

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

На курсор мыши гиперссылка обычно реагирует изменением цвета или подчеркиванием. Гиперссылку в HTML можно создать при помощи тега \(\), который имеет еще закрывающий тег \(\). Рассмотрим на примере как прописывается код для создания гиперссылок.

Рис.\(1\). Образец веб-страницы с гиперссылками
Первая ссылка прописана так:

Это ссылка на страницу в интернете. В данном коде у тега \(\) используется атрибут \(href\), который задает адрес ссылки. В этом коде это ссылка на главную страницу ЯКласс. Также между тегами \(\) и \(\) прописано само название ссылки, которое отображается на веб-странице.

Вторая ссылка прописана так:
\(\)Рисунок Цветок\(\)
Это ссылка на изображение. Здесь применены все те же атрибуты, что и в предыдущей ссылке. Атрибуту \(href\) присвоено имя файла с изображением, которое открывает ссылка.

Как сделать гиперссылку в html

Сайт невозможно представить без ссылок. Ссылки осуществляют переходы с одной страницы на другую. Ссылки могут вести не только на другие страницы сайта, но также и на файл любого типа, даже если этот файл размещается на другом сайте.

Ссылка создается с помощью тега &lta href=»путь_к_ссылке»>Название ссылки&lt/a>.

Посмотрим, как это будет выглядеть в коде нашей страницы:
&lthtml>
&lthead>
&lttitle>Моя первая html страница&lt/title>
&lt/head>
&ltbody>
&ltp>Morbi quis rutrum nulla. Quisque lacinia &lta href=»http://адрес_сайта» title=»Перейти на посторонний сайт»>turpis&lt/a> nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. &lt/p>
&lt/body>
&lt/html>

• target=»_blank» — это имя отвечает за то, что при клике по данной ссылке она откроется в новом окне.
• target=»_parent» — это имя используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются
• target=»_top»- это имя используется для загрузки страницы в этом же окне, но при этом все предыдущие фреймы удаляются
• target=»_self» — это имя используется для загрузки страницы в этом же фрейме, но естественно его можно по умолчанию не указывать.

Html страница, на которую переходят должна находиться в той же папке, где и главный файл. Если вы хотите остальные страницы держать в отдельной папке, вам необходимо написать следующее href=»название_папки/banan.html» в теге &lta>.

2. Гиперссылка — изображение

• Появилась папка images в которую в дальнейшем будем «класть» все изображения. Поэтому у адреса изображения в теге img следующее href=»images/fruits.jpg». Это сделано для того чтобы соблюдался порядок на сервере. Поэтому приучите себя сразу хранить изображения в отдельной папке.
• Созданы 3 страницы: banan.html, apple.html и persik.html.
• У каждой страницы в теге &lttitle> своё название для каждой страницы. Меню&lt/p>
  &ltul>
  &ltli>Банан&lt/li>
  &ltli>Яблоко&lt/li>
  &ltli>&lta href=»persik.html» title=»Польза персика»>Персик&lt/a>&lt/li>
  &lt/ul>

Вы, наверное, уже заметили в ссылках атрибут title. Этот атрибут очень важен при индексировании роботом вашего сайта. Он обязательно должен быть прописан для каждой ссылки. Данный атрибут можно увидеть при наведении на ссылку.

3.Ссылка на конкретную страницу. Ссылка на конкретное место данной странице

Ссылка к конкретному разделу страницы с помощью якоря.

Для перехода внутри страницы к конкретному разделу используют атрибут name тега гипертекстовой ссылки a, при помощи которого создается именованный якорь.

&lta name=»label»>ссылка на именованный якорь&lt/a>

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

Для перехода на место, которое отмечено именованным якорем, используется знак # и имя якоря в конце URL следующим образом:
&lta href=»page1.html#label»>переход на именованный якорь &lt/a>
Переход внутри файла «page1.html» на именованный якорь выглядит следующим образом:
&lta href=»#label»>переход на именованный якорь &lt/a>

Практическое задание 1

Создание гиперссылок
&lthtml>
&ltbody>
&ltp>
&lta href=»page1.htm»> Этот текст &lt/a> является ссылкой на страницу на этом Web-сайте.
&lt/p>
&ltp>
&lta href=»http://www.tct.ru/»> Этот текст &lt/a> является ссылкой на страницу
во Всемирной Паутине.
&lt/p>
&lt/body>
&lt/html>
Сохраните файл под именем 37ahref.html

Практическое задание 2

Изображение в качестве ссылки
Чтобы использовать в качестве ссылки изображение требуется предварительная подготовка. В папке, где у вас будет находиться файл html, создайте папку images.
&lthtml>
&ltbody>
&ltp>
Можно также использовать в качестве ссылки изображение:
&lta href=»http://www.tct.ru/»> &ltimg border=»0″ src=»images/logo.gif» width=»285″ height=»52″> &lt/a>
&lt/p>
&lt/body>
&lt/html>
Сохраните файл под именем 38ahref.html

Практическое задание 3

&lthtml>
&ltbody>
&ltp>
&lta href=»#part5″>Переход на часть 5.&lt/a>
&lt/p>

&lth1>Лекция 1&lt/h1>
&lth2>Часть 1&lt/h2>
&ltp>Это первая часть . &lt/p>

&lth2> Часть 2&lt/h2>
&ltp>Это вторая часть . &lt/p>

&lth2> Часть 3&lt/h2>
&ltp>Это третья часть . &lt/p>

&lth2> Часть 4&lt/h2>
&ltp>Это четвертая часть . &lt/p>

&lth2>&lta name=»part5″> Часть 5&lt/a>&lt/h2>
&ltp>Это пятая часть . &lt/p>

&lth2> Часть 6&lt/h2>
&ltp>Это шестая часть . &lt/p>

&lth2> Часть 7&lt/h2>
&ltp>Это седьмая часть . &lt/p>

&lth2> Часть 8&lt/h2>
&ltp>Это восьмая часть . &lt/p>

&lth2> Часть 9&lt/h2>
&ltp>Это девятая часть . &lt/p>

&lth2> Часть 10&lt/h2>
&ltp>Это десятая часть . &lt/p>

&lt/body>
&lt/html>
Сохраните файл под именем 39label.html

Задание для самостоятельной работы № 2

1.Создать ссылки
• Главная
• Книги
• Программы
• Картинки
• Уроки

2.Создать ссылки
• Главная • Книги • Программы • Картинки • Уроки

Как сделать ссылку

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

      
Поисковая система Яндекс
  

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.

Примеры относительных адресов

/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

Пример 2. Использование относительных ссылок

      
Посмотрите на мою фотографию!
 
Как сделать такое же фото?
  

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html . Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html .

Гиперссылки

Отличительной особенностью гипертекстовых и гипермедиа- документов являются активные ссылки на другие документы (гиперссылки). Ссылкой может быть как текст, так и рисунок. При наведении мыши на ссылку курсор принимает форму руки, щелкнув мышью можно открыть в окне браузера документ, связанный с этой ссылкой.

Цвет гиперссылок

По умолчанию ссылки выделяются синим цветом и подчеркиваются. Ссылки на документы, которые вы уже посетили, выделяются фиолетовым цветом. Изменить эти цвета можно прямо в параметрах тэга :

Параметр LINK обозначает цвет обычной ссылки, VLINK — цвет посещенной ссылки, ALINK — цвет ссылки, над которой находится курсор мыши.

Ссылки на другие страницы сайта

Если связанный документ находится на том же компьютере, что и текущая страница, надо указывать его относительный адрес (относительно текущей). Категорически не рекомендуется указывать имя диска и абсолютный путь к файлу, потому что при переносе сайта на другой компьютер или в другой каталог такие ссылки не будут работать.

Для ссылки на документ в текущем каталоге надо указать только имя файла, например, ссылка на страницу Таблицы выглядит так:

Ссылка на документ index.html в подкаталоге primer запишется в виде:

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

связана с файлом index.html в каталоге text, который расположен рядом с текущим. Обратите внимание, что слэш, разделяющий названия каталогов, должен быть наклонен вправо для совместимости с обозначением путей в системе UNIX и ей подобных.

Ссылки на сайты в Интернете

Для того, чтобы сделать ссылку на сайт в Интернет, надо указать полный URL документа, включая протокол, сайт, каталог и имя файла. Например, ссылка Досье, связанная с файлом http://kpolyakov.spb.ru/dosie.htm , сделана так:

Если в адресе указаны только протокол и адрес сайта, открывается главная страница сайта, которая обычно имеет имя index.htm, index.html или default.htm (это зависит от Web-сервера на этом сайте).

• _blank — открыть в новом окне
• _parent — открыть в родительском окне
• _top — открыть на полном экране

Последние два значения используются при работе с фреймами. Например, ссылка на сайт mail.ru, который всегда открывается в новом окне, сделана так:

Ссылки внутри страницы

Язык HTML позволяет делать ссылки внутри страницы, а также в любую часть этой же или любой дроугой страницы. Для этого в нужном месте надо установить «якорь» — тэг с параметром NAME , который задает имя или метку. Вот как выглядит переход на подраздел Ссылки на другие страницы сайта этой страницы:

Чтобы ссылка сработала, в нужном месте надо установить «якорь»:

Имя otherrefs — это метка якоря, при обращении к ней в параметре HREF надо поставить знак # , который говорит, что это метка, а не имя файла.

Можно также перейти на любую метку в другом файле. Например, переход на метку font_tag в файле texts.htm, где описаны параметры тэга FONT, выглядит так:

Конечно, в нужном месте файла texts.html должен стоять «якорь» с именем font_tag:

Следующий раздел рассказывает о списках.