04. Знакомство с HTML

HTML — это язык, на котором разговаривают сайты. Не пугайся слова «язык» — это не как английский или испанский, это язык для компьютеров, чтобы они понимали, как показать тебе сайт.

Представь, что ты строишь дом. Тебе нужно сказать, где стены, где окна, где дверь. Так же и HTML говорит браузеру:

Вот тут заголовок, вот картинка, а вот кнопка!

Что такое тег

Тег — это как волшебная команда для браузера. Он заключён в угловые скобки < >.

<h1>Привет, я учусь HTML!</h1>

Когда браузер видит такой тег, он понимает: нужно написать большой заголовок! Если ты поменяешь `h1` на `p`, получится абзац:


<p>Это просто текст на странице.</p>

Как работают теги

Почти у всех тегов есть открывающий и закрывающий.
  • Открывающий тег: <h1></h1>
  • Закрывающий тег: </h1> (с косой чертой)
Всё, что между ними — это содержимое тега.

<p>Это предложение находится внутри тега p.</p>

Главные теги страницы

Каждый сайт начинается с набора обязательных тегов — это как скелет для страницы 🦴 

<!DOCTYPE html>
<html>
  <head>
    <title>Мой первый сайт</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ.</p>
  </body>
</html>

Разберём по частям

  • <!DOCTYPE html> — сообщает браузеру, что это HTML5 (новейшая версия).
  • <html> — внутри него весь код сайта.
  • <head> — тут «служебные» вещи: заголовок страницы, шрифты, иконки.
  • <body> — то, что ты видишь: тексты, картинки, кнопки.

Как это выглядит в браузере

Скопируй этот код в блокнот, сохрани файл как index.html и открой его в браузере: 

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Мой первый сайт</title>
  </head>
  <body>
    <h1>Привет, IT-герой!</h1>
    <p>Я только что создал свою первую веб-страницу!</p>
  </body>
</html>
Ты увидишь белую страницу с большим заголовком и текстом — это и есть твой сайт!

Мини-игра: найди ошибку

Вот пример с ошибкой: 

<p>Привет, я учусь HTML!</h1>
Что не так? Правильно! Тег открылся как `p`, а закрылся как `h1`. Теги должны совпадать!

Дополнительные интересные теги

  • <b> — делает текст жирным.
  • <i> — делает текст наклонным.
  • <a href="..."> — создаёт ссылку.
  • <img src="..."> — вставляет картинку.
Попробуй написать небольшой рассказ, где каждое предложение выделено по-разному.

Забавный факт

Первый сайт в мире был создан в 1991 году! Он всё ещё существует — на нём объясняется, как работает Интернет. И да, он написан на HTML

Главное запомни

  • HTML — это язык, который говорит браузеру, как показать страницу.
  • Теги — это команды в угловых скобках < >.
  • У большинства тегов есть открывающая и закрывающая часть.
  • <html>, <head>, <body> — это основа любой страницы.

Мини-задание

Создай свой первый сайт с заголовком и текстом! Напиши: 

<h1>Мой первый сайт!</h1>
<p>Я начинаю путь программиста.</p>
Сохрани как index.html и открой его — ты уже веб-разработчик!
Следующий урок → Первая страница