Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / HTML /
Ссылки в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
>>> Вёрстка сайта с нуля 2.0 >>>
Существование Интернета потеряло бы смысл, если бы не “её величество ССЫЛКА”. Именно благодаря ссылкам мы можем быстро перемещаться по страницам сайтов и также быстро получать необходимые нам сведения. И сегодня я начну рассказ о том, как вставить ссылку в 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="URL">Название ссылки</a>
Между тегами <a> и </a> может быть
любой текст, картинка,
заголовок
и т.п. И если пользователь щёлкнет по элементу, который находится между
этими тегами (в нашем примере это строка Название ссылки),
то он перейдёт на страницу, адрес которой (URL)
указан в атрибуте href.
Например, если вы захотите вставить ссылку на мой сайт на своей странице (ну кто знает, вдруг вам этого сильно захочется), то сделать это можно будет так:
<a href="https://info-master.su/programming/web/html/"> Очень хороший сайт по HTML </a>
Обратите внимание на то, что в URL нет имени файла. Хотя файл на самом деле есть (ведь вы открываете страницу для просмотра).
Здесь есть один секрет - имя файла в URL можно не указывать, если имя этого
файла index. То есть вот здесь:
https://info-master.su/programming/web/html/
у меня есть файл с именем index.php. Но в URL его указывать
необязательно. Браузер откроет файл с именем index автоматически (если, конечно, такой файл там есть). Разумеется, вы можете указать этот файл. Вот такая ссылка:
https://info-master.su/programming/web/html/index.php
откроет ту же страницу.
Расширения у файла index могут быть и другими, например,
htm или html.
Открытие ссылки в новой вкладке в HTML
По умолчанию страница, на которую ведёт URL, указанный в атрибуте href, открывается в том же окне и в той же вкладке, замещая собой текущую страницу (то есть страницу, на которой была ссылка). Это не всегда удобно, потому что приходится возвращаться на страницу, чтобы вспомнить, что там было написано.
Если необходимо, чтобы страница открывалась в новой вкладке (а это бывает нужно довольно часто), то можно использовать
атрибут target следующим образом:
<a href="https://info-master.su" target="_blank"> Просто хороший сайт </a>
Присваивая атрибуту target значение
_blank, вы заставляете браузер открывать страницу в новой вкладке.
Это далеко не всё, что можно рассказать о ссылках. Однако я пока закончу, но к этому вопросу ещё вернусь. Если же хотите узнать всё прямо сейчас, то изучите курс о вёрстке сайтов.