Как создать ссылки в html
Ссылки, которые представлены элементом <a></a> , играют важную роль — они обеспечивают навигацию между отдельными документами. Этот элемент имеет следующие атрибуты:
href : определяет адрес ссылки
hreflang : указывает на язык документа, на который ведет данная ссылка
media : определяет устройство, для которого предназначена ссылка
rel : определяет отношение между данным документом и ресурсом, на который ведет ссылка
target : определяет, как документ по ссылке должен открываться
type : указывает на mime-тип ресурса по ссылке
Наиболее важным атрибутом является href :
Здесь для ссылки используется относительный путь content.html. То есть в одной папке с данным документом должен находиться файл content.html, на который будет идти переход по нажатию на ссылку.
Также мы можем использовать абсолютные пути с полным указанием адреса:
Навигация внутри документа
И также мы можем задать внутренние ссылки, которые будут переходить к определенным блокам внутри элементов:
Чтобы определить внутреннюю ссылку, указывается знак решетки (#), после которого идет id того элемента, к которому надо осуществить переход. В данном случае переход будет идти к заголовкам h2.
Атрибут target
По умолчанию ресурсы, на которые ведут ссылке, открываются в том же окне. С помощью атрибута target можно переопределить это действие. Атрибут target может принимать следующие значения:
-
_blank : открытие html-документа в новом окне или вкладке браузера
Например, открытие документа по ссылке в новом окне:
Значение _blank как раз и указывает браузеру, что ресурс надо открыть в новой вкладке.
Стилизация ссылок
По умолчанию ссылка уже имеет некоторый цвет (один из оттенков синего), кроме того она имеет подчеркивание. При нажатии на ссылку она становится активной и приобретает красный цвет, а после перехода по ссылке эта ссылка может окраситься в другой цвет (как правило, в фиолетовый). Подобная стилизация задается многими браузерами по умолчанию, но мы можем ее переопределить. Например:
Здесь определены стили для ссылок в различных состояниях. a:link применяется для ссылок в обычном состоянии, когда они не нажаты и на них не наведен указатель мыши.
a:visited указывает на состояние ссылки, по которой уже был осуществлен переход.
a:hover указывает на состояние ссылки, на которую навели указатель мыши.
a:active указывает на ссылку в нажатом состоянии.
Стиль color устанавливает цвет ссылки. А стиль text-decoration устанавливает подчеркивание: если значение underline , то ссылка поддчеркнута, если none , то подчеркивание отсутствует.
Ссылка-картинка
Поместив внутрь элемента <a> элемент <img> , можно сделать ссылку-изображение:
Ссылки в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
Существование Интернета потеряло бы смысл, если бы не “её величество ССЫЛКА”. Именно благодаря ссылкам мы можем быстро перемещаться по страницам сайтов и также быстро получать необходимые нам сведения. И сегодня я начну рассказ о том, как вставить ссылку в HTML-страницу .
Как расшифровывается URL
Прежде чем говорить о том, как вставить ссылку в HTML, нам надо разобраться с некоторыми ключевыми терминами. И один из них — это URL — Uniform Resource Locator (универсальный указатель ресурса). Каждая HTML-страница в Интернете имеет свой уникальный адрес, именно этот адрес и называется URL. Этот адрес (URL) состоит из трёх основных частей:
ПРОТОКОЛ://ДОМЕННОЕ-ИМЯ-СЕРВЕРА/ПУТЬ-К-ФАЙЛУ-ДОКУМЕНТА
Здесь ПРОТОКОЛ — это способ осуществления связи между сервером и браузером, например, http , ftp , https .
ДОМЕННОЕ-ИМЯ-СЕРВЕРА — это имя сайта, например, info-master.su , av-assembler.ru и т.п.
ПУТЬ-К-ФАЙЛУ-ДОКУМЕНТА — это путь к HTML-странице, в котором может быть указано имя HTML-файла и список каталогов, если файл находится не в корневом каталоге сайта. Например, links-in-html.php .
Таким образом URL страницы, на которой вы сейчас находитесь (если читаете статью на моём сайте), будет выглядеть так:
https://info-master.su/programming/web/html/links-in-html.php
Как вы теперь понимаете, URL — это есть ни что иное, как путь к файлу, который находится в Интернете. И, надеюсь, вы помните, что путь к файлу может быть полным (абсолютным) и относительным.
Полный URL — это полная запись адреса — от протокола до имени файла (как в примере выше). Полный путь однозначно определяет файл, однако он может быть очень длинным. Поэтому (и не только поэтому) иногда удобнее использовать относительный путь, который может содержать только ПУТЬ-К-ФАЙЛУ-ДОКУМЕНТА.
Например, если страница, в которую надо вставить ссылку, находится здесь:
https://info-master.su/programming/web/
то вам необязательно прописывать полный путь к странице, как мы это сделали выше, а можно использовать относительный URL:
html/links-in-html.php
Больше о путях говорить не буду. Если кто-то что-то недопонял, подробности см. здесь.
Что такое якорь в HTML
Чтобы в HTML сделать ссылку на сайт или отдельную страницу, файл и т.п., используется специальный тег <a>. Это первая буква слова anchor, которое можно перевести как “якорь”.
Вот таким вот якорем вы и цепляетесь за страницу в интернете, а если за него потянуть, то можно эту страницу из Интернета вытащить.
У этого тега, как и у большинства других, имеются атрибуты. Самый главный атрибут — это атрибут href , значением которого может быть URL или какой-то идентификатор, которым отмечено место внутри страницы (об этом мы поговорим в другой раз).
Как добавить ссылку в HTML
Ну а теперь переходим к главному вопросу, ради которого и написана эта статья. Ссылку в HTML-страницу можно добавить так:
<a href color:red;»>URL«>Название ссылки</a>
Между тегами <a> и </a> может быть любой текст, картинка, заголовок и т.п. И если пользователь щёлкнет по элементу, который находится между этими тегами (в нашем примере это строка Название ссылки ), то он перейдёт на страницу, адрес которой ( URL ) указан в атрибуте href .
Например, если вы захотите вставить ссылку на мой сайт на своей странице (ну кто знает, вдруг вам этого сильно захочется), то сделать это можно будет так:
Обратите внимание на то, что в URL нет имени файла. Хотя файл на самом деле есть (ведь вы открываете страницу для просмотра).
Здесь есть один секрет — имя файла в URL можно не указывать, если имя этого файла index . То есть вот здесь:
у меня есть файл с именем index.php . Но в URL его указывать необязательно. Браузер откроет файл с именем index автоматически (если, конечно, такой файл там есть). Разумеется, вы можете указать этот файл. Вот такая ссылка:
откроет ту же страницу.
Расширения у файла index могут быть и другими, например, htm или html .
Открытие ссылки в новой вкладке в HTML
По умолчанию страница, на которую ведёт URL, указанный в атрибуте href , открывается в том же окне и в той же вкладке, замещая собой текущую страницу (то есть страницу, на которой была ссылка). Это не всегда удобно, потому что приходится возвращаться на страницу, чтобы вспомнить, что там было написано.
Если необходимо, чтобы страница открывалась в новой вкладке (а это бывает нужно довольно часто), то можно использовать атрибут target следующим образом:
Присваивая атрибуту target значение _blank , вы заставляете браузер открывать страницу в новой вкладке.
Это далеко не всё, что можно рассказать о ссылках. Однако я пока закончу, но к этому вопросу ещё вернусь. Если же хотите узнать всё прямо сейчас, то изучите курс о вёрстке сайтов.