Právní upozornění. Další servery s elektronickým obsahem. videoprírucky.cz

Právní upozornění Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována a šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele. Neoprávněné užití této knihy bude trestně stíháno. Používání elektronické verze knihy je umožněno jen osobě, která ji legálně nabyla v rozsahu stanoveném autorským zákonem. Elektronická kniha je datový soubor, který lze užívat pouze v takové formě, v jaké jej lze stáhnout z portálu. Jakékoliv neoprávněné užití elektronické knihy nebo její části, spočívající např. v kopírování, úpravách, prodeji, pronajímání, půjčování, sdělování veřejnosti nebo jakémkoliv druhu obchodování nebo neobchodního šíření je zakázáno! Zejména je zakázána jakákoliv konverze datového souboru nebo extrakce části nebo celého textu, umisťování textu na servery, ze kterých je možno tento soubor dále stahovat, přitom není rozhodující, kdo takového sdílení umožnil. Je zakázáno sdělování údajů o uživatelském účtu jiným osobám, zasahování do technických prostředků, které chrání elektronickou knihu, případně omezují rozsah jejího užití. Uživatel také není oprávněn jakkoliv testovat, dekompilovat, zkoušet či obcházet technické zabezpečení elektronické knihy. Děkujeme že elektronické knihy nelegálně nešíříte. Podporujete tak vznik dalších elektronických titulů. Kopírování zabíjí elektronické knihy!

(c) Computer Media s.r.o. Všechna práva vyhrazena. www.computermedia.cz [email protected]

Další servery s elektronickým obsahem v i d e o p r í r u c k y. c z

OL { list-style-type : upper-alpha } .vnitrni { list-style-position : inside }

i i i li

ě

operace s proměnnou }

Tvorba internetových stránek pomocí HTML, CSS a JavaScriptu Martin Domes

Nakladatelství a vydavatelství

Vzdìlávání, které baví www.c-media.cz

R

00

5px;

5px;

pomocí HTML, CSS a JavaScriptu

Tvorba internetových stránek pomocí HTML, CSS a JavaScriptu Autor: Martin Domes Vnitřní layout, zlom a sazba: Ing. Michal Jiříček Návrh obálky: Ing. Michal Jiříček Jazyková úprava: PhDr. Dagmar Procházková © Computer Media s.r.o. Vydání první, 2005 Všechna práva vyhrazena

ISBN: 80-86686-39-6

Žádná část této publikace nesmí být publikována a šířena žádným způsobem a v žádné podobě bez písemného svolení vydavatele. Názvy produktů a firem uvedených v knize mohou být registrovanými ochrannými známkami jejich vlastníků.

Computer Media s.r.o. Hrubčická 495 798 12 Kralice na Hané Telefon: Fax: E-mail: URL:

582 302 666 582 302 667 [email protected] http://www.c-media.cz http://www.computermedia.cz

Kompletní nabídku literatury Computer Media s.r.o. můžete získat i objednat na internetové adrese www.c-media.cz nebo www.computermedia.cz.

2

Obsah Obsah VYSVĚTLIVKY K PRVKŮM POUŽITÝM V KNIZE .............................10 JAK PRACOVAT S KNIHOU? JAK JE KNIHA ČLENĚNA? ....................10

SLOVO AUTORA ...............................................................................11 ÚVODEM ...........................................................................................14 HTML A INTERNET ...........................................................................15 Co to je HTML? ..............................................................................................15 Oficiální verze HTML ...................................................................................15 Z historie HTML ............................................................................................16

PŘÍPRAVA .........................................................................................17 Čím začít? ........................................................................................................17 Pravidla tvorby webu ....................................................................................19 Jednoduchost a přehlednost ..............................................................................................19 Správné zobrazení .............................................................................................................19 První stránka webu ...........................................................................................................19 Texty na webu ...................................................................................................................20 Odkazy na webu ...............................................................................................................20 Aktuálnost a zpětná vazba ...............................................................................................20 Správný zdrojový kód a syntaxe jazyka ...........................................................................21

Webdesign .......................................................................................................21 Rozlišení obrazovky ..........................................................................................................21 Grafická podoba stránek ....................................................................................................22 Grafika a obrázky na webu ...............................................................................................23 Zpracování grafiky pro web ..............................................................................................24

Webové prohlížeče .........................................................................................24 Internet Explorer ..............................................................................................................25 Mozilla a Mozilla Firefox .................................................................................................26 Opera .................................................................................................................................26 Zobrazení v různých prohlížečích ....................................................................................26

V čem psát zdrojový kód ...............................................................................26 Strukturní editory .............................................................................................................27 WYSIWYG editory ...........................................................................................................27

HTML ................................................................................................30 Zdrojový kód ..................................................................................................30 Párové a nepárové značky ................................................................................................31 Zápis parametrů značek ...................................................................................................32

3

5px;


Komentář ve zdrojovém kódu ...........................................................................................32 Velikosti v HTML .............................................................................................................33 Označení umístění objektů ...............................................................................................33

Barvy na webu ...............................................................................................34 Základní struktura HTML dokumentu ......................................................35 Hlavička HTML dokumentu ........................................................................36 Tělo HTML dokumentu ................................................................................37 Úprava textu a jeho formátování ..................................................................39 Úprava textu .....................................................................................................................40 Formátování a zarovnávání textu ....................................................................................43 Rozdělení dokumentu horizontální linkou ......................................................................47 Úprava písma ....................................................................................................................49 Speciální znaky a mezera ..................................................................................................53

Seznamy ..........................................................................................................55 Neuspořádaný a uspořádaný seznam ..............................................................................56 Definiční výčet ..................................................................................................................59

Obrázky ...........................................................................................................60 Odkazy ............................................................................................................63 Hypertextové odkazy ........................................................................................................64 Jmenné odkazy ..................................................................................................................67 Obrázek jako odkaz ...........................................................................................................69 Další možnosti odkazů .....................................................................................................70 Jak odkazy používat ..........................................................................................................71

Rámy ................................................................................................................72 Tvorba struktury rámů .....................................................................................................72 Vkládané rámy ..................................................................................................................79 Rámy a odkazy ..................................................................................................................81 Negativa spojená s rámy ..................................................................................................85

Tabulky ...........................................................................................................86 Struktura tabulky .............................................................................................................87 Základní definice tabulky – TABLE ................................................................................88 Tělo tabulky a jeho součásti – TR a TD ..........................................................................89 Tvorba tabulek ...................................................................................................................91 Úprava rámečku tabulky ..................................................................................................96 Rozdělení tabulky – THEAD, TFOOT a TBODY .......................................................100 Další možnosti tabulky ...................................................................................................102 Problematika tabulek ......................................................................................................105

Formuláře ......................................................................................................110 Definice formuláře – FORM ..........................................................................................110

4

Obsah Vstupní prvek – INPUT .................................................................................................111 Textová pole – TEXTAREA ...........................................................................................115 Výběrová nabídka – SELECT .........................................................................................118 Skupina polí – FIELDSET ..............................................................................................121 Tlačítko – BUTTON ......................................................................................................122 Další možnosti formulářů ..............................................................................................123 Závěrem ...........................................................................................................................126

