Структура гипертекстовой разметки сайта
или как выглядит сайт изнутри

  • Что видит человек, который заходит на сайт? Он видит на своем экране красивую страницу, заполненную текстом и картинками. Давайте заглянем за кулисы и посмотрим, как выглядит обратная сторона web страницы.
  • Итак, рассмотрим от начала, с самой первой буквы, самой первой строки и до конца кодовой (гипертекстовой) разметки внутреннее строение сайта.
  • DOCTYPE «Тип документа», влияет на совместимость сайта с компьютерами посетителей сайта. В данном самоучителе в качестве примера для создания структуры сайта мы взяли тип документа HTML 4.01 Transitional: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  • <html> Тэг, открывающий «HTML-документ». Закрывающий тэг из этой пары будет самым последним на нашей веб странице.
  • <head> Тэг, открывающий все оглавление документа.
  • <title></title> Тэги, между которыми нужно написать название документа: 
<title>Мой первый сайт</title>
  • <meta http-equiv> Непарный тэг, содержит код, определяющий тип и кодировку документа: 
<meta http-equiv="content-type" content="text/html; 
charset=windows-1251">
  • <style type="text/css"> Тэг, открывает «отделение стиля», определяющего внешний вид web страницы, в этом отделении кодовая запись осуществляется в терминах языка css: 
body {
Здесь пишем правило селектора body – «тела» документа.
}
#nav {
Здесь пишем правило селектора навигации, создающего и 
определяющего вид кнопок навигации по страницам сайта. 
}       
#content {
Здесь пишем правило селектора контента. 
В этом селекторе будет заключена практически вся основная 
текстовая и визуальная информация доступная для 
посетителей сайта.
}
p {
Здесь пишем правило для абзацев. Текстовая информация 
выводится на экран компьютеров посетителей сайтов в виде 
текстовых блоков – абзацев.
}
  • </style> Тэг, закрывающий «отделение стиля»;.
  • </head> Тэг, закрывающий «оглавление документа».

Теперь мы переходим к отделению, которое является «телом» документа, здесь заключается вся текстовая и визуальная информация, которую будут видеть посетители сайта:

  • <body> Тэг, открывает отделение «тела» документа, определяющего структуру web страницы. Кодовая запись осуществляется в терминах языка html. (Закрывающий тэг из этой пары </body> будет предпоследним на нашей веб странице).
  • <div id="content"> Тэг, открывающий «селектор контента». В этом селекторе будет заключен практически весь объем текстовой и визуальной информации, отображение которой увидят посетители сайта.
  • <div id="nav"></div> Тэги, между которыми находиться «селектор навигации». Этот селектор создает кнопки, с помощью которых вы можете путешествовать по сайту, например, с «Главной» страницы на страницу «Новости» и т.д.
  • <h1></h1> Тэги, между которыми пишем текст «главного заголовка» сайта. Всего можно задать и использовать только шесть стилей оформления заголовков:h1, h2, h3, h4, h5 и h6. На сайте может быть сколько угодно заголовков, просто к каждому заголовку нужно будет выбрать один из шести видов оформления. Стиль оформления любого текстового элемента - это: тип, размер, цвет и прочие параметры шрифта.
  • <p></p> Тэги «абзацев», между которыми пишем текстовую информацию сайта. На сайте может быть столько абзацев, сколько Вам необходимо. Остается только придумать заголовки для каждого абзаца, чтобы донести до посетителей главную мысль сайта.
  • </div> Тэг, закрывающий «селектор контента».
  • </body> Тэг, закрывающий отделение «тела» документа.
  • </html> Тэг, закрывающий «HTML-документ».

Вот и все устройство сайта, выучить его не сложнее, чем выучить таблицу умножения.