1 / 22

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. HTML HyperText Markup Language 3 . část. obtékání obrázku. vzhledem k účaří. Obrázky — element IMG. <IMG src = “ URL obrázku ” další nepovinné atributy >.

truly
Download Presentation

HTML HyperText Markup Language 3 . část

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ústav automatizace inženýrských úloh a informatiky FAST VUT v Brně 0U2 - Základy informatiky a výpočetní techniky 2 HTML HyperText Markup Language 3. část

  2. obtékání obrázku vzhledem k účaří Obrázky — element IMG <IMGsrc = “URL obrázku” další nepovinné atributy> • Vlastnosti obrázků: • srcURL obrázku, většinou relativní • altpopis obrázku; není-li, použije se název souboru • alignzpůsob zarovnání • topleft • middle right • bottom • 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

  3. <P> <IMG src="obr2.jpg" > 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é 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 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 městy. </P> Použití obrázku

  4. <P> <IMG src="obr2.jpg" width= "100" align= "left" hspace= "20"> 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é 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 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 městy. </P> Použití obrázku

  5. <P> <A href="obr.jpg"><IMG src="obr2.jpg" width= "100" align="left" hspace= "20"></A> 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é 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 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 městy. </P> Obrázek jako odkaz

  6. Obrázek jako odkaz <P> <A href="obr.jpg"><IMG src="obr2.jpg" border= "0"width= "100" align="left" hspace="20"></A> 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é 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 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 městy. </P>

  7. Tabulky - základní elementy pro tvorbu tabulek <TABLE border="1"> • <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> Vymezení tabulky Řádky tabulky <TABLE border="1"> <TABLE >

  8. <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" 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"> TABLE - atributy - příklady

  9. TR - atributy • 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 • align horizontální zarovnání pro celý řádek • leftcenterrightjustify • valign vertikální zarovnání pro celý řádek • topmiddlebottom • height výška řádku v bodech

  10. <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> TD (TH) - atributy - příklady <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>

  11. 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> <TDrowspan="2">obsah buňky3</TD> </TR> <TR> <TDcolspan="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>

  12. TR - atributy - příklady <TR height="50" align="center" valign="middle"> <TR height="50" align="center" valign="bottom" bgColor="gold">

  13. <TABLE border="2" width="90%"bgColor="lightblue" align="center" > <TR><TD><P>V tétobuňce jeodstavectextu</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 • Buňka může obsahovat jakékoliv elementy povolené v části BODY • Velikost buňky se implicitně přizpůsobuje obsahu

  14. TABLE – obsah buňky - příklady <TABLE border="2" width="90%"bgColor="lightblue" align="center" > <TR><TD width="50%"><P>V tétobuňce jeodstavectextu</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>

  15. TABLE – užití tabulky pro rozvržení stránky <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> • Rozdělení stránky na oblasti – buňky tabulky • Použití vnořených tabulek

  16. <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> TABLE – užití tabulky pro rozvržení stránky

  17. Formuláře <FORM> prvky formuláře </FORM> atributy prvku FORM: name="jméno" action="url obslužného programu" method="GET/POST" • 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

  18. <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> <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> Příklad stránky s formulářem

  19. <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> Příklad stránky s formulářem

  20. Formuláře <TEXTAREA> text </TEXTAREA> atributy: name, rows, cols, readonly <SELECT> atributy: name, size, multiple <OPTION> položka</OPTION> atributy: selected, value </SELECT>

  21. 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> <OPTIONvalue="visa">VISA karta</OPTION> <OPTION value="paus">Paušál</OPTION> </SELECT> </FORM>

  22. 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><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> Příklad stránky s formulářem

More Related