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. Различаться будет только содержимое <article> , а всё остальное кочует из файла в файл.
Пример 3. Типовой файл
Чтобы не писать каждый раз одно и то же, вынесем похожие фрагменты в текстовые файлы и поместим их в папку assets. Тогда шаблон будет иметь вид, как показано в примере 4.
Пример 4. Шаблон
Обратите внимание, что файлs header.shtml и aside.shtml имеют расширение .shtml, для того, чтобы в них подключать директивы SSI.
Выделение текущего пункта меню
Аналогично главной странице пункт меню, который указывает на текущую страницу не делают ссылкой, а вставляют как рядовой текст, выделяя его с помощью стилей. В примере 5 показано содержимое файла aside.shtml, который используется в предыдущем примере.
Пример 5. Меню для сайта
На сайте сделано четыре файла с именами 1.shtml, 2.shtml, 3.shtml и 4.shtml. Чтобы SSI различал, какому пункту меню какой файл соответствует, используется переменная DOCUMENT_URI. Если её значение совпадает с именем открытого документа, то ссылка не добавляется.
Версия для печати
Версия для печати содержит то же самое содержание, что и текущая страница, но специально оптимизированное для печати документа, к примеру, может отсутствовать реклама, какие-то декоративные элементы. Чтобы различать «нормальную» страницу и её версию для печати, к адресу документа добавим ?print , а с помощью SSI будем проверять, есть эта добавка или нет. Поскольку адрес документа может быть произвольным, воспользуемся переменной DOCUMENT_URI для его получения и создания ссылки на печатную версию (пример 6).
Пример 6. Версия для печати
С помощью переменной QUERY_STRING идёт проверка, есть ли в адресе ключевое слово print или нет. Если оно присутствует, тогда выводится одна версия страницы, если этого ключевого слова нет, тогда отображается другая версия страницы со ссылкой.
Ссылки в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
Существование Интернета потеряло бы смысл, если бы не “её величество ССЫЛКА”. Именно благодаря ссылкам мы можем быстро перемещаться по страницам сайтов и также быстро получать необходимые нам сведения. И сегодня я начну рассказ о том, как вставить ссылку в HTML-страницу .
Как расшифровывается URL
Прежде чем говорить о том, как вставить ссылку в HTML, нам надо разобраться с некоторыми ключевыми терминами. И один из них — это URL — Uniform Resource Locator (универсальный указатель ресурса). Каждая HTML-страница в Интернете имеет свой уникальный адрес, именно этот адрес и называется URL. Этот адрес (URL) состоит из трёх основных частей:
ПРОТОКОЛ://ДОМЕННОЕ-ИМЯ-СЕРВЕРА/ПУТЬ-К-ФАЙЛУ-ДОКУМЕНТА
Здесь ПРОТОКОЛ — это способ осуществления связи между сервером и браузером, например, http , ftp , https .
ДОМЕННОЕ-ИМЯ-СЕРВЕРА — это имя сайта, например, info-master.su , av-assembler.ru и т.п.
ПУТЬ-К-ФАЙЛУ-ДОКУМЕНТА — это путь к HTML-странице, в котором может быть указано имя HTML-файла и список каталогов, если файл находится не в корневом каталоге сайта. Например, links-in-html.php .
Таким образом URL страницы, на которой вы сейчас находитесь (если читаете статью на моём сайте), будет выглядеть так:
https://info-master.su/programming/web/html/links-in-html.php
Как вы теперь понимаете, URL — это есть ни что иное, как путь к файлу, который находится в Интернете. И, надеюсь, вы помните, что путь к файлу может быть полным (абсолютным) и относительным.
Полный URL — это полная запись адреса — от протокола до имени файла (как в примере выше). Полный путь однозначно определяет файл, однако он может быть очень длинным. Поэтому (и не только поэтому) иногда удобнее использовать относительный путь, который может содержать только ПУТЬ-К-ФАЙЛУ-ДОКУМЕНТА.
Например, если страница, в которую надо вставить ссылку, находится здесь:
https://info-master.su/programming/web/
то вам необязательно прописывать полный путь к странице, как мы это сделали выше, а можно использовать относительный URL:
html/links-in-html.php
Больше о путях говорить не буду. Если кто-то что-то недопонял, подробности см. здесь.
Что такое якорь в HTML
Чтобы в HTML сделать ссылку на сайт или отдельную страницу, файл и т.п., используется специальный тег <a>. Это первая буква слова anchor, которое можно перевести как “якорь”.
Вот таким вот якорем вы и цепляетесь за страницу в интернете, а если за него потянуть, то можно эту страницу из Интернета вытащить.
У этого тега, как и у большинства других, имеются атрибуты. Самый главный атрибут — это атрибут href , значением которого может быть URL или какой-то идентификатор, которым отмечено место внутри страницы (об этом мы поговорим в другой раз).
Как добавить ссылку в HTML
Ну а теперь переходим к главному вопросу, ради которого и написана эта статья. Ссылку в HTML-страницу можно добавить так:
<a href color:red;»>URL«>Название ссылки</a>
Между тегами <a> и </a> может быть любой текст, картинка, заголовок и т.п. И если пользователь щёлкнет по элементу, который находится между этими тегами (в нашем примере это строка Название ссылки ), то он перейдёт на страницу, адрес которой ( URL ) указан в атрибуте href .
Например, если вы захотите вставить ссылку на мой сайт на своей странице (ну кто знает, вдруг вам этого сильно захочется), то сделать это можно будет так:
Обратите внимание на то, что в URL нет имени файла. Хотя файл на самом деле есть (ведь вы открываете страницу для просмотра).
Здесь есть один секрет — имя файла в URL можно не указывать, если имя этого файла index . То есть вот здесь:
у меня есть файл с именем index.php . Но в URL его указывать необязательно. Браузер откроет файл с именем index автоматически (если, конечно, такой файл там есть). Разумеется, вы можете указать этот файл. Вот такая ссылка:
откроет ту же страницу.
Расширения у файла index могут быть и другими, например, htm или html .
Открытие ссылки в новой вкладке в HTML
По умолчанию страница, на которую ведёт URL, указанный в атрибуте href , открывается в том же окне и в той же вкладке, замещая собой текущую страницу (то есть страницу, на которой была ссылка). Это не всегда удобно, потому что приходится возвращаться на страницу, чтобы вспомнить, что там было написано.
Если необходимо, чтобы страница открывалась в новой вкладке (а это бывает нужно довольно часто), то можно использовать атрибут target следующим образом:
Присваивая атрибуту target значение _blank , вы заставляете браузер открывать страницу в новой вкладке.
Это далеко не всё, что можно рассказать о ссылках. Однако я пока закончу, но к этому вопросу ещё вернусь. Если же хотите узнать всё прямо сейчас, то изучите курс о вёрстке сайтов.
Ссылки в HTML
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой. и не дают уснуть вовремя ��
Ссылки бывают разные, но чаще всего встречаются такие:
- с одного сайта на другой
- с одной страницы на другую в рамках того же сайта
- в пределах одной страницы — с одной её части на другую
- ссылки, которые запускают почтовую программу и позволяют отправить письмо на определенный адрес.
Ссылка создаётся с помощью тега <a> (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href . Сам адрес пишется в кавычках. Между тегами <a></a> указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа «Жми сюда».
При клике на любое из слов, помещенных внутри элемента <a></a> пользователь переходит по указанной ссылке.
По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.
Абсолютные и относительные ссылки
Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: «планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41». А может просто сказать «да вот его квартира, слева от меня». В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором — относительную.
Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса , т.е. содержат протокол передачи данных (например http:// ), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.
Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки ��
Ссылка на документ в той же папке
Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html