Post on 07-Jul-2020
transcript
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
3
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d
4
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d
5
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Web
an
eb J
e to
na
Inte
rnet
u
6
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Web
an
eb J
e to
na
Inte
rnet
u
7
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Web
an
eb J
e to
na
Inte
rnet
u
8
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Web
an
eb J
e to
na
Inte
rnet
u
9
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o X
HTM
L
10
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
3 UacuteVOD DO XHTML
Ciacutel kapitoly
Vysvětlit syntaxi XHTML jazyka a jeho vlastnosti elementy atributy pravidla XHTML
kostra straacutenky
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o X
HTM
L
11
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o X
HTM
L
12
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
lttag1gtText lttag2gtzobrazovanyacutelttag2gt na straacutencelttag1gt
Kap
ito
la
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o X
HTM
L
13
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 StrictEN
httpwwww3orgTRxhtml1DTDxhtml1-strictdtdgt
lthtml xmlns=httpwwww3org1999xhtml xmllang=cs lang=csgt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Od
kazy
- U
RL
14
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
4 ODKAZY - URL
Ciacutel kapitoly
Vysvětlit praacuteci s odkazy použitiacute odkazů Rozdiacutel mezi absolutniacutem odkazem a relativniacutem
odkazem
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Od
kazy
- U
RL
15
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Od
kazy
- U
RL
16
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Od
kazy
- U
RL
17
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 N
adp
isy
18
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
5 NADPISY
Ciacutel kapitoly
Vysvětlit proč nadpisy použiacutevat Vysvětlit vytvaacuteřeniacute nadpisů
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
lth2gtNadpis 2 uacuterovnělth2gt
lth3gtNadpis 3 uacuterovnělth3gt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Sezn
amy
19
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
6 SEZNAMY
Ciacutel kapitoly
Vysvětlit praacuteci se seznamy
Předpoklaacutedanaacute doba studia
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
ltligtvelbloudltligt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tab
ulk
y
20
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
7 TABULKY
Ciacutel kapitoly
Vysvětlit způsoby vytvaacuteřeniacute tabulek použitiacute a praacuteci s tabulkami
Předpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tab
ulk
y
21
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ltcaptiongtNadpis tabulkyltcaptiongt
lttrgt
ltth colspan=2gt1ltthgt
lttrgt
lttrgt
lttd rowspan=2gtaaalttdgt
lttdgtbbblttdgt
lttrgt
lttrgt
lttdgtccclttdgt
lttrgt
lttablegt
Kap
ito
la
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tab
ulk
y
22
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
raacutezk
y
23
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
4 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
raacutezk
y
24
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
raacutezk
y
25
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 M
eta
tagy
26
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
9 META TAGY
Ciacutel kapitoly
Praacutece s Meta tagy koacutedovaacuteniacute češtiny popis straacutenky kliacutečovaacute slova straacutenky jazyk straacutenky
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 M
eta
tagy
27
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o C
SS
28
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o C
SS
29
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o C
SS
30
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o C
SS
31
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
třiacutedou poznamka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o C
SS
32
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Normaacutelniacute text
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
Normaacutelniacute text
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Uacutevo
d d
o C
SS
33
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
34
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
5 vyučovaciacutech hodin
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
35
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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-
spacing normal deacutelka
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
36
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
37
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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)
background-repeat no-
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
38
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
39
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Možno zadaacutevat všechny čtyři
okraje dohromady nebo zvlaacutešť
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
40
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
117 SEZNAMY
Všechny vlastnosti seznamů lze aplikovat na tagy ltulgt ltdirgt ltmenugt a ltligt
Vlastnost Hodnoty Vyacuteznam Přiacuteklady Poznaacutemky
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
Vlastnost Hodnoty Vyacuteznam Poznaacutemky
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
Pro prvky s position absolute nebo position relative
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
pozicovaacuteniacute od
spodniacuteho okraje okna nebo
elementu
Kap
ito
la P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
41
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Podpora v IE 5+ v Mozille a v Opeře
Použitiacute pouze u tagu lttablegt
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
řeh
led
vla
stn
ost
iacute CSS
42
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Vytvořte straacutenku kteraacute bude demonstrovat vyacuteslednyacute vzhled
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
ravi
dla
pro
tvo
rbu
přiacute
stu
pn
eacuteho
web
u
43
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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ředpoklaacutedanaacute doba studia
3 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
ravi
dla
pro
tvo
rbu
přiacute
stu
pn
eacuteho
web
u
44
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
ravi
dla
pro
tvo
rbu
přiacute
stu
pn
eacuteho
web
u
45
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 P
ravi
dla
pro
tvo
rbu
přiacute
stu
pn
eacuteho
web
u
46
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Val
idn
iacute koacute
d
47
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Předpoklaacutedanaacute doba studia
1 vyučovaciacute hodina
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 D
om
eacutena
a h
ost
ing
48
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
14 DOMEacuteNA A HOSTING
Ciacutel kapitoly
Možnosti a způsoby umiacutestěniacute straacutenek na Internet Vysvětleniacute pojmů domeacutena hosting
Předpoklaacutedanaacute doba studia
2 vyučovaciacute hodiny
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 D
om
eacutena
a h
ost
ing
49
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Slo
vniacuteč
ek p
ojm
ů
50
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Slo
vniacuteč
ek p
ojm
ů
51
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 D
op
oru
čen
aacute St
ud
ijniacute l
iter
aru
ra
52
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
ISBN 80ndash7226ndash872ndash4
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
80ndash7237ndash302ndash2
Spainhour Stephen Eckstein Robert Webmaster v kostceComputer Press 1999
ISBN 80ndash7226ndash450ndash8
Š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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 D
op
oru
čen
aacute St
ud
ijniacute l
iter
aru
ra
53
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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 D
op
oru
čen
aacute St
ud
ijniacute l
iter
aru
ra
54
Tvorba webovyacutech straacutenek SOŠ a SOU Kuřim sro
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