Фото Сергея Белосова
Блог Сергея Белоусова
  • - Разработка сайтов
  • - Обучаю профессиональной верстке
  • - Консультации по разработке сайтов и поиску клиентов
Мои контакты: skype skype skype skype

HTML для начинающих: Базовая структура HTML документа [DOCTYPE, html, head, body] #5

HTML для начинающих: Базовая структура HTML документа [DOCTYPE, html, head, body] #5

В этом выпуске мы уже наконец то приступим к практике, начнем верстать свой первый сайт. Из прошлых выпусков вы уже знаете:

  1. Как работает интернет в целом
  2. Что такое web сайт, из чего он состоит и как работает
  3. Что такое HTML теги и какие они бывают
  4. И что такое атрибуты тегов

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

Существует много специальных программ, так называемых кодовых редакторов, с помощью которых мы можем писать код в разы быстрее и удобнее. Я пользуюсь Sublime Text 3 - быстрый, легкий и удобный кодовый редактор, для которого существует куча плагинов и расширений для сокращения времени написания кода, в общем рекомендую и вам, скачиваем и устанавливаем.

Тег <!DOCTYPE>

Начнем мы с написания базовой структуры HTML документа, которая начинается с тега <!DOCTYPE> - он является одиночным тегом пишется в самом начале страницы, предназначен для указания типа текущего документа — DTD (document type definition). Это необходимо, для того чтобы браузер понимал, в какой версии HTML следует отображать текущую веб-страницу.

Так как язык HTML существует в нескольких версиях и везде синтаксис написания не много отличается, то в атрибут тега <!DOCTYPE> мы пишем версию HTML в которой браузеру нужно отображать страницу. Так как уже давно существует версия HTML5, который объединил в себе все синтаксисы написания предыдущих версий, то сейчас достаточно указать в теге <!DOCTYPE> атрибут html и браузер будет понимать, что данную страницу нужно отображать в версии HTML5.

<!DOCTYPE html>

Вот так вот просто пишем атрибут html без какого либо значения, с этого и начинается любая страница HTML.

Тег <html></html>

Следом за <!DOCTYPE> идет двойной тег <html></html> - который является контейнером для всего содержимого веб-страницы. Закрывающий тег </html> должен всегда стоять в документе последним. Во внутри тегов <html></html> формируется уже вся фундаментальная структура сайта которая состоит из <head></head> и <body></body>, смотрим пример как это все должно выглядеть:

<!DOCTYPE html>
<html>
  <head>
    <!--Теги заголовков и технической информации, не отображается на экране-->
  </head>
  <body>
    <!--Содержимое страницы которое будет отображается на экране-->
  </body>
</html>

Вот так выглядит базовая структура HTML документа.

Тег <head></head>

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

Тег <body></body>

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

В следующем выпуске мы будем изучать теги для оформления текста, а в этом уроке вы узнали:

  1. Как строится базовая структура HTML документа
  2. Для чего нужен <!DOCTYPE>
  3. И для чего нужны теги <html>, <head> и <body>

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

Не забудьте рассказать друзьям!

Хотите научиться верстать и зарабатывать ? Скачайте книгу!

Книга Как быстро научиться верстке сайтов и зарабатывать на этом

Подробнее о книге, жми!