Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 2

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

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

Изучаем: Установка редактора VS Code, файл index.html, браузер
Результат: Пишем первую страницу «Привет, мир!»

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

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

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

💡 Объяснение

Чем пишут код

Написать HTML можно даже в «Блокноте», но программисты используют редакторы кода. Они подсвечивают теги разными цветами, подсказывают названия, сами закрывают теги и помогают находить ошибки. Самый популярный бесплатный редактор — Visual Studio Code (коротко VS Code).

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

Как установить VS Code

VS Code бесплатный, регистрироваться для него не нужно. Установка программ меняет настройки компьютера, поэтому сначала спроси разрешения у взрослых. Лучше устанавливать вместе с ними.

Шаг 1. Скачай установщик. Открой официальный сайт code.visualstudio.com и нажми большую синюю кнопку Download. Сайт сам определит твою систему. Не скачивай VS Code с других сайтов: под видом редактора там может оказаться вирус.

Шаг 2. Установи программу. Порядок зависит от системы.

  • Windows. Запусти скачанный файл VSCodeUserSetup-….exe. Отметь «Я принимаю соглашение» и нажимай «Далее». На шаге «Дополнительные задачи» поставь галочки «Добавить действие „Открыть с помощью Code“» для файлов и для папок. Так любую папку можно будет открыть в VS Code правой кнопкой мыши. Потом нажми «Установить», а затем «Завершить».
  • macOS. Скачается архив .zip. Дважды щёлкни по нему и перетащи появившуюся программу Visual Studio Code в папку «Программы». При первом запуске нажми «Открыть», если система спросит, доверяешь ли ты программе.
  • Linux. Скачай пакет .deb для Ubuntu и Mint или .rpm для Fedora и открой его двойным щелчком. Ещё проще найти VS Code в «Центре приложений» твоей системы.

Шаг 3. Включи русский язык. Если на компьютере русская система, VS Code при первом запуске сам предложит поставить русский язык: нажми Install and Restart. Если не предложил:

  1. нажми Ctrl+Shift+X (на Mac Cmd+Shift+X), откроется панель Extensions (расширения);
  2. в поиске напиши Russian;
  3. выбери Russian Language Pack for Visual Studio Code от Microsoft и нажми Install;
  4. нажми Change Language and Restart, и редактор перезапустится уже на русском.

Меню на английском — тоже не беда, в нём всего несколько нужных пунктов: File → Open Folder (открыть папку), File → Save (сохранить).

Шаг 4. Проверь. Запусти VS Code. Появится экран приветствия (Welcome), его можно закрыть крестиком. Если ты видишь тёмное или светлое окно с меню «Файл» сверху, всё получилось.

Нет своего компьютера или установить не разрешили? Например, если у тебя планшет, Chromebook или чужой компьютер. Ничего страшного: все задания курса можно делать во встроенном редакторе на этом сайте. К VS Code вернёшься, когда появится возможность.

Папка проекта

Сайт — это папка с файлами. Поэтому сначала создаём папку, например my-site, и работаем только в ней. Правила имён для файлов и папок сайта:

  • только латинские буквы, цифры, дефис - и подчёркивание _;
  • без пробелов и русских букв: my-hobby.html — хорошо, Моё хобби.html — плохо;
  • лучше маленькими буквами — на серверах Photo.jpg и photo.jpg могут быть разными файлами.

Первый файл: index.html

Главную страницу сайта принято называть index.html. Когда человек заходит на сайт, сервер по умолчанию показывает именно её. Окончание .html называется расширением — оно говорит компьютеру, что внутри HTML-документ и открывать его нужно в браузере.

Порядок работы в VS Code:

  1. Файл → Открыть папку → выбираем my-site.
  2. В боковой панели нажимаем значок «Новый файл» и пишем имя index.html.
  3. В пустом файле печатаем восклицательный знак ! и нажимаем Tab (или Enter) — появится готовый каркас страницы. Эта «магия» называется Emmet.
  4. Между <body> и </body> пишем свой текст.
  5. Сохраняем: Ctrl+S. Если на вкладке файла горит белый кружок — файл не сохранён!

Как посмотреть результат

Открой папку проекта в проводнике и дважды щёлкни по index.html — файл откроется в браузере. В адресной строке будет не адрес в интернете, а путь на компьютере, например file:///C:/my-site/index.html. Это нормально: сайт пока живёт только у тебя.

Дальше работаем по циклу «написал → сохранил → обновил»:

  1. меняем код в VS Code;
  2. сохраняем Ctrl+S;
  3. переключаемся в браузер и обновляем страницу F5.

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

Встроенный редактор на этом сайте

На каждом занятии есть редактор: слева код, справа результат, который обновляется сам. Это удобно для тренировки, но настоящие проекты мы будем делать в VS Code, чтобы научиться работать как профессионалы.

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

  • Файл назван index.html.txt — Windows скрыла «лишнее» расширение. Включи показ расширений в проводнике.
  • Код написан вне <body> — лучше всегда писать внутри.
  • Забыт закрывающий тег — и весь текст ниже стал заголовком.

Проверь себя

  1. Почему главная страница называется index.html?
  2. Какие три шага нужно сделать, чтобы увидеть изменения в браузере?
  3. Почему файл нельзя назвать Мой сайт.html?

⌨️ Практика

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

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

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

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход