В данной статье мы рассмотрим, как сделать ссылку в html на страницу или картинку. Вставить ссылку в html можно с помощью специального тега <a> прописав в атрибуте href адрес. Html код ссылки будет выглядеть так <a href="ваш адрес">ваш текст</a>.
Относительный адрес ссылки от корня сайта начинается со знака /. Пример адреса от корня сайта: /catalog/product_1.html . Данный способ используется чаще всего из-за его простоты и удобства, но работает только на сервере в интернете или если он запущен на локальном компьютере. Пример, как сделать ссылку на страницу в html с относительным адресом: <a href="/catalog/product_1.html">ваш текст</a>.
Пример относительного адреса ссылки от текущего уровня: catalog/product_1.html . Используется редко, в основном во время обучения или в небольших статичных сайтах. Данный способ имеет смысл использовать, когда вы обучаетесь html или сервер не запущен, т. е. нельзя использовать 1 вариант. Пример: <a href="catalog/product_1.html">ваш текст</a>.
Пример абсолютного адреса: http://my-site.ru/catalog/product_1.html . Этот способ указания адреса часто неудобно использовать, потому что сайты обычно разрабатывают на локальном компьютере и только потом копируются на сервер. Если указать абсолютный адрес, работающий на локальном компьютере, то перед копированием на сервер его необходимо будет сменить, что будет лишней работой.
Относительный адрес универсальнее и значительно удобнее, чем абсолютный потому что позволяет отображать сайт как на сервере, так и на компьютере без изменений в коде. В связи с этим старайтесь всегда использовать относительный адрес. Исключение — ссылки на другие сайты, в этом случае можно использовать только абсолютный адрес.
Пример, как можно сделать ссылку на страницу сайта в html с абсолютным адресом: <a href="http://my-site.ru/catalog/product_1.html">ваш текст</a>.
1 вариант относительного адреса удобнее использовать, чем 2, потому что он будет работать, даже если вы переместите файл с исходным кодом в другую папку. Но 1 вариант работает только, если у вас установлен веб-сервер на личном компьютере или в интернете.
Ссылки на внешние сайты могут быть только абсолютные, потому что нужно обязательно указать сам адрес сайта. Пример с абсолютным адресом: <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 на изображение: <a href="img/1.jpg">ваш текст на картинку</a>.
Чтобы открыть ссылку в новой(ом) вкладе(окне), нужно в html добавить атрибут target="_blank" для тега <a>. В этом случае, если кликнуть на ссылку будет открываться ее содержание в новой вкладке браузера, а старая сохранится. Пример на html, как сделать открытие ссылку в новой(ом) вкладке(окне): <a href="catalog/product_1.html" target="_blank" >ваш текст</a>.
