В данном уроке мы поговорим о том, как сделать ссылку в HTML. Ссылки очень часто используются на сайтах, они позволяют переходить с одной страницы сайта на другую. Особенностью ссылок является то, что они могут вести не только на веб-страницу, но и на файлы, изображения и др.
Ссылки могут быть внутренние и внешние. По внутренним ссылкам осуществляется переход на страницы и файлы внутри одного сайта. Внешние ссылки ведут на сторонние сайты, документы и файлы. При этом, задаются эти виды ссылок, практически, одинаково.
Как сделать ссылку в HTML, примеры
Чтобы создать ссылку используется тег <a>. Данный тег имеет определенные атрибуты:
1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: <a href="адрес ссылки">Текст ссылки</a>.
2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:
- _blank — загружает страницу в новом окне;
- _self — загружает страницу в текущем окне;
- _parent — загружает страницу во фрейм-родитель;
- _top — отменяет все фреймы и загружает страницу в новом окне.
3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.
Рассмотрим, как сделать ссылку в HTML на примерах:
Пример 1. Внешняя ссылка.
<html> <head> <title>Пример внешней ссылки</title> </head> <body> <p><a href="/">Перейти на сайт</a></p> </body> </html>
В данном примере ссылка называется «Перейти на сайт», она ведет на мой сайт.
Пример 2. Внешняя ссылка, открывающаяся в новом окне.
<a href="/" target="_blank" title="Текст подсказки для ссылки">Перейти на сайт</a>
В данном примере ссылка будет открываться в новом окне. При наведении на ссылку будет появляться текст подсказки, прописанный в «title».
Пример 3. Внутренняя ссылка.
<a href="/uroki-wordpress/wordpress-lessons.html">Бесплатные уроки по WordPress</a>
Пример 4. Изображения в качестве ссылок.
<html> <head> <title>Пример изображения в качестве ссылки</title> </head> <body> <p><a href="kak-sozdat-sait.html"><img src="Рисунок.jpg" width="200" height="120"></a></p> </body> </html>
Пример 5. Ссылка на определенную область внутри страницы.
<html> <head> <title>Пример ссылки на определенное место на странице</title> </head> <body> <p><a href="list">Перейти к тексту</a></p> <p>Текст страницы...</p> <a name="#list"></a> </body> </html>
В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.
Пример 6. Ссылка на скачивание файла.
<a href="distr.rar" target="_blank">Скачать файл</a>
Пример 7. Ссылка на электронную почту.
<a href="mailto:test@mail.ru">Написать письмо</a>
Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:
- link — не посещенная ссылка, по умолчанию она отображается синим цветом;
- alink — активная ссылка, по умолчанию имеет красный цвет;
- vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.
Пример 8. Задание цвета ссылкам.
<html> <head> <title>Пример задания цвета у ссылок</title> </head> <body link="blue" vlink="black" alink="red"> ... </body> </html>
Таким образом, мы разобрались по какому принципу создаются ссылки в HTML. Ссылкам можно придавать определенные стили оформления. Про стили ссылок в CSS можно посмотреть в уроке, перейдя по ссылке.
Хорошая инструкция! Я раньше тоже всему этому училась, на сегодняшний день уже намного проще подобные вопросы решать.
Здравствуйте! Мне очень помог пример 2. Спасибо!