<p>Моя идея</p>Тег — отметка, элемент — вся конструкция
Вспомни коробку с содержимым. <p> отмечает начало, </p> — конец, а «Моя идея» лежит между ними. Две отметки называются тегами. Вся конструкция вместе с текстом — элемент p, то есть абзац.
Начнём с твоего уровня.
12 заданий помогут выбрать полезный старт.
УРОК 01 · HTML
~ 30 минПервая страница — четыре маленьких шага
Одна часть за раз. Можно остановиться и продолжить позже.
Слово наставника
Настроить тон →Часть 1 из 4
Прочитай шесть строк
~ 5 минHTML размечает смысл текста. <p> и </p> — теги начала и конца. Теги вместе с текстом между ними — элемент. Как коробка с содержимым: открыли, положили текст, закрыли. Разберём такие коробки по одной строке.
h1 — заголовок · p — абзац · ul — список · li — пункт
Выбери строку, чтобы увидеть её роль. Enter сам по себе не добавляет пункт списка.
Как это выглядит в браузере
h1 — главный заголовок страницы. / в </h1> закрывает его.
Почему именно так
h1 сообщает роль текста, а не обещает определённый размер букв. Заголовок можно оформить мелким шрифтом: он останется заголовком. / ставим перед тем же именем h1, чтобы обозначить конец.
Нужен разбор терминов?
<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>Теперь твои руки на клавиатуре
10 МИНУТ · ПОПРОБОВАТЬ01
Представь свой первый проект
Расскажи о своей идее: что хочешь сделать и с чего начнёшь.
- Ровно один h1 с текстом «Мой первый проект».
- В p объясни свою идею: не менее 12 букв или цифр. Пробелы и знаки не считаются.
- В ul — ровно три соседних li непосредственно внутри списка. В каждом — шаг из 3 или более букв/цифр. Текст шагов помещай в li.
index.htmlHTML
Результат в браузере● предпросмотр
Предпросмотр обновляется после проверки. Учебный код остаётся в вашем браузере.
Хотели получить один список с одним пунктом, но li оказался снаружи. Какая правка восстановит нужную вложенность?
<ul>
</ul>
<li>Измерить стену</li>Код работает. А почему?
ОБЪЯСНИТЬПРОВЕРКА ПОНИМАНИЯ
Зачем заголовку нужен тег h1?
Сначала выполни задание и ответь на вопрос.
Сделай свой список чтения
~ 10 мин02
Те же теги, новая задача
Собери список того, что хочешь прочитать. Сначала попробуй без образца.
- Ровно один h1: придумай заголовок списка чтения, не менее 3 букв или цифр.
- В p объясни, зачем тебе этот список: не менее 12 букв или цифр. Пробелы и знаки не считаются.
- Один ul с ровно тремя li внутри: названия книг, статей или тем, каждое от 3 букв/цифр. Без вложенных или внешних li и текста между пунктами.
reading-list.htmlHTML
Твой список в браузере
Предпросмотр обновится после проверки.
Зачем отдельный li для каждой книги? Что изменится, если оставить только переносы строк?
Личная заметка сохраняется в браузере. Автоматической оценки нет.
Сравнить с вопросами для самопроверки
- Объяснил ли ты, что ul объединяет весь список, а каждый li обозначает один отдельный пункт?
- Что будет, если убрать li и оставить названия на разных строках внутри ul? Текст может остаться видимым, но отдельных пунктов списка больше не будет.
- Понятно ли по h1 и p, что и зачем ты собираешься читать? Это оцениваешь ты: автоматическая проверка видит структуру и длину текста.
На следующий раз: 2 вопроса для повторения
Сначала ответь по памяти, затем открой пояснение.
В <p>Моя идея</p> сколько тегов и сколько элементов?
Два тега — <p> и </p>. Они вместе с текстом образуют один элемент p. Слова «Моя идея» — содержимое, а не ещё один тег.
Внутри одного li дважды нажали Enter. Сколько теперь пунктов?
Один. Появились переносы в исходном коде, но новых элементов li нет. Чтобы добавить пункт, нужен ещё один li внутри общего ul.
Как попросить ИИ о полезной подсказке
«Не пиши решение. Задай один вопрос, который поможет мне найти ошибку». После подсказки объясни исправление своими словами.
К данным.
С крепкой основой.
Коротко закрепим веб, затем перейдём к Python и анализу. Темп зависит от практики, а не от даты в календаре.
Сейчас доступны первый урок HTML с разбором и самостоятельная задача на список для чтения. Следующие ступени — план, а не готовый каталог. PHP и углублённый веб будут отдельной веткой.
Твой рост
виден в делах.
Что уже проверено
Полоса показывает выполненные действия в стартовом модуле, а не процент владения языком.
HTML · структура страницы0 / 3
Python · работа с даннымиПрактика впереди
SQL · запросы к таблицамПрактика впереди
Как применяешь объяснения
Это результаты трёх конкретных заданий. Правильный ответ хотя бы раз отмечает выполненное действие; он не доказывает владение HTML. Старые достижения сохранены.
Предсказание · ошибка · новая задача0 / 3
- Предсказал число пунктовЕщё не выполнено
- Нашёл причину ошибкиЕщё не выполнено
- Собрал новый списокЕщё не выполнено
Твоя коллекция маленьких побед
Первая строка
Изменить код и запустить проверку
Ещё впередиВсё по полочкам
Собрать правильную структуру
Ещё впередиСтраница и роль li
Собрать страницу и распознать роль li
Ещё впередиНаставник
с характером.
Как с тобой говорить
По желанию. Подкалываем отговорки, не унижаем человека. Можно выключить в любой момент.
После перерыва
Ничего не сгорит. Вернись к примеру на пять минут, потом продолжай с сохранённого места.
Твой прогресс — у тебя
Код, режим и достижения хранятся только в этом браузере. На телефоне будет отдельный прогресс. Для переноса скачай резервную копию и открой её на другом устройстве.
Очистка данных сайта удаляет локальный прогресс. Email и регистрация сейчас не нужны.