Структура 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
<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 верстки!