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

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

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a> , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

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

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

Создание и продвижение сайта без ссылок практически невозможно. Поэтому сегодня статья о ссылках: о том, как их создать, как добавить в текст и как изменить внешний вид ссылки (цвет, подчеркивание, шрифт).

Как добавить ссылку на сайт

Самый простой способ добавить ссылку в текст &#8212; с помощью визуального редактора. Он позволяет создать ссылку без знаний html.

В WordPress редактор записей содержит две вкладки: визуально и текст. В первой для создания ссылки достаточно нажать кнопку &#171;Вставить/изменить ссылку&#187; и задать адрес нужной веб-страницы. Во вкладке Текст можно создать или отредактировать ссылку с помощью html и css.

Визуальный редактор WordPress выглядит так:

Визуальный редактор

Чтобы создать ссылку, выделите нужный участок текста и нажмите значок Вставить/изменить ссылку. Появится вот такое окно:

Вставить ссылку

В поле URL введите адрес веб-страницы, которая будет открываться при клике на ссылку или выберите из списка страниц сайта.

Если нужно, чтобы веб-страница открывалась в новом окне браузера, поставьте галочку напротив соответствующего пункта.

В конце нажмите кнопку Добавить ссылку.

Не всегда можно воспользоваться визуальным редактором. Кроме того, не во всех редакторах есть значок вставки ссылок. Поэтому полезно знать как можно самому создать ссылку.

Как создать HTML ссылку

Вот как выглядит простейшая html ссылка в текстовом редакторе:

<a href= &#171;http://tavry.ru»>текст ссылки</a>

А вот как эту ссылку видит посетитель сайта &#8212; текст ссылки. Щелчок по ней откроет главную страницу этого сайта.

Итак, создаем ссылку. В WordPress для этого нужно в редакторе записей перейти из вкладки Визуально во вкладку Текст.

Для создания ссылки нужен парный тег а &#8212; открывающий <a> и закрывающий </a>

<a> . . . . . . . </a>

Внутри открывающего тега <a> находится обязательный атрибут href. Он указывает на адрес веб-страницы, которая должна открыться при щелчке. Адрес страницы &#8212; в кавычках.

<a href= &#171;http://tavry.ru&#187;>

Между открывающим тегом <a> и закрывающим тегом </a> обязательно должен быть текст &#8212; это единственная видимая пользователю часть ссылки. Вместо текста можно использовать любой символ или изображение.

<a href= &#171;http://tavry.ru»>текст или изображение, которое видит пользователь</a>

Где открывается ссылка

По умолчанию веб-страница, указанная в ссылке открывается в том же окне и заменяет открытую страницу. Чтобы ссылка открылась в новом окне нужно использовать атрибут target со значением _blank, который размещается внутри открывающего тега <a>.

<a target= &#171;_blank&#187; href= &#171;http://tavry.ru»>текст ссылки</a>

Как изменить цвет ссылки

Цвет ссылок сайта задается в файле style.css. Обычно он более яркий &#8212; для того, чтобы пользователь понимал, что перед ним именно ссылка, а не обычный текст. Особым цветом можно выделить также ссылку, которую пользователь уже посетил (a:visited) или на которую навел указатель (a:hover).

Сделаем все ссылки на сайте оранжевого цвета, для этого добавим в файл style.css такое правило:

a <
color: #D47424;
>

Это правило сделает цвет ссылки, на которую навели указатель красным:

a:hover <
color: #f00;
>

Сделаем ссылку, которую пользователь уже посетил серого цвета:

a:visited <
color: #c0c0c0;
>

Ссылки на этом сайте оранжевого цвета. Предположим, нужно сделать так, чтобы какая-то одна ссылка в тексте была другого цвета. Чтобы изменить цвет одной конкретной ссылки нужно внести изменение в ее код &#8212; добавить в открывающий тег <a> атрибут style и задать для него нужный цвет, например, голубой &#171;color:#0ff&#187; или черный &#171;color:#000&#187;

style= &#171;color: #000&#187;

В итоге получим следующий код:

<a style= &#171;color: #000&#187; href= &#171;http://tavry.ru»>текст ссылки черного цвета</a>

Цвет ссылки изменился с оранжевого на черный &#8212; текст ссылки черного цвета.

Подчеркивание ссылок

На этом сайте обычные ссылки имеют подчеркивание, а при наведении курсора подчеркивание исчезает. Делается это просто, нужно добавить два правила в файл style.css.

Добавляем всем ссылкам подчеркивание:

