Третья размерность, контролируемая с помощью свойства z-index, представляет собой указание по размещению элемента страницы по оси, перпендикулярной плоскости страницы. Чем меньше значение свойства z-index, тем ближе эле — мент к поверхности страницы. И, соответственно, чем больше значение свойства
z-index, тем дальше находится слой элемента от поверхности страницы. Таким образом, если в HTML-код из предыдущего примера добавить следующие объяв- ления свойства z-index, Web-браузер будет выводить на экран заголовок уровня
2 поверх заголовка уровня 1, как показано на рис. 4.25.
background-color:yellow; border:solid 2px; font-size:25pt»> Текст заголовка уровня-2 text
background-color.-yellow; border:solid 2px; font-size:35pt»> Текст заголовка уровня-1 text
Значение свойства z-index для первого элемента больше, чем для второго. Как результат Web-браузер будет выводить на экран первый элемент (заголовок уровня 2) на слое поверх второго элемента (заголовка уровня 1).
ПРИМЕЧАНИЕ Несмотря на то что значения свойства z-inde x могут быть отрицатель — ными, равными нулю или положительными, используйте только ноль и положительные значе — ния. Некоторые версии Web-браузеров неправильно позиционируют элементы с отрицатель- ными значениями свойства z-inde x (поверх элементов с положительными значениями). Помните, что значение свойства z-inde x представляет собой относительное измерение. Таким образом, один элемент страницы можно поместить за другим за счет указания мень — шего (и не обязательно отрицательного) значения z-index.
Передача каскадного списка стилей через функцию проверк*| чем-то напоми —
нает проверку учителем вашего домашнего задания по каскаднкм спискам сти —
лей перед получением окончательной оценки. Помимо проверки наличия оши —
бок (например, неверных свойств или значений свойства), функция проверки
каскадных списков стилей, находящаяся по адресу http://jigsaw. w3.org/css —
vaiidator / также дает рекомендации по улучшению. Например, если передать
следующий внешний каскадный список стилей функции проверки каскадных
списков стилей комитета W3C, вы получите отчет, показанный на рис. 4.26:
23 2 Глава 4. Каскадные списки стилей
hi {coloriblue; font-size:40px; font-familyigaramond}
p {color:white; background:green; font-family:helvetica;
text-indent:lcm}
body {background:#ADD8E6; color:maroon}
Раздел «Errors » («Ошибки») отчета показывает ошибки, которые необходимо
ИСПравИТЬ, раздел «Warnings» («Предупреждения») Отмечает Правила, КОТОрЬЮ, несмотря на их корректность, можно улучшить, и дает рекомендации по улучше —
нию; раздел «Valid CSS Informations» («Корректная CSS-информация») В конце отчета показывает, что в каскадном списке стилей было сделано правиль — но.
вРмАК/тТмИКгоУМм
Использование функции проверки каскадных списков стилей представляет собой простой процесс. Имейте в виду, что функция проверки позволяет проверять толь —
ко внешние (связанные) списки стилей. Поэтому, если список стилей внедрен в раздел заголовка Web-страницы, для его проверки список потребуется скопировать
во внешний файл, который можно будет отправить функции проверки. Для про — верки каскадного списка стилей выполните следующие действия:
1. Если у вас нет постоянного соединения с сетью Internet, установите комму — тируемое соединение с помощью своего провайдера услуг Internet.
2. Откройте Web-браузер, наберите в его адресной строке http:/ /
3. Для отправки файла списка стилей функции. проверки нажмите гиперссыл — ку «Validate Your Cascading Style Sheet Source Fil e By Upload» («Проверьте свой исходный CSS-файл путем его загруз —
ки»). Web-браузер выведет на Экран страницу «Validator» («Средство проверки»), показанную на рис. 4.27.
4. В ПОЛе «Upload A CSS Sourc e File » («Загрузит е исходный CSS —
файл») введите полный путь к внешнему файлу каскадного списка стилей.
Для выбора файла списка стилей можно воспользоваться кнопкой
«Browse» («Просмотр»).
5. Выберите уровень предупреждений (выпадающий список «Warnings» («Предупреждения»)), профиль (выпадающий СПИСОК «Profile » («Про- филь»); версия каскадного списка стилей) и значение в выпадающем спис —
ке Medium (all, aural, Braille, handheld И Т. Д.). ЕСЛИ Проверяется СПИ — СОК стилей, предназначенный для использования Web-браузером в
системах PC или Macintosh, оставьте значения, установленные по умолча — нию.
6. Нажмите КНОПКУ «Submit This CSS Fil e For Validation» («Передать
этот csS-файл на проверку»). Web-браузер отправит файл, выбранный на шаге 4, и предоставит отчет о проверке, аналогичный представленному
в начале этого совета (см. рис. 4.26).
Глава 4. Каскадные списки стилей 23 3
Несмотря на то что вы имеете возможность передавать функции проверки как полные списки стилей, так и отдельные правила с помощью нескольких мето —
дов, старайтесь создавать и отправлять на проверку только внефние файлы спис —
ков стилей. Во-первых, помещение правил во внешние связанные списки стилей
в более полной мере задействует мощь списков стилей, которая позволяет при —
вести к одному виду все страницы одного Web-сайта. Во-втор|ых, при передаче файла, содержащего только каскадный список стилей, вам не нужно беспокоится
о том, что кто-нибудь просмотрит внедренный на страницу серверный сценарий
и поставит под угрозу безопасность чувствительной информации, содержащейся на вашем Web-сайте.
Глава5
XHTML и новые тенденции
Преобразование HTML в XHTML с помощью HTML Tidy
Выбор правильного значения OOCTYPE для Web-страницы
Проверка Web-страницы с помощью функции проверки XHTML Установка размера текста на XHTML-странице с помощью
ключевых слов
Группировка элементов списка выбора XHTML-формы с помощью дескриптора
Добавление цветов в XHTML-таблицы с помощью правил
каскадных списков стилей ^Ш
Внедрение шрифтов на XHTML-страницу с помощью правил каскадных списков стилей
Вставка одной XHTML-страницы в другую с помощью внутритекстового фрейма
Одновременное обновление нескольких внутритекстовых фреймов XHTML-страницы
Изменение внешнего вида XHTML-страницы на основе типа целевой системы
Управление печатью XHTML-страницы Web-браузером
Глава 5. XHTML и новые тенденции 23 5
главе 1 книги мы познакомились с языком гипертекстовой разметки
(Hypertext Markup Language, HTML) и сетью Wbrld Wide \^feb. Вы узнали, что
Web-браузеры запрашивают HTML-документы (т. е. \\^Ь-страниц|ы) с Web-серверов.
После получения Web-сервером HTML-запроса на передачу We|)-CTpaHHUbi он пе —
редает требуемый документ по сети Internet Web-браузеру, который этот документ запросил. Web-браузер, в свою очередь, открывает полученный HTML-документ и следует содержащимся в файле инструкциям гипертекстовой разметки. Инструк — ции гипертекстовой разметки представляют собой HTML-дескрипторы и атрибу —
ты, которые указывают Web-браузеру, где на экране поместить текст и объекты, и каким образом должны выглядеть текст на переднем плане и фон, на котором на — ходятся объекты на странице.
Во время изучения советов этой книги вы создаете Web-стфницы и, возмож —
но, говорите себе: «В этом нет ничего сложного!11. И будете правы. Создание
Web-страницы не требует наличия специального программного обеспечения или
специальных знаний, все что понадобится — это текстовый редактор и понима —
ние HTML. По иронии, простота создания Web-страниц явлфтся одной из са —
мых больших сложностей. Наличие тысяч и тысяч людей, занимающихся разра — боткой Web-страниц, не дает возможности заставить всех писать HTML-код
согласно одним и тем же правилам. Забудьте о том, что можнф заставить тысячу
или даже сотню людей принять одни и те же правила, если да}ке два производи —
теля самых популярных Web-браузеров не могут договоритьс^ о таких простых
вещах, как один единственный дескриптор, позволяющий вставлять на страницу фоновую музыку.
Ни компания Netscape, ни компания Microsoft не требуют от программистов
писать правильный HTML-код (код в соответствии с рекомендациями консорци — ума W3C). Более того, браузеры Netscape Navigator и Internet Explorer, как и
большинство других браузеров, пытаются «угадать», что программист имел в виду, когда написал неверный HTML-дескриптор. Как результат, размеры памяти, за —
нимаемые браузерами, возрастают, поскольку их производителям приходится вносить код для обработки многих некорректных методов использования HTML- кодов, описывающих Web-страницы. Дополнительный код приводит не только к увеличению объемов браузеров, но и к появлению ошибок, которые в некоторых
случаях даже верный HTML-код от одного браузера к другоЦу отображают по- разному.
Для решения всех перечисленных выше проблем, связанных с некорректным
кодированием и слишком «снисходительными» Web-браузе^ами, консорциум
W3C переписал HTML 4.01 как расширяемый язык разметки (Extensible Markup
Language, XML). Отсюда и было получено новое имя спецификации (XML +
HTML = XHTML). За счет применения жесткого синтаксиса объявления элемен —
тов в XML к ранее менее жестким правилам HTML консорциум W3C надеется,
что производители браузеров заставят программистов писать корректный
XHTML-код. Так, например, синтаксический анализатор XML-кода ни при каких
условиях не должен визуализировать неправильно закодированные XML-элемен — ты. Распространение XML-браузеров, которые визуализируют только корректно
написанный XHTML-код, позволит всем программистам привыкнуть к правиль —
236 Глава 5. XHTML и новые тенденции
ному созданию Web-документов и уменьшить производителям размеры браузеров
(а, следовательно, и количество ошибок) в их продуктах.
Несмотря на то что спецификация XHTML носит имя «новых» рекомендаций консорциума W3C, она не вносит новых возможностей в существующую специ — фикацию HTML 4.01. Фактически роль XHTML заключается в попытке предотв — ратить написание программистами некорректного HTML-кода за счет примене —
ния жестких правил XML к HTML. Если вы ранее сталкивались с XML и бросили его из-за сложности создания даже простой XML-страницы, не беспо — койтесь. Страницы, совместимые с XHTML 1.0, можно создавать, даже ничего не зная о XML. Для написания XHTML-кода используются те же дескрипторы, ат — рибуты и каскадные списки стилей, что и в HTML, с которым вы уже знакомы.
Если же вы обладаете некоторыми знаниями в XML, вы наверняка поймете роль
XHTML в будущем сети Internet.
Помимо внесения некоторых «новых» правил кодирования в HTML (которые мы рассмотрим чуть ниже), XHTML является расширяемым (отсюда и буква X в XHTML, от extensible — расширяемый) и модульным. Расширяемый означает, что язык XHTML позволяет, как производителям браузеров (в первую очередь), так и программистам, расширять HTML за счет добавления новых дескрипторов. Мо —
дульный предполагает, что производители браузеров смогут уменьшить размеры
их браузеров за счет исключения кода для XHTML-элементов, которые не требу — ются для их платформ. Ожидаемые в скором времени рекомендации консорциу — ма W3C четко укажут, какие дескрипторы будут принадлежать к каким поднабо — рам (или модулям) XHTML и предоставят формальный механизм добавления новых модулей для расширения языка и удаления существующих модулей для исключения ненужных элементов.
заголовка (между дескрипторами и ) должен начинать —
ся непосредственно после дескриптора . Кроме того, раздел заголовка должен заканчиваться перед началом раздела тела документа (ограниченного дес — крипторами
Если вы читали главу 1, то уже знакомы с дескрипторами разделов XHTML- документов — они ничем не отличаются от соответствующих дескрипторов
, и
, которые были описаны в этой главе. Другими словами, дескрипторы разделов используются для организации XHTML-кода Web-страни — цы в виде двух контейнеров («head» и «body», т. е. заголовок и тело страницы), которые помещаются в третий контейнер — «html». Каждый контейнер (или раз — дел) служит определенной цели, описанной ниже:
• . Контейнер «html», как и предполагает его имя, заключает
в себе все XHTML-элементы, атрибуты, сценарии и списки стилей, обра- батываемые Web-браузером во время визуализации Web-страницы. Началь —
ный дескриптор должен находиться непосредственно после описа —
ния DOCTYPE в начале XHTML-файла, а конечный дескриптор — в самом конце XHTML-файла.
• . Web-браузер загружает содержимое «заголовка» Web-страни — цы в память для возможного последующего использования (например, сце- нариев и каскадных списков стилей), но не выводит его содержимое на са — мой Web-странице. Заголовок Web-страницы начинается с начального дескриптора (который находится непосредственно после начально —
го дескриптора в начале XHTML-файла) и заканчивается конечным дескриптором . Помимо списков стилей и клиентских сценариев в заголовок Web-страницы можно помещать дескрипторы, содержащие, на —
пример, такую информацию, как имя автора Web-страницы, дату ее созда — ния и ключевые слова, которые могут использоваться поисковыми маши- нами при индексации Web-страницы для облегчения ее поиска посетителями. Кроме того, XHTML требует, чтобы в заголовки всех Web —
ров, элементы (и разделы) не будут перекрываться. Таким образом, строку кода
из предыдущего примера можно переписать следующим образов:
•
Следующее слово выводится полужирным: полужирный
24 0 Глава 5. XHTML и новые тенденции
Все имена элементов и атрибутов должны быть написаны В
с использованием символов нижнего регистра
Язык HTML (в отличие от XHTML) не чувствителен к регистру, т. е. в HTML —
документе дескриптор ничем не будет отличаться от дескриптора . Как результат, многие авторы, пытаясь сделать текст в своих Web-файлах более читабельным, пишут имена всех элементов символами верхнего регистра, за счет чего HTML-дескрипторы выделяются на фоне текста Web-страницы и атрибутов,
представленных символам^ нижнего регистра. Таким образом, обычный HTML — документ может выглядеть следующим образом:
DTD-определение XHTML содержит описание элемента, но не содер — жит описания для элемента
. Как результат, браузер пропустит таблицу и перейдет к следующему элементу.
Несмотря на то что имена атрибутов также должны содержать только симво — лы нижнего регистра, их значения могут состоять из символов в любом регистре. Так, например, следующие три строки кода будут считаться эквивалентными:
body bgcolor=»LightYellow»>
Открытые дескрипторы контейнеров должны быть закрыты, а пустые дескрип — торы должны иметь терминатор.
Глава 5. XHTML и новые тенденции 241
Элементы Web-страницы, которые имеют и начальный и конечный дескрип —
торы считаются «контейнерами», поскольку они включают или| содержат текст,
изображения или объекты, которые Web-браузер выводит на э|фан. Например, следующий код представляет собой пример использования начального и конеч —
ного дескрипторов абзаца () для вывода на экран текста:
Это текст, находящийся в пределах контейнера типа «абзаца».
При вставке контейнера типа «абзаца» (определенного его начальным и ко — нечным дескрипторами) в HTML-код Web-страницы Web-браузер выводит на эк — ран содержимое контейнера (т. е. текст абзаца).
Поскольку Web-браузер для каждого нового начального дескриптора абзаца вставляет пустую строку (и переходит на начало новой строки), многие авторы
используют контейнер абзаца (т. е. дескриптор ) в качестве
для разделения абзацев, как показано в следующем примере:
Первый абзац. Второй абзац. Третий абзац.
маркера абзаца
Такой формат не является приемлемым в контексте XHTML. В XHTML-доку —
менте каждый начальный дескриптор контейнера абзаца () дсрлжен закрывать —
ся с помощью конечного дескриптора . Требование по закрытию открытых контейнеров относится ко всем контейнерным дескрипторам, например, спискам
( , ) , элементам списка () , таблицам (
), формам ( ) И Т. Д.
Отсутствие конечных дескрипторов для элементов-контейнеЬов (как, напри —
мер, для трех абзацев в приведенном выше коде) считается синтаксически оши —
бочным и в HTML. (Несмотря на то что браузеры не рассматривают это ошиб —
кой.) Тем не менее, в отличие от HTML, язык XHTMLj требует, чтобы закрывались и элементы, которые не являются контейнерами |(так называемые
«пустые» элементы). Таким образом, в HTML приведенный в предыдущем приме —
ре код корректно можно записать в следующем виде:
Первый раздел текста.
Второй раздел текста. Третий раздел текста.
Тем не менее, в XHTML даже пустой элемент
должен закрываться с по —
мощью косой черты («/»), которая отделяется от имени элемента пробелом, как показано в следующем примере:
Первый раздел текста.
/Xbr /> Второй раздел текста.
/Xbr />
Требование по закрытию пустых дескрипторов также относится к дескрипто —
рам изображений (), фреймов ( />), метаданных (/>), оп —
ций (/>), параметров (
) И Т. Д.
Кроме того, терминатор пустых XHTML-дескрипторов может использоваться в
качестве сокращенной формы закрытия пустых элементов-контейнеров. Напри —
24 2 Глава 5. XHTML и новые тенденции
мер, в код XHTML-страницу для запуска Java-аплета MyAppiet. clas s можно по —
местить следующий дескриптор :
height=»200″X/applet>
Несмотря на то что дескриптор является контейнером, он не содер —
жит данных, которые будут выводиться на экран Web-браузером, не поддержива —
ющим аплеты. Для таких браузеров содержимое вставляется между дескриптора —
ми контейнера (т. е. между начальным дескриптором и конечным
дескриптором ). Поскольку контейнер пуст, конечный деск —
риптор можно заменить терминатором, как показано в следующем примере:
Несмотря на то что приведенная строка является корректным объявлением в HTML, язык XHTML требует, чтобы все значения, как числовые, так и тексто — вые, заключались в кавычки. Поэтому, в XHTML объявление «невидимой» табли — цы должно выглядеть следующим образом:
II
Помимо заключения значений атрибутов в кавычки, язык XHTML требует, чтобы все атрибуты содержали значения. В HTML в том случае, когда атрибут
имеет только одно значение, допускалось использовать сокращение, называемое минимизацией атрибута. Оно позволяло опускать значение атрибута и указывать только его имя. Например, для вставки на форму флажка используется дескрип —
тор, значение атрибута type которого равно «checkbox», как показано в следующем примере:
name=MWin98″ value=ON»>
При необходимости указания браузеру установить флажок, т. е. нарисовать «га — лочку», в HTML нужно было написать следующий дескриптор:
name=»Win98″ value=ON» checked>
Глава 5. XHTML и новые тенденции 2 4 3
Поскольку атрибут checked имеет только одно допустимое значение
(«checked»), Web-браузер знает, что делать, когда он встречает в дескрипторе атрибут checked без значения. Тем не менее, язык XHTML требует, что — бы все значения назначались атрибутам в явном виде (и в кавычках), даже если
существует только одно значение. Таким образом, для приведенного выше при —
мера для установленного по умолчанию флажка код потребуется переписать в следующей форме:
name=»Win98″ value=ON» checked^»checkecL!’>
XHTML-документы должны начинаться с объявления DOCTYPE
Для экономии времени при наборе HTML-кода Web-страниЦ авторы, как пра —
вило, опускают объявление DOCTYPE. В коде каждого \?еЬ-0раузера встроено
DTD-определение. Оно представляет собой что-то вроде указателя на дороге, ко —
торое помогает определить браузеру, как должны читаться HTlV^L-дескрипторы (а теперь уже и XHTML-дескрипторы) и их атрибуты.
Поскольку DTD-определение встроено в код каждого браузера, ранее не было необходимости дополнительно указывать файл, в котором можно найти описа —
ние HTML-дескрипторов и их атрибутов. Независимо от DTD-^пределения, ука — занного в объявлении DOCTYPE, браузер всегда проверял содержимое своего внут —
реннего DTD-определения, на основании которого он решал, ^то нужно сделать
с тем или иным дескриптором или атрибутом. Таким образоЦ, если дизайнеры
пользовались новыми атрибутами или дескрипторами, имеющимися, например,
в версии HTML 4.01, браузеры, содержащие DTD-определени^ для HTML вер —
сии 3.0, игнорировали «новые» дескрипторы и атрибуты;
Объявление DOCTYPE В языке XHTML стало обязательным элементом, если,
конечно, дизайнеры не определили собственный DTD-файл, содержащий описа — ния всех используемых в XHTML-документе дескрипторов и атрибутов. Таким образом, браузер может загрузить Web-документ, считать содержимое объявления DOCTYPE и указать, какое DTD-определение нужно использовать для трактовки
Несмотря на то что в приведенном примере элемент разбит на две строки, его можно поместить в одну строку XHTML-документа. Сколько бы строк не занимало объявление DOCTYPE, ОНО ДОЛЖНО находиться непосредственно
перед дескриптором в начале кода Web-страницы. Ниже в этой главе, в
совете «Выбор правильного значения DOCTYPE ДЛЯ Web-страницы», будет расска — зано о написании объявления DOCTYPE, которое указывает корректное DTD-оп —
ределение для данной страницы. А пока что давайте рассмотрим компоненты
элемента , ЧТО ПОЗВОЛИТ вам написать свое собственное объявление
DOCTYPE, когда это потребуется.
В приведенном примере элемент содержит следующие компоненты:
• html. Указывает, что корневым элементом документа является дескриптор
.
• PUBLIC. Указывает, что элемент содержит формальный общедо — ступный идентификатор (formal public identifier, FPI), который приводится
после ключевого слова PUBLIC. При^создании своего собственного DTD — определения ключевое слово PUBLIC ДОЛЖНО заменяться ключевым словом SYSTEM, а формальный открытый идентификатор (описанный ниже) дол —
ный идентификатор DTD-определения, необходимый для правильного чте —
ния XHTML-кода Web-CTpaHH4bL Идентификатор FPI указывает конкрет — ное DTD-определение, а браузер сравнивает его с идентификатором своего внутреннего DTD-определения. Если идентификаторы совпадают, браузер использует внутреннее DTD-определение, в противном случае загружается
DTD-определение, указанное в URL-адресе, который следует за FPI. Обра — тите внимание, что идентификатор FPI, если он присутствует, представля —
ет собой строку, заключенную в кавычки, которая начинается с дефиса (-).