Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 28


Самоучитель по HTML и CSS

Добрый день.

На сайте htmlbook.ru возобновил работу форум, где вы можете решить любые возникшие вопросы, связанные с HTML, CSS и веб-разработкой. Регистрация на форуме желательна, но не обязательна.

Сегодня продолжаем тему об XHTML. Напоминаю, что предыдущие выпуски рассылки вы можете скачать в виде самоучителя по адресу http://htmlbook.ru/download/?id=4. Формат CHM, объем архива 651 кБ. Буду рад, если возникнут замечания или предложения по самоучителю. Их можно изложить по почте vlad@htmlbook.ru.

2. Структура XHTML-документа

Любой XHTML-файл состоит из четырех разделов — <!DOCTYPE>, контейнера <HTML>, заголовка (<HEAD>) и тела документа (<BODY>). Последние два элемента перекочевали из HTML и ничем не отличаются от своего родоначальника (пример 2.1).

Пример 2.1. Простейший XHTML-документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
</head>

<body>
<!-- А здесь надо размещать все, что хочется увидеть на странице. -->
</body>
</html>

Элемент <!DOCTYPE> сообщает браузеру о типе текущего документа и как его интерпретировать. Различают три типа документа по спецификации XHTML 1.0:

  1. Strict (Строгий);
  2. Transitional (Переходный);
  3. Frameset (С фреймами).

XHTML 1.0 Strict

Используется в том случае, если в документе идет четкое разделение оформления и содержания. При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили (пример 2.2).

Пример 2.2. Документ со строгой разметкой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример строгого документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<p>...</p>
</body>
</html>

XHTML 1.0 Transitional

Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере. В этом случае допускается в коде документа использовать теги физического проектирования (например, тег <TT>) и лишь частично стили. В примере 2.3 показан вид тега <!DOCTYPE> для подобных документов.

Пример 2.3. <Переходный> документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример мягкого документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<p>...</p>
</body>
</html>

XHTML 1.0 Frameset

Применяется, когда окно браузера делится на два или более фрейма (пример 2.4).

Пример 2.4. Документ с фреймами

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Фреймы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<frameset cols="100,*">
 <frame src="menu.html" name="menu" />
 <frame src="content.html" name="content" />
</frameset>
</html>

Тег <!DOCTYPE> хотя и обязателен, но не является непосредственной частью XHTML-документа, поэтому для него закрывающего тега не требуется.

Контейнер HTML

Тег <HTML> выступает главным контейнером, в котором хранятся все остальные элементы, и в коде он должен идти сразу же после <!DOCTYPE>. В <HTML> требуется указывать обязательный параметр xmlns со значением http://www.w3.org/1999/xhtml. Он определяет пространство имен — так называется набор имен всех элементов и атрибутов, чтобы обеспечить их уникальность в пределах XHTML-документа.

Кодировка документа

В HTML кодировка документа задается с помощью тега <META> расположенного внутри контейнера <HEAD>. В XHTML же кодировка может задаваться двумя путями: аналогично HTML и с помощью команды <?xml version="1.0" encoding="UTF-8"?>, она должна располагаться в первой строке кода, перед <!DOCTYPE>. В данном случае UTF-8 обозначает кодировку текущего документа. В примере 2.5 показано, как устанавливать кодировку подобным способом.

Пример 2.5. Кодировка документа

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Кодировка</title>
</head>
<body>
<p>Текст на русском языке в стандартной кодировке Windows.</p>
</body>
</html>

В данном примере кодировка установлена как windows-1251.

Замечание

В браузере Internet Explorer до 6 версии включительно команда <!DOCTYPE> должна обязательно стоять в первой строке кода, иначе браузер переходит в режим несовместимости (Quirk mode) и веб-страница может отображаться весьма причудливым образом. Поэтому для универсальности кодировку лучше указывать с помощью метатегов, как и в HTML.

Вопросы для проверки

1. Что задает параметр xmlns тега <BODY>?

  1. Ссылку на спецификацию XHTML.
  2. Ссылку на определение типа документа.
  3. Пространство имен.
  4. Способ интерпретации документа как XML.
  5. Указатель на валидатор XHTML.

2. Какой <!DOCTYPE> для приведенного примера следует поставить, чтобы код стал валидным?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример</title>
</head>
<body>
Привет, меня зовут Вася. Мне 14 лет.
</body>
</html>

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

3. Паша сохранил XHTML-документ в программе Блокнот, но при открытии в браузере Internet Explorer вместо русского текста он увидел «кракозябры». Что ему следует сделать?

  1. Сменить браузер.
  2. Вместо строгого <!DOCTYPE> поставить переходный.
  3. Изменить кодировку документа.
  4. Убрать параметр xmlns у тега <HTML>.
  5. Добавить строку <?xml version="1.0" encoding="Cyrillic"?>

Задание

Создайте веб-страницу с использованием XHTML, как показано на рис. 2.1.

Рис. 2.1

Рецепты CSS

Как убрать пунктирную рамку вокруг ссылок в браузере Firefox?

В браузере Firefox при активации ссылок, вокруг них добавляется пунктирная граница. Она предназначена для привлечения внимания и демонстрации текущего фокуса. Тем не менее, некоторые разработчики хотели бы убрать эту линию, чтобы сделать сайт однообразным в различных браузерах. Для этого следует к селектору A добавить стилевой параметр outline со значением none.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Граница в Firefox</title>
<style type="text/css">
A {
 outline: none; /* Убираем границу вокруг ссылок */
}
</style>
</head>
<body>
<p><a href="http://google.ru">Google</a></p>
</body>
</html>

В данном примере у всех ссылок на сайте в браузере Firefox прячется пунктирная граница, отображаемая при активации ссылок.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное