Struktura stránky a práce s box modelem

Časté chyby

Časté chyby v HTML

<!--

    Často máte špatné formátování HTML. Je potřeba dbát
    na správné formátování zdrojového kódu HTML. Správná
    syntax a sémentika HTML není vše, velice důležité
    je i jak vypadá náš zdrojový kód.

    Níže se nachází dvě možnosti správného odsazení
    základního HTML kódu.

-->
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    ...
</body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
    </head>

    <body>
        ...
    </body>
</html>

<!--

    Pokud bych měli element `head` nebo element `body`
    v jiné úrovni zanoření, tak máme špatně naformátovaný
    zdrojový kód.

    Příklad níže.

-->
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>

    <body>
        ...
    </body>
</html>

<!--

    Jak dodržovat správné zanoření elementů?
    Stačí se podívat na rodiče příslušného elementu
    a element musí mít o jednu úroveň větší zanoření
    než jeho rodič.

    Popřípadě můžeme použít automatické formátování IDE.

-->

<!--

    Dávejte si pozor, zda používáte existující elementy.
    Například elementy `p1`, `p2` a `p3` neexistují. Webový
    prohlížec je sice vyrenderuje, ale takovéto elementy
    nemají žádnou sémentiky!

-->

<!--

    Text v paragrafu není potřeba jakkoliv zalamovat pomocí tagu `br`.
    Samožřejmě někdy se nám může hodit vynutit zalomení textu,
    ale to jsou vyjmešné situace.

    Například kód níže je špatný. 

-->

<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
    Porro eos magnam odio dolorum beatae, aliquam nam culpa veniam. <br>
    Sit adipisci a, quaerat rerum autem nostrum amet numquam doloremque <br>
    esse tempore!
</p>

<!--

    V rámci celého projektu webové stránky je nutné dodržovat
    jednotné formátování. Pokud budeme pro různá místa zdrojového kódu
    používat rozdílné formátování, zdrojový kód nebude konzistentní,
    bude vypadat blbě a naši kologové nás nepochváli.

    Například niže je úkázka nekonzistentního formátování.
-->

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero eaque, voluptates veniam quia rerum earum unde iusto animi nam quos eligendi ut aspernatur, quis aut quisquam qui mollitia illo dolores.</p>

<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo quidem cumque ipsam voluptatem ad nam amet repellendus quaerat hic. Animi, libero neque mollitia aperiam molestias magni eligendi iusto esse debitis?
</p>

<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint corrupti rem laboriosam aspernatur
    enim. Iste magnam minus debitis vel quod. Debitis doloremque hic ipsa dignissimos, veniam
    impedit ratione explicabo eveniet.
</p>

<!--

    Je potřeba si dávat pozor na nadbytečný počet mezer.

    Níže se nachází špatný kód.
-->

<title>   Document   </title>

<p>
    Lorem ipsum dolor sit       amet consectetur adipisicing elit. Iste cum quas ullam aperiam hic
    assumenda inventore ad non corrupti eos? Id cumque eligendi odio        dolores, commodi dolorum
         enim sapiente quam.
</p>

Časté chyby v CSS

/*

    Jak už víme u zdrjového kódu HTML je velice důležité
    mít správné formátování. Tak správné formátování platí
    pro CSS 2x tak více.

    Mít správně uspořádaný zdrojový kód CSS je velice důležité.
    Špatně udržované CSS vede ke špatnému pročítání CSS a
    špatnému hledání chyb v CSS.
    
*/

/*

    Níže uvedu pouze správně zapsané CSS.

*/

.selektor {display: flex;}

.selektor { display: flex; }

.selektor {
    display: flex;
}

.selektor {
    position: relative;
    display: flex;

    width: 40em;
    height: 0;

    margin: auto;
    padding: 5em 0;
}

.selektor_1,
.selektor_2,
...,
.selektor_n {
    display: flex;
}

/*

    Pokud máme velice dlouhý selektor s jednou vlastností, příklad níže.
    Můžeme vidět že selektor je tak dlouhý, že nelze vidět ani
    vlastnost s hodnotou.

*/
html body main .selektor section article section.comments article button.reply { justify-content: space-between; }

/*

    V tomto případě je tedy nutné zapsat CSS takto:

*/
html body main .selektor section article section.comments article button.reply {
    justify-content: space-between;
}

/*

    Chyba už je i mít takto špatný selektor.

*/

Úkoly

Vždy se snažte o co nejefektivnější řešení.

Úkol 1

Vytvořte následující webovou stránku.

Finální podoba úkolu 1

Rámeček je umístěn na středu okna a má šířku 20em. Postranní pruh má šířku 0.75em, všechny ostatní mezery jsou 1em. Barvy jsou blackgray a  lightblue.  

Přijmout úkol.

Úkol 2

Vytvořte třídu text-box, která zvýrazní text tmavě modrou barvou a přidá mu rámeček tak, jak je ukázáno na následujícím obrázku. Všimněte si mezer kolem čárkovaného rámečku.

Finální podoba úkolu 2

Přijmout úkol.

Úkol 3

Upravte předchozí úkol následovně.

Finální podoba úkolu 4

Přijmout úkol.

Úkol 4

Navrhněte sémanticky správnou strukturu pro zápočtový projekt a vytvořte ji. Ověřte, že vaše řešení je validní.

Zadání zápočtového projektu najdete na hlavní stránce cvičení.

Přijmout úkol.