🧱

Модуль 1. Введение и HTML

Занятие 2
Инструменты и первая страница

Сегодня мы установим редактор VS Code, напишем свою первую настоящую веб-страницу «Привет, мир!» и откроем её в браузере.

👀

Сегодня сделаем вот такое

🧰

Инструменты веб-разработчика

  • 📝 Редактор кода — VS Code: подсвечивает и подсказывает
  • 🌐 Браузер — показывает результат
  • 📁 Папка проекта — дом для всех файлов сайта

Word для кода не подходит — он добавляет невидимый мусор.

⬇️

Устанавливаем VS Code

  1. Спроси разрешения у взрослых 🙋
  2. Открой code.visualstudio.com и нажми Download
  3. Запусти скачанный файл
  4. Прими соглашение → «Далее» → «Установить» → «Завершить»

Скачивай только с официального сайта — так ты не подхватишь вирус.

🇷🇺

VS Code на русском

  1. Нажми Ctrl + Shift + X, откроются расширения
  2. Найди Russian
  3. Russian Language Pack → Install
  4. Change Language and Restart ✅
🇬🇧 File → Open Folder
открыть папку
🇷🇺 Файл → Открыть папку
то же самое
🏷

Как называть файлы

✅ index.html
✅ my-hobby.html
✅ cat-photo.jpg
❌ Моё хобби.html
❌ my hobby.html
❌ Кот.JPG

Латиница, без пробелов, маленькими буквами.

✨

Магия: ! + Tab

  1. Создай файл index.html
  2. Напечатай !
  3. Нажми Tab
  4. Получи готовый каркас страницы 🎉
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>
👋

Привет, мир!

Пишем между <body> и </body>:

  • <h1> — большой заголовок
  • <p> — абзац текста

Программисты всего мира начинают с «Hello, World!»

<h1>Привет, мир! 👋</h1>
<p>Это моя первая веб-страница.</p>
🔄

Цикл разработчика

1️⃣ Написал
код в VS Code
2️⃣ Сохранил
Ctrl + S
3️⃣ Обновил
F5 в браузере

Белый кружок на вкладке = файл НЕ сохранён!

🐞

Частые ошибки

  • Файл называется index.html.txt — включи показ расширений
  • Забыл сохранить — изменений не видно
  • Не закрыл </h1> — весь текст стал огромным
<h1>Забыли закрыть заголовок
<p>И этот абзац тоже огромный!</p>
🃏

Запомни!

  • code.visualstudio.comОфициальный сайт, откуда скачивать VS Code
  • Ctrl + Shift + XРасширения VS Code (русский язык: Russian Language Pack)
  • index.htmlГлавная страница сайта
  • Ctrl + SСохранить файл
  • F5Обновить страницу в браузере
  • ! + TabКаркас HTML в VS Code
  • <h1>Большой заголовок
⌨️

Практика: Пишем первую страницу «Привет, мир!»

  1. С разрешения взрослых установи VS Code по шагам из объяснения и включи русский язык. Нет такой возможности — делай задания во встроенном редакторе на этом сайте.
  2. Создай папку my-site, открой её в VS Code и создай в ней файл index.html.
  3. Напиши заголовок «Привет, мир!» и одну строку о себе.
  4. Открой файл в браузере, поменяй текст, сохрани и обнови страницу.
  5. Повтори то же самое во встроенном редакторе на этом сайте. Сохранить работу на сайте можно только после входа в аккаунт.

🚀 Со звёздочкой: Узнай, что будет, если забыть закрыть тег h1. Найди ещё два полезных сочетания клавиш VS Code.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Повтори самостоятельно: создай файл index.html с приветствием и открой его в браузере.