Что такое HTML? Структура документа HTML. Основные теги HTML

Сегодня нам предстоит узнать структуру построения документа HTML, хотя мы с ней уже встречались в статье " ". Вспомним теги прописанные в ней:
, , , .
Все эти теги парные, закрывающиеся контейнера, которые создают конструкцию HTML документа. Именно они составляют основу html кода. Ещё их называют «Обязательные теги », но не потому что, если их не вписать, получится ошибка в коде. Нет. Ничего не случится. Код документа будет работать. Но, обязательные теги нужны для того, чтобы видеть саму структуру html страницы, чтобы понимать, что где находится и что куда вставлять.
Для наглядности рассмотрим приведенный ниже рисунок, Screen 1. С правой

Screen 1.

стороны изображен человечек с надписями названий тег. Такое отображение предлагается, для более простого понимания схемы строения кода html. С левой стороны показан этот же прожект, но более схематично.
Обратим внимание на тег - расположен по краям рисунка, выделен красным цветом. HTML-тег является началом и концом HTML-документа. Он открывает его (верхняя часть) и закрывает (нижняя часть). В документе данный тег не обязателен, но хороший стиль диктует непременное их использование. Тег должен всегда стоять в документе первым и последним. Смотрим на картинке, человечек полностью помещен в этот тег. Весь код html-странички пишется внутри тега-:
Весь код html-странички
Тег - не обязательный закрывающийся, это значит, что вторую его часть (закрывающую) можно не прописывать, ошибкой это не будет. Однако это будет не корректный код. Переводится с англ. как «голова» и на сленге веб-программистов называется «голова» . Размещается внутри верхней части тега-. Внутри контейнера тега размещаются мета теги, которые предназначены для хранения информации браузера и поисковых систем, а также управленческих функций. Поэтому и «голова».
Внутри «головы», обязательно между тегами расположен мета-тег , который определяет заголовок документа и отображается в заголовке и вкладке браузера. Смотрим Screen 2,

Screen 2.

где показан на примере браузера Mozilla Firefox. Обязательный закрывающийся тег, не имеет атрибутов. Синтаксис расположения тега виден на Screen 3. Как правильно оптимизировать , можно узнать перейдя по ссылке.

, будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).

Примечания:

Создается с помощью элемента HEAD , между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа (см. структуру HTML-документа).

Элементы, относящиеся к заголовку документа:

(HTML 1.0) – Head

Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE ,BASE ,STYLE ,LINK ,META ).

(HTML 2.0) – Title

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

(HTML 3.2) – Base URL

Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов.

Атрибуты:

HREF – определяет базовый адрес (URL) текущего документа.

TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме.

(HTML 3.2) – Style

Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).

Атрибуты:

TYPE – обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".

TITLE – определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.

(HTML 2.0) – Link

Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK .

Атрибуты:

HREF – определяет URL объекта.

REL – определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:

stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE ) home – указывает на заглавную страницу вашего сайта toc, contents – указывают на файл, содержащий оглавление данного документа. index – указывает на файл, содержащий информацию для индексного поиска по текущему документу. glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу. copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п. up, parent – указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта). child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта). next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря). previous – указывает на предыдущую страницу в последовательности документов. last, end – указывает на последнюю страницу в последовательности документов. first – указывает на первую страницу в последовательности документов. help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

TYPE – определяет MIME-тип для объекта, указанного в атрибуте HREF.

Примечания:

(HTML 2.0) – Meta

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

Атрибуты:

NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.

HTTP-EQUIV – определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.

CONTENT – присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV).

Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегают использования фреймов, к чему, поверьте, имеют довольно веские основания. Старайтесь использовать фреймы только тогда, когда это действительно необходимо.

Элементы для создания фреймов и работы с ними:

Примечания:

FRAMESET

(HTML 4.0) – Frame Set

Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME . Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET . То есть элемент FRAMESET поддерживает вложенные конструкции фреймов.

Атрибуты:

ROWS – определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:

В процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%"; в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%; в пикселах. Например: "75,*";

Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй – в 40 пикселов, а третий займет всю оставшуюся площадь.

COLS – определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS.

BORDER – определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape;

FRAMEBORDER – определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:

Yes – отображать рамки; No или 0 – не отображать рамки;

Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER.

FRAMESPACING – определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок.

Примечание:

(HTML 4.0) – Frame Определяет фрейм и его свойства внутри FRAMESET -структуры. (см. элемент FRAMESET ) Атрибуты:

SRC – обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.

NAME – определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A ). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов.

MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.

MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.

SCROLLING – определяет наличие линеек прокрутки содержимого фрейма. Возможные значения:

yes – отображать линейки прокрутки. no – не отображать линейки прокрутки. auto – отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме).

NORESIZE – не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения.

FRAMEBORDER – определяет наличие рамок у фрейма. Возможные значения:

yes – отображать рамки; no или 0 – не отображать рамки;

Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET .

В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.html будет иметь ширину 265 пикселов, а frame2.html – высоту 165.

NOFRAMES

(HTML 4.0) – No Frames

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