Формирование структуры документа по макету
Цель: изучить принципы работы с макетом, закрепить основы языка разметки HTML, приобрести навыки использования системы контроля версий и выгрузки работы на сервер.
Порядок выполнения лабораторной работы:
- Изучить основные теги языка разметки HTML: html, head, title, body, header, nav, h1-h6, main, section, footer, form, input, button, p, a, img, ul, ol, li, hr и атрибуты, связанные с соответствующими тегами.
- Скачать макет согласно варианту в ведомости и импортировать его на figma.com. Ссылка на макеты.
- Получить задание на Github Classroom, клонировать полученный репозиторий на компьютер и приступить к работе в папке src/html.
- Открыть файл index.html и сформировать в нем корректную структуру документа в соответствии с макетом. Корректность определяется соответствием использованных тегов их семантике и отсутствием ошибок на валидаторе. В этой работе требуется только создать структуру, стили и изображения будут добавлены в будущих работах.
- По мере работы необходимо делать коммиты и отправлять изменения на удаленный репозиторий на github.
- Загрузить работу на сервер fit.mospolitech.ru.
Требования к index.html:
- Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
- Корректное использование тегов;
- Отсутствие ошибок на валидаторе;
Результаты выполнения лабораторной работы:
Результаты работы проверены наставником.
Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.
Дополнительные источники
- MDN основы
- Элементы HTML
- Справочная информация
- Проверка тегов и свойств на степень внедрения
- Проверка тегов на возможность вложения
- Emmet в VS Code - https://habr.com/ru/post/573032/
- Chrome DevTools - https://habr.com/ru/post/548898/
- VS Code - https://code.visualstudio.com/, полезные расширения: Live Server, Path Intellisense, Prettier
- Git - https://git-scm.com/
Вопросы для защиты
- Что такое HTML?
- Что такое тег/атрибут/значение?
- Для чего используется тег имя тега?
- Зачем нужен DOCTYPE?
- Как отличить кнопку от ссылки?