Box model
26. 2. 2025
Struktura webové stránky
Struktura webu je základní stavební kámen pro obsah, který se do stuktury zasadí v následujícím kroku. Dobře vytvořená webová stránka se zobrazí uživateli čitelně i s vypnutými styly. Dosáhnete toho dodržováním základních pravidel pro strukturu stránky, zejména správným používáním HTML tagů.
Box model
Každý element má takový jako by box kolem sebe, který můžeme rozdělit na 4 části: margin(vnější prostor), border(ohraničení boxu), padding(vnitřní prostor) a samotný obsah elementu. Tyto boxy nám pomáhají vytvořit layout pomocí CSS.
Přehled html značek
| Název | Atributy | Popis/využití |
|---|---|---|
| html | lang | uvození začátku souboru |
| head | uvozuje hlavičku | |
| meta | name, content, charset | informace pro prohlížeč(metadata), nezobrazí se |
| title | určuje název stránky | |
| body | je v něm vše, co je vidět na stránce | |
| link | odkaz v hlavičce na připojení soubrů např. css | |
| nav | vymezuje hlavní navigaci, menu | |
| ul | seznam - uvození | |
| li | seznam - jednotlivé prvky seznamu | |
| h1 | hlavní nadpis, pouze jeden na stránce | |
| h2-h6 | odnadpisy, vyšší číslo - nižší úroveň, postupně dle důležitosti | |
| p | odstavec textu, alespoň 1 věta | |
| section | vymezení části, která spolu nějak souvisí, je na nějaké téma, společný povinný nadpis | |
| span | vymezí nám koušek textu (pár slov) abych je mohli nastylovat | |
| div | obalení části HTML(alespoň 1 element) aby se jednodušeji styloval | |
| hgroup | vytvoření podnadpisu - formálně dochází k seskupení do ejdnoho, význam je dán prvním uvedeným | |
| main | hlavní obsah stránky v body, mouze jednou, jen to hlavní na stránce, ne vše! | |
| a | href,title | odkaz |
| img | src,alt | vložení obrázku |
| header | určení hlavičky, celé stránky (např. h1 a logo), může být i u podčásti stránky | |
| aside | pro sidebar, obsah související s obsahem předešlého ementu, dolňující informace | |
| footer | patička (stránky nebo podčásti) | |
| article | větší, ucelený, samostatný blok, musí obsahovat nadpis, např. příspěvek fóry, článej, popis produktu | |
| strong | do tohoto elementu dáváme pouze informace, které jsou velmi důležité, závažné nebo urgentní. Ne jen protože chce písmo tučně. | |
| b | používá se na upoutání pozornosti čtenáře, ne pro to aby byl text tučně (to je pouze defaultní nastavení některých prohlížečů) | |
| em | označuje text, který je zdůrazněn, můžeme zanořovat a tím zvětšovat důraz na danou část | |
| i | text, který se liší od zbytku - technické termíny, idiomatický text, … Dříve byl uváděn text kurzívou, z toho pojmenování. |