Выбрать главу

Листинг 6.3

.

<BODY>

<P><A HREF="css_index.htm">CSS</A> |

<A HREF="samples_index.htm">Примеры</A> |

<A HREF="about.htm">О разработчиках</A></P>

<H1>Справочник по HTML и CSS</H1>

.

Как видим, наша первая полоса навигации очень проста — обычный абзац с набором гиперссылок, разделенных символом | (вертикальная черта). Ну так ведь и наш первый Web-сайт не слишком сложен…

При желании мы можем создать остальные Web-страницы нашего первого Web- сайта. Но не будем сильно в этом усердствовать — все равно мы его потом переделаем.

Якоря

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

Это так называемые якоря (anchors). Они не указывают на другую Web-страницу (файл, адрес электронной почты), а помечают некоторый фрагмент текущей Web- страницы, чтобы другая гиперссылка могла на него сослаться. Так можно пометить отдельные главы длинного текстового документа и посетитель сможет "перескочить" к нужной ему главе, щелкнув гиперссылку в оглавлении. Очень удобно!

Якоря создают с помощью тега <A>, как и гиперссылки. Только в данном случае атрибут HREF в нем присутствовать не должен. Вместо него в тег <A> помещают обязательный здесь атрибут ID, задающий уникальное в пределах текущей Web- страницы имя создаваемого якоря. К нему предъявляются те же требования, что и к имени карты (см. раздел, посвященный картам).

И еще. Мы уже знаем, что тег <A> парный и в случае гиперссылки в него помещают текст (или изображение), который этой самой гиперссылкой и станет. Когда создают якорь, в этот тег не помещают ничего (так называемый пустой тег). По крайней мере, так поступают чаще всего.

Листинг 6.4 иллюстрирует пример HTML-кода, создающего якорь.

Листинг 6.4

.

<P>Окончание второй главы…</P>

<A ID="chapter3"></A>

<P>Начало третьей главы…<P>

.

Здесь мы поместили якорь с именем chapter3 перед началом третьей главы нашего воображаемого документа.

Хорошо! Якорь готов. Как теперь на него сослаться с другой Web-страницы? Очень просто. Для этого достаточно создать обычную гиперссылку, добавив в ее интернет-адрес имя нужного нам якоря. Имя якоря ставят в самый конец интернет-адреса и отделяют от него символом # ("решетка").

Предположим, что Web-страница, содержащая якорь chapter3, хранится в файле novel.htm. Тогда, чтобы сослаться на этот якорь с другой Web-страницы, мы создадим на последней такую гиперссылку:

<A HREF="novel.htm#chapter3">Глава 3</A>

При щелчке на такой гиперссылке Web-обозреватель откроет Web-страницу novel.htm и прокрутит ее в окне так, чтобы достичь места, где находится якорь chapter3.

Если же нам нужно сослаться на якорь с той же Web-страницы, где он находится, то можно использовать в качестве интернет-адреса только имя данного якоря, предварив его символом "решетки":

<A HREF="#chapter3">Глава 3</A>

На этом закончим главу о средствах навигации.

Что дальше?

В этой главе мы рассмотрели средства навигации, предлагаемые языком HTML, а именно — всевозможные гиперссылки. И связали все созданные нами к данному моменту Web-страницы в единый Web-сайт.

Пожалуй, можно завершить разговор о содержимом Web-страниц и языке HTML, на котором оно создается. Настала пора рассмотреть представление Web-страниц, о котором мы неоднократно упоминали. Именно этому будет посвящена вся следующая часть данной книги.

Часть 2

Представление Web-страниц. Каскадные таблицы стилей CSS 3

Глава 7

Введение в стили CSS

Предыдущая часть книги была посвящена содержимому Web-страниц и языку HTML 5, на котором оно создается. Мы изучили немало новых терминов, использовали много тегов HTML и создали несколько Web-страниц нашего первого Web- сайта. Эти Web-страницы содержат большой объем текста, таблицу, графическое изображение, аудио- и видеоролик. Неплохо для начала. Только вот выглядят эти Web-страницы как-то невзрачно. Однообразный текст, похожие друг на друга абзацы, таблицы без рамок, тоскливая черно-белая расцветка… Не помешает их как-то оформить. Вы так не считаете?.. За оформление Web-страниц и отдельных их элементов "отвечает" представление. Именно представление поможет нам оформить абзацы, таблицы и гиперссылки так, как хотим мы, а не Web-обозреватель (точнее, его разработчики). Именно представление поможет нам сделать Web-страницы привлекательными. Мы много раз упоминали о представлении, предвкушая момент знакомства с ним. И момент настал! Вся эта часть книги будет посвящена представлению Web- страниц и технологиям, используемым для его создания. А еще мы наконец-то займемся собственно Web-дизайном.

полную версию книги