Урок 01. История HTML/CSS и развитие веб-вёрстки
⚡ Кратко: суть урока
HTML отвечает за смысл и структуру страницы, CSS - за её внешний вид. В начале веба эти роли часто смешивали, но современная вёрстка строится на их разделении.
- Сначала проектируем семантический HTML.
- Потом подключаем отдельный CSS-файл и задаём оформление.
- Для проверки урока достаточно открыть файл напрямую в браузере или через Live Server.
Что запомнить: структура и оформление должны жить отдельно.
Частая ошибка: писать текст, layout и стили в одном месте без системы.
📖 О чём этот урок
Этот урок даёт старт курсу HTML & CSS: показывает, как веб пришёл от простых документных страниц к семантической разметке и отдельным таблицам стилей. Нам важно не запоминать набор дат, а понять логику развития: сначала была структура документа, потом появилась потребность отделить содержание от оформления, а затем браузеры и стандарты закрепили этот подход.
В современном курсе мы будем постоянно возвращаться к одной идее: HTML описывает смысл, CSS - внешний вид. Если задача требует изменения только оформления, HTML обычно не трогаем. Если изменяется смысл блока, меняем именно разметку.
💻 Что покажем в примерах
В примерах урока вы увидите минимальную HTML-страницу, подключение CSS через <link>, работу с простыми селекторами и правилами оформления. Все примеры открываются с диска без сервера.
📝 Практика урока
- Создать папку урока и открыть её в VS Code.
- Собрать простую страницу с заголовком, абзацем и списком.
- Вынести оформление в отдельный файл
style.css.
🐛 На что обратить внимание
Новички часто смешивают контент и оформление, забывают про кодировку UTF-8 или подключают стили абсолютным путём. В этом уроке мы сразу закладываем правильную привычку: всё через относительные пути и с понятной структурой файлов.
🔗 Ресурсы
Официальные ссылки собраны в resources.html. В первую очередь пригодятся MDN, WHATWG HTML Standard, W3C CSS и Live Server/VS Code.
🏠 Домашнее задание
Домашнее задание этого урока начинается с подготовки окружения: VS Code, Live Server или прямое открытие файла, структура папок и проверка результата в браузере. Подробности - в homework.html.
📚 Что повторить перед уроком
- Ничего обязательного: это стартовая тема.
- Полезно помнить, как открыть папку в VS Code и как сохранить файл в UTF-8.
🎯 Что изучать дальше
- → Урок 02: Как работает браузер
- Следом пойдёт тема о DOM, CSSOM и рендеринг-пайплайне.