UEBNÍ TEXT „TVORBA WEBOVÝCH STRÁNEK technika... · V publikování na WWW existují určité...

Ing Vojtěch Novotnyacute

Středniacute odbornaacute škola a středniacute odborneacute učiliště Kuřim sro

UČEBNIacute TEXT bdquoTVORBA WEBOVYacuteCH STRAacuteNEKldquo

Kap

ito

la

OB

SAH

2

Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro

OBSAH

OBSAH 2 1 UacuteVOD 4

11 Charakteristika učebniacuteho textu 4 12 Ciacutelovaacute skupina 4 13 Ciacutele učebnice ndash profil absolventa 4 14 Hodinovaacute dotace 4 15 Vstupniacute požadavky (uacuteroveň) 4 16 Uacutespěšneacute zvlaacutednutiacute 5 17 Použiteacute formaacutetovaacuteniacute a struktura 5

2 WEB ANEB JE TO NA INTERNETU 6 21 Jak vytvořit WWW straacutenku 6 22 Uspořaacutedaacuteniacute klientndashserver 7

221 Klient (browser prohliacutežeč) 7 222 Server 7

23 Standardy pro Web 7 231 HTTP (HyperText Transport Protocol) 7 232 HTML (HyperText Markup Language) 8 233 XHTML (eXtensible HypertextMarkup Language) 8 234 CSS (Cascading Style Sheets) 8 235 PHP (Hypertext Preprocesor) 9 236 JavaScript 9

3 UacuteVOD DO XHTML 10 31 Elementy 10

311 Blokoveacute elementy 10 312 Inline elementy 11 313 Nahrazovaneacute elementy 11 314 Atributy 11 315 Entity 11

32 Pravidla XHTML 12 33 Kostra straacutenky 13

4 ODKAZY - URL 14 41 Použitiacute odkazů na straacutence 14 42 Odkaz na jinou straacutenku 15

421 Absolutniacute odkaz 15 422 Relativniacute odkaz 15

43 Odkaz na konkreacutetniacute miacutesto dokumentu 15 44 Otevřeniacute odkazu v noveacutem okně 16

441 Způsob otevřeniacute noveacuteho okna 16 45 Titulek odkazu 16

5 NADPISY 18 6 SEZNAMY 19

61 Neuspořaacutedanyacute seznam 19 62 Uspořaacutedanyacute seznam 19

7 TABULKY 20 71 Nadpis tabulky 21 72 Slučovaacuteniacute buněk 21

8 OBRAacuteZKY 23 811 Grafika pro WWW straacutenky 23 812 Jakyacute zvolit grafickyacute formaacutet 23 813 Grafickyacute editor 24

82 Vloženiacute obraacutezku v XHTML 24 83 Velikost obraacutezku 24

9 META TAGY 26 91 Meta charset ndash koacutedovaacuteniacute češtiny 26

Kap

ito

la

OB

SAH

3


92 Meta description ndash popis straacutenky 26 93 Meta keywords ndash kliacutečovaacute slova straacutenky 26 94 Meta author ndash autor straacutenky 27 95 Meta language ndash jazyk straacutenky 27 96 Dalšiacute meta tagy 27

10 UacuteVOD DO CSS 28 101 Historie 28 102 K čemu je to dobreacute 28 103 Začiacutenaacuteme 28

1031 Dědičnost 29 1032 Komentaacuteře 29 1033 Připojeniacute stylu k dokumentu 29 1034 Vaacuteha stylů 30

104 Třiacutedy a identifikaacutetory 30 1041 Třiacuteda class v CSS 30 1042 Pseudotřiacutedy 31 1043 Identifikaacutetor id v CSS 31

105 Přiacuteklady zaacutepisu (selektory) 32 106 Jednotky 33

1061 Deacutelkoveacute jednotky 33 1062 Relativniacute jednotky 33 1063 Absolutniacute jednotky 33 1064 Procenta 33

107 Barvy 33 11 PŘEHLED VLASTNOSTIacute CSS 34

111 Piacutesmo (Font) 34 112 Text odstavec 35 113 Barvy a pozadiacute 36 114 Velikost a obteacutekaacuteniacute 37 115 Okraje 38 116 Raacutemečky 38 117 Seznamy 40 118 Pozicovaacuteniacute 40 119 Tabulky 41

12 PRAVIDLA PRO TVORBU PŘIacuteSTUPNEacuteHO WEBU 43 121 obsah webovyacutech straacutenek je dostupnyacute a čitelnyacute 43 122 Praacuteci s webovou straacutenkou řiacutediacute uživatel 44 123 Informace jsou srozumitelneacute a přehledneacute 44 124 Ovlaacutedaacuteniacute webu je jasneacute a pochopitelneacute 45 125 Odkazy jsou zřetelneacute a naacutevodneacute 45 126 Koacuted je technicky způsobilyacute a strukturovanyacute 45

13 VALIDNIacute KOacuteD 47 131 Co může způsobit nevalidniacute koacuted 47 132 Validaacutetor W3C 47

14 DOMEacuteNA A HOSTING 48 141 Domeacutena 48

1411 Domeacutena prvniacuteho řaacutedu 48 1412 Domeacutena druheacuteho řaacutedu 48 1413 Domeacutena třetiacuteho řaacutedu 48

142 Hosting 48 143 Umiacutestěniacute straacutenek 48

SLOVNIacuteČEK POJMŮ 50 DOPORUČENAacute STUDIJNIacute LITERARURA 52

Kap

ito

la

Uacutevo

d

4


1 UacuteVOD

11 CHARAKTERISTIKA UČEBNIacuteHO TEXTU

Absolvent by měl byacutet schopen pomociacute vhodneacuteho naacutestroje vytvaacuteřet internetoveacute

prezentace v souladu s webovyacutemi standardy a estetickyacutemi doporučeniacutemi

Součaacutestiacute učebnice je představeniacute zaacutekladniacutech způsobů a technik publikovaacuteniacute na WWW

pravidel a doporučeniacute k tvorbě straacutenek a dostupneacuteho programoveacuteho vybaveniacute

Učebnici je však možno použiacutet i pro každeacuteho kdo chce využiacutet obrovskyacute potenciaacutel

internetoveacute služby World Wide Web Pro každeacuteho studenta kteryacute maacute zaacutejem tvořit WWW

straacutenky

12 CIacuteLOVAacute SKUPINA

Učebniacute text je určen studentům středniacutech odbornyacutech škol středniacutech odbornyacutech učilišť

popřiacutepadě gymnaacuteziiacute Konkreacutetně těm studentům kteřiacute se rozhodnou maturovat z informačně

technologickeacuteho zaacutekladu

13 CIacuteLE UČEBNICE ndash PROFIL ABSOLVENTA

Ciacutelem učebniacuteho textu neniacute vychovat - vyučit profesionaacutelniacute webdesigneacutery a webmastery

ale spiacuteše vybavit žaacuteky takovyacutemi znalostmi a dovednostmi ktereacute jim umožniacute vytvaacuteřet

přiacutestupneacute a esteticky hodnotneacute weby Ukaacutezat jim jakeacute jsou možnosti dnešniacuteho webdesignu A

v neposledniacute ředě je teacutež připravit na přiacuteslušnou čaacutest maturity z informačně technologickeacuteho

zaacutekladu

14 HODINOVAacute DOTACE

Předpoklaacutedanaacute hodinovaacute dotace je cca 34 hodin ndash prezenčně To je při dvouhodinoveacute

dotaci tyacutedně asi jedno pololetiacute Daacutele se předpoklaacutedaacute samostatnaacute domaacuteciacute praacutece převaacutežně na

cvičeniacutech uacutekolech a na zaacutevěrečneacutem projektu Celkovyacute rozsah domaacuteciacute praacutece je cca 20 hodin

Zaacuteležiacute ovšem na schopnostech studenta

15 VSTUPNIacute POŽADAVKY (UacuteROVEŇ)

Student by měl miacutet zaacutekladniacute dovednosti a znalosti v ovlaacutedaacuteniacute počiacutetače a zaacutekladniacute

dovednosti v použiacutevaacuteniacute Internetu Ty by měl ziacuteskat v předchoziacutem studiu Očekaacutevaneacute zařazeniacute

Kap

ito

la

Uacutevo

d

5


je mezi 3 a 4 ročniacutekem V teacuteto době by již student měl miacutet všechny potřebneacute předchoziacute

znalosti

Pokud by měly byacutet naplněny bezezbytku i estetickeacute požadavky je vhodneacute i umět

pracovat s grafickyacutem editorem

16 UacuteSPĚŠNEacute ZVLAacuteDNUTIacute

Na konci studia by měl byacutet schopen student samostatně vytvořit prezentaci kteraacute

odpoviacutedaacute webovyacutem a estetickyacutem standardům Tuto prezentaci odladit od chyb Zkontrolovat

Validitu a nakonec umiacutestit přes ftp či weboveacute rozhranniacute na server

Student by měl takeacute byacutet schopen splnit uacutekoly a cvičeniacute kteraacute jsou průběžně uvedena

v učebniacutem textu

17 POUŽITEacute FORMAacuteTOVAacuteNIacute A STRUKTURA

Tlustě ndash jsou uvedeny důležiteacute pojmy

Kurziacutevou ndash jsou uvedeny odborneacute technickeacute naacutezvy zkratky a vysvětleniacute zkratek

Ve dvojiteacutem raacutemečku se šedyacutem podkladem jsou uvedeny různeacute uacutekoly a cvičeniacute na kteryacutech by si studenti měli vyzkoušet ziacuteskaneacute znalosti ověřit je v praxi nebo ziacuteskat podněty pro zamyšleniacute nad probleacutemem kapitoly Zvlaacutednutiacute těchto cvičeniacute je předpokladem pro uacutespěšneacute pochopeniacute a naučeniacute daneacute laacutetky

Na začaacutetku každeacute kapitoly je v modreacutem plneacutem raacutemečku se šipkou na začaacutetku uveden

ciacutel daneacute kapitoly ndash co by se měl student dozvědět a naučit

Daacutele je zde předpoklaacutedanaacute hodinovaacute naacuteročnost daneacute kapitoly

V jednoducheacutem raacutemečku se šedyacutem podkladem jsou neproporčniacutem piacutesmem

uvaacuteděny zdrojoveacute koacutedy a přiacuteklady technickeacuteho zaacutepisu koacutedu

Na zaacutevěr je v učebniacutem textu uveden seznam a vysvětleniacute použityacutech zkratek a ciziacutech

pojmů Většinou se jednaacute o pojmy ktereacute jsou v samotneacutem textu průběžně formaacutetovaacuteny

kurziacutevou

Daacutele je na konci uvedena doporučenaacute studijniacute literatura a seznam WWW straacutenek

zabyacutevajiacuteciacute se tvorbou Webu Tyto informačniacute zdroje by měly sloužit pro ziacuteskaacutevaacuteniacute dalšiacutech

znalostiacute o daneacute problematice

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

6


2 WEB aneb JE TO NA INTERNETU

Ciacutel kapitoly

Vysvětlit zkladniacute principy fungovaacuteniacute WWW způsoby jak vytvořit WWW straacutenku

uspořaacutedaacuteniacute klientndashserver standardy pro Web jazyky (X)HTML definice stylů CSS

Předpoklaacutedanaacute doba studia

4 vyučovaciacute hodiny

Asi nejpoužiacutevanějšiacute internetovaacute služba je dnes World Wide Web (toto se překlaacutedaacute jako

celosvětovaacute pavučina) Miacutesto tohoto dlouheacuteho naacutezvu se běžně použiacutevaacute termiacuten web a pokud

Vaacutem někdo řekne bdquoje to na Internetu― pak maacute s největšiacute pravděpodobnostiacute na mysli praacutevě

službu WWW

Tato služba byla vyvinuta již v roce 1989 primaacuterně měla sloužit pro předaacutevaacuteniacute

informaciacute mezi vědeckyacutemi pracovniacuteky ve švyacutecarskeacutem CERN - Centre Europeen pour

Recherche Nucleare (Středisko jadernyacutech vyacutezkumů)

Podstata webu je sdělovat informace Přestože je tato podstata od vzniku WWW staacutele

stejnaacute web se ze sveacute původniacute jednoducheacute podoby neviacutedaně rozšiacuteřil A to nejen co se tyacuteče

rozsahu ale i struktury obsahu Weboveacute straacutenky dnes obsahujiacute texty obraacutezky zvuky a video

(dohromady tvořiacute multimediaacutelniacute obsah) K obsahu webu maacute dnes běžně přiacutestup značnaacute čaacutest

populace obyvatel vyspělyacutech staacutetů a web hraje důležitou uacutelohu nejen při komunikaci ale takeacute

v obchodu vzdělaacutevaacuteniacute

Vytvaacuteřet weboveacute straacutenky je po zvlaacutednutiacute zaacutekladniacutech znalostiacute poměrně jednoduchaacute

zaacuteležitost Pokud člověk umiacute na uživatelskeacute uacuterovni ovlaacutedat počiacutetač a prochaacutezet weboveacute

straacutenky pak pro něj vytvořeniacute jednoducheacute straacutenky nebude obtiacutežneacute Probleacutem většinou nastaacutevaacute

když se uživatel pustiacute do rozsaacutehlejšiacutech nebo bdquona efekty bohatšiacutech― materiaacutelů ktereacute chce na

webu zveřejnit

V publikovaacuteniacute na WWW existujiacute určiteacute postupy pravidla a techniky ktereacute je dobreacute

ovlaacutedat Pokud to mysliacuteme s publikovaacuteniacutem na webu vaacutežně musiacuteme se tato pravidla naučit a

respektovat je

21 JAK VYTVOŘIT WWW STRAacuteNKU

Způsobů či technik jak WWW straacutenky vytvaacuteřet a publikovat existuje několik Zde jsou

nejpoužiacutevanějšiacute způsoby

a) WYSIWYG editor ndash What you see is what you get tedy co vidiacuteš to dostaneš

Praacutece s nimi je velmi pohodlnaacute Nevyacutehodou je že neukazujiacute uacuteplně přesně to co z toho

vyleze a že občas dělajiacute zmatek v koacutedu Zaacutestupci jsou všechny verze Microsoft

FrontPage Dreamweaver Adobe GoLive NVU

b) editor koacutedu (X)HTML CSSx někdy označovaneacute jako strukturniacute editory Sice jsou

poněkud těžkopaacutedneacute ten kdo umiacute (X)HTML s nimi dokaacuteže mnohem viacutece než ve

WYSIWYG editoru Program vypadaacute jako obyčejnyacute textovyacute editor ale umožňuje trochu

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

7


sofistikovanějšiacute zadaacutevaacuteniacute tagů Použiacutevajiacute je ale zejmeacutena profesionaacutelniacute tvůrci dynamickyacutech

a jinak specifickyacutech straacutenek kde je třeba miacutet naprostou kontrolu nad vytvaacuteřenyacutem koacutedem

Zaacutestupci takovyacutech editorů jsou napřiacuteklad HomeSite UltraEdit CoffeCup nebo českeacute

EasyPad a PSPad

c) export z textoveacuteho editoru ndash kvalita vyacutestupu byacutevaacute problematickaacute Neniacute vhodneacute

použiacutevat např Microsoft Word a jeho HTML export jako prostředek pro vytvaacuteřeniacute straacutenek

(HTML koacuted je nekvalitniacute a často se zobrazuje chybně)

d) redakčniacute a publikačniacute systeacutem (Content Management System ndash CMS) weblog

(nebo teacutež blog či internetovyacute deniacuteček)

e) přiacutemyacute zaacutepis ndash psaniacute XHTML např v Poznaacutemkoveacutem bloku Poněkud těžkopaacutednaacute

varianta kteraacute uživateli nijak neulehčuje praacuteci Je lepšiacute zvolit freeware editor koacutedu

Běžnyacute uživatel asi nepotřebuje znaacutet všechny vyacuteše popsaneacute způsoby ale pokud chceme

aby uživatel pracoval s při tvorbě webu efektivně pak by měl byacutet schopen saacutehnout po

nejvhodnějšiacutem způsobu jak nějakyacute text na Internetu zveřejnit Každyacute uživatel kteryacute bude

publikovat na Internetu častěji si časem osvojiacute svůj obliacutebenyacute prostředek

22 USPOŘAacuteDAacuteNIacute KLIENTndashSERVER

221 Klient (browser prohliacutežeč)

je program kteryacute komunikuje s uživatelem a na zaacutekladě jeho pokynů se obraciacute na

jednotliveacute servery ziacuteskaacutevaacute od nich data a zobrazuje je Nejběžnějšiacute klienti Microsoft Internet

Explorer Netscape Navigator Mozilla

222 Server

je bezobslužnyacute program kteryacute přijiacutemaacute a obsluhuje požadavky klientů Je potřeba

zdůraznit že WWW server je program nikoli počiacutetač Na vlastnostech tohoto programu

zaacutevisiacute co server dovede a jakyacute maacute vyacutekon Nejběžnějšiacute servery Apache Web Server Microsoft

Internet Information Server Zope

Protože klienti a servery pochaacutezejiacute od různyacutech producentů je velmi důležiteacute dodržovaacuteniacute

standardů aby programy byly schopny se navzaacutejem domluvit

23 STANDARDY PRO WEB

231 HTTP (HyperText Transport Protocol)

definuje pravidla siacuteťoveacute komunikace mezi klientem a serverem Je postaven na modelu

dotazndashodpověď klient pošle serveru dotaz a ten na něj odpoviacute čiacutemž je HTTP transakce

ukončena

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


232 HTML (HyperText Markup Language)

HTML je značkovaciacute jazyk Pomociacute speciaacutelniacutech značek ndash tagů označuje čaacutesti

dokumentu straacutenky To znamenaacute že pomociacute HTML určujeme jakyacute vyacuteznam bude miacutet ta kteraacute

čaacutest HTML straacutenky Tedy pomociacute HTML řekneme že tenhle kus textu bude nadpis jinyacute kus

textu odstavec a jinyacute tabulka Interpretaci jazyka zajišťuje klient a na jeho vlastnostech zaacuteležiacute

jak bude vyacuteslednaacute straacutenka vypadat Jestliže chcete udělat i ty uacuteplně nejjednoduššiacute weboveacute

straacutenky HTML (XHTML) potřebujete V roce 1999 byla zveřejněna posledniacute vyacutevojovaacute verze

HTML - HTML 40 HTML již neniacute nadaacutele rozviacutejeno

233 XHTML (eXtensible HypertextMarkup Language)

vzniknul přepsaacuteniacutem HTML podle pravidel XML XML je jazyk kteryacute se prosazuje jako

univerzaacutelniacute naacutestroj pro vyacuteměnu strukturovanyacutech informaciacute

Prvniacute verze XHTML 10 nepřinesla žaacutedneacute noveacute prvky v porovnaacuteniacute s HTML 4 Jednalo se

jen o přepis existujiacuteciacutech vlastnostiacute tak aby vyhovovaly XML Tiacutemto však usnadňuje analyacutezu a

umožňuje použiacutevat standardniacute XML naacutestroje pro zpracovaacuteniacute XHTML textů

Rozdiacutel mezi HTML a XHTML je zatiacutem poměrně malyacute a je vhodneacute použiacutevat XHTML

jako perspektivnějšiacute variantu

XHTML je naacutestupce HTML Rozlišujeme 3 druhy XHTML

XHTML 10 Strict (přiacutesneacute) ndash čistě strukturaacutelniacute značkovaacuteniacute neobsahuje žaacutedneacute

značky spojeneacute s formaacutetovaacuteniacutem vzhledu

XHTML 10 Transitional (přechodneacute) ndash povoluje atributy pro formaacutetovaacuteniacute textu a

odkazů v elementu body a některeacute dalšiacute atributy

XHTML 10 Frameset (s podporou raacutemů) ndash povoluje použitiacute raacutemců pro rozděleniacute

okna prohliacutežeče na dvě nebo viacutece čaacutestiacute Jeho užitiacute je však považovaacuteno za nevhodneacute Pro

rozděleniacute straacutenky na viacutece čaacutestiacute existujiacute efektivnějšiacute metody (např tzv bez-tabulkovyacute

layout v CSS)

234 CSS (Cascading Style Sheets)

CSS je technologie sloužiacuteciacute jako formaacutetovaciacute jazyk pro (X)HTML To znamenaacute že

určuje jak bude kteraacute čaacutest web straacutenky vypadat Pomociacute CSS stylu tedy určujeme vzhled

straacutenky CSS řiacutekaacute že nadpis (o ktereacutem HTML určilo že je nadpis) bude modryacute že odstavec se

bude zarovnaacutevat vlevo a že tabulka bude na zeleneacutem pozadiacute Ale už neřiacutekaacute kteraacute čaacutest straacutenky

bude tiacutem nadpisem odstavcem či tabulkou CSS tedy určuje jen vzhled straacutenky Tedy vše co

se tyacutekaacute barvy piacutesma velikosti prvků a podobně Probleacutemem při nasazeniacute je mnohdy rozdiacutelnaacute

implementace v jednotlivyacutech klientech

Takže si shrneme co určuje u straacutenky HTML a co CSS

HTML Řekne toto bude nadpis

CSS Řekne tento nadpis bude modryacute

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9


CSS styly jsou k tvorbě straacutenek potřeba Je pravda že ne uacuteplně nezbytně Sice to jde i

bez nich ale takovyacute způsob je považovaacuten za velkyacute přežitek Dělat straacutenky bez CSS je prostě

špatneacute Proto se už od začaacutetku doporučuje učit CSS současně s XHTML

235 PHP (Hypertext Preprocesor)

PHP je skriptovaciacute jazyk Dělajiacute se pomociacute něj různeacute skripty vytvaacuteřejiacuteciacute weboveacute

aplikace Pomociacute PHP můžeme vytvořit knihu hostů počiacutetadlo naacutevštěv anketu diskusniacute

foacuterum redakčniacute systeacutem systeacutem na blog chat atd Pokud chcete použiacutevat PHP musiacutete

ovlaacutedat HTML Proto nemaacute cenu se s PHP zabyacutevat pokud nerozumiacutete HTML

236 JavaScript

JavaScript je takeacute skriptovaciacute jazyk Hlavniacute rozdiacutel mezi JavaScriptem a PHP je v tom

že PHP funguje na serveru a JavaScript na klientovi To znamenaacute že to co dělaacute JavaScript se

vždy odehraacutevaacute na vašem počiacutetači a nejsou odesiacutelaacutena žaacutednaacute data na server Pomociacute

JavaScriptu tedy nevytvořiacutete nic co by muselo proběhnout Internetem Vyacutehodou JavaScripů

však je že fungujiacute i když nejste k Internetu zrovna připojeni

V JavaScriptu tedy nelze vytvořit chat nebo knihu hostů protože by bylo potřeba

někam posiacutelat data JavaScript sloužiacute k tvorbě různyacutech interaktivniacutech menu grafickyacutech

prvků pro ovlaacutedaacuteniacute prohliacutežeče (otviacuteraacuteniacute novyacutech oken vyacutepisy do stavoveacute lištyhellip)

O rozvoj webovyacutech standardů se převaacutežně staraacute World Wide Web Konsorcium

(wwww3corg) Je to neziskovaacute organizace kteraacute sdružuje akademickeacute i komerčniacute

organizace zabyacutevajiacuteciacute se Internetem a souvisejiacuteciacutemi technologiemi

Cvičeniacute Vyhledejte v českeacutem přiacutepadně světoveacutem Internetu zajiacutemaveacute straacutenky a servery věnujiacuteciacute

se vytvaacuteřeniacute WWW straacutenek Zkuste vyhodnotit kteraacute se vaacutem liacutebiacute nejviacutece

Cvičeniacute Prohleacutedněte si zdrojovyacute koacuted jednoducheacute straacutenky (V IE nabiacutedka Zobrazit ndash Zdrojovyacute koacuted

straacutenky) Porovnejte s vyacuteslednou podobou a pokuste se odhadnout k čemu slouţiacute jednotliveacute konstrukce

Cvičeniacute Pokuste se vyhledat v Internetu programy slouţiacuteciacute k tvorbě WWW straacutenek Zkombinujte

sveacute vyacutesledky s vyacutesledky ostatniacutech studentů

Cvičeniacute Pokuste se vyjmenovat vyacutehody a nevyacutehody jednotlivyacutech technik pro tvorbu webu Kteraacute

technika se vaacutem jeviacute jako nejlepšiacute

Kap

ito

la

Uacutevo

d d

o X

HTM

L

10


3 UacuteVOD DO XHTML

Ciacutel kapitoly

Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML

kostra straacutenky



XHTML lze svyacutem způsobem chaacutepat jako formaacutet pro uacutepravu dokumentů Od běžně

použiacutevanyacutech formaacutetů (jako je např doc editor Microsoft Word) se lišiacute v naacutesledujiacuteciacutech

vlastnostech

je plně textovyacute ndash text i přiacutekazy pro jeho uacutepravu jsou v textoveacute formě

je otevřenyacute ndash formaacutet je zdokumentovaacuten a jeho specifikace je volně dostupnaacute

neobsahuje vše ndash WWW straacutenka je typicky složena z několika souborů (zaacutekladniacute

XHTML koacuted jednotliveacute obraacutezky přiacutepadneacute definice stylu a dalšiacute)

V HTML se použiacutevajiacute speciaacutelniacute značky ndash tagy Tagy jsou tvořeny znaky bdquolt a bdquogt mezi

nimiž je naacutezev tagu (takto lttaggt) Vše ostatniacute co neniacute mezi těmito znaky se zobrazuje jako

vyacuteslednyacute text na straacutence Tagy pak určujiacute jakyacute maacute text vyacuteznam (např jestli se jednaacute o nadpis

tabulku či hypertextovyacute odkaz)

V XHTML jsou všechny tagy paacuteroveacute to znamenaacute že ke každeacutemu počaacutetečniacutemu tagu

musiacute existovat tag ukončovaciacute ten se lišiacute od počaacutetečniacuteho tiacutem že před naacutezvem tagu obsahuje

lomiacutetko (bdquo) Celeacute to pak vypadaacute takto

lttaggtText zobrazovanyacute na straacutencelttaggt

Všechny tagy piacutešeme malyacutem piacutesmenem XHTML je case-sensitive (rozlišuje velkaacute a

malaacute piacutesmena) tzn že ltTAGgt vlastně vůbec neznaacute

31 ELEMENTY

Elementem nazyacutevaacuteme celou sekvenci počiacutenaje počaacutetečniacutem tagem a konče tagem

ukončovaciacutem Existujiacute tři zaacutekladniacute druhy elementů blokoveacute inline a nahrazovaneacute Podle

vyacuteznamu kteryacute textu přiřazujiacute je můžeme rozdělit ještě na elementy pro strukturovaacuteniacute

dokumentu textoveacute elementy elementy pro tvorbu odkazů elementy pro tvorbu tabulek

elementy pro tvorbu seznamů a podobně

311 Blokoveacute elementy

Jsou to elementy ktereacute tvořiacute nějakyacute blok Zjednodušeně to znamenaacute že po takoveacutem

elementu je text dokumentu zalomen odřaacutedkovaacuten Blokovyacutemi elementy jsou napřiacuteklad h1

pro nadpis nebo p pro odstavec

Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy

Inline elementy jsou ty ktereacute se nachaacuteziacute uvnitř textu nedochaacuteziacute po nich k zalomeniacute

Obvykle plniacute funkci zvyacuterazněniacute nějakeacute čaacutesti textu Je to napřiacuteklad a pro hypertextovyacute odkaz

313 Nahrazovaneacute elementy

Ty jsou nahrazeny nějakyacutem obsahem pro začleněniacute dokumentu jsou důležiteacute jejich

rozměry Napřiacuteklad img pro obraacutezek

314 Atributy

Elementy mohou miacutet sveacute atributy Ty jsou přiřazeniacutem nějakeacute vlastnosti daneacutemu

elementu Atributy se piacutešiacute do počaacutetečniacuteho tagu může jich byacutet viacutece (oddělujiacute se mezerou)

nemusiacute byacutet žaacutednyacute Každyacute atribut maacute svou hodnotu Hodnota atributu musiacute byacutet v XHTML

zapsaacutena v uvozovkaacutech

ltelement atribut=hodnota _atributugtText zobrazovanyacute na

straacutenceltelementgt

Pozn Hodnotu atributu můžeme zapsat i do apostrofů

315 Entity

Jelikož se znaky bdquolt― a bdquogt― použiacutevajiacute k vymezeniacute značek staacutevajiacute se v XHTML

speciaacutelniacutemi Chcete-li napřiacuteklad zapsat x gt y nelze to udělat přiacutemo protože by bdquolt― bylo

interpretovaacuteno jako zahaacutejeniacute značky Pro zaacutepis speciaacutelniacutech znaků sloužiacute speciaacutelniacute konstrukce

tzv entity Zapisujiacute se pomociacute ampersandu (amp) naacutezvu přiacuteslušneacute HTML entity a středniacuteku ()

Tedy např ampjmeacuteno

znak entita ascii popis česky popis anglicky

quot 34 rovneacute uvozovky (palce) quotation mark (APL quote)

amp amp 38 znak and ampersand

lt lt 60 znak menšiacute než less-than sign

gt gt 62 znak většiacute než greater-than sign

nbsp 160 nedělitelnaacute mezera non-breaking space

copy copy 169 copyright copyright sign

deg deg 176 stupeň degree sign

plusmn plusmn 177 znak plus miacutenus plus-or-minus sign

para para 182 znak odstavce pilcrow sign (paragraph sign)

times times 215 kraacutet multiplication sign

ndash ndash 8211 pomlčka šiacuteřky n en dash

mdash mdash 8212 pomlčka šiacuteřky m em dash

rdquo rdquo 8221 praveacute horniacute uvozovky right double quotation mark

bdquo bdquo 8222 leveacute dolniacute uvozovky double low-9 quotation mark

frasl frasl 8260 šikmeacute lomiacutetko fraction slash

euro euro 8364 euro euro sign

Kap

ito

la

Uacutevo

d d

o X

HTM

L

12


Pozn Při použitiacute WYSIWYG editorů se uživatel nemusiacute o použiacutevaacuteniacute symbolů starat

Zapiacuteše-li některyacute ze speciaacutelniacutech znaků editor se saacutem postaraacute o vloženiacute odpoviacutedajiacuteciacuteho

symbolu (entity)

32 PRAVIDLA XHTML

Před samotnyacutem dokumentem se nachaacuteziacute deklarace XML

ltxml version=10 encoding=iso-8859-2gt

Pozn Koacutedovaacuteniacute lze použiacutet samozřejmě dle libosti

Povinnaacute je deklarace typu dokumentu (DTD)

XHTML 10 Strict

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN

httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt

XHTML 10 Transitional

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

XHTML 10 Frameset

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 FramesetEN

httpwwww3orgTRxhtml1DTDxhtml1-framesetdtdgt

Kořenovyacute element html obsahuje atribut xmlns kteryacute určuje jmennyacute prostor

dokumentu (namespace) a jazyk kteryacute je v dokumentu použit

lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt

Element html vždy obsahuje dva elementy head (hlavičku) a body (tělo dokumentu)

Hlavička musiacute obsahovat element title a měla by obsahovat i metatag pro koacutedovaacuteniacute (kvůli

staršiacutem prohliacutežečům)

Všechny tagy i atributy musiacute byacutet malyacutemi piacutesmeny XHTML je case-sensitive

Všechny hodnoty atributů musiacute byacutet v XHTML v uvozovkaacutech

Všechny XHTML tagy musiacute byacutet paacuteroveacute Při použitiacute praacutezdneacuteho tagu se musiacute tag

ukončit lomiacutetkem např ltimg gt

Tagy se nesmiacute nikdy křiacutežit

Špatně

lttag1gtText lttag2gtzobrazovanyacutelttag1gt na straacutencelttag2gt

Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13


Striktniacute XHTML neobsahuje žaacutedneacute atributy sloužiacuteciacute k formaacutetovaacuteniacute Oproti HTML

jsou z XHTML vypuštěny formaacutetovaciacute tagy (jako např font b i)

33 KOSTRA STRAacuteNKY

V předchoziacute kapitole ndash pravidlech XHTML už jsme si vysvětlili že dokument začiacutenaacute

deklaraciacute XML naacutesleduje DTD-Doctype potom tag HTML obsahujiacuteciacute hlavičku a tělo

dokumentu Můžeme tedy sestavit celyacute zaacuteklad straacutenky

ltxml version=10 encoding=windows-1250gt




ltheadgt

ltmeta http-equiv=Content-Type content=texthtml

charset=windows-1250 gt

lttitlegtTitulek straacutenkylttitlegt

ltheadgt

ltbodygt

ltpgtOdstavec textultpgt

ltbodygt

lthtmlgt

Tak takto by měla vypadat kostra straacutenky Soubor uložiacuteme s přiacuteponou htm nebo html

Teď něco k použityacutem tagům

html označuje že se bude jednat o HTML dokument obsahuje head a body

head hlavička obsahuje title (titulek straacutenky) metatagy (např koacutedovaacuteniacute) odkazy na

externiacute dokumenty definice stylu skripty apod

title titulek straacutenky to co se objeviacute jako naacutezev okna

body tělo dokumentu tady se bude nachaacutezet celyacute obsah straacutenky

p označeniacute odstavce

Cvičeniacute Pokuste se najiacutet HTML a XHTML straacutenku srovnejte koacuted straacutenky vytvořeneacute v HTML a

XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly

Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem

odkazem



URL - Uniform Resource Locator (URL) vznikl společně s WWW jako univerzaacutelniacute

formaacutet adresy kteraacute umožňuje jednoznačně identifikovat valnou většinu informaciacute v

Internetu Neniacute omezen na WWW pomociacute URL lze popsat takeacute adresy pro elektronickou

poštu data dostupnaacute pomociacute FTP aj

Nejčastějšiacute tvar URL je protokolservercesta

Napřiacuteklad httpwwwseznamczinstitucestredni_skoly

V adresaacutech se takeacute rozlišujiacute malaacute piacutesmena od velkyacutech Je vhodnou konvenciacute zvyknout si

použiacutevat v naacutezvech souborů a adresaacuteřů zaacutesadně malaacute piacutesmena a toto pravidlo důsledně

dodržovat Je takeacute třeba důrazně nedoporučit použiacutevaacuteniacute znaků s diakritikou mezer a dalšiacutech

potenciaacutelně probleacutemovyacutech znaků v naacutezvech souborů a adresaacuteřů

41 POUŽITIacute ODKAZŮ NA STRAacuteNCE

Odkazy jsou zaacutekladem hypertextovosti Internetu Bez odkazů by se uživatel nikam

nedostal V textu jsou odkazy vizuaacutelně odlišeny standardně je to barevnyacutem odlišeniacutem a

