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

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


a

Различия

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

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

a [2020/06/13 13:44] (текущий)
Строка 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 html>
 +<h2 id="chapter5">Глава 5</р2>
 +<span id="reviews"></span>
 +</file>
 +Чтобы сослаться на закладку в текущем документе используют гиперссылки с таким значением атрибута href: 
 +<file html>
 +<a href="#chapter5">Перейти к 5й главе</a>
 +</file>
 +Можно, так же, ссылаться на закладку в другом html документе. При этом, требуется указать адрес самого документа, затем символ "#" и имя закладки: 
 +<file html>
 +<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 · Последнее изменение: 2020/06/13 13:44 (внешнее изменение)