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

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


a

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

a [2013/06/20 11:22] (текущий)
Строка 1: Строка 1:
 +===== Тег <a>. Гиперссылка =====
 +**Тег <a>** является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы,​ которую можно указать в качестве цели ссылки. При использовании ссылки,​ которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
 +<​file>​
 +<a href="​URL">​...</​a>​
 +<a name="​идентификатор">​...</​a>​
 +</​file>​
 +
 +**Атрибуты**:​
 +
 +**href** – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа),​ указанный в значении данного атрибута. Возможные значения:​
 +<​file>​
 +file://​диск:​\папка\...\папка\файл - Абсолютная локальная ссылка. Указывает адрес ресурса на текущем компьютере в формате
 +file://​\\хост\папка\...\папка\файл - Абсолютная сетевая ссылка. Указывает адрес ресурса на соседнем компьютере в сети в формате. ​
 +Здесь "​хост"​ - имя компьютера или его IP адрес.
 +
 +Относительная ссылка. Используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения:​
 +
 +/ - корневой каталог web-сервера или логического диска ​
 +./ - текущий каталог ​
 +../ - родительский каталог ​
 +каталог/​ - дочерний каталог ​
 +В частном случае,​ когда адресуемый ресурс находится в одном каталоге с документом,​ в качестве адреса достаточно указать имя файла.
 +Относительные ссылки обычно используют для указания адресов "​внутренних"​ ресурсов сайта.
 +Такой подход позволяет сделать перенос сайта быстрым и легким процессом,​ без последствий в виде перенастройки ссылок.
 +
 +http://... – создает ссылку на www-документ;​
 +ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
 +mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя.
 +Если после адреса поставить знак вопроса,​ то можно указать дополнительные атрибуты,​ разделенные знаком "&";​
 +news:... – создает ссылку на конференцию сервера новостей;​
 +telnet://​... – создает ссылку на telnet-сессию с удаленной машиной;​
 +wais://... – создает ссылку на WAIS – сервер;​
 +gopher://​... – создает ссылку на Gopher – сервер;​
 +</​file>​
 +Если тип соединения и адрес машины не указаны,​ в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
 +  * **target** - определяет,​ окно браузера,​ в которое должен быть загружен ресурс. Может принимать следующие значения:​
 +         * _blank - ресурс загружается в новое окно, например <a href="​URL" ​ target="​_blank">​...</​a>;​
 +         * _parent - ресурс загружается в родительском окне текущего документа;​
 +         * _top - ресурс загружается в окне верхнего уровня фреймовой структуры;​
 +         * _self - ресурс загружается в текущем окне. Является значением по умолчанию;​
 +         * "​имя окна"​ - ресурс загружается в заданном окне (фрейме).
 +  * **tabindex** - число, определяющее последовательность активизации элемента кнопкой "​Tab"​. ​
 +  * **accesskey** - символ,​ используемый как комбинация клавиш в сочетании с клавишей Alt. Нажатие сочетания активизирует ссылку. Этот атрибут не получил широкого применения.
 +==== jQuery и тег a ====
 +  * [[selektory#​psevdoklassy|Псевдоклассы тега А]]
 +
 +  * Получить значение тега <a> и вставить его в тег input<​file>​
 +<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>​
 +</​file>​
 +  * Получить значение атрибута тега <​a><​file>​
 +<script type="​text/​javascript">​
 +            $(function() {
 +$("td a"​).bind('​click',​ function(){
 +var getvalue = $(this).attr('​href'​);​
 +alert(getvalue);​
 +</​script>​
 +</​file>​
 +===== Закладки =====
 +В HTML существует возможность ссылаться не только на другие html документы,​ но и возможность ссылаться на части одного документа. Такой механизм получил название "​закладки"​. Вы как бы отмечаете некоторый элемент в документе (ставите закладку),​ а потом ссылаетесь на него из этого же или из другого документа. ​
 +
 +Чтобы пометить документ,​ используется атрибут id - уникальный идентификатор элемента: ​
 +<​file>​
 +<h2 id="​chapter5">​Глава 5</​р2>​
 +</​file>​
 +Чтобы сослаться на закладку в текущем документе используют гиперссылки с таким значением атрибута href: 
 +<​file>​
 +<a href="#​chapter5">​Перейти к 5й главе</​a>​
 +</​file>​
 +Можно, так же, ссылаться на закладку в другом html документе. При этом, требуется указать адрес самого документа,​ затем символ "#"​ и имя закладки: ​
 +<​file>​
 +<a href="​htmldocs/​book.html#​chapter5">​Перейти к 5й главе</​a>​
 +</​file>​
 +Часть адреса "#​имя"​ получила название хэш. ​
 +<note tip>​Если вы укажете в качестве закладки только символ "#",​ то документ будет прокручен на самое начало. Таким образом,​ символ "#"​ тоже можно назвать корректной закладкой.</​note> ​
 +===== Графическая навигационная панель =====
 +В элемент **a** можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее чем текстовые. Здесь, однако,​ нас подстерегает не очень приятный сюрприз - изображения,​ заключенные в элемент a приобретаю рамку. Для того, чтобы избавиться от нее необходимо использовать атрибут border элемента img:
 +<​file>​
 +<a href="/"><​img src="/​appfiles/​img/​image.svg"​ alt="​Logo Mama" /></​a>​
 +</​file>​
 +<note important>​При использовании изображений в качестве ссылок,​ не забудьте указать для них атрибут alt. В случае невозможности отображения рисунка,​ браузер сделает гиперссылкой его текстовое описание.</​note> ​
 +
 +  * **Пример:​ создание навигационной панели сайта**
 +Сейчас на небольшом примере мы с вами поэтапно спроектируем и реализуем несложную графическую навигационную панель сайта. Выглядеть это будет так: ​
 +
 +{{:​navbar.gif|}}
 +
 +Кажется,​ что все просто:​ берем изображение,​ размещаем его на странице... Что может быть проще? Однако,​ различные фрагменты этого изображения должны быть гиперссылками на различные ресурсы. Таким образом,​ мы приходим к необходимости разрезать рисунок на несколько частей. ​
 +
 +Вот что получилось у меня:
 +
 +{{:​navbar_fragments.gif|}}
 +
 +В результате,​ у нас есть три "​кнопки"​ - гиперссылки "​Назад",​ "​Содержание"​ и "​Вперед"​. Разместим все это добро на странице: ​
 +
 +Листинг:​ Навигационная панель. Шаг №1  ​
 +<​file>​
 +<div style="​text-align:​ center;">​
 +    <img src="​navbar/​navbar01.gif"​ alt=""​ />
 +    <img src="​navbar/​navbar02.gif"​ alt="​Назад"​ />
 +    ...
 +    <img src="​navbar/​navbar09.gif"​ alt=""​ />
 +</​div>​
 +</​file>​
 +
 +Как говорится - "​Первый блин комом"​! Между изображениями появились зазоры,​ хотя никто этого не планировал. Все дело в том, что MSIE добавил между изображениями пробельный символ. Это происходит потому,​ что элементы img разделены переводом строки в коде страницы. Зная это, положение вещей легко поменять,​ удалив пробельные символы (переводы строки,​ табуляции...) между элеменнами img.
 +
 +Листинг:​ Навигационная панель. Шаг №2  ​
 +<​file>​
 +...<img src="​navbar/​navbar01.gif"​ alt="" ​
 +/><​img src="​navbar/​navbar02.gif"​ alt="​Назад"​
 +/>...
 +</​file>​
 +Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса,​ в качестве значения атрибута href используйте "#":​
 +
 +Листинг:​ Навигационная панель. Шаг №3  ​
 +<​file>​
 +...<a href="#"><​img src="​navbar/​navbar02.gif"​ alt="​Назад"​
 +/></​a>​...
 +</​file>​
 +Полученный результат выглядит явно как то не так... Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border="​0": ​
 +
 +Листинг:​ Навигационная панель. Шаг №4  ​
 +<​file>​
 +...<a href="#"><​img src="​navbar/​navbar02.gif"​ alt="​Назад"​ border="​0"​
 +/></​a>​...
 +</​file>​
 +Теперь вы можете связать несколько страниц несложной единой навигационной панелью,​ разместив ее код в начале каждой страницы и правильно настроив ссылки.
  
загрузка...
a.txt · Последние изменения: 2013/06/20 11:22 (внешнее изменение)