Урок 1. Браузер как редактор

Браузер — это уже среда разработки

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

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

Открыть инструменты разработчика

В Chrome, Edge, Яндекс.Браузере, Opera — одинаково:

F12 — самый быстрый способ
Ctrl + Shift + I — то же самое
Ctrl + Shift + J — сразу открывает консоль
Ctrl + Shift + C — режим выбора элемента

Совет: откройте DevTools прямо сейчас и не закрывайте их во время урока. Всё, что мы разберём, можно тут же проверить на этой странице.

Что внутри: панели

Панелей много, но на старте нужны три:

Elements — HTML-структура страницы. Видно, из чего состоит документ.
Console — сообщения об ошибках и вывод скриптов.
Sources — все файлы, которые загрузила страница: HTML, CSS, картинки.

Остальные — Network, Application, Performance — понадобятся позже. Пока их можно не трогать.

Правка HTML прямо в браузере

В панели Elements двойной клик по любому тегу или тексту открывает его для редактирования. Можно поменять текст, добавить атрибут, удалить блок — страница обновится мгновенно.

Важно: правки живут только до перезагрузки. Как только нажмёте F5 — всё вернётся к исходному файлу. Это не баг, это фича: DevTools — для экспериментов, файл — для постоянного кода.

Попробуйте: откройте Elements, найдите заголовок этой страницы, поменяйте текст. Потом нажмите F5 и убедитесь, что вернулось.

Правка CSS прямо в браузере

Справа от HTML в Elements — панель Styles. Там показаны все CSS-правила, которые применяются к выбранному элементу. Можно менять значения, добавлять свойства, отключать галкой — и сразу видеть результат.

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

Открыть локальный файл

Чтобы открыть HTML-файл из файловой системы — просто перетащите его в окно браузера или используйте Ctrl + O. В адресной строке появится что-то вроде:

file:///C:/Users/Ученик/it-class/lessons/web-01.html

Это и есть режим file:// — основной режим работы нашего курса. Никакого сервера, никаких установок, всё сразу.

Редактор кода

Браузер умеет показывать и править, но не умеет сохранять. Для сохранения нужен редактор кода: VS Code, Notepad++, Sublime Text. Любой из них. Главное — не «Блокнот»: в нём нет подсветки синтаксиса и отступов.

Рабочий цикл простой: правим в редакторе → сохраняем (Ctrl + S) → в браузере нажимаем F5 → смотрим результат. Если что-то непонятно — открываем DevTools и проверяем.

Первый плейграунд

В этом курсе почти каждый пример — интерактивный. Код можно открыть в редакторе, поменять и запустить, не выходя со страницы. Попробуйте:

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

Нажмите «Открыть в редакторе» — увидите полное окно с кодом слева и результатом справа. Поменяйте текст заголовка, нажмите «Запустить». Затем закройте окно — и попробуйте снова: браузер запомнит правку.

Что дальше

Мы разобрались с инструментами. В следующем уроке — сам HTML: структура документа, теги, атрибуты и первые осмысленные страницы.