Ahoj, dnes si ukážeme jak rozdělit web do oddílů, což nám s předchozími znalostmi bude stačit k vytvoření jednoduchého webu 
Minulý díl: HTML pro úplné začátečníky #2 – Vkládání odkazů a obrázků
Jak vytvoříme oddíl?
Jako vždy, potřebujeme znát nějaké ty tagy, tentokrát se jedná o párový tag <div>, párový znamená, že začíná tagem <div> a končí </div>.
Divy, anebo oddíly, jsou v html velmi důležité, můžou obsahovat text, obrázky, cokoliv. Využívají se především k formátování stránky za pomocí stylů CSS (o tom ale až jindy). Div je podobný odstavcí (odstavec má tag <p>), ale narozdíl od odstavce za sebou ani před sebou nedělá vizuální mezeru – odstavce jsou vhodné pro formátování textu.
Div má taky parametry!
Dobře, víme, že se oddíl značí div, ale co, když jej chceme nějak upravit? Z důležitých html tagů k tomu slouží align. Ten nám umožňuje zarovnat odstavec na střed, vlevo, vpravo (center, left, right). Zde je příklad
<div align=“center“> zde je obsah oddilu </div>
Ale ukážeme si radši jak využít css styly pro stylizování oddílu.
<div style=“text-align:center; background-color:yellow; width:800px; height:200px; margin-left: auto;
margin-right:auto;“>
Style označuje úryvek CSS skriptu, který se nachází mezi uvozovkami.
- text-align – zarovnání textu, má tři hodnoty: left, right, center
- background-color – barva pozadí oddílu
- width / height – šířka, výška odstavce – mohou být použita také procenta
- margin-left:auto / margin-right:auto – tahle dvojce nám zarovná oddíl do středu stránky, stejná funkce jako „align = „center““ nicméně align při využití stylů nelze použít.
Další parametry:
- Float – obtékání textu
- max-width / max-height – max. šířka, výška – používá se pro „rodičovské“ divy.
- color – barva textu (white,…)
Příklad jednoduchého webu
Zde vidíme jednoduchý web, obsahuje menu a dva oddíly – popravdě jsou to jen čtyři divy a trochu textu.
Jak to vypadá v kódu?
<html>
<body>
<div style=“margin-left: auto; margin-right:auto; max-width:900px; „>
<div style=“ background-color:gray; float:left; width:20%; height:400px;“>
Tohle může být klidně menu
<a href=“odkaz“> odkaz někam </a>
</div><div style=“text-align:center; background-color:yellow; width:80%; height:200px; float:left;“>
<p> Tohle je náš první oddíl, využíváme zde také funkci odstavce</p>
<p> zde vidíme odsazení druhého odstavce</p>
</div>
<div align=“center“ style=“text-align:center; background-color:green; width:80%;
height:200px;float:left;“>
Druhý blok je zde
<a href=“http://programujeme.4fan.cz“><img src=“http://www.programujeme.4fan.cz/wp-
content/uploads/2014/09/htmlprozacatecniky.png“> </a>
</div></div>
</body>
</html>
První div má nastaveno zarování na střed, a určuje maximální šířku webu. Nazývám ho „rodičovský“ div, protože obsahuje všechny ostatní divy, jak můžete vidět je ukončen až těsně před </body>
Druhý div – menu – má nastaveno šedou barvu pozadí, obtékání vleko, šířku 20 procent (z 900px) a výšku 400px
Zbylé dva divy jsou nastavené podobně vyjma toho, že mají text zarovnán do středu. Jelikož jsou všechny nastaveny na obtékání tak se zobrazují vedle sebe, všechny tři jsou obsaženy v rodičovském divu. Spolu tvoří 1. + 2. a také 1. + 3. div 100% šířky rodičovského divu.
Můžeme také přidat „zápatí“ webu, přidáním jednoho divu před koncový tag rodičovského divu.
<div id=“zapati“ style=“background-color:black; text-align:center; color:white;“>zapati </div>
Konečná verze?
<html>
<body>
<div style=“margin-left: auto; margin-right:auto; max-width:900px; „>
<div style=“ background-color:gray; float:left; width:20%; height:400px;“>
Tohle může být klidně menu
<a href=“odkaz“> odkaz někam </a>
</div><div style=“text-align:center; background-color:yellow; width:80%; height:200px; float:left;“>
<p> Tohle je náš první oddíl, využíváme zde také funkci odstavce</p>
<p> zde vidíme odsazení druhého odstavce</p>
</div>
<div align=“center“ style=“text-align:center; background-color:green; width:80%;
height:200px;float:left;“>
Druhý blok je zde
<a href=“http://programujeme.4fan.cz“><img src=“http://www.programujeme.4fan.cz/wp-
content/uploads/2014/09/htmlprozacatecniky.png“> </a>
</div><div id=“zapati“ style=“background-color:black; text-align:center; color:white;“>zapati </div>
</div>
</body>
</html>
Stáhnout (pravým tlačítkem), nebo prohlédnout funkční verzi můžete zde: index