Четверг, 28 марта, 2024

Как вставить ссылку в HTML, тег <a> и его атрибуты

Софт и игры
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Здравствуйте, уважаемые читатели сайта Uspei.com. В этом коротком уроке мы с вами успеем изучить технологию создания ссылок. Что бы вставить ссылку в html давайте перейдем в код нашей странички и найдем текст «http://www.howtocorp.com/typepilot». У меня это 73 строка документа. Открыть данный файл можно с помощью нашего текстового редактора Notepad++.

Тег ссылки <a> и его атрибуты

Теперь перед этим текстом откроем тег <a>, который создает ссылку. Это парный тег, поэтому мы должны закрыть тег в том месте, где ссылка у нас заканчивается.

<a> http://www.howtocorp.com/typepilot</a>

Теперь нам необходимо прописать атрибуты для тега <a>, так как без них браузеру непонятно, что делать с нашей ссылкой дальше. Прописываем первый обязательный атрибут для ссылки – href. Это самый главный атрибут для ссылки. Он указывает, куда ведет эта ссылка. В нашем случае ссылка ведет на сайт http://www.howtocorp.com/typepilot. Поэтому его и пропишем для атрибута href.

<a href=”http://www.howtocorp.com/typepilot”>http://www.howtocorp.com/typepilot</a>

Прописываем первый обязательный атрибут для ссылки –  href

Теперь давайте посмотрим, что у нас получилось, в браузере.

Ссылка в браузере

Как мы видим, текст превратился в ссылку. Если кликнуть по этой ссылке, то загрузится совсем другая страница. Причем загрузится она, обратите внимание, вместо нашей страницы! Это не всегда бывает удобно, т.к. вы можете потерять посетителя, который перейдет по ссылке на другой сайт. Поэтому для ссылок есть атрибут target (цель). Если мы хотим, чтобы данная ссылка открывалась в новом окне, мы должны прописать значение _blank.

<a href=”http://www.howtocorp.com/typepilot” target=”_blank”>http://www.howtocorp.com/typepilot</a>

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

И еще один атрибут для ссылки это универсальный атрибут title, который можно использовать практически с любыми тегами. Этот атрибут отвечает за подсказку. Часто необходимо подсказать пользователю, куда ведет данная ссылка. Подсказка должна всплывать при наведении мыши на ссылку. Давайте пропишем данный атрибут для нашей ссылки.

<a href=”http://www.howtocorp.com/typepilot “ target= ”_blank” title=”Программа type pilot”>http://www.howtocorp.com/typepilot</a>

Теперь сохраним и проверим, что у нас выдается в браузере. Итак, подсказка у нас появляется при наведении курсора мыши на ссылку.

Как сделать ссылку для скачивания файла

А теперь давайте научимся создавать ссылки, которые дадут нам возможность скачивать файлы. Для этого нам понадобится какой-нибудь файл. Например, можете скачать вот этот файл. Если файл не скачался, а открылся в новой вкладке нажмите на правую кнопку мыши и нажмите “сохранить как”.

Ссылка на time.pdf

Давайте сделаем внизу ссылочку на скачку данной статьи в формате pdf. Но прежде, давайте создадим отдельный каталог для наших файлов и назовем его files. В эту папку поместим наш файл time.pdf.

скачем шаблон для ссылки

 

После этого открываем наш файл с кодом и в самом низу перед закрытием тега <body> создаем абзац:

<p>Скачать эту статью в формате PDF</p>

Сохраним наш файл и проверим, появился ли абзац.

Ссылка на скачивание файла

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

<p><a href=”files/time.pdf”>Скачать эту статью в формате PDF</a></p>

Скачать статью в формате pdf

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

При нажатии на ссылки произойдет скачивание файла

Относительные и абсолютные ссылки, их отличие

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

Теперь давайте приведем пример абсолютной ссылки. Напомню, что у такой ссылки путь указывается полностью, начиная с начала сайта. Пример:

<a href=”http://www.howtocorp.com/typepilot” >Нажмите сюда</a>

В данной ссылке путь указан начиная с названия сайта, далее идет папка. При клике по данной ссылке загрузится файл index.html, находящийся на этом сайте. При этом конечно можно было после имени папки указать какую-либо конкретную страницу. Главное, запомнить, что абсолютная ссылка начинается с указания сайта и указывает полный путь до файла или папки.

Итак, мы с вами рассмотрели процесс создания ссылок в html документе, разобрались с атрибутами для тега <а>, а также научились создавать ссылки не только на другие страницы, но и на закачку конкретного файла. Немного позже мы обсудим как с помощью ссылок вывести ваш сайт в ТОП.

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

1 комментарий

  1. Хорошая инструкция! Я раньше тоже всему этому училась, на сегодняшний день уже намного проще подобные вопросы решать.

Оставьте комментарий

Пожалуйста, введите Ваш комментарий
Пожалуйста, введите Ваше имя здесь

Гаджеты

Как выбрать Pod-систему

Если вы решили перейти с сигарет на вейпинг и выбираете свою первую Pod-систему, есть несколько важных аспектов, на которые...

Также на эту тему