Урок 1.2 · Интерфейсы и сайты с нуля · Модуль 1. Первые шаги в интерфейсе · Бесплатно
Цель урока: Написать первый HTML-код, понять теги, вложенность и увидеть результат на экране справа.
Нужно знать заранее: Урок 1.1
Зачем это нужно: Страница в браузере — это текст с пометками. Пометки называются тегами, и они объясняют браузеру, что это за текст: заголовок, абзац, кнопка или картинка. Без тегов браузер видит просто набор слов и не знает, что с ним делать.
Как это работает: Тег пишется в угловых скобках и почти всегда идёт парой: открывающий <h1> и закрывающий </h1>. Всё, что стоит между ними, — содержимое. Заголовков шесть уровней: <h1> самый крупный (обычно один на страницу), <h2> меньше, и так до <h6>. Обычный текст — это абзац <p>. Внутри абзаца можно выделить слово тегом <strong> (жирный) или <em> (курсив). Теги можно вкладывать друг в друга, но не пересекать: <p><strong>Привет</strong></p> — правильно, <p><strong>Привет</p></strong> — нет.
Пример с разбором: <h1>Меню игры</h1> <p>Выберите, что делать дальше.</p> <p>Управление: <strong>стрелки</strong> и <em>пробел</em>.</p> Браузер прочитает первую строку как крупный заголовок, вторую — как обычный абзац, а в третьей выделит слова. Никакого оформления мы пока не задавали: это стандартный вид браузера.
Разбор по шагам: 1. Напишите <h1> — браузер ждёт заголовок. 2. Напишите текст внутри. 3. Закройте тег: </h1>. Если забыть закрыть, браузер может «съесть» весь текст ниже. 4. Повторите для абзаца: <p>…</p>.
Частая ошибка: Забыть косую черту в закрывающем теге: <h1>Привет<h1> вместо </h1>. Или перепутать порядок: <h1>Привет</p>. В превью это сразу видно — текст становится не таким, как ожидалось. Ещё одна ошибка — несколько <h1> на одной странице: главный заголовок должен быть один, остальные — <h2> и ниже.
Важно: Браузер прощает часть ошибок и всё равно что-то показывает. Поэтому «на экране видно» не значит «сделано правильно». Смотрите на превью и проверяйте, что структура читается: заголовок, потом абзацы, потом следующий заголовок.
Проверь себя: Какой тег у главного заголовка? <h1>. Какой тег у обычного абзаца? <p>. Что будет, если не закрыть тег? Браузер может неправильно понять, где заканчивается текст.
Итог: Заголовок и абзац — два самых частых тега на любой странице. С них начинается любая вёрстка.
Что дальше: В уроке 1.3 — кнопка и первое правило CSS.
<h1>Меню игры</h1>
<p>Выберите, что делать дальше.</p>
<p>Управление: <strong>стрелки</strong> и <em>пробел</em>.</p>Сделайте страницу про себя: заголовок <h1> с вашим именем или приветствием и абзац <p> с одной фразой о том, зачем вам интерфейсы. Заголовок на странице должен быть один.
Критерий успеха: На странице один непустой заголовок <h1> и хотя бы один абзац <p> с текстом.