Как сделать ссылку

как сделать ссылкуСсылка или гиперссылка – можно сказать та основа, без которой вряд ли можно представить себе интернет.

Как сделать ссылку – вопрос вроде бы элементарный, но оказывается, актуальный и по сей день.

Недавно ко мне обратилось несколько человек с вопросами, которые касаются придания ссылкам разного внешнего вида и оказалось, что они плохо знакомы даже с их построением.

Поэтому в данной статье я еще раз пройдусь по вопросу «как сделать ссылку?»

Начнем

Общий синтаксис ссылок в html

1
<a href="веб - адрес">анкор</a>

Пример:

1
<a href="http://webmasterprof.ru/">Профессия веб-мастер</a>

Результат:

Профессия веб-мастер

Анкор – это собственно текст между открывающим и закрывающим тегом ссылки. Думаю объяснять, где открывающий, где закрывающий тег не надо.

Но если вдруг надо — Основы HTML для полного новичка

Расширенный синтаксис ссылки

В html для создания ссылок есть дополнительные атрибуты, которые не обязательны. Но их наличие может быть полезным.

Атрибут «title»

title – заглавие ссылки. Или то слово, которое всплывёт при наведении мышкой на ссылку.

Синтаксис команды выглядит так:

1
<a href="веб - адрес" title="заглавие">анкор</a>

Пример:

1
<a href="http://webmasterprof.ru" title="Блог для веб-мастера">Профессия веб-мастер</a>

Результат:

Профессия веб-мастер

Включение тега title в ссылку является полезным делом. Так, что не стоит лениться.

Атрибут «target»

target – определяет в каком окне будет открыта ссылка.

Синтаксис команды выглядит так:

1
<a href="веб - адрес" target="имя окна">анкор</a>

Имеет несколько зарезервированных имен:

_blank – загружает ссылку в новом окне браузера.

Пример:

1
<a href="http://webmasterprof.ru/" target="_blank">Профессия веб-мастер</a>

Результат:

Профессия веб-мастер

_self – загружает ссылку в текущем окне. Равносильно тому, если target вообще не указан для ссылки.

Есть еще два значения, но они относятся к тупиковой вехи в html строение под названием фреймы:

  • _parent — Загружает страницу во фрейм-родитель;
  • _top Отменяет все фреймы и загружает страницу в полном окне браузера;

Атрибут «tabindex»

tabindex – позволяет указать порядок переходов указателя по ссылкам при нажатии кнопки «TAB»

Синтаксис команды выглядит так:

1
<a href="веб - адрес" tabindex="целое число от 0">анкор</a>

Пример:

1
2
3
<a href="http://webmasterprof.ru/" tabindex="0" >Профессия веб-мастер</a>
<a href="http://webmasterprof.ru/o-bloge" tabindex="1" >Облоге Профессия веб-мастер</a>
<a href="http://webmasterprof.ru/about" tabindex="2" >Контакты блога Профессия веб-мастер</a>

Результат:

Профессия веб-мастер
Облоге Профессия веб-мастер
Контакты блога Профессия веб-мастер

Атрибут «name»

name – позволяет установить имя для элемента внутри документа. Такое имя называют — «якорь».

А потом сослаться на него. Получается, что-то типа закладок. Главная фишка в том, что перезагрузка страницы не нужна.

Есть более современный вариант «name» под названием «id». Но некоторые старые браузеры его не понимают.

Синтаксис команды выглядит так:

1
<a href="веб - адрес" name="имя якоря" или id="имя якоря">анкор</a>

Пример:

Я создал пустую ссылку в самом начале документа.

1
<a name="raz">

А потом сделал переход на нее

1
<a href="#raz">Наверх</a>

Результат:

Наверх

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

Но куда более удобным будет использование всплывающий подсказок.

Атрибут «rel»

rel – этот атрибут устанавливает отношение между документом который ссылается и документом на который ссылаются.

Вообще у него много разных значений.

Но самое популярное касается области SEO (науки о продвижении сайтов :-)).

Когда вы ставите ссылку на какую-то страницу, то раздаете ей ТИЦ и PR своей страницы. И вот если вы этого делать не хотите и придет на помощь атрибут rel.

Синтаксис команды выглядит так:

1
<a href="веб - адрес" rel="значение">анкор</a>

Пример:

1
<a href="http://webmasterprof.ru" rel="nofollow">Профессия веб-мастер</a>

Результат:

Профессия веб-мастер

Что бы увидеть результат данной команды можете воспользоваться данным плагином noindex и nofollow.

Остальные атрибуты я описывать не буду в силу их малой надобности.

Этих знаний как на меня достаточно, что бы создавать ссылки и эффективно их использовать. Если я что-то упустил, поправьте меня в комментариях.

P.S. Хотел так же в этой статье затронуть создание ссылок с изображения и оформление ссылок с помощью css. Но для лучшего усвоения опишу эти темы в отдельной статье.

Интересное — когда секунда решает все

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев9 комментариев

Сергей, во-первых спасибо вам большое за труд.Такие советы очень нужны именно в виде кратких заметок, ведь не всегда есть время изучать толстые книги html. Помните вы думали расширять тематику, а мы отговаривали? :). Жизнь показывает, кто был прав! :).

Вам не кажется, что пора подумать о создании своей книжки? Например, «HTML за 5 минут от Сергея Тригубы» или что-то в этом роде? Готов вложиться

    Спасибо, за хороший отзыв.

    Голосование закончилось одинаково для двух предложение: оставить как есть, и добавить статьи по SEO. Пока вопрос остался открытым 🙂

    Гмм. Но таких материалов вроде полно в сети. Чуть ли не каждый предлагает свои диски или книги!

Ну и что. А вы наплюйте на них. Да можно и бесплатно: просто вирусный маркетинг с ссылкой на сайт. Лиха беда начало

анкор = ссылка?

    Можно сказать и так.

    Анкор это само слово ссылки.

    Вот в данном тобой комментарии. Есть твой ник «montazhnick», который ведет на твой сайт.

    montazhnick — и есть анкор.

А могли бы расписать побольше атрибутов? типа rel=""... их в вп великое множество.

    Это атрибуты html, к wordpress они не имеют прямого отношения. Их много, большинство никто не использует.

Ризван
5

Привет можешь сказать как создать постраничную навигацию на сайте с помощью php?

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет