Vukov modul TWS_03aIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJETVORBA WEBOVCH STRNEK

Osnova vukovho modulu TWS_03avod do znakovacch jazyk HTML a XHTMLStruktura webov strnky, popis stZkladn znaky jazyka HTML a XHTML

STRUKTURA WEBOV STRNKY

Soubory webov strnkySoubory webov strnky jsou textov soubory, jejich nzev a ppona se d pedevm tmito pravidly:Nzev souboru:doporuuj se pouvat mal psmena,psmena bez diakritiky,nzev me obsahovat psmena, slice, podtrtka a pomlky,nepouvat komplikovan, dlouh nzvy,nzev souboru by ml vystihovat obsah (uren) webov strnky.

Soubory webov strnkyPpona souboru:Statick webov strnky:*.htm *.htmlDynamick webov strnky:*.php *.asp (dle skriptovacho jazyka)Definice kaskdovch styl:*.css vodn (poten) soubor webov prezentace, kter se zobrazuje po zadn adresy webov prezentace (nap. www.mojestranky.cz), se jmenuje index (nap. index.htm, index.html, index.php, atd.)

Organizace soubor webov prezentaceWebov prezentace me obsahovat typicky tyto soubory:soubory webov strnky (*.htm *.html *.php *.asp)extern definice kaskdovch styl (*.css)obrzky (*.jpg *.gif *.png)videa (*.mpg *.avi *.flv)audio (*.mp3 *.wav *.ogg)dokumenty (*.pdf *.doc *.xls *.pps)

Organizace soubor webov prezentacePro snadnou sprvu webov prezentace je vhodn soubory dle obsahu (typu) rozdlit do jednotlivch podadres:wwwKoenov sloka - obsahuje soubory webov strnky (sloka pstupn po pihlen na webov server).cssobrvideoaudiodokumenty

Uiten tip:Soubory, kter tvo webovou prezentaci, optimalizujeme na co nejmen velikost: RYCHL NATN Z WEBOVHO SERVERU!

Znakovac jazyk HTML a XHTMLHTML (HyperText Markup Language)Hypertextov znakovac jazyk.Oznauje obsah webov strnky a uruje prohlei co bude nadpis, odstavec, odkaz, seznam, blok textu, apod.Oznauje, kde bude vloena tabulka, obrzek, formul, apod.Existuj HTML znaky, kter nejsou smanticky sprvn (nap. prava fontu, blikajc a jezdc text, podtren, zarovnn, atd.). Uruj pouze vzhled, neuruj smysl textu. U striktnch verz (X)HTML je nelze pout, obecn se nedoporuuj!

Znakovac jazyk HTML a XHTMLXHTML (eXtensible HyperText Markup Language)Novj a psnj verze znakovacho jazyka HTML.Striktn verze (neplat pro Transitional) eliminuje pouit HTML znaek pro pravu obsahu (vyuit kaskdovch styl).Mylenka psnjho znakovacho jazyka XHTML: - oddlen obsahu od formy webov strnky, - vzhled strnky vtinou shodn u vech znmch prohle, - jasnj pravidla pro prohle, zobrazujc obsah strnky, - ist a pehlednj kd webovho dokumentu.

Uiten tip:Pro formtovn (pravu) a pozicovn obsahu webov strnky se doporuuje pouvat jazyk CSS (kaskdov styly)

Struktura HTML webov strnky Nzev strnky Nadpis Njak text v odstavci

Typ dokumentu - verze pouitho jazyka HTMLZobraz se v zhlav okna prohleeKdovn nrodnho jazyka (etiny)Tlo strnky - vlastn obsah, kter se zobraz v hlavnm okn (ploe) prohlee

Struktura XHTML webov strnky

Nzev strnky Zde bude obsah webov strnky

1. Zvolit menu Soubor2. Poloka Nov3. Zloka Podle ablony4. Rozbalit HTML/XHTML5. Vybrat typ dokumentu

Pspad vytvo nov webov dokument s ji vloenou strukturou webov strnky dle zvolenho standardu.

Uiten tip:Vtina editor webovch strnek vytvo v novm souboru zkladn strukturu sama !(nap. Pspad, Dreamweaver, atd.)

Deklarace Informace pro prohle o verzi HTML/XHTML a pouitm DTD.DTD (Document Type Definition, esky Definice typu dokumentu) Pedpis (norma), kter prohlei k, jak HTML znaky a jejich atributy jsou povoleny v dokumentu webov strnky pouvat a jak s nimi m zachzet.Deklarace m komplikovan zpis, editor webovch strnek (nap. Pspad, Dreamweaver, apod.) ji vytvo automaticky pi zakldn novho souboru dle typu webov strnky (HTML, XHTML)

Deklarace Typy deklarac HTML (4.01) / XHTML (1.0) dokumentuTRANSITIONAL povoluje pouit nestandardnch znaek (pedevm pro formtovn vzhledu obsahu).STRICT povoluje pouze znaky pro tvorbu struktury webu (nadpisy, odstavce, seznamy, obrzky, formule, tabulka, apod.). Formtovn a pozicovn obsahu se provd pouze pomoc kaskdovch styl. (dsledn oddlen obsahu od formy webov strnky) Pozn.: Typ dokumentu XHTML 1.1 se podob XHTML 1.0 Strict

DOCTYPE dokumentu HTML 4.01HTML 4.01 TRANSITIONAL

HTML 4.01 STRICT

DOCTYPE dokumentu XHTML 1.0 a 1.1XHTML 1.0 TRANSITIONAL

XHTML 1.0 STRICT

XHTML 1.1

Ohranien webovho dokumentuCel HTML / XHTML dokument webov strnky (krom DOCTYPE) je vymezen provou znakou HTML dokumenty maj vtinou znaku bez dalch atribut: Obsah webovho dokumentu XHTML dokumenty znaku s atributy xmlns, xml:lang, lang: Obsah webovho dokumentu

Hlavika strnky Vymezuje se provou znakou Hlavika by mla obsahovat obsahovat: - nzev dokumentu (title) - povinn - meta znaky (minimln kdovn estiny - povinn) - programov kd skriptovacho jazyka javascript - definice kaskdovch styl (CSS) - odkaz na soubor ikony webov strnky (favicon.ico)

Poznmka:Kaskdov styly a programov kd javascriptu jsou astji definovny v externm souboru, v hlavice je vytvoen pouze odkaz na tento soubor.

Hlavika strnky Nzev webov strnkyNzev webov strnkyzobrazuje titulek webov strnky v zhlav okna prohleedefinuje nzev zloky, pokud je strnka uloena do oblbenchzobrazuje titulek strnky ve vyhledvach

Hlavika strnky META znaky Jedn se o informace, kter definuj nap. kdovn znakov sady (nezbytn pro webov prohle), klov slova a popis dokumentu pro vyhledvae, autora, atd. Vhodn vdy v hlavice uvst !

Hlavika strnky Nastaven kdovn etiny pro webov dokument: Standardn kdovn operanho systmu Windows:

Standardn kdovn operanho systmu Unix, Linux a v emailech:

Vhodn pro kdovn mezinrodnch dokument:

Hlavika strnky Pipojen externch souborSoubor s definic kaskdovch styl Soubor pedstavujc ikonku webov strnky Soubor s definic skript jazyka JAVASCRIPT

Ukzka konkrtn hlaviky strnky Rustikln nbytek

ZNAKY XHTML JAZYKA

HTML znaka (tag)HTML znaky neboli TAGy vymezuj (oznauj) urit obsah webov strnky a uruj, co pedstavuje (nadpis, odstavec, odkaz, seznam, apod.), jak objekt se m na dan msto vloit (obrzek, formul, tabulka, horizontln ra, apod.), poppad kter objekty budou upravovny pomoc kaskdovch styl.Obsah a HTML znaky vkldme mezi provou znaku: Tato znaka vymezuje tzv. tlo webov strnky.