KASKÁDOVÉ STYLY – CSS ...........................................................128 Co jsou to kaskádové styly? ........................................................................128 Standardy CSS ..............................................................................................129 Vývoj kaskádových stylů ................................................................................................129 CSS a webové prohlížeče ................................................................................................130

Syntaxe CSS ..................................................................................................131 Základní syntaxe .............................................................................................................131 Zápis selektorů ................................................................................................................132 Přívlastkový selektor ......................................................................................................134 Třídy a identifikátory .....................................................................................................135 Pseudotřídy a pseudoelementy .......................................................................................136 Vlastnosti ........................................................................................................................136 Poznámky ve stylech .......................................................................................................138

Jednotky, barvy a umístění objektů v CSS ..............................................138 Jednotky v CSS ...............................................................................................................138 Zápis barev v CSS ..........................................................................................................139 Označení umístění objektů ............................................................................................140

Kam zapisovat styly .....................................................................................140 Zápis stylů v těle dokumentu HTML ............................................................................141 Zápis stylů stylopisem v hlavičce HTML dokumentu ..................................................141 Zápis stylů v externím souboru .....................................................................................142

Pozadí a barvy ..............................................................................................142 Vlastnosti písma ...........................................................................................148 Vlastnosti textu ............................................................................................152 Prázdná mezera ...............................................................................................................158

Rozměry, okraje, rámečky ...........................................................................161 Rozměry ...........................................................................................................................162 Okraje ..............................................................................................................................165 Rámeček ...........................................................................................................................169

Vizuální formátování ..................................................................................177 Rodičovský a sourozenecký element ...............................................................................177 Oddíly ..............................................................................................................................178

5

5px;


Blokové elementy a oddíly ..............................................................................................178 Řádkové elementy a oddíly .............................................................................................179 Zabíhající oddíly .............................................................................................................179 Povaha elementu .............................................................................................................180 Shrnutí .............................................................................................................................182

Umísťování ....................................................................................................182 Typy umístění .................................................................................................................183 Obsahový oddíl a zobrazovací pole ................................................................................183 Umístění do pozice ..........................................................................................................184 Plovoucí oddíly ...............................................................................................................189 Třetí rozměr – vytváření vrstev .....................................................................................191 Vzájemné vztahy vlastností DISPLAY, POSITION a FLOAT ...................................193

Seznamy ........................................................................................................193 Pseudotřídy a pseudoelementy CSS ..........................................................198 Pseudotřídy odkazů ........................................................................................................199 Dynamické pseudotřídy .................................................................................................199 Pseudotřída prvního potomka ........................................................................................202 Pseudoelementy textu .....................................................................................................203

Automaticky generovaný obsah .................................................................205 Pseudoelementy BEFORE a AFTER ............................................................................206 Generování obsahu .........................................................................................................206 Automatické číslování ....................................................................................................210

Tabulky v CSS ..............................................................................................213 Základní vzhled tabulky .................................................................................................213 Vizuální podoba tabulky .................................................................................................216 Rámeček ..........................................................................................................................219

Vizuální efekty ............................................................................................224 Přetečení obsahu .............................................................................................................224 Odstřižení elementu .......................................................................................................226 Viditelnost elementu .......................................................................................................228

Uživatelské rozhraní ...................................................................................230 Kurzor .............................................................................................................................230 Integrace systémových barev ..........................................................................................233 Integrace systémových fontů ..........................................................................................237 Tvorba dynamického obrysu ...........................................................................................238

JAVASCRIPT ..................................................................................244 Co to je JavaScript? ......................................................................................244 Kam zapisovat skript ...................................................................................245 Syntaxe jazyka ..............................................................................................246

6

Obsah Komentář ve skriptu .......................................................................................................247 Datové typy ....................................................................................................................247 Operátory a operace s výrazy .........................................................................................248 Proměnné ........................................................................................................................250 Příkazy ............................................................................................................................251 Podmínky .........................................................................................................................252 Cykly ...............................................................................................................................253 Funkce .............................................................................................................................255 Objekty ............................................................................................................................256 Pole ..................................................................................................................................258 Události ...........................................................................................................................260 Neviditelné znaky, přerušení řádku a rozdělení kódu ..................................................261 Speciální znaky v JavaScriptu ........................................................................................262 Barvy a označení umístění objektu ................................................................................262

Programování s okny ...................................................................................263 Práce s dokumentem ....................................................................................269 Zpracování řetězců .......................................................................................274 Datum a čas ...................................................................................................278 Obrázky .........................................................................................................284 Formuláře ......................................................................................................288 Zpracování údajů z formulářů .......................................................................................294 Kontrola e-mailové adresy ..............................................................................................297 Formátování dat a odeslání formuláře ...........................................................................300

Další možnosti JavaScriptu ........................................................................303 Detekce prohlížeče ..........................................................................................................303 Metody objektu LOCATION .........................................................................................304 Metody objektu History .................................................................................................305

CO S HOTOVÝMI STRÁNKAMI ......................................................308 Využití jiných zdrojů ..................................................................................308 Umístění stránek na web ............................................................................309 Umístění odkazů na stránky ......................................................................311

ZÁVĚREM .......................................................................................313 REJSTŘÍK .......................................................................................316

7

5px;

8


5px;


Parametr START můžete použít pouze u uspořádaných seznamů. Je to proto, že určuje, od které položky seznam začne počítat. Více ukazuje následující příklad:

pondělí

úterý

první položka

druhá položka

třetí položka

středa

čtvrtek

Jak je vidět, seznam počítá danou jednotku seznamu od takového pořadí, které uvedeme jako hodnotu u parametru START. Svůj seznam možná teď nechcete začínat od jiného čísla než od jedničky. Ale pokud budete chtít seznam přerušit a vložit do něj například nějakou poznámku, pak můžete v další definici seznamu uvést parametr START, jenž začne počítat tam, kde jste skončili. To uvádí do praxe hned následující příklad.

Pondělí

první položka

druhá položka

Poznámka: Tady potřebujeme vložit poznámku.

Úterý

první položka

druhá položka

třetí položka

Středa

Čtvrtek

58

HTML jazyk a editace jeho kódu

Kaskádové styly a jejich užití při tvorbě stránek


HTML a internet Pravidla tvorby webu

Tato praktická ukázka dokládá, že tvorbě seznamů se meze nekladou. Je samozřejmě poněkud nevšední, ale i její aplikace se na internetu vyskytuje. Pokud se vám někdy zdá, že některé elementy HTML nedokážete využít, zkuste být trpělivější a experimentujte. Možná budete překvapeni, kolik toho jednotlivé elementy HTML, zvláště ve vzájemné spolupráci, dokážou vykonat.

Poznámka: Seznamy jsou součástí HTML již pěknou řádku let, proto se většinou nemusíte obávat, že by se v různých prohlížečích zobrazovaly jinak.

