Структура объекта
Слово ШТМЛ представляет собой сокращение от HyperText Markup Language — язык разметки гиперконтента. В основном, ШТМЛ-файл является простым контентовым файлом, который содержит контент и ничего больше. Так что создавать web-страницы можно в любом контентовом редакторе.
Когда web-страница открывается в браузере, он просматривает код ШТМЛ, находит специальные символы, называемые тегами, и использует их для вставки рисунков, изменения вида контента, создание ссылок на другие web-страницы и др.
Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок контента, также называются еще контейнером (пример 1) и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.
Пример 1. Использование парных тегов (контейнера)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Контейнеры</title>
</head>
<body>
<p><b>Жирный шрифт</b> в контенте.</p>
</body>
</html>
Поскольку одновременно можно использовать любое разумное сочетание тегов, следует помнить об их вложенности (пример 2). Один контейнер должен находиться внутри другого, и никак не пересекаться (пример 3).
Пример 2. Правильное сочетание тегов
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Вложение тегов</title>
</head>
<body>
<p><b><i>Полужирный курсивный контент</i></b></p>
</body>
</html>
В данном примере контент находится внутри контейнера <I>, который устанавливает курсивное начертание, а он в свою очередь размещается внутри контейнера <B> задающим жирное начертание контента. Результат останется неизменным, если в данном случае поменять теги местами.
Пример 3. Неправильное сочетание тегов
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ошибка во вложении тегов</title>
</head>
<body>
<p><i><b>Полужирный курсивный контент</i></b></p>
</body>
</html>
Структура объекта
Все нормальные web-страницы состоят из двух разделов — заголовка (<HEAD>) и тела объекта (<BODY>). Раздел заголовка может содержать контент и теги, но содержимое этого раздела не показывается напрямую на странице. Тело объекта предназначено для размещения тегов и содержательной части (пример 4).
Пример 4. Простейший ШТМЛ-файл
<html>
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
</head>
<body>
<!-- А здесь надо размещать все, что хочется увидеть на странице. -->
</body>
</html>
DOCTYPE
Элемент <!DOCTYPE> предназначен для указания типа текущего объекта — DTD (document type definition, описание типа объекта). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую web-страницу, ведь ШТМЛ существует в нескольких версиях, кроме того, имеется XШТМЛ (EXtensible HyperText Markup Language, расширенный язык разметки гиперконтента), похожий на ШТМЛ, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать web-страницу и необходимо в первой строке тегов задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии ШТМЛ, на которую ориентированы. В табл. 1. приведены основные типы файлов с их описанием.
| DOCTYPE | Описание |
|---|---|
| ШТМЛ 4.01 | |
| <!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd"> | Строгий синтаксис ШТМЛ. |
| <!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd"> | Переходный синтаксис ШТМЛ. |
| <!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Frameset//EN" "http://www.w3.org/TR/ШТМЛ4/frameset.dtd"> | В ШТМЛ-файле применяются фреймы. |
| XШТМЛ 1.0 | |
| <!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD XШТМЛ 1.0 Strict//EN" "http://www.w3.org/TR/xШТМЛ1/DTD/xШТМЛ1-strict.dtd"> | Строгий синтаксис XШТМЛ. |
| <!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD XШТМЛ 1.0 Transitional//EN" "http://www.w3.org/TR/xШТМЛ1/DTD/xШТМЛ1-transitional.dtd"> | Переходный синтаксис XШТМЛ. |
| <!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD XШТМЛ 1.0 Frameset//EN" "http://www.w3.org/TR/xШТМЛ1/DTD/xШТМЛ1-frameset.dtd"> | файл написан на XШТМЛ и содержит фреймы. |
| XШТМЛ 1.1 | |
| <!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD XШТМЛ 1.1//EN"> | Разработчики XШТМЛ 1.1 предполагают, что он постепенно вытеснит ШТМЛ. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. |
Раздел заголовка объекта (<HEAD>)
Теги и контенты, находящиеся в этом разделе, не отображаются на web-странице. Этот раздел обычно предназначен для следующей служебной информации.
Заголовок страницы (тег <TITLE>)
Используется для отображения строки контента в левом верхнем углу окна браузера. Такая строка сообщает пользователю название с нашего сайта и другую информацию, которую добавляет разработчик.
CSS (ЦСС) (Cascading Style Sheets, Каскадные таблицы стилей)
Стили хранят набор элементов форматирования, который применяется к контенту объекта, чтобы быстро изменить его внешний вид.
Метатеги (тег <META>)
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания с нашего сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число.
Скрипты
Скриптом традиционно называют программу, которая внедряется в тело web-страницы и выполняет на ней определенные действия. Распространенным языком программирования для написания скриптов является JavaScript.
Порядок тегов в заголовке объекта особого значения не имеет.
Тело объекта (<BODY>)
Тело объекта предназначено для отображения данных на web-странице, в частности, в теле размещается контент, Имаги, ссылки, таблицы, списки и т.д.
Комментарии
Как показано в примере 4, некоторый контент можно скрыть от показа в браузере, сделав его комментарием. Хотя такой контент пользователь не увидит, он все равно будет передаваться в файле, так что, посмотрев исходный код, можно обнаружить скрываемую информацию.
Комментарии начинаются тегом <!-- и заканчиваются тегом -->. Все, что находится между этими тегами отображаться на web-странице не будет.
| Статья опубликована: 27.06.2009 | Последнее обновление: 19.02.2009 |