April 16, 2020

Начинаем

Иии так.

Структура html документа выглядит примерно вот так:

Пользователь видит только то, что находится в теле документа. То что находится в "голове" видно только разработчику (обычно там содержатся необходимые надстройки над страницей. Кстати принято говорить не "голова", а "шапка" сайта.

давай теперь посмотрим, как будет выглядеть этот код :

<html>
<head></head>
<body></body>
</html>

Теперь по порядку.

Слова заключенные в <> - называются тегами.
существует 3 вида тегов:

  1. <тег> - открывающий тег
  2. </тег> - закрывающий тег
  3. самозакрывающийся тег ( по сути это тот же открывающий тег, но который не требует за собой закрывающего. Таких тегов существует совсем немного, но о них позже )

все теги, за исключением самозакрывающих, требуют закрывающих, иначе код не будет корректно интерпретироваться браузером.

Обрати внимание, что шапка и тело заключены в тег <html></html>. Без него страница сайта будет отображаться некорректно.

При написания кода важно правильное оформление структуры кода, чтобы в дальнейшем не запутаться. Выглядит она примерно так:

<html>
    <head>
        Содержание шапки
    </head>
    <body>
        Содержание тела
    </body>
</html>

В предыдущих версиях HTML, тег <html> Должен был выглядеть так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

</html>

Но, так как мы используем HTML5, достаточно написать просто:

<!DOCTYPE html>
</html>


так же существует мета-теги. О них расскажу подробнее чуть позже, но сейчас немного об одном:

<meta charset="utf-8">

И так charset - является атрибутом тега, который хранит в себе значение "utf-8". подробнее об атрибутах ты узнаешь в следующих уроках.

Utf-8 - это кодировка, поддерживающая русский язык.

Теперь давай подытожим, как должен выглядеть стандартный код с которого можно начинать проект:

<!DOCTYPE html>
    <head>
        <meta charset="Utf-8">
    </head>
    <body>
        Содержание тела
    </body>
</html>

Многие современные текстовые редакторы поддерживают автоматическую структуру кода, и автозаполнение начального шаблона, так что сильно заморчачиваться с этим не придется