Tvorba WWW stránek (čtvrtá hodina) Mgr. Petr Jakubec Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu 12 Čtvrtá hodina 1 / 12
1 Tvorba statických WWW stránek za využití prostředků jazyka HTML Formátovací tagy Formátovací tagy Formátovací tagy Obrázky v HTML Tabulky v HTML <table> a jeho parametry Tag <tr> Tagy <td> a <th> Hypertextové odkazy Bonus Čtvrtá hodina 2 / 12
Forma tovacı tagy Znac ka <b>... </b> <i>... </i> <u>... </u> <tt>... </tt> <small>... </small> <big>... </big> <sub>... </sub> <sup>... </sup> <font>... </font> <basefont>... </basefont> <div>... </div> 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. zme na vlastnostı pı sma textu v cele m dokumentu Me nı zarovna nı a barvu textu uzavr ene ho mezi znac kami. Atributy size=hodnota color=hodnota name=r ete zec size=hodnota align color <pre>... </pre> Prohlı z ec ponecha va forma tova nı z pu vodnı ho dokumentu. textu 3 / 12
Forma tovacı tagy Znac ka <p>... </p> <h>... </h> <br> <hr> Vy znam Forma lnı a fyzicke rozde lenı textu na odstavce. Forma lnı a fyzicke rozde lenı textu na nadpisy. Zalomenı r a dku graficky odde lovac <center>... </center> Centrova nı textu Atributy align size color noshade width align 4 / 12
Forma tovacı tagy Znac ka <cite>... </cite> <code>... </code> <var>... </var> <dfn>... </dfn> <blockquote>... </blockquote> <address>... </address> <em>... </em> <strong>... </strong> Vy znam oznac enı citovane c a sti textu syntaxe zdrojovy ch ko du syntaxe zdrojovy ch ko du vyznac enı pojmu pro rejstr ı k vyznac enı dlouhe citace oznac enı adresy kurziva tuc ny font Atributy 5 / 12
Obra zky v HTML obra zek umı ste ny pr ı mo v adresa r i obra zek umı ste ny v adresa r i gifs vc etne cele adresa r ove cesty <img src="http://www.neco.cz/gifs/obr3.gif"> obra zek je zada n s celou URL i adresa r ovou adresou parametry: <img src="obr1.gif"> <img src="../gifs/obr2.gif"> alt="popis" align="left right top middle bottom" (v px c i %) height="hodnota" (v px) (v px) hspace="hodnota" vspace="hodnota" (prostor nad a pod v px) width="hodnota" border="hodnota" 6 / 12
Tabulky v HTML 1 2 3 4 5 6 7 8 9 10 11 < table cols ="2" align =" center " bgcolor ="#66 FF33 " border ="1" > <tr > <td > Jme no </ td > < td > Bydlis te </ td > </ tr > <tr > <td > Nova k </ td > < td > Olomouc </ td > </ tr > <tr > <td > Meisner </ td > < td > Praha </ td > </ tr > </ table > 7 / 12
<table> a jeho parametry Parametr <caption> align valign cols cellspacing cellpadding bgcolor background border bordercolor width Vy znam nadpis tabulky zarovna nı tabulky vzhledem k s ı r ce stra nky zarovna nı textu v polı c ka ch tabulky poc et sloupcu tabulky nastavenı vzda lenosti mezi bun kami vzda lenost mezi okrajem bune k a textem barva pozadı cele tabulky obra zek na pozadı tabulky tlous t ka ra mec ku v pixelech barva ra mec ku s ı r ka tabulky v px nebo % Atributy align="left center right" align="left center right" valign="top bottom" cols="c ı slo" cellspacing="c ı slo" cellpadding="c ı slo" bgcolor="barva" background="url" border="c ı slo" bordercolor="barva" width="hodnota" 8 / 12
Tag <tr> Parametr align valign bgcolor background border bordercolor nowrap Vy znam zarovna nı tabulky vzhledem k s ı r ce stra nky zarovna nı textu v polı c ka ch tabulky barva pozadı r a dku obra zek na pozadı tabulky tlous t ka ra mec ku v pixelech barva ra mec ku jednotlivy ch bune k v r a dku nezalamova ni textu v tabulce Atributy align="left center right" valign="top bottom middle" bgcolor="barva" background="url" border="c ı slo" bordercolor="barva" 9 / 12
Tagy <td> a <th> <th> pro bun ku ve funkci za hlavı <td> pro norma lnı bun ku tabulky Parametr align valign nowrap bgcolor background border bordercolor width colspan rowspan Vy znam zarovna nı tabulky vzhledem k s ı r ce stra nky zarovna nı textu v polı c ka ch tabulky nezalamova ni textu v tabulce barva pozadı r a dku obra zek na pozadı tabulky tlous t ka ra mec ku v pixelech barva ra mec ku jednotlivy ch bune k v r a dku s ı r ka tabulky v px nebo % spojenı bune k lez ı cı ch vedle sebe spojenı bune k ve sloupcı ch Atributy align="left center right" valign="top bottom middle" bgcolor="barva" background="url" border="c ı slo" bordercolor="barva" width="hodnota" colspan="hodnota" rowspan="hodnota" 10 / 12
Hypertextove odkazy tag <a> anchor (kotva), tj. tag odkazujı cı na jiny soubor pr ı klady pouz itı : 1 <a href="http://www.seznam.cz">seznam, najdu tam co nezna m</a> 2 <a href="./bla/blabla/index.html">nejaka blbost</a> 3 <a name="r ete zec">...</a> 1 2 3 4 5 6 7 Odkaz na <a href ="# strana3 " > stranu c. 3 </a > ( probı ha ne kolik stran textu )... <a name ="# strana3 " > </a > ( text pokrac uje na tr etı strane ) 11 / 12
text zarovnaný na střed nadpis první úrovně barva pozadí: #FFCC00 hypertextový odkaz na wiki text formátovaný pomocí tabulky copyright + validace WWW obrázek zarovnaný na střed + kombinace hypertextu na wiki 12 / 12