beget banner 468x60beget banner 728x90beget banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

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

Ссылка может вести на любой веб-ресурс, например изображение, аудио- или видеофайл, PDF-файл, HTML-документ, элемент в самом документе, и т. д.

По умолчанию ссылки отображаются в большинстве браузеров следующим образом:

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

Однако вы можете перезаписать эти правила с помощью CSS-стилей. См. Руководство по ссылкам в CSS.

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

Ссылки указываются в HTML с помощью тега <a>.

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

<a href="url">Link text</a>

Все, что находится между открывающим тегом <a> и закрывающим тегом </a>, становится частью ссылки, которую пользователь видит и нажимает в браузере. Вот несколько примеров ссылок:

<a href="//www.google.com/">Google Search</a>
<a href="//zolin.digital/">Zolin Digital</a>
<a href="images/kites.jpg">
    <img src="kites-thumb.jpg" alt="kites">
</a>
<a href="//www.google.com/">Google Search</a>

Атрибут href указывает цель ссылки. Она может быть в виде абсолютного или относительного URL-адреса.

Абсолютный URL-адрес — это адрес, который включает в себя полный URL-путь — протокол, имя хоста и путь к документу или файлу, например //www.google.com/, //www.example.com./form.php и т. д.

Относительный URL-адрес не включает имя домена и префикс // или //, например, contact.html, images/smiley.png и т. д.

Настройки атрибута target

Атрибут target сообщает браузеру, каким образом открыть связанный документ. Есть четыре определенные цели, и каждое имя цели начинается с символа нижнего подчеркивания (_):

  • _blank — открывает связанный документ в новом окне или вкладке.
  • _parent — открывает связанный документ в родительском окне.
  • _self — открывает связанный документ в том же окне или вкладке, что и исходный документ. Это значение по умолчанию, поэтому нет необходимости явно указывать это значение.
  • _top — открывает связанный документ в полном окне браузера.

Посмотрим следующий пример, чтобы понять, как работает цель атрибут target:

<a href="/about-us.php" target="_top">About Us</a>
<a href="//www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>

Если ваша веб-страница находится внутри iframe, вы можете использовать target="_top" в ссылках, чтобы выйти из iframe и показать целевую страницу в полном окне браузера.

Создание якорей # на странице

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

Создание закладок представляет собой двухэтапный процесс: сначала добавьте атрибут id для элемента, к которому вы хотите перейти, затем используйте значение этого атрибута id, которому предшествует знак хештега (#), в качестве значения атрибута href тега <a>, как показано в следующем примере:

<a href="#sectionA">Переход в раздел A</a>
<h2 id="sectionA">Раздел А</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Вы даже можете перейти к разделу другой веб-страницы, указав URL-адрес этой страницы вместе с якорем (например, #elementId в атрибуте href<a href="mypage.html#topicA">Перейти к Разделу A</a>).

Создание ссылок для скачивания

Вы можете создать ссылку для загрузки файла точно так же, как и для размещения текстовых ссылок. Просто укажите целевой URL, который вы хотите сделать доступным для загрузки.

В следующем примере мы создали ссылки для загрузки файлов .zip, .pdf и .jpg.

<a href="downloads/test.zip">Скачать Zip-файл</a>
<a href="downloads/masters.pdf">Скачать PDF-файл</a>
<a href="downloads/sample.jpg">Скачать Image-файл</a>

Когда вы щелкаете ссылку, которая указывает на PDF-файл или файл с изображением, файл не загружается непосредственно на ваш жесткий диск. Он откроется только в вашем веб-браузере, после чего вы сможете сохранить или загрузить его на жесткий диск самостоятельно.

smsc banner 480x320smsc banner 728x90smsc banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…