podtrženiacutem Při přejetiacute myši přes odkaz se měniacute kurzor (obvykle ze šipky na tlapičku)

kliknutiacutem je odkaz aktivovaacuten a dochaacuteziacute k přesměrovaacuteniacute

Za obecnyacute nešvar je považovaacuteno nadepisovat odkazy bdquoklikněte zde― Tento text

uživateli neřiacutekaacute vůbec nic Důležiteacute je zvyacuteraznit co se čtenaacuteř dozviacute když klikne

Špatně

Vlastnosti našeho produktu najdete zde Zajiacutemajiacute-li Vaacutes možnosti

jeho použitiacute klikněte zde Pro kompletniacute ceniacutek klikněte zde

Dobře

Skvěleacute vlastnosti našeho produktu jej předurčujiacute pro řadu možnyacutech

použitiacute Pokud vaacutes zaujal a přemyacutešliacutete o koupi podiacutevejte se na

kompletniacute ceniacutek

Cvičeniacute Projděte si několik (cca 5) svyacutech obliacutebenyacutech serverů Na kaţdeacutem z nich si prohleacutedněte

několik běţnyacutech straacutenek a sledujte jejich URL kteraacute klient zobrazuje ve stavoveacutem řaacutedku

Kap

ito

la

Od

kazy

- U

RL

15


42 ODKAZ NA JINOU STRAacuteNKU

Pro odkaz se použiacutevaacute element a Jeho atributem je href Ten udaacutevaacute kde je umiacutestěn

ciacutelovyacute dokument (tedy na kterou straacutenku odkaz směřuje) Samotneacute umiacutestěniacute pak zadaacutevaacuteme

absolutniacute nebo relativniacute cestou

421 Absolutniacute odkaz

Absolutniacute odkaz se použiacutevaacute pro odkaacutezaacuteniacute na dokument umiacutestěnyacute na jineacutem serveru např

jako odkaz na jinou straacutenku Odkaz na jinou straacutenku musiacute vždy obsahovat http

lta href=httpwwwnekdeczgtNěkdeczltagt

Hodnotou atributu href je tedy adresa ciacuteloveacuteho dokumentu (v tomto přiacutepadě

httpwwwnekdecz) Zobrazovanyacute a klikatelnyacute text bude Někdecz

422 Relativniacute odkaz

Relativniacute odkaz použijeme pokud odkazujeme v raacutemci straacutenky Při použitiacute relativniacuteho

odkazu prohliacutežeč saacutem doplňuje URL straacutenky z ktereacute je odkazovaacuteno Pokud tedy odkazujeme

na dokument nachaacutezejiacuteciacute se ve stejneacutem adresaacuteři stačiacute napsat jen jmeacuteno souboru

lta href=uvodhtmgtuacutevodltagt

Pokud se dokument nachaacuteziacute v jineacutem adresaacuteři musiacuteme do URL zahrnout celou cestu od

miacutesta kde se cesty k odkazovaneacutemu a odkazujiacuteciacutemu dokumentu začaly odlišovat

lta href=fotkyzviratazirafyhtmgtfotky žirafltagt

Pokud se budeme chtiacutet dostat v adresaacuteřoveacute struktuře o uacuteroveň vyacuteš použijeme k tomu

dvou teček tj Napřiacuteklad takto

lta href=rostlinyfialkyhtmgtfotky fialekltagt

Cvičeniacute Prohleacutedněte si zdrojoveacute koacutedy několika straacutenek z Internetu Studujte jak jejich autoři

pouţiacutevajiacute absolutniacute a relativniacute odkazy

43 ODKAZ NA KONKREacuteTNIacute MIacuteSTO DOKUMENTU

Někdy je dobreacute odkazovat i na čaacutesti straacutenky to se hodiacute jednak pokud je straacutenka delšiacute mdash

pak v uacutevodu použijeme odkazy na jejiacute jednotliveacute častiacute a daacutele pokud z jineacute straacutenky potřebujeme

použiacutet odkaz na přesně určenou čaacutest straacutenky (aby uživatel nemusel hledat) Pro označeniacute

miacutesta na ktereacute chceme odkaacutezat použijeme atribut id v odkazu potom použijeme jako vždy

atribut href kteryacute ale bude tentokraacutet začiacutenat znakem Často se toto použiacutevaacute takeacute při

odkazovaacuteniacute na začaacutetek straacutenky

lta href=zacatekgtzpět na začaacutetekltagt

Kap

ito

la

Od

kazy

- U

RL

16


Stejnyacutem způsobem pak odkazujeme i z jineacute straacutenky jen musiacuteme přidat klasickyacutem

způsobem odkaz na celyacute dokument a za něj odkaz na konkreacutetniacute miacutesto

lta href=svetadilyhtmevropagtEvropaltagt

Takovyacute odkaz můžeme daacutet někam nakonec straacutenky po kliknutiacute prohliacutežeč saacutem bdquoodroluje

ndash odskočiacute tak že se element označenyacute přiacuteslušnyacutem naacutezvem dostane do horniacute čaacutesti okna

prohliacutežeče

Čaacutest dokumentu na kterou takto odkazujeme označiacuteme v HTML straacutence takto (v

našem přiacutepadě budeme odkazovat na hlavniacute nadpis straacutenky)

lth1 id=zacatekgtHlavniacute nadpis straacutenkylth1gt

44 OTEVŘENIacute ODKAZU V NOVEacuteM OKNĚ

V noveacutem okně se obvykle otviacuterajiacute odkazy ktereacute směřujiacute na bdquociziacute straacutenky Oteviacuterat v

noveacutem okně odkazy na vlastniacute straacutenky (tiacutem mysliacutem napřiacuteklad oteviacuteraacuteniacute položek menu v

noveacutem okně) je většinou nesmysl Uživatel je snad natolik inteligentniacute aby se saacutem rozhodl

jestli si otevře odkaz v noveacutem nebo ve stejneacutem okně Jakmile určiacuteme otevřeniacute v noveacutem okně

uživatel již tuto možnost volby nemaacute což neniacute dobreacute

441 Způsob otevřeniacute noveacuteho okna

pomociacute atributu target

otevřeme klasickeacute okno se všemi panely a lištami s vyacutechoziacutem nastaveniacutem velikosti

(pozn Atribut target neniacute povolen v XHTML 10 Strict v Transitional ano)

lta href=httpwwwoknacom target=_blankgtodkaz v noveacutem okněltagt

pomociacute JavaScriptu a funkce windowopen

otevřeme noveacute okno s nastavitelnyacutemi vlastnostmi

windowopen(httpwwwoknacom_blank width=100)

45 TITULEK ODKAZU

Každyacute odkaz by měl miacutet svůj titulek Tiacutem je text kteryacute uživateli přibliacutežiacute kam vlastně

odkaz směřuje Titulek se zobraziacute při najetiacute kursoru myši na odkaz Titulky odkazů jsou

důležiteacute takeacute např pro čteciacute zařiacutezeniacute umožňujiacute lepšiacute orientaci na webu

lta href=httpwwwzamekkurimcz title=Uacutevodniacute straacutenka tohoto webu

(zamekkurimcz)gtDomůltagt

Cvičeniacute Najděte cca pět zajiacutemavyacutech straacutenek relevantniacutech pro předmět Vyacutepočetniacute technika

Vytvořte WWW straacutenku kteraacute bude obsahovat těchto pět odkazů ndash ke kaţdeacutemu odkazu uveďte jeho jmeacuteno (naacutezev straacutenky na kterou odkazuje) a stručnyacute popis

Kap

ito

la

Od

kazy

- U

RL

17


Cvičeniacute Do některeacute ze straacutenek kterou jste vytvořili v raacutemci kursu přidejte pod text sveacute jmeacuteno

jakoţto jmeacuteno autora a udělejte z něj odkaz vedouciacute na vaši e-mailovou adresu (atribut

bdquomailtoldquo) aby vaacutem čtenaacuteř snadno mohl poslat e-mail

Cvičeniacute Vytvořte seznam studentů třiacutedy s jejich elektronickyacutemi adresami Adresy by měly byacutet

odkazy se scheacutematem bdquomailtoldquo aby se pouhyacutem kliknutiacutem dal zaslat e-mail libovolneacutemu

studentu

Cvičeniacute Udělejte abecedniacute seznam ţaacuteků třiacutedy (můţete teacuteţ pouţiacutet vyacutesledek vašiacute praacutece v některeacutem

z předchoziacutech cvičeniacute) Seznam rozdělte na čaacutesti podle počaacutetečniacutech piacutesmen jednotlivyacutech jmen a na jeho začaacutetek přidejte bdquorozskokldquo podle počaacutetečniacuteho piacutesmene Jednaacute se o seznam piacutesmen kde kaţdeacute piacutesmeno představuje odkaz kteryacute uţivatele přivede na prvniacute jmeacuteno ktereacute začiacutenaacute tiacutemto piacutesmenem

Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly

Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů



Nadpisům je třeba věnovat značnou pozornost

usnadňujiacute čtenaacuteři orientaci na straacutence

vyhledaacutevaciacute roboti je zvyacutehodňujiacute ndash obsahuje-li straacutenka uživatelem hledaneacute slovo v

nadpisu dostane vyššiacute skoacutere než straacutenka kteraacute je obsahuje jen v běžneacutem textu

Straacutenka by měla miacutet praacutevě jeden nadpis velikosti 1 (nadpis celeacute straacutenky)

V hierarchii velikostiacute nepřeskakujte Zaacutekladniacute čaacutesti straacutenky by měly byacutet nadepsaacuteny

velikostiacute 2 jejich čaacutesti velikostiacute 3 atd

I prohliacutežeč kteryacute nepodporuje (nebo nenačte) CSS styly nadpisy zformaacutetuje alespoň

podle velikosti

Existuje 6 uacuterovniacute nadpisů označujiacute se tagy h1 h2 h3 h4 h5 a h6 kde 1 je

uacuteroveň nejvyššiacute Uacuterovně se lišiacute velikostiacute piacutesma všechny nadpisy jsou implicitně zarovnaacutevaacuteny

vlevo

lth1gtNadpis 1 uacuterovnělth1gt



A takovyacute je vyacutesledek

Cvičeniacute Vytvořte straacutenku kteraacute bude obsahovat nadpis velikost 1 za niacutem kraacutetkyacute odstavec textu

nadpis velikosti 2 opět odstavec textu (klidně stejnyacute) nadpis velikosti 3 odstavec atd aţ po nadpis velikosti 6 naacutesledovanyacute odstavcem textu Porovnejte jakyacutem piacutesmem klient zobraziacute jednotliveacute velikosti nadpisů a jakeacute mezery vynechaacute před nimi a za nimi Zkuste v klientovi změnit zaacutekladniacute velikost piacutesma a pozorujte jak se změna na straacutence projeviacute

Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly

Vysvětlit praacuteci se seznamy


1 vyučovaciacute hodina

61 NEUSPOŘAacuteDANYacute SEZNAM

Neuspořaacutedanyacute neboli nečiacuteslovanyacute seznam se značiacute tagem ul (unordered list) Položka

seznamu je li (list item) Položka může obsahovat i viacutece odstavců Před každou položkou se

standardně vytvaacuteřiacute odraacutežka

ltulgt

ltligtžirafaltligt

ltligtslonltligt

ltligtvelbloudltligt

ltulgt

Vyacutesledek

62 USPOŘAacuteDANYacute SEZNAM

Uspořaacutedanyacute neboli čiacuteslovanyacute seznam se značiacute tagem ol (ordered list) Položka

seznamu je opět li Před položku se automaticky vypisuje jejiacute pořadoveacute čiacuteslo

ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek

Cvičeniacute Vytvořte straacutenku s pořadovyacutem seznamem ţaacuteků ve vašiacute třiacutedě

Cvičeniacute Vytvořte straacutenku s jednoduchyacutem popisem pracovniacuteho postupu ndash např uvařeniacute vajiacutečka

natvrdo uvařeniacute konvice čaje pověšeniacute obrazu apod Postup zapište ve formě kraacutetkyacutech bodů opatřenyacutech pořadovyacutemi čiacutesly

Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly

Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami



Původně měly tabulky v XHTML umožnit zařazeniacute dat tabulkoviteacuteho charakteru na

WWW straacutenky Postupně se jich však začalo velmi intenziacutevně využiacutevat k formaacutetovaacuteniacute celyacutech

straacutenek Byla to vlastně jedinaacute možnost jak přiacutemo v HTML rozmiacutestit materiaacutel netriviaacutelniacutem

způsobem po straacutence

V současnosti však podpora CSS dozraacutela natolik že lze tyto metody opustit a

formaacutetovat straacutenky bez použitiacute tabulek (tzv bez-tabulkovyacute design) Formaacutetovaacuteniacute pomociacute

tabulek se považuje za přežitek

Tabulka se vytvaacuteřiacute pomociacute elementu table Pro řaacutedek tabulky sloužiacute tag tr (table

row) pro buňky tabulky tagy th (table head) pro buňky v zaacutehlaviacute tabulky a td (table data)

Buňky se vklaacutedajiacute uvnitř řaacutedku tabulky kolik buněk tolik bude miacutet tabulka sloupců Buňky

zaacutehlaviacute jsou standardně formaacutetovaacuteny tučnyacutem piacutesmem zarovnaacuteny na střed

V tabulce se použiacutevaacute atribut summary kteryacute shrnuje obsah tabulky Sloužiacute pro lepšiacute

přiacutestupnost webu

lttable summary=zkušebniacute tabulkagt

lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY

Pro nadpis tabulky se použiacutevaacute element caption Ten by měl byacutet uveden uvnitř tagu

table ještě před prvniacutem řaacutedkem

lttablegt

ltcaptiongtNadpis tabulkyltcaptiongt

lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

72 SLUČOVAacuteNIacute BUNĚK

Atribut colspan sloučiacute dohromady několik buněk v jednom řaacutedku Atribut rowspan

sloučiacute buňky ve sloupci Jako hodnotu těchto atributů zapisujeme počet buněk ktereacute chceme

takto sloučit

lttablegt


lttrgt

ltth colspan=2gt1ltthgt

lttrgt

lttrgt

lttd rowspan=2gtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek

Cvičeniacute Spočiacutetejte počet diacutevek a chlapců ve třiacutedaacutech prvniacuteho ročniacuteku Vyacutesledky uspořaacutedejte do

tabulky Kaţdeacute třiacutedě bude odpoviacutedat jeden řaacutedek Jednotliveacute sloupce budou obsahovat jmeacuteno třiacutedy počet diacutevek počet chlapců a celkovyacute počet studentů ve třiacutedě

Cvičeniacute Udělejte tabulku maleacute naacutesobilky Zaacutehlaviacute řaacutedků i sloupců budou tvořit čiacutesla od jedneacute do

deseti V průsečiacuteku sloupce a řaacutedku bude vţdy hodnota odpoviacutedajiacuteciacutech součinu těchto dvou čiacutesel

Cvičeniacute Najděte aktuaacutelniacute ţebřiacutečky nejlepšiacutech tenistů a tenistek nebo třeba golfistů a golfistek

(např wwwidnescz - sportovniacute sekce) Vytvořte WWW straacutenku kteraacute bude obsahovat dvě tabulky ndash nejlepšiacutech pět muţů a ţen Uveďte vţdy pořadiacute jmeacuteno a počet bodů

Cvičeniacute Vyberte z novin dva kraacutetkeacute člaacutenky a umiacutestěte je na straacutenku vedle sebe jako

dvousloupcovyacute text V kaţdeacutem sloupci bude jeden člaacutenek Poteacute zkuste rozvrţeniacute ktereacute se viacutece podobaacute novinoveacute sazbě Člaacutenky budou pod sebou jejich nadpisy budou na celou šiacuteřku straacutenky ale text kaţdeacuteho člaacutenku bude rozdělen do dvou sloupců

Cvičeniacute Vytvořte straacutenku se zasedaciacutem pořaacutedkem vašiacute třiacutedy Jmeacutena ţaacuteků rozmiacutestěte pomociacute

tabulky tak jak sediacute ve třiacutedě Doporučuji oddělit jednotliveacute řady lavic praacutezdnyacutem sloupcem

aby se zvyacuteraznilo jejich uspořaacutedaacuteniacute Lavice můţete zvyacuteraznit atributem bgcolor

Cvičeniacute Vytvořte WWW straacutenku s takovouto křiacuteţovkou Školniacute budova Iva Automobilovyacute zaacutevod u naacutes Krůpěj Květina

Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly

Praacutece s grafikou v XHML obecnaacute pravidla při vklaacutedaacuteniacute grafiky do WWW straacutenky

Grafika pro WWW straacutenky jakyacute zvolit grafickyacute formaacutet Vloženiacute obraacutezku v XHTML



Skoro vždy platiacute bdquomeacuteně je viacutece― Pokud se autor krotiacute a použiacutevaacute minimum zdobnyacutech

prvků pravděpodobně vytvořiacute straacutenku kteraacute bude sice konzervativniacute a nenadchne ale na

druheacute straně neodpuzuje

Zdaleka ne každyacute maacute dostatečně vyvinuteacute estetickeacute ciacutetěniacute a řada laickyacutech autorů prostě

nedovede posoudit uacuteroveň svyacutech vyacutesledků Straacutenky pak často vyraacutebějiacute stejnyacutem způsobem

jako když pejsek s kočičkou vařili dort Vyacutesledek byacutevaacute podobně chutnyacute

Předevšiacutem je vhodneacute vyhnout se různyacutem grafickyacutem oddělovačům animovanyacutem

