Poslední dny jsme hodně programovali a ani o víkendu jsme neodpočívali. Za odměnu dnes trochu zvolníme a dáme si pro změnu trochu HTML a CSS. Jsme ve fázi, kdy si do hry začneme přidávat předměty, které budeme sbírat a s tím se pojí i časomíra. Trocha soutěživosti není nikdy na škodu.
Začneme se HTML, kam přidáme hlavičku, hned za tag <body>:
Tag <header> (hlavička) pochází z nejnovější verze HTML5. Společně s dalšími novými tagy jako <main>, <article>, <section> apod. se starají o lepší strukturu HTML dokumentů. To pomáhá vyhledávačům zaměřit se na to nejdůležitější na stránce. Samotný tag <header> nám graficky nijak obsah stránky neovlivňuje.
Uvnitř hlavičky pak vidíme 2 menší sekce, první v sobě má obrázek (tag <img>) a skóre (tag <span>). Druhá část pak zobrazuje časomíru.
Tělo stránky by po našich úpravách mělo vypadat zhruba takto:
Uděláme ještě jednu malou úpravu v tagu <head>, přidáme si do jiný font písma. Na této stránce najdete databázi různých fontů. Jakýkoliv font si můžete naimportovat na svojí stránku. My použijeme font Bitter. Přidejme si do <head> tento řádek kódu:
V HTML jsme hotovi a teď CSS. Abychom hlavičku hezky uspořádali, využijeme techniku, které se říká flexbox.
Nejjednodušší moderní způsob, jak dát prvky na webové stránce vedle sebe, je tzv. flexbox. Pokud rodičovskému prvku (v našem případě <header>) nastavíme vlastnost display: flex;, uděláme z něj flexbox. Flexbox všechny své potomky (do něj vnořené prvky, tedy ty naše 2 části zmíněné výše) umístí do jednoho řádku vedle sebe.
Pomocí vlastnosti justify-content: space-between; řekneme flexboxu, že má své potomky rozmístit od kraje do kraje, s pravidelnými rozestupy mezi nimi. To se nám hodí, protože tím pádem dostaneme počítadlo předmětů vlevo a počítadlo času vpravo.
Použijeme ještě vlastnost align-items: center;, která v rámci flexboxu vycentruje položky k sobě navzájem ve svislém směru.
Do souboru style.css na konec dopíšeme:
Tak to už vypadá o dost lépe, ale hlavičku máme širokou přes celou stránku. Pojďme ji udělat stejně širokou, jako je herní plocha (nastavením width) a udělejme nad hlavičkou a pod hlavičkou mezeru a zařiďme vycentrování hlavičky na stránce (oboje pomocí margin). Upravme CSS pro hlavičku následovně:
Když se nyní na hru podíváme, tak vypadá pěkně. Bylo by super vložit trochu větší mezeru mezi obrázek a hodnotu, to uděláme přidáním marginu k jednotlivým obrázkům v našem header:
Trošku poladíme velikost fontu u skóre a času změnou vlastnosti font-size:
A nakonec v body upravíme font (font-family) a jeho tloušťku (font-weight), aby se to lépe četlo:
Trocha HTML a CSS a naše stránka je zase o něco pokročilejší. Zítra si do hry přidáme předměty. Kód z dnešního dne najdeš zde. :)
Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.
Dostávej náš měsíční newsletter a buď mezi prvními, kdo se dozví o akcích a dění v Czechitas.
