| Элемент | Схема кода | Назначение |
|---|---|---|
| H1 | Содержание
.
| Заголовок |
| HR | Горизонтальная линия | |
| P | . | Абзац |
Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают её восприятие.
Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня, а параграфы — пункты, обозначенные заголовками четвёртого уровня.
HTML поддерживает заголовки шести уровней при помощи конструкции:
В качестве n следует использовать одну из цифр 16, обозначающую уровень заголовка.
При отображении страницы браузер выделяет заголовки размером шрифта и жирностью:
Это заголовок 1 уровня
Это заголовок 2 уровня
Это заголовок 3 уровня
Это заголовок 4 уровня
Это заголовок 5 уровня
Это заголовок 6 уровня
Элементом H1 задают, как правило, заголовок сайта, элементом H2 — заголовок страницы, элементом H3 — разделы на странице и так далее.
Например, страница “В лес за грибами” сайта “Лесные истории” может иметь следующий вид (справа от заголовков проставлен их уровень):
Уровни заголовков отражают структуру документа (показана на схеме справа). Однако, в HTML-коде иерархия документа закладывается только в номер уровня Hn , и не означает вложенность соответствующих фрагментов кода.
Код вышеприведённой страницы имеет вид:
Замечаем, что вложенность элементов в коде не совпадает с вложенностью фрагментов содержания страницы.
В коде все элементы Hn и P являются прямыми потомками элемента BODY .
Использовать заголовки нужно очень аккуратно в соответствии с их иерархическими уровнями в структуре документа. Не следует использовать теги для выделения обычного текста. Они применяются только для заголовков.
Существуют специальные программы, которые автоматически составляют оглавление гипертекстового документа. Делают они это при помощи сбора информации из тегов . Если заголовочные теги обрамляют обычные тексты или не отражают иерархическую структуру документа, оглавление будет построено неверно.
Заголовок (сайта, страницы, разделов) нужно выбирать таким, чтобы он точно соответствовал содержанию. Красивая абстракция малопригодна для заголовка.
Погрешность Описание Неудачные заголовки Точки в коротких заголовках
Горизонтальная линия
Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задаётся тегом , и этот тег не имеет парного закрывающего.
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия отделяет заголовок в примере от основного текста:
Абзац
Человеку в отличие от компьютера трудно воспринимать однородную информацию, поэтому в книгах буквы не покрывают сплошь всю страницу, хотя это здорово сэкономило бы бумагу. Страница в угоду человеческой природе содержит много пустоты, а текст делится на порции — абзацы.
Абзацы отделяются друг от друга “красными” или пустыми строками. Красная строка — это первая строка абзаца с текстом, сдвинутым вправо.
Конечно, разделять текст на абзацы стараются не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.
Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как кодируются абзацы на HTML.
Задаётся абзац тегами
и
, между которыми помещается текст. Парный тег является необязательным.По умолчанию браузер использует не красную, а пустую строку (отступ) для отделения одного абзаца от другого.
Браузер отображает элемент P следующим образом:
- Абзац выводится с новой строки и перед ним формируется отступ размером в пустую строку.
- Абзац выравнивается по левому краю для языков с написанием слева направо и по правому для языков с написанием справа налево.
- Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
- Перенос текста на новую строку выполняется, если очередное слово не помещается в экранной строке, а не тогда, когда в HTML-коде начинается новая строка.
- Завершая абзац, браузер выполняет переход на новую строку и формирует после абзаца отступ размером в пустую строку.
Посмотрите, как браузер перестраивает абзац в разных по ширине окнах (откройте документ и измените несколько раз ширину его окна):
Парный тег
является необязательным — браузер определяет конец текущего абзаца по началу следующего или началу другого элемента уровня блока (о делении элементов на строчные и блочные рассказано в следующем пункте). Однако на практике лучше использовать следующее правило: в цепочке элементов 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 позволяет записывать имена тегов, атрибутов и их значений в любом регистре. Для выделения тегового каркаса рекомендуется записывать названия тегов прописными буквами, а названия атрибутов и их значения — строчными.
HTML начало
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Это заголовок
Это параграф.
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| Это инструкция для веб-браузера о том, на какой версии HTML написана страница. | |
| Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ | |
| Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как , и т.д. | |
| Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. | |
| Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. | |
| Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например , , и т.д. | |
| Этот тег представляет собой заголовок. | |
| Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы: