• strict warning: Non-static method view::load() should not be called statically in /home/s/serka1/devlib.ru/public_html/modules/views/views.module on line 879.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/handlers/views_handler_filter.inc on line 0.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/plugins/views_plugin_row.inc on line 0.
  • strict warning: Declaration of views_plugin_row::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/s/serka1/devlib.ru/public_html/modules/views/plugins/views_plugin_row.inc on line 0.

Структура HTML

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

Далее мы рассмотрим правила написания тегов и использования атрибутов. Ниже представлена заготовка типичной веб страницы. На этом примере мы рассмотрим структуру HTML-страниц.

<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
</HEAD>

<BODY>
-- Здесь располагается основное содержимое сайта.
</BODY>

</HTML>

Большая часть сайтов сделана по этому шаблону, поскольку, это обязательные элементы. Это можно объяснить тем, что страницы создаются по определенным стандартам. Чтобы разобраться в структуре сайта, мы должны рассмотреть все элементы приведенного кода.

Рассмотрим все по частям:

<HTML> </HTML>
Тег, с которого должна начинаться и заканчиваться каждая веб страница. Он обозначает то, что наш документ написан на языке HTML. В принципе, этот элемент можно считать формальностью. Он имеет атрибуты version, lang и dir. Однако эти атрибуты редко кто использует на практике. Тег HTML допускает вложение элементов HEAD, BODY, FRAMESET и других, которые определяют общую структуру веб страницы.

<HEAD> </HEAD>
Голова или область заголовка веб страницы. Так же, как и предыдущий элемент, HEAD является необходимым элементом для формирования структуры html страницы. Необязательные атрибуты lang и dir. Еще HEAD должен содержать в себе тег TITLE. Допускает вложение элементов BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.

<TITLE> </TITLE>
Тег, в котором заключается заголовок страницы. Текст, расположенный внутри этого элемента, отображается в заголовке окна браузера. Советуем Вам составлять заголовки страниц таким образом, чтобы они отображали суть страницы и не были слишком длинными. Это необходимо для того, чтобы поисковики типа Google и Yandex смогли отыскать Вашу страничку в сети интернет.

<BODY> </BODY>
Тег BODY отвечает за информацию, располагаемую на самой странице. Между этими тегами <BODY></BODY>  можно использовать все элементы, предназначенные для дизайна веб страницы. Внутри открывающего тега BODY часто находятся атрибуты, которые обеспечивают настройки и внешний вид всего документа целиком.

Самым часто используемым является атрибут background, который задает фон страницы.
<body background="Путькфайлуфона">

Таким образом, мы задаем форовую картинку для страницы. Путь можно указать либо абсолютный, либо относительный. Например:

<body background="background.jpg">

Так же, мы можем задать просто цвет фона странички.
<body bgcolor="#RRGGBB">

Цвет фона задаем в виде трех двухразрядных чисел в шестнадцатеричном формате. Они будут определять интенсивность красного, зеленого и синего цветов. О задании цветов поговорим позднее. Например:
<body bgcolor="#FFFF99"> - светло желтый фон.

Так как мы меняем цвет фона, то и цвет текста неплохо было бы поменять. Это можно сделать так:
text="#RRGGBB"

Раскрасим наши гиперссылки в цвет:
link=”#RRGGBB”

Структура тегов внутри тега <BODY> может быть очень разнообразной. Она определяется будущими потребностями страницы, ну и конечно фантазией разработчика.

А теперь, долгожданный пример:

Листинг index.html

<HTML>
<HEAD>
<ТIТLЕ>Моя первая страница</TITLE>
</HEAD>

<BODY bgcolor="#FFFF99" text="#CC9966" link="#FF3333">
<H1>Это моя первая страница.</H1>
Здесь можно расположить небольшой текст обо мне и моих увлечениях.
<A href="http://devlib.ru/">Ссылка на наш сайт</A>
</BODY>

</HTML>

Как Вы успели заметить, здесь появились новые теги. Сейчас мы не будем их рассматривать подробно. <H1></H1> - показывают заголовок текста. Текст, заключенный между <A></A> будет являться гиперссылкой. Атрибут href указывает путь ссылки. Скачать подробное описание этих тегов можно на странице «Учебники / Книги».

Попробуйте создать свою страничку при помощи материала, изложенного в этой статье. Для начала воспользуйтесь блокнотом и сохраните Ваш файл с разрешением .html

Структура HTML

На этом мы заканчиваем наш краткий экскурс в структуру HTML. Успехов в освоении HTML верстки!