obraacutezkům obraacutezkoveacutemu pozadiacute straacutenky a ikonaacutem posbiacuteranyacutem různě v Internetu Jejich

použiacutevaacuteniacute je něco jako stavět si na zahraacutedku trpasliacuteky

Je velmi důležiteacute pokud to mysliacutete s webdesignem vaacutežně naučit se s grafikou spraacutevně

zachaacutezet

811 Grafika pro WWW straacutenky

Obraacutezky a dalšiacute grafickeacute prvky straacutenek hrajiacute ve WWW velmi vyacuteznamnou roli Na jedneacute

straně při vhodneacutem použitiacute vyacuterazně zvyšujiacute atraktivitu straacutenek Na straně druheacute citelně

zvětšujiacute objem přenaacutešenyacutech dat a zpomalujiacute odezvy Přiacuteprava grafiky pro Web představuje do

značneacute miacutery hledaacuteniacute vhodneacuteho kompromisu mezi kvalitou obraacutezku a velikostiacute dat

Obraacutezky ktereacute nemajiacute jinou funkci než bdquozlepšeniacute designu― straacutenky by měly byacutet

vklaacutedaacuteny pouze pomociacute CSS stylu a to jako obraacutezek na pozadiacute

812 Jakyacute zvolit grafickyacute formaacutet

Použityacute grafickyacute formaacutet maacute zaacutesadniacute vliv na kvalitu a velikost obraacutezku Každyacute přiacutepad by

měl autor straacutenky posuzovat individuaacutelně a experimentovat s parametry při uklaacutedaacuteniacute nicmeacuteně

existujiacute obecně platnaacute pravidla kteraacute ve většině přiacutepadů nezklamou

Podle nich je na obraacutezky charakteru fotografie či malby (velkyacute počet barev a plynuleacute

přechody mezi nimi) nejvhodnějšiacute JPEG Jeho kompresniacute algoritmus je pro takoveacuteto

přiacutepady optimalizovaacuten a přinaacutešiacute jednoznačně nejlepšiacute poměr mezi velikostiacute a kvalitou

Pro obraacutezky charakteru kresby či naacutepisy (jsou charakterizovaacuteny menšiacutem počtem barev

a ostryacutemi hranami) byacutevajiacute naopak lepšiacute formaacutety s omezenyacutem počtem barev ndash PNG nebo

GIF

Kap

ito

la

Ob

raacutezk

y

24


813 Grafickyacute editor

Chcete-li vytvořit obraacutezek zcela bdquona zeleneacute louce― lze použiacutet grafickyacute editor Tato cesta

se použiacutevaacute napřiacuteklad pro přiacutepravu grafickeacuteho menu či orientačniacutech prvků straacutenky ktereacute se

prostě nedajiacute nafotit

Dalšiacute oblastiacute využitiacute je kresleniacute různyacutech scheacutemat či vytvaacuteřeniacute zcela volneacute grafiky

(kresby malby) Grafickyacute editor představuje povinnou vyacutebavu autora straacutenek protože určiteacute

uacutepravy grafickyacutech souborů je třeba dělat vždy

82 VLOŽENIacute OBRAacuteZKU V XHTML

Pro vloženiacute obraacutezku sloužiacute nepaacuterovyacute element img Povinnyacutemi atributy jsou src jehož

hodnotou je naacutezev obraacutezku přiacutepadně i s cestou a alt obsahujiacuteciacute alternativniacute text kteryacute se

zobraziacute pokud je obraacutezek prohliacutežeči nedostupnyacute buď proto že se na zadaneacute adrese nenachaacuteziacute

nebo proto že prohliacutežeč obraacutezky nezobrazuje Alternativniacute text by měl tedy nějakyacutem

způsobem přibliacutežit co je na obraacutezku těm kteřiacute jej nevidiacute

ltimg src=obrazkyobrazekjpg width=100 height=91 alt=Obaacutelka

HTML přiacuteručky gt

Pro porovnaacuteniacute ještě uvedu jak by vypadal tento zaacutepis v klasickeacutem HTML

ltimg src= obrazkyobrazekjpg width=100 height=91 alt=Obaacutelka HTML

přiacuteručky gt

83 VELIKOST OBRAacuteZKU

Velikost obraacutezku neniacute povinneacute zadaacutevat přesto je velkou chybou toto opomenout

Pokud totiž velikost obraacutezku nezadaacutete prohliacutežeč si na jeho zobrazeniacute nevyhraniacute dostatečnyacute

prostor a jelikož okolniacute text se samozřejmě načte dřiacutev než obraacutezek (protože je co se tyacuteče

velikosti dat menšiacute) způsobiacute to jakeacutesi bdquoposkakovaacuteniacute straacutenky ve chviacuteli kdy se začiacutenajiacute načiacutetat

obraacutezky ktereacute potřebujiacute viacutece prostoru než majiacute a okolniacute text jim vlastně musiacute uhyacutebat

Stejně tak je vhodneacute zadaacutevat obraacutezku jeho skutečnou velikost nezmenšovat ani

nezvětšovat pomociacute prohliacutežeče ale pomociacute grafickeacuteho editoru Pokud totiž obraacutezek o

velikosti např 100times100 pixelů zmenšiacuteme v prohliacutežeči na 50times50 dociacuteliacuteme tak sice

požadovaneacute velikosti ale uživatel bude zbytečně stahovat viacutece dat protože bude stahovat

samozřejmě obraacutezek v původniacute velikosti

Pro určeniacute velikosti obraacutezku se použiacutevajiacute atributy width (šiacuteřka) a height (vyacuteška) nebo

stejnojmenneacute vlastnosti v CSS

Cvičeniacute Najděte v Internetu pouţitelnyacute (tedy dostatečně kvalitniacute a dostatečně velkyacute ndash alespoň 200

x 200 pixelů) obraacutezek jablka stolu a miacuteče Můţete pouţiacutet napřiacuteklad vyhledaacutevaciacute servery wwwdittocom či imagesgooglecom Nalezeneacute obraacutezky vloţte do straacutenky

Kap

ito

la

Ob

raacutezk

y

25


Cvičeniacute Vyzkoušejte na straacutenku vloţit grafickyacute nadpis Vyberte některou ze svyacutech předchoziacutech

straacutenek a pomociacute grafickeacuteho editoru vytvořte nadpis (bezpatkoveacute piacutesmo většiacute velikosti) odpoviacutedajiacuteciacute textu nadpisu teacuteto straacutenky Pohrajte si s pouţityacutem grafickyacutem formaacutetem a

nastaveniacutem parametrů Obsah značky lth1gt pak nahraďte tiacutemto obraacutezkem (zachovejte jeho

uzavřeniacute do značky lth1gt kvůli vertikaacutelniacutem mezeraacutem) Porovnejte původniacute verzi s vyacuteslednou

Jakaacute je nyniacute celkovaacute velikost straacutenky Je novaacute verze hezčiacute Pokud ano stojiacute to za naacuterůst velikosti

Cvičeniacute Napište kraacutetkyacute text (cca půl straacutenky) o škole Doplňte jej jednou aţ dvěma ilustračniacutemi

fotografiemi (současnaacute či historickaacute podoba školy fotografie interieacuteru apod)

Cvičeniacute Vytvořte reklamniacute bdquoplakaacutetldquo na nějakyacute vyacuterobek či sluţbu Měl by obsahovat dvě aţ tři

fotografie vyacutečet vlastnostiacute informace o ceně atd Fotografie buď ziacuteskejte sami nebo z Internetu

Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly

Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky



Meta tagy obsahujiacute meta data ndash informace o straacutence nachaacuteziacute se v hlavičce (head)

HTML dokumentu

91 META CHARSET ndash KOacuteDOVAacuteNIacute ČEŠTINY

Nejdůležitějšiacutem a daacute se řiacutect že jedinyacutem opravdu nezbytnyacutem meta tagem je meta tag pro

koacutedovaacuteniacute češtiny Pokud ho nepoužijete text straacutenek resp českeacute znaky se budou zobrazovat

jako všelijakeacute paznaky čtverečky a podobně

Koacutedovaacuteniacute češtiny je nutneacute uveacutest ještě před tagem title

ltmeta http-equiv=Content-Type content=texthtml charset=windows-

1250 gt

Čaacutest charset=windows-1250 označuje použitou znakovou sadu Pro češtinu se

často použiacutevajiacute tyto znakoveacute sady

windows-1250

iso-8859-2 ndash doporučuji

utf-8

92 META DESCRIPTION ndash POPIS STRAacuteNKY

Pro popis obsahu straacutenky sloužiacute meta tag description Jeho obsah se může objevit

jako popisek odkazu ve vyhledaacutevačiacutech takže je určitě dobreacute dbaacutet na to aby neobsahoval

nesmyslneacute uacutedaje Slova obsaženaacute v tomto meta tagu miacutevajiacute takeacute pro vyhledaacutevače vyššiacute vaacutehu

ltmeta name=description content=Ne těchto straacutenkaacutech najdete

všechny důležiteacute informace o mně na ktereacute jste se baacuteli zeptat gt

93 META KEYWORDS ndash KLIacuteČOVAacute SLOVA STRAacuteNKY

Meta tag keywords obsahuje seznam kliacutečovyacutech slov straacutenky To jsou nejdůležitějšiacute

slova kteryacutemi se straacutenka zabyacutevaacute

ltmeta name=keywords content=osobniacute straacutenky blog fotky gt

Kap

ito

la M

eta

tagy

27


Meta tag keywords nemaacute přiacuteliš velkyacute vyacuteznam Určen je pro vyhledaacutevače ale většina

vyhledaacutevačů jeho obsah ignoruje zcela ostatniacute alespoň do teacute miacutery že nepřiřazujiacute hodnotu

slovům obsaženyacutem pouze v keywords a nikde jinde ve straacutence

94 META AUTHOR ndash AUTOR STRAacuteNKY

Meta tag author obsahuje informace o autorovi straacutenky

ltmeta name=author content=Antoniacuten Ňouma gt

95 META LANGUAGE ndash JAZYK STRAacuteNKY

Meta tag language obsahuje jazyk použityacute ve straacutence

ltmeta name=Content-language content=cs gt

96 DALŠIacute META TAGY

Jinak je metatagů ještě hodně jejich využitiacute je však miziveacute

Cvičeniacute Vytvořte XHTML soubor a zapište do něj větu obsahujiacuteciacute znaky s haacutečky a čaacuterkami

Obvyklaacute testovaciacute věta je bdquoŢluťoučkyacute kůň uacutepěl šiacuteleneacute oacutedyldquo kteraacute obsahuje spoustu různyacutech znaků s diakritickyacutemi znameacutenky Zkontrolujte (pokud moţno klienty ze dvou operačniacutech systeacutemů) zda se zobrazuje spraacutevně Daacutevejte pozor předevšiacutem na piacutesmena bdquošldquo a bdquoţldquo ve kteryacutech se odlišuje koacuted Microsoftu od standardu ISO 8859ndash2 pouţiacutevaneacuteho v Unixu

A to je v podstatě to nejdůležitějšiacute co je k vytvořeniacute HTML straacutenky potřeba bez těch

paacuter dalšiacutech věciacute se daacute bez probleacutemu obejiacutet

Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly

Proč vznikly a jak použiacutevat CSS styly Vysvětlit k čemu je to dobreacute dědičnost připojeniacute

stylu k dokumentu třiacutedy a identifikaacutetory jednotky barvy


6 vyučovaciacutech hodin

101 HISTORIE

CSS (Cascading Sytle Sheets) neboli kaskaacutedoveacute styly vznikly jako souhrn metod pro

uacutepravu vzhledu straacutenek Prvniacute naacutevrh normy byl zveřejněn v roce 1994 v roce 1996 byla pak

vydaacutena specifikace CSS 1 v roce 1998 CSS 2 v roce 2006 CSS 3

102 K ČEMU JE TO DOBREacute

CSS se využiacutevaacute k formaacutetovaacuteniacute obsahu HTML XHTML a XML dokumentů Ve srovnaacuteniacute

s formaacutetovaacuteniacutem pomociacute atributů v HTML formaacutetovaciacute schopnosti rozšiřuje Styly umožňujiacute

přesně určit jak bude kteryacute element vypadat Na rozdiacutel od atributů stylem můžeme definovat

jednotnyacute vzhled elementu pro celyacute dokument (např že všechny nadpisy uacuterovně 1 budou

červeneacute) a to jedinyacutem zaacutepisem pro přiacuteslušnyacute element (nikoli v každeacutem tagu přiacuteslušneacuteho

elementu) Stejně tak můžeme pomociacute stylu určit odlišneacute formaacutetovaacuteniacute pro třeba jen jedinyacute

vyacuteskyt určiteacuteho elementu Tiacutem se jednak zbaviacuteme velkeacuteho množstviacute koacutedu jednak se tento koacuted

stane mnohem přehlednějšiacute Naviacutec pokud se jednou rozhodneme změnit napřiacuteklad barvu

piacutesma všech odstavců bude to pro naacutes otaacutezka několika maacutelo vteřin měnit každyacute atribut

u každeacuteho elementu v HTML by byla katastrofa Jeden styl můžeme snadno použiacutet pro

libovolneacute množstviacute straacutenek

103 ZAČIacuteNAacuteME

Styl se sklaacutedaacute z pravidel pro jednotliveacute elementy ktereacute majiacute byacutet formaacutetovaacuteny Každeacute

takoveacute pravidlo maacute dvě čaacutesti selektor (naacutezev elementu pro kteryacute maacute toto pravidlo platit) a

deklaraci (co pro něj maacute platit) V deklaraci určujeme vlastnost a jejiacute hodnotu deklarace je

uzavřena do složenyacutech zaacutevorek Celeacute to zapisujeme takto

selektor vlastnost hodnota_vlastnosti

A konkreacutetně

h1 color blue

Selektorem tedy elementem kteryacute formaacutetujeme je zde h1 (nadpis 1 uacuterovně)

Deklaraciacute je color blue Ta určuje že vlastnost color bude miacutet hodnotu blue

Kap

ito

la

Uacutevo

d d

o C

SS

29


Celeacute dohromady to tedy znamenaacute že všechny nadpisy 1 uacuterovně v dokumentu budou miacutet

modrou barvu

Pokud budeme chtiacutet určit elementu viacutece než jednu vlastnost jednotliveacute vlastnosti od

sebe odděliacuteme středniacutekem Takto můžeme definovat libovolneacute množstviacute vlastnostiacute

selektor vlastnost1 hodnota_vlastnosti1 vlastnost2

hodnota_vlastnosti2

Pozn Samozřejmě je možnyacute i zaacutepis každeacute vlastnosti zvlaacutešť ale to je zbytečneacute

Pokud budeme chtiacutet určit dvěma elementům jejich společnou vlastnost odděliacuteme od

sebe jednotliveacute selektory čaacuterkou

selektor1 selektor2 vlastnost hodnota_vlastnosti

1031 Dědičnost

Většina vlastnostiacute se dědiacute To znamenaacute že element kteryacute nemaacute vlastnost definovanou jiacute

dědiacute po nadřazeneacutem elementu Tyacutekaacute se to předevšiacutem vlastnostiacute piacutesma mdash barvy velikosti

stylu atd Pokud tedy chceme definovat nějakou vlastnost kterou budou miacutet všechny

elementy společnou (a později přiacutepadně jen vytvaacuteřet vyacutejimky) definujeme ji pro element

body

1032 Komentaacuteře

Pokud si chceme ke stylu psaacutet nějakeacute poznaacutemky pro lepšiacute orientaci zapiacutešeme ji do

komentaacuteřů Ty se v CSS tvořiacute pomociacute a Mezi hvězdičky pak můžeme umiacutestit i

několikařaacutedkovyacute komentaacuteř ten se samozřejmě ve vyacutesledneacutem zobrazeniacute neobjeviacute

body color blue tady si piacuteši komentaacuteř že maacutem všechny texty

modreacute

1033 Připojeniacute stylu k dokumentu

Styl můžeme k dokumentu připojit několika způsoby můžeme definovat přiacutemo v

dokumentu nebo v externiacutem souboru způsoby můžeme i kombinovat

10331 Externiacute soubor

Pokud chceme miacutet styl uloženyacute v externiacutem souboru (což je velmi vyacutehodneacute při použiacutevaacuteniacute

jednoho stylu pro viacutece dokumentů) v nějakeacutem textoveacutem editoru uložiacuteme naacutemi definovanyacute

styl do souboru s přiacuteponou css Ten pak připojiacuteme k dokumentu zaacutepisem v hlavičce (tj mezi

tagy ltheadgt a ltheadgt) buď v tagu link

ltlink rel=stylesheet type=textcss href=stylcss gt

nebo v tagu style

ltstyle type=textcssgtimport stylcssltstylegt

Pokud je styl umiacutestěn na jineacutem serveru tak můžeme použiacutet zaacutepis

Kap

ito

la

Uacutevo

d d

o C

SS

30


ltstyle type=textcssgtimport

url(httpwwwnecoczstylcss)ltstylegt

Zaacutepisem import stylcss můžeme takeacute vložit jeden styl do druheacuteho stylu

10332 Definovaacuteniacute stylu uvnitř dokumentu

To můžeme proveacutest opět v tagu style kam tentokraacutet miacutesto odkazu na externiacute styl

umiacutestiacuteme přiacutemo definici stylu

ltstyle type=textcssgtbody color blueltstylegt

Nebo můžeme definovat styl přiacutemo nějakeacutemu elementu což se hodiacute zvlaacuteště v přiacutepadě

