Гиперссылки
С помощью ссылки можно попасть на другую страницу на вашем сайте или ссылаться на другой ресурс (сайт).
Чтобы сделать ссылку, нужно текст заключить в теги <a></a>. И задать ему атрибут href с нужным адресом. Посмотрим первый пример с гиперссылкой:
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Гиперссылки</title>
</head>
<body>
<a href="https://www.google.com">Перейти на сайт</a>
</body>
</html>В этом примере если нажать на текст "Перейти на сайт", то тогда откроется страница с поисковиком.
Сейчас в атрибуте href задан абсолютный адрес, где указан полный путь страницы.
Можно прописать относительный адрес, тогда путь указывается от того места, где находится файл в категории (папке).
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Ссылка с относительным адресом</title>
</head>
<body>
<a href="about_me.html">Обо мне</a>
</body>
</html>Исходный файл index.html в примере ссылается на файл about_me.html который находится в той же папке.
Если файлы находятся в разных местах, например, исходный файл находится в папке "pages", а ссылаемый файл распологается в корне сайта, то тогда нужно перед именем файла в адресе прописать две точки и слэш (/).
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Ссылка с относительным адресом</title>
</head>
<body>
<a href="../about_me.html">Обо мне</a>
</body>
</html>Таким образом мы хотим подняться на уровень выше с папки "pages" к корню сайта.
Сейчас все наши ссылки открывались в текущей вкладке. Нам может потребоватся открыть страницу в новом окне. В этом случае нужно указать параметр target="_blank".
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Ссылка с открытием страницы в новом окне</title>
</head>
<body>
<a href="https://www.google.com" target="_blank">Перейти на сайт в новом окне</a>
</body>
</html>Ещё в качестве ссылки можно использовать якори. Если на странице очень много текста, то можно, например, сделать ссылки на его заголовки. Между тегами заголовка нужно создать пустую ссылку с параметром name. И ещё сделать ссылку с именем после знака # в атрибуте href. Таким образом мы будем попадать с ссылки на заголовок текста. Для результата нужно чтобы было много текста или добавить через каждое слово тег <br /> для перехода на нужный якорь.
HTML код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Ссылка на якорь</title>
</head>
<body>
<a href="#text">Перейти на Заголовок 2</a>
<h2>Заголовок 1</h2>
<p>
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
</p>
<h2><a name="text"></a>Заголовок 2</h2>
<p>
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
Текст<br />Текст<br />Текст<br />Текст<br />
</p>
</body>
</html>Следующая статья: Изображения.
Обновлён: 19.10.2024 16:38:52
0 Комментарии