Revision 30296 of "Kódování webu" on cswikiversity

<h2>Co je HTML?</h2>
'''HTML (Hypertext Markup Language)''' je kód, který slouží k zobrazování dat předem zadaným způsobem; je to vlastně podbrobný návod, jak zobrazit přijatá data na obrazovce - kód HTML je tedy přesným a stručným vyjádřením toho, co chceme zobrazit v programu obecně zvaném prohlížeč, jedná se o jazyk, který slouží k popisu webové stránky: 
<br /><br />
<font color="#8F0098">
 &lt;img src="http://www.erethizon.net/img/button1_erethizon.jpg" align="left"&gt;<br />
 &lt;font size="3" color="black"&gt;Vítejte na stránkách Bojové školy kouzel Erethizon&lt;/font&gt;<br />
 &lt;br&gt;&lt;br&gt;<br />
 &lt;font size="2"&gt;&lt;i&gt;Jedinečná škola na internetu&lt;/i&gt;&lt;/font&gt;<br />
</font>
<br />


<u>Pro ukázku toho, co znamená výše zmíněný zdrojový kód:</u>
[[Soubor:zzhtmlcss_1.jpg|rám|střed|Ukázka č.1]]

'''Co z toho tedy vyplývá?'''
# Prvně definujeme typ HTML (XHTML) dokumentu, následně vytvoříme označení html dokumentu <em>[&lt;html&gt; &lt;/html&gt;]</em>, hlavičku <em>[&lt;head&gt; &lt;/head&gt;]</em> a na závěr tělo <em>[&lt;body&gt; &lt;/body&gt;]</em>
# V HEAD se definují informace samotné webové stránky
# Samotný kód tvoříme v části <em>[&lt;body&gt; &lt;/body&gt;]</em> Vyjímkou jsou CSS styly, kterým se budeme věnovat později.
# Využíváme odsazení. Odsazujeme podle vnořených částí. Doporučené množství jsou 2 mezery. Pro rychlejší manipulaci doporučuji tabulátor.
# Hlavní nadpis webu – h1 by měl být na začátku. Za ním by měl následovat další obsah v logické posloupnosti.


<b><font size="2">Každá HTML značka by měla být používána na to, k čemu byla určena.</font></b>

