HTML HyperText Markup Language

3. část

Ústav automatizace inženýrských úloh a informatiky

FAST VUT v Brně

0U2 - Základy informatiky a výpočetní techniky 2

Obrázky — element IMG

<IMG<IMG src = src = ““URL obrázkuURL obrázku”” další nepovinné další nepovinné atributyatributy >> Vlastnosti obrázků:

src URL obrázku, většinou relativní alt popis obrázku; není-li, použije se název souboru align způsob zarovnání

top left middle right bottom

vzhledem k účaří

obtékání obrázku

width, height šířka a výška obrázku border šířka rámečku kolem obrázku

(implicitně 0, u odkazů 1) hspace mezera vedle obrázku vspace mezera nad a pod obrázkem

Použití obrázku<P><P><IMG src="obr2.jpg" ><IMG src="obr2.jpg" >Brno je největším moravským městem. Nachází se nedaleko soutoky Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po královské město v osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno pření průmyslovou aglomerací. na Petrově. Od 19. století je Brno pření průmyslovou aglomerací. Železniční tartě město spojují s Prahou, Olomoucí, Vídní a dalšími Železniční tartě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.městy.</P></P>

Použití obrázku<P><P><IMG src="obr2.jpg" <IMG src="obr2.jpg" width= "100" align= "width= "100" align= "leftleft" " hspace= hspace= ""2020"" >>Brno je největším moravským městem. Nachází se nedaleko Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno pření biskupská katedrála na Petrově. Od 19. století je Brno pření průmyslovou aglomerací. Železniční tartě město spojují s Prahou, průmyslovou aglomerací. Železniční tartě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.Olomoucí, Vídní a dalšími městy.</P></P>

Obrázek jako odkaz<P><P><A href=<A href=""obr.jpgobr.jpg"">><IMG src="obr2.jpg" width= "100" align="<IMG src="obr2.jpg" width= "100" align="leftleft"" hspace= hspace= ""2020"" >></A></A>

Brno je největším moravským městem. Nachází se nedaleko Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno pření biskupská katedrála na Petrově. Od 19. století je Brno pření průmyslovou aglomerací. Železniční tartě město spojují s Prahou, průmyslovou aglomerací. Železniční tartě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.Olomoucí, Vídní a dalšími městy.</P></P>

Obrázek jako odkaz

<P><P><A href=<A href=""obr.jpgobr.jpg"">><IMG src="obr2.jpg" <IMG src="obr2.jpg" border= border= ""00"" width= "100" width= "100" align="align="leftleft"" hspace= hspace=""2020">"></A></A>

Brno je největším moravským městem. Nachází se nedaleko Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno pření biskupská katedrála na Petrově. Od 19. století je Brno pření průmyslovou aglomerací. Železniční tartě město spojují s Prahou, průmyslovou aglomerací. Železniční tartě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.Olomoucí, Vídní a dalšími městy.</P></P>

Tabulky - základní elementy pro tvorbu tabulek

<TABLE> <TR> <TD>obsah buňky </TD> <TD>obsah buňky </TD> </TR> <TR> <TD>obsah buňky </TD> <TD>obsah buňky </TD> </TR> </TABLE>

VymezeVymezení ní

tabulkytabulkyŘ

ád

ky ta

bu

lky

Řád

ky ta

bu

lky

<TABLE border=""1"">

<TABLE border=""1"">

<TABLE >

TABLE - atributy - příklady<TABLE cols= ""2"" border= ""2"" width= ""80%"" bgColor=""lightblue"" align= "center" cellpadding= "5" >

<TABLE cols= ""2"" border= ""2"" width= ""80%"" bgColor=""lightblue"" align=""center"" cellpadding= ""5"" rules= "rows" >

<TABLE cols= ""2"" border=""2"" width=""80%"" bgColor=""lightblue"" align=""center"" cellpadding=""5"" rules=""rows"" cellspacing="0" >

<TABLE cols= "2" border="2" width= "80%" bgColor="lightblue">

TR - atributy

align horizontální zarovnání pro celý řádek left center right justify

valign vertikální zarovnání pro celý řádek top middle bottom

height výška řádku v bodech

align horizontální zarovnání pro buňku

valign vertikální zarovnání pro buňku width šířka buňky (absolutní nebo

relativní) height výška buňky (absolutní) rowspan počet sloučených řádků colspan počet sloučených sloupců nowrap nezalamovat text v buňce bgcolor barva buňky

