Гипертекстовые ссылки

Гипертекстовые ссылки задаются с помощью тега <а>. В атрибуте href этого тега должен быть указан URI объекта на который ведет ссылка. В нутрии контейнера может быть и элемент другого рода, например, ссылка на графическое изображение.

При создании сайта используют одну и более страниц. Главная страница называется index.html - она и будет открываться при указании http://your_site.ru/ Остальные страницы могут называться как угодно: photo.htm, info.htm.. все они связываются друг с другом ссылками.

Гиперссылка позволяет осуществлять переход от одного фрагмента текста к другому или же от одной страницы к другой. Гиперссылкой может быть текст (фраза, слово), а может быть и картинка.

При наведении курсора мыши на ссылку в статусной строке браузера отображается URI ресурса, на который ведет ссылка. Это очень ценная информация: по ней можно узнать, является ли ссылка внешней или внутренней по отношению к данному сайту, на объекты какого типа она указывает и т.п.

Абсолютные ссылки

Ссылки с абсолютными идентификаторами URL должны содержать в себе имя схемы, иначе браузер будет полагать, что URL является относительным.

Например:

<a href="http://your-site.ru/">Ссылка на ваш сайт</a>

Замыкающий символ косой черты в значении атрибута href говорит о том, что ссылка указывает не на конкретный файл, а на каталог (в данном случае откроется индексный файл находящийся в этом каталоге). Не поставив черту, катастрофы не случится, но страница будет открываться медленней из-за переадресации – сервер отправит клиенту сообщение с верной ссылкой на каталог, что отсрочит передачу индексного файла каталога браузеру.

Пример ссылки на почтовый адрес:

<a href="mailto:wm@your-site.ru?subject=tema">Написать письмо веб-мастеру</a>

Щелкнув по такой ссылке откроется почтовый клиент с заполненными полями Куда и Тема

Относительные ссылки

Для взаимосвязи страниц одного и того же сайта используют относительные ссылки (но не обязательно), что на много удобнее абсолютных.

Относительные URL не привязаны к доменному имени сайта – поэтому если вдруг придется менять домен, то ссылки не придется править.

Относительные ссылки позволяют просматривать сайт на локальной машине, что чрезвычайно удобно для разработчика. Наконец, относительные ссылки короче абсолютных, что ускоряет загрузку.

Пример ссылки на документ в том же каталоге:

<a href="index.html">Оглавление</a>

Пример ссылки на документ в другом каталоге:

<a href="projicts/index.html">Проекты</a>

Пример ссылки на документ в каталоге на уровень выше:

<a href="../index.html">На уровень вверх</a>

Абсолютный и относительный - ссылки на цельные документы, но не редко нужно ссылаться на какую-либо часть часть внутри веб-страницы. Для это создается метка в документе:

<li><a href="#p1">Первый параграф</a></li>

<h2><a id="p1"></a>Первый параграф</h2>

При помощи атрибута target тега <a> можно сделать, чтобы ссылка открывалась в новом окне:

<a href="index.html" target="_blank">Ссылка откроется в новом окне</a>

Нестоит злоупотреблять такой возможностью, т.к. это не удобно для пользователя.

Создайте несколько страниц подобные созданным заготовкам и свяжите их между собой ссылками, как это показано на примере.

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
</head>
<body>
<h1 align="center">Заголовок документа</h1>
<ul>
<li><a href="#p1">Первый параграф</a></li>
<li><a href="#p2">Второй параграф</a></li>
<li><a href="#p3">Третий параграф</a></li>
</ul>
<h2><a id="p1"></a>Первый параграф</h2>
<p>Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст</p>
<h2><a id="p2"></a>Второй параграф</h2>
<p>Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст</p>
<h2><a id="p3"></a>Третий параграф</h2>
<p>Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст</p>
<p><a href="foto.jpg" target="_blank"><img src="foto.gif" width="100" height="100" alt="откроется в новом окне" ></a></p>
<a href="mailto:wm@your-site.ru?subject=tema">Написать письмо веб-мастеру</a>
<a href="projicts.html">Наши проекты</a>
</body>
</html>

Mini-Site Generator PRO ver.2.0 - Генератор создания сайтов