Автор работы: Пользователь скрыл имя, 26 Февраля 2012 в 15:48, научная работа
Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.
Как отменить кэширование?
Это можно сделать, если в секции заголовка, созданного оператором <HEAD>, указать оператор <META> следующего вида:
<META HTTP-EQUIV=”Expires” CONTENT=”
Заметим, что дата, указанная в параметре CONTENT, уже должна наступить. В этом случае документ с таким заголовком будет всегда устаревшим и навигатор каждый раз будет загружать его заново.
1.16 Автоматическая перезагрузка документа
Если какой-либо документ периодически обновляется на сервере, вы можете сообщить навигатору, что этот документ надо время от времени перезагружать. Такая перезагрузка выполняется с использованием методики, которая называется client pull, что можно перевести как запрос данных со стороны клиента (то есть навигатора).
Включив в заголовок документа
следующую строку, вы можете заставить
навигатор автоматически
<META HTTP-EQUIV="Refresh" CONTENT=3>
Автоматическая загрузка другого документа
С помощью оператора <META> можно решить такую задачу, как автоматическая загрузка заданного документа HTML через определенный интервал времени.
Для чего это может потребоваться?
Например, на главной странице
вашего сервера может находиться
приветственное сообщение. Вы можете сделать
так, что через некоторое время
после появления этого
В приведенном ниже фрагменте через 15 секунд после загрузки текущего документа будет загружен документ с адресом http://www.my.ru/hello1.htm:
<META HTTP-EQUIV="Refresh" CONTENT="15;
URL=http://www.my.ru/hello1.
1.17 Включение дополнительных заголовков HTTP
С помощью оператора <META> вы можете включить любые дополнительные заголовки HTTP. Эти заголовки будут передаваться вместе с вашим документом навигатору.
Например, разместим в заголовке следующие операторы:
<META HTTP-EQUIV=”Expires” CONTENT=”
< META HTTP-EQUIV ="Keywords" CONTENT="Write, Read">
При этом будут сформированы следующие дополнительные заголовки HTTP:
Expires: Tue, 02 Jan 1996 01:00:00 GMT
Keywords: Write, Read
1.18 Определение набора символов
В примере, приведенном ниже, указывается, что документ HTML оформлен с использованием кодовой страницы 1251 для операционной системы Windows:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
Эта кодовая страница содержит
символы кириллицы и
1.19 Таблицы стилей
По мере увеличения количества документов, расположенных на вашем сервере WWW, вам будет все труднее и труднее заниматься его сопровождением. Особенно это касается оформления документов HTML. Представьте себе, что вам нужно, например, изменить оформление заголовков первого уровня во всех документах, а также изменить шрифтовое оформление текста, вставленного в документ при помощи оператора <P>. Ручная обработка множества документов HTML с целью приведения их внешнего вида к некоторому стандарту может отнять немало времени.
Аналогичная проблема возникает и при подготовки обычных текстовых документов. Например, при создании документа вы указали для обычных параграфов абзацный отступ и шрифт, а также оформили определенным образом заголовки. Далее у вас может возникнуть необходимость изменения параметров оформления, например, величины того же абзацного отступа. В простейших текстовых редакторах для внесения необходимых изменений вам придется вручную обработать каждый параграф текста.
Для упрощения оформления документов современные текстовые процессоры, такие, например, как Microsoft Word, используют оформление по образцу. Образцы содержат в себе описания параметров оформления и называются стилями. Например, в стиле может быть указано, что заголовок второго уровня отображается красным цветом и должен быть отцентрирован.
Создавая текстовый документ,
вы назначаете каждому параграфу
текста определенный стиль, выбирая
его по имени из списка или создавая
новый. В этом случае для изменения
параметров оформления параграфа с
заданным стилем вам не нужно вручную
редактировать все такие
Вернемся к проблеме оформления большого количества документов HTML. Для решения этой проблемы вы можете использовать так называемые каскадные таблицы стилей Cascading Style Sheets (CCS), разработанные консорциумом World Wide Web Consortium (W3C).
Полное описание текущей
редакции каскадных таблиц стилей вы
можете найти на сервере консорциума
W3C по адресу http://www.w3.org/pub/WWW/TR/
Что же касается навигатора Netscape Navigator версии 3.0, то он не работает со стилями. Однако в ближайшем будущем фирма Netscape планирует добавить такую возможность в свой навигатор.
Способы использования стилей
Предусмотрено три различных способа использования стилей. В зависимости от ваших потребностей, вы можете применять все или только некоторые из них.
Общие таблицы стилей для нескольких документов HTML
Наиболее интересное применение таблиц стилей - это их использование для оформления многих, возможно, даже всех документов HTML, расположенных на вашем сервере. При этом выполняется подключение (linking) файлов таблиц стилей к документам HTML. Имя файла таблицы стилей должно иметь вид *.css.
Изменяя содержимое файлов таблиц стилей, вы сможете без прямого редактирования изменить внешний вид всех документов HTML, к которым подключены эти файлы.
Заметим, что общие таблицы стилей могут использоваться одновременно не только на одном, но и на нескольких серверах WWW, так как можно подключать файлы таблиц стилей, указывая их стандартный адрес URL. Это позволяет централизованно создавать и изменять корпоративные таблицы стилей.
Встраивание таблиц стилей в документы HTML
Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, что задано в общих таблицах стилей, вы можете встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей.
Недостаток встроенных таблиц стилей заключается в необходимости редактирования содержимого всех документов HTML, где эти стили используются, при изменении стилей для всего сервера. Поэтому их применение оправдано только в тех случаях, когда на сервере расположено не очень большое количество документов HTML со встроенными стилями.
Может получиться так, что стили, встроенные в документ HTML, будут конфликтовать с общими таблицами стилей. В этом случае навигатор отдаст преимущество встроенным таблицам стилей.
Встраивание стилей в операторы HTML
Последний способ предполагает встраивание стилей непосредственно в операторы языка HTML и применение стилей для оформление отдельных фрагментов документа HTML. Этому способу присущ тот же недостаток, что и предыдущему, - при изменении стиля необходимо вручную редактировать все документы HTML, в котором этот стиль используется.
В случае конфликта со таблицами
стилей, встроенными в документ HTML,
навигатор отдает предпочтение стилям,
встроенным в операторы HTML. Поэтому
вы можете таким образом выполнить
локальное переопределение
Создание файлов таблиц стилей
Как мы уже говорили, файлы таблиц стилей содержат определения стилей, которые могут быть использованы для оформления многих документов HTML, расположенных на одном или нескольких серверах WWW.
Внешний вид файла таблицы стилей лучше изучать на конкретном примере (листинг 17).
Листинг 17. Файл chap2\styles\styles.css
H1 { font-size: 24;
font-weigt: bold;
color: red;
margin-left: 10% }
H2 { font-size: 20;
font-weigt: bold;
color: black;
font-family: Courier }
P.italic { font-style: italic }
P.red { color: red }
Здесь мы определили стили H1, H2, P.italic и P.red.
Определение стиля начинается с имени класса (например, H1), вслед за которым в фигурных скобках перечисляются параметры стиля. Для стиля с классом H1 мы указали размер шрифта, равный 24 пунктам, задали утолщение, красный цвет и отступ с левой стороны на 10 процентов от ширины экрана.
Отдельные параметры стилевого оформления задаются своими именами, после которых через символ двоеточия следует значение параметра. Параметры отделяются символом точка с запятой.
Ссылка на файл таблицы стилей
Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить оператор <LINK>. Пример ссылки на файл таблицы стилей вы можете найти в листинге 18.
Листинг 18. Файл chap2\styles\cssdemo.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Команды
логического форматирования</
<LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>Заголовок первого уровня</H1>
<P>Обычный текст
<H2>Заголовок второго уровня</H2>
<P CLASS=italic>Наклонный текст
<P CLASS=red>Текст красного цвета
</BODY>
</HTML>
Параметры оператора <LINK> необходимо задавать, как указано в этом примере. В параметре HREF должен быть указан адрес URL файла таблицы стилей. Этот файл может находиться на любом сервере WWW, а не только на том, где размещен данный документ HTML.
Как пользоваться стилями из файла таблицы стилей?
Очень просто.
Если в файле определены параметры для операторов языка HTML, предназначенных для оформления текста (например, для операторов <H1> или <H2>, как в нашем примере), вы просто указываете эти операторы без изменений:
<H1>Заголовок первого уровня</H1>
<P>Обычный текст
<H2>Заголовок второго уровня</H2>
Однако при определении стиля вы можете не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для оператора <P>:
P.italic { font-style: italic }
P.red { color: red }
Для того чтобы задействовать созданные классы, вы должны указать имя нужного класса в параметре CLASS оператора <P> (или другого оператора форматирования текста), как это показано ниже:
<P CLASS=italic>Наклонный текст
<P CLASS=red>Текст красного цвета
Внешний вид документа, оформленного с использованием нашего файла таблицы стилей, показан на рис.16.
Рис.16. Внешний вид документа, оформленного с использованием файла таблицы стилей
Нетрудно заметить, что заголовок первого уровня отображается с отступом от левого края, как это и было указано в стиле H1.
Заголовок второго уровня
изображен с использованием шрифта
с фиксированной шириной
Последние два параграфа документа отображаются, соответственно, с наклоном и с выделением красным цветом.
К сожалению, навигатор Netscape Navigator проигнорировал созданный нами файл таблицы шрифтов и отобразил документ с использованием стандартного оформления.
Стили в документе HTML
Вы можете встроить таблицу стилей непосредственно в документ HTML, для чего нужно использовать оператор <STYLE>. Этот оператор применяется в паре с закрывающим оператором </STYLE>. Между операторами <STYLE> и </STYLE> находится таблица стилей.
В листинге 19. мы привели пример документа HTML, в который встроена таблица стилей.
Листинг 19. Файл chap2\styles\embed.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Встроенная таблица стилей</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { font-size: 24;
font-weigt: bold;
color: red;
margin-left: 10% }
H2 { font-size: 20;
font-weigt: bold;
color: black;
font-family: Courier }
P.italic { font-style: italic }
P.red { color: red }
-->
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>Заголовок первого уровня</H1>
<P>Обычный текст
<H2>Заголовок второго уровня</H2>
<P CLASS=italic>Наклонный текст
<P CLASS=red>Текст красного цвета
</BODY>
</HTML>
Внешний вид этого документа при просмотре в навигаторе Microsoft Internet Explorer аналогичен показанному на рис. 2.18. Навигатор Netscape Navigator, как и в предыдущем случае, игнорирует стилевое оформление.
Обратите внимание на использование оператора комментария <!-- -->. Когда документ просматривается навигатором, не распознающем стилевое оформление, то такой навигатор проигнорирует как оператор <STYLE>, так и таблицу стилей. Если убрать оператор комментария, таблица стилей появится в окне навигатора, чего вы, очевидно, не хотели.
Стили в операторах HTML
Указывая в операторах оформления текста параметр CLASS, вы можете непосредственно задавать параметры стилевого оформления. Соответствующий пример документа HTML мы привели в листинге 20.
Листинг 20. Файл chap2\styles\inline.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Встроенные стили</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1 STYLE="font-size: 24; font-weigt: bold; color: red;
margin-left: 10%">Заголовок первого уровня</H1>
<P>Обычный текст
<H2 STYLE="font-size: 20; font-weigt: bold;
color: black;
font-family: Courier">Заголовок второго уровня</H2>
<P STYLE="font-style: italic">Наклонный текст
<P STYLE="color: red">Текст красного цвета
</BODY>
</HTML>
Здесь мы определяем те же самые
параметры стилевого