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

Однако помните, что тело документа всегда идёт только после заголовка.

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

Элементы, входящие в состав BODY, составляющие содержимое документа, бывают двух типов: блоковые или блочные элементы (по-английски это называется block-level) и текстовые элементы (inline или text-level). Это требует пояснения. Блочные элементы являются более крупными, если так можно сказать, образованиями. С их помощью содержимое делится на большие логические куски. Откроем, например, какую-нибудь страничку и посмотрим: заголовок является блочным элементом, абзац является блочным элементом.

Текстовые же элементы служат для "тонкой настройки", т.е. работа ведется внутри текста: например, внутри абзаца мы можем какую-то часть его отметить в качестве гиперссылки. Или вставить внутрь текста картинку. Конкретные элементы мы будем рассматривать в последующих уроках, а здесь нам важно усвоить разницу между блочными и текстовыми элементами. Помимо описанной смысловой разницы эти типы отличаются ещё тем, что они могут в себе содержать: блочные элементы (в данном случае - элемент абзаца

" P") могут включать в себя просто текст, текстовые элементы. Например, элемент IMG (картинку), элемент EM, элемент STRONG.

Кроме того, блочные элементы могут содержать в себе другие блочные элементы. Это случается не так уж и часто. Например, существует элемент FORM,, для ввода пользователем каких либо данных. Этот элемент является блочным (он окружен пунктирной рамкой) и может содержать в себе другие блочные элементы.

Например, заголовок, абзац. Дальше пошли текстовые элементы, относящиеся непосредственно к форме. Текстовые же элементы, в отличие от блочных, например, элемент EM, могут содержать в себе только текст или другие текстовые элементы. Блочные элементы внутри текстовых появляться не могут. Еще одно различие между блочными и текстовыми элементами, наиболее заметное невооруженным глазом, заключается в том, что блочные элементы всегда начинают новую строку, а текстовые появляются прямо посреди текста. Чтобы у Вас голова окончательно не пошла кругом, изобразим всё это схематически.

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

Хотя о конкретных элементах мы будем говорить в соответствующих уроках, здесь мы сделаем исключение для двух из них, довольно любопытных. Это "просто блочный элемент" DIV и " просто текстовый элемент" SPAN. Эти элементы, в отличие от других, не имеют никакого конкретного значения и служат исключительно для "голой" разбивки содержимого либо на блоки, либо на фрагменты текста.

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

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

И в заключение поговорим о возможных атрибутах элемента BODY. Вообще говоря, в 4 версии HTML все атрибуты этого элемента кроме стандартных id и class (и некоторых других) являются нерекомендованными к использованию, т.к. все они относятся к оформлению, а оформление должно осуществляться через таблицы стилей. Тем не менее, браузеры до сих пор понимают эти атрибуты. Мы рассмотрим их вкратце. Итак, атрибут bgcolor отвечает за цвет фона страницы.

Цвет указывается в виде шестнадцатеричного числа (об этом мы поговорим, когда будем изучать таблицы стилей). Вот появился у элемента этот атрибут, и цвет фона изменился. Атрибут background позволяет задать для фона не просто цвет, а некоторое изображение. Выбираем картинку, и она заполнила весь фон. Давайте пока этот атрибут лучше удалим. Атрибут text задает цвет основного текста. Указывается в таком же виде, как и цвет фона. Атрибут link отвечает за цвет гиперссылок. Если у нас будет в тексте какая-нибудь гиперссылка, то она предстанет в этом цвете. Атрибут vlink задает цвет ссылок, по которой мы уже "ходили", которые посещали, а атрибут alink - цвет гиперссылки, на которую мы собираемся в данный момент перейти, т. е. фактически это цвет ссылки в момент, когда мы по ней щёлкаем мышкой. Marginheight и topmargin задают размер верхнего и нижнего полей документа. Они абсолютно идентичны, но один был сделан для браузера Netscape Navigator, а другой - для Internet Explorer.

Это типичное "наследие тёмных времен" - можете представить себе, как жилось дизайнерам, когда одинаковые, по сути, элементы в разных браузерах назывались по-разному. Между прочим, сделать так, чтобы поля были одинаковыми в Нетскейпе и в Эксплорере было весьма затруднительно. Это было одной из актуальных тем вебдизайнерского общения, и пути решения этой проблемы отличались невероятной изощренностью. Marginwidth и leftmargin - это то же самое, только для боковых полей.

Вот, собственно, и всё об элементе BODY, о теле документа. Дальше мы перейдем к рассмотрению элементов, которые составляют это тело.

⇐Синтаксис html и структура html-документа | TeachPro WEB-дизайн | Разметка текста. phrase elements, font-style-elements⇒