Твоя мастерская / Сегодня
EN 0 XP
УРОК 01 · HTML

Первая страница — четыре маленьких шага

Одна часть за раз. Можно остановиться и продолжить позже.

~ 30 мин
Слово наставника

Настроить тон →

Часть 1 из 4

Прочитай шесть строк

~ 5 мин

HTML размечает смысл текста. <p> и </p> — теги начала и конца. Теги вместе с текстом между ними — элемент. Как коробка с содержимым: открыли, положили текст, закрыли. Разберём такие коробки по одной строке.

h1 — заголовок · p — абзац · ul — список · li — пункт

Выбери строку, чтобы увидеть её роль. Enter сам по себе не добавляет пункт списка.

Как это выглядит в браузере

h1 — главный заголовок страницы. / в </h1> закрывает его.

Почему именно так

h1 сообщает роль текста, а не обещает определённый размер букв. Заголовок можно оформить мелким шрифтом: он останется заголовком. / ставим перед тем же именем h1, чтобы обозначить конец.

Нужен разбор терминов?
<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.

ПРОВЕРЬ СВОЙ ПРОГНОЗ

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

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

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