kdy maacuteme definovanyacute jednotnyacute styl ale pro napřiacuteklad jedno konkreacutetniacute slovo chceme použiacutet

jineacute pravidlo Potom použijeme v přiacuteslušneacutem tagu atribut style

lth1 style=color greengtnadpislth1gt

1034 Vaacuteha stylů

Pokud ve stylu definujeme pro stejnyacute element stejnou vlastnost dvakraacutet vyššiacute vaacutehu maacute

ta deklarace kteraacute byla definovanaacute později (myšleno na pozdějšiacutem řaacutedku) a ta se takeacute

provede Pokud bychom chtěli některeacute deklaraci přiřadit většiacute důležitost použijeme

important

h1 color blue important

Pozn Staršiacute (ale opravdu hodně stareacute) prohliacutežeče styly vůbec nepodporujiacute

104 TŘIacuteDY A IDENTIFIKAacuteTORY

Třiacutedy a identifikaacutetory v CSS sloužiacute k tomu abychom mohli různeacute elementy formaacutetovat

různě Napřiacuteklad odkazy na straacutence Každyacute z naacutes asi chce miacutet na straacutence různeacute druhy odkazů

ne jen jeden Jinak se obvykle dělajiacute odkazy v menu jinak odkazy v textu

1041 Třiacuteda class v CSS

Třiacutedy vytvořiacuteme snadno tak že k elementu v HTML přidaacuteme atribut class Jeho

hodnotou bude nějakyacute řetězec piacutesmen stejnyacute pak budeme použiacutevat v CSS stylu jako selektor

ltp class=poznamkagtNějakyacute textltpgt

Tiacutemto řiacutekaacuteme že tento odstavec bude formaacutetovaacuten podle pravidel třiacutedy poznamka na

formaacutetovaacuteniacute ostatniacutech odstavců se tato pravidla neprojeviacute Teď musiacuteme ještě ta pravidla určit

v CSS stylu

poznamka font-size x-small color black

Teď tedy budeme miacutet všechny odstavce stejneacute jen odstavec s třiacutedou poznamka bude

vypadat jinak (malyacutem černyacutem piacutesmem) Resp jinak budou vypadat všechny odstavce s třiacutedou

Kap

ito

la

Uacutevo

d d

o C

SS

31


poznamka protože stejnou třiacutedu můžeme použiacutet u libovolneacuteho množstviacute elementů Dokonce

i u různyacutech elementů

ltp class=poznamkagtNějakyacute odstavecltpgt

ltli class=poznamkagtPoložka seznamultligt

poznamka color black styl se aplikuje na všechny elementy s

třiacutedou poznamka

lipoznamka color blue styl se aplikuje jen na elementy li s


Chcete-li zařadit do třiacutedy jen slovo či několik slov použijte k tomuto uacutečelu paacuterovou

značku ltspangt Napřiacuteklad v naacutesledujiacuteciacute ukaacutezce je slovo bdquoPraha― zařazeno do třiacutedy mesto

ltspan class=rdquomestordquogtPrahaltspangt je hlavniacutem

městem ltspan class=rdquozemerdquogtČeskeacute republikyltspangt

1042 Pseudotřiacutedy

Speciaacutelniacutem přiacutepadem jsou takzvaneacute pseudotřiacutedy ktereacute byly zavedeny pro odkazy

(značka ltagt) a umožňujiacute předepsat vzhled pro různeacute stavy odkazu Oddělujiacute se dvojtečkou

alink color 0000ff nenavštiacutevenyacute odkaz

avisited color 000099 navštiacutevenyacute odkaz

ahover color 00ffff odkaz pod kurzorem myši

aactive color ff0000 odeslanyacute odkaz

1043 Identifikaacutetor id v CSS

Identifikaacutetor se od třiacutedy lišiacute tiacutem že se jednaacute vždy o jednoznačnyacute identifikaacutetor To

znamenaacute že ho na každeacute straacutence můžeme použiacutet jen jednou Třiacutedu lze použiacutet libovolněkraacutet na

každeacute straacutence webu

Identifikaacutetory se tedy použiacutevajiacute praacutevě tam kde je jisteacute že se danyacute element objeviacute ve

straacutence jen jednou Ideaacutelně se tedy hodiacute pro věci jako je box celeacute straacutenky menu zaacutehlaviacute nebo

zaacutepatiacute Identifikaacutetory se označujiacute dvojkřiacutežkem () Jinak je jejich zaacutepis stejnyacute jako zaacutepis třiacutedy

ltdiv id=menugt hellip ltdivgt

a v CSS definici potom

menu width14em background-colorblack

menu a color white

Pozn Paacuterovaacute značka ltdivgt ltdivgt se velmi často použiacutevaacute pokud se odlišneacute

formaacutetovaacuteniacute maacute tyacutekat rozsaacutehlejšiacute čaacutesti straacutenky

Kap

ito

la

Uacutevo

d d

o C

SS

32


105 PŘIacuteKLADY ZAacutePISU (SELEKTORY)

druh selektoru zaacutepis přiacuteklady vyacuteznam přiacutekladu poznaacutemky

tag jmeacuteno tagu p color

red

Normaacutelniacute text

ltpgtčervenyacute textltpgt

identifikaacutetor

identifikaacutetor cervene

color red


ltspan id=cervenegt

ovlivněnyacute textltpgt

tagidentifikaacutetor bcerverne

color red

ltbgtJenom tučnyacuteltbgt

ltb id=cervenegt

tučnyacute a červenyacuteltbgt

třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt

červenyacute textltspangt

Vztahuje se na každyacute

tag kteryacute maacute uvedeno

spraacutevneacute class

tagtřiacuteda icerverna

color red

ltigtJenom kurziacutevaltigt

lti class=cervenagt

červenaacute kurziacutevaltigt

Vztahuje se jen na

konkreacutetniacute tag kteryacute maacute

uvedeno spraacutevneacute class

hromadnaacute

deklarace selektor selektor

H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt

lth3gtTakeacute červenyacute

lth3gt

Seznam libovolnyacutech

platnyacutech selektorů (tagů

třiacuted apod) oddělenyacute

čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold

ltligtnormaacutelniacute text

seznamu

lta href=gttučnyacute

odkazltagtltligt

Přiacuteklad ztučňuje odkazy

(ltagt) uvnitř seznamu

(ltligt)

i b color

red

ltigtltbgtČervenaacute tučnaacute

kurziacutevaltbgtltigt

ltbgtltigtNormaacutelniacute

tučnaacute kurziacutevaltigtltbgt

Zaacuteležiacute na pořadiacute

pseudotřiacuteda tagpseudotřiacuteda

ahover

color red

lta href=gtZčervenaacute

při přejetiacute myšiacuteltagt

Pseudotřiacutedy alink

avisited aactive jsou

pouze u odkazů hover

funguje v Exploreru

pouze jako ahover

pfirst-line

color red

ltpgtPrvniacute řaacutedka

odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55

Existuje i first-letter

přiacutemaacute deklarace

v HTML

lttag style=zaacutepis

stylugt

ltp style=color redgtČervenyacute

odstavecltpgt Nezapisuje se do

stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY

1061 Deacutelkoveacute jednotky

Deacutelkoveacute uacutedaje se zapisujiacute jako celaacute nebo desetinnaacute čiacutesla s nebo bez znameacutenka Dvojice

piacutesmen identifikujiacuteciacute jednotky musiacute byacutet připojena ihned za čiacuteslem

1062 Relativniacute jednotky

em Vyacuteška aktuaacutelniacuteho piacutesma Odpoviacutedaacute šiacuteřce piacutesmene M

ex Vyacuteška piacutesmene x

px Pixely ndash 1 pixel odpoviacutedaacute jednomu bodu obrazovky

1063 Absolutniacute jednotky

in Palce 1 in = 254 cm = 72 pt

cm Centimetry

mm Milimetry 10 mm = 1 cm

pt Body 1 pt = 172 in = 112 pc

pc Pica 1 pc = 12 pt

1064 Procenta

Procenta se zapisujiacute jako celaacute nebo desetinnaacute čiacutesla s nebo bez znameacutenka za kteryacutemi

naacutesleduje znak Hodnoty zadaneacute jako procento se relativně vztahujiacute k nějakeacute jineacute

hodnotě od ktereacute se odvodiacute absolutniacute velikost Pokud použiacutevaacuteme procenta musiacuteme si vždy

uvědomit od ktereacute hodnoty se bude absolutniacute velikost odviacutejet

107 BARVY

Barva se v HTML a CSS zapisuje nejčastěji

Jmeacutenem v angličtině ndash např ltfont color=redgt Existuje několik desiacutetek

pojmenovanyacutech barev

Šestnaacutectkovyacutem RGB zaacutepisem ndash např ltfont color=ff0000gt (tvar RRGGBB)

Tento způsob je nejjistějšiacute nejpoužiacutevanějšiacute a nejlepšiacute

Pro zvoleniacute vhodnyacutech barevnyacutech kombinaciacute doporučuji užitečnou pomůcku vytvořenou

Petrem Pixy Staniacutečkem naleznete ji na httpwellstyledcomtools

Uacutekol Uloţte si v Internet Exploreru několik straacutenek (Soubor ndash Uloţit jako ndash Uacuteplnaacute webovaacute

straacutenka) Projděte si adresaacuteře s uloţenyacutemi daty Vyhledejte soubory s přiacuteponou css a prohleacutedněte si jejich zdrojovyacute koacuted Porovnaacuteniacutem s vyacuteslednou podobou straacutenky se pokuste odhadnout k čemu slouţiacute jednotliveacute konstrukce

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34


11 PŘEHLED VLASTNOSTIacute CSS

Ciacutel kapitoly

Zaacutekladniacute přehled toho k čemu je možneacute CSS použiacutevat Vysvětlit užitiacute formaacutetovaacuteniacute piacutesma

textu odstavce barvy velikosti obteacutekaacuteniacute pozicovaacuteniacute tabulky Obsahem teacuteto kapitoly je

spiacuteše přehled použitelnyacutech vlastnostiacute Nemělo by byacutet ciacutelem učit se všechny zde uvedeneacute

vlastnosti Důležiteacute je uvědomit si možnosti co CSS nabiacuteziacute umět vyhledat potřebnou

vlastnost a tu aplikovat



Stručnyacute přehled vlastnostiacute a hodnot kaskaacutedovyacutech stylů CSS se rychle vyviacutejiacute vlastnostiacute

fungujiacuteciacutech v prohliacutežečiacutech přibyacutevaacute

V prvniacutem sloupci jsou vlastnosti použitelneacute při deklaraci stylu v dalšiacutem sloupci

použitelneacute hodnoty v třetiacutem vyacuteklad vyacuteznamu těchto hodnot Nezaacuteležiacute na velikosti piacutesem

Zaacutepis stylu do hlavičky dokumentu je potom symbolicky Uvedeneacute přiacuteklady se mohou lišit od

skutečneacute interpretace v Internetoveacutem prohliacutežeči

111 PIacuteSMO (FONT)

Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky

font-

family

seznam

piacutesem

druh piacutesma

font font-family Arial CE sans-serif

Může se zadaacutevat viacutece piacutesem za sebou

odděluje se čaacuterkami Pokud klient nemaacute v

systeacutemu prvniacute font bere dalšiacute atd

Vyvarujte se použiacutevaacuteniacute bdquoexotickyacutech―

piacutesem

font-style normal italic

oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique

Skloněneacute piacutesmo (oblique) maacute byacutet prostaacute

geometrickaacute transformace kurziacuteva je jinyacute

řez Prohliacutežeče většinou užiacutevajiacute kurziacutevu i

při oblique

font-

variant normal small-caps

normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS

Kapitaacutelky jsou velkaacute piacutesmena velikosti

malyacutech Velkaacute piacutesmena by měla byacutet trochu

většiacute IE 5 udělaacute sice kapitaacutelky ale zmenšiacute i

velkaacute piacutesmena což by neměl

font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute

font-size xx-small font-size x-small font-size small

font-size

medium

font-size

large

font-size 14pt font-size 16px

font-size

Netscape se na procenta tvaacuteřiacute divně MS IE

3x zase neumiacute spraacutevně zobrazovat

jednotky em a ex V IE 6 je vykreslovanaacute

velikost zaacutevislaacute na doctype

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus

vyjaacutedřenyacute

čiacuteslem

font-weight

normal

font-weight bold font-weight

lighter

font-weight 100

font-weight 400

font-weight 600

U většiny fontů majiacute smysl jenom zaacutekladniacute

tloušťky zaacuteležiacute to na vyacuterobci fontu

Bolder a lighter se doporučuje nepoužiacutevat

font

všechny možneacute předchoziacute

hodnoty nebo systeacutemoveacute

piacutesmo

font italic bold 20px Arial

Tato deklarace je citlivaacute na pořadiacute

jednotlivyacutech uacutedajů Musiacute se použiacutet v

pořadiacute kurziacuteva tučnost velikost jmeacuteno

Použije-li se v deklaraci např font

12pt14pt uacutedaj za lomiacutetkem se vztahuje k

vlastnosti line-height

112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute

text-decoration none

text-decoration underline

text-decoration overline

text-decoration line-

through

text-decoration blink

Teoreticky se daacute zadaacutevat

viacutece vlastnostiacute najednou MS IE neumiacute blink

text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA

malaacute piacutesmena

Text-Transform none

Text-Transform capitalize

TEXT-TRANSFORM

UPPERCASE

text-transform lowercase

word-

spacing normal deacutelka

zvětšenaacute

mezislovniacute

mezera

word-spacing normal

word - spacing 100px Prohliacutežeče podporujiacute od

šestyacutech verziacute

letter-


prostrkaacuteniacute

znaků

zvětšeneacute o

deacutelku

letter-spacing normal

l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento

vyacuteška řaacutedku

absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80

text- deacutelka odsazeniacute text-indent 50px

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36


indent procento prvniacuteho

řaacutedku

druhyacute řaacutedek odstavce

text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center

text-align justify blablabla

blablabla blablabla bla bla

Daacute se použiacutet jen u

blokovyacutech elementů tj u

věciacute ktereacute maacute smysl

zarovnaacutevat napřiacuteklad u

odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky

baseline řaacutedek

sub řaacutedek super řaacutedek

top řaacutedek

text-top řaacutedek

middle řaacutedek

bottom řaacutedek

text-bottom řaacutedek

30 řaacutedek

Vertikaacutelniacute zarovnaacuteniacute

niacutezkeacuteho prvku na vyššiacutem

řaacutedku

Vlastnosti top middle a

bottom se dajiacute použiacutet u

buněk tabulky a u obraacutezků

na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se

display block ltbrgt

display inline ltbrgt

display list-item ltbrgt

Jde o to řiacutect prohliacutežeči že

některyacute element je druhu

odstavec (blok) nebo že

maacute byacutet zarovnaacuten do řaacutedku

nebo že je to seznam

Nejzajiacutemavějšiacute je

možnost nezobrazeniacute

113 BARVY A POZADIacute


color barva barva piacutesma color blue

color 00FF00

Barva piacutesma a zaacutekladniacutech

raacutemečků nebo barva toho

k čemu se to vztahuje

background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent

Barva pozadiacute Daacute se

zadaacutevat libovolnaacute barva

background-

image none url(cesta)

obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat

background-repeat no-

repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-

attachment scroll fixed

pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute

Fixed se použiacutevaacute v

souvislosti s raacutemy

background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50

2 hodnoty se oddělujiacute

mezerou Prvniacute patřiacute k

horizontaacutelniacute druhaacute hodnota

k vertikaacutelniacute poloze

background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-

repeat scroll silver

center bottom

URL se zadaacutevaacute do zaacutevorek a apostrofů např background-image url(pozadigif)

Jsou ale možneacute i uvozovky nebo jenom zaacutevorky URL může byacutet absolutniacute i relativniacute je však

citliveacute na velikost piacutesmen

114 VELIKOST A OBTEacuteKAacuteNIacute

Vlastnost Hodnoty Vyacuteznam Poznaacutemky

width auto šiacuteřka

procento

automatickaacute šiacuteřka

nastavenaacute šiacuteřka

procento

V IE nelze nastavit width pro body

Prohliacutežeče se velmi lišiacute v tom u kteryacutech objektů jsou

ochotny šiacuteřku akceptovat V Internet Exploreru 4 a vyššiacutech je do šiacuteřky nespraacutevně

započiacutetaacutevaacutena šiacuteřka paddingu a borderu ndash viz kapitolu

Okraje

height auto vyacuteška

procento

automatickaacute vyacuteška

nastavenaacute vyacuteška

procento

Daacute se nastavit jenom blokovyacutem tagům

Nejleacutepe funguje u ltdivgt

float

left

right

none

umiacutestěniacute plovouciacuteho

(obteacutekaneacuteho)

objektu či zda

je neplavec

clear

left

right

both

none

čekaacuteniacute na skončeniacute

plovouciacutech objektů

zleva zprava

obou nebo žaacutednyacutech

Použiacutevaacute se namiacutesto atributu clear u tagu BR

Většinou u nadpisů pod obraacutezky

Procenta v teacuteto tabulce se vztahujiacute k šiacuteřce (vyacutešce) rodičovskeacuteho elementu Šiacuteřka rodiče

je nejčastěji šiacuteřka dokumentu (nezaacutevislaacute na okně) kdežto procentuaacutelniacute vyacuteška nevnořenyacutech

elementů se počiacutetaacute z vyacutešky okna

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE

Blokovyacute model v CSS

Vlastnosti uvedeneacute v teacuteto tabulce lze spolehlivě aplikovat pouze na tzv blokoveacute

elementy což jsou většinou buňky tabulky nebo odstavce Obraacutezek ilustruje vyacuteznamy

vlastnostiacute


margin

deacutelka

procento

auto

šiacuteřka vnějšiacuteho

okraje

procento

automatickyacute okraj

Možno zadaacutevat všechny čtyři okraje dohromady

nebo zvlaacutešť IE 5 asi nepodporuje zaacuteporneacute hodnoty IE 4 a NN 4

ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute

Zaacutepis vlastnost-strana Netsape 4 v některyacutech

verziacutech neumiacute

padding deacutelka

procento

šiacuteřka vnitřniacuteho

okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding

horniacute vnitřniacute okraj

levyacute

spodniacute

pravyacute

Zaacutepis vlastnost-strana Netsape 4 neumiacute

Při zadaacutevaacuteniacute čtyř hodnot najednou se vztahujiacute ke stranaacutem elementu v pořadiacute horniacute

pravaacute dolniacute levaacute Např padding 12px 3px 6px 9px Prostě hodinoveacute ručičky

116 RAacuteMEČKY


border-width thin

medium

šiacuteřka raacutemečku

slabaacute

Možno zadaacutevat všechny čtyři

okraje dohromady nebo zvlaacutešť

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width

horniacute šiacuteřka

raacutemečku

levaacute

spodniacute

pravaacute

border-color barva barva raacutemečku border-color red

border-style solid



Pro NN 4 nelze rozlišovat

jednotliveacute čtyři okraje

border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute

čaacuterkovanyacute

plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset

IE 4 a 5 zobrazuje doted a dashed

jako solid a stiacutenuje vše černou

barvou

Ostatniacute prohliacutežeče včetně IE 55

zobrazujiacute spraacutevně a stiacutenujiacute šedou

IE 6 zobrazuje uacutezkou dotted jako

dashed

Netscape styl raacutemečku podporuje

pouze v zaacutepisu border

border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti

strany raacutemečku

border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px

Slovniacuteček okrajů a raacutemečků

border margin padding width top bottom left right

raacutemeček vnějšiacute okraj vnitřniacute okraj šiacuteřka (raacutemečku) horniacute spodniacute levyacute pravyacute

Prohliacutežeče se velmi lišiacute v tom na jakyacute tag dovoliacute okraje a velikost aplikovat U některyacutech tagů

styl prostě ignorujiacute

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY

Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt


list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček

čiacuteslovaacuteniacute

řiacutemskeacute čiacuteslice

aacutebeacuteceacutečkovaacuteniacute

ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-

image none URL(cesta)

normaacutelniacute nebo

obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside

Při inside je puntiacutek

jakoby součaacutestiacute dalšiacuteho

textu

118 POZICOVAacuteNIacute

Naacutesledujiacuteciacute vlastnosti nefungujiacute v IE 3 NN 3 a v Opeře 3


position

absolute

relative

static

absolutniacute umiacutestěniacute

relativniacute umiacutestěniacute

normaacutelniacute umiacutestěniacute

Vizte např httpwwwjakpsatwebczcsscss-

pozicovanihtml

left auto deacutelka

procento

bez posunutiacute

posunutiacute vpravo o

deacutelku

nebo o procento

Pro prvky s position absolute nebo position relative

Vlevo se posouvaacute zaacutepornou hodnotou

top auto deacutelka

procento

bez posunutiacute

posunutiacute dolů o

deacutelku

nebo o procento


Nahoru se posouvaacute zaacutepornou hodnotou

right auto deacutelka

procento

pozicovaacuteniacute od

praveacuteho okraje okna nebo

elementu Variace na vlastnosti left a top (top a left ale vždy vyhrajiacute)

Pouze pro objekty s position absolute Podpora od IE 5 v

Opeře a v Mozille ve staršiacutech prohliacutežečiacutech většinou vůbec

nebo špatně

bottom auto deacutelka

procento


spodniacuteho okraje okna nebo

elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto

nechat přeteacutekat

ořiacuteznout

vždy rolovat

rolovaacuteniacute je-li třeba

Pro elementy ktereacute majiacute nastaveneacute rozměry a nevejdou se

do nich

V IE fungujiacute i overflow-x a overflow-y

z-index auto čiacuteslo

definice překryacutevaacuteniacute

elementů

jakoby v ose z

Nefunguje pro tagy iframe select (v IE) pro a flashoveacute

animace

visibility visible hidden

viditelnyacute element

skrytyacute (neviditelnyacute) U skrytyacutech objektů se vyhradiacute miacutesto jako by tam byly

(narozdiacutel od display none)

119 TABULKY

Vlastnost hodnoty vyacuteznam poznaacutemky

table-layout auto fixed

nerozměrovanaacute tabulka se

přizpůsobuje oknu

fixed = tabulka se nezužuje do okna

Podpora v IE 5+ v Mozille a v Opeře

Použitiacute pouze u tagu lttablegt

border-

collapse

separate

collapse

buňky v tabulce majiacute raacutemečky

odděleneacute

sousedniacute buňky majiacute vykreslenyacute

raacutemeček společně jednou čarou



Uacutekol Vytvořte soubor s přiacuteponou htm a soubor s přiacuteponou css Do html dokumentu vloţte koacuted

kteryacutem zajistiacutete připojeniacute externiacuteho css souboru

Cvičeniacute Vyhledej v předchaacutezejiacuteciacutech tabulkaacutech formaacutetovaacuteniacute ktereacute se ti liacutebiacute a pokus se ho aplikovat

na libovolneacute konkreacutetniacute straacutence

Cvičeniacute

Navrhněte definici stylu kteraacute zvyacuterazněnyacute text (obsah značky ltemgt) nebude zvyacuterazňovat

kurziacutevou ale barevnyacutem pozadiacutem (např barvou ffff99)

Cvičeniacute Vytvořte definici stylu s naacutesledujiacuteciacutemi vlastnostmi - všechna piacutesmena budou bezpatkovaacute (definice v selektoru body) Vyzkoušejte různeacute

fonty

- text formaacutetovanyacute elementem lth1gt bude zobrazen kapitaacutelkami

- hypertextoveacute odkazy se po najetiacute myši změniacute na červenou barvu

- pozadiacute celeacuteho okna prohliacuteţeče bude dfdfa7 Elementy lth1gt a lth2gt budou miacutet

barvu pozadiacute ffe680

- staacutehněte si libovolnyacute obraacutezek kteryacute bude na pozadiacute celeacuteho dokumentu Odzkoušejte

různeacute varianty nastaveniacute vlastnostiacute background

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42


Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled

Cvičeniacute Vytvořte definici stylu s naacutesledujiacuteciacutemi vlastnostmi - šiacuteřka textu bude 60 šiacuteřky okna - text bude umiacutestěn uprostřed straacutenky (levyacute i pravyacute okraj stejně velkeacute)

- barva pozadiacute straacutenky 000066 barva textu ffffff barva odkazů ffcc00 a

navštiacutevenyacutech odkazů 999966


Cvičeniacute Vytvořte definici stylu s naacutesledujiacuteciacutemi vlastnostmi

- text formaacutetovanyacute elementy lth1gt a lth2gt bude miacutet definovaacutenu vyacuteplň o velikosti 1ex

nahoře a dole a 1em vpravo a vlevo

- text formaacutetovanyacute elementy lth2gt bude oraacutemovaacuten čaacuterkovanou čarou o tloušťce 1px a

barvě 666633

- text formaacutetovanyacute elementem ltpgt bude zarovnaacuten do bloku

- text formaacutetovanyacute elementem ltagt bude po najetiacute myši nepodtrţen

- ţe text formaacutetovanyacute elementem lth2gt bude převeden na velkaacute piacutesmena (verzaacutelky)

- seznam se třiacutedou seznamprojektu bude miacutet jako odraacuteţku praacutezdnyacute krouţek


Cvičeniacute Vytvořte straacutenku s tabulkou 4 x 6 buněk Vytvořte definici stylu s naacutesledujiacuteciacutemi vlastnostmi - tabulka bude oraacutemovaacutena jednoduchou černou čarou o siacutele 1px - zaacutehlaviacute tabulky bude miacutet tučneacute piacutesmo

- zaacutehlaviacute a zaacutepatiacute tabulky (formaacutetovaneacute elementy lttheadgt a lttfootgt) budou miacutet

barvu pozadiacute 999966

- uvnitř tabulky bude mřiacuteţka vykreslenaacute jednoduchou čarou o siacutele 1px s barvou 333300

- jednotliveacute buňky budou miacutet vyacuteplň o velikost 05ex

Cvičeniacute Vyhledej na Internetu straacutenky zabyacutevajiacuteciacute se CSS Zkus odpovědět na otaacutezku jestli se

CSS daacutele vyviacutejiacute Pokud ano tak zkus naleacutezt nějakeacute noveacute prvky ktereacute CSS umiacute Pokus se je aplikovat Jde to Pokud ne tak proč by tomu tak molo byacutet

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43


12 PRAVIDLA PRO TVORBU PŘIacuteSTUPNEacuteHO

WEBU

Ciacutel kapitoly

Vysvětlit technologickaacute a estetickaacute pravidla při tvorbě webu Navigaci na straacutenkaacutech

Zaacutesady psaniacute webu např praacuteci s webovou straacutenkou řiacutediacute uživatel informace jsou

srozumitelneacute a přehledneacute ovlaacutedaacuteniacute webu je jasneacute a pochopitelneacute koacuted je technicky

způsobilyacute a strukturovanyacute



Přiacutestupnyacute web je takovyacute kteryacute neklade uživateli žaacutedneacute překaacutežky v jeho použiacutevaacuteniacute a to

bez ohledu na uživatelovo technickeacute vybaveniacute jeho schopnosti znalosti či aktuaacutelniacute zdravotniacute

stav Přiacutestupnost webu si tedy klade za ciacutel poskytnout každeacutemu naacutevštěvniacutekovi straacutenek stejneacute

(tj všechny) informace umožnit web použiacutevat všem

Existuje nepovinnyacute předpis kteryacute řiacutekaacute jak by měl vypadat spraacutevnyacute web a čeho by se

měli autoři na svyacutech straacutenkaacutech vyvarovat

121 OBSAH WEBOVYacuteCH STRAacuteNEK JE DOSTUPNYacute A ČITELNYacute

Každyacute netextovyacute prvek nesouciacute vyacuteznamoveacute sděleniacute maacute svou textovou alternativu

Obraacutezky s textem

Obraacutezky ktereacute v sobě majiacute obsaženyacute text (logo webu obraacutezkovaacute tlačiacutetka

obraacutezkoveacute nadpisyhellip) majiacute jako alternativniacute hodnotu text kteryacute je v obraacutezku

Obraacutezky s informačniacute hodnotou ale bez textu

U obraacutezků ktereacute nesou obrazovou informaci (fotky) majiacute jako alternativniacute text

kraacutetkyacute popis toho co je na obraacutezku U fotografie člověka je tiacutem popisem jeho

jmeacuteno

Informace sdělovaneacute prostřednictviacutem skriptů objektů appletů kaskaacutedovyacutech stylů

obraacutezků a jinyacutech doplňků na straně uživatele jsou dostupneacute i bez ktereacutehokoli z těchto

doplňků

Informace sdělovaneacute barvou jsou dostupneacute i bez barevneacuteho rozlišeniacute

Barvy popřediacute a pozadiacute jsou dostatečně kontrastniacute Na pozadiacute neniacute vzorek kteryacute

snižuje čitelnost

Předpisy určujiacuteciacute velikost piacutesma nepoužiacutevajiacute absolutniacute jednotky

Velikost piacutesma v prohliacutežeči musiacute byacutet za všech okolnostiacute zvětšitelnaacute Neniacute to jen

kvůli uživatelům s horšiacutem zrakem je to i kvůli všem ostatniacutem kteřiacute si třeba nechtějiacute

kazit oči i pro všechny ostatniacute kdo se dostali k webům s moacutedou miniaturniacuteho piacutesma

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44


Jak zvětšit piacutesmo

Ve většině prohliacutežečů umožňuje zvětšeniacute piacutesma saacutem prohliacutežeč ať už zadaacutete

jakeacutekoliv jednotky Internet Explorer toto neumožňuje pokud je piacutesmo zadaneacute v

jednotkaacutech pt px mm cm Proto je nutneacute použiacutevat vždy relativniacute jednotky tj např

jednotky em či procentuaacutelniacute vyjaacutedřeniacute (např 80)

Předpisy určujiacuteciacute typ piacutesma obsahujiacute obecnou rodinu piacutesem

V definici rodiny piacutesma ndash CSS vlastnost font-family ndash musiacute byacutet ve vyacutepisu piacutesem

vždy definovaacutena obecnaacute rodina a to vždy jako posledniacute alternativa např

font-family Arial CE Helvetica CE Arial sans-

serif

122 PRAacuteCI S WEBOVOU STRAacuteNKOU ŘIacuteDIacute UŽIVATEL

Obsah WWW straacutenky se měniacute jen když uživatel aktivuje nějakyacute prvek

Webovaacute straacutenka bez přiacutemeacuteho přiacutekazu uživatele nemanipuluje uživatelskyacutem

prostřediacutem

Novaacute okna se oteviacuterajiacute jen v odůvodněnyacutech přiacutepadech a uživatel je na to předem

upozorněn

Na weboveacute straacutence nic neblikaacute rychleji než jednou za sekundu

Blikaacuteniacute na straacutence resp jakyacutekoliv rychlyacute pohyb je pro uživatele nepřiacutejemnyacute a

odvaacutediacute pozornost od obsahu straacutenky zkraacutetka rušiacute někdy nesnesitelně Pravidlo se

samozřejmě tyacutekaacute neustaacuteleacuteho blikaacuteniacute ktereacute blikaacute samo nejde tu o žaacutedneacute efekty při

přejetiacute myšiacute apod

Webovaacute straacutenka nebraacuteniacute uživateli posouvat obsahem raacutemů

Obsah ani koacuted weboveacute straacutenky nepředpoklaacutedaacute ani nevyžaduje konkreacutetniacute způsob

použitiacute ani konkreacutetniacute vyacutestupniacute či ovlaacutedaciacute zařiacutezeniacute

123 INFORMACE JSOU SROZUMITELNEacute A PŘEHLEDNEacute

Weboveacute straacutenky sdělujiacute informace jednoduchyacutem jazykem a srozumitelnou formou

Uacutevodniacute webovaacute straacutenka jasně popisuje smysl a uacutečel webu Naacutezev webu či jeho

provozovatele je zřetelnyacute

Webovaacute straacutenka i jednotliveacute prvky textoveacuteho obsahu uvaacutedějiacute sveacute hlavniacute sděleniacute na

sveacutem začaacutetku

Rozsaacutehleacute obsahoveacute bloky jsou rozděleny do menšiacutech vyacutestižně nadepsanyacutech celků

Informace zveřejňovaneacute na zaacutekladě zaacutekona jsou dostupneacute jako textovyacute obsah straacutenky

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45


Na samostatneacute weboveacute straacutence je uveden kontakt na technickeacuteho spraacutevce a prohlaacutešeniacute

jasně vymezujiacuteciacute miacuteru přiacutestupnosti webu a jeho čaacutestiacute Na tuto webovou straacutenku odkazuje

každaacute straacutenka webu

124 OVLAacuteDAacuteNIacute WEBU JE JASNEacute A POCHOPITELNEacute

Každaacute webovaacute straacutenka maacute smysluplnyacute naacutezev vystihujiacuteciacute jejiacute obsah

Navigačniacute a obsahoveacute informace jsou na weboveacute straacutence zřetelně odděleny

Navigace je srozumitelnaacute a je konzistentniacute na všech webovyacutech straacutenkaacutech

Každaacute webovaacute straacutenka (kromě uacutevodniacute weboveacute straacutenky) obsahuje odkaz na vyššiacute

uacuteroveň v hierarchii webu a odkaz na uacutevodniacute WWW straacutenku

Všechny weboveacute straacutenky rozsaacutehlejšiacuteho webu obsahujiacute odkaz na přehlednou mapu

webu

Obsah ani koacuted weboveacute straacutenky nepředpoklaacutedaacute že uživatel již navštiacutevil jinou straacutenku

Každyacute formulaacuteřovyacute prvek maacute přiřazen vyacutestižnyacute nadpis

Každyacute raacutem maacute vhodneacute jmeacuteno či popis vyjadřujiacuteciacute jeho smysl a funkčnost

125 ODKAZY JSOU ZŘETELNEacute A NAacuteVODNEacute

Označeniacute každeacuteho odkazu vyacutestižně popisuje jeho ciacutel i bez okolniacuteho kontextu

Stejně označeneacute odkazy majiacute stejnyacute ciacutel

Odkazy jsou odlišeny od ostatniacuteho textu a to nikoli pouze barvou

Pravidlo podtrhaacutevaacuteniacute odkazů je velmi důležiteacute hlavně kvůli použitelnosti webu

Netyacutekaacute se žaacutedneacute menšiny uživatelů tyacutekaacute se uacuteplně všech a jeho nedodržovaacuteniacute pohyb

uživatele po webu ovlivňuje skutečně hodně Aby mělo podtrhaacutevaacuteniacute odkazů vůbec

nějakyacute vyacuteznam je zaacuteroveň důležiteacute nepodtrhaacutevat žaacutednyacute text kteryacute odkazem neniacute

