Как сделать ссылку
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).
Пример 1. Использование абсолютных ссылок
Абсолютная ссылка Поисковая система Яндекс
Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
Примеры относительных адресов
/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.
/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.
manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).
Пример 2. Использование относительных ссылок
Относительная ссылка Посмотрите на мою фотографию!
Как сделать такое же фото?
Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html . Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html .
Внутренняя страница
Внутренними будем называть все веб-страницы сайта кроме главной. Они основаны на двухколоночном фиксированном макете, где в правой колонке располагается навигация (ссылки по сайту) и блок с интересной информацией, а в левой текст статьи.
Двухколоночный макет
Это самый простой из существующих макетов после одноколоночного, неудивительно, что для его построения существует несколько способов. Воспользуемся сочетанием свойств float и margin-right , которые уже неоднократно упоминались в книге. Для правой колонки необходимо установить float со значением right , а для левой margin-right со значением равным ширине правой колонке и расстоянию между колонками. В коде при этом плавающий элемент идёт первым, поэтому вначале следует правая колонка.
Левая колонка В стиле для элемента указываем его ширину ( width ) и включаем выравнивание по правому краю с помощью float . Для элемента только указываем margin-right .
aside < /* Правая колонка */ width: 200px; /* Ширина правой колонки */ float: right; /* Обтекание */ >article < /* Левая колонка */ margin-right: 240px; /* Отступ справа */ >Навигация на сайте
-
и
. Это связано с тем, что маркированный список сам по себе напоминает меню, к тому же легко модифицируется с помощью стилей. Навигация на нашем учебном сайте сделана в виде вертикального меню, поэтому логично будет воспользоваться списком. Только его придётся изменить под наши нужды — убрать маркеры и выделить текущий пункт меню градиентным фоном и рисованным маркером (рис. 6.13).
Рис. 6.13. Вид меню на сайте
Код меню на всех страницах сайта практически одинаков (пример 6.20), только меняется текущий пункт.
Пример 6.20. Код меню
Здесь класс current предназначен для выделения текущего пункта меню фоновым рисунком. Дополнительный тег нужен для установки рисунка маркера. Можно было пойти другим путём и включить маркер через свойство list style-image , но браузеры такой маркер по-разному позиционируют, поэтому воспользуемся универсальным решением и вставим маркер как фоновый рисунок. Для начала необходимо подготовить изображения. Нам понадобится градиентный рисунок размером 192х25 пикселов (рис. 6.14). Почему размер этого рисунка равен не 200 пикселов, как ширина колонки? Мы опять воспользуемся той хитростью, что у нас цвет у градиента справа совпадает с цветом фона и плавно переходит к нему. Подобное ухищрение уже применялось у нас для создания градиента основной части страницы и позволило уменьшить размер изображения.
Рис. 6.14. Градиент для меню
В качестве маркера для текущего пункта меню ставится небольшое изображение на прозрачном фоне (рис. 6.15).
Рис. 6.15. Маркер пункта меню
Стиль для создания меню показан в примере 6.21.
Пример 6.21. Меню
ul.menu < list-style: none; /* Убираем маркеры */ margin: 40px 0; /* Отступ сверху и снизу */ padding: 0; /* Поля */ >ul.menu li < padding: 5px; /* Поля */ font-size: 0.8em; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ >ul.menu a, ul.menu span < padding: 5px; /* Поля */ >ul.menu li span < padding-left: 25px; /* Поле слева */ background: url(images/bullet.png) no-repeat 5px center; /* Маркер */ >ul.menu li.current < background: #f9f2e2 url(images/menu-gradient.png) repeat-y; /* Градиент */ >Маркер выводится фоном, поэтому текст накладывается на него сверху. Для правильного отображения текст приходится сдвигать вправо свойством padding-left . В параметрах свойства background рисунок устанавливается по центру вертикали и смещается вправо от края на пять пикселов.
Блок «Интересная информация»
Блок представляет собой цветной прямоугольник, внутри которого выводится заголовок и текст. Под блоком отображается небольшая тень (рис. 6.16).
Рис. 6.16. Вид блока
Такую тень можно вывести в виде обычного изображения или фоновой картинки. Мы стараемся сделать код более эффективным, поэтому, чем меньше тегов используется, тем лучше. По возможности оформление необходимо переносить в стили, так что тень будем выводить стилевым свойством background . В блоке кроме тени используется фоновый цвет, нужно учесть этот момент и сделать рисунок тени на белом фоне (рис. 6.17), чтобы при наложении он перекрывал фон.
Рис. 6.17. Изображение тени
Код для блока получается достаточно простым и содержит только заголовок и текст.
Средний самец льва имеет длину около трех метров и весит от 180 до 230 килограмм.
Львы питаются не только убитыми животными, они также не брезгуют падалью.
Заголовок блока в виде рисунка помещён внутрь тега , что позволяет при отключении изображений вывести альтернативный текст увеличенного размера. Сам стиль показан ниже.
.interest < background: #f2efe6 url(images/shadow.png) no-repeat 0 100%; /* Параметры фона */ padding: 10px; /* Поля */ font-size: 0.9em; /* Размер шрифта */ >.interest h3 < margin: 0 0 -10px; /* Отступы в заголовке */ >Фоновый рисунок прижимается к нижнему краю блока, поэтому в параметрах background указываем left bottom или 0 100% , как в примере.
Добавление страниц сайта с помощью HTML
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
По мере разработки своего сайта вы можете захотеть добавить больше страниц. В этом мануале мы покажем, как это сделать. Чтобы добавить дополнительную страницу и сослаться на нее с домашней страницы сайта, вам нужно для начала создать новый html файл в каталоге вашего сайта.
В этом мануале вы узнаете, как добавить на сайт страницу About (при желании вы можете добавить любую другую страницу таким же способом).
Примечание: Если вы не выполняли эту серию по порядку, вы найдете инструкции по настройке нового файла HTML в руководстве Подготовка HTML-проекта.
Чтобы добавить новую страницу на свой сайт, создайте новый файл about.html и сохраните его в каталоге проекта html-practice.
Примечание: Если вы выбрали собственное имя для файла, избегайте пробелов, специальных символов (таких как !, #,%) и заглавных букв, поскольку в дальнейшем это может вызвать проблемы. Вы также должны установить расширение .html.
Затем нужно отформатировать файл, добавив информацию, которая поможет браузеру интерпретировать его содержимое. Поместите следующий фрагмент кода вверху документа:
Если хотите, замените выделенный текст своим заголовком.
Примечание: Подробное описание этих тегов HTML вы найдете в мануале Добавление HTML-элемента на веб-страницу.
Прежде чем добавлять на эту страницу какой-либо контент, давайте посмотрим, как добавить на вашу домашнюю страницу ссылку на новую страницу.
Сначала вернитесь к файлу index.html и добавьте следующий фрагмент под подзаголовком вашего сайта и над закрывающим тегом
