Předmět: Typografie na webu

Transkript

1 Registrační číslo projektu: CZ.1.07/1.4.00/ Škola adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace Na Brněnce 1, Ivančice, okres Brno-venkov Šablona: III/2 č. 4 Ověření ve výuce (dne): Pořadové číslo hodiny: 6 Třída: 9. A, 9. B, 9. C Předmět: Typografie na webu Název: 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 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

2 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.

3 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ů.

4 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: jako oddělovač tisíců: mezi částku a označení měny: 250 Kč - ve zkratkách: v. r. - u poměrů: 1 : 3 - v matematických výrazech: = 28

5 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: okolo lomítek: km/h, 2011/ za desetinnou čárkou: 21,7 - u násobků: 18krát, 18násobně, 18 - u časů: 7 14 hod.

6 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ý

7 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 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

8 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ňů)

9 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 a čtverčíkovou zkratkou Alt 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 peněžní částka: tato věc je k dostání za Kč 210,

10 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: směrovací číslo:

11 Č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 narodila se (18. září 2012) hod. 2 h 30 min 3:15,23 min

12 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.

13 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 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

14 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.)

15 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.

16 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.

17 Zdroj ANDERSSON, Jan. Základy typografie pro web (díl I.) [online]. [cit ]. Dostupný na WWW: < ANDERSSON, Jan. Základy typografie pro web (díl II.) [online]. [cit ]. Dostupný na WWW: < Použité obrázky jsou dostupné pod licencí Microsoft Office verze 2010 na