Инструменты пользователя

Инструменты сайта


Боковая панель

Связь

a

Тег <a>. Гиперссылка

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

<a href="URL">...</a>
<a name="идентификатор">...</a>

Атрибуты:

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

file://диск:\папка\...\папка\файл - Абсолютная локальная ссылка. Указывает адрес ресурса на текущем компьютере в формате
file://\\хост\папка\...\папка\файл - Абсолютная сетевая ссылка. Указывает адрес ресурса на соседнем компьютере в сети в формате. 
Здесь "хост" - имя компьютера или его IP адрес.

Относительная ссылка. Используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения:

/ - корневой каталог web-сервера или логического диска 
./ - текущий каталог 
../ - родительский каталог 
каталог/ - дочерний каталог 
В частном случае, когда адресуемый ресурс находится в одном каталоге с документом, в качестве адреса достаточно указать имя файла.
Относительные ссылки обычно используют для указания адресов "внутренних" ресурсов сайта.
Такой подход позволяет сделать перенос сайта быстрым и легким процессом, без последствий в виде перенастройки ссылок.

http://... – создает ссылку на www-документ;
ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя.
Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
news:... – создает ссылку на конференцию сервера новостей;
telnet://... – создает ссылку на telnet-сессию с удаленной машиной;
wais://... – создает ссылку на WAIS – сервер;
gopher://... – создает ссылку на Gopher – сервер;

Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.

  • target - определяет, окно браузера, в которое должен быть загружен ресурс. Может принимать следующие значения:
    • _blank - ресурс загружается в новое окно, например <a href="URL" target="_blank">…</a>;
    • _parent - ресурс загружается в родительском окне текущего документа;
    • _top - ресурс загружается в окне верхнего уровня фреймовой структуры;
    • _self - ресурс загружается в текущем окне. Является значением по умолчанию;
    • "имя окна" - ресурс загружается в заданном окне (фрейме).
  • tabindex - число, определяющее последовательность активизации элемента кнопкой "Tab".
  • accesskey - символ, используемый как комбинация клавиш в сочетании с клавишей Alt. Нажатие сочетания активизирует ссылку. Этот атрибут не получил широкого применения.

jQuery и тег a

  • Получить значение тега <a> и вставить его в тег input
    <script type="text/javascript">
                $(function() {
    //$("td a").css('font-weight','bold');
    
    $("td a").bind('click', function(){
    var getvalue = $(this).html();
    $("input[name=s_email]").val(getvalue);
    return false;
            });
    });
    </script>
  • Получить значение атрибута тега <a>
    <script type="text/javascript">
                $(function() {
    $("td a").bind('click', function(){
    var getvalue = $(this).attr('href');
    alert(getvalue);
    </script>

Закладки

В HTML существует возможность ссылаться не только на другие html документы, но и возможность ссылаться на части одного документа. Такой механизм получил название "закладки". Вы как бы отмечаете некоторый элемент в документе (ставите закладку), а потом ссылаетесь на него из этого же или из другого документа.

Чтобы пометить документ, используется атрибут id - уникальный идентификатор элемента:

<h2 id="chapter5">Глава 5</р2>

Чтобы сослаться на закладку в текущем документе используют гиперссылки с таким значением атрибута href:

<a href="#chapter5">Перейти к 5й главе</a>

Можно, так же, ссылаться на закладку в другом html документе. При этом, требуется указать адрес самого документа, затем символ "#" и имя закладки:

<a href="htmldocs/book.html#chapter5">Перейти к 5й главе</a>

Часть адреса "#имя" получила название хэш.

Если вы укажете в качестве закладки только символ "#", то документ будет прокручен на самое начало. Таким образом, символ "#" тоже можно назвать корректной закладкой.

Графическая навигационная панель

В элемент a можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее чем текстовые. Здесь, однако, нас подстерегает не очень приятный сюрприз - изображения, заключенные в элемент a приобретаю рамку. Для того, чтобы избавиться от нее необходимо использовать атрибут border элемента img:

<a href="/"><img src="/appfiles/img/image.svg" alt="Logo Mama" /></a>
При использовании изображений в качестве ссылок, не забудьте указать для них атрибут alt. В случае невозможности отображения рисунка, браузер сделает гиперссылкой его текстовое описание.
  • Пример: создание навигационной панели сайта

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

Кажется, что все просто: берем изображение, размещаем его на странице… Что может быть проще? Однако, различные фрагменты этого изображения должны быть гиперссылками на различные ресурсы. Таким образом, мы приходим к необходимости разрезать рисунок на несколько частей.

Вот что получилось у меня:

В результате, у нас есть три "кнопки" - гиперссылки "Назад", "Содержание" и "Вперед". Разместим все это добро на странице:

Листинг: Навигационная панель. Шаг №1

<div style="text-align: center;">
    <img src="navbar/navbar01.gif" alt="" />
    <img src="navbar/navbar02.gif" alt="Назад" />
    ...
    <img src="navbar/navbar09.gif" alt="" />
</div>

Как говорится - "Первый блин комом"! Между изображениями появились зазоры, хотя никто этого не планировал. Все дело в том, что MSIE добавил между изображениями пробельный символ. Это происходит потому, что элементы img разделены переводом строки в коде страницы. Зная это, положение вещей легко поменять, удалив пробельные символы (переводы строки, табуляции…) между элеменнами img.

Листинг: Навигационная панель. Шаг №2

...<img src="navbar/navbar01.gif" alt="" 
/><img src="navbar/navbar02.gif" alt="Назад"
/>...

Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса, в качестве значения атрибута href используйте "#":

Листинг: Навигационная панель. Шаг №3

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад"
/></a>...

Полученный результат выглядит явно как то не так… Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border="0":

Листинг: Навигационная панель. Шаг №4

...<a href="#"><img src="navbar/navbar02.gif" alt="Назад" border="0"
/></a>...

Теперь вы можете связать несколько страниц несложной единой навигационной панелью, разместив ее код в начале каждой страницы и правильно настроив ссылки.




a.txt · Последние изменения: 2013/06/20 11:22 (внешнее изменение)