Веб-компас сайтостроителей
Гиперссылки
Наверное, самый важный элемент веб-сайтов и интернета – гиперссылки. Щелкнув на гиперссылку, пользователь перейдет на соответствующий сайт. Чтобы сделать гиперссылку нужно использовать тег <a> с закрывающим тегом </a> и атрибутом href, значением которого должен быть адрес необходимого сайта. Например, разместив в коде веб-странички следующую запись
пользователь увидит гиперссылку (в дальнейшем просто ссылку): www.yandex.ru , и после того как он щелкнет по ней, браузер откроет сайт www.yandex.ru (знаменитая российская поисковая система). Данная ссылка относиться к внешней гиперссылке, на что указывает префикс "http://" в начале адреса веб-ресурса, указанном в атрибуте href. Если префикс "http://" не указан, то ссылка будет относительной, и в качестве отправной точки будет использоваться адрес текущего документа. То есть ссылка будет указывать на веб-документ (например, другую страницу сайта) расположенный на текущем сайте. Например, если на странице с адресом "www.mysite.ru/index.html" вставить следующий код
то, щелкнув по ссылке «Моя страничка» браузер откроет страницу с адресом "www.mysite.ru/mypage.html".
То есть, при создании ссылки на другой сайт, нужно указывать префикс "http://" и полный путь к веб-документу. Если делается ссылка на другую страничку того же веб-сайта, данный префикс указывать не нужно и в качестве значения атрибута href нужно будет указать имя этой странички.
Бывают и другие префиксы, но сейчас ограничимся лишь этим.
Еще бывают локальные ссылки, то есть ссылки в другие места той же веб-страницы. Такие ссылки делаются аналогично, с использованием тега <a> и атрибутом href, но значение атрибута href должно состоять из символа "#" и имени якоря, то есть того места, которое должно отобразиться после щелчка по этой ссылке. Например
В нужном месте ставится якорь с помощью все того же очень нами любимого тега <a>, но с атрибутом name. В качестве значения атрибута name должно выступать имя якоря, например
Таким образом, когда пользователь щелкнет по ссылке с текстом «Подробнее о локальных ссылках», браузер прокрутит страницу так, чтобы якорь с текстом «Локальные ссылки» был виден пользователю (по возможности браузер отобразит якорь в самом верху окна).
Можно также совмещать локальные ссылки с другими, то есть можно поставить ссылку не только на другую страничку веб-сайта, но и указать имя якоря, к которому браузер должен прокрутить открываемую при щелчке по ссылке страницу. Например, если на странице с адресом "www.mysite.ru/mypage.html" поставить якорь
то на странице с адресом "www.mysite.ru/index.html" где-либо в тексте можно будет установить следующую ссылку
Тогда после щелчка по этой ссылке, браузер откроет страницу "mypage.html" и прокрутит страничку к якорю с текстом "Локальные ссылки".
Обычно браузер отображает ссылки, которыми пользователь еще не пользовался одним цветом, а «посещенные» другим цветом. Цвет «посещенной» ссылки можно установить атрибутом vlink тега <body>. А цвет активной ссылки, то есть той, на которой в данный момент происходит щелчок кнопки мыши, можно задать атрибутом alink. Например
Код
<a href="http://www.yandex.ru">www.yandex.ru</a>
пользователь увидит гиперссылку (в дальнейшем просто ссылку): www.yandex.ru , и после того как он щелкнет по ней, браузер откроет сайт www.yandex.ru (знаменитая российская поисковая система). Данная ссылка относиться к внешней гиперссылке, на что указывает префикс "http://" в начале адреса веб-ресурса, указанном в атрибуте href. Если префикс "http://" не указан, то ссылка будет относительной, и в качестве отправной точки будет использоваться адрес текущего документа. То есть ссылка будет указывать на веб-документ (например, другую страницу сайта) расположенный на текущем сайте. Например, если на странице с адресом "www.mysite.ru/index.html" вставить следующий код
Код
<a href="mypage.html">Моя страничка</a>
то, щелкнув по ссылке «Моя страничка» браузер откроет страницу с адресом "www.mysite.ru/mypage.html".
То есть, при создании ссылки на другой сайт, нужно указывать префикс "http://" и полный путь к веб-документу. Если делается ссылка на другую страничку того же веб-сайта, данный префикс указывать не нужно и в качестве значения атрибута href нужно будет указать имя этой странички.
Бывают и другие префиксы, но сейчас ограничимся лишь этим.
Еще бывают локальные ссылки, то есть ссылки в другие места той же веб-страницы. Такие ссылки делаются аналогично, с использованием тега <a> и атрибутом href, но значение атрибута href должно состоять из символа "#" и имени якоря, то есть того места, которое должно отобразиться после щелчка по этой ссылке. Например
Код
<a href="#local_link">Подробнее о локальных ссылках</a>
В нужном месте ставится якорь с помощью все того же очень нами любимого тега <a>, но с атрибутом name. В качестве значения атрибута name должно выступать имя якоря, например
Код
<a name="local_link">Локальные ссылки</a>
Таким образом, когда пользователь щелкнет по ссылке с текстом «Подробнее о локальных ссылках», браузер прокрутит страницу так, чтобы якорь с текстом «Локальные ссылки» был виден пользователю (по возможности браузер отобразит якорь в самом верху окна).
Можно также совмещать локальные ссылки с другими, то есть можно поставить ссылку не только на другую страничку веб-сайта, но и указать имя якоря, к которому браузер должен прокрутить открываемую при щелчке по ссылке страницу. Например, если на странице с адресом "www.mysite.ru/mypage.html" поставить якорь
Код
<a name="local_link">Локальные ссылки</a>
то на странице с адресом "www.mysite.ru/index.html" где-либо в тексте можно будет установить следующую ссылку
Код
<a href="mypage.html#local_link">подробнее о локальных ссылках</a>
Тогда после щелчка по этой ссылке, браузер откроет страницу "mypage.html" и прокрутит страничку к якорю с текстом "Локальные ссылки".
Управление цветом гиперссылок
В большинстве браузеров по умолчанию текст гиперссылки отображается подчеркнутым и синим цветом. Большие возможности по управлению внешним видом ссылок дают CSS (каскадные таблицы стилей), но менять цвет можно и с помощью HTML. Задать необходимый цвет отображения гиперссылки можно атрибутом link тега <body>, установив в качестве его значения нужный цвет, например
Код
<body link="#008000" text="#408080" bgcolor="#E8E8E8">
Обычно браузер отображает ссылки, которыми пользователь еще не пользовался одним цветом, а «посещенные» другим цветом. Цвет «посещенной» ссылки можно установить атрибутом vlink тега <body>. А цвет активной ссылки, то есть той, на которой в данный момент происходит щелчок кнопки мыши, можно задать атрибутом alink. Например
Код
<body link="#008000" vlink="#FF00FF" alink="#000000" text="#408080" bgcolor="#E8E8E8">
- Статью добавил пользователь
- Категория
- Дата размещения 13.06.2008, просмотров 5013
Еще статьи из данной категории
Предыдущие статьи
Следующие статьи
Комментарии к публикации
Всего комментариев: 3
прохожий: Лустик
| 20.09.2010, 09:54
#
Если страница довольно длинная по высоте, то локальный ссылки очень даже помогают в навигации.
Ответить
прохожий: Kirill
| 09.06.2011, 21:21
#
Статья тяжела в понимании, многое осталось за кадром так и не отложилось в голове. Если есть образец или ссылка на сайт где все будет показано наглядно, то я был бы очень признателен администрации сайта.
Ответить
Автор статьи: admin
| 12.06.2011, 07:50
#
В статье все очень подробно написано. Читайте до тех пор, пока не поймете ;)
Ответить
Добавить комментарий
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.