HTML и XHTML презентация

Разработка и продвижение открытых стандартов
и рекомендаций для веб-технологий
Консорциум W3C: www.w3.org
Международная организация, основана в 1994
Более 400 участников:
Adobe, AOL, Apple, Canon, CERN, Cisco, Dow Jones, Google, IBM, Intel,
Microsoft, Mozilla, Nokia, Opera, Oracle, Samsung, Siemens, Sun, Yahoo…
www.w3.org/Consortium/Member/List
Десятки технологий:
HTML, XHTML, CSS, HTTP, URI, XML, DOM, MathML, PNG, SVG, XSLT…
www.w3.org/Consortium/activities
Подробнее: www.w3.org/Consortium

Редакции HTML и XHTML
XHTML 1.1 (2001)
XHTML 2.0
HTML 5
SGML (1986)
XHTML 1.0 (2000)
XML 1.0 (1998)
HTML (1993)
HTML 2.0 (1995)
HTML 3.2 (1997)
HTML 4.01 (1999)
XML 1.1 (2004)

HTML и XHTML:
HTML — семейство языков;
XHTML входит в это семейство
HTML и XHTML: разночтения
HTML — семейство языков, несовместимых с XML;
XHTML — семейство языков, совместимых с XML;
XHTML не входит в HTML
Документ XHTML:
документ, соответствующий синтаксическим правилам XHTML
документ, обрабатывающийся в браузере
по правилам синтаксического анализа XHTML

HTML 4.01: www.w3.org/TR/html4
HTML и XHTML:
элементы: www.w3.org/TR/html4/index/elements.html
атрибуты: www.w3.org/TR/html4/index/attributes.html
XML 1.0: www.w3.org/TR/xml
XHTML 1.0: www.w3.org/TR/xhtml1
HTML 5 (проект): www.w3.org/TR/html5
Валидатор HTML: validator.w3.org
набор элементов и атрибутов HTML 4.01
синтаксические правила XML 1.0
документация Консорциума W3C
Валидатор HTML 5 (экспериментальный): qa-dev.w3.org/wmvs/HEAD

Internet Explorer: msdn.microsoft.com/en-us/library/ms533050.aspx
HTML и XHTML:
элементы: msdn.microsoft.com/en-us/library/ms533029.aspx
атрибуты: msdn.microsoft.com/en-us/library/ms533055.aspx
Firefox и родственные браузеры
элементы: developer.mozilla.org/en/docs/HTML:Element
Opera: www.opera.com/docs/specs/html
Safari:
developer.apple.com/documentation/AppleApplications/Reference/
SafariHTMLRef/Articles/StandardHTMLTags.html
документация на сайтах браузеров

разрабатывает
стандарты
HTML и CSS.
Консорциум W3C
Документ HTML (XHTML):
символьные данные (character data)
разметка (markup)
Символьные данные и разметка
Консорциум W3C
разрабатывает
стандарты
HTML и CSS.

документ HTML (XHTML)
Обработка документов в браузере
дерево документа (DOM)
отображение в браузере
синтаксический анализатор (parser)
ядро отображения (layout engine)

Основные понятия HTML и XHTML
src="pushkin.jpg"
Привет!
src
pushkin.jpg
alt="Пушкин" />
открывающий тэг (start-tag)
закрывающий тэг (end-tag)
тэг пустого элемента (empty-element tag)
пустой элемент (empty element)
непустой элемент (non-empty element)
атрибут (attribute specification)
имя атрибута (attribute name)
значение атрибута (attribute value)

Дерево документа (DOM)
p
a
strong
узел
элемента
(element)
текстовый узел
(text node)
Отношения между узлами:
родительский — дочерний (parent — child)
предок — потомок (ancestor — descendant)
смежный (sibling)
Консорциум W3C
стандарты
разрабатывает
HTML и CSS.

Области на веб-странице

корневой элемент (root)
Шаблон документа XHTML 5
пролог (prolog) lang="ru" xml:lang="ru">

Имена элементов и атрибутов — в нижнем регистре
Синтаксис XHTML: отличия от HTML
правильно: , неправильно:
Закрывающие тэги обязательны (p, li, td, …)
Значения атрибутов — в кавычках
правильно: colspan="3", неправильно: colspan=3
Косая черта в тэге пустого элемента
правильно:
, неправильно:
Подробнее:
Различия между HTML 4.01 и XHTML 1.0:
www.w3.org/TR/xhtml1/#diwww.w3.org/TR/xhtml1/#diffwww.w3.org/TR/xhtml1/#diffs
Совместимость с HTML и существующими браузерами:
www.w3.org/TR/xhtml1/#guidelines

Изменения в HTML 5
Отменены элементы и атрибуты:
элементы: applet, center, dir, font, frame, menu, s, strike, u и др.
атрибуты: accesskey, align, alink, background, bgcolor, border,
cellpadding, cellspacing, height, hspace, noshade, nowrap, valign,
vlink, vspace, width и др.
Новые элементы (плохо поддерживаются в браузерах):
Также не рекомендуются элементы: area, b, big, hr, i, map, small, tt
article, section, header, footer, audio, video, canvas, datagrid и др.
Подробнее: www.w3.org/TR/html5-diff

