HTML základy

Cílem následujícího cvičení je vyzkoušet si postupně vytvořit a otestovat (pomocí validátoru) škálu od jednoduché stránky, přes sadu stránek až po komplexní stránky. Použijte verzi XHTML1.1, pro účely předmětu používejte validátor konzorcia W3 - http://validator.w3.org/.

Grafickou podobu stránek neřešte!

1. Vytvořte jednoduchou webovou stránku (hello world) pomocí example XHTML1.1 document.
2. Zkontrolujte validitu stránky pomocí W3C Validátoru.
3. Svou stránku umístěte na veřejně dostupné místo dle požadavků na práci v semestru.
4. Zkopírujte do své stránky skutečný kompletní text z konce této stránky.
5. Pozorně si text přečtěte a pokuste se odhalit význam jednotlivých částí textu (zvláště ze seznamu na začátku).
6. Pokuste se využít maximum HTML elementů pro vhodné strukturování zkopírovaného textu.

Minimalistická stránka

1. Vytvořte základní kostru stánky, která bude obsahovat důležité metainformace včetně řeči a kódování.
2. Stránku nahrajte na příslušné servery pro jejich dostupnost přes HTTP.
3. Proveďte validaci stránky, případné chyby opravte.
4. Vyzkoušejte stránku zobrazit včetně diakritiky (háčky a čárky nad písmeny).
   TIP: <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

Hello World!

Webová adresa stránky je https://bi-zwu.pages.wr.cz/html/hello.html

Kompletní text

1. Rozšiřte webovou stránku o následující text a odkazy.
2. Text strukturujte — přidejte do něj maximum informace pro co nejlepší čitelnost.
3. Pokuste se využít co nejvíce vhodných elementů jazyka (X)HTML.
4. Odkazy vložte do textu na vhodná místa.
5. Textový obsah odkazů mají tvořit části zadaného textu.
6. Vizuální stránkou se nezabývejte, t.j. žádné CSS ani neřešte způsob zobrazení HTML elementů.

Neformátovaný text

Odkazy

Boule

Webová adresa stránky je https://bi-zwu.pages.wr.cz/html

Typické problémy studentských řešení (doporučení)

• Neřešte vzhled (pokud použijete např. <strong>, tak proto, že ten text je důležitý, ne aby byl tučně), t.j. je to skutečně důležité, kdybych si zapamatoval jenom to, bylo by to OK?
• Ne všechno je odstavec! (má to věty a myšlenku?)
• Nevkládejte nadpis do odstavce
• Používejte jenom malé písmena pro názvy elementů
• Nedávejte značky automaticky nebo podle vzhledu (je potřeba přečíst a pochopit)
• Používejte validátor často, chyby se pokuste rovnou opravit (nekopírujte je)
• Pokud výstupu validátoru nerozumíte, zeptejte se
• Odkazy použijte uvnitř textu (rozmyslete, která část textu bude odkazem), ne na konci stránky
• Nezapomeňte i na další řádkové elementy (em, strong, …​)
• Obvykle je špatně, když jsou nadpisy hned po sobě, t.j. nic mezi nimi není (text je v tomto směru vpořádku)
• Nadpis je obvykle tvořen několika slovy, ne celou větou, nekončí interpunkcí
• Drobečková navigace (BCN) je navigací, tedy většinou obsahuje odkazy
• Nadpisy vlastně přirozeně tvoří seznam, stejně jako odstavce za sebou lze chápat jako seznam odstavců, ale nestrukturujte je tak
• Pokud používáte elementy z HTML5, je potřeba použít šablonu pro HTML5, ne pro XHTML1.1