01

Структура документа

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

Цель: изучить принципы работы с макетом, закрепить основы языка разметки 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. Скачать Шрифты для проектов

  4. Получить задание на Github Classroom, клонировать полученный репозиторий на компьютер и приступить к работе.

  5. Создать файл index.html и сформировать в нем корректную структуру документа в соответствии с макетом. Корректность определяется соответствием использованных тегов их семантике и отсутствием ошибок на валидаторе. В этой работе требуется только создать структуру, стили и изображения будут добавлены в будущих работах.

  6. По мере работы необходимо делать коммиты и отправлять изменения на удаленный репозиторий на github classroom.

  7. Загрузить работу на Render.

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

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

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

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

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

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

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

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