Uživatel je předem jasně upozorněn když odkaz vede na obsah jineacuteho typu než je

webovaacute straacutenka Takovyacute odkaz je doplněn sděleniacutem o typu a velikosti ciacuteloveacuteho souboru

126 KOacuteD JE TECHNICKY ZPŮSOBILYacute A STRUKTUROVANYacute

Koacuted webovyacutech straacutenek odpoviacutedaacute nějakeacute zveřejněneacute finaacutelniacute specifikaci jazyka HTML

či XHTML Neobsahuje syntaktickeacute chyby ktereacute je spraacutevce webovyacutech straacutenek schopen

odstranit Viz kapitolu Validniacute koacuted

V metaznačkaacutech je uvedena použitaacute znakovaacute sada dokumentu

Prvky tvořiacuteciacute nadpisy a seznamy jsou korektně vyznačeny ve zdrojoveacutem koacutedu Prvky

ktereacute netvořiacute nadpisy či seznamy naopak ve zdrojoveacutem koacutedu takto vyznačeny nejsou

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46


Pro popis vzhledu weboveacute straacutenky jsou upřednostněny styloveacute předpisy (CSS)

Je-li tabulka použita pro rozvrženiacute obsahu weboveacute straacutenky neobsahuje zaacutehlaviacute řaacutedků

ani sloupců Všechny tabulky zobrazujiacuteciacute tabulkovaacute data naopak zaacutehlaviacute řaacutedků anebo

sloupců obsahujiacute

Všechny tabulky daacutevajiacute smysl čteneacute po řaacutedciacutech zleva doprava

Kap

ito

la

Val

idn

iacute koacute

d

47


13 VALIDNIacute KOacuteD

Ciacutel kapitoly

Vysvětlit co je to validita proč psaacutet validně možnosti ověřeniacute validity - Validaacutetor W3C

Co může způsobit nevalidniacute koacuted



Validniacute koacuted znamenaacute že vyacuteslednyacute koacuted webovyacutech straacutenek odpoviacutedaacute nějakeacute zveřejněneacute

finaacutelniacute specifikaci jazyka HTML či XHTML Neobsahuje syntaktickeacute chyby ktereacute je spraacutevce

webovyacutech straacutenek schopen odstranit

Validniacute koacuted je takovyacute kteryacute neobsahuje žaacutedneacute chyby v syntaxi podle zvoleneacute

specifikace jazyka To znamenaacute že straacutenka musiacute miacutet určenyacute DOCTYPE a byacutet oproti němu

validniacute Validita webu se pak daacute snadno zjistit pomociacute validaacutetoru

131 CO MŮŽE ZPŮSOBIT NEVALIDNIacute KOacuteD

Pokud koacuted neniacute validniacute v nejjednoduššiacutem přiacutepadě to může znamenat chybneacute zobrazeniacute

straacutenky kdy některaacute čaacutest straacutenky může překryacutet jinou Takovyacute probleacutem se pak tyacutekaacute všech

uživatelů Většinou je ale toto pravidlo důležiteacute spiacuteše pro interpretaci straacutenky např hlasovou

čtečkou kteraacute se v nevalidniacutem koacutedu může snadno ztratit nebo chybně interpretovat vyacuteznam

Stejně se pak může ztratit i vyhledaacutevaciacute robot a straacutenku chybně zaindexovat nebo

nezaindexovat vůbec

132 VALIDAacuteTOR W3C

Online validaacutetor W3C nalezneme na adrese httpvalidatorw3org Praacutece s niacutem je

jednoduchaacute Na uacutevodniacute straacutence je třeba sdělit validaacutetoru kteryacute soubor se bude validovat

Zvolit můžete buď Validate by URL kde se do poliacutečka Address zadaacute URL adresa straacutenky

Nebo můžete zvolit Validate by File Upload a pomociacute tlačiacutetka browse projiacutet svůj disk a

vybrat (a potvrdit tlačiacutetkem check) soubor k validaci

Do poliacutečka Address (URL) stačiacute spraacutevně zadat URL adresu straacutenky jejiacutež validitu

kontrolujeme

Cvičeniacute Zkontrolujte některou jednoduššiacute straacutenku on-line validaacutetorem Analyzujte vyacutesledky

Cvičeniacute Najdi na Internetu naacutestroj na kontrolu validity CSS souborů Zkontrolujte několik

jednoduššiacutech CSS souborů on-line validaacutetorem Analyzujte vyacutesledky

Kap

ito

la D

om

eacutena

a h

ost

ing

48


14 DOMEacuteNA A HOSTING

Ciacutel kapitoly

Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting



Pokud již považujeme sveacute weboveacute straacutenky za hotoveacute nic nebraacuteniacute jejich zveřejněniacute na

Internetu V tuto chviacuteli stojiacuteme před rozhodnutiacutem kam a za kolik peněz je umiacutestiacuteme

141 DOMEacuteNA

Prvniacutem krokem bude vyacuteběr domeacuteny Naacutezev domeacuteny je v podstatě jmeacuteno pro straacutenky

Nejdřiacuteve se musiacuteme rozhodnout zda budeme chtiacutet domeacutenu druheacuteho nebo třetiacuteho řaacutedu

1411 Domeacutena prvniacuteho řaacutedu

Pro Českou republiku je (top-level domeacutena) cz a spravuje ji zvolenyacute registraacutetor Tuto

domeacutenu nelze vlastnit

1412 Domeacutena druheacuteho řaacutedu

Domeacutena druheacuteho řaacutedu je obvykle placenaacute Maacute tvar wwwnazevdomenycz

1413 Domeacutena třetiacuteho řaacutedu

Domeacutena třetiacuteho řaacutedu byacutevaacute obvykle zdarma umiacutestěna na některeacutem ze serverů

poskytujiacuteciacutech tyto služby (např webzdarmacz pipnicz pescz) Obvykle maacute tvar

nazevdomenyjmenoposkytovatelecz popř wwwjmenoposkytovatelecznazevdomeny Někdy

je URL ještě složitějšiacute což je hlavniacute nevyacutehodou těchto domeacuten Obvykle takeacute musiacutete počiacutetat s

povinnyacutem umiacutestěniacutem reklamy serveru na vaše straacutenky

142 HOSTING

Hostingem se rozumiacute miacutesto kde jsou straacutenky fyzicky umiacutestěneacute Pokud si vybereme

domeacutenu 3 řaacutedu bude umiacutestěna na server kteryacute jsme zvolili U domeacuteny 2 řaacutedu můžeme

zaregistrovat zvlaacutešť domeacutenu a zvlaacutešť hosting ten musiacuteme vybrat Obvykle jde o hosting

placenyacute ale existujiacute i různeacute verze freehostingů Placenyacute hosting nabiacuteziacute daleko lepšiacute služby

včetně různyacutech garanciacute obvykle nabiacuteziacute většiacute prostor na disku lepšiacute administraci statistiky

podporu viacutece databaacuteziacute takeacute viacutece e-mailů a podobně

143 UMIacuteSTĚNIacute STRAacuteNEK

Pokud již maacuteme prostor pro sveacute straacutenky zaregistrovanyacute dostaneme login (uživatelskeacute

jmeacuteno) a heslo pro přiacutestup V zaacutevislosti na charakteru naacutemi vybraneacute služby budeme moci ke

Kap

ito

la D

om

eacutena

a h

ost

ing

49


svyacutem straacutenkaacutem přistupovat buď jen přes weboveacute rozhraniacute nebo i přes FTP klienta Ať už tak

či onak jedineacute co teď zbyacutevaacute je zkopiacuterovat straacutenky z disku na server K přesunu se nejčastěji

použiacutevajiacute běžně dostupniacute FTP klienti (např volně šiřitelnyacute CoffeeCup Free FTP FTP

Commander či Total Commander)

Vyacuteznamnyacutem rizikem FTP je že přenaacutešiacute uživatelskeacute heslo a jmeacuteno v otevřeneacutem tvaru ndash

při odposlechu lze zneužiacutet Vhodnějšiacute variantou je tedy použitiacute scp ktereacute veškerou

komunikaci šifruje Volně šiřitelnou implementaciacute pro operačniacute systeacutem MS Windows je např

Putty lepšiacute je však použiacutet grafickyacute program WinSCP (httpwinscpvseczeng)

Na weboveacutem rozhraniacute obvykle prochaacuteziacutete disk vyberete soubory a zvoliacutete přidat

soubory Přes FTP klienta jde o klasickeacute kopiacuterovaacuteniacute souborů

Vstupniacute straacutenku (straacutenka kteraacute se maacute prvniacute zobrazit po zadaacuteniacute adresy webu do

adresniacuteho řaacutedku) musiacuteme obvykle pojmenovat indexhtml indexhtm indexphp apod Je

možneacute že se setkaacutete s jinyacutem požadovanyacutem naacutezvem vstupniacute straacutenky (např defaulthtm) Zaacuteležiacute

na poskytovateli hostingu

Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50


15 SLOVNIacuteČEK POJMŮ

browser ndash prohliacutežeč program kteryacute zobrazuje dokumenty zveřejněneacute na Internetu

CSS ndash Cascading Style Sheet ndash Kaskaacutedoveacute styly ndash metoda pro pokročileacute formaacutetovaacuteniacute HTML

straacutenek

DHTML ndash Dynamic HTML společneacute označeniacute pro HTML CSS a skriptovaacuteniacute ktereacute

umožňuje lepšiacute interakci s uživatelem

DIV ndash divission ndash oddiacutel odděleniacute HTML tag kteryacute obklopuje určitou logickou oblast

straacutenky Je to tzv blokovyacute element tzn dělaacute za sebou zalomeniacute řaacutedku

download ndash staženiacute souboru

font ndash druh piacutesma

FTP ndash File Transfer Protocol ndash Jeden z protokolů založenyacutech na TCPIP sloužiacuteciacute k přenosu

souborů mezi dvěma uzly

fulltext ndash Způsob vyhledaacutevaacuteniacute nebo takeacute způsob organizace databaacuteze textů umožňujiacuteciacute

porovnaacutevaacuteniacute každeacuteho slova dokumentu se zadanyacutem vzorem

GIF ndash Graphic Interchange Format ndash Vyacutehodou na rozdiacutel od formaacutetu JPEG je bezztraacutetovaacute

komprese dat Může obsahovat i viacutece obraacutezků ktereacute se ve stanovenyacutech intervalech

střiacutedajiacute - tzv animovanyacute gif Může obsahovat ale maximaacutelně jen 256 barev

HTML ndash hypertext markup language ndash hypertextovyacute značkovaciacute jazyk

HTTP ndash Hypertext Transfer Protocol ndash Jeden z protokolů založenyacutech na TCPIP sloužiacuteciacute

k přenosu hypertextoveacuteho obsahu nejčastěji pak straacutenek systeacutemu WWW

hypertextovyacute odkaz ndash jednaacute se o určitou čaacutest dokumentu napřiacuteklad text nebo obraacutezek kteryacute

odkazuje na jinyacute dokument nebo jeho čaacutest V internetoveacutem prohliacutežeči se uživatel po

kliknutiacute na odkaz přenese na přiacuteslušnyacute odkazovanyacute dokument

JavaScript ndash Programovaciacute jazyk použitelnyacute zejmeacutena v HTML straacutenkaacutech Vykonaacutevaacute se na

počiacutetači u klienta (tj čtenaacuteře)

JPEGJPG ndash Joint Photographic Experts Group ndash Grafickyacute formaacutet na rozdiacutel od GIF je

použitiacute až 16 milionů barev a malyacute objem obraacutezku dosaženyacute ale ztraacutetovou kompresiacute

Meta tagy ndash umisťujiacute se do hlavičky HTML souboru a nesou nějakou dalšiacute informaci kteraacute

neniacute součaacutestiacute dokumentu např informaci o autorovi nebo kliacutečovaacute slova

PHP ndash původně Personal Home Page nyniacute hypertext preprocesor PHP ndash Skriptovaciacute jazyk

fungujiacuteciacute na straně serveru

PNG ndash Portable Network Graphics ndash Moderniacute grafickyacute formaacutet - možnyacute naacutestupce formaacutetu

GIF Formaacutet barvy může byacutet až 48-bitovyacute podporuje možnost zobrazeniacute v různeacutem

rozlišeniacute na obrazovce a při tisku

protokol ndash předpis kteryacute určuje způsob komunikace mezi počiacutetači zajišťuje uskutečněniacute

přenosu navaacutezaacuteniacute udrženiacute a ukončeniacute spojeniacute

Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51


SCP ndash naacutehrada FTP využiacutevajiacuteciacute SSH (Secure SHell) zabezpečeniacute

server ndash bezobslužnyacute program (nikoli tedy stroj) běžiacuteciacute na počiacutetači permanentně zapojeneacutem

v počiacutetačoveacute siacuteti kteryacute nabiacuteziacute služby dalšiacutem počiacutetačům a serverům

skript ndash většinou je skriptem myšlen menšiacute program napsanyacute nějakyacutem skriptovaciacutem jazykem

souslednost přiacutekazů k provedeniacute

software ndash programoveacute vybaveniacute jakyacutekoliv program (např editor textů internetovyacute

prohliacutežeč elektronickyacute slovniacutek)

Tag ndash značka ndash HTML jazyk sestaacutevaacute z tagů ktereacute vymezujiacute vzhled a smysl dokumentu

TCPIP ndash transmission control protocol Internet protocol ndash protokol dle ktereacuteho funguje

komunikace v siacuteti Internet

upload ndash termiacuten použiacutevanyacute pro přenos dokumentu (souboru) z uživatelova počiacutetače na

internetovyacute server (nebo jinyacute počiacutetač)

URL ndash Uniform Resource Lokator ndash adresa umiacutestěniacute weboveacute straacutenky (teacutež internetovaacute adresa

webovaacute adresa)

W3C ndash World Wide Web Consorcium ndash mezinaacuterodniacute organizace založenaacute v roce 1994

stanovujiacuteciacute standardy pro WWW

webhosting ndash pronaacutejem prostoru na WWW serveru Každaacute webovaacute prezentace využiacutevaacute

nějakyacute způsob webhostingu

weblog blog ndash internetovyacute deniacuteček jednaacute se zpravidla o jednoduchyacute redakčniacute systeacutem kteryacute

umožňuje publikovat na webu aktuaacutelniacute novinky autora blogu ndash blogera

webmaster webdesigner ndash osoba kteraacute vytvaacuteřiacute udržuje a staraacute se o webovou prezentaci

WWW ndash World Wide Web ndash zkratka pochaacutezejiacuteciacute z anglickeacuteho WorldWide Web (v překladu

celosvětovaacute pavučina) Jednaacute se o jednu z nejužiacutevanějšiacutech služeb Internetu kteraacute

nabiacuteziacute k prohliacuteženiacute bdquoweboveacute― straacutenky Charakteristickyacutem rysem webu jsou tzv

hypertextoveacute odkazy (odtud pavučina) Často se použiacutevaacute pouze zkraacutecenyacute termiacuten web

WYSIWYG editor ndash zkratka What You See Is What You Get znamenaacute že straacutenka psanaacute

v takoveacutemto typu editoru se zobrazuje už při psaniacute tak jak bude (měla by) vypadat

později v prohliacutežeči HTML (popř XHTML) koacuted je tak před uživatelem ukryt a neniacute

tedy potřeba jeho znalost

XHTML ndash eXtensible HTML neboli značkovaciacute jazyk kteryacute nahrazuje dnes již zastaralyacute

jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52


16 DOPORUČENAacute STUDIJNIacute LITERARURA

Musciano Chuck Kennedy Bill HTML a XHMTL kompletniacute průvodce Computer

Press 2000 ISBN 80ndash7226ndash407ndash9

Kosek Jiřiacute HTML tvorba dokonalyacutech WWW straacutenek Grada Publishing 1998 ISBN

80ndash7169ndash608ndash0

Broža Petr Tvorba WWW straacutenek pro uacuteplneacute začaacutetečniacuteky Computer Press 2001

ISBN 80ndash7226ndash423ndash0

Staniacuteček Petr CSS kaskaacutedoveacute styly Kompletniacute průvodce ComputerPress 2003


Hlavenka Jiřiacute a kol Vytvaacuteřiacuteme WWW straacutenky a spravujeme moderniacute web site

Computer Press 2002 ISBN 80ndash 7226ndash 748ndash 5

King Andrew B Zrychlete sveacute WWW straacutenky Zoner Press 2003 ISBN 80-86815-

02-1

Krug Steve Web design - nenuťte uživatele přemyacutešlet Computer Press 2003 ISBN

80-7226-892-9

Prokop Marek CSS pro webdesignery Mobil Media 2003 ISBN 80ndash86593ndash35ndash5

Satrapa Pavel Web design Neokortex 1997 ISBN 80ndash902230ndash1ndashX

Siegel David Creating Killer Web Sites 2 vydaacuteniacute New Riders Publishing 1998

ISBN 1568304331

Simpson Alan Jak si udělat svou prvniacute Webovou straacutenku Svojtka amp Co 2000 ISBN


Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999


Špinar David Tvořiacuteme přiacutestupneacute weboveacute straacutenky Zoner Press 2004 ISBN 80-86815-

11-0

Doporučeneacute WWW straacutenky zabyacutevajiacuteciacute se teacutematy tvorby webu

Jak psaacutet web naacutevod na HTML straacutenky ndash velice obsaacutehlyacute web o tvorbě internetovyacutech

straacutenek httpwwwjakpsatwebcz

