Формирование структуры документа по макету

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

Порядок выполнения лабораторной работы:

1. Изучить основные теги языка разметки HTML: html, head, title, body, header, nav, h1-h6, main, section, footer, form, input, button, p, a, img, ul, ol, li, hr, q, blockquote и атрибуты, связанные с соответствующими тегами.
2. Скачать макет согласно варианту в ведомости и импортировать его на figma.com. Ссылка на макеты.
3. Получить задание на Github Classroom, клонировать полученный репозиторий на компьютер и приступить к работе.
4. Создать файл index.html и сформировать в нем корректную структуру документа в соответствии с макетом. Корректность определяется соответствием использованных тегов их семантике и отсутствием ошибок на валидаторе. В этой работе требуется только создать структуру, стили и изображения будут добавлены в будущих работах.
5. По мере работы необходимо делать коммиты и отправлять изменения на удаленный репозиторий на github classroom.
6. Загрузить работу на netlify.

Требования к index.html:

1. Корректное использование тегов;
2. Отсутствие ошибок на валидаторе;
3. Удобочитаемый код (отформатированный);

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.

Дополнительные источники

• doka.guide
• MDN основы
• Элементы HTML
• Проверка тегов и свойств на степень внедрения
• Проверка тегов на возможность вложения
• Emmet в VS Code
• Chrome DevTools

Вопросы для защиты

1. Что такое HTML?
2. Что такое тег/атрибут/значение?
3. Для чего используется тег имя тега?
4. Зачем нужен DOCTYPE?
5. Как отличить кнопку от ссылки?

Задать вопрос наставнику