Как сделать ссылку в html на страницу и картинку

В данной статье мы рассмотрим, как сделать ссылку в 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>.




© 2007-2017 Студия web дизайна «Webdeco» - Разработка сайтов | Продвижение сайтов | Статьи