Tvorba WWW stránek (třetí hodina) Mgr. Petr Jakubec Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu 12 Třetí hodina 1 / 14
1 Základní struktura WWW stránek Standard jazyka HTML v4.01 Základní rozvržení HTML Základní rozvržení HTML Definice struktury HTML Hlavička HTML dokumentu Hlavička HTML dokumentu Tělo HTML dokumentu WWW kód 1. část WWW kód 2. část WWW kód 3. část Finální vzhled Třetí hodina 2 / 14
Standard jazyka HTML 1 pr ı sny (strict) pouz ı va jen prvky nove ho standardu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 2 pr echodovy (transitional) lze pouz ı vat i tzv. zastarale prvky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/tr/1999/rec-html401-19991224/loose.dtd> 3 s ra my (frameset) stejny jako pr echodovy rez im a navı c lze pouz ı vat prvky pro tvorbu ra mu (napr. frame, frameset) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/1999/rec-html401-19991224/frameset.d Vy voj: HTML + XML = XHTML v. 1.1 3 / 14
Za kladnı rozvrz enı HTML Strukturu a forma tova nı dokumentu definujı znac ky (tagy) Znac ky jsou pa rove <html> a </html> a nepa rove <br> Znac ky se mohou vnor ovat, ale nesmı se kr ı z it Znac ky majı parametry <html lang="cz"> Lze vkla dat komenta r e <!-- komenta r --> Ne ktere znaky lze vkla dat pouze nepr ı mo (napr. < je <) 4 / 14
Za kladnı rozvrz enı HTML Znac ka <html>... </html> Vy znam Definuje poc a tek a konec HTML dokumentu. <head>... </head> Vymezuje tzv. hlavic ku HTML dokumentu. Jejı obsah se nezobrazuje. <body>... </body> Vymezuje vlastnı obsah (te lo) HTML dokumentu a definuje ne ktera za kladnı pravidla zobrazenı dokumentu v prohlı z ec i. Atributy dir=sme r lang=jazyk version=r ete zec dir=sme r lang=jazyk profile=url background=url bgproperties=hodnota bgcolor=barva text=barva link=barva alink=barva vlink=barva leftmargin=hodnota topmargin=hodnota 5 / 14
Definice struktury HTML 1 2 3 4 5 6 7 8 9 10 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN " " http :// www. w3. org / TR /1999/ REC - html401-19991224/ loose. dtd " > < html > < head >... </ head > < body >... </ body > </ html > 6 / 14
Hlavic ka HTML dokumentu Znac ka <meta> Vy znam Za kladnı informace o obsahu HTML dokumentu pro vyhleda vacı ho robota. Je souc a stı hlavic ky HTML dokumentu. <base> Definuje za kladnı adresu pro vs echny relativnı adresy v ra mci dokumentu. <title>...</title> Na zev HTML dokumentu, ktery se zobrazuje v za hlavı okna prohlı z ec e. Je souc a stı hlavic ky HTML dokumentu Atributy dir=sme r lang=jazyk charset=jme no name=r ete zec content=r ete zec http-equiv=r ete zec scheme=sche ma href=url target=jme no 7 / 14
Hlavic ka HTML dokumentu 1 2 3 4 5 6 7 8 9 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN " " http :// www. w3. org / TR /1999/ REC - html401-19991224/ loose. dtd " > < html > < head > < title > Koloidnı str ı bro - metody jeho pr ı pravy </ title > < meta name =" description " content =" Stra nky o str ı bru " > < meta name =" keywords " content =" koloid, str ı bro, pr ı prava " > < meta name =" author " content =" Libor Kvı tek " > </ head > 10 11 12 13 14 < body >... </ body > </ html > 8 / 14
Te lo HTML dokumentu Znac ka <b>... </b> <i>... </i> <u>... </u> <tt>... </tt> <small>... </small> <big>... </big> <sub>... </sub> <sup>... </sup> <font>... </font> Vy znam Tuc ne pı smo. Kurzı va. Podtrz ene Neproporciona lnı pı smo. Pı smo o bod mens ı. Pı smo o bod ve ts ı. Dolnı index. Hornı index. Definuje zme ny vlastnostı pı sma oproti standardnı mu nastavenı pro pr ı slus nou c a st HTML dokumentu. <div>... </div> Me nı zarovna nı a barvu textu uzavr ene ho mezi znac kami. <pre>... </pre> Prohlı z ec ponecha va forma tova nı z pu vodnı ho dokumentu. Atributy size=hodnota color=hodnota name=r ete zec face=r ete zec align color textu 9 / 14
WWW ko d 1. c a st 1 2 3 4 5 6 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN " " http :// www. w3. org / TR /1999/ REC - html401-19991224/ loose. dtd " > < html > < head > < title > Metody pr ı pravy koloidnı ho str ı bra </ title > </ head > 7 8 9 < body bgcolor ="# FFCC33 " > <h1 > Metody pr ı pravy koloidnı ho str ı bra </ h1 > 10 11 12 13 Koloidnı str ı bro lze pr ipravovat dve ma za kladnı mi zpu soby -<b > dispergac ne </ b > ( <i > zmens ova nı m </ i > velky ch c a stic str ı bra, nebo <b > kondenzac ne </ b > ( <i > vyluc ova nı m </ i > z homogennı ho rozto 10 / 14
WWW ko d 2. c a st 14 <h2 > Dispergac nı metody </ h2 > 15 16 17 18 19 20 21 22 < div align =" justify " > Dispergac nı metody nejsou pr ı lis pouz ı va ny pro pr ı pravu koloidu kovu obecne. K dispozici je jen ma lo vhodny ch metod, takz e na tomto mı ste budou zmı ne ny jen dve metody, ktere jsou v praxi vyuz ı va ny c aste ji, z nichz laserova ablace ovs em patr ı v souc asnosti mezi intenzivne studovane metody pr ı pravy koloidnı ho str ı bra : </ div > 23 24 25 26 27 28 < ul type =" square " > <li > rozpras ova nı v elektricke m oblouku, <li > pu sobenı m vy s o c e f o k u s o v a n e h o za r enı laseru ( laserova ablace ). </ ul > 11 / 14
WWW ko d 3. c a st 29 <h2 > Kondenzac nı metody </ h2 > 30 31 32 33 34 35 36 37 38 39 Kondenzac nı metody jsou podstatne vhodne js ı pro pr ı pravu koloidu kovu a proto je k dispozici s iroka s ka la metod : < ol type ="1" > <li > chemicka redukce roztoku str ı brne soli, <li > fotoly za roztoku str ı brne soli, <li > radioly za roztoku str ı brne soli, < li > sonifikace roztoku str ı brne soli, <li > elektroly za roztoku str ı brne soli. </ ol > 40 41 42 43 44 45 46 47 < hr color =" black " size ="2 px " noshade > <p > <a href =" http :// validator. w3. org / check? uri = referer " > < img src =" http :// www. w3. org / Icons / valid - html401 " alt =" Valid HT </p > </ body > </ html > 12 / 14
Internet Explorer 8.0 Třetí hodina 13 / 14
Safari 5.1.2 Třetí hodina 14 / 14