Как вы заметили из названия, HTML не является языком программирования как таковым, это язык разметки. В этой статье я постараюсь максимально понятно и доступно ознакомить вас с азами синтаксиса HTML. Я не буду расписывать здесь долгую и нудную теорию, поэтому давайте перейдем к практике.
Для начала подготовим среду для написания кода. Лично мне удобно использовать программу Sublime Text. Но вы можете просто использовать блокнот. Сейчас я покажу последовательность действий.
1.Создайте текстовый документ
ПКМ на рабочий стол – создать – Текстовый документ
2.Сохраните файл в нужном расширении (ваш_файл.html)
Открываете текстовый документ-файл-сохранить как.
3.Приступаете к написанию кода.
Структура кода.
<! DOCTYPE html> - это так сказать пережитки прошлого. Этот элемент предназначен для указания типа текущего документа. Чтобы браузер понимал, согласно какому стандарту отображать веб-страницу (современный HTML5 или устаревшие HTML4 и XHTML. Это пока все что на первом этапе необходимо знать об этом элементе.
Как возможно вы знаете, HTML состоит преимущественно из тегов (открывающих и закрывающих. Давайте пройдемся по основным.
<html> - открывающий тег <html> определяет начало HTML документа. Внутри него находится “голова” <head> и “тело” <body>.
<meta charset = ”utf-8”> - элемент <meta> добавляет целый класс возможностей. В данном случае мы определяем кодировку страницы, иначе браузер может отображать русские слова непонятными символами:
Как вы, наверное, уже поняли, теги как открываются, так и закрываются. Например, </head> обозначает то, что мы закончили оформление “головы” документа.
Переходим к самому интересному.
Тег <body> - тело документа. Предназначено для размещения элементов, контента, содержимого страницы.
Заголовки HTML. Для создания заголовках в HTML используются теги <h1>…<h6>
<h1> Заголовок первого уровня</h1>
<h2> Заголовок второго уровня</h2>
<h3> Заголовок третьего уровня</h3>
<h4> Заголовок четвертого уровня</h4>
<h5> Заголовок пятого уровня</h5>
<h6> Заголовок шестого уровня</h6>
Параграфы HTML. Для обозначения параграфов в HTML используется тег <p>. Если вы хотите отделить одну часть текста от другой, тег <p> поможет в этом.
<p> Абзац номер 1 </p>
В конце страницы всегда идут закрывающие теги </body> и </html>.
Как же посмотреть созданную мной веб-страницу? Очень просто.
Нажмите 2 раза на созданный вами файл (обязательно .html) и откройте с помощью любого браузера.
Готовый код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p>Параграф</p>
</body>
</html>
P.S: отступы делать необязательно, но когда код будет длиннее и будет больше тегов, с отступами будет намного удобнее. Так же для изучения HTML и не только советую приложение SoloLearn.