TD (TH) - atributy - příklady<TR ><TD>obsah buňky1</TD><TD>obsah buňky2</TD><TD>obsah buňky3</TD></TR><TR><TD>obsah buňky4</TD><TD>obsah buňky5</TD><TD>obsah buňky6</TD></TR>

<TR ><TD align= "center" width="40%" height="40" bgColor="gold" >obsah buňky1</TD><TD >obsah buňky2</TD><TD>obsah buňky3</TD></TR><TR><TD>obsah buňky4</TD><TD>obsah buňky5</TD><TD>obsah buňky6</TD></TR>

<TR ><TD align="center" width="40%" height="40" bgColor="gold">obsah buňky1</TD><TD nowrap>obsah buňky2</TD><TD >obsah buňky3</TD></TR>

TD (TH) - atributy - příklady

<TR ><TD align="center" width="40%" height="40" bgColor="gold">obsah buňky1</TD><TD nowrap>obsah buňky2</TD><TD rowspan="2" >obsah buňky3</TD></TR><TR><TD colspan="2" >obsah buňky4</TD></TR>

<TR ><TD align="center" width="40%" height="40" bgColor="gold">obsah buňky1</TD><TD nowrap>obsah buňky2</TD><TD rowspan="2">obsah buňky3</TD></TR><TR><TH colspan="2">obsah buňky4</TD></TR>

TR - atributy - příklady<TR height="50" align="center" valign="middle" >

<TR height="50" align="center" valign="bottom" bgColor="gold">

TABLE – obsah buňky - příklady Buňka může obsahovat jakékoliv elementy povolené v části BODY Velikost buňky se implicitně přizpůsobuje obsahu

<TABLE border="2" width="90%" bgColor="lightblue" align="center" ><TR><TD><P>V této buňce je odstavec textu</P> </TD><TD><IMG src="u47.jpg"></TD> </TR><TR><TD><A href="odkaz.htm">Odkaz jinam</A></TD><TD><UL><LI>1.položka</LI><LI>2.položka</LI></UL> </TD></TR>

<TABLE border="2" width="90%" bgColor="lightblue" align="center" ><TR><TD> <P>V této<BR> buňce je<BR> odstavec<BR> textu</P> </TD><TD><IMG src="u47.jpg"></TD></TR><TR><TD><A href="odkaz.htm">Odkaz jinam</A></TD><TD> <UL><LI>1.položka</LI><LI>2.položka</LI></UL> </TD></TR>

TABLE – obsah buňky - příklady<TABLE border="2" width="90%" bgColor="lightblue" align="center" ><TR><TD width="50%" ><P>V této buňce je odstavec textu</P> </TD> <TD align="center"><IMG src="u47.jpg"></TD> </TR><TR><TD height="100" ><A href="odkaz.htm">Odkaz jinam</A></TD> <TD valign="bottom"> <UL><LI>1.položka</LI><LI>2.položka</LI></UL> </TD></TR>

TABLE – užití tabulky pro rozvržení stránky Rozdělení stránky na oblasti – buňky tabulky

Použití vnořených tabulek<BODY><TABLE border="2" width="100%" bgColor="olive" cellspacing="0" cellpadding="0" height="100%" ><TR><TD height="60"><IMG src="u47.jpg" ></TD><TD align="center"><FONT size="5" color="white"> Úzkorozchodné dráhy v ČR</FONT></TD></TR><TR><TD width="120" valign="top"> </TD><TD valign="top" bgcolor="white"> </TD></TR><TR><TD colspan="2" height="30" align="center"><FONT color="white">Poslední modifikace: 15.3.2000 </FONT></TD></TR></TABLE>

TABLE – užití tabulky pro rozvržení stránky

<TABLE border="1" width="100%" bgColor="olive" cellspacing="0" cellpadding="0" height="100%" rules="rows"> <TR><TD height="60"><IMG src="u47.jpg" ></TD><TD align="center"><FONT size="5" color="white"> Úzkorozchodné dráhy v ČR </FONT></TD></TR><TR><TD width="120" valign="top"> <TABLE><TR><TD>&nbsp;</TD></TR> <TR><TD bgColor="gold">Úvod</TD></TR> <TR><TD bgColor="gold"><A href="pr4a.html">Jindřichův Hradec - Nová Bystřice

</A></TD></TR> <TR><TD bgColor="gold"><A href="pr4b.html">Jindřichův Hradec - Obrataň

</A></TD></TR> <TR><TD bgColor="gold"><A href="pr4c.html">Třemešná - Osoblaha</A></TD></TR> </TABLE></TD> <TD valign="top" bgcolor="white"> <TABLE cellpadding="10"> <TR><TD bgcolor="white" valign="top"> <H2>OBSAH úvodní stránky</H2></TD></TR> </TABLE> </TD></TR><TR><TD colspan="2" height="30" align="center"><FONT color="white">Poslední modifikace: 15.3.2000 </FONT></TD></TR></TABLE>

