Moduly: úvod Přehled po ročnících Přehled učiva Přehled pokrytí RVP Přehled výsledků učení

Webdesign a typografie

Typický ročník	2. SŠ
Interval vhodných ročníků	1. SŠ – 4. SŠ
Učivo	typografie a písmo, úprava textu, sazba, interpunkce, barvy a jejich reprezentace, RGB, principy webdesignu, HTML (struktura, značky, seznamy, tabulky), CSS (vlastnosti, barvy, rozvržení)
Předcházející modul	Tvorba digitálního obsahu
Bezprostřední výsledky učení	Vysvětlí základní pojmy z oblasti typografie a popíše vliv volby písma na čitelnost a dojem z textu. Použije základní pravidla sazby a interpunkce při úpravě textu pro webové prostředí. Popíše principy reprezentace a kombinace barev na webu, zohlední kontrast a přístupnost. Vytvoří jednoduché webové stránky pomocí HTML a CSS, strukturuje obsah a upraví jeho vzhled. Posoudí přívětivost a čitelnost uživatelského rozhraní z pohledu různých uživatelů.
Související RVP výsledky učení	Rozpozná informační toky v systémech; analyzuje a hodnotí informační systémy z různých hledisek; zvažuje i nepřímé a nezamýšlené dopady informačního systému na různé skupiny. Otestuje správnost a použitelnost svého řešení, navrhne a realizuje potřebná vylepšení; během provozu informačního systému rozpozná funkčně či věcně nesprávný stav, zjistí jeho příčinu a navrhne způsob jeho odstranění. Určí jednotlivé uživatelské role, specifikuje jejich činnosti, navrhne, otestuje a přizpůsobí rozhraní uživatelům.

Modul nabízí úvod do webdesignu se zaměřením na základní principy typografie, práci s barvami a tvorbu jednoduchých webových stránek pomocí HTML a CSS. Žáci se seznámí s tím, jak vhodná úprava textu, volba barev a rozvržení stránky ovlivňují čitelnost a použitelnost webu. Toto téma nespadá přímo do jádra SŠ výuky informatiky, jde o bonusovou specializační oblast, která však je aktuální a atraktivní. Téma má také přesah k obecnějšímu tématu informačních systémů, protože typická realizace informačních systémů je v dnešní době formou online webových systémů a vývoj uživatelského rozhraní je úzce provázán s webdesignem.

Bloky a dosažený postup

Seznam Náhledy

1. Typografie I Splněno základních cvičení: 0/6

Tento blok doporučujeme řešit.

2. Typografie I Splněno základních cvičení: 0/7

3. Webdesign: přehled, pojmy Splněno základních cvičení: 0/2

4. Barvy Splněno základních cvičení: 0/6

5. HTML Splněno základních cvičení: 0/5

6. CSS Splněno základních cvičení: 0/4

1. Typografie I

Typy písma

Souhrn tématu

Základními druhy písem jsou písma:

patková (serif) – Mají příčně ukončené tahy, vhodná spíše pro delší texty.
bezpatková (sans-serif) – Obvykle vhodná pro kratší texty, nadpisy a zobrazování na displejích.
ozdobná – Zejména pro příležitostné využití.

Sada znaků určitého stylu, zejména v digitální podobě, se označuje jako font.

Písmo může mít různé šířky jednotlivých znaků – v takovém případě se jedná o písmo proporcionální. Naopak tzv. neproporcionální písma mají znaky stejně široké, užívají se hlavně při psaní počítačového kódu.

Různé řezy písma slouží zejména k vyznačování. Patří mezi ně:

tučný řez (bold) – Pro důrazné zvýraznění, opticky vystupuje z okolního textu.
kurziva (italika) – Nakloněný řez, jeho kresba směřuje k psacímu písmu, slouží k jemnějšímu zvýraznění či např. vyznačování pojmů.
kapitálky – Mají tvar velkých písmen, ale velikost malých.

Typografické pojmy

Souhrn tématu

Písmo je souborem znaků (glyfů). Určitá kresebná varianta písma se označuje jako řez (např. tučné písmo, kurziva = italika), skupina řezů tvoří rodinu písma. Sada znaků jednotného stylu, zejména ve spojení s digitální technologií, se nazývá font. Možnost plynulého nastavení kresebných variant (např. tloušťky, šířky znaků aj.) v současnosti nabízejí tzv. variabilní fonty.

S písmem jsou spojeny např. tyto pojmy:

MAJUSKULE, VERZÁLKA – velké písmeno
minuskule, minuska – malé písmeno
kapitálka – velké písmeno velikosti malého, jako řez se používá k vyznačování
ligatura – slitek znaků, často např. „fi“, „fl“
index – horní či dolní, zmenšená varianta znaku používaná zpravidla ve vědeckém zápisu

Jako diakritické znaménko (akcent) se označuje znaménko v bezprostředním okolí písmene, které pozměňuje jeho význam/výslovnost (např. háček). Interpunkční znaménka se vkládají mezi písmena, upravují členění textu (např. tečka, dvojtečka, vykřičník).

Linie tvořící osnovu písma se označují jako dotažnice, základní linie, na níž písmena „sedí“, se nazývá účaří. Obvykle svislou vzdálenost řádků, respektive účaří, určuje proklad.

Text je možné zarovnávat zpravidla doleva, na střed, doprava či do bloku (v takovém případě se první slovo nachází na samotném začátku řádku a končí na jeho samém konci). Na začátku nebo konci stránky (či sloupce) by neměly být osamocené řádky (vdovy, sirotci, též souhrnně parchanty).

Prostrkání je vzdálenost znaků. Jako kerning se označuje specifické prostrkání mezi určitými znaky (např. ve slově VLTAVA bude horní tah T nad spodním tahem L, aby mezi písmeny nevznikla příliš velká optická mezera).

2. Typografie I

Interpunkce a speciální znaky

Souhrn tématu

Interpunkční znaménka se používají k členění textu, patří mezi ně například tečka, čárka, středník, vykřičník, otazník a dvojtečka. Interpunkce má úplně jiný význam než diakritika. Diakritická znaménka se umisťují přímo k písmenům a pozměňují jejich význam (v češtině jde nejčastěji o háčky a čárky).

Psaní mezer

Mezi tečku (.), čárku (,), vykřičník (!), otazník (?), dvojtečku (:) či středník (;) a následující slovo se přidává mezera, před nimi se nepíše, např. Lucie, přihraj.
Bez mezery se v češtině zapisuje čárka v desetinných číslech (3,14) nebo tečka/dvojtečka v zápisu času (20.00 hodin; 19:15).
Mezera se píše před levou a za pravou závorku: příklad (názorný) týkající se psaní závorek.
Mezi slova se píše vždy jen jediná mezera.
Mezera může měnit význam sdělení, např. 20 km znamená „dvacet kilometrů“ (podstatné jméno). Číslovky následované přídavným jménem se píší bez mezery, např. 18letá = osmnáctiletá, 20km = dvacetikilometrový.
Pevná (nezlomitelná) mezera slouží např. ke svázání předložky a následujícího slova (tak, aby předložka nezůstala na konci řádku).
Mezerou lze oddělovat tisíce v zápisu čísel (42 000 losů), naopak nikdy se nepoužívá při psaní letopočtu (rok 2026).

Speciální symboly

České uvozovky vypadají takto: „kuřátka“, anglické takto: “Walter”. Jedná se o zvláštní znaky, např. počáteční uvozovky je nepřípustné psát jako dvě čárky.
Na klávesnici je běžně přítomen znak spojovníku (-), ten slouží ke spojování slov (např. fialovo-bílý, Brno-střed), obvykle se píše bez mezer.
Pomlčka (krátká, en: –, dlouhá, em: —) obvykle vyjadřuje pomlku v řeči: v takovém případě se obaluje mezerami z obou stran (Podívej – to je ale spoušť!). Bez mezer se píše při vyjadřování rozsahu (10–12 °C). Pomlčku lze do textu vložit jako zvláštní znak. Běžné textové procesory obvykle na pomlčku přemění spojovník obalený mezerami či dvojici spojovníků během psaní.
Ve vědeckých zápisech či zápisech jednotek se používají indexy. Horní index: \mathrm{m^3}, dolní index: \mathrm{H_2O}.
Mezi další často užívané zvláštní znaky patří např. & (ampersand, anglicky and), × či ∙ (znaménko krát, první variantu neplést s x), / (lomítko), ° (znak stupně) či ⟶ (šipka).

3. Webdesign: přehled, pojmy

4. Barvy

Reprezentace barev

Souhrn tématu

Reprezentace barev je klíčová pro mnoho oblastí, např. webdesign, digitální fotografie, video, tisk. Existuje několik různých barevných modelů, z nichž nejčastější jsou RGB, CMYK a HSL.

RGB (Red-Green-Blue) model se používá pro digitální displeje, kde se barvy zobrazují jako kombinace tří základních barev – červené, zelené a modré. Každá z těchto barev má číselnou hodnotu v rozsahu 0–⁠255. RGB kódy se často zapisují pomocí hexadecimálních čísel. Protože toto kódování je velmi často využíváno v grafických programech, hodí se mít alespoň základní intuici, jakým barvám odpovídají různé RGB kódy.

CMYK (Cyan-Magenta-Yellow-Key) model se používá pro tisk, kde se barvy tvoří mícháním tří základních barev – azurové, purpurové a žluté – s černou.

HSL (Hue-Saturation-Lightness) model umožňuje reprezentovat barvy pomocí tří parametrů – odstín, sytost a jas. Odstín se mění v rozsahu 0–⁠360 stupňů, sytost určuje intenzitu barvy a jas určuje světlost nebo tmavost barvy. Tento model umožňuje jednoduché úpravy barev, jako je změna jasu nebo sytosti.

RGB barvy

Souhrn tématu

Barevný model RGB je způsob reprezentace barev pomocí tří složek: červená (red, R), zelená (green, G), modrá (blue, B). Jde o aditivní způsob míchání barev – jednotlivé složky barev se sčítají a vytvářejí světlo větší intenzity (světlejší barvu).

Při použití RGB modelu tedy barvu zapisujeme jako trojici čísel. Pro zápis hodnoty jednotlivých složek se používá mnoho různých zápisů. Například oranžovou barvu můžeme zapsat jako:

RGB(255, 160, 64) = dekadický zápis osmibitového čísla
#FFA040 = hexadecimální zápis
RGB(100%, 63%, 25%) = barevné složky v procentech
RGB(1, 0.63, 0.25) = barevné složky jako čísla od 0 do 1

Často používaný zápis je dekadický zápis osmibitového čísla, tj. číslice od 0 do 255.

Příklady barev z RGB zápisu RGB(0, 0, 0) černá RGB(255, 0, 0) červená RGB(100, 0, 0) tmavá červená RGB(0, 255, 0) zelená RGB(0, 0, 255) modrá RGB(255, 255, 0) žlutá RGB(255, 0, 255) purpurová RGB(0, 255, 255) azurová RGB(150, 150, 150) šedá RGB(255, 255, 255) bílá

5. HTML

HTML: základy

Souhrn tématu

Pomocí HTML můžeme označovat význam a zobrazení textu, například takto:

Toto je tučný text. A toto kurzíva.

Přehled běžných značek:

značka anglický pojem význam párová? h1–h6 heading nadpis 1. až 6. úrovně ano p paragraph odstavec ano pre preformatted předformátovaný text ano b bold tučné písmo ano i italics kurzíva (skloněné písmo) ano strong strong důležitý text ano em emphasis zdůrazněný text ano code code kód (neproporcionální písmo) ano a anchor odkaz ano img image obrázek ne br break zalomení řádku ne hr horizontal rule vodorovná čára ne

Typické zobrazení a je tučné písmo a kurzíva (tedy stejně jako a ), to však lze upravit pomocí kaskádových stylů (CSS).

Párové značky lze zanořovat, například tučnou kurzívu zapíšeme takto. Značky nelze „křížit“, tj. před uzavřením značky musíme vždy nejprve uzavřít všechny zanořené značky. Nepárové značky nemají žádný obsah ani ukončovací značku, např. .

Mezery a nové řádky

HTML: tabulky a seznamy

