Твоя мастерская / Сегодня
EN ↗✦ 0 XP
ПРАКТИКА ВМЕСТО «КОГДА-НИБУДЬ»

Сегодня ты
сделаешь страницу.

Одна понятная задача. Несколько строк кода.
Результат, который можно объяснить самому.

ТВОЙ РИТМ30мин8 + 10 + 5 + 7 минут

Планы хорошие. Теперь открой редактор и напиши первую строку.

↗
СТУПЕНЬ 01 · ВЕБ-ОСНОВЫ

У страницы есть скелет

Разберём заголовок, абзац и список.
Соберём из них начало твоего проекта.

Разобраться по шагам ↗
ПЛАН НА СЕГОДНЯ
  1. 01Понять идеюПрочитать и посмотреть8 мин
  2. 02Написать кодПроверить и исправить10 мин
  3. 03Объяснить себеЗакрепить без подсказки5 мин

Ещё 7 минут — новая задача:
свой список для чтения.

Маленькая теория. Большой смысл.

ПОНЯТЬ
⌂

Как объявление у подъезда

HTML помогает браузеру понять, где заголовок, где обычный текст, а где список. Как подписи на коробках: «посуда», «книги», «инструменты».

</>

Посмотри на маленький пример

<h1>План на выходные</h1>
<p>Соберу полку для книг.</p>

Открывающий тег начинает элемент. Закрывающий, со знаком /, завершает его.

!

Ошибка — часть работы

Если написать заголовок обычным текстом, браузер его покажет. Но он не узнает, что это главный заголовок. Нужен тег h1.

Сначала прочитаем код, потом будем его менять

8 минут · разобраться

Ты разберёшь, где начинается и заканчивается элемент HTML, объяснишь каждую строку примера и соберёшь новый список без готового решения.

<p>Моя идея</p>

Тег — отметка, элемент — вся конструкция

Вспомни коробку с содержимым. <p> отмечает начало, </p> — конец, а «Моя идея» лежит между ними. Две отметки называются тегами. Вся конструкция вместе с текстом — элемент p, то есть абзац.

<h1>Заголовок</h1>

Косая черта закрывает

В открывающем теге пишем <h1>. В закрывающем добавляем / перед именем: </h1>. Имя остаётся тем же. В этом уроке явно закрываем h1, p, ul и li: так проще видеть их границы. Позже встретятся элементы, которым закрывающий тег не нужен.

<h1>Мастерская</h1> <p>Здесь я собираю полки.</p>

Сначала смысл, затем внешний вид

h1 обозначает главный заголовок нашей страницы, p — абзац с объяснением. Браузер обычно показывает их по-разному, но размер шрифта можно изменить стилями. Выбирай h1 потому, что это заголовок, а не потому, что нужны крупные буквы.

<ul> <li>Рулетка</li> <li>Карандаш</li> </ul>

Список — коробка, пункты — содержимое

ul объединяет ненумерованный список. Каждый li внутри него — отдельный пункт. Здесь два li, значит два пункта. Такой список подходит, когда перестановка пунктов не меняет смысл; обязательный порядок позже обозначим с помощью ol.

<ul> <li>Измерить стену</li> </ul>

Вложенность: закрываем изнутри наружу

li находится внутри ul, как маленькая коробка в большой. В наших примерах сначала закрываем </li>, затем </ul>. Пробелы слева помогают тебе увидеть вложенность. Саму связь создают теги, а не эти пробелы.

<li>Книга о космосе и заметки о звёздах</li>

Enter не создаёт новый пункт

Здесь текст занимает две строки в редакторе, но обе находятся в одном li. Значит, пункт один. Переносы и отступы делают исходный код удобнее для чтения; отдельный пункт списка появляется, когда ты добавляешь отдельный элемент li.

Прочитаем пример строка за строкой
  1. <h1>Мастерская на балконе</h1>

    Строка 1. Открываем главный заголовок, пишем тему страницы и закрываем заголовок. Слова можно заменить, сохранив пару тегов.

  2. <p>Здесь я собираю простые полки и записываю размеры.</p>

    Строка 2. Это отдельный абзац: он объясняет, что происходит в мастерской. Он стоит после h1, а не внутри него.

  3. <ul>

    Строка 3. Начинаем список возможных дел. Пока мы открыли только общую коробку; отдельного пункта ещё нет. Здесь не задаём обязательную очерёдность работ.

  4. <li>Нарисовать полку</li>

    Строка 4. Первый пункт целиком находится внутри ul. Открыли li, написали одно дело, закрыли li. Два пробела слева помогают читать код.

  5. <li>Измерить стену</li>

    Строка 5. Создаём второй пункт, соседний с первым. Он находится в том же ul, но не внутри предыдущего li: предыдущий пункт уже закрыт.

  6. </ul>

    Строка 6. Закрываем весь список. В примере два пункта; в твоём первом задании понадобятся три. Считай элементы li, а не строки редактора.

