Předmět: Typografie na webu

Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola – adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace www.zstgmivancice.cz [email protected] Na Brněnce 1, Ivančice, okres Brno-venkov Šablona: III/2 č. 4 Ověření ve výuce (dne): 18. 9. 2012 Třída: 9. A, 9. B, 9. C Název:

Pořadové číslo hodiny: 6 Předmět: Typografie na webu

Typografie na webu

Anotace: Materiál má za cíl seznámit žáky s hlavními typografickými prvky, především se správným výběrem písma, jeho použitím a sazbou. Výklad je doplněn názornými ukázkami správného a chybného obsahu. Prezentace je součástí výuky tvorby webových stránek bez znalosti HTML jazyka. Zápis s dalšími úkoly je k dispozici na http://www.zstgmivancice.cz/studium/info9/kap03.html. Autor: Mgr. Otmar Němec Jazyk: čeština Očekávaný výstup: Uvědomuje si důležitost dodržování typografických pravidel. Klíčová slova: typografie, web Rozvíjené klíčové kompetence: KU, KŘP Druh učebního materiálu: prezentace Druh interaktivity: kombinované Cílová skupina: žák Stupeň a typ vzdělávání: základní vzdělávání – druhý Ročník: devátý Celková velikost: 980 kB

Typografie na webu Typografie Vysvětlení pojmu typografie soubor pravidel, jak sázet text pravidla o tom, jak má textový obsah vypadat, aby byl dobře čitelný, snadno se v něm orientovalo a aby působil esteticky náš rukopis dokáže skrýt spoustu typografických chyb, počítač ovšem neskryje žádnou typografická pravidla by měl znát každý, kdo se pouští do tvorby webu či zveřejňování jakýchkoliv článků na internetu

Samostatná práce v hodině: slyšel jsi někdy o typografii? Do jaké doby spadají počátky typografie? S jakou osobou je to spojeno? Bylo to v roce 1455, kdy Johannes Gutenberg vynalezl knihtisk.

Typografie na webu Mezera Kde psát mezeru? v typografii i v HTML se nejčastěji používají tři druhy mezer: běžná mezera se píše mezi slovy a po interpunkčním znaménku zúžená mezera se chová stejně jako nezalomitelná, jen je užší (oddělování tisíců, mezery v telefonním čísle apod.), můžeme ji nahrazovat mezerou nezalomitelnou nezalomitelnou mezeru (tvrdou mezeru) píšeme tam, kde nesmí dojít k řádkovému zlomu, tj. hlavně po jednopísmenných spojkách a předložkách (s, z, k, v, o, u, i, pouze malé „a“ je přípustná výjimka) Samostatná práce v hodině: víš, jak se vkládá v textových editorech a v HTML dokumentech nezalomitelná mezera? Kombinací kláves „Ctrl + Shift + mezerník“ v textových editorech, v HTML dokumentech pomocí znaků „ “.

Typografie na webu Mezera Nejčastější příklady s mezerou mezeru budeme psát: - mezi iniciálu křestního jména a příjmení: O. Němec - mezi titul a jméno: Mgr. P. Novák - mezi hodnotu veličiny a její jednotku: 10 kg, 5 °C - mezi číslo a podstatné jméno: 31 let, 21 %, 7 kilometrů ale POZOR! mezi číslem a přídavným jménem mezera není: 31letý, 21% (21procentní), 7km (7kilometrový) - v datech uváděných číslicemi: 18. 9. 2012 - jako oddělovač tisíců: 50 000 - mezi částku a označení měny: 250 Kč - ve zkratkách: v. r. - u poměrů: 1 : 3 - v matematických výrazech: 7 + 21 = 28

Typografie na webu Mezera Nejčastější příklady bez mezery mezeru nebudeme psát: - u sportovních výsledků: Slavia Praha–Zbrojovka Brno 0:0 - je-li jednotka ve funkci přídavného jména: 100W žárovka, 12° pivo - při uvádění velikosti úhlu: 180° - okolo lomítek: km/h, 2011/2012 - za desetinnou čárkou: 21,7 - u násobků: 18krát, 18násobně, 18× - u časů: 7–14 hod.

Typografie na webu Interpunkce Větná interpunkce před čárkou, tečkou, dvojtečkou, středníkem, vykřičníkem a otazníkem nepíšeme mezeru, za touto interpunkcí pak ano (výjimku představují shluky jako tečka-čárka a tečka-závorka atd.), kde mezery nepíšeme uvnitř shluku, ale až za ním v textových editorech se často stává, že vlivem nevhodně zvoleného zobrazení na monitoru vypadá tečka nebo čárka příliš těsně přisazená k předchozímu slovu a někteří uživatelé tuto situaci řeší vložením další mezery tisk je ale na rozdíl od zobrazení na monitoru prováděn odlišnými prostředky a z toho důvodu je výsledek chybný

Typografie na webu Spojovník, minus, pomlčka Spojovník je znak (-), který nalezneme na klávesnici na klávese s otazníkem (nebo s procentem), anebo použijeme klávesové zkratky „ALT“ + „045“ již podle samotného názvu je zřejmé, že spojuje části slov nesází se kolem něj mezery využití má také při dělení slov využití spojovníku v příkladech: - Praha 7-Troja - česko-anglický slovník - Frýdek-Místek - literárně-umělecký obor - u zvratné částice „li“: bude-li, chcete-li

Typografie na webu Spojovník, minus, pomlčka Minus má čárku ve stejné výšce a stejné délky jako plus píšeme ho buď přímo příslušným znakem na numerické klávesnici, nebo stejnou zkratkou jako spojovník využití minus: - v matematice píšeme vždy s mezerou (21 - 7 = 14) - při zápisu záporného čísla vždy bez mezery (-7 stupňů)

Typografie na webu Spojovník, minus, pomlčka Pomlčka typografie zná dvě pomlčky: - půlčtverčíkovou (–) - čtverčíkovou (—) pomlčka na rozdíl od spojovníku odděluje slova půlčtverčíkovou pomlčku můžeme vytvořit klávesovou zkratkou „Alt“ + „0150“ a čtverčíkovou zkratkou „Alt“ + „0151“ využití půlčtverčíkové pomlčky: - rozsah: 7–9 m - ve významu proti: utkání Baník–Zbrojovka - linka Praha–Brno - v letech 2012–2013 - peněžní částka: tato věc je k dostání za Kč 210,–

Typografie na webu Telefonní a směrovací čísla Telefonní a směrovací čísla firemní prezentace se asi jen těžko obejde bez telefonního čísla jejich zápis bývá často kamenem úrazu mnohých tvůrců webu česká telefonní čísla by se měla sázet ve skupinkách po třech číslicích a tyto skupinky by měly být od sebe odděleny tvrdou mezerou využití telefonních a směrovacích čísel: - sekretariát ZŠ TGM Ivančice: 546 451 236 - směrovací číslo: 664 91

Typografie na webu Časové údaje Časové údaje při psaní kalendářních dat, mezi den a měsíc i mezi měsíc a rok, umístíme nezalomitelnou mezeru rok můžeme zkrátit na poslední dvě číslice tehdy, jedná-li se o dva letopočty spojené pomlčkou či lomítkem hodiny a minuty od sebe oddělujeme tečkou, minuty a sekundy dvojtečkou, sekundy a setiny sekund desetinnou čárkou, přičemž mezery se kolem těchto oddělovačů nepíšou časovou jednotku píšeme za číselné údaje s nezalomitelnou mezerou využití časových údajů: - změny v letech 2012–2013 - narodila se 18. 9. 2012 (18. září 2012) - 13.30 hod. 2 h 30 min 3:15,23 min

Typografie na webu Uvozovky Uvozovky velkým nešvarem jsou klávesnicové uvozovky (" ") v češtině se ale píší dvojité uvozovky, dolní otevírací („), horní uzavírací (“) při vnoření se používají uvozovky jednoduché (‚ ‘) dvojité uvozovky vytvoříme stiskem klávesy „Shift“ a současně klávesy pro uvozovky (vedle písmene „L“) jednoduché uvozovky otevírací vytvoříme stiskem klávesy pro čárku (nachází se vedle klávesy s písmenem „M“), uzavírací potom stiskem klávesy, kde se nachází současně vykřičník (druhá klávesa zprava od písmene „L“) – v tomto případě je nutné si českou klávesnici přepnout na anglickou a to pomocí klávesové zkratky „Alt“ + „Shift“ využití uvozovek v praxi: - „Slyšel jsem, jak říkáš: ‚Pojď dál!‘, a skutečně jsem šel.“

Typografie na webu Tři tečky a krát Tři tečky (opravdu jen tři) v textu se může vyskytnout buď jen jedna tečka, nebo tečky tři (jako jeden znak) ostatní kombinace (2, 4 a více) nejsou správné tři tečky lze vytvořit klávesovou zkratkou „Alt“ + „0133“

Krát pro „krát” existuje speciální znak často se chybně místo něj používá obyčejné malé „x” „krát” je stejně široké jako vysoké a nesedí na spodní lince řádku, ale je nad ním, vertikálně zarovnané na střed řádku můžeme ho vytvořit klávesovou zkratkou „Alt“ + „0215“

Typografie na webu Závorky Závorky umísťují se do nich části textu, které jsou do věty volně vloženy a nejsou její přímou součástí používají se závorky oblé (), hranaté [] a výjimečně složené {} dává-li se do závorek celá věta, sází se tečka uvnitř závorek, pokud je v závorce pouze část věty, sází se tečka až za závorku využití závorek: - (Při tvorbě webu budu typografii vždy dodržovat.)

Typografie na webu Písmo Volba písma knižní písmo je takové, které má pro čtenáře tu nejlepší čitelnost – nazývá se písmem proporcionálním strojopisné písmo je takové, které navozuje dojem textu psaného psacím strojem – nazývá se písmem neproporcionálním příklad stejné věty napsané písmem knižním (první řádek) a strojopisným (druhý řádek): - Typografie je komplikovaná. - Typografie je komplikovaná. další dělení je na patkové a bezpatkové písmo, např. - Tolik, kolik víš teď, budeš vědět i večer. - Tolik, kolik víš teď, budeš vědět i večer. Samostatná práce v hodině: vyzkoušej zápis výše uvedených příkladů v textovém editoru.

Typografie na webu Fonty pro web Fonty ne každý námi vybraný font, se na internetu objeví ve všech prohlížečích správně pokud ale zvolíme některý z níže vypsaných fontů, můžeme si být téměř jisti, že se na webu zobrazí správně bezpatková písma: Arial, Tahoma a Verdana patková písma: Times New Roman a Georgia použití jiných fontů na webu přináší riziko, že se některým návštěvníkům nezobrazí písmo tak, jak bychom si přáli

Samostatná práce v hodině: vyzkoušej zápis jakékoliv věty formou výše uvedených fontů v textovém editoru.

Typografie na webu Zdroj

ANDERSSON, Jan. Základy typografie pro web (díl I.) [online]. [cit. 18.9.2012]. Dostupný na WWW: .

ANDERSSON, Jan. Základy typografie pro web (díl II.) [online]. [cit. 18.9.2012]. Dostupný na WWW: .

Použité obrázky jsou dostupné pod licencí Microsoft Office verze 2010 na http://office.microsoft.com.