Определение ссылок в HTML происходит через элемент a. Прежде чем я расскажу вам о его использовании, еще несколько общих указаний по поводу гиперссылок. Обязательно придумайте хороший текст ссылки. Скучным "назад" обычно никому не помогают. (Поскольку, если посетитель пришел с внешнего сайта, он, как правило, не понимает, что означает "назад"). Постарайтесь выбирать описательные тексты ссылок.
Гиперссылки в HTML всегда следуют одному и тому же принципу.
<a href="videos.html">Текущие видео</a>
Элементу a назначается атрибут href. Этот href в свою очередь ожидает в качестве значения цель ссылки. В предыдущем примере ссылалось на файл videos.html. Он находится в том же каталоге, что и файл HTML, в котором определена гиперссылка.
При определении гиперссылок действуют те же правила, которые были представлены в контексте встраивания графики.
Впрочем, вы можете определять не только внутренние ссылки на проект. Точно так же гиперссылки можно устанавливать и на внешние файлы и домены.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Текст, находящийся между открывающим и закрывающим тегами <a> и </a>, в конечном итоге является текстом ссылки. По умолчанию этот текст отображается подчеркнутым браузерами.
Указание цели
Если вы щелкаете по гиперссылке, цель открывается в текущем окне браузера. Обычно это вполне нормально. Однако может оказаться так, что, например, вы установили ссылку на внешний домен. Если посетитель нажмет на эту ссылку, цель должна открываться в новом окне браузера или вкладке. Преимущество этого варианта: ваш веб-сайт остается открытым в фоновом режиме.
Однако вы не должны открывать каждую ссылку вашего сайта во внешнем окне, так как посетители быстро устанут от этого.
Через атрибут target элемента a можно указать окно, в котором должна открываться каждая ссылка. HTML в первую очередь предлагает три стандартных значения для target.
• _blank – Цель отобразится в новом браузерном окне.
• _self – Откроет цель в текущем окне браузера.
• _parent – Здесь можно выйти из Фрейма. (Обратите внимание, что Фреймы в HTML5 не поддерживаются. Вообще не стоит больше использовать эту технику, так как сегодня существуют лучшие альтернативы. Кто бы хотел узнать больше о Фреймах, найдет информацию на странице http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Также используется в контексте Фреймов. Вы можете открыть цель за пределами набора Фреймов.
Вот пример использования атрибута target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
В этом случае цель http://www.psd-tutorials.de откроется в новом окне/вкладке. Тот же эффект можно было бы добиться, если бы вы использовали вместо зарезервированного имени _blank вымышленное имя, например, halligalli. Однако если вы все-таки используете target, я бы по-настоящему рекомендовал обратиться к одному из зарезервированных имен.
Определение базы ссылок
Вы можете определить в секции head файла HTML так называемую базу ссылок. Такая база ссылок гарантирует, что все цели ссылок будут отображаться в определенном окне браузера. Это, конечно же, снова в первую очередь интересно в связи с Фреймами.
Однако крайне удобно это также, если вы, например, хотите, чтобы все ссылки всегда открывались в новом окне браузера с помощью _blank. Представьте, что у вас есть список ссылок. Если вы хотите, чтобы их цели всегда открывались в новом окне, это будет выглядеть так:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Таким образом, вам нужно присвоить целям каждого определения a атрибут target.
Как вы видите, это не очень эффективно. Еще менее эффективно это будет, если через несколько месяцев вы решите, что цели ссылок все-таки не нужно открывать в новом окне. Тогда вам придется изменить атрибуты target всех ссылок. Этого можно избежать через упомянутую базу целей. Она определяется через элемент base внутри секции head. Элемент base назначает атрибут target с желаемым значением. Вот пример того, как это могло бы выглядеть:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Это сэкономит вам много работы по набору текста.
Определение якоря
Как вы уже видели, вы можете устанавливать гиперссылки на другие файлы. Однако в HTML-файле также можно определить так называемые якоря. Затем вы можете установить ссылки на эти якоря. Это полезно, например, на обширных страницах. Таким образом, в начале документа можно определить оглавление, через которое посетители могут перейти к интересующим их местам, не прокручивая окно браузера.
Якори создаются с помощью элемента a. Однако определения якорей не присваивается атрибут href, а атрибут name.
<a name="seitenanfang">Table of Contents</a> <a name="kapitel1">Table of Contents Chapter 1</a> <p>Здесь следует много текста.</p> <a name="kapitel2">Table of Contents Chapter 2</a> <p>Здесь следует много текста.</p>
Имена якорей вы можете выбирать произвольно. Однако я рекомендую вам выбирать их как можно короче, использовать только строчные буквы и избегать специальных символов.
Чтобы ссылаться на якорь, определяется обычная гиперссылка, как показано в начале этого урока.
<a href="#seitenanfang">К началу страницы</a>
Атрибуту href присваивается значение имени якоря. Здесь ключевым является то, что перед именем якоря ставится решетка.
Вы также можете устанавливать ссылки на якоря между файлами. В следующем примере я предполагаю, что есть файл news.htm, который находится в том же каталоге, что и исходный HTML-файл. Внутри news.htm был определен якорь seitenanfang. Чтобы сослаться на него, за именем целевого файла (news.htm) ставится решетка. После этого следует имя якоря.
<a href="news.htm#seitenanfang">К началу страницы</a>
Таким образом, вы можете устанавливать ссылки на якоря в любом файле.
