Охрана труда:
нормативно-правовые основы и особенности организации
Обучение по оказанию первой помощи пострадавшим
Аккредитация Минтруда (№ 10348)
Подготовьтесь к внеочередной проверке знаний по охране труда и оказанию первой помощи.
Допуск сотрудника к работе без обучения или нарушение порядка его проведения
грозит организации штрафом до 130 000 ₽ (ч. 3 статьи 5.27.1 КоАП РФ).
Участие подтверждается официальными документами
  • Приказ Приказ о проведении
  • Положение Положение
  • Протокол Выписка из Протокола
  • Диплом Диплом победителя
  • Инновации Диплом за инновационную деятельность
  • Благодарность Благодарность
31.01.2024

Практическая работа "Внедрение микроразметки в html-код" МДК 09.02 Оптимизация веб-приложений

Антоненко Александра Романовна
ГАПОУ СО "КУПК"
Конкурсная работа

Практическая работа «Внедрение микроразметки вhtml-код»

по дисциплине МДК 09.02 Оптимизация веб-приложений

специальность 09.02.07 «Информационные системы и программирование»

Цель работы: научиться добавлять в свой html-код микроразметку

Любая разметка Schema.org проводится в два этапа:

1 этап

Описание определенного типа оборачивают в контейнер, в котором указывается схема разметки:

<div itemscope itemtype="http://schema.org/Organization" >

...

</div>

itemscope — это глобальный логический атрибут, определяющий область действия микроданных, заданных атрибутом itemtype

itemtype - указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных.

2 этап

Размечают отдельные свойства сущности с указанием на конкретное свойство схемы:

<span itemprop="streetAddress">Нижегородская,6</span>

Пример:
Документ без разметки

<div>

<span>Uplab</span>

Контакты:

<div>

Адрес: Нижегородская, 6 стр.2,

428018,

Чебоксары,

</div>

Телефон: +7 499 955–50–30

Электронная почта: info@uplab.ru

</div>

Документ с разметкой Schema.org

<divitemscopeitemtype="http://schema.org/Organization">

<spanitemprop="name">Uplab</span>

Контакты:

<divitemprop="address"itemscopeitemtype="http://schema.org/PostalAddress">

Адрес:

<spanitemprop="streetAddress">Адрес:Нижегородская, 6 стр.2</span>

<spanitemprop="postalCode"> 428018</span>

<spanitemprop="addressLocality">Чебоксары</span>,

</div>

Телефон:<spanitemprop="telephone">+7 499 955–50–30 </span>,

Электронная почта: <spanitemprop="email">info@uplab.ru</span>

</div>

Вариант 1

Задание 1.Добавить микроразметку в уже существующую разметку, представленную ниже, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/goods-prices.html

После добавления микроразметки, необходмо проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

<section>

<h1>Беспроводныенаушники Xiaomi Redmi Buds Essential</h1>

<div>

Хороший звук, удобство ношения, легкость подключения

</div>

<img src="image.jpg" alt=" Беспроводные наушники XiaomiRedmiBudsEssential">

<article>

Цена: 1058 RUB

</article>

</section>

Задание 2. Создатьhtml верстку секции «о компании»:

  • Название компании: ООО «Твой кондитер»

  • URL сайта: www.konditer.ru

  • Адрес:Россия, г. Кондитерский, ул. Сахарная, дом 7

  • Телефон: 8 (800) 500-50-50

  • Email:konditer@mail.ru

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/address-organization.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

Задание 3. Создатьhtml верстку секции данные о программеPhotoshop

  • Описание:Многофункциональный растровый графический редактор, разрабатываемый и распространяемый компанией Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты.

  • Размер:3,1 Гбайт

  • Стоимость: 2000 RUB/месяц

  • Операционная система:Windows 10, 11; macOS Ventura 13.5.1

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/software.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

Вариант 2

Задание 1.Добавить микроразметку в уже существующую разметку, представленную ниже, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/goods-prices.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

<section>

<h1>Смартфон Apple iPhone 15 Pro Max 1 ТБ</h1>

<div>

Phone 15 Pro Max с большим 6,7-дюймовым экраном весит на 8% меньше, чем прошлогодний iPhone 14 Pro Max.

</div>

<img src="image.jpg" alt="Смартфон Apple iPhone 15 Pro Max 1 ТБ">

<article>

Ценаот 195 970 RUB

</article>

</section>

Задание 2. Создатьhtml верстку секции «о компании»:

  • Название компании: ООО «Строймастер»

  • URL сайта: www.stroy-master.ru

  • Адрес:Россия, г. Строительный, ул. Бетонная, дом 11

  • Телефон: 8 (900) 700-70-70

  • Email:story-master@mail.ru

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/address-organization.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

Задание 3. Создатьhtml верстку секции рецепта овсяной каши на молоке

  • Название:Овсяная каша на молоке

  • Ингредиенты:

    • Хлопья овсяные - 1 стакан

    • Молоко - 3 стакана

    • Масло сливочное - 1 ст. ложка

  • Инструкция:

    • Вскипятить молоко

    • В кипящее молоко всыпать овсяные хлопья

    • Помешивая, варить кашу на небольшом огне до загустения (5-10 минут). Затем добавить соль и масло.

Добавить в html верстку микроразметку, используя Яндекс.Справку https://yandex.ru/support/webmaster/supported-schemas/recipe.html

После добавления микроразметки, не забудьте проверить ее на правильность в Яндекс Валидаторе https://webmaster.yandex.ru/tools/microtest/

Свидетельство участника экспертного совета жюри

Свидетельство можно заказать сразу, как Вы оставите не менее 3 объективных комментариев в этом разделе сайта.

У вас недостаточно прав для добавления комментариев.

Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.