Урок 7. Гипертекстовые ссылки (Анкоры)

Тема сегодняшнего урока – гипертекстовые ссылки (анкоры).
У вас есть кусочек текста, одно слово которого должно при нажатии на него, направлять на другую страницу или веб-сайт. Как это сделать? Очень просто!
Возьмем для примера нашу заготовочку и напишем туда немного текста:

<!doctype>
<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
</head>
<body>
<p>Вы можете перейти на мой сайт нажав ЗДЕСЬ.</p>
</body>
</html>

Сейчас нужно сделать чтобы слово “ЗДЕСЬ” стало кликабельным. Нужно окружить его тегами “а” вот таким образом:

<a>ЗДЕСЬ</a>

Далее нужно указать куда должен ссылаться анкор (гипертекстовая ссылка). Это делается параметром “href” который нужно вписать в тег “а”.
Вот так:

<a href="http://saddy.com.ua/">ЗДЕСЬ</a>

Теперь при нажатии на слово, будет открываться мой сайт. Если вы хотите чтобы сайт открывался в новой вкладке браузера нужно дописать параметр “target” в тег “а”.

<!doctype>
<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
</head>
<body>
<p>Вы можете перейти на мой сайт нажав <a href="http://saddy.com.ua/" target="_blank">ЗДЕСЬ</a>.</p>
</body>
</html>

Сейчас при нажатии на ссылку будет открываться мой сайт, но в новой вкладке.
Давайте рассмотрим другой вариант.
В первом уроке я показал как создать документ index.html то есть страницу на которой мы тренируемся. Надеюсь она у вас в отдельной папке :) Если нет, создайте пустую папку и бросьте ее туда. Теперь создайте таким же образом еще одну страницу и назовите ее about.html ну или как нибудь иначе, если вам так не нравится. Заполните ее нашим шаблоном, и напишите туда кусок текста о себе. Например:

<!doctype>
<html>
<head>
<title>Обо мне</title>
<meta charset="utf-8" />
</head>
<body>
<p>Меня зовут Андрей, и я научу Вас верстать!</p>
</body>
</html>

В документе index.html заменим текст на “Информацию обо мне можно прочесть ЗДЕСЬ”

<!doctype>
<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
</head>
<body>
<p>Информацию обо мне можно прочесть ЗДЕСЬ.</p>
</body>
</html>

Так как документ about.html находится в той же папке, можно ссылаться на него вот так:

<!doctype>
<html>
<head>
<title>Гипертекстовые ссылки (анкоры)</title>
<meta charset="utf-8" />
</head>
<body>
<p>Информацию обо мне можно прочесть <a href="about.html">ЗДЕСЬ</a>.</p>
</body>
</html>

Вот так всё просто :)
Если же документ не в одной папке с index.html, а например на одну папку “глубже”. То есть если рядом с документом index.html еще папка “folder” и в ней наш about.html, то следует показать это так:


<p>Информацию обо мне можно прочесть <a href="folder/about.html">ЗДЕСЬ</a>.</p>

Сейчас покажу наоборот. Как сделать кнопку возврата на предыдущую страницу с about.html. Если они в одной папке, то так же само:

<!doctype>
<html>
<head>
<title>Обо мне</title>
<meta charset="utf-8" />
</head>
<body>
<p>Меня зовут Андрей, и я научу Вас верстать! Нажмите <a href="index.html">СЮДА</a> чтобы вернутся назад.</p>
</body>
</html>

А вот если документ about.html в папке “folder” например. Или любой другой папке. Нужно сделать так:


<p>Меня зовут Андрей, и я научу Вас верстать! Нажмите <a href="../index.html">СЮДА</a> чтобы вернутся назад.</p>

Надеюсь не запутал и вы всё поняли. Прочтите еще разок или просто попробуйте сделать самостоятельно, так станет яснее!
До скорых встреч!

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>