← Вернуться к меню заданий

Упражнение 1: HTML5 структура и CSS-блоки

Создайте полный HTML-документ, подключите CSS-файл и оформите блочную структуру по образцу.

1. Образец макета и параметры

HEADER | Цвет: #e74c3c | width: 100%, height: 60px

NAV | Цвет: #3498db | width: 100%, height: 40px

MAIN
Цвет: #2ecc71
width: 68%, height: 140px
float: left

ASIDE
Цвет: #f1c40f
width: 30%, height: 140px
float: right

FOOTER | Цвет: #9b59b6 | width: 100%, height: 50px | clear: both

Требования к выполнению:

HTML: Введите полный каркас страницы (<!DOCTYPE html>, <html>, <head>, <body>).
Подключение CSS: В секции <head> добавьте тег <link rel="stylesheet" href="style.css">.
Семантика: Разместите в <body> теги <header>, <nav>, <main>, <aside>, <footer>.
CSS-стили: Задайте размеры (`width`, `height`), фоновые цвета (`background-color`), свойства `display`, `float` и `clear`.

2. Ввод кода

3. Результат предпросмотра

Заполните поля и нажмите «Проверить и запустить», чтобы увидеть рендер страницы.