аватар |

Уроки / HTML /

Урок 2. Структура html документа (страницы)

Учим структуру HTML


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

Дабы не огорчать себя растратой бесценного времени, давайте посмотрим пример ниже и запомним расположение открывающих и закрывающих тегов html, head, body и того, что в них располагается

<html>
  <head>
    <title> <!--В head, например, есть тег title, в котором нужно записать заглавие страницы -->
      Заголовок на Ваш вкус
    </title>
  </head>
<body>

Любой текст. 
В тело документа вообще можно вставить не только текст, но и картинки, ссылки и прочее. 
Как это делать - рассмотрим позже. Поэтому пока здесь только текст  

</body>
</html>


Важно понять и соблюдать базовую структуру html-документа. Нужно будет выучить последовательно базовых тегов, таких как html, head, body. Если её нарушить, то и Ваш html-документ будет отображаться некорректно.


html - с него начинается и заканчивается html-документ. Исключение может составить так называемая - спецификация. О ней я расскажу ниже.
head - в голове документа содержатся данные о сайте или странице: заголовок, ключевые слова, описание, автор и тд
body - мы же пока конкретнее остановимся на ТЕЛЕ документа. Именно между открывающим и закрывающим тегами body будем вставлять текст, ссылки, изображение и многое другое.

Ещё раз смотрим код выше, анализируем и читаем дальше.

Спецификация документа HTML


Скажу сразу, текст сложный, но нужно представлять уже в самом начале, что это такое. Если пропустите данный раздел, то ничего страшного не случится, но позже всё равно лучше к нему вернуться.

И всё же...
html-документ в идеале должен состоять не только из базовых тегов (html, head,body). Почти все web-страницы начинаются со сторки вида:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Это так называемая спецификация html документа.

А уже позже прописываются остальные теги: html, head,body и их содержимое.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>
      Заголовок на Ваш вкус
    </title>
  </head>
<body>

Любой текст. 

</body>
</html>


Спецификация помогает браузеру определить, как правильно интерпретировать Ваш html-документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии XHTML 1.0.

Проще говоря, если Вы не укажете спецификацию или укажете её старую версию, то некоторые элементы у Вас будут отображены некорректно или не отображены вовсе.


Тег DOCTYPE cогласно спецификациям HTML и XHTML (что означает Объявление типа документа) сообщает валидатору, какую именно версию (X)HTML вы используете на своей странице. Данный тег всегда должен располагаться на Первой строчке каждой вашей старницы! Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

Из истории спецификации...
Решение задачи создания спецификаций HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно -- W3C), владельцем которой является создатель HTML - Бернерс-Ли. В задачи W3C входит составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений компаний-разработчиков браузеров. Официальные сведения о спецификации HTML всегда можно получить с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/.

Базовые теги HTML


После спецификации документ продолжает открывающий тег html. Закрывающий тег также должен Обязательно прописываться в Конце html-документа.

Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете

Тег body обозначает Тело страницы. То, что вписать после открывающего и перед закрывающыим тегами body и будет Содержимым Вашей страницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!-- Спецификация -->

<html>
  <head>
    <title> 
      Название страницы 
    </title>
  </head>
<body>

<h1>Любой заголовок</h1>
Просто текст
Другой текст
<p>Текст в параграфе. Он будет писаться с новой строки, выделяться отступами и заканчиваться с закрывающим тегом</p>

</body>
</html>


Пример кода html-документа


Итоговая страница с комментариями по каждому тегу. Обязательно к внимательному просмотру.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <!-- Спецификация -->
<html> <!-- С открывающего html начинаем наш документ -->

   <head>  <!-- Открываем головную часть документа -->
     <title>Здесь будет заголовок Вашего документа</title>
   </head>  <!-- Закрываем головную часть документа. Пока не закрыли, к тегу body НЕ переходим -->

 <body> <!-- Открываем тело документа. ЗДЕСЬ будет всё содержимое -->

     Тело документа. Можно писать что угодно
     <h1>Вставлять заголовки</h1>
     И текст <b>жирный</b> и <i>курсив</i>

 </body>  <!--Закрываем body. После этого Содержимое не вставляем-->

</html> <!--Закрываем html. После него уже ВООБЩЕ НИЧЕГО НЕ вставляем-->
 



Распечатать
Похожие статьи
30 января 2013 16:37 Урок 10. Форма и элементы: флажок, радиокнопка, поле
21 января 2013 16:53 Что такое html, основные понятия
30 января 2013 16:21 Урок 6. Специальные символы в html
30 января 2013 16:31 Урок 7. Создание списков в html
30 января 2013 16:37 Урок 11. Элементы формы: текстовая область и список.


Комментарии к статье (vk.com)