Tento článek navazuje na předchozí článek, kde jsem vysvětloval, jak se dá rozumným způsobem vytvořit vzhled pro pozadí k článku. V dnešním vydání vám zkusím poradit, jak se takové pozadí dá implementovat do editoru v OP.

Začnu především tím že se pokusím vysvětlit něco o html kódu. Pokud už někdo zkoušel psát článek a zkoušel co znamenají jednotlivé ikony v editoru, musel nepochybně všimnou ikony s titulkem "zdroj". Pokud do pracovní plochy editoru napíšete například "Jak na to ?" nastavíte barvu, styl, formát, písmo a velikost písma a poté kliknete na ikonu zdroje, zobrazí se vám kód zdroje toho co jste právě napsali, včetně toho co jste k písmu nadefinovali.

Myslím že není potřeba vysvětlovat že "font size" je velikost písma nastavená jako x-small, "face" je typ písma a "em" je kurzíva. Pokud se někdo seznamoval s kódem html, tak musí uznat že už to někde viděl ... nebo lépe řečeno, že to zná.
A právě v tomto duchu budeme pracovat dál. Nebudu nikomu vysvětlovat jak se věci nadefinují přímo v editoru protože, to je i nad moje síly, a já v tomto editoru nepracuji. Jen řeknu že existuje jednodušší způsob jak pracovat s kódem. Pokud chcete rozumět kódu, sežeňte si knihu o html, a nebo si na internetu najděte zdroje, kde se tyto věci můžete naučit.

Abych pravdu řekl nevím jestli mám dost času na tady někomu něco vysvětlovat o html. A tak poskytnu celý kód který je potřeba pro psaní článku a postupně si ho rozebereme. Ještě je ale potřeba vysvětlit jedna věc, a tou je styl. Když vytváříte html stránku, což je prakticky i jakýkoliv článek v editoru, je potřeba mu zadat styl. Styl se na webových stránkách dává do tzv. CSS souboru, kde se nadefinuje vše co je potřeba pro vzhled. Takový styl se dá zadat i do html, a bude platit pouze pro tuto stránku, resp. pro tento článek.
Začneme tedy tím že poskytnu kód který používám pro všechny články. Je ke stáhnutí zde

Takto upravený kód si zadejte do zdroje v článku a když přepnete zpět do pracovní plochy, ejhle, zobrazí se vám vzhled toho článku. A teď vysvětlím vše potřebné.

1. Jak porozumět kódu - styl

Začneme především stylem, kde si nadefinujete vše potřebné pro článek. Styl je vše to, co se nachází mezi tagy style ... to znamená to co je mezi párovým tagem který je zvýrazněn. Párový znamená to že někde začíná a někde končí. Každý párový tag se ukončuje lomítkem, tak jak to vidíte na obrázku.

Ve stylu se nachází vše co chceme v článku mít, obrázek v pozadí článku, velikost, styl a barvu textu, barvu odkazů, ale později třeba i šířku tabulky.

BODY, HTML první řádek nám říká toto, vše co je napsáno zde platí pro celý článek, pokud nebude řečeno jinak. Význam:
"font-family: Tahoma, Arial, Helvetica;" je skupina fontů, které se budou zobrazovat v prohlížeči, pokud nějaký prohlížeč nezná Tahomu, automaticky nastaví Arial, atd. Udávají se vždy jen tři různé fonty. Doporučuji nastavit jako první font arial, ten znají bezpečně všechny počítače. Dá se také nastavit jen jako font: arial; tedy pouze jen jeden druh fontu.
"font-size: 11px;" Velikost písma bude jedenáct pixelů.
"color: #000;" barva písma, barvy v html a css se nastavují pomocí hexadecimálního kódu. Ve stylu stačí zadat jen první tři čísla, ve zbytku kódu už musí být šest znaků. Doporučuji pro začátek psát vždy šest znaků. 000000 je černá, FFFFFF je bílá a nezapomínejte před znaky dát #. Potřebné barvy najdete třeba zde.

Body a Html je tedy všechno co se nachází mezi párovým tagem "body" a "html", ten ale v kódu není, protože editor ho vymaže ...

List druhý řádek je definicí, tzv. DIV. nazvat si ho můžete jak chcete, třeba PEPA, kód by pak vypadal #pepa. Význam tohoto kódu je takový, že:
width: 710px; šířka článku bude 710px; margin-left: auto; margin-right: auto; a vněší okraj bude automaticky vycentrován na střed stránky, (neplatí pro explorer, pokud by jste se na to koukali mimo editor), ale chovat se to bude nakonec stejně.

