HTML – это язык разметки гипертекста, или иначе - язык тегов. С помощью него мы определяем какие элементы будут располагаться на web-странице. Структура HTML очень проста.
Для создания сайта с помощью HTML требуются следующие инструменты:
- Текстовый редактор (я, например пользуюсь редактором Notepad++, могу ещё посоветовать Sublime Text, эти редакторы бесплатны и удобны).
- Браузер для просмотра результатов.
- Валидатор, с помощью которого можно проверить синтаксис HTML и выявить ошибки в коде.
Для того, чтобы браузер понимал язык HTML, применяются теги. Синтаксис написания тегов в структуре HTML очень прост:
<контейнер 2>
То, что находится внутри контейнера
</контейнер>
</контейнер>
По своей сути теги - это контейнеры, в которых хранится информация; в одних контейнерах могут находиться другие контейнеры, которые тоже содержат в себе информацию. Теги состоят из двух частей — открывающий и закрывающий тег. Открывающий тег выглядит так —<тег>, а в закрывающем используется слэш — </тег>.
Существуют и одинарные теги: <hr> , <br>, но об этом потом.
Начинается HTML – документ с указания типа текущего документа. Для HTML5 (это последняя версия) указываем:
HTML-документ состоит из элементов, каждый из которых начинается и заканчивается открывающим и закрывающим тегом.
Например, сам HTML-документ начинается с открывающего тега <html>, и заканчивается закрывающим тегом </html>.
Элемент head, т.е. заголовок, так же начинается с открывающегося тега <head> и заканчивается закрывающим тегом </head>. Этот элемент содержит служебную информацию, которую пользователь не видит, например элемент title (название), т.е. то, что будет отображено в самой верхней части окна браузера. Так же в элементе head мы указываем кодировку языка, в нашем случае это будет <meta charset= "utf-8">.
Элемент body содержит контент страницы, т.е. то, что видит пользователь.
Итак, структура HTML-документа выглядит следующим образом:
Используя структуру HTML-документа, напишем самую простую страницу сайта.
В редакторе HTML-код будет выглядеть вот так:
<html>
<head>
<meta charset="utf-8">
<title>Самая простая страница</title>
</head>
<body>
<h1>Заголовок сайта</h1>
<p>Контент сайта</p>
</body>
</html>
А в браузере вот так:
Контент состоит из блоков, которые заключаются в теги div:
В блоках содержатся заголовки, текст, картинки и ссылки.
О том, как создать текст на web-странице с помощью HTML читайте здесь.