Различия

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

@@ Строка 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>
+Теперь вы можете связать несколько страниц несложной единой навигационной панелью, разместив ее код в начале каждой страницы и правильно настроив ссылки.

АйТи бубен

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

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

Различия

Инструменты страницы