Обозначает формат данных (text/html, image/jpeg, …)
Тип содержания (media type)
Указывается:
на стороне сервера (в конфигурации сервера, в программном ядре сайта)
для документов HTML (XHTML) — в элементе meta (не обязательно)
Передаётся в HTTP-заголовке Content-Type
Служит для браузера ориентиром, как обрабатывать данные
Подробнее:
MIME Part One: Format of Internet Message Bodies
tools.ietf.org/html/rfc2045
MIME Part Two: Media Types: tools.ietf.org/html/rfc2046
HTTP/1.1: 3.7. Media Types
www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.7
MIME Media Types (IANA): www.iana.org/assignments/media-types

text/plain, application/octet-stream
Тип содержания: примеры
text/html, application/xhtml+xml
image/jpeg, image/gif, image/png, image/x-icon, image/svg+xml, model/x3d
text/css, text/javascript, application/javascript
application/xml, application/rss+xml
application/msword, application/vnd.openxmlformats-officedocument.
wordprocessingml.document.main+xml
application/pdf, application/x-shockwave-flash
audio/mid, audio/mpeg, video/mpeg
application/zip
multipart/mixed, multipart/form-data

Документ обрабатывается по правилам XML
Тип содержания application/xhtml+xml
Можно комбинировать в документе разные языки
(XHTML 1.0, XHTML 2.0, XHTML 5, MathML, SVG, …)
Легко интегрировать со смежными технологиями
(DOM в JavaScript и PHP)
Можно применять технологии XML (XSLT, XPath, XLink, …)
Не поддерживается в IE
Подробнее:
Firefox и родственные браузеры:
www.mozilla.org/docs/web-developer/faq.html#xhtmldiff
WHATWG: wiki.whatwg.org/wiki/HTML_vs._XHTML

Тип содержания для документов HTML и XHTML
text/html
application/xhtml+xml
HTML 4.01
XHTML 1.0
рекомендуется
рекомендуется
нельзя
допускается
Подробнее:
RFC 2854: The ‘text/html’ Media Type: tools.ietf.org/html/rfc2854
RFC 3236: The ‘application/xhtml+xml’ Media Type
tools.ietf.org/html/rfc3236
XHTML Media Types (W3C): www.w3.org/TR/xhtml-media-types
(X)HTML 5
обрабатывается
как XHTML 5
обрабатывается
как HTML 5

Поддерживается начиная с IE 6
Переключение режимов в IE
Режим стандартов (standards-compliant mode, strict mode):
улучшенная поддержка стандартов Консорциума W3C
DOCTYPE — HTML 4, HTML 5 или XHTML
неизвестный DOCTYPE
Режим совместимости (compatibility mode, quirks mode):
страница отображается, как в IE 5.5
DOCTYPE ниже HTML 4
неполный DOCTYPE
нет DOCTYPE
Подробнее: msdn.microsoft.com/en-us/library/bb250395.aspx
IE 8: msdn.microsoft.com/en-us/library/cc288325.aspx

IE 6:
Режим стандартов в IE
исправленная модель областей CSS
раздельное оформление элементов html и body
внутренние отступы (padding) для изображений
значение auto для свойств margin и width
строгая обработка ошибок в CSS
исправленное наследование свойств CSS в таблицах
IE 7:
фиксированное позиционирование (position: fixed)
свойства min-width, max-width, min-height, max-height
псевдокласс :hover для всех элементов
селекторы атрибутов

Firefox и родственные браузеры:
developer.mozilla.org/en/docs/Mozilla’s_DOCTYPE_sniffing
Переключение режимов
в альтернативных браузерах
full standards mode
almost standards mode:
developer.mozilla.org/en/docs/Gecko’s_“Almost_Standards”_Mode
quirks mode:
developer.mozilla.org/en/docs/Mozilla_Quirks_Mode_Behavior
Opera: www.opera.com/docs/specs/doctype
Safari (аналогично Firefox):
developer.apple.com/internet/webcontent/bestwebdev.html

Не обязательно в XML 1.0 и XHTML
Объявление XML (XML Declaration) encoding="utf-8"?>
Если нет объявления XML,
документ должен быть в кодировке UTF-8 или UTF-16
Вызывает режим обратной совместимости в IE 6
Подробнее:
Определение в стандарте XML 1.0: www.w3.org/TR/xml/#dt-xmldecl
Упоминание в XHTML 1.0:
www.w3.org/TR/xhtml1/normative.html#strict

Действительный (well-formed) документ:
Действительность и валидность
соответствует правилам XML
Валидный (valid) документ:
является действительным;
соответствует DTD
Валидатор HTML проверяет валидность
Действительный, но не валидный код:
Евгений Онегин
1823 – 1831
А. С. Пушкин