Stránky s informacemi ohledně tvorby webu

Co je to tag

• Tag je značka uzavřená v ostrých (špičatých, šipkových) závorkách a slouží k strukturování webové stránky. Například tag <img> slouží pro přidání obrázku, tag <h1> pro přidání velkého nadpisu a tag <p> pro odstavec. (Přehledný seznam tagů najdete na Jak Psát Web od Yůhůa.)
• Chcete-li se podívat na to, jaké tagy byly použity při tvorbě této stránky, stačí stisknout Ctrl + U nebo zobrazit zdrojový kód přes prohlížeč.
  • Ve Firefoxu Zobrazení -> Zdrojový kód stránky
  • V Google Chrome "Stránka" -> Vývojář -> Zobrazit zdrojový kód

Typy tagů

Párové a nepárové

• Párový tag - například <p> </p> (odstavec)
• Nepárový tag - například <img> (obrázek)
  • Pozor, například tag <img> vyžaduje podle XHTML 1.0 Strict formu <img /> místo <img> - to jest včetně sebeuzavření lomítkem na konci!

S atributem a bez něj

• Tagy můžou mít nějaký atribut. Tag potom vypadá asi takhle: <tag atribut="blablabla">
• Tag bez atributu je například <p>
• Tag s atributem je například <img> u kterého se udává atribut src, který udává umístění obrázku a atribut alt, který udává, co se zobrazí, pokud obrázek neexistuje, nebo pokud má uživatel obrázky vypnuté (nejen z důvodu slepoty). Ve finále by tedy vložení obrázku vypadalo následovně: <img src="kote.png" alt="Duchaplný obrázek kotěte" />
• Tag nám udělá toto:
  

Základní tagy

• Odstavec - jak už bylo řečeno, pro odstavec se používá tag <p>
• Tučné písmo - jak se můžete podívat ve zdrojovém kódu této stránky, používá se <strong>
• Kurzíva - z kódu je také jasné, že kurzíva se značí tagem <em>
• Podtržené písmo - bylo z XHTML 1.0 Strict úplně vypuštěno a pro podtrhávání budete tedy muset použít CSS (kaskádové styly / Cascade Style Sheets) a nastavit si příslušný <span>.
  • Dříve se používaly tagy <i>, <b> a <u>, ale dnes se již nepoužívají, protože se jedná o fyzické formátování textu a ne formátování logické. Říká totiž prohlížeči, aby napsal daný text tučný, místo zvýraznění a kurzívou místo jiného typu zvýraznění. (Staré tagy také nejsou validní podle nových standardů, takže s nimi budete mít problémy.)
• Nový řádek - v kódu použitý těsně před obrázem, aby stránka vypadala lépe, tag <br />
  • Při používání tohoto tagu ovšem pozor, aby byl kód validní. Zuřivě napsat <br /><br /><br /><br /><br /><br /><br /><br /> není ani validní, ani praktická metoda.
• Kompletní přehled tagů pro úpravu textu na Jak Psát Web od Yůhůa

Statické a dynamické webové stránky

• Statické stránky jsou sada (HTML) stránek, která může být propojena odkazy a nemění se. Jedná se o zastaralý typ webové prezentace, který se hodí pro malé weby bez větších nároků. Nezvládají například komunikaci s databází a k aktualizování a přidávání obsahu těchto stránek je třeba znalost html kódu a nejsou tedy pro "obyčejné" lidi ideální volbou. Na druhou stranu zabírají málo místa, nejsou komplikované na údržbu a na jejich spuštění nepotřebujete mít žádné expertní znalosti databází a tak dále.
  • Jistě jste si všimli, že tato stránka je stránka statická.
• Dynamické stránky jsou o mnoho komplikovanější, než stránky statické. Jejich příkladem jsou například redakční systémy nebo internetové obchody. Webová stránka pracuje povětšinou s nějakou databází (např. MySQL), ze kterých pomocí jiných jazyků (např. PHP) dostává potřebné informace a sestavuje z nich stránku, kterou uživatel chce.
  • Dynamické stránky používáte každý den. Například iDnes.cz, nebo i domovská stránka Seznamu.

Standardy a validace

Jak jste si už zajisté všimli, psal jsem tu několikrát o standardech a validaci stránek. To si zaslouží vysvětlení. Jak jistě víte, na prohlížení webu můžete použít nejrůznější webové prohlížeče a každý prohlížeč běží na nějakém vykreslovacím jádru:

• Gecko (Mozilla Firefox)
• WebKit (Google Chrome, Safari, Konqueror)
• Presto (Opera)
• Trident (Internet Explorer)

Když píšete HTML stránky, udáváte pomocí kódu, jak má stránka vypadat a jak se má chovat. Prohlížeč stránku přeloží a nějak vám ji ukáže. O to se právě stará to vykreslovací jádro, které si můžete představit jako tlumočníka. (Mluvíte na něj jedním jazykem a on vám ho přeloží do jiného jazyka.)

Problém ovšem je, že každé jádro překládá kód trochu jinak. Každé jádro chtělo přijít s něčím novým a lepším a tak se jejich schopnosti měnily a měnily, až každé chtělo trochu něco jiného a rozdíly byly větší a větší. Představte si, že mluvíte na tlumočníka jazykem, a chcete říct "Dej mi sušenku!", ale v nářečí, jaké zná tlumočník se místo sušenka říká keks a proto přeloží žádost jako "Dej mi!", protože slovo sušenka nezná. (V reálu se například pro některé prohlížeče muselo říkat <border="none">, pro jiné <border="0">, a někdy speciální údaj noborder.)

Tyto problémy je snaha vyřešit pomocí standardů. Standardy jsou pravidla, podle kterých by se měly psát html stránky. Dodržování standardů má dvě výhody:

1. Ten, kdo stránky vytváří, ví jak je psát tak, aby se zobrazovaly ve všech prohlížečích co možná nejpřesněji.
2. Tvůrci prohlížečů vědí, co je "správně" napsaná stránka a jejich překlady se postupně sjednotí.

Standardy jsou ovšem stále ještě relativně nový nápad, takže to, že podle nich uděláte stránku, neznamená, že se zobrazí vždy stejně. Nicméně je lepší standardy dodržovat.

Jak zjistím, jesli je moje stránka validní?

Pro kontrolu, jestli stránka dodržuje standardy, se používá tzv. Validátor. Validátor pro nejrozšířenější standardy je W3C Validator, který najdete na této adrese: http://validator.w3.org/. I pokud vás nějaké standardy vůbec nezajímají, dá se validátor používat pro kontrolu vašich stránek. Například pokud zapomenete ukončit nějaký odstavec tagem </p>, nebo něco podobného, upozorní vás na to.

Ještě pár údajů

I standardů je zamozřejmě několik, protože né všechny stránky se píšou stejným jazykem a né všechno je už ve "standardním provedení" vymyšleno. Velmi používaný je standard HTML 4.01 Transitional, ale já osobně doporučuji psát podle "přísného" standardu W3C 1.0 Strict. Ve strictu se například musí všechny tagy uzavírat. U původně párových tagů se uzavírá tagem </blabla> a u původně nepárových lomítkem na konci začínajícího tagu (například: <img src="pes.png" />).

Nakonec si můžete na stránku dát třeba ikonku, jako známku toho, že jsou vaše stránky validní. (Když na ní kliknete, dostanete se na výsledky validátoru vaší stránky.) Může vypadat třeba takhle:

Témata, na kterých se pracuje

• Formátování textu (pomocí CSS)
• a další...

created by david roesel