Jen taková malá vsuvka. V minulém článku jsem vám říkal aby jste si pozadí nastavili na šířku 710 pixelů, zde je to nadefinované a je potřeba to pro vzhled dodržet, pokud by si někdo nastavil "width: 750px", může si pozadí článku udělat široké 750 pixelů.

list_hlava je prvním div ve kterém natavujeme hlavičku článku. Je to část kde bude nastaveno vše podstatné jen pro hlavičku článku, pokud si zde nastavíte velikost písma jinou než v "body", nebude velikost písma 11 pixelů. Prakticky zde zopakujeme několik kódů, a přidáme kód pro pozadí článku. width: 710px; šířka článku bude 710px; height: 132px; je výška článku, která je určena výškou pozadí kterou jste si nastavili. Není dobré aby jste si dělali hlavičku delší než je pozadí, protože pokud se tak stane pozadí se bude opakovat v ose y, a pokud to zakážete tak v pozadí vznikne prázdná mezera. Pokud by jste použili obrázek který jsem vytvořil v minulém čísle bude výška 301 pixelů. background-image: url(http://www.brejk.cz/UserFiles/...) kód pro zavedení obrázku do pozadí. Do "url" se udává adresa obrázku. To znamená že za "UserFiles/" napíšete jméno složky a název souboru umístění na brejku. background-repeat: no-repeat; tato část kódů říká že se obrázek nebude opakovat. To znamená že pokud by jste měli obrázek široký 50 pixelů a nastavenou šířku hlavy na 700 pixelů, bude obrázek v hlavičce jen jednou. Pokud tam tento kód nebude objeví se vám obrázek v hlavičce minimálně čtrnáctkrát.

Tady je vidět výška obrázku z minulého čísla.

list_hlava h1 je kód pro nadpis který se v hlavičce objeví. Nadpisy máme h1, h2, h3 h4 a h5 a zde je ukázka pouze pro první z nich. Každý nadpis má svou automatickou velikost, ale pomocí kódu si ji můžete nastavit jak chcete. color: #42476F; je barva písma h1, a k tomu nastaven hexadecimální kód barvy. font-size: 15px; opět je velikost písma tentokrát jen pro h1 a padding: 30px 0px 0px 35px; je pixelama vyjádřen okraj nadpisu h1 v hlavičce, tzn. jak daleko bude nadpis od jiných pozic odsazen. První číslo "30px" je od zhora, 0 z prava, 0 ze spoda, a 35 pixelů zleva.

list_hlava p je označení pro klasický text, je to párový tag. Nastavuje vše o textu, který napíšete. line-height: 18px; nastavuje vzdálenost mezi jednotlivými řádky textu. color: #FFFFFF; barva písma textu, nastavena na bílou. margin: 15px 200px 15px 40px; nastavuje text od okrajů, čím více máte širší okraje pozadím tím více je potřeba nastavit levý a pravý okraj( v tomto případě to je 200 zprava a 40 pixelů zleva). text-align: justify; je centrování textu, mj. jsou center, left a right, čili vycentrovat, posunout vlevo, posunout vpravo a justify je roztáhnout po celé nastavené šířce. Do hlavičky se často text nepíše, takže tuto část lze vynechat.

list_telo je část kde se pozadí opakuje. Je to ta část, která se má opakovat podle délky textu v ose y. Zde na výšce tudíž nezáleží, obrázek se bude opakovat podle délky textu. pokud by si zde někdo nastavil "height" tak musí počítat s tím že si bude muset upravovat ručně podle délky. A opět zde tedy máme width: 710px; šířka článku bude 710px; background-image: url(http://www.brejk.cz/UserFiles/...) adresa pro zavedení obrázku do pozadí. Do "url" se udává adresa obrázku. To znamená že za "UserFiles/" napíšete jméno složky a název souboru umístění na brejku. background-repeat: repeat-y; je nastavení aby se obrázek opakoval v ose y.

Do těla je pak vložen obsah který se může volně pohybovat po šíři článku i mimo ni. Záleží jen na tom jak si nastavíte "margin". width: 710px; šířka článku bude 710px; margin: -2px 0 -15px 0; je nastavení vnějšího okraje ve kterém se budou nacházet texty, nadpisy, obrázky a tabulky. V tomto případě je nastaven vnější okraj -2px od shora, aby pozadí lepe doléhalo na hlavičku článku, pokud by to tak nebylo, nastavte si vyšší, a patnáct pixelů od zdola. background-image: url(http://www.brejk.cz/UserFiles/...); background-repeat: repeat-y; je opět adresa pozadí které se bude opakovat v ose y. Je to vlastně stejný obrázek jako dáváte "#list_telo". Důvod je ten že pokud si nastavíte okraj pro text nadpis a obrázky ... zjistíte že v pozadí jsou mezery, protože v předchozím případě bude pozadí pouze tam kde je text nebo obrázek. Tímto překryjete chyby, kterým prohlížeč nerozumí.

list_hlava h1 tohle už znáte, že ? Je to kód pro nadpis který se zobrazí v obsahu. Opět mu lze nastavit barvu color: #42476F; velikost font-size: 15px; o okraje padding: 15px 0px 15px 70px; První číslo "15px" je od shora, 0 zprava, 15 ze zdola, a 70 pixelů zleva.

obsah p je označení pro klasický text. Prakticky je nejdůležitějším bodem v článku, protože vám nastavuje vše o textu, který do článku napíšete. line-height: 18px; nastavuje vzdálenost mezi jednotlivými řádky textu. color: #000000; barva písma textu, nastavena na černou. margin: 15px 80px 15px 80px; nastavuje text od okrajů, čím více máte širší okraje pozadím tím více je potřeba nastavit levý a pravý okraj( v tomto případě to je 80 zprava a 80 pixelů zleva). text-align: justify; je centrování textu, mj. jsou center, left a right, čili vycentrovat, posunout vlevo, posunout vpravo a justify je roztáhnout po celé nastavené šířce. font-size: 11px; je velikost písma.

obsah a a obsah a:hover je nastavení odkazů. Vesměs všechny definice vám už musí být jasný jen text-decoration: none; znamená že žádný odkaz nebude podtržený a nebude mít žádný další dekorativní prvek jako je například puntík před odkazem.

list_pata je posledním odkazem je patička, kde jde opět o grafickou úpravu. Zde je nastavena opět šířka obrázku, výška obrázku pomocí height a adresa obrázku, včetně nastavení background-repeat: no-repeat; aby se vám obrázek neopakoval.

Aby jste si dokázali všechno dobře představit, udělal jsem tady takové barevné schéma, kde máte vysvětleny jednotlivé plochy které jsem tu vysvětloval. Fialová část je list, do níž je vložen zelený list_hlava, žlutý list_telo a modrý list_pata. A do list_telo je pak vložen modrý obsah, který svými rozměry zasahuje do vrchného a spodního prvku.

2. Jak porozumět kódu - obsah

Teď je potřeba se stylem správně pracovat, tím že jste ho nadefinovali ještě neznamená že se vám zobrazí :) To se dělá v této části která se nachází pod stylem. Vše co je uzavřeno v trojúhelníkových závorkách jsou tagy, ty jsou buď párové, nebo nepárové. Párové jsou ty co musí být ukončeny, aby prohlížeč rozuměl tomu kde daná změna začíná a kde končí. Párový tag je "p" "b" "i" "em" "h1" "a" a třeba i "div" a všechny párový tagy se ukončují lomítkem / a příslušným písmenem. Nepárový tag je "br". Jak jsem psal tak p je označení textu, b je tučný text, i a em je kurzíva, h1 až h5 je nadpis, a je odkaz, br je skok na nový řádek.
Tak jak jsem ukazoval v barevném schématu budete postupovat v nastavení. Nejprve zadáte základní div id="list" to je ta fialová část a ukončíte ho /div. Všechny div se ukončují stejně. Do něj vložíte další divy a to list_hlava, list_telo a list_pata. Do div list_telo pak vložíte obsah. Aby jste správně pochopili kde každý div začíná a kde končí tak jsem vám je barevně zvýraznil.

Takže velmi dobře vidíte jak vše funguje a jak jsou divy do sebe vkládány. Také vidíte jak jsou vloženy nadpisy v tagu h1 a je zde vidět že "SpVgg Elversberg 07 ( Míra )" bude v článku označeno tučně a následný text bude na novém řádku protože je zde nepárový tag br. Na konci textu na novém řádku bude napsáno že více najdete zde a na slovo zde je nastaven odkaz pomocí tagu "a" a za "href" se dosadí adresa odkazu. target=_blank nám zajistí že po kliknutí na odkaz se stránka otevře na nové stránce, tento příkaz se dopisuje k tagu "a".

* tento odkaz jsem vložil až při ukončení článku, takže doplňuji obrázek.

Tím pro dnešek končím, ale pokusím se co nejdříve navázat na tento článek, kde vám poskytnu další informace jak doplnit obrázek případně jak si nastavit změny v textu například centrování nebo barvu. A koukneme se na to hlavní, a to jsou tabulky.