Уроки WEB дизайна




 Создание HTML


Итак, элемент 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, о теле документа. Дальше мы перейдем к рассмотрению элементов, которые составляют это тело.

Карта сайта Реклама
На нашем сайте Вы сможете найти любую информацию о программах 3D Max, Macromedia Flash MX, Corel Draw 12, Adobe Illustrator и многих других. Вы не найдете на данном сайте различные серийники, ключи, активацию, русификаторы, кряк, crack, keygen, серийные ключи и кейгены для этих программ. Для приобретения или скачивания программ воспользуйтесь ссылками на официальных сайтах производителей.
элемент Списки определений для начала каждого элемента списка