Definiční výčet

JavaScript a jeho začlenění do stránky

Kromě dvou typů seznamů, uspořádaného a neuspořádaného, si představíme ještě jeden typ seznamu. Můžeme jej nazvat defi ničním výčtem. Seznamy totiž můžete použít i jiným způsobem, a to k formátování textu do bloků, když potřebujete například vysvětlit nějaký pojem. K tomuto účelu poslouží právě definiční výčet.
Podobně jako UL a OL je tato párová značka definicí začátku a konce definičního výčtu.

Co s hotovým projektem Odkazy na www stránky

Tento tag uzavírá položku výčtu, kterou označujeme jako termín či pojem.
Do této značky zapisujte samotnou definici termínu, respektive pojmu. Na další stránce vidíte příklad užití definičního výčtu:

59

5px;


pojem1

V tomto odstavci je možné například vysvětlit, co znamená první pojem.

pojem2

A tady zase můžeme vysvětlit co znamená druhý pojem.

Množství kombinací vnořených seznamů či definičních výčtů se samozřejmě meze nekladou. Tento příklad je velmi jednoduchý, takže si sami zkuste doplnit do výčtu další vnořené výčty. Taktéž je možné kombinovat výčty s uspořádanými a neuspořádanými seznamy. Tato možnost pak vytváří ze seznamů poměrně silný nástroj pro formátování větších textových celků a dobře poslouží například i k částečnému zalomení stránky.

Obrázky V této kapitole si představíme práci s obrázky. Budeme se zabývat především vkládáním obrázků na stránky. Dozvíte se též jak s obrázky na stránce efektivně pracovat. HTML sice není primárně určen pro grafiku, ale vkládání obrázků na web v moderním zpracování webu je nutností, kterou nelze opomenout. Obrázky vkládejte do těla dokumentu pomocí nepárové značky IMG, k níž přidělujte příslušné parametry. Tento parametr u tagu IMG definuje, jaký konkrétní obrázek budete do stránky vkládat. Tyto parametry slouží pro vkládání popisku obrázku. Tyto parametry umožňují nastavení pevné výšky (WIDTH) a šířky (HEIGHT) obrázku.

60

HTML jazyk a editace jeho kódu HTML a internet Pravidla tvorby webu

Je sice lepší upravit obrázek na takovou velikost, abyste nemuseli tyto parametry uvádět, ale někdy se mohou hodit. Velikosti zadávejte v pixelech. Další ze známých parametrů zarovnává obrázek do vybrané polohy vzhledem k ostatním elementům HTML na stránce. Možnými hodnotami jsou: • TOP – horní okraj obrázku zarovnává s textem.


• BOTTOM – má opačnou funkci než TOP, zarovnává dolů. • MIDDLE – zarovnává střed obrázku se základnou textu, zbývající text pokračuje pod obrázkem. • LEFT – zarovná obrázek doleva, zbývající text obtéká obrázek zprava. • RIGHT – funguje stranově opačně než předchozí poloha, obrázek zarovná doprava, text jej obtéká zleva.


Do dokumentu bude vložen obrázek ze souboru obrazek.jpg z adresáře obr. Přitom mu byl přidělen popisek a pevná výška a šířka. Obrázek bude zarovnán doprava.


Upozornění: Pokud nastavíte velikost obrázku pomocí parametrů WIDTH a HEIGHT, obrázek se na stránce pravděpodobně zobrazí deformovaně a výrazně se může změnit i jeho kvalita. To se projeví, zvláště pokud obrázek tímto způsobem zvětšíte. Nebudou–li odpovídat poměry stran, bude obrázek deformován. Proto doporučuji tyto parametry nikdy nezadávat a používat obrázek v takové velikosti, v jaké jej chcete na stránkách zobrazovat. Mimo tyto parametry však můžete použít i další, které dokáží buď přímo obrázek, nebo jeho chování upravovat podle vašich představ.


BORDER umožňuje přidělit zobrazenému obrázku rámeček. Implicitně je velikost rámečku nastavená na nulu, tudíž se rámeček nezobrazuje. V případě, že chcete rámeček kolem obrázku zobrazit, zadávejte hodnoty v pixelech. V případě, že chcete ovlivnit obtékání textu kolem obrázku, použijete tyto dva parametry. VSPACE přiděluje obrázku volný prostor ve vertikálním směru, HSPACE ve směru horizontálním. Velikosti opět zadávejte v pixelech.

61

5px;


Příklad užití parametrů VSPACE a HSPACE:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

obrázek“

Zde vidíte, jak se zarovnává text, jenž obtéká obrázek. Samotný obrázek jsme přitom zarovnali doprava a vytvořili kolem něj nahoře a dole (VSPACE) mezeru o velikosti 10 pixelů a vlevo a vpravo (HSPACE) mezeru o velikosti 20 pixelů. Taktéž je vidět popisek obrázku na místě, kde se ještě obrázek nenačetl. V našem případě odkazujeme na neexistující obrázek, proto se zobrazilo pouze pole o zadané velikosti. Do něj se obrázek načítá. Nyní se podíváme na zarovnání do poloh TOP a BOTTOM, respektive na zarovnání k hornímu a dolnímu okraji, a ukážeme si, jak se chová v takových případech okolní text.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

je

obrázek“

Na další ukázce je vidět, že obtékání obrázků nelze provést u poloh TOP a BOTTOM. Text, který následuje ve zdrojovém kódu za definicí obrázku, se zarovná k hornímu okraji obrázku a pak pokračuje pod ním. Tentokrát jsme neuvedli parametry VSPACE a HSPACE, takže text je přilepený k obrázku. Podobně se bude chovat poloha BOTTOM s tím rozdílem, že text se bude zarovnávat k dolnímu okraji obrázku. Ale taktéž ho nebude obtékat.

62


Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

je

HTML a internet Pravidla tvorby webu

Aby byl výčet poloh kompletní, podíváme se ještě na jednu ukázku zarovnání obrázku, a to s polohou MIDDLE.

obrázek“


V této ukázce je dobře vidět, že obrázek se v poloze MIDDLE zarovnává svým středem na základnu textu, tedy přímo na řádek.


Na posledním příkladu této kapitoly si ještě předvedeme, jak vypadá rámeček kolem obrázku:


Rámeček kolem obrázku je implicitně černý a jeho barvu lze změnit jedině pomocí kaskádových stylů. V zobrazené ukázce má rámeček velikost 10 pixelů. Taktéž si můžete všimnout, že pokud nezadáte parametr ALIGN, který zarovnává obrázek do vybrané polohy vzhledem k dalším elementům HTML na stránce, obrázek se zarovná automaticky doleva.


Odkazy Odkazy patří mezi nejpoužívanější součásti HTML. Ostatně už sám pojem hypertext naznačuje, že HTML je jazyk provazující text, respektive informace do rozsáhlejších celků. A tím nejrozsáhlejším celkem je internet jako celosvětová síť. Použití odkazů je velmi jednoduché. Můžete jak propojovat jednotlivé texty na vašem webu, tak odkazovat na jiné stránky. Odkazy budou nedílnou součástí vaší stránky. Obejdete se bez nich možná pouze v případě, že vaše internetová prezentace bude mít podobu