ПРЕДСКАЖИ РЕЗУЛЬТАТ

Не запуская код, предскажи: сколько пунктов в этом списке?

<ul>
  <li>Книга о космосе
      и заметки о звёздах</li>
  <li>Сборник рассказов</li>
</ul>

Теперь твои руки на клавиатуре

10 МИНУТ · ПОПРОБОВАТЬ
01

Представь свой первый проект

Создай один h1 «Мой первый проект», абзац о своей идее (не меньше 12 букв или цифр) и список ul из трёх пунктов li — шагов к результату. В каждом пункте хотя бы 3 буквы или цифры.

В этом упражнении достаточно тегов без атрибутов. Никаких установок и ключей API.
index.htmlHTML
Черновик сохраняется в браузере
Результат в браузере● предпросмотр

Предпросмотр обновляется после проверки. Учебный код остаётся в вашем браузере.

Ошибаться можно. Очки не отнимаются.
НАЙДИ ПРИЧИНУ · 5 МИНУТ

Хотели получить один список с одним пунктом, но li оказался снаружи. Какая правка восстановит нужную вложенность?

<ul>
</ul>
<li>Измерить стену</li>

Код работает. А почему?

ОБЪЯСНИТЬ
ПРОВЕРКА ПОНИМАНИЯ

Зачем заголовку нужен тег h1?

Сначала выполни задание и ответь на вопрос.

Самостоятельно: список для чтения

7 минут · применить
02

Новая задача на знакомых тегах

Собери с пустого поля страницу о том, что хочешь прочитать. Придумай один понятный заголовок h1 — не менее 3 букв или цифр. Добавь p: объясни, зачем собираешь этот список, используя не менее 12 букв или цифр. Ниже создай один ul с ровно тремя прямыми пунктами li: в каждом назови книгу, статью или тему, не менее 3 букв или цифр. Ссылки пока не нужны. Сначала попробуй по памяти; подсказки можно открыть в любой момент.

Можешь вернуться к разбору. Намёки открываются по одному; очки не отнимаются.
reading-list.htmlHTML
Твой список в браузере

Предпросмотр обновится после проверки.

Почему каждая книга находится в отдельном li? Что изменится, если оставить только переносы строк? Запиши ответ до раскрытия самопроверки.

Ответ сохраняется вместе с прогрессом в этом браузере. Автоматической оценки текста нет.

Сравнить с вопросами для самопроверки
  • Объяснил ли ты, что ul объединяет весь список, а каждый li обозначает один отдельный пункт?
  • Что будет, если убрать li и оставить названия на разных строках внутри ul? Текст может остаться видимым, но отдельных пунктов списка больше не будет.
  • Понятно ли по h1 и p, что и зачем ты собираешься читать? Это оцениваешь ты: автоматическая проверка видит структуру и длину текста.
ЗАВТРА · ВСПОМНИ ЗА 2 МИНУТЫ

Сначала ответь без подсказки

Если забыл — открой пояснение, закрой его и ответь ещё раз. Это короткая разминка перед следующим занятием.

Без подсказки: чем тег отличается от элемента?

В <p>Текст</p> теги — <p> и </p>. Весь фрагмент вместе с содержимым — элемент p.

В одном li текст перенесли на три строки. Сколько получилось пунктов?

Один. Переносы строк внутри li не создают дополнительные элементы li.

Почему мы выбираем h1 для темы страницы, даже если хочется маленький шрифт?

h1 сообщает роль заголовка. Размер шрифта относится к оформлению; его можно менять, сохранив смысл элемента.

Если пункт написан после </ul>, помогут ли пробелы слева поместить его внутрь списка?

Нет. В наших примерах пункт должен находиться между <ul> и </ul>. Отступы только помогают увидеть эту связь.

ЕСЛИ ЗОВЁШЬ ИИ НА ПОМОЩЬ

Попроси намёк, затем проверь.

Сначала попробуй сам. Затем попроси: «Не пиши решение. Задай один вопрос, который поможет мне найти ошибку». Сравни подсказку с кодом и результатом в браузере. Закрой ответ и объясни исправление своими словами.

Учись делать. Проверяй. Объясняй.Разбор и самостоятельная практика · v0.2