2. Создание статического содержания. Html
Данная лекция освещает основы языка разметки HTML. Рассматривается структура HTML-документа, определение типа документа (DTD), основные теги. В конце лекции приводятся основные различия XHTML и HTML.
Содержание
2.1. Основы языка разметки HTML
2.1.1. Основные сведения
2.1.2. Структура HTML-документа
2.1.3. Состав HTML-документа
2.1.3.1. Document Type Definition (DTD)
2.1.3.2. Заголовок документа
2.1.3.2.1. Метатеги
2.1.3.2.2. Заголовок страницы
2.1.3.2.3. Link
2.1.3.2.4. Script
2.1.3.3. Тело документа
2.1.3.3.1. DIV
2.1.3.3.2. Таблица
2.1.3.3.3. Заголовки
2.1.3.3.4. Ссылки
2.1.3.3.5. Списки
2.1.3.3.6. Абзацы
2.1.3.3.7. Изображения
2.1.3.3.8. Другие элементы
2.1.4. Другие элементы языка HTML
2.1.5. XHTML
2.1.6. Ключевые термины
2.2. Краткие итоги
2.1.3.1. Document Type Definition (dtd)
В первой строке объявляется Document Type Definition:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD (Document Type Definition, определение типа документа) – язык описания структуры SGML-документа [10].
Пример очень простого XML DTD, описывающего список людей [10,12]:
<!ELEMENT people_list (person*)>
<!ELEMENT person (name, birthdate?)>
<!ELEMENT name (#PCDATA) >
<!ELEMENT birthdate (#PCDATA) >
Начиная с первой строки:
Элемент <people_list> содержит любое число элементов <person> . Знак <*> означает, что возможно 0, 1 или более элементов <person> внутри элемента <people_list>.
Элемент <person> содержит элементы <name>, <birthdate>. Знак <?> означает, что элемент необязателен. Элемент <name> не содержит <?>, что означает, что элемент <person> обязательно должен содержать элемент <name>.
Элемент <name> содержит данные.
Элемент <birthdate> содержит данные.
Пример XML-документа, использующего этот DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE people_list SYSTEM "example.dtd">
<people_list>
<person>
<name>Иванов Иван Иванович</name>
<birthdate>22.03.1978</birthdate>
</person>
</people_list>
Сейчас идет отказ от использования DTD в XML-технологии по ряду причин:
Используется отличный от XML синтаксис.
Отсутствует типизация узлов.
Отсутствует поддержка пространств имен.
На смену DTD пришел стандарт консорциума W3C XML Schema.
В примере !DOCTYPE предназначен для указания типа текущего документа – DTD.
Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы [11]. В табл. 2.1 приведены основные типы документов с их описанием.
|
Таблица 2.1. Основные виды DOCTYPE | |
|
DOCTYPE |
Описание |
|
HTML 4.01 | |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
Строгий синтаксис HTML – не содержит элементов, помеченных как "устаревшие" или "не одобряемые" |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
Переходный синтаксис HTML –содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
В HTML-документе применяются фреймы – аналогичен переходному, но содержит также теги для создания наборов фреймов |
|
XHTML 1.0 | |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Строгий синтаксис XHTML. |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Переходный синтаксис XHTML. |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
Документ написан на XHTML и содержит фреймы. |
|
XHTML 1.1 | |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"> |
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа [10]. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более "спокойно" относится к некоторым огрехам кода, поэтому этот тип использовать предпочтительнее.
Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании <!DOCTYPE> и без него. Чтобы не произошло подобных ситуаций, необходимо всегда добавлять этот тег в начало документа.