HTML znaka (tag)Jmna HTML znaek jsou uzavena v ostrch zvorkch < >Mezi nimi se nachz nzev znaky (malmi psmeny).Existuj dva typy HTML znaek: 1. prov znaky 2. neprov znaky

HTML znaka (tag)Prov znakyPklad: odstavce, odkazy, nadpisy, bloky, formul, seznamy, atd.objekty nebo jejich sti, kter m znaka ovlivnit

Poten znaka Koncov znakaNeprov znakyPklad: vloen obrzku, horizontln ry, oddkovn, atd.

Znaka v HTML dokumentuZnaka v XHTML dokumentu

HTML znaka (tag)Atributy HTML znakyAtributy piazuj znace vlastnosti. P se do poten znaky.Pklad: njak odkaz njak odkaz Atributy maj sv hodnoty, kter se zapisuj do uvozovek za rovntko.Znaka me obsahovat vce atribut oddlujeme je mezerou.Atributy zapisujeme v libovolnm poad.

Uiten tip:Nzev znaky (tagu) i atribut peme VDY MALMI PSMENY!

HTML elementHTML element = HTML znaka + atributy s hodnotou

Pravidla vnoovn HTML elementHTML element me obsahovat dal vnoen elementy. dn se vak nesm kit ! Chybn zpis vnoench HTML element HTML elementy se nesm kit! Sprvn zpis vnoench HTML element HTML elementy se nesm kit!

HTML entityJedn se o speciln kdy, kter nahrazuj nkter znaky:maj v jazyce HTML speciln vznam (nap. znaky , , ),nenachzejc se bn na CZ / ENG klvesnici,typografick entity (nap. nedliteln mezera, vpustka, atd.).Entita zan znakem & a kon stednkem ; Mezi nimi je mnoina znak (psmena nebo #sla), reprezentujc dan znak, nap.:nedliteln mezera eck psmeno velk fvpustka ti teky

HTML entityEditor webovch strnek Pspad nabz vkldn HTML entit pomoc nstroje ASCII tabulka. Nstroj lze zobrazit: Menu Nstroje, poloka ASCII tabulka (ALT + A)Nstroj nabz dv zloky: ASCII a SYMBOL.Vet entit naleznete napklad zde: http://www.jakpsatweb.cz/html/entity-vsechny.html http://www.webtvorba.cz/xhtml/html-entity.html

HTML elementy pro textov obsahHTML elementy jednoznan specifikujc textov obsah, kter obklopuj (tzv. smanticky sprvn kd).Umouj technickm prostedkm a jejich programm porozumt textu alespo na zkladn rovni a sprvn jej interpretovat.Pklad: (X)HTML jazyk obsahuje znaky pro uren nadpis, odstavce, klovch slov (dleit text), slovan a neslovan seznamy, zkratky, indexy, citace, atd.Poznmka: Nkter znaky jsou dnes ji prakticky nepouvan, poppad jsou zakzan neuvdm je zde!!!

Textov element Nadpisyest rovn nadpis:1. rove 2. rove 3. rove 4. rove 5. rove 6. rove Vechny nadpisy jsou implicitn zarovnny vlevo.

Textov element OdstavceBlok textu bude chpn jako 1. odstavecBlok textu bude chpn jako 2. odstavec

Textov element OddkovnZnaka se vkld v mst zalomen textu na dal dek: Znaka HTML jazyka: Znaka XHTML jazyka: Tento text bude na 1. dkua tento na 2. dku

Textov element Tun a dleit textZnaka vymezuje text, kter m bt tun, Znaka vymezuje dleit i siln zvraznn text.Kad nvtvnk m vstup zdarma!Vektor intenzity el. pole E uruje smr psobc el. sly.vstup zdarma je dleit sdlen.E je vektor, zname jej tun.

Textov element Kurzva a dleit textZnaka vymezuje text psan kurzvou, Znaka vymezuje dleit text, men draz ne Kad nvtvnk m vstup zdarma!Elektrick napt m jednotku volt.

Textov element Horn a doln indexVymezen text se stv hornm, resp. dolnm indexem:Horn index: Doln index: Teplota T1 = 100 oC

Textov element CitaceJednodkov citovan text: Blokov citovan text (odstavce): Znaka pidv uvozovky ohraniujc citovan text.Znaka zpsob odsazen citace od okolnho textu.Znaky mohou obsahovat nepovinn atribut cite, jeho hodnotou je URL adresa, ze kter je citovan text. V praxi nen pli vyuiteln, nebo URL nen pmo vidt v okn prohlee (pouze zdrojov kd). Citovan blok textu. Me se jednat o jeden i vce odstavc.

Textov element CitaceAlbert Einstein ekl:Jak vznik vynlez? To vichni vd, e je nco nemon, a pak se objev njak blzen, kter nev, e je to nemon, a udl vynlez.Pan uitelka ekla: Dti, vte co je to vynlez?

Textov element ZkratkyZnaka vymezujc zkratku. Vysvtlen je eeno pomoc atributu title: SSD se stle vce pouvaj u penosnch pota.Zkratka se vdy vype s tekovanm podtrenm (vyjma Internet Exploreru !).Po najet kurzorem myi se objev vysvtlujc text v bublin.

Textov element Zkratkov slovaZnaka vymezujc akronym (zkratkov slovo). Speciln zkratka, kter se nehlskuje po psmenech, ale te se jako jedno slovo, d se i skloovat.Pklad: NATO, BESIP, URNA, MODEM, MOSFET, atd.

Znaky a vytvej vizuln stejn vsledek.Vznam maj pedevm pro nevidom, hlasov vstup teky tato slova pete rozdln!!!

Textov element Programov kd

program TypeText;var t: text; s: string; begin while not eof(t) do begin readln(t,s); writeln(s); end;end.

Obsah vype neproporcionlnm psmem Zachov bl mezery (nap. odsazen kdu)

Hypertextov odkazKliknutm na textov i obrzkov odkaz dojde k pesmrovn. objekt odkazu Mezi provou znakou me bt text nebo obrzek.Znaka hypertextovho odkazu m dva povinn atributy:href hodnotou je adresa (absolutn nebo relativn) clovho dokumentu.title hodnotou je textov popisek odkazu.

Hypertextov odkazToto je odkazDalm (nepovinnm) atributem je target. Je-li hodnota _blank, oteve se clov dokument v novm okn. Atribut nen povolen u dokument typu XHTML 1.0 Strict a XHTML 1.1

Hypertextov odkazABSOLUTN ADRESAodkaz na firmuOdkaz na dokument (nap. webovou strnku), kter se nachz na jinm serveru.Odkaz na jinou strnku mus vdy obsahovat st http://Hodnotou atributu href je adresa clovho dokumentu (v tomto ppad http://www.firma.cz). Zobrazovan a klikateln text bude odkaz na firmu

Hypertextov odkazRELATIVN ADRESAKontakty na firmuCenk sluebOdkaz na dokument v rmci jedn webov prezentace (stejn server).Tvorba relativnch odkaz (href):slozka/podstranka.htm (odkazuje na dokument ve sloce o rove ne) ../podstranka.htm(odkazuje na dokument ve sloce o rove ve)

zdroj: http://polopate.jakpsatweb.cz

Hypertextov odkazZLOKA odkaz na konkrtn msto v dokumentuVhodn nap. u rozshlch dokument (mnoho textu a obrzk)Pro funkn zloku je poteba: 1. Definice samotn zloky (pojmenovn objektu) 2. Tvorba odkazu, kter odkazuje na zloku

Hypertextov odkazZLOKA odkaz na konkrtn msto v dokumentu1. Pojmenovn a vloen zlokyDo uritho msta v dokumentu (cl odkazu) vlome nsledujc kd: Lze tak pout atribut id pslunho (X)HTML elementu, napklad: text odstavce Nadpis Jedn se o modern a doporuen zpsob tvorby zloky.

Hypertextov odkazZLOKA odkaz na konkrtn msto v dokumentu2. Tvorba odkazu na zlokuHodnota atributu href zan mkou neboli hash-markem # (prav ALT + X), na n pmo (bez mezery) navazuje jmno zloky. Zloka je ve stejn webov strnce: Odkaz na zloku Zloka je umstna v jin webov strnce: Odkaz na zloku

Uiten tip:Nzev zloky by ml obsahovat pouze psmena bez diakritiky, sla, pomlku nebo podtrtko.

Seznamy1. Neslovan (neuspodan) seznam mta hemnek ern bez

Atribut type (nepovinn) uruje typ odrky. Mon hodnoty jsou: circle, disc, square.Seznamy s obrzkovou odrkou lze vytvoit pomoc kaskdovch styl a vlastnosti list-style-image.Unordered List vymezen poloek neslovanho seznamuList Items Poloky neslovanho seznamu

Seznamy2. slovan seznam mta hemnek ern bez

Atribut type (nepovinn) uruje typ odrky. Mon hodnoty jsou: 1 (slice), A, a (psmena), i ,I (msk slice).seln hodnota atributu start uruje poten hodnotu (zvis na typu odrky!!!)Ordered List vymezen poloek slovanho seznamuList Items Poloky slovanho seznamu

Seznamy3. Seznam definic CD Compact Disc DVD Digital Video Disc

Pouv se v ppad, kdy potebujeme vypsat nap. njak termny a k nim jejich definice nebo popisy.Definition List ohranien seznamuDefinition Term ohranien pojmuDefinition definice pojmu

SeznamyKombinace seznam

Ovoce jablko hruka vestka Zelenina

Uiten tip:Seznam zajiuje nvtvnkovi webu dobrou orientaci v textu a itelnost.

Tabulka Jmno Pjmen Zkratka Pavel Chmiel CHM dek tabulkyHlavikov buka tabulkyBuka tabulkyTabulka

TabulkaNadpis tabulkyPro nadpis tabulky se pouv prov znaka: Nadpis tabulkyZnaka se vkld bezprostedn za znaku Jmna uitel

Zbvajc struktura tabulky

TabulkaSluovn bunk tabulky

Student Pohlav mu ena

colspan Slou nkolik bunk v jednom dkurowspan Slou nkolik bunk v jednom sloupci

Uiten tip:Tabulky pouvme pouze pro prezentaci tabulkovch daj, nikoliv pro pozicovn prvk a obsahu webov strnky !

Vkldn obrzkuObrzek je uloen jako samostatn soubor na webovm serveru.Ve webov prezentaci se zobraz vloenm neprov znaky: Jazyk HTML: Jazyk XHTML: Alternativn popisek (alt) je povinn atribut, kter se zobraz pi nenaten obrzku. Nezbytn je pro nevidom (hlasov vstup teky).Preferovan formty obrzk pro web jsou JPG, GIF, PNG.Vhodn je zadat ku (width) a vku (height) obrzku v pixelech:

Vkldn obrzkuPod tmto odstavcem bude obrzek:

Msto nenatenho obrzku se zobraz alternativn text.

Vkldn flash videaValidn kd jazyka XHTML pro vloen videa (formt swf, flv):

Horizontln raZnaka se vkld v mst vloen horizontln ry: Znaka HTML jazyka: Znaka XHTML jazyka: Pod tmto odstavcem bude vloena horizontln ra:

FormuleUmouj uivateli vyplovat na strnce daje, kter se nsledn zpracuj pomoc skriptu (nejastji PHP, ASP nebo javascript). Vsledkem me bt: modifikace obsahu webov strnky dle zadanch hodnot, uloen zadanch hodnot do databze, odesln mailu uivateli se zadanmi hodnotami, autorizovan pstup do zabezpeen sti webov prezentace, atd.

Formule

Vloen formule

... HTML znaky pro vloen formulovch prvk Lze zde umstit tak normln (formtovan) text

ATRIBUTVZNAMHODNOTAactionskript, kter bude zpracovvat dataodkaz na obslun skript (soubor)methodzpsob pedvn datPOST, GETenctypeZpsob zakdovn data) Neuvd se (textov formul) b) application/x-www-form-urlencoded c) multipart/form-data (soubory)

Formulov prvkyUniverzln formulov prvek - vstupn pole.

Dal atributy formulovho prvku budou pstupn dle atributu TYPE !

ATRIBUTVZNAMHODNOTAtypedruh vstupnho poletext, password, submit, reset, checkbox, radio, file, hiddennamejmno prvkulibovoln, uniktn, doporuen bez diakritikyvaluepoten hodnotalibovoln text, diakritika povolenadisabledprvek je zaedl, nelze mnit hodnotybez hodnoty

Textov jednodkov pole

ATRIBUTVZNAMHODNOTAtypejednodkov textov poletextsizeka pole ve znacchcel slo (nap. 30)maxlengthnejvy mon poet zadanch znakcel slo (nap. 30)

Pole pro zadn heslaAtributy a hodnoty jsou stejn jako u textovho pole.Pi zadvn hesla se objevuj teky nebo hvzdiky (dle prohlee).

Bez zadanho hesla (shodn s textovm polem)Vloen hesla (znaky nahrazeny tekami)

Tlatko pro odesln dat z formule

Data z formule jsou odeslna obslunmu skriptu: Tlatko nelze stisknout = data nelze odeslat:

Zakrtvac polko

Zakrtvac polko bez volby. V ppad volby (zakrtnut) se odesl hodnota ano.

Zakrtvac polko s pednastavenou volbou. Pokud uivatel volbuzru, z formule se neodesl hodnota ano.

Pole pepnaChci zaslat novinky tdn msnnikdy Soubor pepnacch pol, kdy zatreno me bt vdy pouze jedno. Z formule se odesl hodnota pole, kter je vybrno (checked).

Skryt (neviditeln) prvekNeviditeln formulov prvek pro odesln skrytch hodnot z formule.

Vtinou bv za hodnotu atributu value dosazena hodnota promnn.

Dal podoby prvku Tlatko pro vymazn (defaultn nastaven) hodnot formule.

Prvek pro odesln souboru na vzdlen server. Formul mus bt odesln metodou (method) POST a pouvat kdovn (enctype) multipart/form-data.

Obecn tlatko, bez obslunho skriptu nedl nic.

Vcedkov textov pole

Njak text

ATRIBUTVZNAMHODNOTArowspoet viditelnch dkcel slo (nap. 5)colsviditeln ka prvku ve znacchcel slo (nap. 30)

Rozbalovac menu

Zkladn kolaStedn kolaVysok kola

Skriptu se posl hodnota atributu value (zde nap. zs, ss, nebo vs).Atribut selected provede pedvbr poloky ze seznamu (nen povinn).

Seskupen formulovch prvk Pihlaovac formul Login: Heslo:

HTML elementy bez vznamuHTML elementy, kter samy o sob nenesou dnou informaci.Pouvaj se ve spojitosti s kaskdovmi styly pro formtovn i pozicovn obsahu a struktury webov strnky1. Blokov prov element DIV obsah DIVudochz k zalomen ped i za elementem DIV.ohraniuje libovoln dkov i blokov obsah (text, obrzky, atd.).Pouv se hlavn k vytvoen kostry vzhledu webov strnky.

HTML elementy bez vznamu2. dkov prov element SPAN obsah SPANunedochz k zalomen ped ani za elementem SPAN.ohraniuje pouze dkov obsah (dkov HTML elementy).Pouv se k formtovn textovho obsahu pomoc kaskdovch styl.Elementy DIV i SPAN maj obvykle definovny atributy id nebo class, jejich hodnotou je nzev identifiktoru (id) nebo tdy (class) kaskdovho stylu. Praktick ukzky pouit budou prezentovny v modulu TWS_3b.

Uiten tip:HTML elementy SPAN i DIV nejsou smantick (nenesou dnou informaci)Nestavme web pouze na tchto elementech !!!

Konec modulu TWS_03a

Dkuji Vm za pozornost.

********************************