Ссылки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

---

Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой...и не дают уснуть вовремя 🙂

Ссылки бывают разные, но чаще всего встречаются такие:

• с одного сайта на другой
• с одной страницы на другую в рамках того же сайта
• в пределах одной страницы - с одной её части на другую
• ссылки, которые запускают почтовую программу и позволяют отправить письмо на определенный адрес.

Ссылка создаётся с помощью тега <a> (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href. Сам адрес пишется в кавычках. Между тегами <a></a> указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа "Жми сюда".

При клике на любое из слов, помещенных внутри элемента <a></a> пользователь переходит по указанной ссылке.
По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.

Абсолютные и относительные ссылки

Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: "планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41". А может просто сказать "да вот его квартира, слева от меня". В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором - относительную.

Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса, т.е. содержат протокол передачи данных (например http://), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.

Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки 🙂

Ссылка на документ в той же папке

Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html

Поскольку они соседи, то ссылка со страницы index.html может быть очень короткой и содержать просто название страницы: about.html

Ссылки на документ в папках уровнем ниже

Зачастую при создании сайта одним корневым каталогом дело не обходится, и создаются дополнительные папки, например для хранения изображений, видео или просто с другой темой. Создадим в нашей папке HTML_Start еще одну папку, Lessons. Эта папка будет на уровень ниже и станет дочерней по отношению к нашему корневому каталогу, а он будет родительским по отношению к ней.

В папке Lessons давайте создадим файл links.html и попробуем сослаться на него с главной страницы. Чтобы это сделать, нужно указать:

имя папки, слеш (символ /), а потом уже имя страницы:

 

Если внутри папки Lessons создать еще одну папку, например HTML, то эта папка будет уже на 2 уровня ниже и станет внучатой для нашего корневого каталога, а он для неё будет прародительским. Создадим в ней файл Practice.html. Чтобы попасть с главной страницы на страницу, которая лежит во внучатой папке HTML, путь должен записываться так:

"имя дочерней папки/имя внучатой папки/имя нужной страницы"

Ссылки на документ в папке уровнем выше 

Для упрощения веб-сёрфинга полезно делать ссылки, ведущие назад, например на главную страницу. Чтобы создать ссылку на страницу в родительской папке нужно ввести две точки и слеш - это укажет на то, что файл лежит в папке уровнем выше, и потом имя самого файла. Для файла links.html, лежащего в папке Lessons синтаксис будет таким:

 

а для файла Practice.html, лежащего во внучатой папке HTML, чтобы перейти назад на главную страницу в прародительском каталоге, нужно два раза указать "../"

 

---

Давайте еще раз вспомним, кто кому родня:

Lessons - дочерняя папка для HTML_Start, для ссылки на файл в ней пишем

HTML_Start является родительской папкой для папки Lessons. Чтобы вернуться на уровень выше из папки Lessons пишем

HTML - внучатая папка для HTML_Start, чтобы сослаться на файл в ней, нужно указать также и "по батюшке"

HTML_Start - прародительская папка для папки HTML, чтобы из папки HTML подняться на два уровня выше пишем:

Ссылка в новом окне

По умолчанию при клике на ссылку новая страница открывается в том же окне, что и текущая. Если она ведёт на посторонний сайт, то пользователь при этом автоматически покидает ваш. Если мы хотим, чтобы наш сайт не закрывался у пользователя - можно заставить ссылку открыться в новом окне или вкладке браузера (зависит от настроек браузера).

Для этого используется атрибут target = "_blank".

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

Ссылка на электронную почту

Если на сайте есть раздел типа "Свяжитесь с нами", можно создать ссылку, при клике на которую на компьютере пользователя откроется установленная у него программа электронной почты и ему останется только написать письмо.

Для этого в начале значения атрибута href ставим "mailto:" и дальше адрес электронной почты.

Ссылка на определенную часть страницы

Когда страница довольно длинная, удобно в верхней её части сделать что-то наподобие меню для навигации по странице. А также из нижних частей страницы можно вернуть посетителя наверх, чтоб ему не пришлось долго скролить обратно. Чтобы можно было так прыгать по странице, нужно отметить каждой из тех участков, на который мы хотим создать ссылку (закладку).

Отметить участок можно с помощью атрибута id. Этот атрибут можно присваивать любому элементу разметки HTML, будь то абзац, картинка, заголовок, что угодно. Для создания ссылки на этот участок значение атрибута href должно начинаться с решетки "#", после которой указываем значение атрибута id. Например <a href="#top"></a>

Картинка в качестве ссылки

Часто бывает, что при клике на картинку мы переходим на другую страницу. Чтобы создать изображение ссылкой нужно вместо текста ссылки написать путь к имиджу. В этом примере picture.jpg лежит в той же папке, что и страница, с которой ведёт ссылка:

Если картинка лежит в другой папке вашего сайта - для неё указывается относительный путь точно также, как и для файлов.

Если картинка лежит в другом месте, не у вас на сайте - указывайте абсолютный путь:

Подробнее об имиджах смотрите другую нашу статью 🙂
До встречи!