HTML úkoly

Úkol č. 0

Vysázejte následující text do HTML. Hordubal, plain text

Úkol č. 1

Vysázejte text v HTML podle předlohy

Odstavcovou zarážku, nepravou kurzívu a kapitálky sázet nemusíte. Výsledný dokument bude v těle (body) obsahovat pouze jeden odstavec. Použijte vhodné značky.

Úkol č. 2

Za použití stylů odstavce (text-align) vysázejte v HTML text podle předlohy

Pro inspiraci se podívejte, jak se dají pomocí CSS simulovat různé typy vyznačování odstavců.

Úkol č. 3

Podívejte se, co se píše o interpunkci na Jak psát web

Poté vysázejte typograficky správně text v HTML podle PředlohaCSS. Musí být správně vysázený při libovolné šířce okna prohlížeče!

Úkol č. 4

Vysázejte článek o Lingvistice z české Wikipedie pomocí základního HTML (nestylujte pomocí CSS). Můžete použít zdroj z Wikipedie, ale upozorňuji, že je zbytečně složitý a nepřehledný, takže doporučuji zdrojový text napsat znovu na základě textu z vybrané stránky na Wikipedi.

Úkol č. 5

HTML kód se často generuje automaticky. Ne vždy je vhodné vytvářet vše ručně. Jiný způsob jak si ulehčit práci, je použít HTML šablonu, do které pouze vyplníte svůj vlastní obsah.

Na internetu je nepřeberné množství takových šablon. Pro jednoduchost jsem vám jednu našel. Hodí se pro vytvoření profilové stránky. Šablona vypadá takto.

Stáhněte si potřebné soubory v souboru ZIP. Soubor rozbalte, obsahuje 3 soubory: html, css a jpg. Soubor .css obsahuje definice kaskádových stylů pro stránku. Na vás je editovat index.html: doplňte do šablony informace o své osobě.

Úkol č. 6

Najděte alespoň 5 různých webů na internetu a na nich článek / stránku, která obsahuje alespoň jednu typografickou chybu. Chybějící slitky se nepočítají. ☺

Úkol č. 7

Pro zopakování HTML a CSS si udělejte pěkný úvodní kurz na stránkách Codeacademy

Tip č. 1

Naučte se používat klávesovou zkratku Ctrl+U pro zobrazení HTML zdrojového kódu libovolné stránky. Zkoumáním kódu různých stránek se dá lecčemu naučit.

Tip č. 2

Naučte se používat inspektor elementů (není dostupný ve všech prohlížečích). Pokud je dostupný, tak se pomocí pravého tlačítka myši na daný element a zvolení „Inspekt element“ či „prozkoumat prvek“ můžete podívat do místa HTML zdrojového kódu, kde se vyskytuje daný prvek, na který jste kliknuli.

Další doporučená četba

• Fonty
• Typografie v HTML+CSS
• Sazba odstavců
• Interpunkce