Как сделать гиперссылку на сайте

Администрирование сайт это постоянная, рутинная работа по созданию страничек и наполнению их информацией. А для быстрого и удобного доступа ко всем данным, конечно, используются ссылки. С помощью них можно переходить с одной страницы на другую внутри своего ресурса или на другие сайты в Сети.

Текстовая гиперссылка

Что такое ссылка? Пользователи видят ее как выделенную часть текста, при нажатии на которую гость переходит на другую страницу сайта. При использовании настроек новая страница будет открыта в этой же вкладке, или в другой.

ВАЖНО! Встречаются ссылки, при нажатии на которые, будет активировано скачивание файла.

Общий вид кода: <a href=«адрес страницы»>слово или фраза</a>, где:

• <a> и </a> — теги языка html, внутри которых размещается ссылка;
• адрес страницы — это url, на который ведет линк;
• слово или фраза — видимый текст, который отображается на самой странице, имеет название — анкор.

СПРАВКА. В тексте ссылка обычно выглядит как подчеркнутый шрифт синего цвета. Однако вид может быть и другим.

Ссылка-изображение

Иногда есть необходимость сделать картинку или фотографию кликабельной. То есть при нажатии на изображение, мы переходим на другую страницу.

В этом случае код будет выглядеть так:

<a href=«url»><img src=«адрес изображения»></a>, где:

• url — адрес, куда нужно перейти;
• img scr — специальный тег для создания изображения-ссылки;
• адрес изображения — полный путь к той папке, где лежит картинка.

Как вставить ссылку на видео из Youtube

Это можно сделать различными способами:

• вставка кода фрейма;
• использование тега «video»;
• применение видеоплейеров на основе JavaScript и Flash.

Рассмотрим подробно метод с использованием кода фрейма. Он самый простой и применяется для ретрансляции любого видео (своего или чужого) на сайте.

Код, который будет вставляться в html, легко найти на самой странице видео из Youtube.

1.Под окном плеера необходимо нажать кнопку «Поделиться», которая находится рядом с лайками.

2.В открывшемся окне кликнуть знак с названием «Встроить».

2. Далее откроется новое всплывающее окно, в котором отобразится линк для встраивания в html. Необходимо нажать кнопку «Копировать», внизу экрана появится надпись: «Ссылка скопирована в буфер обмена». Если кнопки «Копировать» нет, можно скопировать обычным способом.

СПРАВКА. Фрейм — это элемент языка html, с помощью которого можно отобразить содержимое одной web-страницы в дочернем окне, расположенном на другой.

Создается плавающий фрейм с помощью тега «iframe».

Рассмотрим пример кода фрейма:

<iframe width=«560» height=«315» src=«https://www.youtube.com/embed/3uLqIfVu0T4» frameborder=«0» allowfullscreen></iframe>

Атрибуты тега «iframe»:

• width – можно задать длину окна фрейма;
• height – можно задать высоту окна;
• src – путь к видео, которое будет воспроизведено;
• frameborder – визуализация рамки вокруг фрейма. Существует два значения: 1 — да, или 0 — нет;
• allowfullscreen – разрешен показ видео в полноэкранном режиме.

Таким образом, с помощью этих атрибутов можно удобно подстроить видео под свой сайт. Особенно это относится к размерам фрейма, который будет отображаться.

Атрибуты ссылок

Язык разметки HTML позволяет идеально настроить дополнительные параметры перехода. Для этого используются специальные опции, которые называются — атрибуты.

Общий вид: <a имя атрибута=«значение» ></a>.

При этом у любого тега бывает несколько атрибутов. Размещать их необходимо через пробел, порядок значения не имеет.

Открытие ссылки в новой вкладке браузера

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

Код: <a href=«url» target=«_blank»>текст</a>.

Использован атрибут «target» и его значение «_blank».

Добавление описания

Чтобы мотивировать гостя сайта перейти по ссылке, необходимо добавить ее описание. Однако если написать его в анкоре, то последний станет громоздким и непонятным. Поэтому придуман способ, при котором описание всплывает при наведении курсора на текст.

С этой целью существует атрибут «title»:

<a href=«url» title=«описание ссылки»>анкор</a>.

Регулирование отношений

Можно установить отношения между страницей на которой находится пользователь, и той, на которую ведет ссылка.

Для этого пременяется атрибут «rel» и его два значения:

1. Nofollow.
2. Sidebar.

«Nofollow» используется для SEO-продвижения страницы. Смысл в том, чтобы не передавался вес страницы на которой размещен линк, той странице, на которую он ведет.

Код: <a href=«url» rel=«nofollow»>текст</a>.

Тег со значением «sidebar» применяется редко. Его смысл: при нажатии на ссылку, страница сразу закрепляется в панели закладок браузера, который используется с данный момент.

Код: <a href=«url» rel=«sidebar»>текст</a>.

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