63

5px;


jedné strany. Tato kniha však pojednává o tvorbě internetových stránek, takže mohu předpokládat, že se opravdu nenajde nikdo, kdo by odkazy ke své práci nepotřeboval. Představíme si dva různé způsoby jak vytvářet odkazy. Prvním z nich je hypertextový odkaz, jehož cílem je objekt (HTML dokument, obrázek či jiný soubor). Používáme jej hlavně na odkazování mezi soubory. Druhou možností je použití jmenných odkazů. Ty se užívají především k provazování textu na jedné stránce. V takovém případě můžeme tento typ odkazu nazvat i záložkou či kotvou.

Hypertextové odkazy Odkaz je uzavřen párovou značkou A. V případě hypertextového odkazu si představíme základní parametr, pomocí něhož zapisujeme cíl odkazu. Jde o parametr HREF. Parametr HREF definuje cestu k souboru, který chcete pomocí odkazu otevřít. Přitom můžete uvést relativní cestu k souboru v rámci adresářové struktury na vašem webu, nebo cestu absolutní s plným zápisem. Prakticky to může vypadat například takto: Novinky

nebo Novinky

V prvním případě se do aktuální stránky načte HTML dokument novinky.html, uložený v aktuálním adresáři. V případě druhého odkazu jsme uvedli absolutní cestu k souboru včetně umístění souboru. Samozřejmě je možné odkázat na soubor, jenž se na internetu nalézá na jiném místě. Odkazovat můžete i na soubory s jinou koncovkou, než jaká je určena pro dokumenty HTML. Prohlížeč se však v takových případech zachová jinak. O tom si ale povíme až za chvíli. Tip: Pro větší přehlednost zadávejte odkazy na stejný server pomocí relativní cesty a odkazy na jiné servery pomocí absolutní cesty. To se bude hodit i v případě, že stránky přesunete na jiný server. Nebudete tak muset přepisovat všechny cesty u svých odkazů. Možná se ptáte, zda je nutné psát u odkazu v případě absolutní cesty k souboru definici protokolu, v našem případě HTTP. Odpověď zní: ano. Je třeba tuto definici psát, protože prohlížeč by měl vědět, jakou cestou se k odkazovanému dokumentu dostane.

64


HREF může nabývat podle vašich potřeb následujících hodnot: • HTTP – anglicky HyperText Transfer Protokol. Je základním protokolem internetu pro komunikaci na úrovni obsahu HTML dokumentů. C-Media


Upozornění: I když u některých prohlížečů „http://“ zadávat nemusíte, neznamená to, že můžete definici protokolu vypustit u odkazů ve zdrojovém kódu. Prohlížeč je totiž pravděpodobně nastavený tak, aby případnou absenci tohoto zápisu v adresném dialogu automaticky doplnil. Nedoplní ji však ve vašem zdrojovém kódu. • FTP – anglicky File Transfer Protokol neboli protokol pro přenos souborů na internetu. Pomocí této definice můžete odkazovat na soubory, jež jsou umístěné na FTP serverech. Například:


FTP C-Media

• FILE – touto definicí můžete odkazovat na soubory na vašem disku. Například: novinky na disku


• MAILTO – tento zápis použijte v případě, že chcete na váš web umístit aktivní odkaz na e-mailovou adresu. Slovu aktivní rozumějte tak, že když na takový odkaz uživatel poklepe myší, otevře se mu v jeho poštovním klientovi okno pro novou e-mailovou zprávu se zadanou adresou. Například: [email protected]

Pamatujte: E-mailovou adresu uvádějte vždy i mezi značku A. Někteří uživatelé totiž nemusí na svém počítači používat poštovního klienta, a tak by se jim text adresy nezobrazil.


Hodnota MAILTO může vypadat mnohem složitěji. Pokud totiž chcete, aby se uživateli, který poklepe myší na takový odkaz, v jeho okně pro nový e-mail automaticky vyplnil třeba i předmět zprávy, musíte syntaxi zápisu doplnit o patřičný výraz. Doplníte jednoduše také výraz SUBJECT (česky předmět).
Objednávku knihy nám pošlete na náš e-mail: [email protected] .

65

5px;


Všimněte si, že e-mailovou adresu a předmět zprávy (SUBJECT) oddělujeme otazníkem (?). Pro mezeru v předmětu zprávy uvádějte speciální znak %20. Nikdy nenechávejte volnou mezeru! Prohlížeč by potom hodnotu parametru HREF neinterpretoval správně. Podobným způsobem můžete zadávat i tělo zprávy. V tom případě za předmět zprávy dopíšete ampersand (&) a výraz BODY. Vypadá to následovně: Objednávka knihy.

Celkově bude tato syntaxe v praxi vypadat tak, jak vidíte na obrázku v pravé části stránky. V tomto případě jde o poštovního klienta Outlook Express od společnosti Microsoft. Zapamatujte si také syntaxi pro odřádkování, kterou jsme použili v této ukázce – %0A (odřádkuje text podobně jako značka BR). V našem případě jsme použili syntaxi dvakrát za sebou, abychom dosáhli jednoho volného řádku mezi texty. Pamatujte si, že mezi těmito znaky se mezera nedělá. Respektive funguje to tak, že v hodnotě uzavřené uvozovkami mezeru dělat nemůžete, o čemž jsem se již zmiňoval. A tak bychom mohli pokračovat. Pro odesílání e-mailů využijete pravděpodobně nejčastěji jednoduchý zápis s přednastavenou e-mailovou adresou. Ale nezapomínejte, že ne všichni uživatelé internetu používají e-mailového klienta, proto uvádějte vždy vaši e-mailovou adresu, a ne odkaz s textem typu „Pošlete mi e-mail!“. Když jsem vysvětlil, jak odkaz funguje, je třeba se ještě zmínit o tom, že cílem odkazu může být i soubor s jinou koncovkou než ty, jež definují například HTML dokumenty. Můžete totiž odkazovat na jakýkoli soubor, ať už jde o textový soubor nebo obrázek, soubory audio či video formátu a podobně. A jak se tedy zachová prohlížeč v případě, že budete odkazovat na takové soubory? 1. Pokud je cílem odkazu nějaký obrázek (například ve formátu JPG nebo GIF), zobrazí ho prohlížeč v otevřeném okně. Stejně se zachová v případě, že půjde

66


o soubor obsahující prostý text (s koncovkou TXT). Například operační systém Windows otevře takový soubor v Poznámkovém bloku. 2. Pokud je cílem soubor s jakoukoli jinou koncovkou, nabídne prohlížeč trojí volbu: • otevření v programu, který umí pracovat se soubory s uvedenou koncovkou, • otevření v jiném programu, • stažení souboru na disk.


Poznámka: Dialogové okno systému, v němž se nabízejí volby pro otevření a uložení souboru, se ale otevřít nemusí. Záleží především na nastavení operačního systému uživatele. Pokud tedy budete chtít na svých stránkách nabídnout soubor ke stažení (například vaši skladbu nebo nějaký dokument), stačí zapsat pouze odkaz na tento soubor. Zápis vypadá následovně: href=“obrazek.jpg“>Obrázek href=“audio.mp3“>Hudební skladba href=“video.avi“>Video nahrávka href=“archiv.zip“>Sbalený archiv href=“dokument.doc“>Dokument href=“soubor.pdf“>Soubor ve formátu PDF



Pamatujte: Poskytovat ke stažení skladby či celá alba nebo filmy bez souhlasu jejich autora je porušováním ustanovení autorského zákona. To se samozřejmě nevztahuje pouze na audio či video nahrávky. Autorské právo ošetřuje celou oblast tvorby a následného užívání jakýchkoli děl vzniklých na základě duševní činnosti. Autorské právo se tak vztahuje i na texty, grafické prezentace, fotografie a další výsledky duševní činnosti.

Jmenné odkazy


Odkazy se ale dají použít i jinak, než jak jsme si ukázali, třeba na stejné stránce. Takové odkazy nazýváme odkazy jmennými. Můžete jim však klidně říkat záložky. Ty znáte například z textových editorů. Ke správně definované záložce se totiž můžete z jakéhokoli místa stránky jednoduše vrátit. K tomu slouží dvě definice odkazu pomocí tagu A a dvou parametrů. Jedním je opět směrující parametr HREF, který již znáte. Tím druhým je parametr NAME, jenž umisťuje záložky na vybrané místo v dokumentu. Tato syntaxe pro vytvoření záložky vypadá na první pohled jako odkaz, ale není jím.

67

5px;


Zvláště proto, že neobsahuje parametr HREF, který definuje cíl odkazu. Do záložky uzavřete například nadpis v textu, na který pak můžete odkázat třeba z obsahu. Název záložky je nutné zadávat bez mezer a diakritiky. K záložce se dostanete pomocí odkazu, jehož cílem není nějaký soubor, ale název záložky. K tomu slouží směrující parametr HREF, jehož hodnotou bude znak # a název záložky, na kterou odkazujete. Obsahem záložky nemusí být vůbec žádný znak. Pro logiku výstavby dokumentu je však vhodné do poznámky zahrnout třeba slovo nebo celý nadpis. Není to však bezpodmínečně nutné. Je dobré také vědět, že odkaz na záložku ji nemusí nutně následovat. Odkaz se může nacházet na začátku dokumentu a záložka níže. To naznačuje následující příklad:
Obsah:

Kapitola 1

Kapitola 2

Kapitola 3

Kapitola 1

Text...

Kapitola 2

Text...

Kapitola 3

Text...

Zpět na obsah

Dovnitř odstavců uvozených značkou P je samozřejmě nutné dopsat nějaký delší text, nebo odstavce odřádkovat, aby ukázka dosáhla praktického významu. Použít odkaz na záložku je vhodné na konci stránky, aby se uživatel nemusel ručně vracet na začátek stránky pomocí posunovací lišty. Aplikace záložek je tak zvláště vhodná v případech, kdy je HTML stránka hodně dlouhá a listování by zabralo příliš mnoho času. Svoje použití však můžou mít záložky i v jiných případech. Na záložku totiž můžete odkazovat i z jiného HTML dokumentu. Tak vzniká opravdu ono požadované propojení textů na webu.

68

5px;


Vlastnosti písma Tato kapitola se věnuje písmu a možnostem jeho modifikace v kaskádových stylech. Dozvíte se vše potřebné k tomu, abyste správně definovali nejen typ písma, ale též jeho velikost. Jde o tu nejběžnější součást stylů. Celkově je velice důležité, aby vaše stránky obsahovaly správné fonty a velikosti písma, protože text tvoří stále velkou část webu, a použité písmo má tak velký vliv na vizuální podobu stránek. Hlavní vlastností stylů, která se stará o písmo, je podobně jako v HTML vlastnost FONT. Ta obsahuje několik podvlastností, které dokáží velmi lehce proměnit podobu písma. Všechny tyto podvlastnosti jsou zároveň dědičné, přenášejí se tedy z nadřazených elementů na vnořené. Vlastnosti písma lze zároveň aplikovat na všechny elementy HTML. FONT-FAMILY : typ_písma FONT-FAMILY definuje font, respektive fonty (typy písma) použité pro text vybraného elementu nebo části HTML dokumentu. BODY { font-family : Arial, Verdana }

Takto definujte font písma pro veškeré písmo v těle dokumentu HTML. Hodnotou může být více typů písma oddělených čárkou. Přitom záleží na jejich pořadí. Pokud prohlížeč první font písma nenajde, zkouší hledat druhý v pořadí a tak dále. Proto je vždy důležité uvádět více fontů a rozhodně se vyhnout použití nestandardních fontů. Tip: Používejte například tuto definici písem: Arial, Verdana, sans-serif. Jde o standardní typy písma, které by měl obsahovat každý operační systém. Sans-serif je navíc označením jakéhokoli bezpatkového písma. V případě, že prohlížeč žádný z fontů nenajde, použije v tomto případě nějaké bezpatkové písmo. Sans-serif proto používejte pokud možno vždy. Kromě klasických fontů můžete ještě definovat rodinu typů písma všeobecně. Do těchto všeobecných rodin patří například i sans-serif. V případě této všeobecné definice písma vybírá prohlížeč písmo sám, a to v závislosti na zvolené všeobecné rodině písem. Můžete vybírat z těchto všeobecných rodin písma: • SERIF – patková písma (například Times). • SANS-SERIF – bezpatková písma (například Arial). • CURSIVE – kurzivní písma (například Zapf-Chancery). • FANTASY – ozdobná písma (například Western). • MONOSPACE – písma se stejnou roztečí, tedy neproporcionální písma (například Courier).

148

Kaskádové styly - CSS HTML a internet Pravidla tvorby webu

BODY { font-family : Arial, Verdana, sans-serif } Jak vidíte, pomocí sans-serif jsme prohlížeči sdělili, že pokud v počítači uživatele internetu nenajde bezpatková písma Arial ani Verdana, má hledat jakékoli bezpatkové písmo. Je samozřejmě možné definovat typ písma pouze všeobecně, ale připravíte se o možnost primárně ovlivnit, jak bude text vypadat. FONT-SIZE : velikost/%/délka


Další velmi důležitá a často používaná vlastnost FONT-SIZE definuje velikost písma v elementu, pro nějž je použita. Možností jak vyjádřit velikost písma je v kaskádových stylech nepřeberné množství. V zásadě můžete velikost písma vyjádřit čtyřmi způsoby: • absolutní velikostí, • relativní velikostí, • procenty,


