Этой статьёй я начну цикл материалов по входу во фронтенд-разработку. Статьи будут для прям совсем начинающих, потому что по вопросам я вижу, что это нужно. Часто самый сложный шаг - это именно начать. Потому что с чего именно начать - совершенно непонятно. Попытаюсь объяснять максимально просто, почти как для детей. Не обижайтесь, это может помочь.
Итак, HTML (читают как "аш ти эм эль", или "эйч ти эм эль"). Давайте пока думать об этом, как о формате файла с расширением .html, примерно таком же, как формат .doc в ворде. И если .doc можно создать в ворде, то .html делается примерно так же, но в других программах. Для начала можно создать его даже в "блокноте". Так и поступим. Открывайте "блокнот" (я буду показывать пример для windows) и пишите в нём вот такое (руками пишите):
На самом деле пока, кажется, не очень красиво. Но сохраните файл под именем index.html, а потом откройте его в любом вашем браузере.
Можно видеть, что теперь это выглядит уже похоже на ворд-документ - заголовок, параграф, вот это всё:
Как видно, тег h1 представляет собой заголовок (header) размера 1, это самый большой. Существуют также h2, h3, ... h6, от большого к малому. А также параграф - тег p (paragraph) - это, по нашему, абзац, т.е. текст с новой строки и с небольшим отступом от предыдущего текста.
А также в заголовке вкладки браузера отобразилось содержимое тега <title></title>:
Тег - это такое специальное "слово" в угловых скобках, вот таких <>. Вот, например, браузер при открытии нашего index.html файла увидел тег title, и внутри него текст "Мой первый HTML". Он знает, что текст из title предназначен для того, чтобы дать название вкладке. Так и делает.
Бывают обычные теги. Вот такой, например:
<тег></тег>
Ещё существуют самозакрывающиеся теги, такие:
<самозакрывающийся-тег/>
Самозакрывающиеся теги нужны для краткости, когда нам не нужно ничего помещать внутрь тега. Существует, например, тег <br/>, который просто переносит текст на новую строку и никакая дополнительная информация в нём, очевидно, не нужна.
Полный список существующих тегов можно посмотреть много где, например, вот здесь.
На этом наш первый микро-урок закончим. В следующем поговорим об "атрибутах" тегов.