Отправляет email-рассылки с помощью сервиса Sendsay

Дизайн сайта как инструмент продажи

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

10.132 подписчиков
-10 за неделю
←   Все выпуски   →

Уроки веб-дизайна с подробными примерами


Уважаемые подписчики!

Представляю Вашему вниманию очередной выпуск информационной рассылки сайта "Свободное и бесплатное ПО". С этого выпуска мы начнем изложение HTML и CSS (на качественно более высоком уровне, чем в наших первых выпусках более 4-х лет назад) и продолжим изучение JavaScript. Возврат к изложению новых материалов по HTML и CSS продиктовано тем, что технологии и возможности браузеров не стоят на месте, за четыре года мы можем по новому взглянуть на возможности HTML и CSS и создавать более качественые и профессиональные сайты, используя эти базовые технологии. В будущих выпусках, мы будем вас знакомить также c технологиями XHTML, Flash, PHP и другими. Зачем ограничиваться только одной технологией, если использование нескольких инструментов позволяет добиться более высоких результатов?

Вам срочно нужно решить задачу, но нет соответствующей программы? Мы собрали основные свободные и открытые программы вместе. Вы можете загрузить обновленный (от 29.03.2009) список всех бесплатных и свободных программ, представленных на нашем сайте.

Хотите получать полезную информацию каждую неделю прямо на почтовый ящик? Посмотрите все наши рассылки. Каждый найдет для себя что-то интересное и полезное. Выпуски выходят раз в неделю в воскресенье.

В текущем выпуске мы поговорим о форматах HTML документа для корректного отображения браузерами и другими программами для работы с HTML-контентом.

Начнем со структуры HTML документа. В текущем выпуске речь пойдет о последней стабильной версии HTML 4.01. В одном из следующих выпусков, посвященных позиционированию элементов и определению структуры документа с помощью CSS, мы поговорим о красивой и лаконичной реализации структуры документа в HTML 5.

В простом виде можно записать структуру в следующем виде:

<html>

<head>
<!-- Заголовок документа -->
</head>

<body>
<!-- тело документа -->
</body>

</html>

Сохраняем документ под именем index.html и открываем его в браузере. Что мы видим? Ничего - пустая страница. Разберем этот пример и начнем ее заполнение.

Элементы HTML представляют собой теги. Теги - это ключевые слова, заключенные в угловые скобки. Теги могут быть одинарными (например, горизонтальная черта <hr>) или парными. Во втором случае элемент состоит из открывающегося тега (например, <html>) и закрывающегося тега (</html>). Действие элемента распространяется на область между открывающимся и закрывающимся тегом.

Весь гипертекстовый документ заключается внутри элемента html (т.е. между <html> и </html>). Внутри этого элемента содержится еще два элемента - заголовок документа (элемент head), который содержит служебную информацию о документе и тело документа (элемент <body>), которое содержит информацию отображаемую в окне браузера.

Приведенной структуры достаточно для создания простых HTML документов для личных целей, но она не удовлетворяет стандарту. Главная ошибка заключается в том, что не указан в каком стандарте представлен документ. Стандарт прописывается первой строкой до тега <html>. Посмотрим какие основные стандарты существуют.

Для HTML 4.01 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

Для XHTML 1.0 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Для XHTML 1.1 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Strict, Transitional, Frameset - означают строгую (верстка не должна содержать отклонений от стандарта) спецификацию, переходную (ошибки игнорируются, для чайников) и для сайтов использующих фреймы (а такие еще есть?). Указание типа документа чувствительно к регистру, поэтому лучше ее копировать из приведенных здесь примеров для избежания ошибок.

Существуют и другие стандарты, для создания шаблона остановимся на первой из списка (мы легко сможете модифицировать шаблон под свой тип документа).

Перейдем к разделу заголовка. В нем указывается заголовок страницы (элемент title), META-данные и другая служебная информация. Здесь мы остановимся только на заголовке, остальные элементы рассмотрим в соответствующих темах (отметим только два элемента, отвечающих за кодировку и CSS).

Добавим внутри элемента head строку <title>Структура документа</title> и откроем страницу в браузере. В верхней верхней строке браузера мы видет то, что указали внутри элемента title. Кроме того, эта информация используется браузером для обозначения ссылок, когда вы добавляете страницу в закладки.

Для правильного отображения страницы мы должны задать в какой кодировке написан наш документ. Для этого добавляет строку

<meta http-equiv="content-type" content="text/html;charset=windows-1251" />

Здесь мы указываем стандартную виндоуз-кодировку windows-1251. Конечно, указать это мало, необходимо, чтобы сам документ был набран в этой кодировке. Также стандартной является кодировка utf-8 (уникод, поддерживает расширенный набор символов).

Так же укажем формат для каскадных таблиц стилей с помощью строки

<meta http-equiv="Content-Style-Type" content="text/css" />

Тело документа (элемент body) содержит визуальную информацию, т.е. ту, что будет непосредственно отображаться в окне браузера. Добавим строчку "Код документа содержит правильную структуру".

Итак, окончательный строгий вариант (который мы можем использовать в качестве шаблона для других документов) следующий: 

<!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=windows-1251" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>
<!-- тело документа -->
Код документа содержит правильную структуру
</body>

</html>

В итоге мы получили шаблон документа для выбранного нами стандарта.

Во многих случаях, достаточно использовать переходной формат документа, но стоит иметь в виду, что в разрабатываемой в настоящее время спецификации HTML 5 предпочтение отдается структуре близкой к формату XHTML 1.1. Хотя пройдет еще много времени до включения разработчиками веб-браузеров нового стандарта (с учетом того, полная поддержка существующих уже многие годы форматов HTML и CSS не реализована ни в одном из веб-браузеров).

Остались вопросы по теме выпуска? Задавайте их на форуме в теме Структура HTML документа. Мы отвечаем на все вопросы.

До новых встречь! Оставайтесь с нами.

В избранное