В данной статье мы рассмотрим, как сделать ссылку в html на страницу или картинку. Вставить ссылку в html можно с помощью специального тега <a> прописав в атрибуте href адрес. Html код ссылки будет выглядеть так <a href=»ваш адрес»>ваш текст</a>.
Содержание
Виды адресов ссылок в html
1. Относительный адрес от корня сайта
Относительный адрес ссылки от корня сайта начинается со знака /. Пример адреса от корня сайта: /catalog/product_1.html . Данный способ используется чаще всего из-за его простоты и удобства, но работает только на сервере в интернете или если он запущен на локальном компьютере. Пример, как сделать ссылку на страницу в html с относительным адресом: <a href=»/catalog/product_1.html»>ваш текст</a>.
2. Относительный адрес от текущего уровня
Пример относительного адреса ссылки от текущего уровня: catalog/product_1.html . Используется редко, в основном во время обучения или в небольших статичных сайтах. Данный способ имеет смысл использовать, когда вы обучаетесь html или сервер не запущен, т. е. нельзя использовать 1 вариант. Пример: <a href=»catalog/product_1.html»>ваш текст</a>.
3. Абсолютный адрес ссылки
Пример абсолютного адреса: http://my-site.ru/catalog/product_1.html . Этот способ указания адреса часто неудобно использовать, потому что сайты обычно разрабатывают на локальном компьютере и только потом копируются на сервер. Если указать абсолютный адрес, работающий на локальном компьютере, то перед копированием на сервер его необходимо будет сменить, что будет лишней работой.
Относительный адрес универсальнее и значительно удобнее, чем абсолютный потому что позволяет отображать сайт как на сервере, так и на компьютере без изменений в коде. В связи с этим старайтесь всегда использовать относительный адрес. Исключение — ссылки на другие сайты, в этом случае можно использовать только абсолютный адрес.
Пример, как можно сделать ссылку на страницу сайта в html с абсолютным адресом: <a href=»http://my-site.ru/catalog/product_1.html»>ваш текст</a>.
1 вариант относительного адреса удобнее использовать, чем 2, потому что он будет работать, даже если вы переместите файл с исходным кодом в другую папку. Но 1 вариант работает только, если у вас установлен веб-сервер на личном компьютере или в интернете.
Пример html кода ссылки на страницу сайта
Результат в браузере
Html код ссылок на страницу сайта
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<a href="/catalog/product_1.html">1 имя</a>
<a href="catalog/product_1.html">2 имя</a>
<a href="http://my-site.ru/catalog/product_1.html">3 имя</a>
</body>
</html>Ссылки на внешние сайты
Ссылки на внешние сайты могут быть только абсолютные, потому что нужно обязательно указать сам адрес сайта. Пример с абсолютным адресом: <a href=»http://my-site.ru/catalog/product_1.html»>ваш текст</a>.
Ссылки на другое место внутренних страниц
Ссылки могут быть как на отдельные страницы, так и на другое место текущей страницы при клике, на которую видимая область экрана сдвинется к заданному месту.
Чтобы сделать ссылку внутри одной страницы на html нужно сделать 2 вещи:
— Установить якорь в виде тега <a> с атрибутом id, в котором указать произвольное имя данного якоря.
— В ссылке указать текущий адрес страницы с добавлением в конце # и имени якоря.
Пример ссылки на внутреннюю область страницы: <a href=»/catalog/product_1.html#description»>ваш текст</a>. Сам якорь(место куда должен быть совершен переход) обозначается как <a id=»description»></a> и является невидимым для посетителя, т. к. внутри тега <a> нет содержания.
Ссылки с изображений и других элементов
Помимо текста, можно сделать ссылками изображения и другие элементы. Вставить ссылку с картинки в html можно точно так же, как у текста — между открывающимся тегом <a> и закрывающимся </a> необходимо разместить изображение или другой элемент. Пример: <a href=»catalog/product_1.html»><img src=»img/1.jpg»></a>.
Как вставить ссылку на картинку в html
Выше мы рассматривали, как сделать ссылки с картинок, а сейчас пойдет речь как вставить ссылку на изображение. Например, на странице размещена картинка и при клике на нее необходимо открыть увеличенный вариант. Точно так же как и со страницей, в роли адреса может выступать и изображение. В качестве адреса можно также указать как относительный, так и абсолютный. Пример, как вставить ссылку в html на изображение: <a href=»img/1.jpg»>ваш текст на картинку</a>.
Как сделать открытие ссылки в новой вкладке (окне) html
Чтобы открыть ссылку в новой(ом) вкладе (окне), нужно в html добавить атрибут target=»_blank» для тега <a>. В этом случае, если кликнуть на ссылку будет открываться ее содержание в новой вкладке браузера, а старая сохранится. Пример на html, как сделать открытие ссылку в новой(ом) вкладке(окне): <a href=»catalog/product_1.html» target=»_blank» >ваш текст</a>.