Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.

Декларация

Тег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML - 5, и она использует следующее объявление:

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега вместе с другими тегами HTML.

1.2.2 Структура HTML документа

This is going to be real fun

Введение в HTML

В этой главе:

Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML .

Как браузер получает веб-страницы?

Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер - это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.

Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для перехода на различные страницы. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.

Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.

Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer , Mozilla Firefox , Google Chrome , Safari , Opera .

Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.

Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.

Зачем нужен HTML-редактор?

Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор - это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.

Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver , Visual Studio и PHPStorm . В качестве бесплатных редакторов можно использовать notepad++ и geany .

Что из себя представляет HTML-документ?

HTML-документ - это обычный текстовой файл c расширением .html , который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.

Windows:
Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:

1. В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмем сохранить . Всё, HTML-документ создан.
2. Кликаем правой кнопкой мыши (ПКМ ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск → открываем Панель управления → выбираем Параметры папок → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов .

Открыть файл, сохраненный с расширением.html, для просмотра в браузере можно двумя способами:

1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.
2. Кликнуть по нему ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам браузер.

При получении HTML-документа браузер будет отображать его в виде веб-страницы (веб-страницей является то, что отображается в окне браузера), при этом вы не увидите в окне своего браузера отображения написанных вами тегов, потому что они будут интерпретированы для отображения содержимого страницы в нужном вам виде.

Мой первый заголовок

Мой первый абзац

Результат данного кода в окне браузера:

Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам редактор, если в списке нет нужного редактора, жмем Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++ ) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Что такое HTML?

HTML - это язык для описания структуры веб-страниц. Cтраницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.

• Аббревиатура HTML расшифровывается как H yper T ext M arkup L anguage (язык разметки гипертекста).
• Запомните, он не является языком программирования, это язык разметки.
• HTML использует теги разметки, чтобы описать структуру веб-страницы.

Что такое теги?

HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например ,

,

и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: . Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например:
. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами:

Означает то же самое, что и

По стандарту HTML5 теги могут быть написаны в любом регистре.

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

Так выглядит страница, в которой используются теги для разметки:

Напитки в нашем кафе

Мультифрукт - 100р.

Фруктовый напиток, содержащий апельсиновый и ананасовый соки.

Молочный коктель - 150р.

Сливочное мороженое, перемешанное с мякотью фруктов.

То же самое, но без использования тегов:

Напитки в нашем кафе Мультифрукт - 100р. Фруктовый напиток, содержащий апельсиновый и ананасовый соки. Молочный коктель - 150р. Сливочное мороженое, перемешанное с мякотью фруктов.

• 1. HTML-документы – это структурные документы.
• 2. Названия элементов можно писать в любом регистре.
• 3. Названия атрибутов можно писать в любом регистре.
• 4. Значения атрибутов зависят от регистра, особенно адреса (особенность Unix-операционных систем состоит в различной трактовке символов в разных регистрах, поэтому файлы

picture .gif и picture.GIF различны!).

• 5. Названия элементов не могут содержать пробелов.
• 6. Если значения атрибутов содержат пробелы, они должны стоять в кавычках.
• 7. Дополнительные пробелы, символы табуляции и возврата каретки игнорируются и сжимаются в один пробел.
• 8. Элементы могут быть вложены друг в друга. При этом должно соблюдаться правило вложенности. Внутри вложенного элемента помимо открывающего тега должен быть и закрывающий. Пересечения некорректны:

Структура документа HTML

9. Незнакомые элементы и атрибуты игнорируются браузерами ("снисхождение к ошибкам").

Большинство документов имеют стандартные элементы, такие как заголовок, параграфы или списки. Используя теги HTML, можно обозначать данные элементы, обеспечивая веб-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все, что необходимо чтобы прочитать HTML-документ, – это веб-браузер, который интерпретирует теги HTML и воспроизводит на экране документ в виде, который ему придает автор.

Когда веб-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом . Данный тег сообщает веб-браузеру, что документ написан с использованием HTML.

Комментарии в HTML. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Часто в комментарии "прячут" некоторые теги или целые синтаксические конструкции от старых версий браузеров, которые не способны их обработать. Комментарии могут встречаться в документе где угодно и в любом количестве. Необходимо помнить, что комментарии увеличивают объем документа, а следовательно, и время загрузки.

Общая заголовочная часть документа. Тег заголовочной части документа должен быть использован сразу после тега и более нигде в теле документа. Данный тег представляет собой общее описание документа. Стартовый тег помещается непосредственно перед тегом , размещается внутри тегов . Заголовок документа не появляется при отображении самого документа в окне.

Теги тела документа. Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа. Тело документа должно находиться между тегами и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Нх>. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий – 2, и так до цифры 6. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Для большинства случаев текст такого заголовка станет жирным, и после текста будет отбита пустая строка. Важным является то, что эти теги определяют логическую структуру документа, участвуют в индексации поисковыми системами Интернет. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

Тег абзаца <Р>. В отличие от большинства текстовых процессоров, в HTML-документе игнорируются символы возврата каретки. Браузер разделяет абзацы только при наличии тега <Р>. Если не разделить абзацы тегом <Р>, то документ будет выглядеть как один большой абзац.

Тег предформатированного текста

.
Тег 
Позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тегом 
. Внутри предварительно сформатированного текста разрешается использовать: перевод строки, символы табуляции (сдвиг на восемь символов вправо), непропорциональный шрифт Courier, устанавливаемый браузером.

Теги списков.
Существует три основных вида списков в HTML-документе: нумерованный, маркированный, список описаний.
Можно создавать вложенные списки, используя различные теги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тегов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка, зависит от браузера.
Нумерованные списки. В
пронумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если удалить один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.
 
 и завершается тегом 
 
.

Маркированные списки. Для
маркированных списков браузер обычно использует маркеры для элемента списка. Вид маркера, как правило, настраивает пользователь браузера.
Пронумерованный список начинается стартовым тегом 
 и завершается тегом 
. Каждый элемент списка начинается с тега <ы>.

Форматирование шрифта.
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, т.е. изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру.
Графика внутри HTML-документа.
Одна из наиболее привлекательных черт WEB – возможность включения графических и иных типов данных в HTML-документ.
Существует два способа использования графики в HTML-документах. Первый – внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Делается это при помощи тега . Этот тег точечный, т.е. он не закрывается. Синтаксис тега:

Обязательный параметр имеет такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру, где находится
рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день это форматы GIF, JPG, PNG. Они поддерживаются большинством браузеров.
АLТ="текст"
Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной графикой изображений. Обычно это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пустую рамку. Тег  рекомендуется, если пользователи используют браузер, не поддерживающий графический режим, например Lynx, и для индексации в поисковых системах. Текст виден также при удержании курсора мыши в течение некоторого времени без движения над изображением в виде системной подсказки под курсором.
Большинство браузеров позволяет включать в документ фоновый рисунок, который будет дублироваться как кафельная плитка в ванной и отображаться фоном всего документа. Это второй способ. Некоторые пользователи любят фоновую графику, некоторые нет. Обычно хорошо выглядит в качестве фона для большинства документов ненавязчивый полупрозрачный рисунок (обои).
Гипертекстовые ссылки являются ключевым компонентом, обусловливающим привлекательность WEB для пользователей. Добавляя гипертекстовые ссылки (далее – ссылки), пользователь делает набор документов связанным и структурированным, что позволяет получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл. В качестве гиперссылки можно указывать текст или изображение или все вместе.
Структура ссылок в HTML-документе.
Для того чтобы браузер отобразил ссылку на URL, необходимо поместить текст или картинку внутрь тега гиперссылки. Синтаксис HTML следующий:
<А HREF="URL">текст-или-картинка-которые-будут-п одсвечены-как-ссылка 

Тег <А HREF="URL"> открывает описание ссылки, а тег  – закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом веб-браузером. Обычно этот текст отображается подчеркнутым и выделенным цветом. Изображение обрамляется прямоугольной рамкой. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).
Ссылки на метки внутри документа.
Можно делать ссылки на различные участки или разделы одного и того же документа, используя специальные скрытые метки для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только пользователь щелкнет на ссылке, браузер переместит его на указанный раздел документа, а строка, в которой стоит метка данного раздела, будет размещена на первой строке окна браузера (если хватит "длины" документа в окне браузера).

 
Теги
 являются важными элементами отображения
 структуры HTML-документа. Для того,
 чтобы браузер мог отличить их от обычного текста, они заключаются в угловые
 скобки. Тег обозначает начало действия какой-либо инструкции отображения.
 Если эта инструкция применяется ко всему документу, то этот тег не имеет
 своего закрывающего близнеца. Но большинство тегов все-таки обладают парой,
 которая прекращает действие первого тега. Так, например, каждая Web-страница
 должна начинаться с тега 
, а
 заканчиваться его закрывающим близнецом 
.
 Обратите внимание, что закрывающий тег отличается от открывающего лишь
 наличием косой черты после первой угловой скобки.
 
Также некоторые теги обладают параметрами, которые уточняют
 правило отображения содержимого. Немного позже мы на примере увидим,
 как применяются эти параметры, а сейчас лишь отметим, что эти
 параметры могут указываться только в открывающем теге.
Наименования тегов и их параметров могут быть написаны в любом регистре,
 как большими символами, так и строчными. Анализаторы HTML, встроенные
 в каждый браузер не обращают внимания на регистр символов, которыми написаны
 все служебные конструкции HTML-документов.
Естественно, как и в любом компьютерном языке, нельзя обойтись без
 комментариев, содержимое которых не обрабатывается браузером и не
 отображается. Они служат лишь для удобства разработчика, для
 внутреннего документирования структуры документа. Комментарии
 заключаются между фрагментами <-- и-->. Вот пример создания
 комментариев:  <--Это комментарий -->

 
Любая Web-страница структурно разбивается на две части: заголовок и
 тело. В заголовке указывается служебная информация обо всей Web-странице,
 а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами
 его отображения. При этом заголовок Web-страницы ограничивается тегами
  
 и 
,
 а тело документа обозначается тегами 

 и 
. Но по правилам хорошего
 стиля программирования перед заголовком ставится еще идентификатор
 применяемого стандарта HTML. Таким образом, структура любой Web-страницы
 выглядит следующим образом:
 
 
 "http://www.w3.org/TR/html4/strict.dtd">

  

 

 Заголовок документа

  

 

 Тело документа

 

 
Первый тег 
 со всеми его
 параметрами и является тем самым идентификатором, который сообщает браузеру,
 какая именно версия HTML была использована для создания данной Web-страницы.
 Эта достаточно громоздкая и непонятная конструкция на самом деле является
 пришельцем из языка более высокого уровня XML. Подразумевается, что в
 будущем браузеры смогут работать одновременно как с обычными Web-страницами,
 написанными на языке ХМL так и с HTML-документами. Поэтому с расчетом
 на это самое светлое будущее и используется данный тег-идентификатор.
 Точная дата наступления этого светлого будущего, как обычно, неизвестна,
 поэтому очень часто данным идентификатором пренебрегают без каких-либо
 последствий. Но предусмотрительность, как известно, лучше, чем
 непредусмотрительность, поэтому идентификатор лучше все-таки использовать.
Теперь рассмотрим заголовок. В него могут входить: тег,
 отображающий наименование данной Web-страницы, тег, стилевого оформления
 Web-страницы, тег выполняемого
 сценария и так называемые метаданные. Стилевое оформление Web-страниц
 будет рассматриваться во второй главе, а выполняемые сценарии - в третьей,
 О метаданных мы поговорим чуть позже, а сейчас узнаем, как использовать
 наименование Web-страницы.
Вы наверняка замечали, что при загрузке Web-страницы, в самой верхней
 строке браузера появлялось краткое наименование загружаемого документа.
 Для создания такого заголовка используется тег  с
 соответствующей закрывающей парой. Начальный блок Web-страницы с
 обозначением подобного заголовка может выглядеть следующим образом:
 


 
 

 
Заголовком Web-страницы никогда не следует пренебрегать, так как это
 самое первое, что видит посетитель Web-сайта. Заголовок отображается еще
 до того, как произойдет окончательная загрузка содержимого страницы. Поэтому
 и выбирать его следует тщательно.
С первой частью структуры Web-страницы мы разобрались, теперь мы можем
 переходить к рассмотрению тела HTML-документа, его основной части. Как
 мы уже знаем, содержимое Web-страницы располагается между тегами
 
 и .
 В самом простейшем случае,
 это может быть обыкновенный текст. Браузер правильно интерпретирует его
 и отобразит. Попробуем увидеть это на примере.
Для создания нашей первой Web-страницы нам потребуется обычный текстовый
 редактор. Стандартный Блокнот вполне подойдет. Нам достаточно будет создать
 текстовый файл, содержимое которого приведено в листинге 1.1.
 

 "http;//www.w3.org/TR/htral4/strict.dtd">

  

  

 

 

  

 Доброго времени суток, всем посетившим мой скромный
 сайт

 

 
Не следует забывать, что при сохранении файла, следует установить для
 него расширение htm или html. Если после этого запустить его на выполнение,
 просто щелкнув по его наименованию в Проводнике Windows, то автоматически
 будет запущен браузер, установленный по умолчанию в операционной системе,
 и в него уже будет загружен HTML-документ. Как выглядят наша первая
 Web-страница в браузере Internet Explorer видно на рис. 1.1.
 
Рис. 1.1. Результат просмотра в браузере
 файла, приведенного в листинге 1.1

 
Но следует отметить, что тег 

 может содержать дополнительные параметры. Мы уже говорили немного ранее,
 что параметры включаются в состав стартового тега конструкции. Теперь
 пришло время увидеть, как это происходит на самом деле.
Чаще всего параметр представляет собой пару
 "наименование-значение".
Рассмотрим на простом примере. Параметр bgcolor позволяет задавать цвет
 фона, на котором будет отображаться содержимое Web-страницы. Например,
 если мы хотим использовать зеленый фон, то мы должны использовать следующую
 конструкцию:
 
 
Необходимо отметить, что все текстовые значения параметров обычно
 заключаются в кавычки. О том, как задаются цвета, мы узнаем в следующих
 разделах этой главы, а сейчас вернемся к параметрам тега
 .
О параметре bgcolor
, который позволяет устанавливать
 цвет фона Web-страницы, мы уже знаем. Рассмотрим остальные параметры.
 
Параметр background
позволяет использовать
 в качестве фона какое-либо графическое изображение. Значением параметра
 является адрес этого изображения, т. е. его URL.
 
Параметр text
 задает цвет шрифта, которым
 будет отображаться текстовое содержимое Web-страницы.
 
Параметр link
позволяет устанавливать
 цвет, которым будут отображаться в окне просмотра браузера текстовые
 гиперссылки, внедренные в содержимое Web-страницы.
 
Параметр vlink
задает цвет гиперссылок,
 которые пользователь уже проходил в текущем сеансе работы.
 
Параметр alink
 указывает, какой цвет
 будет использоваться для отображения гиперссылок, выделенных пользователем.
 
Параметр lang
указывает, на каком языке
 написано текстовое содержимое Web-страницы. В качестве значения
 используются кодовые двухбуквенные обозначения языков, приведенные
 в документе RFC 1766. На самом деле, нам не надо знать все эти
 обозначения. В подавляющем большинстве случаев мы будем использовать
 русский или английский язык. Их коды: "гu" и "en"
 соответственно.
Помимо вышеперечисленных параметров тег 
может обладать двумя идентифицирующими параметрами id
и class
, но на практике они к этому
 тегу почти никогда не применяются.
Как видно, все просто и незатейливо. Теперь самое время узнать, что же
 такое метаданные. Метаданные, скорее всего, можно определить как
 неотображаемая информация о документе. Она применяется для идентификации
 документа и указания режима отображения Web-страницы. Для внедрения
 метаданных в Web-страницу используется тег 
. Чаще всего
 он имеет следующий вид:
 
 

 
 
Однако, установка собственных переменных необходима только в том случае,
 если Web-страницы обрабатываются при помощи какого-либо специализированного
 Интернет-приложения. Но такая необходимость возникает достаточно редко.
 Что же, получается, что эти метаданные не несут никакой реальной пользы?
 Это не так.
Как мы все знаем, недостаточно просто поместить сайт во всемирную паутину.
 Надо еще сделать так, чтобы он попал в списки поисковых машин. Мы не будем
 сейчас рассматривать полностью процедуру регистрации сайта на поисковых
 машинах, тем более что для каждой такой машины процедура регистрации своя.
 Нас интересует кое-что другое.
Откуда поисковые машины берут информацию о содержимом той или иной
 Web-страницы? Как раз из метапеременных. Чаще всего используются
 метапеременные с наименованиями keywords и description. Переменная
 keywords в качестве своего значения содержит список ключевых слов
 Web-страницы. А переменная description предназначенна
 для хранения краткой аннотации Web-страницы. Приведем пример использования
 подобных метаданных. Предположим, что наша Web-страница посвящена сложному
 и щепетильному вопросу правильного кормления хомячков. Тогда ее структура
 должна выглядеть приблизительно следующим образом:
 

 "http://www.w3.org/TR/html4 /strict.dtd">

 

 

  Все о кормлеиии хомяков

 

 description" contferit="Web-Cтраница о кормлении
 мелких 

 грызунов, в частности, хомяков, в условиях домашнего содержания">

  

 

 О, эти маленькие, симпатичные животные - хомячки. , 

 

 
Естественно, памятуя о том, что идентификация содержимого Web-страниц
 поисковыми машинами осуществляется при помощи ключевых слов, указываемых
 разработчиком, может возникнуть соблазн в их состав ввести слова, не
 отражающие
 суть документа, но часто запрашиваемые посетителями поисковых машин. Должен
 заметить, что этот фокус может не получиться. Дело в том, что поисковые
 машины чаде всего сканируют еще и текст самой Web-страницы, и если какое-либо
 ключевое слово не встречается в нем, то оно просто не учитывается.
Следует также обратить внимание на то, что при указании ключевых слов,
 мы добавили в тег  дополнительный параметр lang. Мы уже говорили,
 что этот параметр предназначен для указания языка, на котором написан
 тот или иной текст. В нашем примере мы указали, что перечисленные ключевые
 слова написаны на русском языке, т. е.: мы можем задать наборы ключевых
 слов на нескольких языках, использовав для этого несколько тегов
 .
Также метаданные позволяют передавать так называемые заголовки HTTP. Здесь
 необходимо сделать маленькое техническое отступление. Все HTML-документы
 передаются при помощи специализированных
 программ, называемых Web-серверами, при помощи определенного набора правил.
 Этот набор правил приема и передачи информации в компьютерной индустрии
 называется протоколом. А набор правил для передачи Web-страниц и данных
 от удаленных пользователей называется протоколом HTTP (HyperText Transfer
 Protocol), Этот протокол обладает набором директив и переменных, которые
 часто называют заголовками HTTP-протокола.
Перед нами не стоит задача изучить всё переменные протокола HTTP, нам
 достаточно будет узнать о наиболее часто применяемых его заголовках. Прежде
 всего, стоит упомянуть о переменной Expires, которая позволяет устанавливать
 так называемый срок годности Web-страницы. Дело в том, что браузеры
 и некоторые другие коммуникационные программы сохраняют посещенные
 пользователем
 Web-страницы в кэше, а затем, когда пользователь запрашивает их снова,
 подсовывают ему эти копии, экономя, таким образом, время получения. Но
 Web-страницы все-таки достаточно часто обновляют. Поэтому, пользователь
 может получить устаревшую копию.
Конечно, существуют способы настройки
 правил работы с кэшем, но далеко не все их используют. Поэтому лучше
 подстраховаться,
 и указать "срок годности" Web-страницы. Если он прошел, то браузер
 вместо использования копии из кэша все-таки запросит документ из Сети.
Тег , приспособленный для указания срока годности Web-страницы,
 выглядит приблизительно следующим образом:
 
Из примера видно, что для указания наименования стандартной неременной
 HTTP-протокола используется параметр http-equiv
,
 а для установки значения этой переменной - уже знакомый нам параметр content.
 Также легко заметить, что установка срока последнего использования документа
 производится при помощи переменной Expires, а значение ее должно быть
 указано в определенном текстовом формате со временем, указанным по
 гринвичскому меридиану.
Впрочем, может случиться и такое, что информация на страничке обновляется
 настолько быстро, что ее необходимо несколько раз перезагружать в процессе
 одного сеанса работы. Такие страницы с информацией, обновляемой в реальном
 времени, - достаточно частое явление, например, в чатах или при отображении
 изменений котировок ценных бумаг во время операционного дня на фондовой
 бирже. В этом случае необходимо использовать переменную с наименованием
 Refresh. Значение этой переменной указывается в секундах. Тогда
 рассматриваемый нами тег 
 приобретет следующий
 вид:
 
<МЕТА http-equiv-"Refresh" cpntent=10>
Страница с подобной конструкцией в блоке заголовка будет автоматически
 перезагружаться каждые десять секунд.
На этом заканчивается рассмотрение структуры заголовка HTML-документа.
 Мы переходим к изучению структуры основного раздела Web-страницы. Как
 мы помним, вся отображаемая в окне просмотра браузера информация размещается
 между тегами 
 и 
.
 О том, какие возможности по указанию правил отображения содержимого
 Web-страницы
 нам предоставляет язык HTML, мы узнаем в следующих разделах этой главы.
 Здесь мы рассматриваем лишь общую структуру HTML-документа.
HTML предоставляет нам возможность для каждого применяемого тега задать
 уникальный идентификатор. Скажем, если наш текст разбит на абзацы, то
 для каждого абзаца мы можем задать свое специфичное наименование, а затем,
 при помощи некоторых дополнительных средств языка HTML, управлять отображением
 этих абзацев. Мы можем делать некоторые из них невидимыми, менять цвет
 шрифта, т. е. изменять правила их отображения. Причем, это относится не
 только к абзацам, а ко всем частям содержимого Web-страницы которые
 заключены в те или иные теги.
Для идентификации какого-либо тега применяется параметр id. Вернемся к
 примеру с абзацами текста. Забегая немного вперед, можно сказать, что
 абзацы указываются при помощи пары тегов <р>

 и 
. Таким образом, создание абзацев,
 которые мы сможем потом отличать, производится при помощи приблизительно
 следующей конструкции:
 
<р id="р1">Первый абзац

 <р id="p2">Bторой абзац
Значения всех параметров id
в HTML-документе
 обязаны быть уникальными. Если встречается пара одинаковых значений, то
 эти идентификаторы просто игнорируются. Естественно, применение параметра
 id
 не является обязательным. Имеет смысл
 использовать его только в тех случаях, когда конструкция с идентифицируемым
 тегом будет подвергнута стилевой обработке (о которой мы поговорим во
 второй главе), или этот тег будет являться закладкой в документе, на которую
 будет указывать какая-либо гиперссылка, либо идентифицируемая конструкция
 будет обрабатываться динамически, при помощи инструкций DHTML, о которых
 мы узнаем в третьей главе. Также идентификаторы применяются в тех случаях,
 когда HTML-документ обрабатывается специализированными приложениями, но
 это уже для совсем серьезных программистов. Нам это пока не так уж и нужно.
Если параметр id
применяется для уникальной
 идентификации, то при помощи параметра class

 мы можем относить тег к той или иной группе. Этот параметр используется
 только для стилевого оформления. Мы просто некоторые элементы Web-страницы
 разбиваем на классы, а затем достаточно в одном месте изменить описание
 правил отображения класса, и это изменение автоматически распространится
 на все теги, которые вошли в данный класс.
Также нам доступны методы объединения соседних элементов Web-страницы
 в единые блоки. Все элементы оформления HTML-документов разделяются на
 два типа. Inline-элементы, которые чаще всего являются просто элементами
 текста, и блочные элементы. Inline-элементы могут являться частью строки,
 а блочные элементы всегда занимают обособленное место на Web-странице
 и обязаны начинаться всегда с новой строки. Естественно, блочные элементы
 могут включать в себя другие блочные элементы и inline-элементы. По вполне
 понятным причинам inline-элементы не могут включать в себя блочные элементы.
Объединение элементов Web-страницы в блоки позволяет применять к ним единое
 оформление, осуществлять некое подобие верстки. Достаточно будет изменить
 расположение блока, изменив один объединяющий тег. Естественно, это удобнее,
 чем менять расположение каждого элемента Web-страницы по отдельности.
Для объединения элементов блочного типа используется тег 


 с его закрывающим близнецом 
. А для inline-элементов используется
 пара тегов 
и 
 .
 С учетом вышесказанного, ясно, что блок с тегом
  

не может располагаться внутри
 блока с тегом 
, так как блочные
 элементы не могут входить в состав inline-элементов.
Также следует отметить, что браузеры обрамляют div-блоки разрывами строки.
 Проще всего это показать на примере:
 
Листинг 1.2
 
 
 "http://wvw.w3.org/TR/html4/striсt.dtd">

  

 

 

 

 

 


 Доброго времени 
cyток, всем посетившим 
мой
 скромный сайт. 

 


 

 
Результат отображения подобного HTML-файла браузером Internet Explorer
 показан на рис. 1.2.
 Теги 
 и 


 могут также иметь дополнительные параметры. Помимо уже знакомых нам идентифицирующих
 параметров id и class, могут использоваться параметры style

 и align
. Параметр style
применяется для установки стиля отображения содержимого блока,
 а параметр align
позволяет устанавливать
 выравнивание данного блока относительно других
 элементов содержимого Web-страницы. Более детально применение этих параметров
 мы рассмотрим в следующих разделах этой главы.

 

 
Рис. 1.2. Окно браузера с результатом
 отображения файла, приведенного в листинге 1.2

 
Также к вопросам структуры HTML-документа можно отнести использование
 различных заголовков в тексте. Для заголовков в HTML отведены собственные
 теги. Всего в HTML-документах применяется шесть уровней текстовых заголовков.
 Самый старший уровень - первый. И для каждого заголовка существует свой
 тег и свои правила отображения.
 
Теги для обозначения заголовков чрезвычайно просты. Для заголовка первого
 уровня применяется тег 

 с его закрывающей
 парой 

, заголовок второго уровня
 реализуется при помощи пары 
-
,
 и так далее, вплоть до заголовка шестого уровня с тегом 

.
 Ниже, в листинге 1.3 приведен пример использования заголовков в HTML-документе.

 
Листинг 1.3
 
 
 "http://www.w3.org/TR/html4/strict.dtd">

 

 

 

 

  

  Заголовок первого уровня 


 
 Заголовок второго уровня 


 
 Заголовок третьего уровня 


 
 Заголовок четвертого уровня 


 
 Заголовок пятого уровня 


 
 Заголовок шестого уровня 
 

 <р>0бычный текст

 

 
А как это выглядит, хорошо видно на рис. 1.3.
 

 
Рис. 1.3. Окно браузера с результатом
 отображения файла, приведенного в Листинге 1.3

 
Теги заголовков обладают тем же набором параметров, что и недавно рассмотренные
 теги 
 и 

,
 т. е. идентификационные id
 и class
,
 параметр общего оформления style
и параметр
 выравнивания align
.

 
На этом и заканчивается рассмотрение структуры типичного HTML-документа.
 Как видно, никаких особых сложностей в этом нет. Все стройно и логично.



                                

                            
                        
                        
                        
                        
                        
                        

                            
                            

                        
                        
            

                        

                        

                            
Похожие статьи
                            

                                                                     
  Первые действия при появлении ошибки «Устройство USB не опознано 
                                                                     
  Недостаточно патриотичный 
                                                                     
  Компьютер не видит флешку через USB или неопознанное устройство 
                                                                     
  Использование эквалайзера Windows Как настроит эквалайзер на windows 7