Formuláře Formuláře slouží k získání informací od uživatele nebo k předání zpracovaných informací uživateli.

Jsou buďto odesílány ke zpracování na server nebo zpracovávány skripty prováděnými přímo prohlížečem na straně klienta. Struktura formuláře:

Prvky formuláře:

<INPUT > atributy: type="text/password/checkbox/radio/

/submit/reset/button/image/file"name="jméno"

value="hodnota prvku" align="top/middle/bottom/left/right"

size= "počet znaků pole" checked nastavuje implicitní hodnotu maxlenght nastavuje maximální počet

znakůreadonly zobrazení pole bez možnosti

modifikace

<FORM> prvky formuláře</FORM>

atributy prvku FORM: name="jméno"action="url obslužného

programu"method="GET/POST"

Příklad stránky s formulářem<BODY background="paper-04.jpg"><H2>Objednávka knih </H2><TABLE bgColor="#DDDDDD" width="90%" height="80%"><TR><TD valign="top"><FORM action="form.asp" method="POST" name="F">Vaše zákaznické číslo:<INPUT type="text" name="zc" size="9"></FORM></TD></TR></TABLE></BODY>

<FORM action="form.asp" method="POST" name="F">Vaše zákaznické číslo:<INPUT type="text" name="zc" size="9">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Studující:&nbsp;&nbsp;Ano<INPUT type="radio" name="R"> Ne <INPUT type="radio" name="R" checked><BR><HR><INPUT type="checkbox" name="C" value="250">Plaček M:Hrady, zámky a tvrze na Moravě a ve Slezsku - 250,-<BR><INPUT type="checkbox" name="C" value="450">Durdík T:Ilustrovaná encyklopedie českých hradů - 450,-<BR><INPUT type="checkbox" name="C" value="450">Vlček P:Ilustrovaná encyklopedie českých zámků - 450,-<BR></FORM>

Příklad stránky s formulářem<HTML><BODY background="paper-04.jpg"><H2>Objednávka knih </H2><TABLE bgColor="#DDDDDD" width="90%" height="80%"><TR><TD valign="top"><FORM action="form.asp" method="POST" name="F">Vaše zákaznické číslo:<INPUT type="text" name="zc" size="9">

<INPUT type="checkbox" name="C" value="250">Plaček M:Hrady, zámky a tvrze na Moravě a ve Slezsku - 250,-<BR>

<INPUT type="checkbox" name="C" value="450">Durdík T:Ilustrovaná encyklopedie českých hradù - 450,-<BR>

<INPUT type="checkbox" name="C" value="450">Vlček P:Ilustrovaná encyklopedie českých zámkù - 450,-<BR>

<HR>

<INPUT type="button" value="Celkem" onClick="souc()">

<INPUT type="text" name="CE"

size="6" value="0"> ,- Kč

</FORM></TD></TR></TABLE></BODY></HTML>

Formuláře

<SELECT> atributy: name, size, multiple<OPTION> položka</OPTION>

atributy: selected, value</SELECT>

<TEXTAREA> text </TEXTAREA>

atributy: name, rows, cols, readonly

Příklad stránky s formulářem<HR>

Způsob platby:

<SELECT size="3" name="P">

<OPTION selected value="dobirka">Dobírka</OPTION>

<OPTION value="visa">VISA karta</OPTION>

<OPTION value="paus">Paušál</OPTION>

</SELECT>

</FORM>

<HR>

Způsob platby:

<SELECT size="1" name="P">

<OPTION selected value="dobirka">Dobírka</OPTION>

<OPTION value="visa">VISA karta</OPTION>

<OPTION value="paus">Paušál</OPTION>

</SELECT>

</FORM>

Příklad stránky s formulářemZpůsob platby:<SELECT size="1" name="P"><OPTION selected value="dobirka">Dobírka</OPTION><OPTION value="visa">VISA karta</OPTION><OPTION value="paus">Paušál</OPTION></SELECT><BR><BR><INPUT type="reset" value="Vymazání formuláře">&nbsp;&nbsp;<INPUT type="submit" value="Odesání formuláře"></FORM>

<INPUT type="submit" value="Odesání formuláře"><BR>Zde můžete napsat vzkaz:<TEXTAREA name="T" rows="3" cols="50" ></TEXTAREA></FORM>