Мы ранее рассмотрели строение сайта в широком понимании, и пришли к выводу что сайт это один из сервисов интернета. По своей сути сайт, это множество документов, которые отдаются программе просмотра страниц сайтов, т.е. посетителю. В 90-х годах и ранее, в понятие «документ» вкладывался обычный текстовый файл, который содержал обычные печатные символы и управляющие, не видимые, но они могли изменить внешний вид текста на экране или принтере. На современном этапе понятие «документ» уже намного шире, современный документ может содержать и фотографии, видео, сложные форматирования текста, и даже анимацию.
HTML документ
Для отображения страниц сайта был разработан специальный формат, HTML, с его помощью можно было значительно расширить возможности отображения текстового и графического контента на экране посетителя сайта. HTML документ представляет собой обычный текстовый, его можно открыть в любом текстовом редакторе или в режиме просмотра страницы в любом браузере, в качестве управляющих символов используются теги. С момента рождения первого сайта было разработано несколько версий HTML, сейчас используется 5-я версия. Но ничто не запрещает использовать и предыдущие версии, правда возможностей там меньше. По своему устройству страница сайта представляет собой XML документ, это множество тегов, тег, это символы внутри значков «<» и «>», например,
текстовая информация
, здесь тег это «p», открывающему тегу есть пара, которая его закрывает и прекращает его действие.
Строение HTML документа
Чтобы познакомиться с внутренним строением страницы, например, той которую вы сейчас смотрите, достаточно открыть ее в вашем браузере в режиме просмотра кода страницы. Любой такой документ состоит из:
- говорит браузеру, что это стандартный HTML документ.
- Заголовка документа, , он указывает нашему браузеру как интерпретировать содержимое, у нас - HTML5.
- Собственно сам документ, это
- Служебная часть - эта часть не видна посетителю, здесь перечисляются служебные файлы, которые описывают как выводить те или иные части сайта (CSS), JavaScript - файлы, служебные - в основном используются разными роботами, важный тег - он используется и роботами и нашим браузером, например, при добавлении в «избранные страницы».
- - собственно сам сайт, это видимая часть, его называют телом документа, как правило все что здесь есть, видно в окне нашего браузера в том или ином виде или при разном поведении посетителя.
Теги HTML документа
В первых версиях HTML, использовали в основном текст, что бы он не был монотонным, придумали теги, которые заставляют наш браузер видоизменять текст, например, выделить его жирным шрифтом, «Этот текст будет жирным шрифтом». По аналогии можно сделать и наклонный шрифт, выделять списки и т.д. С появлением стилей CSS, мы можем любой тег заставить работать так как нам нужно, например, обычный «параграф
» может выводить текст жирным и наклонным шрифтом, казалось бы, можно было избавиться от целого зоопарка тегов, но для совместимости все это осталось и используется до сих пор, более того, все теги из предыдущих версий HTML работают как и раньше.
Валидаторы HTML документа
Для одинакового отображения страниц в разных программах посетителя, нужно что бы документ не содержал ошибок, например, не парные теги, это когда, например, открытому тегу
нет его пары, закрывающего тега. Конечно, браузер многое прощает и документ будет выводиться на экран, но при более серьезных ошибках может исказиться полностью вся страница. Для исключения этого, верстальщик использует специальные редакторы, которые подсвечивают парные теги, это значительно снижает вероятность ошибок. Для проверок всего документа используют специальные валидаторы, которые могут быть встроены в редактор или в виде отдельного сервиса, например, https://validator.w3.org. Здесь есть небольшой нюанс, в подавляющем большинстве сайтов есть ошибки и предупреждения, но на это не стоит заострять внимание, по причинам:
- Несовместимости некоторых версий браузеров, например, знаменитый IE от Microsoft, приходится использовать не стандартные решения
- Отсутствие поддержки некоторых возможностей отдельных браузеров, это особенно касается стилей CSS, некоторые браузеры отстают от стандартов
- Создание микро разметки, помогающей поисковым роботам работать с сайтом
- Передачи некоторых не стандартных параметров в документ через атрибуты тегов
Как правило все это не влияет на отображение документа в окне браузера посетителя.
Как видите на вид простой документ сам по себе довольно сложно устроен. Создавая сайт, мы используем все современные стандарты, обращайтесь в нашу студию.
