Урок 1. Введение в HTML ← Уроки по HTML

Урок 1. Что такое HTML и как работает веб

Темы. Как браузер рендерит страницы, отличие HTML/CSS/JS, где писать код, установка VS Code + Live Server

Практика. Создать файл index.html, открыть в браузере, увидеть первое изменение

Если разбираться в коде не хочется, а сайт нужен уже завтра → оставьте заявку. Мы берём техническую часть на себя.

Подробный конспект

1. Что такое HTML?

HTML (HyperText Markup Language) — это язык разметки, на котором написаны все веб-страницы. Он описывает структуру страницы: что является заголовком, что абзацем, что ссылкой, что картинкой.

HTML — это не язык программирования. В нём нет логики, условий или циклов. Это набор тегов, которые браузер умеет читать и отображать.

2. Как браузер рендерит страницу?

Когда ты вводишь адрес сайта, происходит следующее:

  1. Браузер отправляет запрос на сервер
  2. Сервер возвращает HTML-файл
  3. Браузер читает HTML сверху вниз и строит DOM (Document Object Model) — дерево элементов
  4. Если есть CSS — применяет стили к элементам
  5. Если есть JS — выполняет скрипты
  6. Пользователь видит готовую страницу

3. Отличие HTML / CSS / JS

Технология Отвечает за Пример
HTML Структура и содержимое Заголовок, абзац, кнопка
CSS Внешний вид и стили Цвет, шрифт, отступы
JS Поведение и интерактивность Клики, анимации, запросы

4. Как устроен HTML-тег?

Тег — это основная единица HTML. Большинство тегов парные: открывающий и закрывающий.

<p>Это абзац текста</p>
  • <p> — открывающий тег
  • Это абзац текста — содержимое
  • </p> — закрывающий тег

Некоторые теги одиночные (самозакрывающиеся):

<br>   <!-- перенос строки -->
<img src="photo.jpg" alt="Фото">  <!-- изображение -->

Теги могут иметь атрибуты — дополнительные параметры:

<a href="https://google.com" target="_blank">Перейти в Google</a>

5. Установка инструментов

VS Code — самый популярный редактор кода:

  1. Скачай с code.visualstudio.com
  2. Установи расширение Live Server (Ritwick Dey) в разделе Extensions
  3. Открой папку проекта через File → Open Folder

Live Server автоматически обновляет страницу в браузере при каждом сохранении файла. Это позволяет видеть изменения в реальном времени.

6. Первый HTML-файл

Создай файл index.html и напиши:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая веб-страница.</p>
</body>
</html>

Нажми правой кнопкой на файл → Open with Live Server — и страница откроется в браузере.

7. Что значит каждая строка?

  • <!DOCTYPE html> — говорит браузеру, что это современный HTML5
  • <html lang="ru"> — корневой элемент, lang задаёт язык страницы
  • <head> — невидимая часть: настройки, мета-данные, подключение файлов
  • <meta charset="UTF-8"> — кодировка (чтобы русский текст отображался корректно)
  • <title> — заголовок вкладки браузера
  • <body> — всё, что видит пользователь на странице
  • <h1> — заголовок первого уровня
  • <p> — абзац текста

Частая ошибка: забыть закрывающий тег. Браузер иногда это прощает, но такой код считается невалидным. Всегда закрывай то, что открываешь.

Чек-лист