[http://www.erethizon.net/soubory/vyuka/prehled-tagu.pdf Přehled HTML tagů - zde ke stažení]


<h2>Proč bychom měli dodržovat sémantiku, když stránky mohou vypadat stejně i s kódem nesémantickým?</h2>
# Stránky se sémantickým kódem jsou pro vyhledávače (Google, Seznam, Bing, Yahoo, …) více viditelné. Ve výsledcích vyhledávání se tak budou naše stránky umísťovat na přednějších pozicích a tím pádem je navštíví více lidí. Na web s nesémantickým kódem, který je ve výsledcích hledání někde na páté stránce či dál, moc lidí nezavítá.
# Sémantický a správně strukturovaný kód se lépe spravuje.
# Pokud vypneme kaskádové styly, web je i tak poměrně přehledný.
# V neposlední řadě, správně strukturovaný a sémantický web je důležitý pro zrakově postižené uživatele, kterým obsah stránek předčítá hlasová čtečka, jež se řídí právě HTML kódem.


<h2>Párové a nepárové tagy</h2>

<b>Všechny tagy jsou uzavřeny ve špičatých závorkách: &lt;&gt;, včetně všech svých parametrů, které tag ovlivňují. Všechno ostatní, co se mimo tyto značky nachází, je text, který prohlížeč zobrazí.</b>

HTML používá párové a nepárové tagy, kdy párové mají vliv na určitou část dokumentu, např. na text (kurziva, tučnost, zarovnání,...) - jeho první část se nachází před danými prvky a druhá za nimi, což přesně vymezuje část, na niž má mít tato párová značka vliv. Nepárová značka naopak má vliv sama na sebe, definuje v HTML nějaký prvek, například obrázek, nebo má vztah k celému dokumentu.


<b>Párový tag tedy obecně vypadá takto:</b>
<font color="#8F0098">
 &lt;značka&gt;kód HTML, na nějž má mít značka vliv&lt;/značka&gt;
</font>


<b>Nepárový tag tedy obecně vypadá takto:</b>
<font color="#8F0098">
 &lt;značka&gt;
</font>


<b>Pokud tyto znalosti adaptujete na ukázkový příklad:</b>
<font color="#8F0098">
 &lt;img src="http://www.erethizon.net/img/button1_erethizon.jpg" align="left"&gt;
 &lt;font size="3" color="black"&gt;Vítejte na stránkách Bojové školy kouzel Erethizon&lt;/font&gt;
 &lt;br&gt;&lt;br&gt;
 &lt;font size="2"&gt;&lt;i&gt;Jedinečná škola na internetu&lt;/i&gt;&lt;/font&gt;
</font>

Pak <b>&lt;font&gt;&lt;/font&gt;</b> je příklad párového tagu a <b>IMG</b> a <b>BR</b> nepárového tagu. Zjednodušeně lze tedy říci, že celý zdrojový text HTML se skládá z párových a nepárových tagů a textu, který je umístěn mimo tyto značky, tedy mimo špičaté závorky.


<h2>Kaskádové styly</h2>
Jak byste se asi cítili, kdyby Vám někdo pod ruku místo Wordu nebo jiného profesionálního textového editoru dal třeba jednoduchý Wordpad? Veškerá pohodlná práce by byla ta tam. každý odstavec, každý nadpis musíte zvlášť formátovat, ve Wordpadu totiž neexistuje nic jako definice stylů, které jednou nastavíte a pak je jednoduše používate. Vše se  musí dělat na místě s daným kouskem textu.

Tak jste se možná cítili, když jste vytvářeli svoje první stránky v HTML. Žádné vyšší možnosti formátování, u každého odstavce nutnost zadat opět parametry značky <b>FONT</b>, opakované definice stylů. Klasické HTML tohle prostě neumí a někdy to může docela dost vadit. Ostatně, posuďte sami u tohoto příkladu. Je to krátký text, kdy každý ostavec je naformátován stejně (písmo Arial CE, velikost 10 bodů, barva černá), mezi každým odstavcem je nadpis, všechny nadpisy jsou opět formátovány stejně (písmo Verdana, velikost 16 bodů, barva tmavě modrá). Protože HTML definuje velikost písma, než třeba Word, jsou zde použity standardní velikosti HTML: velikost 10 bodů reprezentuje velikost 2, velikost nadpisu 16 bodů reprezentuje tag <b>H3</b>.

<font color="#8F0098">
 &lt;font face="Verdana" color="blue"&gt;&lt;h3&gt;Nadpis1&lt;/h3&gt;&lt;/font&gt;
 &lt;font face="Arial" size="2"&gt;
  &lt;p&gt;Lze přenášet data mezi jednotlivými programy, a to bez toho, že by bylo nutné je ukládat do souborů a tyto soubory zase otvírat. &lt;/p&gt;
 &lt;/font&gt;
 &lt;font face="Verdana" color="blue"&gt;&lt;h3&gt;Nadpis2&lt;/h3&gt;&lt;/font&gt;
 &lt;font face="Arial" size="2"&gt;
 &lt;p&gt;Podobně lze přenášet data i mezi jednotlivými dokumenty stejného programu.&lt;/p&gt;&lt;/font&gt;
 &lt;font face="Verdana" color="blue"&gt;&lt;h3&gt;Nadpis3&lt;/h3&gt;&lt;/font&gt;
 &lt;font face="Arial" size="2"&gt;&lt;p&gt;Stejně tak lze přenášet data mezi různými místy jednoho dokumentu, dokonce i celé dokumenty a složky.&lt;/p&gt;&lt;/font&gt;
 &lt;font face="Verdana" color="blue"&gt;&lt;h3&gt;Nadpis4&lt;/h3&gt;&lt;/font&gt;
 &lt;font face="Arial" size="2"&gt;&lt;p&gt;Mezi programy lze vytvářet pomocí přenesených dat tzv. propojení.&lt;/p&gt;&lt;/font&gt;
</font>

<div style="border: 1px solid #000; padding: 5px;">
  <font face="Verdana" color="blue"><h3>Nadpis1</h3></font><font face="Arial" size="2"><p>Lze přenášet data mezi jednotlivými programy, a to bez toho, že by bylo nutné je ukládat do souborů a tyto soubory zase otvírat. Data cestují mezi aplikacemi přes tzv. schránku; každá slušná aplikace ve Windows 98 umí data do této schránky umístit a také je z ní vyjmout.</p></font>
  <font face="Verdana" color="blue"><h3>Nadpis2</h3></font><font face="Arial" size="2"><p>Podobně lze přenášet data i mezi jednotlivými dokumenty stejného programu; v tomto případě se navíc neztrácí kvalita dat (uspořádání, atributy, "inteligence"). </p></font>
  <font face="Verdana" color="blue"><h3>Nadpis3</h3></font><font face="Arial" size="2"><p>Stejně tak lze přenášet data mezi různými místy jednoho dokumentu, dokonce i celé dokumenty a složky: způsob je neobyčejně jednoduchý a také rychlý.</p></font>
  <font face="Verdana" color="blue"><h3>Nadpis4</h3></font><font face="Arial" size="2"><p>Mezi programy lze vytvářet pomocí přenesených dat tzv. propojení. Tato propojení umožňují spouštět poklepáním na umístěná data (umístěný objekt) původní aplikaci; pokud navíc dojde ke změně původních dat, je tato změna reflektována tam, kde jsou pomocí propojení umístěna.</p></font>
</div>
<div align="right"><i>Ukázka výše zmíněného zdrojového kódu.</i></div>

Vidíte, že zdrojový kód za použitých klasických metod formátování v HTML je zdrojový kód velice nepřehledný a zbytečně dlouhý. Sice poskytne požadovaný efekt, představte si však, že podobných prvků bude na stránce více. Zdrojový kód stránky bude dlouhý a bude se dlouho stahovat na klientský počítač. A přitom to lze vyřešit tak elegantně a jednoduše, a sice za použití kaskádových stylů, CSS:


<b>Do sekce HEAD se umístí tato definice dvou použitých stylů:</b>

<font color="#8F0098">
 &lt;style type="text/css"&gt;
 h3 { 
  font-family: Verdana;
  font-size: 16px;
  color: blue;
   }
 p { 
  font-family: Arial;
  font-size: 10px;
  color: black;
   }   
 &lt;/style&gt;
</font>

Vlastní zdrojový kód vypisovaného textu pak bude vypadat takto:

<font color="#8F0098">
 &lt;h3&gt;Nadpis1&lt;/h3&gt;
 &lt;p&gt;Lze přenášet data mezi jednotlivými programy, a to bez toho, že by bylo nutné je ukládat do souborů a tyto soubory zase otvírat.&lt;/p&gt;
 &lt;h3&gt;Nadpis2&lt;/h3&gt;
 &lt;p&gt;Podobně lze přenášet data i mezi jednotlivými dokumenty stejného programu.&lt;/p&gt;
 &lt;h3&gt;Nadpis3&lt;/h3&gt;
 &lt;p&gt;Stejně tak lze přenášet data mezi různými místy jednoho dokumentu, dokonce i celé dokumenty a složky: způsob je neobyčejně jednoduchý a také rychlý.&lt;/p&gt;
 &lt;h3&gt;Nadpis4&lt;/h3&gt;
 &lt;p&gt;Mezi programy lze vytvářet pomocí přenesených dat tzv. propojení.&lt;/p&gt;
</font>

Stránka bude v prohlížeči vypadat stejně jako v případě formátování každého odstavce zvlášť. 

Co se vlastně stalo? V sekci HEAD jsem předefinoval existující styly H3 a P, které má již HTML standardně definovány. Těm jsem pomocí parametrů stylů přiřadil požadované vlastnosti. Pak už stačilo text, který se má zobrazit, těmito styly zformátovat. Záměrně jsem použil pouze přidání vlastností stylům již existujícím, aby byl příklad jasnější. Samozřejmě lze definovat i styly nové.

Co vlastně styly, v HTML zvané CSS, kaskádové styly, jsou? Styly nabízí tvůrcům stránek daleko širší formátovací možnosti, a to nejen textu, o jakých se ještě před několika lety nikomu ani nesnilo. Původní koncepce tagů a jejich parametrů je totálně nabourána a postavena na hlavu. Stejně jako skripty i definice stylů je umístěna na začátku stránky a jednotlivé tagy se na ně v průběhu zobrazení a práce se stránkou odkazují. Vlastně i definice stylů je více podobná programu v Javascriptu než vlastnímu HTML; ale o tom později. Díky stylům tak získáváme možnosti, jaké známe třeba z již zmíněného Wordu nebo oblasti DTP. Otrocké opakování formátovacích tagů, tak jak tomu bylo u prvního příkladu, je prostě minulostí. Kdo jde s dobou, používá CSS.

<h2 style="font-size: 20px;">Jak nadefinovat styl v dokumentu</h2>

Definice stylu je umístěna v sekci HEAD, je také v poznámce, je uzavřena do složených závorek. Jednotlivé položky definice jsou odděleny středníky. Dejme tomu, že chcete změnit vlastnosti stylu H3, tak jako bylo uvedeno už v příkladu využití stylu. Do sekce HEAD umístíte tuto strukturu:

<font color="#8F0098">
 &lt;style type="text/css"&gt;
 h3 { 
  font-family: Verdana;
  font-size: 16px;
  color: blue;
  font-weight: bolder;
 } 
 &lt;/style&gt;
</font>

Myslím, že je docela jasné, co tato definice udělá: existujícímu stylu H3 (tedy nadpisu třetí úrovně) přiřadí modrou barvu, velikost písma je 16 bodů, druh písma Verdana a bude vypsán tučně. 

<u>Obecně má definice stylu tyto pravidla:</u>
* Definice stylu je umístěna v hlavičce zdrojového kódu HTML, tedy sekci HEAD
* Definice stylu je ohraničena závorkami:  <font color="#8F0098">&lt;style&gt;&lt;/style&gt;</font>

Tímto jednoduchým příkladem jsme tedy předefinovali, resp. upravili styl H3. Pokud tedy kdekoliv ve stránce použijete značku &lt;h3&gt;&lt;/h3&gt;, bude nadpis formátován podle definice stylu. Lze však vytvořit i nový styl, tedy takový, který definicí nebude opraven, ale přímo vytvořen. Tedy se před jméno tohoto stylu umístí tečka (.) nebo (#) mřížka:

<font color="#8F0098">
 &lt;style type="text/css"&gt;
 .novy { 
  font-family: Verdana;
  font-size: 16px;
  color: blue;
  font-weight: bolder;
  }   
 &lt;/style&gt;
</font>

Pokud je definován styl jinak než úpravou stylu existujícího, nestačí už jen použít tag pro daný styl. Musí se dát tag, který pracuje s textem, jenž chceme podle stylu naformátovat, vědět, že má daný styl použít. Dejme tomu, že chceme na text použít styl <i>novy</i> nebo <i>novy2</i>. Na daný text jej můžeme aplikovat třeba takto:

<font color="#8F0098">
 &lt;p class="novy"&gt;Zatímco se hrabě cpal cukrovím z hodovního stolu, král Michael ho vyzval na souboj.&lt;/p&gt;
</font>

Zde vidíte příklad užití kaskádových stylů. Protože první formátovací styl P, byl definován dříve, velikost písma, jeho font a řez bude přebit stylem <i>novy</i>, který byl definován později. Z příkladu je také patrné, že užít nadefinovaný styl lze kdekoliv. Není problém jej třeba umístit do značky <b>h3</b> definující nadpis:
<font color="#8F0098">
 &lt;h3 class="novy"&gt;&lt;/h3&gt;
</font>

nebo do tagu <b>DIV</b>: 
<font color="#8F0098">
 &lt;div class="novy"&gt;&lt;/div&gt;
</font>

Není však vždy žádoucí používat nadefinovaný styl zároveň se stylem existujícím, jak tomu bylo doposud v uvedených příkladech. Pro tento případ má HTML značku <b>SPAN</b>:

&lt;span class="novy"&gt;Zatímco se hrabě cpal cukrovím z hodovního stolu, král Michael ho vyzval na souboj.&lt;/span&gt;

Na text uvedený uvnitř značky <font color="#8F0098">&lt;span&gt;&lt;/span&gt;</font> bude použit pouze styl <i>novy</i> a žádný jiný (P, DIV ani H3). Sama značka nemá žádný význam, nijak text neformátuje ani na něj nemá žádný vliv.

Pokud jde o parametr CLASS, ten definuje tzv. třídu. Třídy velice snadno usnadňují práci, jak je patrné z těcho příkladů. Vlastnosti stylu se definují v sekci HEAD a pak už je jen uveden odkaz na jméno stylu právě pomocí parametru CLASS. Obecné použití je tedy takovéto:

<i>Nejprve se styl nadefinuje:</i>
<font color="#8F0098">
 &lt;style type="text/css"&gt;
 .cerveny { 
  font-size: 12px;
  color: red;
   }   
 &lt;/style&gt;
</font>

<i>Použití ve stránce je pak následující:</i>
<font color="#8F0098">
 &lt;p class="cerveny"&gt;Červený text&lt;/p&gt;
</font>

<b>Základní užití stylu tedy znáte. Obecná syntaxe definice stylu tedy je:</b>
<font color="#8F0098">
 &lt;style type="text/css"&gt;
 .jmeno1 { 
  parametr1: hodnota;
  parametr2: hodnota;
  parametr3: hodnota;
 }  
 
 .jmeno2 { 
  parametr1: hodnota;
  parametr2: hodnota;
  parametr3: hodnota;
   }      
 &lt;/style&gt;
</font>

Definice stylu je tedy započtena značkou <b>STYLE</b> s parametrem <b>TYPE="text/css"</b>. Pak následuje definování stylů. Parametry každého stylu jsou uvedeny ve složených závorkách, každý má dvě části: jméno parametru a hodnota parametru, ukončeno středníkem. Jak jste si jistě všimli u předchozích konkrétních příkladů, není nutné řetězcové hodnoty uvádět v uvozovkách. Mezi jednotlivými parametry dokonce ani nemusejí být volné řádky, vše je odděleno středníky. Definice stylu je ukončena uzavírající složenou závorkou, následuje ukončení definice <b>STYLE</b>. 

Styly mohou být definovány také přímo v textu, tj. přímo v sekci <b>BODY</b> může být bez jakékoli definice v sekci <b>HEAD</b> uvedeno:

<font color="#8F0098">
 &lt;p style="color: red; font-size: 18px; text-decoration: underline;"&gt;Zatímco se hrabě cpal cukrovím z hodovního stolu, král Michael ho vyzval na souboj.&lt;/p&gt;
</font>

Tady nejde o žádné předdefinování stylu, ale přímo o definici stylu na místě, kde bude použit. Různých parametrů zde může být uvedeno daleko více; jistě uznáte, že provést něco takového pomocí značek a parametrů HTML by bylo velice pracné a hlavně nepřehledné.


<h2>Závěr</h2>
Z toho, co jsme si zde řekli je vidět, že HTML má dány přesné principy stavby zobrazované stránky a že je podstatně jednoduší než programovací jazyky, neboť v něm jde pouze o zbrazování, nikoliv výpočty, skoky, podmínky, funkce, podprogramy aj. Lze jej přirovnat k textovému souboru RTF, který také používá k formátování obsahu dokumentu jednoduché tagy, i když jde o formát mnohem komplexnější a nabízející lepší výstup.

Jednotlivých značek má HTML velice mnoho a není účelem tohoto článku Vám je všechny ukázat a popsat. Stále totiž vznikají nové, které nabízejí bohatší zobrazovací schopnosti - HTML se stále vyvíjí a to, co je dnes složité, bude se za rok provádět jednou značkou. 

Nedílnou součástí správně syntaxního webu jsou kaskádové styly (CSS). Pomocí nich dokážeme správně napsat sémantický web. Využívání CSS stylů také zaručuje snadnou správu vytvořené stránky.