• délkou. Absolutní velikosti písma od nejmenšího po největší jsou: XX-SMALL, X-SMALL, SMALL, MEDIUM, LARGE, X-LARGE, XX-LARGE. Přitom jestliže velikost MEDIUM je 10 bodů (pt), pak LARGE je velké 15 bodů (pt). Tyto velikosti se ale mohou lišit v závislosti na použitém fontu.


Relativní velikosti písma jsou: LARGER a SMALLER, tedy větší a menší velikost písma než velikost základní. Jestliže je základní velikost písma nadefinována jako MEDIUM, bude relativní velikost LARGER stejná jako absolutní velikost LARGE. Ve stejném případě bude velikost SMALLER totožná s velikostí SMALL.


Percentuální vyjádření velikosti písma a vyjádření pomocí jednotek délky neberou v potaz tabulku velikostí, kterou jsem zmínil výše. Percentuální vyjádření velikosti písma se podobně jako relativní odvozuje od velikosti mateřského písma. Nejcennější je asi zápis velikosti písma podle jednotek délky. Dost často zapisujeme písmo pomocí pixelů. Praktickou jednotkou je ale i EX, tedy velikost písma podle písmene x. Předejdete tak situaci, kdy je písmo při větším rozlišení obrazovky příliš malé. Obecně se ale používají velikosti okolo 12 až 14 pixelů. Možnosti zápisu v praxi jsou například tyto: BIG { font-size : large } SMALL { font-size : smaller } BLOCKQUOTE { font-size : 50% } BODY { font-size : 12px }

149

5px;


Tímto zápisem stylů jsme přiřadili vlastnosti velikosti písma jednotlivým elementům HTML. Značka BIG bude uvozovat text s větší velikostí písma (LARGE), značka SMALL naopak s menším písmem (SMALLER). Odsazený blok písma zapsaný pomocí párové značky BLOCKQUOTE můžete použít třeba k zobrazení poznámek v textu, a tak jsme pro něj definovali poloviční velikost písma (50 %). Pro celé tělo HTML dokumentu jsme stanovili velikost písma na 12 pixelů. FONT-WEIGHT : síla_písma Písmu můžete přidělit také sílu neboli duktus. Tato vlastnost dokáže písmo transformovat na silnější a výraznější. Přitom hodnot, které můžete doplňovat, je opět hodně. Vyjadřovat je můžete buď slovně, nebo číselně. Slovní vyjádření jsou tato: NORMAL, BOLD, BOLDER a LIGHTER. Přitom od normálního písma můžete použít písmo tučné, ještě tučnější a písmo tenčí. Číselná vyjádření: 100, 200, 300, 400, 500, 600, 700, 800, 900. Přitom číslo 100 je hodnota pro nejtenčí písmo a 900 pro nejtlustší. Hodnota 400 koresponduje se slovní hodnotou NORMAL, hodnota 700 s BOLD a 900 s BOLDER. Základní hodnota síly písma je v kaskádových stylech nastavena na 400 bez ohledu na typ písma. Přesto ale opět na výběru písma záleží. Některá písma jsou totiž silnější než jiná. Základní hodnota se však může měnit podle názvu písma. Pokud obsahuje definici MEDIUM, je základní hodnotou 500, pokud obsahuje BOLD, je základní hodnotou 900. Některé hodnoty nemusí podobu písma ovlivnit vůbec, opravdu totiž záleží na typu použitého písma. BODY { font-weight : normal } H3 { font-weight : bolder }

Tento příklad ukazuje jak tuto vlastnost použít. Písmo v těle HTML dokumentu má nastavenou standardní sílu (NORMAL). Písmo nadpisů třetí úrovně však dostalo sílu o 400 větší, slovně BOLDER. FONT-STYLE : styl_písma Tato vlastnost umí měnit styl písma a může nabývat těchto hodnot: • NORMAL – normální styl písma (implicitní hodnota). • ITALIC – písmo psané kurzívou. • OBLIQUE – nakloněné písmo. BODY { font-style : normal } P.citace { font-style : italic }

150


Uvedený příklad definuje pro tělo dokumentu normální styl písma (NORMAL), zatímco písmo v odstavcích třídy CITACE bude psané kurzívou (ITALIC). FONT-VARIANT : varianta_písma Někdy budete potřebovat, aby byl text psán kapitálkami (například důležitá upozornění). Pomocí této vlastnosti toho jednoduše dosáhnete. Možné varianty písma jsou v tomto případě jen dvě:


• NORMAL – normální varianta písma. • SMALL-CAPS – písmo psané kapitálkami, tedy velkými písmeny. Jednoduchá, ale velmi prospěšná vlastnost písma v kaskádových stylech dokáže udělat pomocí jedné definice z vašeho normálního písma kapitálky. Zápis bude vypadat třeba takto: H2 { font-variant : small-caps }


Nadpisy druhé úrovně budou od této chvíle psány pouze velkými písmeny. FONT : [FONT-STYLE] [FONT-VARIANT] [FONT-WEIGHT] [FONT-SIZE] [FONT-FAMILY] Podobu písma můžete samozřejmě zapsat jednotným zápisem hlavní vlastnosti FONT. Je přitom důležité, abyste velikost písma (hodnotu FONT-SIZE) a font (hodnotu FONT-FAMILY) uváděli až na závěr. Pokud byste některou z hodnot vlastností uvedli až za tyto dvě, je pravděpodobné, že prohlížeč ji nebude interpretovat.


H2 { font : italic small-caps bold 14px Arial } P { font : bolder 12px Verdana }

První případ uvádí hodnoty všech podvlastností, druhý hodnoty jen dvou podvlastností. To znamená, že můžete kombinovat libovolné množství hodnot podvlastností. Tímto jsme vyčerpali všechny vlastnosti písma, jež jsou současnými prohlížeči podporovány.


Závěrem kapitoly se opět podíváme na praktický příklad užití těchto vlastností při úpravě písma. Jak jsem naznačil v předchozí kapitole, příklad se bude skládat ze dvou částí: zdroje stylů a těla HTML dokumentu. Styly: BODY { font-family : Arial, Verdana, sans-serif; font-size : 12px } H3 { font : x-large bolder small-caps } P.citace { font-style : italic }

151

5px;


Tělo HTML dokumentu:
Nadpis kapitálkami

Normální písmo v těle dokumentu.

A písmo v odstavci třídy CITACE.

Normální písmo v těle dokumentu.

Tento jednoduchý příklad ukazuje, jak jednoduše se dají definovat styly písma pro jednotlivé elementy HTML. Přitom platí dědičnost. To znamená, že je dobré definovat základní velikost a font písma už pro tělo dokumentu a tuto definici pak už jen doplňovat, případně měnit u jednotlivých elementů HTML. Velikost písma v těle dokumentu jsme stanovili na 12 pixelů. Definice stylu nadpisu druhé úrovně opět ukazuje jak psát styl zkráceným záznamem. Písmo nadpisu dostalo pevnou velikost, definovanou slovně jako X-LARGE, použili jsme zvýraznění síly BOLDER a navíc jsme jej uvedli kapitálkami. Všimněte si, že i v písmu psaném kapitálkami lze rozeznat malá a velká písmena (velké N). U odstavce třídy citace jsme změnili styl písma na kurzívu.