Web tvorba tvorba WWW straacutenek ndash aktualizovaneacute straacutenky o XHTML a jinyacutech

webovyacutech technologiiacutech httpwwwwebtvorbacz

Pixylophone - weblog Petra Staniacutečka s informacemi o webdesignu a CSS

httpwwwpixycz (již neaktualizovaacuteno)

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53


Sova v siacuteti ndash Člaacutenky rady a novinky pro webmastery webdesigneacutery a informačniacute

architekt od Marka Prokopa httpwwwsovavsiticz

Přiacutestupnost ndash Postupy jak vytvaacuteřet weby bez barieacuter httppristupnostnawebucz

Vše o WWW ndash straacutenky věnujiacuteciacute se WWW od Jiřiacuteho Koska httpwwwkosekcz

Validaacutetor koacutedu ndash naacutestroj pro kontrolu validity straacutenek od W3C httpvalidatorw3org

Typo ndash Průvodce typografiiacute httpwwwtypocz

OpenSource CMS (aglicky) ndash mnoho zajiacutemavyacutech informaciacute o CMS zejm a vyacuteběru

vhodneacuteho produktu Na straacutenkaacutech si lze jednotliveacute CMS i vyzkoušet

Jak na web ndash vše pro web - straacutenky věnujiacuteciacute se všemožnyacutem webovyacutem technologiiacutem

httpwwwjaknawebcom

Interval ndash webdesign a e-komerce httpwwwintervalcz

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54


Seznam použityacutech zdrojů

Internet

[1] VĚTROVSKAacute Petra Web tvorba tvorba WWW straacutenek [online] 2006 [cit 2006-07-29]

lthttpwwwwebtvorbaczgt

[2] JANOVSKYacute ndash YUHŮ Dušan Jak psaacutet web naacutevod na html straacutenky [online] Posledniacute

revize 5 července 2006 [cit 2006-07-29] lthttpwwwjakpsatwebcz gt

[3] GAacuteLA Libor 4IT121 Web Design [online] 2005 [cit 2006-07-29]

lthttpnbvsecz~GALAit120indexhtmgt

[4] JEDNOTA ŠKOLSKYacuteCH INFORMATIKŮ Publikovaacuteniacute na WWW Slovniacuteček pojmů

[online] 2006 [cit 2006-07-29] lthttpwwwjsiczstrankyslovnicekhtmgt

[5] KOSEK Jiřiacute Domovskaacute straacutenka Jirky Koska -- VŠE O WWW [online] Posledniacute revize

4 května 2006 [cit 2006-07-29] lthttpwwwkosekczgt

Knihy

[6] SATRAPA Pavel Podklady pro vzdělaacutevaciacute kursy pedagogů - Vytvaacuteřeniacute WWW straacutenek

2005

Kap

ito

la

OB

SAH

2


OBSAH

OBSAH 2 1 UacuteVOD 4

11 Charakteristika učebniacuteho textu 4 12 Ciacutelovaacute skupina 4 13 Ciacutele učebnice ndash profil absolventa 4 14 Hodinovaacute dotace 4 15 Vstupniacute požadavky (uacuteroveň) 4 16 Uacutespěšneacute zvlaacutednutiacute 5 17 Použiteacute formaacutetovaacuteniacute a struktura 5

2 WEB ANEB JE TO NA INTERNETU 6 21 Jak vytvořit WWW straacutenku 6 22 Uspořaacutedaacuteniacute klientndashserver 7

221 Klient (browser prohliacutežeč) 7 222 Server 7

23 Standardy pro Web 7 231 HTTP (HyperText Transport Protocol) 7 232 HTML (HyperText Markup Language) 8 233 XHTML (eXtensible HypertextMarkup Language) 8 234 CSS (Cascading Style Sheets) 8 235 PHP (Hypertext Preprocesor) 9 236 JavaScript 9

3 UacuteVOD DO XHTML 10 31 Elementy 10

311 Blokoveacute elementy 10 312 Inline elementy 11 313 Nahrazovaneacute elementy 11 314 Atributy 11 315 Entity 11

32 Pravidla XHTML 12 33 Kostra straacutenky 13

4 ODKAZY - URL 14 41 Použitiacute odkazů na straacutence 14 42 Odkaz na jinou straacutenku 15

421 Absolutniacute odkaz 15 422 Relativniacute odkaz 15

43 Odkaz na konkreacutetniacute miacutesto dokumentu 15 44 Otevřeniacute odkazu v noveacutem okně 16

441 Způsob otevřeniacute noveacuteho okna 16 45 Titulek odkazu 16

5 NADPISY 18 6 SEZNAMY 19

61 Neuspořaacutedanyacute seznam 19 62 Uspořaacutedanyacute seznam 19

7 TABULKY 20 71 Nadpis tabulky 21 72 Slučovaacuteniacute buněk 21

8 OBRAacuteZKY 23 811 Grafika pro WWW straacutenky 23 812 Jakyacute zvolit grafickyacute formaacutet 23 813 Grafickyacute editor 24

82 Vloženiacute obraacutezku v XHTML 24 83 Velikost obraacutezku 24

9 META TAGY 26 91 Meta charset ndash koacutedovaacuteniacute češtiny 26

Kap

ito

la

OB

SAH

3
















Kap

ito

la

Uacutevo

d

4


1 UacuteVOD








straacutenky










zaacutekladu









Kap

ito

la

Uacutevo

d

5



znalosti




















kurziacutevou




Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

6



Ciacutel kapitoly








službu WWW














webu zveřejnit



respektovat je











Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

7





EasyPad a PSPad

















222 Server











ukončena

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


























layout v CSS)












Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

OB

SAH

3
















Kap

ito

la

Uacutevo

d

4


1 UacuteVOD








straacutenky










zaacutekladu









Kap

ito

la

Uacutevo

d

5



znalosti




















kurziacutevou




Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

6



Ciacutel kapitoly








službu WWW














webu zveřejnit



respektovat je











Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

7





EasyPad a PSPad

















222 Server











ukončena

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


























layout v CSS)












Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d

4


1 UacuteVOD








straacutenky










zaacutekladu









Kap

ito

la

Uacutevo

d

5



znalosti




















kurziacutevou




Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

6



Ciacutel kapitoly








službu WWW














webu zveřejnit



respektovat je











Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

7





EasyPad a PSPad

















222 Server











ukončena

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


























layout v CSS)












Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d

5



znalosti




















kurziacutevou




Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

6



Ciacutel kapitoly








službu WWW














webu zveřejnit



respektovat je











Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

7





EasyPad a PSPad

















222 Server











ukončena

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


























layout v CSS)












Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

6



Ciacutel kapitoly








službu WWW














webu zveřejnit



respektovat je











Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

7





EasyPad a PSPad

















222 Server











ukončena

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


























layout v CSS)












Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

7





EasyPad a PSPad

















222 Server











ukončena

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


























layout v CSS)












Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

8


























layout v CSS)












Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Web

an

eb J

e to

na

Inte

rnet

u

9










236 JavaScript




















Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o X

HTM

L

10



Ciacutel kapitoly


kostra straacutenky





vlastnostech















31 ELEMENTY










Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o X

HTM

L

11


312 Inline elementy






314 Atributy








315 Entity























Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o X

HTM

L

12




symbolu (entity)

32 PRAVIDLA XHTML





XHTML 10 Strict






XHTML 10 Frameset














Špatně


Dobře


Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o X

HTM

L

13












ltheadgt




ltheadgt

ltbodygt


ltbodygt

lthtmlgt










XHTML

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Od

kazy

- U

RL

14


4 ODKAZY - URL

Ciacutel kapitoly


odkazem




















Špatně



Dobře






Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Od

kazy

- U

RL

15

































Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Od

kazy

- U

RL

16







prohliacutežeče


















45 TITULEK ODKAZU








Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Od

kazy

- U

RL

17







studentu



Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la N

adp

isy

18


5 NADPISY

Ciacutel kapitoly












podle velikosti



vlevo







Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Sezn

amy

19


6 SEZNAMY

Ciacutel kapitoly








ltulgt

ltligtžirafaltligt

ltligtslonltligt


ltulgt

Vyacutesledek




ltolgt

ltligtžirafaltligt

ltligtslonltligt


ltolgt

Vyacutesledek




Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Tab

ulk

y

20


7 TABULKY

Ciacutel kapitoly


















lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Tab

ulk

y

21


71 NADPIS TABULKY



lttablegt


lttrgt

ltthgt1ltthgt

ltthgt2ltthgt

lttrgt

lttrgt

lttdgtaaalttdgt

lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttdgtdddlttdgt

lttrgt

lttablegt

Vyacutesledek




takto sloučit

lttablegt


lttrgt


lttrgt

lttrgt


lttdgtbbblttdgt

lttrgt

lttrgt

lttdgtccclttdgt

lttrgt

lttablegt

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Tab

ulk

y

22


Vyacutesledek













Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Ob

raacutezk

y

23


8 OBRAacuteZKY

Ciacutel kapitoly















zachaacutezet

















GIF

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Ob

raacutezk

y

24



















přiacuteručky gt
















Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Ob

raacutezk

y

25











Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la M

eta

tagy

26


9 META TAGY

Ciacutel kapitoly





HTML dokumentu







1250 gt



windows-1250


utf-8











Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la M

eta

tagy

27

















Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o C

SS

28


10 UacuteVOD DO CSS

Ciacutel kapitoly





101 HISTORIE






















A konkreacutetně

h1 color blue



Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o C

SS

29



modrou barvu




hodnota_vlastnosti2





1031 Dědičnost





body






modreacute










nebo v tagu style



Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o C

SS

30

















important













v CSS stylu




Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o C

SS

31































menu a color white



Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o C

SS

32





red



identifikaacutetor


color red


ltspan id=cervenegt



color red


ltb id=cervenegt


třiacuteda

třiacuteda cervena

color red


ltspan

class=cervenagt






color red


lti class=cervenagt


Vztahuje se jen na



hromadnaacute


H1 H2 H3

color red

lth1gtČervenyacute

nadpislth1gt


lth3gt




čaacuterkou

kontextovaacute

deklarace

nadřazenyacute

Selektor selektor

(odděleneacute

mezerou)

li a font-

weight

bold


seznamu


odkazltagtltligt



(ltligt)

i b color

red







ahover

color red






funguje v Exploreru

pouze jako ahover

pfirst-line

color red


odstavce bude

červenaacuteltpgt

Funguje pouze v

Mozille a v IE 55



v HTML


stylugt



stylopisu

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Uacutevo

d d

o C

SS

33


106 JEDNOTKY










cm Centimetry




1064 Procenta





107 BARVY










Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

34



Ciacutel kapitoly
















font-

family

seznam

piacutesem

druh piacutesma






piacutesem


oblique

normaacutelniacute

kurziacuteva

skloněneacute

font-style normal

font-style italic

font-style oblique




při oblique

font-


normaacutelniacute

kapitaacutelky

FONT-VARIANT

SMALL-CAPS





font-size

xx-small

x-small

small medium

large

x-large

xx-large

vyacuteška

procento

mrňaveacute

maličkeacute

maleacute

středniacute

velkeacute

obřiacute

extra velkeacute

vyacuteška

zvětšeniacute


font-size

medium

font-size

large


font-size





Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

35


125

font-

weight

normal bold

bolder

lighter

100 200

300hellip900

normaacutelniacute

tučneacute

trochu

tučnějšiacute

trochu

světlejšiacute

duktus


čiacuteslem

font-weight

normal


lighter

font-weight 100

font-weight 400

font-weight 600




font



piacutesmo








112 TEXT ODSTAVEC


text-

decoration

none underline

overline

line-through

blink

bez dekorace

podtrženiacute

nadtrženiacute

přeškrtnutiacute

blikaacuteniacute





through




text-

transform

none capitalize

uppercase

lowercase

bez transform

Začaacutetky Slov

Velkeacute

VELKAacute

PIacuteSMENA


Text-Transform none


TEXT-TRANSFORM

UPPERCASE


word-


zvětšenaacute

mezislovniacute

mezera

word-spacing normal



letter-



znaků

zvětšeneacute o

deacutelku


l e t t e r -

s p a c i n g 5 p t

line-

height

normal vyacuteška

naacutesobek

procento


absolutniacute

vyacuteška

naacutesobek

zvětšeniacute

line-height 3

line-height 8px

line-height 80


Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

36



řaacutedku


text-align

left right

center

justify

zarovnaacuteniacute

vlevo

vpravo

na střed

do bloku

text-align left

text-align right

text-align center







odstavců

vertical-

align

baseline sub

super

top

text-top

middle

bottom

text-bottom

procento

na řaacutedek

dolniacute index

horniacute index

co nejvyacuteše

vršek k vršku

střed na střed

co nejniacuteže

spodek na

spodek

procento

vyacutešky



top řaacutedek


middle řaacutedek

bottom řaacutedek


30 řaacutedek



řaacutedku




na řaacutedku

display

block inline

list-item

none

blokovyacute

element

řaacutedkovyacute

element

seznam

nezobraziacute se














color 00FF00




background-

color

barva

transparent

barva pozadiacute

průhledneacute

pozadiacute

background-color

yellow

background-color

transparent



background-


obraacutezek na

pozadiacute

background-image

url(pozadigif)

background-

repeat

repeat no-repeat

repeat-x

repeat-y

pozadiacute se

opakuje

neopakuje

opakuje v ose

X

nebo v ose Y

background-image

url(pozadigif)

background-repeat

repeat


repeat

background-repeat

repeat-x

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

37


background-


pozadiacute se

posouvaacute

pozadiacute je jako

přibiteacute



background-

position

top center

bottom

left center

right

deacutelka

procento

Poloha

obraacutezku na

pozadiacute

(nejčastěji

pokud se

neopakuje)

background-image

url(pozadigif)


repeat

background-position

right 50





background

všechny vyacuteše

uvedeneacute

hodnoty

background

url(pozadigif) no-


center bottom







procento



procento





Okraje


procento



procento



float

left

right

none



objektu či zda

je neplavec

clear

left

right

both

none



zleva zprava







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

38


115 OKRAJE




vlastnostiacute


margin

deacutelka

procento

auto


okraje

procento




ano

margin-top

margin-left

margin-

bottom

margin-right

jako u

margin

vnějšiacute okraj

horniacute

levyacute

spodniacute

pravyacute



padding deacutelka

procento


okraje

procento

padding-top

padding-left

padding-

bottom

padding-right

jako u

padding


levyacute

spodniacute

pravyacute




116 RAacuteMEČKY


border-width thin

medium


slabaacute



Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

39


thick

deacutelka

normaacutelniacute

tlustaacute

nastavenaacute

border-top-

width

border-left-

width

border-

bottom-width

border-right-

width

jako u

border-

width


raacutemečku

levaacute

spodniacute

pravaacute


border-style solid





border-style

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Druh

raacutemečku

žaacutednyacute

tečkovanyacute


plnyacute

dvojityacute

přiacutekop

val

ďoliacutek

naacutevršiacute

border-style none

border-style dotted

border-style dashed

border-style solid

border-style double

border-style groove

border-style inset



barvou




dashed



border-top

border-left

border-

bottom

border-right

barva

tloušťka

a styl

celkoveacute

vlastnosti


border

barva

tloušťka

a styl

všechny

vlastnosti

raacutemečku

border solid blue

2px






Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

40


117 SEZNAMY



list-style-

type

disc circle

square

decimal

lower-

roman

lower-alpha

upper-alpha

none

puntiacutek

kolečko

čtvereček




ABCD

bez odraacutežek

disc

o circle

square

4 decimal

v lower-roman

f lower-alpha

G upper-alpha

H none

list-style-



obraacutezkovaacute

odraacutežka

none

list-style-image

URL(pozadigif)

list-style-

position

inside

outside

odraacutežky v

uacuterovni textu

odraacutežka mimo

text

list-style-position

inside

list-style-position

outside



textu




position

absolute

relative

static





pozicovanihtml


procento

bez posunutiacute


deacutelku

nebo o procento



top auto deacutelka

procento

bez posunutiacute


deacutelku

nebo o procento




procento






nebo špatně


procento



elementu

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

41


overflow

visible hidden

scroll

auto


ořiacuteznout

vždy rolovat



do nich




elementů

jakoby v ose z


animace





119 TABULKY




přizpůsobuje oknu




border-

collapse

separate

collapse


odděleneacute









Cvičeniacute




fonty







Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

řeh

led

vla

stn

ost

iacute CSS

42











barvě 666633













Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

43



WEBU

Ciacutel kapitoly





















jmeacuteno



doplňků



snižuje čitelnost





Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

44











serif




prostřediacutem


upozorněn

















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

45












webu





















Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la P

ravi

dla

pro

tvo

rbu

přiacute

stu

pn

eacuteho

web

u

46







Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Val

idn

iacute koacute

d

47



Ciacutel kapitoly

























kontrolujeme




Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la D

om

eacutena

a h

ost

ing

48



Ciacutel kapitoly






141 DOMEacuteNA














142 HOSTING










Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la D

om

eacutena

a h

ost

ing

49
















Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

50





straacutenek

































Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la

Slo

vniacuteč

ek p

ojm

ů

51















webovaacute adresa)

















jazyk HTML

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

52














02-1


80-7226-892-9




ISBN 1568304331






11-0








Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

53











httpwwwjaknawebcom


Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Kap

ito

la D

op

oru

čen

aacute St

ud

ijniacute l

iter

aru

ra

54



Internet











Knihy


2005

Date post:	07-Jul-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

UEBNÍ TEXT „TVORBA WEBOVÝCH STRÁNEK technika... · V publikování na WWW existují určité...

Documents