Загальні правила і рекомендації при написанні html
З чого починається документ
Отже, з чого ж починається HTML-документ? Звичайно ж з опису його типу за допомогою DOCTYPE! (Див. 2). В першу чергу ви повинні повністю усвідомлювати який саме тип документа ви зібралися втілити в життя. Втім, незалежно від того, який це буде документ, довільний HTML або XHTML 1.0 Strict, вам в будь-якому випадку необхідно дотримуватися загальних правил форматування (див. 4) і порад, викладеним тут і в наступних розділах.
За допомогою конструкції DOCTYPE браузер визначає з яким типом документа він має справу. Нижче наведені конструкції DOCTYPE для основних видів документів.
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
Xhtml 1.0 Strict
Xhtml 1.0 Transitional
Xhtml 1.0 Frameset
Слід зазначити, що в Інтернет зустрічається багато документів з неповною записом DOCTYPE - коли не вказано URL на DTD, або не вказано зовсім. У разі відсутності DOCTYPE в документі, браузер налаштовується на тип документа за замовчуванням, який, як ви самі розумієте, може відрізнятися від очікуваного. Подібні неточності є причиною багатьох помилок і труднощів при роботі з такими документами. Найвідоміша особливість пов'язана з зазначенням типу документа - це модель відображення блокових елементів, характерна для браузерів Internet Explorer (див 6.2.2). Щоб уникнути можливих помилок і неприємностей завжди вказуйте повну запис DOCTYPE.
Моделі відображення блокових елементів
З огляду на популярність браузера Internet Explorer 6.0, можна по праву сказати, що існує дві моделі відображення блокових елементів, або так званих боксових моделей (box model):
Модель Internet Explorer (IE)
Стандартна модель W3C
Модель IE говорить про те, що, якщо ви визначаєте ширину (width) блочного елемента (наприклад елемента DIV), то величина відступу (padding) і ширина кордону (border-width) входять до складу цієї величини. Стандартна модель W3C стверджує зворотне: величина відступу і ширина кордону повинні доповнювати ширину елемента. У підсумку маємо два абсолютно різних значень реальної (відображається) ширини об'єкта при одних і тих же значеннях width, padding і border-width. Розглянемо приклад з шириною об'єкта рівну 200 пікселів, внутрішнім відступом в 20 пікселів і шириною кордону, чтоже дорівнює 20 пікселям. Отримуємо наступний запис в CSS:
CSS фрагмент для об'єкта
Реальна (відображається) ширина об'єкта для моделі Internet Explorer дорівнює 200 пікселів, для моделі W3C:
200 + 2 * 20 + 2 * 20 = 280 пікселів.
Малюнок, наведений нижче, наочно демонструє ці відмінності.
Малюнок 6-2. Моделі відображення блокових елементів.
Використання моделі W3C зобов'язує робити додаткові обчислення при роботі з CSS. До того ж модель Internet Explorer здається більш логічною з точки зору взаємного розташування і взаємодії об'єктів. Проте, стандарт є стандарт, модель Internet Explorer слід вважати застарілою, а орієнтуватися потрібно на модель W3C.
Браузер Internet Explorer 6.0 підтримує обидві моделі, в залежності від того, який тип документа вказано на початку документа. Має значення також і те, приведена повна його запис або укорочена, без URL на DTD. Таблиця, наведена нижче, описує поведінку Internet Explorer 6.0 в залежності від записи DOCTYPE.
Таблиця 6-2 - Конструкція DOCTYPE і модель відображення блокових елементів Internet Explorer 6.0
Слід зазначити, що є ще одна принципова відмінність між двома моделями в Internet Explorer 6.0. Воно полягає в тому, що стандартна модель розглядає елемент html як відображається, який є контейнером для елемента body. Приклад, наведений нижче, допоможе зрозуміти цю різницю.
Приклад відображення властивостей елемента HTML
Якщо прибрати опис DOCTYPE, Internet Explorer 6.0 покаже зовсім іншу картину.