Vlastnosti textu O formátování textu v HTML už víte. Kaskádové styly ale nabízejí vyšší stupeň formátování, díky němuž dosáhnete mnohem lepších výsledků a text bude konečně vypadat opravdu podle vašich představ. Jak stále zdůrazňuji, základem webu jsou právě textové informace, a text přehledně uspořádaný do logických celků je vizitkou dobré práce webmastera. K čemu by bylo množství textů, kdyby byly nedbale a nepřehledně uspořádány, respektive neuspořádány? Protože jsou možnosti formátování textu s využitím stylů velmi rozmanité, budete používat množství vlastností. Pomocí stylů lze například nastavit mezery mezi písmeny či slovy, dekorace textu, jeho zarovnání, ale třeba i odsazení prvního řádku v odstavci a tak dále. Pojďme se tedy podívat, které vlastnosti co umí. WORD-SPACING : délka/normal Jde o dědičnou vlastnost, pomocí níž můžete definovat velikost mezislovní mezery, respektive můžete nastavit hodnotu, o kterou se mezera zvětší oproti standardní velikosti. Implicitní hodnotou je NORMAL, tedy standardní velikost mezery.

152


Pokud chcete mezeru mezi slovy zvětšit nebo zmenšit, doplňujete kladné či záporné hodnoty s jednotkami délky. P { word-spacing : -0.2em } H3 { word-spacing : 0.5em }


Touto definicí stylů jsme písmu odstavců přidělili menší mezislovní mezery, než je standard, naopak nadpisy třetí úrovně dostaly mezeru mezi slovy větší o zapsanou hodnotu. Jaké použijete jednotky, je jen na vás (viz kapitola Jednotky, barvy a umístění objektů v CSS na str. 138). LETTER-SPACING : délka/normal


Tato vlastnost má na svědomí taktéž mezery, ale mezi jednotlivými písmeny. Pokud tedy potřebujete text roztáhnout, nebo naopak stáhnout, je LETTER-SPACING tou pravou volbou. Implicitně je opět nastavená hodnota NORMAL (standardní velikost mezery) a i tato vlastnost je dědičná. Tak jako u předešlé vlastnosti i zde definujete velikost, o kolik se mezera mezi písmeny zvětší nebo zmenší oproti standardu. Za číselné vyjádření záporného nebo kladného rozdílu zadávejte jednotky délky. H1 { letter-spacing : 0.2em } H3 { letter-spacing : 0.1em }


Jak vidíte, mezera mezi písmeny se může hodit třeba v případě, že chcete roztáhnout nadpisy. V uvedeném příkladu jsme mezery mezi slovy roztáhli jak u nadpisu první, tak třetí úrovně. LINE-HEIGHT : číslo/%/délka/normal


Tato dědičná vlastnost definuje velikost řádku, na kterém se text zobrazí, respektive umí ovlivňovat mezery mezi řádky. Pokud je hodnotou číslo, je velikost řádku vypočítána násobením velikosti písma. Procenta zase vyjadřují k velikosti písma relativní poměr. Záporné hodnoty zde nejsou povoleny. Pokud chcete definovat absolutní velikost řádku, použijte jednotky délky. Implicitní hodnota NORMAL symbolizuje standardní řádkování. BODY { line-height : 1.2 } P { line-height : 150% }

Uvedený zápis definuje velikost řádku na 1,2násobek velikosti fontu písma pro text v těle dokumentu HTML. Pro odstavec jsme zvolili řádkování 150% velikosti typu písma.

153

5px;


TEXT-INDENT : délka/%/0 Jistě jste už přemýšleli o tom, jak elegantně by to mohlo vypadat, kdyby byl první řádek odstavce odsazen podobně jako třeba v knize. S kaskádovými styly si toto přání můžete splnit. Právě TEXT-INDENT totiž definuje velikost takzvané odstavcové odrážky. Velikost odsazení zapisujte buď absolutně pomocí jednotek délky, nebo percentuálně. Procenta se vztahují k šířce nadřazeného elementu (například odstavce v případě textu). Implicitní hodnotou je nula. TEXT-INDENT je dědičná vlastnost a je možno ji aplikovat pouze na blokové elementy. P { text-indent : 10px }

Touto definicí stylu zajistíte, že každý první řádek v odstavci bude odsazen od okraje o 10 pixelů. Používejte pokud možno stejné jednotky jako u definic velikosti písma. TEXT-DECORATION : typ_dekorace/none Vlastnost dekorace textu umí podobné kousky jako v klasickém HTML značky U a STRIKE, ale nabízí další možnosti a užití. Implicitní hodnotou je NONE (text bez dekorace). Tato vlastnost se mezi elementy nedědí. Možnými typy dekorace jsou: • UNDERLINE – text bude podržen. • LINE-THROUGH – text je přeškrtnut. • OVERLINE – zobrazí čáru nad textem, opak UNDERLINE. • BLINK – blikající text. Upozornění: Hodnota BLINK je jednou z hodnot, kterou nepodporují všechny prohlížeče. Například Internet Explorer tuto hodnotu nezná, a tak textu vlastnost blikání nepřidělí. V podstatě jde jen o drobnou vadu, protože text se v takovém případě zobrazí normálně. A { text-decoration : none } A:hover { text-decoration : underline }

Tento zápis stylů uvádí do praxe použití vlastnosti TEXT-DECORATION. Klasický odkaz se tak bude zobrazovat bez jakékoli textové dekorace. Ovšem když na něj najedete kurzorem myši (pseudotřída HOVER), text odkazu bude podtržen. TEXT-TRANSFORM : typ_textu/none Převádět na kapitálky umí například i vlastnost FONT-VARIANT, neumí ale některé další trasformace. TEXT-TRANSFORM dokáže text transformovat hned několika

154


způsoby. Implicitní hodnotou je opět NONE, což je specifikace normálního textu bez transformace. Tato dědičná vlastnost má několik možných hodnot: • CAPITALIZE – první písmeno z každého slova zobrazí kapitálkou. • UPPERCASE – pro text použije pouze velká písmena. • LOWERCASE – text se zobrazí jen malými písmeny. H3 { text-transform : uppercase }


Po tomto zápisu bude text nadpisů třetí úrovně psán pouze velkými písmeny. Pokud použijete hodnotu CAPITALIZE, musíte si uvědomit, že na rozdíl od vlastnosti FONT-VARIANT tato vlastnost nebude psát kapitálkami celý text, ale jen první písmeno z každého slova.


Poznámka: Hodnoty nelze kombinovat. Například kombinace hodnot UPPERCASE a CAPITALIZE, po které byste mohli čekat velká písmena s většími prvními písmeny každého slova, není možná. TEXT-ALIGN : poloha ALIGN provádí v kaskádových stylech stejně jako v HTML zarovnání, TEXT-ALIGN tedy zarovnává text uvnitř elementu, pro nějž je definován. Tuto dědičnou vlastnost lze aplikovat pouze na blokové elementy. Možnými polohami jsou: • LEFT – zarovná text doleva.


