раскрутка
сайта -
начинающим!
Ссылки
Язык гипертекстовой разметки HTML
Урок 4.
Ссылки - инструмент, позволяющий связывать между собой различные документы. Именно по ссылкам мы кликаем, чтобы перейти на другую страницу или на другой сайт. Браузер обычно выделяет ссылку синим цветом (посещённые ранее ссылки - фиолетовым) и подчеркиванием. Хотя, на практике такое поведение браузера часто переопределяется стилями - CSS, чтобы внешний вид ссылок соответствовал дизайну сайта.
Описывается ссылка следующим образом:
кликни по <a href="путь_к_файлу/имя_файла">ссылке</a>
В окне браузера отобразится строка "кликни по ссылке", при клике по слову "ссылке" пользователь попадёт на страницу, указанную в атрибуте "href".
Различают относительные и абсолютные ссылки. Примеры относительной ссылки:
- <a href="filename.htm"> - на документ "filename.htm", находящийся в одном каталоге с текущим документом;
- <a href="./filename.htm"> - в точности то же самое;
- <a href="folder/filename.htm"> - открыть файл "filename.htm" в подкаталоге "folder" текущего каталога;
- <a href="../folder/filename.htm"> - подняться вверх на один шаг по дереву каталогов, перейти в каталог "folder" и осуществить переход на "filename.htm";
- <a href="/folder/filename.htm"> - перейти в корневую папку сервера, найти и открыть в ней папку "folder", и в этой папке открыть файл "filename.htm".
В абсолютной ссылке указывается полный путь к файлу:
<a href="http://www.example.com/folder/nextfolder/index.html">
Относительные ссылки удобнее. Они не привязаны к конкретной структуре каталогов, т.е. вы можете создать свой сайт на компьютере, тестировать и исправлять ошибки не подключаясь к интернету. И лишь после полной готовности перенести его на сервер, он будет работать так же.
Анкеры - ссылки внутри документа
Можно делать ссылки внутри документа. Это удобно, например, для перехода к разным главам одной большой статьи. Для этого необходимо создать некую опорную точку - анкер (anchor - якорь, англ.), на которую и будет происходить переход. Разберём это на примере. Допустим, нам надо перейти на главу 5 какой-то большой статьи. Для чего в начале 5-й главы этой статьи создадим такой анкер:
<a name="glava5">Глава V</a>
При этом заголовок "Глава V" в тексте никак выделяться не будет. Теперь в тексте можем делать ссылку на анкер (и не один раз). Например, так:
Нажмите <a href="#glava5">здесь</a> для перехода к 5-й главе
К этому анкеру можно перейти и из другого файла (например, чтобы сделать ссылку к конкретной главе, а не на страницу со статьёй вообще). Тогда ссылка будет выглядеть так:
перейти к <a href="article.html#glava5">главе 5</a> большой и длинной статьи
Кстати, между тегами <a name=...> и </a> не обязательно писать какой-то текст, так как требуется лишь указать местоположение перехода по ссылке.
В html 5 атрибут name у ссылки уже отсутствует, поэтому конструкция <a name=...> работать не будет. Вместо этого надо добавить атрибут id="..." в любой удобный тег (заголовок, блок). Например, в нашем примере это может быть так:
<h3 id="glava5">Глава V</h4>
До сих пор мы рассматривали ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<a href="ftp://example.com/directory/file.ext">
Такая ссылка запустит протокол передачи файлов и произведёт выгрузку файла "file.ext" из директории "directory" сервера "example.com" на жёсткий диск пользователя. Иными словами, посетитель сайта скачает файл file.ext на свой компьютер или телефон.
Ссылка на адрес электронной почты mailto:
Ещё один вид ссылки - ссылка на почтовый ящик. В атрибуте href указываем адрес электронной почты с префиксом mailto:. Выглядит в тексте так:
Пишите письма <a href="mailto:webmaster@example.com">автору сайта</a>
В окне браузера:
Пишите письма автору сайта
К такой ссылке на email можно ещё добавить один или несколько параметров:
- subject - указывает тему письма;
- body - добавляет текст письма;
- cc - указывает адрес, на который надо отправить копию письма.
- bcc - адрес для отправки скрытой копии.
Параметры от основного email'а отделяются знаком вопроса, между собой параметры разделяются символом &. Пример:
Задать вопрос <a href="mailto:webmaster@example.com?subject=Вопрос с сайта&body=Здравствуйте!&bcc=arxiv@example.com">автору сайта</a>
При клике по такой ссылке открывается почтовая программа по умолчанию и создаётся новое письмо с уже заполненными полями "Кому", "Тема" и т.д.
Если у посетителя сайта не установлена почтовая программа, то при клике по ссылке ему будет предложено выбрать или установить программу для работы с почтой.
Кстати! Если в файле стилей вы хотите выделить ссылки на почтовый ящик отдельно от других ссылок, то можно воспользоваться селектором a[href^="mailto:"]. Пример:
a[href^="mailto:"] {
color: red;
}
Ссылка на номер телефона tel:
Если в ссылке указать префикс tel:, то получим ссылку на номер телефона. В html-коде это будет выглядеть так:
Звоните по телефону <a href="tel:+112223334455">+11 (222) 333-44-55</a>
В окне браузера видим:
Звоните по телефону +11 (222) 333-44-55
Что произойдёт при клике по такой ссылке? На телефоне откроется стандартная "звонилка" с уже набранным номером телефона, останется только нажать кнопку вызова. На компьютере так же откроется программа для звонков, если она установлена. Если нет, то будет предложено выбрать или установить таковую.
Ссылку на телефон можно стилизовать отдельно от остальных ссылок сайта при помощи селектора a[href^="tel:"]. Например, чтобы выделить такие ссылки значком телефона, можно сделать так:
a[href^="tel:"]:before {
content: "\260e";
margin-right: 0.5em;
}
(т.е. перед номером телефона вставили символ телефона и отделили его от цифр номера небольшим промежутком)
На экране это будет выглядеть так: +11 (222) 333-44-55
Может содержать атрибут TITLE, описывающий ссылку. Если пользователь наведет указатель мыши на ссылку, то появится ее описание - содержимое этого атрибута.
Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же - нерабочая ссылка.