html ссылка на страницу
Рассмотрим различные виды ссылок и правильное их использование.
<a href="https://cwmax.ru/">Мой сайт</a>
Так выглядит ссылка. Тег a означает что это ссылка, а в href указан путь к странице.
В данном случае это ссылка на абсолютный адрес. Такие ссылки используется для отправки посетителя на другой сайт, так как они имеют полный путь.
Для переходов внутри сайта, используют относительные адреса.
Относительные адреса
Сейчас мы находимся по адресу https://cwmax.ru/blog/html/links.php
и хотим перейти на страницу Элементы страницы которая находится в этой же папке https://cwmax.ru/blog/html/element-page.php
, нам надо прописать ссылку
<a href="element-page.php“ > Элементы страницы </a>
Если нам нужно перейти в раздел Блог, который находится «этажом выше» https://cwmax.ru/blog/
, то надо прописать ссылку
<a href="../“ > Блог </a>
Если нужен раздел стилей CSS, он находится https://cwmax.ru/blog/css/
, пишем
<a href="../css/“ > css </a>
А если мы находимся https://cwmax.ru/blog/
, а нам надо https://cwmax.ru/blog/html/element-page.php
, пишем
<a href="html/element-page.php“ >Элементы страницы</a>
Вот такая ссылка
<a href="/“ > Главная </a>
Приведёт на главную страницу сайта, не смотря на то, где она находится и на каком уровне вложенности.
Ссылка в HTML - адреса относительно корня сайта
Можно задавать ссылки относительно корня сайта, то есть главной страницы. Для этого перед URL нужно ставить /.
Сейчас мы находимся по адресу https://cwmax.ru/blog/html/links.php
и хотим перейти на страницу Элементы страницы которая находится в этой же папке https://cwmax.ru/blog/html/element-page.php
, нам надо прописать ссылку
<a href="/blog/html/element-page.php“ > Элементы страницы </a>
Якорная ссылка
Якорная ссылка отправляет на определённое место страницы сайта. Для этого разделы должны быть размечены id, а у ссылок должен присутствовать хэш #.
К примеру, где-то в середине страницы есть блок текста отмеченный так
<p id=”razd1”> .. текст … </p>
Чтобы туда, мгновенно попасть, нужна такая ссылка
<a href="#razd1” > переход по якорной ссылке </a>
Таким способом можно обратиться из другой страницы.
<a href="blog/html/links.php#razd1” target = "_ blank" > переход по якорной ссылке из другой страницы </a>
Присутствие атрибута target = "_ blank" означает, что страница откроется в новой вкладке.
Ссылка не обязательна должна быть текстом, она может быть картинкой
<a href="#razd1” > <img src="html.jpg" alt="Описание" title="Содержимое" style="width:380px; height:200px" ></a>