• RIGHT – zarovnává doprava. • CENTER – zarovnává na střed. • JUSTIFY – zarovnává text do bloku. BODY { text-align : left } H3 { text-align : center }


V tomto příkladu užití TEXT-ALIGN byl text v těle dokumentu HTML zarovnán doleva. Tuto hodnotu ve skutečnosti zadávat nemusíte, protože jde o hodnotu implicitní. Text nadpisů třetí úrovně byl pro změnu zarovnán na střed. Ještě než se budu věnovat vlastnosti VERTICAL-ALIGN, podívejme se na příklad použití výše zmíněných vlastností v praxi. Styly: H3 { word-spacing : 0.5em; letter-spacing : 0.2em;

155

5px;


text-transform : capitalize; text-align : center } P { word-spacing : -0.2em; line-height : 150%; text-indent : 10px } A { text-transform : uppercase; text-decoration : none } A:hover { text-transform : uppercase; text-decoration : underline }

Zdrojový kód:
Nadpis třetí úrovně

Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text Text odstavce.Text odstavce. Text odstavce. Text odstavce. Text Text odstavce. Text odstavce.

Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text Text odstavce. odkaz_1. Text odstavce. Text Text odstavce. odkaz_2. Text odstavce.

odstavce. odstavce.

odstavce. odstavce.

Nyní vysvětlím, co vše jsme se styly provedli. Nejdříve k nadpisu. Ten jsme zarovnali na střed, zvětšili jsme mezery mezi slovy o polovinu šířky písmene M a mezeru mezi písmeny o dvě desetiny šířky písmene M. Nakonec byl text transformován tak, aby se všechna počáteční písmena slov nadpisu zobrazovala velkými písmeny. Odstavec byl upraven takto: První řádek byl odsazen o 10 pixelů, mezera mezi písmeny byla zmenšena o dvě desetiny šířky písmene M, což zapříčinilo, že mezi slovy v podstatě není žádná viditelná mezera (mezi slovy Text a odstavce). Taktéž byla zvýšena hodnota řádkování na jeden a půl řádku, což je jasně patrné. Text prázdných odkazů (nulová hodnota parametru HREF) byl transformován na kapitálky a při najetí kurzorem myši mu byla přidělena dekorace podtržením, jak naznačuje ukázka (kurzor myši na odkaz_1). Poznámka: Pseudotřídě HOVER, kterou jsem použil v tomto příkladu, se budu věnovat v kapitole Pseudotřídy a pseudoelementy CSS, str. 198.

156


VERTICAL-ALIGN : pozice/% Nedědičná vlastnost VERTICAL-ALIGN se vztahuje k vertikálnímu zarovnání elementu a lze ji použít pouze pro řádkové elementy a element buňky tabulky. Přitom relativní zarovnání je prováděno k mateřskému, tedy nadřazenému elementu, nebo k základní vertikální úrovni elementu. Percentuální vyjádření vertikální pozice elementu se vztahuje k vlastnosti LINE-HEIGHT, což znamená k výšce řádku. Záporné hodnoty nejsou v tomto případě povoleny. Možnými pozicemi jsou:


• BASELINE – zarovnání na základní linku (například první řádek elementu). • MIDDLE – zarovnává středový bod elementu na vertikále se základnou mateřského elementu, k níž se připočítává polovina výšky písmene x. Jednoduše řečeno, opticky zarovnává na střed na vertikále. • SUB – dolní index. • SUPER – horní index.


• TEXT-TOP – zarovnává strop elementu se stropem fontu mateřského elementu. • TEXT-BOTTOM – provádí přesný opak TEXT-TOP, zarovnává patu elementu s patou fontu mateřského elementu. • TOP – zarovnává strop elementu podle nejvyššího elementu na řádku. • BOTTOM – zarovnává patu elementu podle nejnižšího elementu na řádku.


Upozornění: Hodnoty TEXT-TOP a TEXT-BOTTOM, ač jsou součástí oficiální specifikace, nemusí fungovat ve všech prohlížečích. Například Mozilla jim nerozumí. V případech, kdy to je možné, používejte proto hodnoty TOP a BOTTOM. Hodnotu BASELINE interpretuje pouze Internet Explorer.


Vertikální zarovnání je dobrá pomůcka, ale vyžaduje vyzkoušet si jednotlivé polohy, abyste metodiku zarovnání skutečně pochopili. Pozic, kterých může element pomocí této vlastnosti na vertikále nabývat, je velké množství a každá má svůj význam. Přitom třeba poloha na základní lince (BASELINE) může být různá v závislosti na mateřském elementu. Protože jde o poměrně složitou záležitost, uvádím příklad, který vysvětlí alespoň základní polohy této vlastnosti. Styly: B { vertical-align : super } TD { height : 80px } .top { vertical-align : top } .bottom { vertical-align : bottom } .middle { vertical-align : middle }

157

5px;


Tělo HTML dokumentu:
Toto je text. A zvýrazněný text. A opět normální text.

hodnota TOP hodnota BOTTOM hodnota MIDDLE

Definovali jsme styly pro značku B – vertikální zarovnání do horního indexu, tag TD – výšku 80 pixelů, a tři třídy TOP, BOTTOM a MIDDLE podle vertikálního zarovnání na strop, patu či střed elementu. V následujícím zdrojovém kódu jsme třídy přiřadili postupně třem buňkám, na nichž se projevilo zarovnání jejich obsahu. Zvýrazněný text v odstavci (pomocí B) je tučný, protože jde o definovanou značku HTML, která provádí ztučnění textu. Pomocí stylů jsme však této značce přiřadili ještě horní index (hodnota SUPER, vlastnost VERTICAL-ALIGN). Toto jsou základní polohy, které využijete nejčastěji. Pomocí této vlastnosti budete především ovlivňovat text na řádku, protože platí pouze pro řádkové elementy (jako jsou právě značky B, I a další) a elementy buněk tabulky. Poznámka: Pozici BASELINE se budu věnovat v kapitole Tabulky v CSS (str. 213 ). Možností jak upravovat text pomocí kaskádových stylů je opravdu nepřeberné množství. Jak výše uvedené vlastnosti použijete, případně zkombinujete, je jen na vás. Příklad, který jsem uvedl, využívá pouze vlastnosti uvedené v této kapitole. Vy se samozřejmě nemusíte omezovat a můžete kombinovat téměř veškeré vlastnosti uvedené v oficiální specifikaci CSS.

Prázdná mezera CSS dovolují specifikovat i vlastnosti prázdné mezery. Prázdná mezera je obyčejně mezera o velikosti jednoho znaku a používá se především k oddělení slov.

158

Právní upozornění. Další servery s elektronickým obsahem. videoprírucky.cz

Recommend Documents

Obsah:

Kapitola 1

Kapitola 2

Kapitola 3

Nadpis kapitálkami

Nadpis třetí úrovně