Souhrn tématu

Seznamy

Nečíslované seznamy vytvoříme pomocí párové značky <ul> (unordered list). Jednotlivé položky seznamu označíme pomocí značky <li> (list item):

Číslované seznamy vytvoříme pomocí párové značky <ol> (ordered list). Jednotlivé položky označíme opět pomocí značky <li>:

6. CSS

CSS: základy

Souhrn tématu

Kaskádové styly (CSS) umožňují určit vzhled jednotlivých prvků HTML stránky (či jiného XML dokumentu). Popis vzhledu a grafického rozložení dokumentu je tak do určité míry oddělen od obsahu, podobu určitých částí dokumentu lze snadno a hromadně měnit. Pomocí CSS lze také zajistit responzivní design: dokument může vypadat odlišně např. při různých rozměrech obrazovky.

CSS může být zapsáno v odděleném souboru (s příponou .css), na který se odkazuje z hlavičky HTML souboru. V takovém případě se jedná o tzv. externí CSS. Kaskádový styl též může být obsažen v tagu <style> v hlavičce HTML (interní CSS) či přímo u jednotlivých tagů v dokumentu (např. Hello world! – inline CSS).

Externí či interní CSS se skládá z určitých pravidel. Pravidlo obsahuje tzv. selektor (popisuje, který prvek bude pravidlem ovlivněný) a jednotlivé deklarace oddělené středníky, společně uzavřené ve složených závorkách. Deklarace vždy sestává z identifikátoru vlastnosti (např. font-size), dvojtečky a hodnoty (např. 12pt).

Selektory mohou ovlivňovat konkrétní html tag, v takovém případě sestávají pouze z písmen a číslic:

h2 {color: ochre} – Nadpisy 2. úrovně budou okrové.

Pokud mají deklarace platit pro více prvků zároveň, selektory se oddělují čárkou:

CSS: hlavní vlastnosti a jejich použití

Souhrn tématu

Mezi běžné vlastnosti používané v rámci CSS patří například:

vlastnost (identifikátor vlastnosti) význam background-color barva pozadí background pozadí, lze společně určit např. barvu, obrázek pomocí url(…) margin vnější odsazení (okraj) border rámeček padding vnitřní odsazení (okraj) width šířka height výška

Některé vlastnosti (např. margin, padding, border) mohou ovlivňovat jen určitou stranu prvku. Chceme-li určit hodnoty pro různé strany, můžeme použít název vlastnosti v kombinaci s -top, -bottom, -left či -right (např. padding-top). Také lze rozepsat více hodnot ke krátkému identifikátoru vlastnosti (např. padding: 5px 10px 15px 20px – nastaví odsazení shora, zprava, zespoda a zleva, padding: 5px 10px – nastaví svislé odsazení 5px a vodorovné 10 px).

Co se týče rozměrů prvku, ve výchozím nastavení se k určenému rozměru přičítá i odsazení a rámeček (tedy např. prvek s width: 100px; padding: 10px bude široký 120 px). Tomuto chování lze předejít pomocí nastavení * {box-sizing: border-box}.

Podobu textu ovlivňují například vlastnosti:

vlastnost (identifikátor vlastnosti) význam příklad hodnoty color barva textu green text-align zarovnání center font-size velikost textu 12pt font-weight tloušťka řezu bold font-style přepíná např. běžný řez a kurzívu italic font-family nastavení fontu (rodiny písma) sans-serif

Na způsobu zobrazení prvků se podílí např. vlastnost display. Její často užívané hodnoty jsou:

Náměty na doplňkové aktivity

Tvorba vlastního webu

U tohoto tématu je přirozené postavit jako klíčovou průběžnou aktivitu tvorbu vlastního webu. Může jít o fiktivní stránky (např. neexistujícího města či hudební kapely) nebo může zobrazovat reálná data na základě zájmů žáků.

Zhodnocení webu

Žáci si vyberou existující web a provedou jeho zhodnocení. Které aspekty webu jsou zpracovány dobře? Proč je hodnotí jako dobře zpracované? Které asi jsou nevhodné? Jak by se daly vylepšit?

Webdesign a typografie