Лабораторная работа 3 "Создание семантической HTML-разметки"
1. ЦЕЛЬ РАБОТЫ
Освоение принципов семантической HTML-разметки, основ веб-доступности и микроразметки Schema.org. Формирование навыков создания валидной, структурированной HTML-разметки на основе дизайн-макетов Figma.
2. НЕОБХОДИМЫЕ ЗНАНИЯ
Для успешного выполнения работы студент должен знать:
-
Базовую структуру HTML5-документа
-
Основные HTML-теги и их назначение
-
Понятие семантической верстки
-
Основы работы с Figma для анализа макетов
-
Принципы валидации HTML-разметки
3. ЗАДАЧИ РАБОТЫ
-
Проанализировать дизайн-макет в Figma и выделить семантические блоки.
-
Создать семантическую HTML-разметку согласно макету из Figma.
-
Применить современные семантические теги HTML5.
-
Обеспечить базовую доступность с помощью атрибутов alt и правильной структуры.
-
Добавить базовую микроразметку Schema.org.
-
Проверить валидность созданной разметки.
4. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ (Общий для всех вариантов)
Часть 1. Подготовка проекта и работа с Figma
-
Перейдите в рабочую ветку:
git checkout main git pull origin main git checkout -b feature/semantic-markup
-
Анализ дизайн-макета в Figma:
-
Откройте макет вашего проекта в Figma
-
Изучите структуру макета, обращая внимание на:
-
Основные семантические блоки (header, main, footer, aside)
-
Иерархию заголовков (h1-h6)
-
Навигационные элементы
-
Основной контент и дополнительные секции
-
-
-
Экспорт ресурсов:
-
Экспортируйте необходимые изображения в папку
images/вашего проекта -
Сохраните информацию о шрифтах и цветах в файл
design/design-tokens.txt
-
Часть 2. Создание базовой семантической структуры
-
На основе анализа Figma-макета создайте базовую семантическую структуру в
index.html:
Часть 3. Создание семантической разметки по варианту
-
Изучите индивидуальное задание для вашего варианта (см. ниже).
-
Создайте HTML-разметку, используя следующие семантические теги:
-
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer> -
<h1>-<h6>(правильная иерархия заголовков) -
<figure>,<figcaption>,<time>
-
-
Обеспечьте базовую доступность:
-
Добавьте атрибут
altдля всех изображений -
Используйте осмысленные тексты ссылок
-
Создайте логичную структуру заголовков
-
Добавьте skip-link для быстрой навигации:
<a href="#main" class="skip-link">Перейти к основному содержимому</a>
-
Примечание: Созданная в этой работе семантическая разметка будет использоваться как основа для стилизации в следующих лабораторных работах. При создании HTML-структуры уже предусмотрите использование классов по методологии БЭМ для последующего удобства стилизации.
Можно в ЛР №3 сразу добавлять базовые классы по БЭМ:
Тогда в ЛР №4 просто пишем стили к уже готовым классам.
Часть 4. Добавление микроразметки Schema.org
-
Добавьте базовую микроразметку согласно вашему типу проекта:
Для новостных сайтов и блогов:
Для интернет-магазинов:
Для организаций:
-
Проверьте микроразметку с помощью Google Rich Results Test
Часть 5. Наполнение контентом согласно варианту
-
Добавьте контент согласно вашему индивидуальному заданию
-
Используйте семантические теги для разметки контента
-
Пример структуры с микроразметкой:
Часть 6. Проверка и тестирование
-
Проверьте валидность HTML:
-
Используйте W3C Validator
-
Исправьте все ошибки и критические предупреждения
-
-
Проверьте микроразметку:
-
Используйте Google Rich Results Test
-
Убедитесь, что основные свойства определены корректно
-
-
Сделайте коммит:
git add index.html git add images/ git commit -m "feat: add semantic HTML markup with Schema.org for [тип проекта]" git push origin feature/semantic-markup
5. СОДЕРЖАНИЕ ОТЧЕТА
Отчёт о выполнении лабораторной работы должен содержать:
-
Титульный лист (по стандарту учреждения образования).
-
Цель работы.
-
Краткие теоретические сведения о семантической верстке, основах доступности и микроразметке Schema.org.
-
Ход работы:
-
Описание выполненных действий.
-
Скриншоты:
-
Figma-макет вашего проекта
-
Исходный код HTML-разметки в VS Code
-
Результат валидации в W3C Validator
-
Результаты проверки микроразметки в Google Rich Results Test
-
Структура проекта в проводнике VS Code
-
-
Ссылка на коммит с выполненной работой.
-
-
Ответы на контрольные вопросы согласно вашему индивидуальному варианту.
-
Выводы по работе.
6. ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ И СДАЧЕ
-
Выполненное задание и отчет должны быть представлены преподавателю для защиты.
-
Электронная версия отчета (в формате PDF) должна быть загружена в систему СЭО.
-
Отчет должен быть оформлен в соответствии с Стандартом Предприятия (СТП).
-
Студенты работают в тех же бригадах, что и в предыдущей работе.
-
1 подгруппа: выполняет варианты 1-8.
-
2 подгруппа: выполняет варианты 9-16.
-
Для выбора номера варианта для бригады используется Генератор вариантов.
ИНДИВИДУАЛЬНЫЕ ВАРИАНТЫ ЗАДАНИЙ
Для всех вариантов используется одинаковая структура задания, отличаются только тип проекта и конкретный контент
Задание для всех вариантов:
-
Проанализируйте предоставленный Figma-макет вашего проекта
-
Создайте семантическую HTML-разметку главной страницы, включая:
-
Шапку сайта с навигацией
-
Основной контент согласно типу проекта
-
Боковую панель (если предусмотрено макетом)
-
Подвал сайта
-
-
Используйте не менее 8 различных семантических тегов
-
Обеспечьте правильную иерархию заголовков (h1-h3)
-
Добавьте не менее 3 изображений с корректными alt-атрибутами
-
Добавьте микроразметку Schema.org согласно типу вашего проекта
Типы микроразметки по вариантам:
Варианты 1, 3, 8, 16 - Используйте Article, NewsArticle, ScholarlyArticle
Варианты 2, 9, 10 - Используйте Product, Offer, Book, Menu
Варианты 4, 12, 15 - Используйте Event, Hotel, SportsEvent
Варианты 5, 7, 13 - Используйте Person, Organization
Варианты 6, 11, 14 - Используйте FAQPage, Movie, SoftwareApplication
1 ПОДГРУППА (Варианты 1-8)
Вариант 1 - Новостной портал "NewsHub"
-
Микроразметка:
NewsArticle,Organization -
Обязательные свойства: headline, datePublished, author, articleBody
Вариант 2 - Интернет-магазин "TechStore"
-
Микроразметка:
Product,Offer -
Обязательные свойства: name, description, price, priceCurrency
Вариант 3 - Кулинарный блог "TastyBlog"
-
Микроразметка:
Recipe -
Обязательные свойства: name, recipeIngredient, recipeInstructions
Вариант 4 - Сайт мероприятия "EventSpace"
-
Микроразметка:
Event -
Обязательные свойства: name, startDate, location
Вариант 5 - Социальная сеть "SocialSphere"
-
Микроразметка:
Person,Organization -
Обязательные свойства: name, description
Вариант 6 - FAQ система "HelpDesk"
-
Микроразметка:
FAQPage,Organization -
Обязательные свойства: mainEntity (вопросы и ответы)
Вариант 7 - Портфолио фотографа "PhotoPortfolio"
-
Микроразметка:
Person,Photograph -
Обязательные свойства: name, description, image
Вариант 8 - Образовательная платформа "EduPlatform"
-
Микроразметка:
Course,Organization -
Обязательные свойства: name, description, provider
2 ПОДГРУППА (Варианты 9-16)
Вариант 9 - Ресторан "GourmetResto"
-
Микроразметка:
Restaurant,Menu -
Обязательные свойства: name, servesCuisine, priceRange
Вариант 10 - Библиотека "DigitalLibrary"
-
Микроразметка:
Book -
Обязательные свойства: name, author, isbn
Вариант 11 - Киносайт "MovieHub"
-
Микроразметка:
Movie -
Обязательные свойства: name, director, dateCreated
Вариант 12 - Бронирование отелей "HotelBooking"
-
Микроразметка:
Hotel,Offer -
Обязательные свойства: name, address, priceRange
Вариант 13 - Музыкальный сервис "MusicStream"
-
Микроразметка:
MusicAlbum,MusicGroup -
Обязательные свойства: name, byArtist, track
Вариант 14 - SaaS платформа "CloudService"
-
Микроразметка:
SoftwareApplication,Offer -
Обязательные свойства: name, applicationCategory, offers
Вариант 15 - Спортивный портал "SportArena"
-
Микроразметка:
SportsEvent -
Обязательные свойства: name, startDate, competitor
Вариант 16 - Научный журнал "ScienceJournal"
-
Микроразметка:
ScholarlyArticle -
Обязательные свойства: headline, datePublished, author
Дизайн-макеты в Figma:
1 ПОДГРУППА (Варианты 1-8)
-
Вариант 1 - Новостная статья
Figma News paper template
Free Template - Magazine & News -
Вариант 2 - Страница продукта интернет-магазина
Free Ecommerce Website Design Templates -
Вариант 3 - Блог-пост с рецептом
[FREE] Cooking & Recipes Blog Template -
Вариант 4 - Страница мероприятия
Event Website Templates -
Вариант 5 - Профиль пользователя
Profile Page Design Templates -
Вариант 6 - FAQ страница
FAQ Model Template -
Вариант 7 - Портфолио фотографа
Free Photography Website Figma Templates -
Вариант 8 - Страница курса обучения
Academy - Online Course Figma template
2 ПОДГРУППА (Варианты 9-16)
-
Вариант 9 - Страница ресторана
Free Restaurant & Menu Templates (search in ecommerce or restaurant category on Figma Community) -
Вариант 10 - Страница книги в библиотеке
Бесплатных специализированных книг шаблонов мало, но можно адаптировать карточку товара из e-commerce шаблонов, например:
Free Ecommerce Templates -
Вариант 11 - Страница фильма
Можно адаптировать шаблоны портфолио или медиасайтов, например:
Free Blog Templates -
Вариант 12 - Страница отеля
Free Hotel Booking Page Templates (поиск по ключевым словам hotel в Figma Community) -
Вариант 13 - Страница музыкального альбома
Аналогично возможно использовать медиашаблоны или портфолио:
Free Music Album & Media Templates (поиск в Figma Community) -
Вариант 14 - Страница программного обеспечения
Software Application Templates (поиск в Figma Community) -
Вариант 15 - Страница спортивного события
Спортивные шаблоны встречаются редко, можно адаптировать event шаблоны:
Event Website Templates -
Вариант 16 - Страница научной публикации
Специализированных шаблонов сложнее найти, но можно адаптировать шаблоны для блогов или статей:
Free Blog Templates
КОНТРОЛЬНЫЕ ВОПРОСЫ
Для всех вариантов вопросы одинаковые
-
Какие семантические теги HTML5 вы использовали в своей разметке и какую смысловую нагрузку они несут? Приведите примеры из вашего проекта.
-
Как правильная иерархия заголовков (h1-h6) влияет на доступность и SEO веб-страницы? Продемонстрируйте на примере вашего проекта.
-
Какую микроразметку Schema.org вы применили в своем проекте и какие свойства использовали? Как это улучшает представление вашего контента в поисковых системах?
-
Почему важно добавлять alt-атрибуты к изображениям и какие принципы следует учитывать при их написании? Приведите примеры из вашего кода.
-
Какие ошибки валидации были обнаружены в вашей разметке и как вы их исправили? Что дает валидная HTML-разметка?
ПРАКТИЧЕСКИЕ РЕКОМЕНДАЦИИ ПО MICRODATA
-
Используйте
itemscopeиitemtypeдля определения области и типа -
itempropдля указания свойств внутри области -
Для вложенных объектов создавайте новые области с
itemscope -
Проверяйте разметку в Google Rich Results Test
-
Используйте Schema.org для поиска подходящих типов и свойств
Примечание: Созданная в этой работе семантическая HTML-разметка с микроразметкой будет использоваться в следующей лабораторной работе для стилизации средствами CSS. Сохраните все наработки для продолжения работы над проектом.
- 19 января 2026, 10:46
Состояние ответа
| Состояние ответа на задание | Отправлено для оценивания |
|---|---|
| Состояние оценивания | Оценено |
| Оставшееся время | Ответ на задание представлен заранее - 1 день 21 час. |
| Последнее изменение | среда, 4 марта 2026, 02:49 |
| Ответ в виде файла |
|
| Комментарии к ответу | Отобразить комментарии Сохранить комментарий | Отмена |
Отзыв
| Оценка | 8,00 / 10,00 |
|---|---|
| Оценено в | суббота, 7 марта 2026, 21:32 |
| Оценено |