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