|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T10:50:11+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "bg"
|
|
|
}
|
|
|
-->
|
|
|
# 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) за насоки.
|
|
|
- Помислете как вашето оформление може да бъде разширено или стилизирано в бъдещи упражнения.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Отказ от отговорност**:
|
|
|
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод. |
