KASKÁDOVÉ STYLY - PÍSMO

Transkript

1 KASKÁDOVÉ STYLY - PÍSMO Název školy Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště Název DUMu Kaskádové styly písmo Autor Zdeněk Hrdina Datum Stupeň atypvzdělávání Střední odborné vzdělávání Odvětví / Vzdělávací oblast -- dle RVP.cz -- Vzdělávací obor -- Informační technologie -- Tematická oblast -- Grafika a web-- Druh učebního materiálu Výukový materiál Cílová skupina Žák, let Anotace a popis způsobu použití ve výuce Vybavení, pomůcky Klíčová slova Výukový materiál určen k frontální prezentaci učitelem, případně jako materiál pro samostudium, nutno doplnit výkladem, náplň: nastavení rodin písma na webových stránkách -PCučebna, projektor, software pro tvorbu webových stránek CSS, HTML, písmo, rodina písma Číslo projektu Název šablony CZ.1.07/1.5.00/ III/2 Inovace a zkvalitnění výuky prostřednictvím ICT ZLÍNSKÝ KRAJ

2 ÚVOD Výukový materiál ve formě pracovního listu se stručným výkladem tématu Kaskádové styly v hodinách APS. Je možno jej také využít v předmětech DAS, APW na oboru IT nebo předmětu ITE na oboru OA. Prezentace doprovází výklad učitele a aktivně zapojuje žáky.

3 PÍSMO U písma se dá pomocí nastavit velké množství parametrů. Mezi ty nejpoužívanější patří: rodina písma (font-family) velikost (font-size) tučnost (font-weight) kurzíva (font-style) kapitálky (font-variant)

4 FONT-FAMILY Rodinou písma rozumíme typ jako třeba Arial, Verdana, Times New Roman apod. Aby se stránka zobrazila v daném písmu, musí být tento typ písma v počítači nainstalovaný. Proto se doporučuje používat standardní typy písma (pozn. existuje i způsob zadání vlastního písma, který je ale nad úrovní tohoto materiálu) Pro každý prvek mohu nastavit i více písem najednou. V případě, že první písmo nebude nainstalováno, zobrazí se stránka v písmu uvedeném na druhé pozici nadpis H1 bude písmem Verdana, pokud není tak Arialem, pokud ani ten není, pak obecným bezpatkovým písmem.

5 Obecné typy písem: FONT-FAMILY sans-serif bezpatkové písmo Arial, Verdana apod. serif patkové písemo např. Times New Roman Na obrázku je porovnání textu bezpatkovým a patkovým písmem. Existují i další varianty, které se ale používají méně (monospace písmo jako na psacím stroji, cursive psací písmo)

6 FONT-SIZE Velikost písma udáváme v různých jednotkách: pixely obrazovkové body, zkratka px body typografické body, zkratka pt milimetry zkratka mm palce zkratka in výška písmena M zkratka em procenta zkratka % slovně xx-small, x-small, small, medium, large, x-large, xx-large

7 FONT-WEIGHT, FONT-STYLE tučné písmo se nastavuje pomocí vlastnosti bold, obyčejné písmo pomocí normal další možnosti jsou zadávat hodnoty tučnosti číselně, nepoužívá se to tak často kurzíva se zadává pomocí vlastnosti font-style: italic, obyčejné písmo pak pomocí normal

8 FONT-VARIANT pomocí vlastnosti font-variant můžeme nastavit kapitálky (hodnota small-caps) Kapitálky mají velká písmena (napsaná se shiftem) zvýšená proti ostatním písmenům (která jsou také velkými písmeny) PETR - kapitálky (P bylo psáno se shiftem ostatní bez) PETR všechna velká

9 PROCVIČENÍ Vytvořte nadpisy, které budou vypadat následovně: písmo Verdana, případně bezpatkové, velikost písma large, tučné, kapitálky nadpis H1 písmo Verdana, případně Arial, případně bezpatkové, velikost 12 pixelů, netučné, kurzíva nadpis H2 vytvořte jednoduchou stránku, kde budou uvedené nadpisy zobrazeny.

10 POUŽITÉ ZDROJE www stránky: 1. JANOVSKÝ, Dušan. Jak psát web: Font-family. Jak psát web [online]. [cit ]. Dostupné z: 2. JANOVSKÝ, Dušan. Jak psát web: Font-size. Jak psát web [online]. [cit ]. Dostupné z: 3. JANOVSKÝ, Dušan. Jak psát web: Font-variant. Jak psát web [online]. [cit ]. Dostupné z: 4. JANOVSKÝ, Dušan. Jak psát web: Font-weight. Jak psát web [online]. [cit ]. Dostupné z: obrázky: zdroj vlastní