Веб-мастерская Ларисы ВоронинойСтруктура HTML. Уроки HTML и CSS. Как самому создать сайт.
WEB-мастерская Ларисы Ворониной logo

Структура HTML. Сен 19 2016


HTML – это язык разметки гипертекста, или иначе - язык тегов. С помощью него мы определяем какие элементы будут располагаться на web-странице. Структура HTML очень проста.

Для создания сайта с помощью HTML требуются следующие инструменты:

  • Текстовый редактор (я, например пользуюсь редактором  Notepad++, могу ещё посоветовать Sublime Text, эти редакторы бесплатны и удобны).
  • Браузер для просмотра результатов.
  • Валидатор, с помощью которого можно проверить синтаксис HTML и выявить ошибки в коде.

Для того, чтобы браузер понимал язык HTML, применяются теги. Синтаксис написания тегов  в структуре HTML очень прост:

<контейнер 1>
     <контейнер 2>
То, что находится внутри контейнера
     </контейнер>
</контейнер>

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

Существуют и одинарные теги: <hr> , <br>, но об этом потом.

Начинается HTML – документ с указания типа текущего документа. Для HTML5 (это последняя версия) указываем:

<!DOCTYPE html>

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

Например, сам HTML-документ начинается с открывающего тега <html>, и заканчивается закрывающим тегом </html>.

!!!Помните, почти каждый открытый тег в языке HTML должен закрываться!!!

Элемент head, т.е. заголовок, так же начинается с открывающегося тега <head> и заканчивается закрывающим тегом </head>. Этот элемент содержит служебную информацию, которую пользователь не видит, например элемент title (название), т.е. то, что будет отображено в самой верхней части окна браузера. Так же в элементе head мы указываем кодировку языка, в нашем случае это будет <meta charset= "utf-8">.

Элемент body содержит контент страницы, т.е. то, что видит пользователь.
Итак, структура HTML-документа выглядит следующим образом:
struktura HTML
Используя структуру HTML-документа, напишем самую простую страницу сайта.
В редакторе HTML-код будет выглядеть вот так:

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Самая простая страница</title>
     </head>
     <body>
          <h1>Заголовок сайта</h1>
          <p>Контент сайта</p>
     </body>
</html>

А в браузере вот так:
struktura HTML
Контент состоит из блоков, которые заключаются в теги div:
struktura HTML
В блоках содержатся заголовки, текст, картинки и ссылки.

О том, как создать текст на web-странице с помощью HTML читайте здесь.

 





Рейтинг@Mail.ru