Question 1

Защо не ми се получи задачата преди този урок?

Accepted Answer

Злат, от картинките, които си пуснал виждам, че си с уиндоус 10. При него картинките се отварят с програма Photos. 
![](https://upload.aula.bg/screenshot52f819c-15e28aeda.jpg) Щракваш горе върху моливчето - Edit и там ти излизат куп инструменти за редактиране. Почваш и търкаш, докато на края картинката се умори и придобие вида, който искаш :)

Question 2

Дали  се получи?

Accepted Answer

В head се слага т.нар. мета информация за страницата (информация която я описва и дефинира отделно от нейното съдържание). В тази информация се поставя например езикът, на който е съдържанието, външни връзки със скриптове и CSS, заглавие, гео-локация, описание и т.н.

Question 3

Защо на маргините на текста не ми работят?

Accepted Answer

Но все пак има някакъв проблем, въпреки, че копирах вашия код, за да съм сигурна, че не пропускам някоя точица. Стойностите на margin-top на h1 се отразяват и на снимката. Мърдат се заедно пропорционално надолу.
![](https://upload.aula.bg/screenshot272d634-c5447a17.jpg)

Question 4

Как да

Accepted Answer

```
Здравей,
Основеният проблем на твоя код, е, че НЕ следва основни принципи в HTML5, защото ти НЕ спазваш основни правила при писането му:
1. Използваш тагове, които не съществуват в HTML5. Никъде не се поддържа, например, font като таг. Tова означава, че браузърът не знае как да интерпретира този таг и как да го покаже на екрана. За разлика от XML, където няма точно определени тагове, които да използваш, в HTML има САМО група от тагове, които са дефинирани предварително, знаем как ще се визуализират на екрана и браузърът ги разпознава, затова се придържаме към тях.
2. И въпреки че използваш неподдържащи се тагове, то някои от тях са затварящи се. В това число и font. За да се визуализират нещата правилно, трябва при отваряне на даден таг, то да се изписва и затварящия, тоест отваряме , но след това затваряме .
3. Влагането на тагове е една от най-големите грешки при писане на код в HTML. При отваряне на няколко тага, то те трябва да се затворят в обратна поредност на отварянето им. Пример: , но не е правилно .
4. Използваш грешен синтаксис. Това означава, че не е правилно изписването на елементите в кода. В нито една версия на HTML няма подобно нещо: . НЕ може да се слага друг таг в скобите на отварящия таг. Таговете се влагат един в друг между отварящия таг със скобите му и затварящия таг с неговите скоби.

Моят съвет е да се придържаш към по-новите версии на HTML, тоест HTML5. Използвай новите възможности на HTML, за да се визуализират правилно страниците ти. Премахни тагове като font, b, i, small. Замени ги със стилове в CSS като text-style, text-decoration или font-size. Отделяй CSS във външен файл от HTML-a и използвай класове, за да стилизираш едни и същи елементи в HTML-a.

А сега по твоя въпрос - използвай div таг, който по подразбиране визуализира елементите, поставени в него, на нов ред. Използвай и вложени div тагове, за да разделиш езиците. Например: Languages I know: English 
Russian
 
Надявам се да съм ти помогнала и да съм била полезна. Ако има нещо, питай! :))
```

Question 5

Как да определя стойностите на пикселите?

Accepted Answer

Виктория,
принципно в HTML се използват абсолютни и относителни единици за разположение на елементите в уеб страницата. Абсолютните единици са например метър, милиметър и т.н., но те не се препоръчват, а се препоръчват относителните стойности. Те са следните :
- пиксел - иначе казано точка от екрана, като нейната абсолютна стойност зависи от разделителната способност на екрана.
- em - в случая зависи от пикселите на самия елемент. За текст принципно по подразбиране е 16 px,освен ако не се зададе  друго.
Има и pt, но това по-скоро се използва в типографията. Надявам се да съм помогнал.

Question 6

Защо?Защо в решението са направени 3 неща:

Борис Митев - Web Developer

--> Защо принудително позиционираме body с margin?
						Нали по подразбиране трябва да започне от 0 0?

--> с  явно образуваме контейнер, какъвто има описан в 
						https://html-5.ru/teg-header-html5      Защо беше предпочетено като вариант, 
                                               като според наученото  до тук беше по- логично с  и работи с него?

Защо е необходимо да отместваме целият контейнер и после да компенсираме отместването?

БорисМитев
     Web Developer

Accepted Answer

Тага body сме го позиционирали с margin: 0, защото повечето html елементи имат margin и padding по подразбиране и се налага да ги зануляваме. Пробвай да махнеш margin и виж резултата.

Теоритично можеш да направиш цял web сайт като използваш само и единствено div елементи. Това обаче пречи на четимостта на кода и не е добра практика, особено когато други хора четат кода ти и им се налага да го променят или да добавят нова функционалност. Добра практика (и това важи за всеки програмен език) да бъдеш колкото може по-описателен. Тагът header за всеки четящ кода означава че вътре се съдържа целият код от заглавната част на страницата (или нейният header) - нейното заглавие, менюто за навигация, логото и т.н. По имената на таговете се ориентират и паяците на търсачките (Google, Bing, etc.) за да обходят по-точно и категоризират по-добре съдържанието на страницата.

Question 7

Може ли да реша задачата по друг начин?

Accepted Answer

И аз съм го направил по друг начин (с доста нагаждане,но мой си начин), Не съм сигурен колко е вярно , но съм използвал наученото до тук. Нямам хедъри и отрицателни стойности на марджина, нито пък съм използвал този начин на задаване на марджина (margin: -30 0 0 -130) , все пак няма от къде да знам за него. Ето резултата: 
![](https://upload.aula.bg/screenshot5469bfc-1539f7504.jpg) 
а ето и решението:
![](https://upload.aula.bg/screenshot55eda97-143faad3e.jpg)

Question 8

Защо не се оцветява текст?

Accepted Answer

Изписали сте coolr вместо color.

Question 9

Може ли текста Web Developer да се качи по-нагоре и как?

Accepted Answer

Защо задачата за упражнение не се припокрива с преподаденото от уроците?
Упражняваме се на това ,което не знам.
За margin-а никъде не се споменва, че може да има отрицателни стойности. Разбрах го от теста.
Синтаксиса също се различава от преподаденото.
Header ?!
На базата на видео уроците трудно може да се реши задачата, освен ако имаш някакъв опит.

Question 10

имам въпрос относно задачата?

Accepted Answer

Здравейте, Даниела, радвам се, че се стремите да разберете логиката зад подредбата на елементите, а не просто да копирате код.

Накратко, `margin` е разстоянието **извън** границите на даден елемент, което го "отбутва" от съседните му обекти или от края на неговия контейнер (в случая `header`). Използва се за създаване на „въздух“ и правилно позициониране.

---

### Как работи Margin и позиционирането спрямо Header

В CSS всеки елемент се разглежда като правоъгълна кутия (Box Model). Когато искате да преместите нещо спрямо `header`, Вие регулирате неговите външни отстъпи.

### Ролята на Margin и стъпки за работа

1.  **Определяне на посоката:** Чрез свойства като `margin-top`, `margin-right`, `margin-bottom` и `margin-left` Вие казвате на елемента в коя посока да създаде празно пространство. В контекста на Вашата схема, `margin-top: -30px` би изкарал елемента нагоре над заглавната част, докато положителен `margin` би го свалил надолу.
2.  **Използване на Style атрибута:** Когато пишете `style=""` директно в HTML тага (Inline CSS), това прилага стила конкретно и единствено за този елемент. 
    * Ако го напишете в тага ``, променяте позицията на снимката.
    * Ако го напишете в тага за текст (например `` или ``), променяте текста.
3.  **Поредност на изписване:** Мястото на `style` атрибута вътре в отварящия таг (преди или след други атрибути като `src` или `class`) няма техническо значение за браузъра, но е важно да е правилно изписан: ``.
4.  **Позициониране спрямо контейнера:** Тъй като снимката и текстът се намират вътре в `header`, техният `margin` се изчислява спрямо вътрешните граници на този `header`. Ако елементът е с `display: block` или `inline-block`, той ще реагира на тези отстъпи, за да се отмести от ръбовете на родителския елемент.

### Относно Вашата схема
Вашата визуализация е правилна – ако искате елемент да бъде „извън“ или „над“ `header`, често се използват отрицателни стойности за `margin-top` или се комбинират със свойството `position: relative`.

Решение: Икона име и длъжност

Пълен достъп до курса: Не

Как да позиционираме и стилизираме икона, име и длъжност

Стъпка по стъпка: реализиране на решението

Използвани CSS свойства и елементи

Дискусия към урока