a <
text-decoration: underline;
>

Убираем подчеркивание только для тех ссылок, на которые навели указатель:

a:hover <
text-decoration: none;
>

Чтобы подчеркнуть одну конкретную ссылку в тексте (или убрать подчеркивание) можно добавить в открывающий тег <а> атрибут style и задать для него значение text-decoration: underline (подчеркиваем текст ссылки) или text-decoration: none (убираем подчеркивание).

<a style= &#171;text-decoration: none&#187; href= &#171;http://tavry.ru»>ссылка без подчеркивания </a>

В результате подчеркивание этой конкретной ссылки исчезает &#8212; ссылка без подчеркивания.

Как изменить шрифт ссылки

Обычно ссылки с помощью шрифта не выделяют. Но если хочется, то можно сделать текст ссылки полужирным (font-weight: bold), курсивным (font-style: italic) или задать нужный размер шрифта, отличный от размера шрифта остального текста (font-size: px).

Для этого в файл style.css добавляем новое правило, с помощью которого все ссылки получают курсивный полужирный шрифт размером например 19 px.

a <
font-size: 19px;
font-style: italic;
font-weight: bold;
>

Часто делают так, что текст ссылки немного увеличивается в размере, когда пользователь наводит на него указатель. Размер шрифта такой ссылки должен быть больше, чем размер шрифта основного текста. Например, если размер основного текста &#8212; 16 px, размер ссылки при наведении указателя можно сделать 20px:

HTML Ссылки, как сделать ссылку (гиперсылку) в html

Ссылки встречаются практически на всех веб-страницах. Ссылки позволяют пользователям щелкать их путь от страницы к странице.

HTML ссылки-гиперссылки

Ссылки HTML являются гиперссылками.

Вы можете щелкнуть по ссылке и перейти к другому документу.

При наведении указателя мыши на ссылку, стрелка мыши превратится в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстом. Это может быть изображение или любой другой HTML-элемент.

HTML ссылки-синтаксис

В HTML ссылки определяются тегом <a> :

Пример

href атрибут указывает адрес назначения ( https://html5css.ru/HTML/ ) ссылки.

текст ссылки является видимой частью (см. наш учебник по HTML).

Щелчок по тексту ссылки отправит вас по указанному адресу.

Примечание: Без косой черты на адреса вложенных папок, вы можете создать два запроса на сервер. Многие серверы автоматически добавляют косую черту к адресу, а затем создают новый запрос.

Локальные ссылки

В приведенном выше примере используется абсолютный URL (полный веб-адрес).

Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www. ).

Пример

Цвета ссылок HTML

По умолчанию ссылка будет выглядеть так (во всех браузерах):

  • Непосещаемая ссылка подчеркнута и синяя
  • Посещаемая ссылка подчеркнута и пурпурная
  • Активная ссылка подчеркнута и красная

Можно изменить цвета по умолчанию с помощью CSS:

Пример

<style>
a:link <
color: green;
background-color: transparent;
text-decoration: none;
>

a:visited <
color: pink;
background-color: transparent;
text-decoration: none;
>

a:hover <
color: red;
background-color: transparent;
text-decoration: underline;
>

a:active <
color: yellow;
background-color: transparent;
text-decoration: underline;
>
</style>

HTML ссылки-целевой атрибут

Атрибут target указывает, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

  • _blank — Открытие связанного документа в новом окне или вкладке
  • _self — Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)
  • _parent — Oручка связанного документа в родительском фрейме
  • _top — Открытие связанного документа в полном тексте окна
  • framename — Открытие связанного документа в именованном фрейме

В этом примере откроется связанный документ в новом окне обозревателя/вкладка:

Примере

Совет: Если веб-страница заблокирована в рамке, можно использовать target="_top" для выхода из кадра:

Пример

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

Он является общим для использования изображений в качестве ссылки:

Пример

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

Названия ссылок

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

Пример

HTML ссылки-создать закладку

Закладки HTML используются для того, чтобы позволить читателям перейти к определенным частям веб-страницы.

Закладки могут быть полезны, если ваша веб-страница очень длинная.

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

При щелчке ссылки страница будет прокручиваться в папку с закладкой.

Пример

Сначала создайте закладку с атрибутом id :

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Example

Внешние контуры

На внешние страницы можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на веб-страницу:

Пример

В этом примере ссылки на страницу, расположенную в папке HTML на текущем веб-узле:

Пример

В этом примере ссылка на страницу, расположенную в той же папке, что и текущая страница:

Пример

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *