Состав html-документа
Рассмотрим более подробно структуру и состав HTML -документа на следующем примере:
|
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 |
<html> |
|
3 |
<head> |
|
4 |
<!-- Этот раздел предназначен для заголовка страницы и технической информации. --> |
|
5 |
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> |
|
6 |
<meta http-equiv="Content-Language" content="ru"/> |
|
7 |
<meta name="description" content="Это тестовая страница." /> |
|
8 |
<meta name="keywords" content="HTML, CSS, DTD, теги" /> |
|
9 |
<meta name="robots" content="index, follow" /> |
|
10 |
<title>Тестовая страница</title> |
|
11 |
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" /> |
|
12 |
<link type="text/css" href="reset.css" rel="Stylesheet" /> |
|
13 |
<link type="text/css" href="main.css" rel="Stylesheet" /> |
|
14 |
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> |
|
15 |
</head> |
|
16 |
<body> |
|
17 |
<div class="container"> |
|
18 |
<NOINDEX> |
|
19 |
<div class="header"> |
|
20 |
<div class="navArea"> |
|
21 |
<table cellpadding="0" cellspacing="0" border="0"> |
|
22 |
<tr> |
|
23 |
<td> |
|
24 |
<h1> |
|
25 |
<a href="index.html" title="На главную">Главная<span /> </a> |
|
26 |
</h1> |
|
27 |
</td> |
|
28 |
<td> |
|
29 |
<a href="http://www.yandex.ru" title="Яндекс">Яндекс</a> |
|
30 |
</td> |
|
31 |
<td> |
|
32 |
<a href="#" title="Услуги">Услуги</a> |
|
33 |
</td> |
|
34 |
<td> |
|
35 |
<a href="#" title="Товары">Товары</a> |
|
36 |
</td> |
|
37 |
<td> |
|
38 |
<a href="#" title="Контактная информация">Контактная информация</a> |
|
39 |
</td> |
|
40 |
</tr> |
|
41 |
</table> |
|
42 |
</div> |
|
43 |
</div> |
|
44 |
</NOINDEX> |
|
45 |
<div class="textArea"> |
|
46 |
<div class="leftMenu"> |
|
47 |
<ul> |
|
48 |
<li> |
|
49 |
<span>Общее описание</span> |
|
50 |
</li> |
|
51 |
<li> |
|
52 |
<a href="advantages.html" title="Преимущества">Преимущества</a> |
|
53 |
</li> |
|
54 |
</ul> |
|
55 |
</div> |
|
56 |
<div class="mainText"> |
|
57 |
<h2>Описание тестовой страницы</h2> |
|
58 |
<p>HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.</p> |
|
59 |
<p>HTML является приложением («частным случаем») SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.</p> |
|
60 |
<p><img src="images/ex.jpg" alt="Картинка" /></p> |
|
61 |
</div> |
|
62 |
</div> |
|
63 |
<NOINDEX> |
|
64 |
<div class="footer"> |
|
65 |
<div class="downMenu"> |
|
66 |
<div style="padding-top:7px; padding-bottom: 5px;">© 2009-2010 Examle</div> |
|
67 |
<div>E-mail: <a href="mailto:mailbox@example.com">mailbox@example.com</a></div> |
|
68 |
</div> |
|
69 |
</div> |
|
70 |
</NOINDEX> |
|
71 |
</div> |
|
72 |
</body> |
|
73 |
</html> |
Данный HTML -код отображается в браузере, как показано на рисунке 1:
Рисунок 1 – Пример отображения HTML-страницы
Замечание: В представленном HTML -коде используется CSS, о котором будет рассказано в следующем разделе. Разберем отдельные строки нашего HTML -кода.
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-документа.
Пояснение:
Пример очень простого XML DTD, описывающего список людей:
<!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, на которую ориентированы. В таблице 1 приведены основные типы документов с их описанием.
|
Таблица 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"> |
|
|
<!DOCTYPE html> |
HTML5 |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более "спокойно" относится к некоторым огрехам кода.
Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании <!DOCTYPE> и без него. Чтобы не произошло подобных ситуаций, необходимо всегда добавлять этот тег в начало документа.