Готовим базовый документ
Ну, что же, после небольшого перерыва пора возобновить повествование. Честно говоря, я очень много думал над тем, каким именно образом это самое повествование продолжить. С одной стороны, многим посетителям хотелось бы поскорее увидеть на данном ресурсе реальные методы и приемы верстки, но с другой стороны – без теоретической подготовки тоже никак не обойтись. В конечном итоге я решил остановиться все-таки на «практическом руководстве к действию», в котором время от времени будут встречаться небольшие «теоретические отступления».
В ближайших публикациях мы рассмотрим примеры верстки различных двухколоночных и трехколоночных макетов, ознакомимся с принципами оформления горизонтальных и вертикальных навигационных меню, научимся добиваться практически идентичного отображения полей форм в разных браузерах. Параллельно будут рассмотрены некоторые теоретические аспекты верстки: различные CSS-свойства, техника Faux Columns, методы Image Replacement, магическое свойство hasLayout, прелоад графических изображений средствами CSS и как избежать при этом неприятного эффекта Image Flickering в Internet Explorer, а также многое другое...
Но все это будет несколько позже, а пока мы должны выполнить одну важную подготовительную работу – создать базовый документ, который будем использовать во всех последующих практических занятиях. Для подготовки такого документа лучше всего воспользоваться каким-нибудь профессиональным инструментом веб-разработчика: Macromedia Dreamweaver, HomeSite, Adobe GoLive или другим аналогичным программным обеспечением. Также вполне подойдет Notepad++. Единственное, что я бы вам крайне не рекомендовал – это обычный блокнот MS Windows. Итак, приступим.
Выбор стандарта
В первую очередь необходимо определиться с выбором стандарта, которому наш документ будет соответствовать. Можно сказать, что этот выбор мы уже сделали в предыдущей публикации. Поскольку в ближайшем будущем разметка церковных проповедей с помощью LitML нам не грозит, давайте остановимся на HTML 4.01 и начнем наш документ с объявления строгого DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Если вам все это не нравится, вы можете объявить XHTML 1.0 Strict и закрывать «пустые» элементы просто для того, чтобы «оно так было». Бог в помощь. ;-)
Время от времени ко мне поступают вопросы относительно выбора того или иного DTD. В частности, что «лучше»: строгое (strict) DTD или переходное (transitional) DTD. Дело здесь в том, что Strict DTD лучше Transitional DTD ровно настолько, насколько оборудование для синтеза дихлорэтана лучше оборудования для производства сливочного мороженого. Равно как и наоборот. Другими словами, эти два DTD не могут рассматриваться в контексте «лучше/хуже». Каждое из них несет свою смысловую нагрузку и должно применяться в зависимости от тех целей и задач, которые вы перед собой ставите.
Разница между этими определениями заключается в том, что Strict DTD, в отличие от Transitional DTD, не допускает использования в документе различных нерекомендуемых (deprecated) элементов и атрибутов, большинство из которых предназначаются не для логической разметки, а для визуального форматирования. Другими словами, если вы объявите в документе Strict DTD и будете при этом активно пользоваться элементом <font>…</font> (например), такой документ не пройдет проверку на валидность.
Таким образом, глядя на объявление DTD в документе и при условии, что этот документ соответствует этому DTD, можно косвенно оценить профессионализм разработчика. Логика весьма простая: если вам не безразлична семантическая корректность разметки и принципы разделения структуры и представления, ничто не может помешать вам объявить Strict DTD. С другой стороны, если вы являетесь большим любителем всяких несемантических «гадостей» в разметке, вы можете спокойно объявить Transitional DTD. Это не сделает ваши документы конформными, но позволит им соответствовать хотя бы синтаксическим требованиям заявленного стандарта.
Так или иначе, поскольку мы не собираемся использовать в разметке различные нерекомендуемые конструкции, Strict DTD – наш выбор.
Общая структура документа
После объявления !DOCTYPE нам необходимо разметить общую структуру документа, которая включает элемент <html>…</html>, элемент <head>…</head> и элемент <body>…</body>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>...</head>
<body>...</body>
</html>
Элемент <html>…</html> называется корневым элементом документа и имеет модель содержимого %html.content;. SGML-конструкция %html.content; является специальной параметрической ссылкой, которая расшифровывается как "HEAD, BODY". Это означает, что элемент <html>…</html> может содержать только элементы <head>…</head> и <body>…</body>, причем каждый из этих элементов может встречаться внутри элемента <html>…</html> не более одного раза. Помимо этого, запятая в конструкции "HEAD, BODY" говорит о том, что эти элементы должны идти именно в такой последовательности, а никак не наоборот:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>...</body>
<head>...</head>
</html>
Элемент <head>…</head> предназначается для размещения различной технической информации о документе, которая не отображается в окне браузера. Модель содержимого этого элемента описана в Спецификации конструкцией (%head.content;) +(%head.misc;). Параметрическая ссылка %head.content; расшифровывается как "TITLE & BASE?" и подразумевает, что элемент <head>…</head> в обязательном порядке должен содержать элемент <title>…</title> (о нем мы поговорим чуть позже) и может содержать необязательный элемент <base>. Символ амперсанда в конструкции "TITLE & BASE?" позволяет элементам <title>…</title> и <base> появляться в любой последовательности, но не более одного раза.
Параметрическая ссылка %head.misc; расшифровывается как "SCRIPT|STYLE|META|LINK|OBJECT". Это означает, что элемент <head>…</head> может содержать элементы <script>…</script>, <style>…</style>, <meta>, <link> и <object>…</object> соответственно. Символ «+» перед конструкцией %head.misc; обозначает опциональность всех этих элементов и подразумевает, что любой из них может появляться внутри элемента <head>…</head> неограниченное количество раз.
Еще один элемент, который нам необходимо рассмотреть в рамках общей структуры документа – это элемент <body>…</body>. Данный элемент является своеобразным контейнером для всех других логических конструкций, которые используются для разметки содержимого документа (заголовки, абзацы, списки, таблицы, цитаты и т.п.).
Спецификация HTML 4.01 предусматривает для элемента <body>…</body> модель содержимого (%block;|SCRIPT)+ +(INS|DEL). В первую очередь это говорит о том, что элемент <body>…</body> не может не иметь содержимого. Внутри него обязательно должен находиться какой-нибудь блочный элемент (как минимум один), либо элемент <script>…</script>. Помимо этого, элемент <body>…</body> может содержать необязательные элементы <ins>…</ins> и <del>…</del>.
Поскольку элементу <body>…</body> предписывается иметь содержимое уровня блока в обязательном порядке, давайте вставим в разметку нашего документа пустой логический блок <div>…</div>. Это позволит документу не нарушать синтаксические требования Спецификации.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>...</head>
<body>
<div></div>
</body>
</html>
Справедливости ради надо отметить, что Спецификация HTML 4.01 позволяет не указывать элементы <html>…</html>, <head>…</head> и <body>…</body>. В этом случае границы этих элементов устанавливаются интерпретатором автоматически, исходя из контекста. Тем не менее, давайте вспомним про первое неформальное правило хорошего тона. Если уж мы решили указывать для всех структурных элементов закрывающие тэги, давайте не будем забывать и про открывающие. Причем даже там, где это теоретически допускается.
Название документа
Как уже было отмечено чуть выше, элемент <head>…</head> в обязательном порядке должен содержать элемент <title>…</title>. Именно этот элемент определят название документа, которое отображается в заголовке окна браузера.
Элемент <title>…</title> имеет модель содержимого (#PCDATA) -(%head.misc;). Это означает, что название документа может включать не только буквы, цифры и знаки пунктуации, но и символьные ссылки-мнемоники. В то же время вводятся явные ограничения на содержимое элемента <title>…</title>, которые предписывают не включать в название документа какую-либо разметку и HTML-комментарии.
Небезызвестно, что название документа является очень важным фактором, влияющим на алгоритмы ранжирования поисковых систем. Несмотря на то, что этот аспект больше касается SEO, нежели чем верстки, некоторые вполне конкретные рекомендации можно найти и в Спецификации HTML 4.01. В частности, разработчикам рекомендуется давать документам осмысленные и информативные названия. Давайте назовем наш документ так, чтобы было понятно, что именно он из себя представляет:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Базовый документ для практических занятий по верстке</title>
</head>
<body>
<div></div>
</body>
</html>
Кодировка
Выбор кодировки символов является очень важным аспектом при создании гипертекстовых документов. На сегодняшний день подавляющее большинство ресурсов Рунета используют стандартную кириллическую кодировку Microsoft Windows, которая обозначается аббревиатурой CP1251 (windows-1251). Несколько реже встречаются кодовые таблицы UTF-8, ISO 8859-5 и KOI8-R, которые тоже поддерживают кириллицу.
Несмотря на всю популярность кодовой таблицы windows-1251, я не рекомендую вам использовать данную кодировку. Гораздо предпочтительнее воспользоваться кодировкой UTF-8, которая официально рекомендуется W3C и обладает весьма существенными преимуществами.
В первую очередь необходимо отметить, что UTF-8 является одним из вариантов международной кодировки Unicode, охватывающей все алфавиты и иероглифические системы мира. Это означает, что в пределах одного документа могут спокойно сосуществовать различные наборы символов из русского, французского, греческого, японского, арабского и других языков. Помимо этого, отпадает необходимость в использовании многих мнемонических и цифровых ссылок для представления специфических символов и знаков (£, ∑, →, ♦ и т.п.) Благодаря кодировке UTF-8 вы сможете вставлять в документы такие символы прямо в своем «первозданном» виде (определенные ограничения в данном случае устанавливает только используемый шрифт).
Еще одним аргументом в пользу UTF-8 является тот факт, что кодировку windows-1251 поддерживают далеко не все мобильные устройства. В частности, мой Sony Ericsson K750i отображает документы в кодировке windows-1251 страшными кракозябрами. В случае с UTF-8 таких проблем, конечно же, не возникает.
Кодировку символов можно задать на уровне веб-сервера, но даже в этом случае совсем не помешает указать соответствующую информацию непосредственно в самом документе. Сделать это можно (и нужно) при помощи элемента <meta>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Базовый документ для практических занятий по верстке</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div></div>
</body>
</html>
Время от времени я периодически наталкиваюсь в Сети на разные маразматические заявления. Например, такие:
У меня IE6 при загрузке вашей страницы в кодировке UTF-8 очень страшно сглючил. Пришлось менять кодировку на windows-1251. А все от того, что IE6 не терпит кириллицу в кодировке UTF-8...
Смею вас заверить, что ни один современный браузер не имеет никаких проблем с поддержкой кодировки UTF-8, а подобные заявления являются следствием банальной некомпетентности некоторых (особенно начинающих) веб-разработчиков.
Все дело в том, что любое программное обеспечение, предназначенное для создания и редактирования HTML-документов, предусматривает кодировку по умолчанию. Например, Macromedia Dreamweaver позволяет установить кодировку для новых документов в меню Edit – Preferences – New Document – Default Encoding, а Notepad++ позволяет это сделать в меню Опции – Настройки – Новый документ – Кодировка. И если вы создадите новый документ в кодировке windows-1251, а затем просто напишете в элементе <meta> значение «utf-8» – это не будет означать смену кодировки документа. При попытке просмотреть такой документ в браузере вы увидите только кракозябры.
Написать «charset=utf-8» вместо «charset=windows-1251»
– это еще не означает «сменить кодировку» документа.
Сменить кодировку символов в документе можно только посредством специальной конвертации кодовой таблицы. Macromedia Dreamweaver позволяет это сделать в меню Modify – Page Properties – Title/Encoding – Encoding, а в Notepad++ необходимо сначала создать новый пустой документ, установить необходимую кодировку в меню «Кодировки» и только затем вставить в этот документ разметку из другого файла при помощи буфера обмена Microsoft Windows.
Заключение
Давайте кратко проанализируем проделанную работу. Мы объявили стандарт HTML 4.01 Strict, разметили общую структуру, определились с названием документа и выбрали кодировку UTF-8. Несмотря на всю примитивность полученного в результате выполненной работы документа, вы можете скачать его в готовом для «употребления» виде. Именно этот базовый документ мы будем брать за основу во всех последующих практических занятиях.
Ссылка на комментарий 21.01.2008 20:20
Алексей
Россия, Сургут
http://11aa.ru
Реально интересно написано и толково!... GOVNOCODE... кракозябры... :)
Ссылка на комментарий 23.01.2008 07:17
cinic
Россия, Питер
http://corenet.ru
Начинаем учиться... Наконец дождались. :)
P.S.:
Константин, я как-то давно сталкивался с такой ситуацией, что Дримвейвер 8, когда сохраняешь в УТФ-8, добавляет в самое начало документа, какой-то непонятный символ.
Ссылка на комментарий 23.01.2008 15:43
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Да, наверное, мне следовало об этом написать. Попробую исправить это досадное упущение здесь и сейчас.
Этот «непонятный символ» называется BOM (Byte Order Mark) и в случае с UTF-8 представляет из себя три служебных байта (EF BB BF), которые автоматически добавляются в начало документа и позволяют различным программам правильно идентифицировать кодировку документа. Но все это только в теории. На практике BOM-сигнатура может приводить к различным проблемам с интерпретацией документов некоторыми текстовыми редакторами и старыми браузерами. Если документ сохранен с BOM-сигнатурой, соответствующее предупреждение можно получить даже от валидатора:
Другими словами, рекомендуется не включать в UTF-документы метку BOM до тех пор, пока все программы и системы не будут поддерживать эту сигнатуру надлежащим образом.
Несложно догадаться, что если что-то не рекомендуется, то делать это и не нужно. В первую очередь потому, что наличие метки BOM в документах не является чем-то обязательным. Все современные браузеры и программы прекрасно воспринимают документы в кодировке UTF-8 без указания BOM-сигнатуры, а большинство профессиональных инструментов веб-разработчика при сохранении документов позволяют отключать добавление этой метки. В частности, Macromedia Dreamweaver предусматривает такую возможность в меню Modify – Page Properties – Title/Encoding – Include Unicode Signature (BOM), а Notepad++ позволяет отключить BOM-сигнатуру посредством выбора кодировки «Кодировать в UTF-8 (без BOM)».
Напоследок хотелось бы отметить, что эти служебные байты являются одной из тех причин, по которым я не рекомендую создавать HTML-документы при помощи обычного блокнота MS Windows. Стандартный блокнот умеет сохранять документы в кодировке UTF-8, но не предусматривает при этом возможность отключать автоматическое добавление BOM-сигнатуры.
Ссылка на комментарий 23.01.2008 20:10
lancer
Россия
<title>Базовый документ для практических занятий по верстке</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
IMHO, точнее было бы ставить данный мета-тег перед титлом.
Ссылка на комментарий 23.01.2008 22:02
Константин Ефимов
Россия, Тольятти
http://webstandards.org.ru
Открою Вам страшную тайну: это не только Ваше IMHO. :-)
Тем не менее, я не считаю, что это имеет принципиальное значение.
На вкус и цвет, как говорится... )
Ссылка на комментарий 24.01.2008 21:07
lancer
Россия
Понятно! )
Ссылка на комментарий 01.02.2008 17:57
DeadlyShadow
Украина, Киев
Впервые вижу такое нормальное и доходчивое обьяcнение. Спс)
Ссылка на комментарий 05.02.2008 20:26
cinic
Россия, Санкт-Петербург
http://corenet.ru
Редко пользуюсь Dreamweaver'ом, но спс за заметку. Кстати обнаружил примерно тоже самое при сохранении документа. Раньше просто внимания не обращал.
Ссылка на комментарий 28.02.2008 23:50
Максим
Беларусь
Зачётная статья. Вопрос автору, почему при выборе Беларуси появляется левый флаг?
Ссылка на комментарий 01.03.2008 19:32
Zigzag
Беларусь, Минск
http://webdev.lovata.com
Максим, потому что я попросил =) А закатом над болотом можете любоваться, купив эту тряпку и повесив у себя в комнате =)
Ссылка на комментарий 15.03.2008 00:48
Эгоист
Украина, Львов
очень полезная статья, но когда уже будеут следующие статьи :)
Ссылка на комментарий 19.03.2008 11:59
Sunny
Россия
базовый документ - это конечно хорошо.. )
ну, а дальше..
Ссылка на комментарий 01.04.2008 20:12
kattykatty
Украина, Сумы
http://reflextyping.org.ua
Ни за что бы не догадалась, что кодировку нужно менять в ноутпаде таким замысловатым образом. Спасибо!
Ссылка на комментарий 04.04.2008 14:52
Alt
Россия
Похоже, что автор забил на сайт :( А жаль.
Ссылка на комментарий 25.05.2008 14:41
Pavel
Украина
http://azovsky.com.ua
Спасибо за хорошую статью!
Хочу добавить в поддержку utf-8.
Если Вы указали charset=utf-8 и кодировали в редакторе с нужной кодировкой (utf-8), а с сервера хостинга страница все-равно грузиться в windows-1251 (видны лишь kryakozables), то скорей всего сервер настроен по дефолту выдавать такоую кодироку, которая нам не нужна (в данный момент).
Решение!
в файл .htaccess прописать:
AddDefaultCharset Off<IfModule mod_charset.c>
CharsetDisable On
CharsetRecodeMultipartForms Off
</IfModule>