Как сделать ссылку на главную
SSI на практике
SSI используется не только для вывода каких-либо значений, но и для упрощения построения сайта и добавления некоторых удобных вещей, которых лишён HTML. Рассмотрим некоторые примеры применения SSI в деле.
Ссылка на главную страницу
Обычно ссылку на главной странице на саму себя не делают, чтобы не сбивать пользователей с толку. При этом на остальных страницах такая ссылка есть и она ставится на заголовок сайта. Пусть файл с главной страницей называется index.shtml, тогда нам надо определить, не совпадает ли имя открытого документа с этим и в зависимости от совпадения решаем, делать или нет ссылку. В примере 1 переменная DOCUMENT_URI сравнивается со значением /index.shtml и если оно не равно, иными словами, у нас любая страница кроме главной, тогда картинку делаем ссылкой.
Пример 1. Главная страница
Определение Internet Explorer
В некоторых случаях для браузера Internet Explorer необходимо загружать отдельный код, который отличается для других браузеров. Тогда используем переменную HTTP_USER_AGENT и сравниваем её со значением MSIE. Обратите внимание, что если просто вывести HTTP_USER_AGENT, то текст будет совсем другой. В примере 2 показано, как задать один текст для всех версий IE и другой для остальных браузеров.
Пример 2. Определение IE
Создание шаблона
Все страницы сайта строятся, как правило, по одному шаблону и имеют некоторые повторяющиеся элементы вроде шапки и подвала. Чтобы не повторять их в каждом HTML-документе, их код можно вынести в отдельный файл и подключать одной строкой. Это позволяет не редактировать десятки файлов, а ограничиться всего одним.
Пример 3. Типовой файл
Чтобы не писать каждый раз одно и то же, вынесем похожие фрагменты в текстовые файлы и поместим их в папку assets. Тогда шаблон будет иметь вид, как показано в примере 4.
Выделение текущего пункта меню
Аналогично главной странице пункт меню, который указывает на текущую страницу не делают ссылкой, а вставляют как рядовой текст, выделяя его с помощью стилей. В примере 5 показано содержимое файла aside.shtml, который используется в предыдущем примере.
Пример 5. Меню для сайта
На сайте сделано четыре файла с именами 1.shtml, 2.shtml, 3.shtml и 4.shtml. Чтобы SSI различал, какому пункту меню какой файл соответствует, используется переменная DOCUMENT_URI. Если её значение совпадает с именем открытого документа, то ссылка не добавляется.
Версия для печати
Пример 6. Версия для печати
С помощью переменной QUERY_STRING идёт проверка, есть ли в адресе ключевое слово print или нет. Если оно присутствует, тогда выводится одна версия страницы, если этого ключевого слова нет, тогда отображается другая версия страницы со ссылкой.
1.5. HTML-ссылки
Ссылки можно поделить на две категории:
Как сделать гиперссылки на сайте
1. Структура ссылки
Ссылка состоит из двух частей — указателя и адресной части. Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:
Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:
file обеспечивает чтение файла с локального диска:
http предоставляет доступ к веб-странице по протоколу HTTP:
https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS):
ftp осуществляет запрос к FTP-серверу на получение файла:
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
Рис. 1. Пример структуры папок
2.1. Абсолютный путь
Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
Существует два вида записи абсолютного пути — с указанием протокола (полный) и без него:
Когда вы ссылаетесь на страницу на другом сайте, вы можете использовать только полный абсолютный путь.
Если файл находится в корневой папке, то путь к файлу будет следующим:
При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).
2.2. Относительный путь
Относительный путь содержит следующие компоненты:
Путь для относительных ссылок имеет три специальных обозначения:
Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.
3. Якоря
Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:
Если нужно сделать ссылку с одной страницы сайта на определенный раздел другой страницы, то необходимо задать id для этого раздела страницы, а затем добавить его к абсолютному адресу ссылки:
4. Как сделать изображение-ссылку
Рис. 2. Изображение-ссылка
5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
У ссылок появились новые возможности — по клику можно не только переходить на другие страницы и скачивать файлы, но и совершать звонки на телефоны, отправлять сообщения или звонить по скайпу.
Ссылка на главную — неотъемлемый элемент навигации по сайту
Ссылки, ведущие на главную страницу сайта, являются столь же неотъемлемым элементом навигации веб-ресурса, как строка поиска или меню. Люди привыкли полагаться на них, и тому есть несколько причин:
Существует два способа, как можно представить такого рода ссылки, чтобы посетителям с одного взгляда было понятно их предназначение — неявный, посредством логотипа, и явный, через текстовую ссылку «На главную страницу», «Домой» или чем-то подобным.
Вы должны использовать оба типа таких ссылок. Ниже приведены рекомендации по их размещению.
Неявные ссылки на главную страницу
1. Логотип должен вести на главную
Эта рекомендация является давно действующей веб-конвенцией. С течением времени, путем проб и ошибок, многие люди приняли к сведению тот факт, что клик по логотипу неизменно приводит их на главную страницу ресурса. Если вы последуете этому стандарту на своем сайте, то добьетесь того, что ваш пользовательский интерфейс будет соответствовать ожиданиям посетителей, и снизите риск того, что люди не поймут вашу систему навигации и не смогут попасть туда, куда им нужно.
Однако использовать только логотип в качестве ссылки на главную страницу не слишком надежно. Хотя такая практика и считается вполне устоявшейся, ее смогут распознать далеко не все пользователи, особенно менее искушенные в технологиях. В исследованиях юзабилити по-прежнему находятся люди, испытывающие проблемы с возвратом на главную страницу, особенно когда логотип размещен не в стандартном месте, левом верхнем углу, или он выглядит как обычный печатный текст.
2. Размещение логотипа в стандартном месте: в верхнем левом углу
Размещение логотипа в верхнем левом углу сайта привычно как для веб-дизайнеров, так и для пользователей. Это ожидание настолько сильное, что отказ от этого шаблона может нанести серьезный вред.
Результаты исследований указывают на то, что размещение логотипа в непривычном месте вредит юзабилити. Пользователи в 6 раз более успешны при переходе на главную страницу в один клик при размещении логотипа слева, чем если бы он располагался в центре. Простое перемещение логотипа вправо тут же приводит к тому, что люди совершают ошибки при поиске логотипа или не могут найти его вовсе (размещенные справа логотипы ухудшают запоминаемость бренда).
3. Логотип должен визуально отличаться от остального текста на странице
Если лого выглядит как вариант навигации или заголовок на странице, его будет труднее распознать. Вы сильно упростите жизнь своим посетителям, если ваш логотип будет выделяться визуально.
Но даже размещение логотипа в правильном месте не застрахует вас от ошибок пользователей. Вам нужно сделать чуть больше, чтобы возврат на главную страницу ресурса перестал быть проблемой для кого бы то ни было.
Явные ссылки на главную страницу
4. Добавьте ссылки «Домой», «На главную» и т.д.
Чтобы свести к минимуму путаницу в вопросе возврата на главную страницу, разместите на странице и кликабельный логотип, и текстовую ссылку «Домой».
Эти ссылки «Домой» или « На главную» могут быть представлены в глобальном меню или в навигационных цепочках (breadcrumbs).
Расположив их в левом верхнем углу страницы, вы сделаете их более видимыми. Чем дальше от этой области будут находится эти ссылки, тем выше шансы, что люди просто не найдут их, особенно если ваш сайт визуально перегружен.
5. Навигационная цепочка должна начинаться со ссылки «Домой»
Эти цепочки указывают пользователям их текущее положение на сайте, при этом предоставляя возможность в один клик вернуться в верхние уровни веб-ресурса. Как правило, рекомендуется начинать со ссылки «Домой», которая будет представлять собой самый верхний уровень сайта.
6. Если на странице отображается навигационная цепочка, в главном меню указывать ссылку «Домой» не нужно
Нет необходимости размещать ссылку «Домой» в навигационной цепочке и главном меню одновременно. Две одинаковые ссылки на одной странице — плохая идея, поскольку это понапрасну увеличивает сложность интерфейса. Дублирование ссылок является одним из четырех опасных методов навигации, которые вызывают когнитивную перегрузку.
7. Не размещайте активную ссылку «Домой» на главной странице
Ссылка, которая ведет на ту же страницу, на которой находится, — не самое удачное дизайнерское решение. В этом отношении ссылка «Домой» не является исключением. Она должна располагаться на внутренних страницах сайта. Вы можете разместить эту ссылку и на главной странице, но она не должна быть активной.
8. Установите различие между ссылкой «Домой», ведущей на главную страницу подсайта, и ссылкой «Домой», ведущей на главную страницу основного сайта
В целом названия «Домой» или «На главную» являются неплохими вариантами для ссылок. Но в крупных организациях, чьи сайты имеют множество разных подсайтов, может быть сразу несколько главных страниц. Крайне важно, чтобы люди могли легко отличить ссылку, ведущую на главную страницу основного сайта. В этом вопросе поможет использование разных меток. Как и в случае со всеми остальными ссылками, обеспечьте ссылку достаточным информационным запахом, который поможет людям понять смысл ссылки. В некоторых ситуациях сокращенного URL-адреса (например, site.com) может быть достаточно, в других — придется задействовать явные и неявные ссылки.
Заключение
Хорошо, если логотип вашего сайта дает посетителям возможность в один клик перейти на главную страницу ресурса. Но не стоит останавливаться на достигнутом. Хотя большинство людей уже привыкли к такому положению вещей, другие все еще могут не знать этого: для них текстовая ссылка будет более понятной.
Гиперссылки в HTML
Г лавным признаком HTML-документа является наличие в нём гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т. д. Именно возможность вставлять в страницы ссылки на объекты вне неё и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта всегда помни про «магию» ссылок.
В этом уроке мы поговорим о том, как создать ссылку на сайт, на его отдельную страницу или файл. Ты узнаешь о том, как изменить текст ссылки, как открыть её в новом окне, как сделать ссылкой картинку, что такое внешние и внутренние ссылки и многое другое. Плюс, у тебя уже есть информация о работе с ссылками, которой мы касались в прошлых уроках (например, о том, как можно поменять цвет ссылки мы говорили в уроке про тег body).
В общем, этот урок сделает твоё представление о создании ссылок законченным и достаточным. Ты поймёшь, как создать гиперссылку в HTML и зачем. И научишься управлять её свойствами.
Содержание урока:
Термины
§ 1. Ссылка на файл, ссылка на сайт, ссылка на страницу
М ногочисленные вопросы о том, чем отличается ссылка на файл от ссылки на сайт или его отдельную страницу, вынудили меня вынести ответ на него в самое начало этого урока. Ответ такой: ничем. Все перечисленные ссылки являются внешними по отношению к исходной странице и создаются одним и тем же способом.
Д абы не растекаться мыслью по древу, покажу всё на примере.
И так, код ссылки на сайт выглядит так:
В браузере мы увидим вот, что:
Код ссылки на страницу выглядит так:
В браузере мы увидим вот, что:
Код ссылки на файл выглядит так:
В браузере мы увидим вот, что:
К ак видишь, все типы ссылок создаются абсолютно одинаково. Разница только в адресе объекта, на который нужно сослаться. А теперь перейдём к основной части урока.
§ 2. Создание внешних ссылок
М ежду собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по-умолчанию, он выделен синим цветом и подчёркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какую-либо картинку. Все эти разновидности ссылок создаются в HTML с помощью тега (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.
Н апример, чтобы создать текстовую ссылку на главную страницу этого сайта, нужно написать следующий HTML-код:
В браузере это будет выглядеть так:
К ак я писал в самом начале этого урока, цвет текста ссылок (анкора) можно изменить с помощью атрибутов тега BODY. Вообще, к тексту ссылок можно применять все те же варианты форматирования, что и к основному тексту страницы, т. е. выделять жирным, курсивом, использовать заголовки и т. д.
§ 2.1 Графические ссылки (ссылки-картинки)
К ак я уже сказал выше, для того, чтобы создать ссылку-картинку, нужно вместо текста использовать изображение. Пример такой ссылки выглядит так:
П о-умолчанию, браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0:
Т екстовые и графические ссылки можно комбинировать. Если написать:
, то ссылкой будет как картинка, так и текст «Главная страница»
§ 3. Внутренние ссылки
Д ля комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается «якорь» ссылки. «Якорь» создаётся атрибутом name:
И мя «якоря» задаётся произвольно. Тут стоит сказать, что не все браузеры понимают русские имена «якорей», поэтому рекомендую использовать латиницу. Текст между тегами для создания «якоря» не обязателен и, чаще всего, не указывается.
«Я корь» располагается в тех местах страницы, в которые должен попасть пользователь после щелчка по ссылке.
К ак я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного «якоря» с обязательным символом решётки ( #) перед ним. Разберём на примере.
Я создал «якорь» с именем zagolovok и разместил его в коде страницы рядом с заголовком этого урока («Гиперссылки в HTML»). Код «якоря» следующий:
H TML-код внутренней ссылки будет выглядеть так:
П осле щелчка по этой ссылке, ты попадёшь к заголовку этого урока.
Е сли ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера:
К изначальному адресу:
Д обавилась внутренняя ссылка:
И спользуя эту особенность, можно ссылаться на определённое место страницы с любого ресурса в Интернете! Т. е., допустим, ты создал страницу с объёмной статьёй о чём-то (или выложил на странице большое число фотографий) и разметил её внутренними ссылками. Находясь в социальной сети ВКонтакте, тебе потребовалось сослаться не просто на страницу со статьёй (или фотографиями), а на определённое место на ней (или определённую фотографию). Используя вариант с внутренней ссылкой в адресе, ты с лёгкостью добьёшься нужного.
§ 4. Абсолютные и относительные ссылки
Т акже ссылки бывают абсолютными и относительными. Абсолютная ссылка — это обычная ссылка вида:
А вот с относительными ссылками немного посложнее. В таких ссылках адрес указывается либо относительно корневой папки сайта (той, в которой лежит главная страница), либо относительно исходной страницы. Такие ссылки нужны, например, в том случае, если сайт лежит на домашнем компьютере. Или это не сайт, а страница-указатель на другие документы.
Р азберём сначала создание ссылки относительно корневой папки сайта.
Д опустим нам нужно сослаться на страницу klienty.html, которая лежит в одной папке с главной страницей сайта. Тогда код относительной ссылки примет вид:
А теперь предположим, что в одной папке с главной страницей лежит папка zakazy и уже в ней лежит страница klienty.html Тогда код относительной ссылки станет таким:
Т еперь рассмотрим создание гиперссылок относительно исходной страницы. Допустим, у нас есть страница price.html (исходная страница) и с неё нужно сослаться на страницу klienty.html Тут бывают следующие типовые варианты:
1. Страницы price.html и klienty.html находятся в одной папке.
Тогда код ссылки будет таким:
2. Страница klienty.html и папка zakazy находятся в корневой папке сайта, страница price.html лежит в папке zakazy (т. е. страница klienty.html относительно исходной страницы price.html лежит на один уровень выше).
Две точки показывают, что нужно выйти из текущей папки на уровень выше.
3. Страница klienty.html и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница price.html лежит в папке mebel (т. е. страница klienty.html относительно исходной страницы price.html лежит на два уровня выше).
Код ссылки примет вид:
Т. е. каждый уровень обозначается двумя точками и слешем «/».
4. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, страница klienty.html лежит в папке zakazy (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на один уровень ниже).
Теперь код ссылки будет таким:
В этом случае точки и слеши не ставятся.
5. Страница price.html (исходная страница) и папка zakazy находятся в корневой папке сайта, папка mebel лежит в папке zakazy, страница klienty.html лежит в папке mebel (т. е. теперь страница klienty.html относительно исходной страницы price.html лежит на два уровня ниже).
6. В корневой папке сайта лежат две папки: zakazy и oplata. Страница klienty.html лежит в папке zakazy, исходная страница price.html лежит в папке oplata (т. е. обе страницы лежат в разных папках на уровень ниже от корневой папки сайта).
Код ссылки станет следующим:
По аналогии создаются относительные ссылки и в том случае, если страницы лежат на разных уровнях относительно корневой папки. Будет меняться лишь количество указателей уровня (две точки и слеш) и адрес страницы, на которую ставится ссылка.
§ 5. Ссылка на электронную почту
Д ля того, чтобы создать ссылку на электронную почту, нужно вместо URL-адреса в значении атрибута href написать адрес электронной почты с указанием протокола ( mailto:). И тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» адресом электронной почты. В HTML-коде это выглядит так:
§ 6. Атрибуты тега «A»
§ 6.1 Атрибут target
П о-умолчанию, браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это, используется атрибут тега A target. Он имеет следующие значения:
_blank — открывает ссылку в новом окне (в современных браузерах в новой вкладке).
_parent — загружает ссылку в родительском окне.
_self — открывает ссылку в этом же окне. Это значение стоит у всех ссылок по-умолчанию (т. е. если вообще не указывать атрибут target, то сработает именно это значение).
Э то не все значения атрибута target, но это самые основные. Пример использования этого атрибута:
§ 6.2 Атрибут title
В теге можно также использовать атрибут title. С его помощью создаётся всплывающая подсказка, которая появляется при наведении мыши на ссылку.
§ 6.3 Атрибут rel=»nofollow»
У атрибута rel есть несколько значений, но самым используемым является значение « nofollow». Это значение указывает роботам поисковых систем, что эту ссылку не нужно использовать в поисковом ранжировании. Подробнее — в разделе о продвижении сайтов.
§ 7. Заключение
Э то основные сведения о создании ссылок в HTML. На этом данный урок можно считать законченным. А сей факт говорит о том, что большую часть основ HTML ты уже освоил.
Р екомендую тебе сейчас ещё раз пробежаться по предыдущим разделам, а затем создать полноценную HTML-страницу, посвященную, например, тебе любимому. По твоему дизайну и сообразно твоим желаниям. После чего выложить её на какой-нибудь бесплатный хостинг (конечно, если у тебя есть платный хостинг, то на него) и уже полноценно полюбоваться на свой первый сайт.
М ожешь показать его друзьям или ещё кому. В общем, почувствовать себя сайтовладельцем. А затем, после небольшого загула по случаю такого события, переходить к следующему разделу, в котором я расскажу тебе о создании таблиц в HTML.
И это уже будет первый шаг на пути к превращению личной странички в серьёзный ресурс.
Ещё материалы по этой теме:
Поделиться ссылкой на эту страницу в: