Головная часть HTML-программыНа этой странице:
Элемент HTML — является основным элементом HTML-разметки. Все остальные элементы вложены в него, являются его потомками.
Элемент HTML задаётся парным тегом. Тег <HTML> открывает HTML-программу, а тег </HTML> — закрывает её.
Между этими двумя основными тегами располагается головная часть программы и её тело:
Головная часть HTML-программыГоловная часть HTML-программы записывается между открывающим тегом <HEAD> и закрывающим </HEAD>:
В элементе-контейнере HEAD (он не имеет визуального образа на экране) описываются общие правила интерпретации HTML-кода в целом, и содержится вспомогательная информация о документе и его авторе.
Так, элемент
задаёт браузеру информацию о
кодировке, в которой написан текст
Элемент META задаётся одиночным тегом и не имеет визуального образа на экране.
Между тегами <TITLE> и </TITLE> располагается текст, отображаемый в заголовке окна браузера:
Щёлкните мышкой на следующей ссылке и найдите текст “Первый HTML-документ” в заголовке окна браузера.
В окошке браузера Microsoft Internet Explorer вы должны увидеть:
Название окна должно совпадать с заголовком страницы. Это очень удобно, когда окно с сайтом свёрнуто в кнопку на Панели Задач — на этой кнопке пользователь видит заголовок текущей страницы:
Название окна заносится в набор избранных сайтов (меню Избранное), если пользователь решит запомнить ссылку на текущую страницу:
Название окна — дополнительная подсказка пользователю о его текущем положении на сайте.
В примере урока заголовок окна, заданный элементом TITLE, совпадает с заголовком страницы, заданный элементом H1: “Первый HTML-документ”.
В головной части HTML-кода используют и другие элементы. Этот, например, указывает имя автора документа:
А эти элементы задают описание документа и ключевые слова для поисковых систем:
Тело программыМежду тегами <BODY> и </BODY> располагаются элементы, которые браузер последовательно выводит в окно документа (строит изображение).
Тело нашей простой программы содержит следующие элементы:
| Элемент | Схема кода | Назначение |
|---|---|---|
| H1 | <H1>...</H1> | Заголовок |
| HR | <HR> | Горизонтальная линия |
| P | <P>...</P> | Абзац |
Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают её восприятие.
Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня, а параграфы — пункты, обозначенные заголовками четвёртого уровня.
HTML поддерживает заголовки шести уровней при помощи конструкции:
<Hn>текст заголовка</Hn>
В качестве n следует использовать одну из цифр 1–6, обозначающую уровень заголовка.
При отображении страницы браузер выделяет заголовки размером шрифта и жирностью:
Элементом H1 задают, как правило, заголовок сайта, элементом H2 — заголовок страницы, элементом H3 — разделы на странице и так далее.
Например, страница “В лес за грибами” сайта “Лесные истории” может иметь следующий вид (справа от заголовков проставлен их уровень):
Уровни заголовков отражают структуру документа (показана на схеме справа). Однако, в HTML-коде иерархия документа закладывается только в номер уровня Hn, и не означает вложенность соответствующих фрагментов кода.
Код вышеприведённой страницы имеет вид:
Замечаем, что вложенность элементов в коде не совпадает с вложенностью фрагментов содержания страницы.
В коде все элементы Hn и P являются прямыми потомками элемента BODY.
Использовать заголовки нужно очень аккуратно в соответствии с их иерархическими уровнями в структуре документа. Не следует использовать теги <Hn> для выделения обычного текста. Они применяются только для заголовков.
Существуют специальные программы, которые автоматически составляют оглавление гипертекстового документа. Делают они это при помощи сбора информации из тегов <Hn>. Если заголовочные теги обрамляют обычные тексты или не отражают иерархическую структуру документа, оглавление будет построено неверно.
Заголовок (сайта, страницы, разделов) нужно выбирать таким, чтобы он точно соответствовал содержанию. Красивая абстракция малопригодна для заголовка.
Погрешность Описание Неудачные заголовки 
Точки в коротких заголовках
Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задаётся тегом <HR>, и этот тег не имеет парного закрывающего.
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия отделяет заголовок в примере от основного текста:
Человеку в отличие от компьютера трудно воспринимать однородную информацию, поэтому в книгах буквы не покрывают сплошь всю страницу, хотя это здорово сэкономило бы бумагу. Страница в угоду человеческой природе содержит много пустоты, а текст делится на порции — абзацы.
Абзацы отделяются друг от друга “красными” или пустыми строками. Красная строка — это первая строка абзаца с текстом, сдвинутым вправо.
Конечно, разделять текст на абзацы стараются, не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.
Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как кодируются абзацы на HTML.
Задаётся абзац тегами <P> и </P>, между которыми помещается текст. Парный тег </P> является необязательным.
По умолчанию браузер использует не красную, а пустую строку (отступ) для отделения одного абзаца от другого.
Браузер отображает элемент P следующим образом:
Посмотрите, как браузер перестраивает абзац в разных по ширине окнах (откройте документ и измените несколько раз ширину его окна):
Парный тег </P> является необязательным — браузер определяет конец текущего абзаца по началу следующего или началу другого элемента уровня блока (о делении элементов на строчные и блочные рассказано в следующем пункте). Однако на практике лучше использовать следующее правило: в цепочке элементов P последний элемент лучше записывать с закрывающим тегом. А можно все элементы P записывать парными тегами, тогда уж браузеру точно не к чему будет придраться!
Блочные и строчные элементыЭлементы HTML разделяются на два класса — блочные и строчные.
Блочные элементы браузер выводит на экран в прямоугольные области, следующие друг за другом сверху вниз:
Блочный элемент занимает всю доступную ширину. Высота блочного элемента определяется его содержимым.
Приведённый выше рисунок соответствует, например, такому коду:
Цветной фон у блоков, правда, отсутствует, но его можно задать, используя свойства CSS (материал следующей темы учебника):
Строчные элементы содержатся внутри блочных и занимают место в строке, переходя на следующие строки, если в текущей не хватило места:
Элемент HTML является блочным. Внутри этого элемента расположен элемент — BODY, который тоже является блочным.
Прямые потомки BODY — всегда блоки: абзацы (P), горизонтальные линии (HR), заголовки (Hn) и другие. Даже если поместить в BODY строчные элементы, браузер автоматически “обернёт” их в специально созданные безымянные блоки.
К строчным относятся элементы, позволяющие выделять текст (например, курсивом или жирностью), а также обычный неразмеченный текст — он автоматически собирается браузером в безымянные строчные элементы.
Рассмотрим следующий пример:
Этот код содержит 6 блочных элементов. Элемент HTML является родителем BODY. Четыре блока в BODY браузер выводит в последовательные прямоугольные области, занимающие всю ширину BODY:
Каждый блочный элемент в BODY, кроме HR, содержит внутри себя строчные элементы.
Блочный элемент H1 содержит один строчный безымянный элемент (текст заголовка):
Если ширина окна уменьшается, соответственно уменьшается ширина H1 и строчный элемент занимает несколько строк:
Блочный элемент P в первом абзаце содержит три строчных элемента: безымянный, EM и ещё один безымянный:
Если ширина окна уменьшается, строчные элементы переносятся со строки на строку так, чтобы занять ширину содержащего их блока (P):
Внутри блочных элементов могут располагаться не только строчные, но и блочные элементы вперемежку со строчными:
Все строчные и неразмеченные элементы собираются в безымянные блоки (назовём их условно БЛОК):
Размещение на экране выполняется прежним способом: блоки выводятся в прямоугольные области, следующие друг за другом сверху вниз.
Блочные элементы могут содержать блочные и строчные элементы. Однако блочный элемент P является исключением: внутрь него разрешается помещать только строчные элементы.
Следующий код является ошибочным:
Можно ли размещать внутри строчного элемента блочные? Стандарт языка запрещает это: “строчные элементы могут содержать только данные и другие строчные элементы”.
Стиль записи кода программыЗаписывать код программы нужно так, чтобы смысл его был максимально понятен. Подробный разговор на эту тему предстоит в уроке 10, а сейчас несколько самых важных рекомендаций.
Лесенка (ступенчатые отступы) отражает вложенность элементов друг в друга и позволяет легко увидеть в тексте границы больших многострочных конструкций.
Структурная лесенка должна повторять иерархическую структуру блочных элементов: каждый потомок смещается вправо по отношению к телу своего родителя (точки имитируют пробелы-отступы):
Начало и конец каждого блока занимают отдельные строки и записываются с одной и той же позиции. Потомок записывается между этими строками со сдвигом вправо (рекомендуемый сдвиг — 2 позиции).
Исключением могут быть короткие конструкции, начало и конец которых записываются в одной строке (например, <H1>Заголовок</H1>).
Структурную лесенку делайте только на теговом “каркасе” блочных элементов. Строчные элементы лучше начинать с первой позиции — так их легче записывать и редактировать.
Для просмотра длинных строк приходится применять горизонтальную прокрутку, а это очень неудобно. Длина строки в коде не должна превышать 80 символов.
HTML позволяет записывать имена тегов, атрибутов и их значений в любом регистре. Для выделения тегового каркаса рекомендуется записывать названия тегов прописными буквами, а названия атрибутов и их значения — строчными.