Структура html

Приветствую вас, уважаемый посетитель!

Продолжаем, вместе изучать основы HTML ( начало, можно посмотреть здесь).

Итак, вперёд к познаниям!

Сегодня рассмотрим — тэг <head>  заголовок документа и тэг <body> тело документа.

структура html

Содержание: 

  1. Заголовок документа  <head> и </head>.

  2. Тело документа <body> и </body>.

Сама, структура html документа, включает в себя три пары тэгов:

struktura

Тэги <html> и </html>, являются своеобразным контейнером, между которыми, вставляется остальные тэги. Документ должен начинаться тэгом <html> и заканчиваться </html>.

Ну а сам документ, условно, можно разделить на две части:

Заголовок документа <head> и </head> и тело документа <body> и </body>.

Рассмотрим их, по порядку.

Заголовок документа <head> и </head>.

Единственным обязательным элементом заголовка, являются тэги <title> и </title>. Они необходимы, чтобы дать название нашему документу, для отображения в заголовке, окошка браузера. Рекомендуемая длина заголовка, 60 символов.

Настоятельно рекомендую, не давать однотипных названий, вашим документам. Заголовок документа, должен отображать содержимое. А тэги <title> и </title>, влияют на оптимизацию сайта.

Он, не влияет на внешний вид документа, а только содержит служебную информацию. 

Одиночный тэг Base — служит для указания полного URL-адреса документа. Если он находится в документе, браузер видит адрес и может показать вам картинку. У тэга <base>,  один атрибут href.

Его значением является адрес страницы.

Пример:

структура1

Для подключения файлов, необходим, одиночный тэг <link>.

К примеру, если вы собираетесь использовать каскадную таблицу стилей, то её удобнее хранить в отдельном файле и подключать его, ко всем страницам.

У тега <link> несколько атрибутов:

href — указывает  URL-адрес подключаемого файла.

rel — указывает на тип отношения данного документа к внешнему (например: rel=»stylesheet» указывает, что внешний файл определяет стиль текущего документа).

type — указывает тип и параметры присоединенной таблицы стилей.

Пример:

структура2

Тэг  Meta — не имеет никакого отношения к html, однако, он удобен для выполнения ряда задач:

  • указание кодировки страницы, например, для русского текста в кодировке Windows:

структура3

  • указание ключевых слов страницы (используется при оптимизации страниц): 

структура4

  • указание краткого описания страницы:

структура5

Рассмотрим параметры тега <meta>:

http-equiv — определяет свойство тега (тип контента, ключевые слова, описание и т.д.)

name — используется для дополнительного описания тега, если отсутствует, то считается эквивалентным параметру http-equiv.

content — значение параметра http-equiv.

Пример:

структура6

Для подключения внешних файлов, необходимы тэги: <script> и </script>.

Если, вы используете функции java script для большинства своих страниц, то, поместив эти функции на отдельную страницу — function.js, с помощью тега <script>, можно указать путь к этой страницы.

Это ускоряет загрузку страниц и повышает читабельность кода. 

Параметры тэга <script>:

language — указывает язык написания скрипта, в спецификации HTML 4.0, данный параметр не рекомендуется к употреблению. Вместо него следует указывать параметр type.

type — указывает тип MIME для языка.

src — указывает путь к внешнему файлу со скриптами.

Примера такого кода, с относительным адресом скрипта:

структура7

Тело документа <body> и </body>.

Всё, отображаемое на web-странице, находится в тегах <body> и </body> . Это и текст, и картинки, и исполняющиеся скрипты, а также теги для оформления всего этого.

Обязательных параметров у тега <body> нет, да и применение необязательных параметров тоже не приветствуется. Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.

Рассмотрим те, которые пока поддерживаются всеми браузерами:

alink — устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный при нажатии на нее;

vlink — устанавливает цвет посещенной ссылки, т.е. той, по которой уже щелкали; 

background — указывает на изображение, которое будет использоваться в качестве фонового рисунка. Этот рисунок заполняет собой все видимое пространство окна. Если рисунок меньше окна браузера, то он повторяется, образуя мозаику из одинаковых картинок. На стыке этих картинок возникают видимые переходы. Поэтому к подбору фоновых рисунков следует подходить с большим вниманием;

bgcolor — указывает фоновый цвет документа;

leftmargin — определяет отступ от левого края окна браузера до контента страницы;

rightmargin — определяет отступ от правого края окна браузера до контента страницы;

topmargin — определяет отступ от верхнего края окна браузера до контента страницы;

bottommargin — определяет отступ от нижнего края окна браузера до контента страницы;

text — устанавливает цвет текста для всего документа;

Пример:

структура8

Подведём итог, по пройденному:  Любой ваш html — документ должен содержать следующие теги и именно в том порядке, как они указаны.

структура9

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

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

На этом, считаю сегодняшний урок законченным!

Желаю успехов!

С уважением, Максим!

Понравилось,оставьте свой email:


1+

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *