msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '9fb357b35c'
${ noResults }
Web-Dev-For-Beginners/translations/ru/3-terrarium/1-intro-to-html/assignment.md

6.4 KiB
Raw Blame History Escape

Практическое задание по HTML: Создание макета блога

Цель

Разработать и вручную написать HTML-структуру для главной страницы личного блога. Это упражнение поможет вам попрактиковаться в использовании семантического HTML, планировании макета и организации кода.

Инструкции

  1. Создайте макет вашего блога

    • Нарисуйте визуальный макет главной страницы блога. Включите ключевые разделы, такие как заголовок, навигация, основной контент, боковая панель и подвал.
    • Вы можете использовать бумагу и отсканировать ваш эскиз или воспользоваться цифровыми инструментами (например, Figma, Adobe XD, Canva или даже PowerPoint).

  2. Определите HTML-элементы

    • Составьте список HTML-элементов, которые вы планируете использовать для каждого раздела (например, <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a> и т.д.).

  3. Напишите HTML-разметку

    • Вручную напишите HTML для вашего макета. Сосредоточьтесь на семантической структуре и лучших практиках.
    • Включите как минимум 10 различных HTML-элементов.
    • Добавьте комментарии, чтобы объяснить ваши выборы и структуру.

  4. Отправьте вашу работу

    • Загрузите ваш эскиз/макет и HTML-файл.
    • По желанию, напишите краткое размышление (2–3 предложения) о ваших дизайнерских решениях.

Критерии оценки

Критерий Превосходно Удовлетворительно Требует улучшения
Визуальный макет Четкий, детализированный макет с обозначенными разделами и продуманным расположением Базовый макет с некоторыми обозначенными разделами Минимальный или неясный макет; отсутствуют обозначения разделов
HTML-элементы Используется 10+ семантических HTML-элементов; демонстрируется понимание структуры и лучших практик Используется 5–9 HTML-элементов; частично соблюдается семантическая структура Используется менее 5 элементов; отсутствует семантическая структура
Качество кода Хорошо организованный, читаемый код с комментариями; соблюдаются стандарты HTML В основном организованный код; мало комментариев Неорганизованный код; отсутствуют комментарии
Размышления Глубокие размышления о дизайнерских решениях и сложностях Базовые размышления Отсутствие размышлений или их нерелевантность

Советы

  • Используйте семантические HTML-теги для лучшей доступности и SEO.
  • Организуйте ваш код с помощью отступов и комментариев.
  • Обратитесь к MDN HTML Elements Reference для получения справочной информации.
  • Подумайте о том, как ваш макет может быть расширен или стилизован в будущих заданиях.

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.