Transcript HTML
HTML Základy HTML řídí konsorcium W3C – www.w3.org Historie – verze 3.0 Používá se – verze 4.01 17.7.2015 HTML - Zdeněk Jelínek 1 HTML Základy 17.7.2015 HTML - Zdeněk Jelínek 2 HTML Základy 17.7.2015 HTML - Zdeněk Jelínek 3 HTML Základy 17.7.2015 HTML - Zdeněk Jelínek 4 HTML Základy http://www.fce.vutbr.cz/studium/mate rialy/0u2/html/ 17.7.2015 HTML - Zdeněk Jelínek 5 HTML Základy Vše založeno na hypertextových odkazech Příklad – začneme s textovým editorem 17.7.2015 HTML - Zdeněk Jelínek 6 HTML Základy & = pravý Alt + C # = pravý Alt + X @ = pravý Alt + V \ = pravý Alt + Q 17.7.2015 HTML - Zdeněk Jelínek 7 HTML Základy Základy HTML - hypertextové odkazy Hypertextový odkaz (neboli odkaz, link...) je odkaz, který otvírá jinou stránku serveru. Existuje několik způsobů, jak a kam stránku otevřít. 4 příklady, jak hypertextové odkazy otvírat a kam. Novou stránku otvíráme pomocí atributu target = cíl. Známe taky atribut href = nastavuje, jaká stránka se má po kliknutí na odkaz otevřít. _self - otevře dokument v tomtéž rámu _blank - otevře odkaz do nového okna _top - otevře dokument v celém okně prohlížeče _parent - otevře dokument v nadřazeném rámu Příklad: <a href="http://maichl.wz.cz" target="_blank"> MaiChL's Pages</a> A vznikne toto: MaiChL's Pages - klikněte, stránka se otevře v novém okně 17.7.2015 HTML - Zdeněk Jelínek 8 HTML Tagy Základní pravidla : tagy (štítek, návěští či označení) odkazy Tag – uzavřený do špičatých závorek < Tag > Všechny příkazy jazyka HTML jsou tagy, vše, co je MIMO špičatých závorek je vlastní obsah stránky 17.7.2015 HTML - Zdeněk Jelínek 9 HTML Tagy Tagy dělíme na : párové tagy nepárové tagy Příklad : Párové tagy jsou ty, které mezi sebe uzavírají obsah a přiřazují mu tak danou hodnotu (tagy jsou voleny pouze pro ilustraci, takhle samozřejmě neexistují) <CERVENY-TEXT>tento text bude červený</CERVENY-TEXT> a tento už zase červený nebude nebo : <CERVENY-TEXT>tento text bude<TUCNY-TEXT> červený</CERVENY-TEXT>a částečně také tučný</TUCNY-TEXT> a tento už zase NE Nepárové tagy umisťují do stránky jediný element, který je už svou podstatou nedělitelný <IMG SRC= “obrazek.gif“> 17.7.2015 HTML - Zdeněk Jelínek 10 HTML Tagy – Struktura stránky Ve správné webové stránce by neměly chybět následující sekce : 1. <!DOCTYPE HTML PUBLIC“.//W3C/DTD HTML 4.01//EN“> ................ označení typu dokumentu a verze HTML 2. <HTML> ....................... počátek textu ve formátu HTML 3. <HEAD> ........................počátek hlavičky 4. <TITLE >Jméno dokumentu</TITLE> ........ jméno dokumentu zobrazené nahoře v titulku okna 5. <META NAME= “POPIS“ CONTENT= “Co dokument obsahuje“> ....... meta informace – co dokument obsahuje 6. </HEAD> ........................... .......konec hlavičky 7. <BODY> ......................................počátek těla vlastního zobrazovaného obsahu stránky 8. ..................................................... vlastní obsah stránky....................................... 9. </BODY> ................................... konec těla stránky 10. </HTML> ....................................konec formátu HTML 17.7.2015 HTML - Zdeněk Jelínek 11 HTML Tagy Tag HTML Párový ta HTML ohraničuje počátek a konec vlastních dat tvořících webovou stránku, t.j. vlastních dat ve formátu HTML tento tag je povinný, ale dáse také ignorovat. doporučuje se. Příklad : <HTML> ....................................zde je celý dokument ve formátu HTML ...... </HTML> 17.7.2015 HTML - Zdeněk Jelínek 12 HTML Tagy Tag HEAD A BODY HEAD - jedná se o hlavičku stránky. Je třeba ho používat. Jedná se o párový tag. BODY – jde o tělo webové stránky Příklad : <HTML> <HEAD> ....................................zde je hlavička webové stránky..................... </HEAD> <BODY> .....................................zde je tělo, obsah stránky................... </BODY> ....................................zde je celý dokument ve formátu HTML ...... </HTML> 17.7.2015 HTML - Zdeněk Jelínek 13 HTML Tagy Tag TITLE Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Příklad : <HTML> <HEAD> ....................................zde je hlavička webové stránky..................... <TITLE> Moje první webová stránka</TITLE> </HEAD> <BODY> .....................................zde je tělo, obsah stránky................... </BODY> ....................................zde je celý dokument ve formátu HTML ...... </HTML> 17.7.2015 HTML - Zdeněk Jelínek 14 HTML Tagy Tag TITLE 17.7.2015 HTML - Zdeněk Jelínek 15 HTML Tagy Sekce HEAD Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam ISINDEX – je tag obsahující klíčová slova pro vyhledávání BASE – určuje základní adresu URL, od které se pak odvozují relativní adresy uvedené v dokumentu SCRIPT – je vyhrazen pro budoucí verze a práci se skriptovanými jazyky STYLE – je vyhrazen pro budoucí verze a práce se styly META – slouží pro metainformace LINK . Určuje vztahy mezi dalšími dokumenty HTML 17.7.2015 HTML - Zdeněk Jelínek 16 HTML Tagy Tag INSIDEX v sekci HEAD Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam ISINDEX – je tag obsahující klíčová slova pro vyhledávání. Sděluje, že dokument je indexován a že je možné zadávat už v URL adrese vyhledávání dle klíčových slov. Vytlačuje jej tag FORM, který má širší možnosti.. K vyhledávání musí být přizpůsoben i webový server, který reaguje na vyhledávací řetězec stanovený uživatelem- musí na něm běžet program typu cgi-bin. 17.7.2015 HTML - Zdeněk Jelínek 17 HTML Tagy Tag BASE v sekci HEAD Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam BASE – je tag který určuje základní adresářovou cestu, která v dalších odkazech vystupuje jako kořenový adresář. Odkazy pak mohou být jednodušší a kratší <BASE href=http://www.agenturamika.cz/data> Pak se múže nastavit <IMG SRC=“obrazky/cplogo.gif”> Což znamená, že plná adresářová adresa k obrázku je http://www.agenturamika.cz/data/obrazky/cplogo.gif 17.7.2015 HTML - Zdeněk Jelínek 18 HTML Tagy Tag META v sekci HEAD Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam META – jedná se o sběrný tag, který obsahuje nejrůznější parametry, které nejsou přímo definovány v základních elementech jazyka HTML. Informace se přímo nezobrazují. 17.7.2015 HTML - Zdeněk Jelínek 19 HTML Tagy Tag BODY Tag BODY plní v zásadě dvě funkce : jednak do sebe uzavírá celou vlastní stránku, jednak prostřednictvím parametrů definuje její vlastnosti. Následující příklad definuje implicitní barvy elementů na stránce a vzdálenost pravého a levého okraje stránky Syntaxe <BODY> backround=“.....” bgcolor=“....” text=“....” link=:”....” vlink=“....” alink =“Teal” LEFTMARGIN=nn TOPMARGING=nnn BGPROPERTIES=“....” zde se nalézá obsah stránky........... </BODY> 17.7.2015 HTML - Zdeněk Jelínek 20 HTML Tagy Tag BODY – pozadí a text Barva pozadí a textu. barva pozadí může být souvislou barvou. dále jsou pak možnosti vybarvit základní druhy textů různými barvami BGCOLOR - barva vyplňující pozadí stránky TEXT - základní barva textu (implicitně je nastavena černá) LINK - barva ještě nenavštíveného odkazu (odkaz je zároveň podtržený). Implicitně je to modrá, hex. 0000FF VLINK - barva již navštíveného odkazu, implicitně je to světle fialová, hex. 800080 ALINK 17.7.2015 - barva aktuálního odkazu, jedná se o zbarvení odkazu v okamžiku, když se na něj klepne myší – implicitně je to červená hex. FF0000 HTML - Zdeněk Jelínek 21 HTML Tagy Tag BODY – zadávání barev hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. TEXT=“White“ nebo TEXT=“#024AC9” 17.7.2015 pozor na nutnost umístění # HTML - Zdeněk Jelínek 22 HTML Tagy Tag BODY – zadávání barev hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Black - černá, #000000 Aqua - světle modrá, #00FFFF Blue - základní modrá #0000FF Fuhcsia - purpurová #FF00FF Gray - šedá (tmavší) #808080 Green - základní zelená #008000 Lime - neónově zelená #00FF00 Navy - tmavá, námořnická modř #808000 17.7.2015 HTML - Zdeněk Jelínek 23 HTML Tagy Tag BODY – zadávání barev hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Olive - olivově zelená #808000 Purple - fialová #800080 Maroon - tmavě červená #800000 Red - základní červená #FF0000 Silver - střábrná (světle šedá) #C0C0C0 Teal - modrozelená #008080 White - bílá #FFFFFF Yellow - základní žlutá XFFFF00 17.7.2015 HTML - Zdeněk Jelínek 24 HTML Tagy Tag BODY – zadávání barev Barvy – názvy barev - základní Barvy – názvy barev – další paleta 17.7.2015 HTML - Zdeněk Jelínek 25 HTML Tagy Tag BODY – zadávání barev hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Příklad : <HTML> <BODY TEXT=“#00FFFF”> <p>Jak se máte. Jdou Vám barvy ? </p> </BODY> </HTML> 17.7.2015 HTML - Zdeněk Jelínek 26 HTML Tagy Tag BODY – zadávání barev hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Příklad : P1-text.htm 17.7.2015 HTML - Zdeněk Jelínek 27 HTML Text Základy HTML - práce s textem Každá stránka obsahuje text (teda doufám!!! ;-)), který je vkládán a formátován. Všechno musí být vloženo do těla dokumentu (tedy mezi <body> a </body>). Je to úplně jednoduché! Obyčejný text stačit nebude, tak vám zde popíšu, jak text formátovat. Zalomení řádku (br) : Pokud ve zdrojovém kódu chcete začít další řádek, nestačí je klávesa Enter. Pomocí nepárového tagu <br> řádek zalomíte, a píšete další řádek. ----------------------------------------------------------------------------------------------Font (color, size a face) Pokud chcete trochu obohatit web písmem (jak stylem tak i velikostí a barvou), tak můžete zkusit několik možností. Začněme elementem <font>, do kterého budeme vkládat další atributy: face - styl písma size - velikost písma (1-7) color - barva písma ----------------------------------------------------------------------------------------------Vodorovná čára (hr) Pokud potřebujete něco oddělit, udělejte to čarou, která má element <hr>: size - velikost čáry width - šířka čáry height - výška čáry (doporučuji 1) color - barva čáry 17.7.2015 HTML - Zdeněk Jelínek 28 HTML Tagy Tag BODY – odkazy .Hypertextový odkaz <HTML> :<BODY TEXT="#FFFF00" bgcolor="FF0000"> <p><b><a href=http://ravys.cz>Rašínova vysoká škola </b></p> <br> <hr> <p>Rašínova vysoká škola byla založena v roce 2002. Rozhodnutím MŠMT byl škole udělen souhlas působit jako soukromá vysoká škola s akreditací bakalářského studijního programu Ekonomika a insolvence a v roce 2008 byla tomuto programu udělena i akreditace magisterského stupně.</p> </BODY> </HTLM> 17.7.2015 HTML - Zdeněk Jelínek 29 Cvičení Na barevném pozadí napište text „Rašínova vysoká škola“ a přiřaďte tomuto nápisu odkaz na www.ravys.cz. Napište další odstavec s krátkým představením školy 17.7.2015 HTML - Zdeněk Jelínek 30 HTML Tabulky Vytváření tabulek Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou. 17.7.2015 HTML - Zdeněk Jelínek 31 HTML Tabulky Vytváření tabulek Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou. www.brno.cz www.seznam.cz www.inbrno.cz 17.7.2015 HTML - Zdeněk Jelínek 32 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 33 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 34 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 35 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 36 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 37 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 38 HTML Tabulky <TABLE cols="4" border="2" bgcolor="#eaeaff" width="200"> <COLGROUP align="center"> <COL valign="middle" bgcolor="yellow"> <COLGROUP span="3" valign="top"> <THEAD bgcolor="red"> <TR> <TD colspan="4">Záhlaví tabulky <TR> <TD colspan="2">Levé <TD colspan="2" align="center">Pravé </THEAD> <TFOOT bgcolor="blue"> <TR> <TD colspan="4">Pata tabulky </TFOOT> <TBODY> <TR> <TD rowspan="3">1 <TD>A<TD>B<TD>C <TR> <TD>E<TD>F<TD>G <TR> <TD>H<TD>I<TD>J </TBODY > <TBODY align="right"> <TR> <TD rowspan="4">2 <TD>AA<TD>BB<TD>CC <TR> <TD>DD<TD>EE<TD>FF <TR> <TD> <TD> <TD> <TR> <TD> <TD> <TD> </TBODY></TABLE> 17.7.2015 HTML - Zdeněk Jelínek 39 HTML Tabulky Vytváření tabulek Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou. www.ibstructure.com¨ <table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="right" valign="top" > <div align="center"> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="581"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"> <PARAM NAME=movie VALUE="my_intro.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=scale VALUE=exactfit> <EMBED src="my_intro.swf" quality=high wmode=opaque width="800" height="581" scale=exactfit PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer/"> </EMBED></OBJECT> </div></td> </tr></table> 17.7.2015 HTML - Zdeněk Jelínek 40 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 41 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 42 HTML Tabulky <html><head> <title>TABULKA</title> </head><body> <table border="1" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="266"> <tr> <td width="50%" height="19"> </td> <td width="50%" height="19"> </td> </tr> <tr> <td width="50%" height="242"> </td> <td width="50%" height="242"> </td> </tr> </table></body></html> 17.7.2015 HTML - Zdeněk Jelínek 43 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 44 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 45 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 46 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 47 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 48 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 49 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 50 HTML Tabulky <html><head> <title>Tabulka</title> </head><body> <table border="8" style="border-collapse: collapse" bordercolor="#FF0000" width="100%" height="266"> <tr> <td width="50%" height="19"> </td> <td width="50%" height="19"> </td> </tr> <tr> <td width="50%" height="242"> </td> <td width="50%" height="242"> </td> </tr> </table></body></html> Pozn. & = pravýAlt + C # - pravý Alt + X 17.7.2015 HTML - Zdeněk Jelínek 51 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 52 HTML Tabulky <html><head> <title>Tabulka</title> </head> <body> <table border="8" style="border-collapse: collapse" bordercolor="#FF0000" width="100%" height="266"> <tr> <td width="50%" height="19" bgcolor="#000080"> </td> <td width="50%" height="19" bgcolor="#800000"> </td> </tr> <tr> <td width="50%" height="242" bgcolor="#00FFFF"> </td> <td width="50%" height="242" bgcolor="#FF00FF"> </td> </tr> </table></body></html> 17.7.2015 HTML - Zdeněk Jelínek 53 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 54 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 55 HTML Tabulky <html><head> <title>Tabulka</title> </head><body> <table border="3" style="border-collapse: collapse" bordercolor="#111111" width="261" cellpadding="2" cellspacing="3"> <tr> <td width="39" bgcolor="#000000"> </td> <td width="198" bgcolor="#FF0000"> </td> </tr> <tr> <td width="39" bgcolor="#00FF00"> </td> <td width="198" bgcolor="#000080"> </td> </tr> </table> </body></html> 17.7.2015 HTML - Zdeněk Jelínek 56 HTML Tabulky <html><head> <title>Tabulka</title> </head><body> <table border=„10" style="border-collapse: collapse" bordercolor="#111111" width="261" cellpadding="2" cellspacing="3"> <tr> <td width="39" bgcolor="#000000"> </td> <td width="198" bgcolor="#FF0000"> </td> </tr> <tr> <td width="39" bgcolor="#00FF00"> </td> <td width="198" bgcolor="#000080"> </td> </tr> </table> </body></html> 17.7.2015 HTML - Zdeněk Jelínek 57 HTML Tabulky <html><head> <title>Tabulka</title> </head><body> <table border=„10" style="border-collapse: collapse" bordercolor="#111111" width=„500" cellpadding="2" cellspacing="3"> <tr> <td width="39" bgcolor="#000000"> </td> <td width="198" bgcolor="#FF0000"> </td> </tr> <tr> <td width="39" bgcolor="#00FF00"> </td> <td width="198" bgcolor="#000080"> </td> </tr> </table> </body></html> 17.7.2015 HTML - Zdeněk Jelínek 58 HTML Tabulky <html><head> <title>Tabulka</title> </head><body> <table border=„10" style="border-collapse: collapse" bordercolor="#111111" width=„500" cellpadding="2" cellspacing="3"> <tr> <td width=„50" bgcolor="#000000"> </td> <td width=„50" bgcolor="#FF0000"> </td> </tr> <tr> <td width="39" bgcolor="#00FF00"> </td> <td width="198" bgcolor="#000080"> </td> </tr> </table> </body></html> 17.7.2015 HTML - Zdeněk Jelínek 59 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 60 HTML Tabulky <html><head> <title>Tabulka</title> </head> <body> <table border="10" bordercolor="#111111" width="500" cellpadding="2" cellspacing="3"> <tr> <td width="50" bgcolor="#00FF00"> <p align="center"><b>Tabulka</b></td> <td width="50" bgcolor="#000080"><b><font color="#FFFFFF">Modrá</font></b></td> </tr> </table></body> </html> 17.7.2015 HTML - Zdeněk Jelínek 61 HTML Rámy Základy HTML - rámy Rámy se už moc nepoužívají……., frameset - skupina rámů frame - rám iframe - vložený rám cols - sloupcové rozdělení rows - řádkové rozdělení name - jméno rámu bordercolor - barva rámečku okolo rámu Příklad: <frameset cols="150"> <frame name="levy" src="leve-menu.htm"> <frame name="obsah" src="obsah.htm"> </frameset> 17.7.2015 HTML - Zdeněk Jelínek 62 HTML Rámce 17.7.2015 HTML - Zdeněk Jelínek 63 HTML Rámce www.pulsar.cz 17.7.2015 HTML - Zdeněk Jelínek 64 HTML Rámce <html> <head> <title>Nová stránka 1</title> </head> <body> <p><iframe name="I1" width="625" height="401" src="vlozeny_ramec.htm"> </iframe></p> </body> </html> 17.7.2015 HTML - Zdeněk Jelínek 65 HTML Rámce 17.7.2015 HTML - Zdeněk Jelínek 66 HTML Rámce 17.7.2015 HTML - Zdeněk Jelínek 67 HTML Rámce Odkaz na jiný soubor – obsah rámce ramec.htm 17.7.2015 HTML - Zdeněk Jelínek 68 HTML Rámce 17.7.2015 HTML - Zdeněk Jelínek 69 HTML Rámce ramec1.htm 17.7.2015 HTML - Zdeněk Jelínek 70 HTML Rámce ramec1.htm 17.7.2015 HTML - Zdeněk Jelínek 71 HTML Rámce ramec1.htm 17.7.2015 HTML - Zdeněk Jelínek 72 HTML Rámce ramec1.htm 17.7.2015 HTML - Zdeněk Jelínek 73 HTML Rámce Obsah rámce ramec1.htm 17.7.2015 HTML - Zdeněk Jelínek 74 HTML Rámce index.htm 17.7.2015 HTML - Zdeněk Jelínek 75 HTML 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 odeslány ke zpracování na server nebo zpracovány skripty přímo ve stránce. 17.7.2015 HTML - Zdeněk Jelínek 76 HTML Formuláře <FORM name = «jméno» action = «URL obsluhujícího skriptu» method = «metoda» > «definice prvků formuláře» </FORM> 17.7.2015 HTML - Zdeněk Jelínek 77 HTML Formuláře - prvky webu INPUT type TEXT krátký text (implicitní volba) PASSWORD heslo CHECKBOX „zaškrtávací“ tlačítko (vypínač) RADIO přepínač SUBMIT tlačítko odeslání formuláře RESET tlačítko vymazání formuláře BUTTON obecné tlačítko, pomocí události lze spojit se skriptem SELECT umožňuje výběr z několika položek TEXTAREA víceřádkový text 17.7.2015 HTML - Zdeněk Jelínek 78 HTML Formuláře 17.7.2015 HTML - Zdeněk Jelínek 79 HTML Formuláře Jméno: <INPUT type="text" name="jm" size="10"> <br> Příjmení: <INPUT type="text" name="pr" size="15"> <br> Rodné číslo: <INPUT type="text" name="rc" size="11" maxlength="11"><br> PSČ: <INPUT type="text" name="psc" size="8" maxlength="5"><br> Heslo: <INPUT type="password" name=psw" size="5" maxlength="5"> INPUT – definice vstupního prvku, TYPE – druh vstupního pole, NAME – jméno pro zpracování skripty, SIZE – rozměr pole ve znacích, TEXT – jednořádkové textové pole, MAXLENGTH – maximální počet znaků, 17.7.2015 HTML - Zdeněk Jelínek 80 HTML Formuláře 17.7.2015 HTML - Zdeněk Jelínek 81 HTML Formuláře <table width=100% border=0> <tr> <th colspan=4>Který měsíc vám vyhovuje? <tr> <td><INPUT type="checkbox" name="pris" checked> červen <td><INPUT type="checkbox" name="pris" checked> červenec <td><INPUT type="checkbox" name="pris"> srpen <td><INPUT type="checkbox" name="pris"> září </table> th-buňka záhlaví tabulky, border-šířka rámečku, width-šířka, colspan-počet sloučených sloupců, input-definice vstupního resp. výstupního prvku, checkbox-zaškrtávací políčko, checked – implicitní zašktnutí, name – jméno potřebné pro zpracování skripty 17.7.2015 HTML - Zdeněk Jelínek 82 HTML Formuláře 17.7.2015 HTML - Zdeněk Jelínek 83 HTML Formuláře <table cols=2 border=0 > <tr><th align=left > pohlaví <th align=left > Barva očí <tr><td valign=top width=100 > <INPUT type="radio" name="p" value="m" >muž <br> <INPUT type="radio" name="p" value="z" >žena <td valign=top > <INPUT type="radio" name="o" >modré <br> <INPUT type="radio" name="o" checked >hnědé <br> <INPUT type="radio" name="o" >zelené <br> <INPUT type="radio" name="o" >jiné barvy </table> table –vymezení tabulky, cols – počet sloupců, border – šířka rámečku, align – vodorovné zarovnání, valign – svislé zarovnání, width – šířka buňky, radio – přepínač, name – jméno potřebné pro zpracování, value – hodnota, input – vstup resp. Výstup, br – nový řádek 17.7.2015 HTML - Zdeněk Jelínek 84 HTML Formuláře 17.7.2015 HTML - Zdeněk Jelínek 85 HTML Formuláře Co nám chcete sdělit pěkného?<br> <TEXTAREA cols="20" rows="3"> Dobrý den. </TEXTAREA> 17.7.2015 HTML - Zdeněk Jelínek 86 HTML Formuláře 17.7.2015 HTML - Zdeněk Jelínek 87 HTML Formuláře Vyber si zvířátko: <SELECT name="zver1" > <OPTION value="k" >Kočička</OPTION > <OPTION value="p">Pejsek</OPTION> <OPTION value="kr">Králíček</OPTION> <OPTION value="m">Morče </OPTION> </SELECT> <p> Vyber si ještě jedno zvířátko: <SELECT name="zver1" > <OPTION value="m" >Myš</OPTION > <OPTION value="s" selected>Šnek</OPTION> <OPTION value="z">Zajíc</OPTION> <OPTION value="j">Ještěrka </OPTION> </SELECT> <p> Co bude jíst? (i několik) <SELECT name="jidlo" multiple size="6" align=top> <OPTION value="m" >mrkev</OPTION > <OPTION value="s">salát</OPTION> <OPTION value="ma">maso</OPTION> <OPTION value="ml">mléko </OPTION> <OPTION value="v">voda</OPTION> <OPTION value="r">rohlík</OPTION> 17.7.2015 HTML - Zdeněk Jelínek 88 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 89 HTML Tabulky Vlastnosti použitelné v definicích stylů 17.7.2015 HTML - Zdeněk Jelínek 90 HTML Formátování textů 17.7.2015 HTML - Zdeněk Jelínek 91 HTML Formátování textů 17.7.2015 HTML - Zdeněk Jelínek 92 HTML Obrázek 17.7.2015 HTML - Zdeněk Jelínek 93 HTML Obrázek 17.7.2015 HTML - Zdeněk Jelínek 94 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 95 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 96 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 97 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 98 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 99 HTML Tabulky 17.7.2015 HTML - Zdeněk Jelínek 100 HTML Tabulky <TABLE cols="4" border="2" bgcolor="#eaeaff" width="200"> <COLGROUP align="center"> <COL valign="middle" bgcolor="yellow"> <COLGROUP span="3" valign="top"> <THEAD bgcolor="red"> <TR> <TD colspan="4">Záhlaví tabulky <TR> <TD colspan="2">Levé <TD colspan="2" align="center">Pravé </THEAD> <TFOOT bgcolor="blue"> <TR> <TD colspan="4">Pata tabulky </TFOOT> <TBODY> <TR> <TD rowspan="3">1 <TD>A<TD>B<TD>C <TR> <TD>E<TD>F<TD>G <TR> <TD>H<TD>I<TD>J </TBODY > <TBODY align="right"> <TR> <TD rowspan="4">2 <TD>AA<TD>BB<TD>CC <TR> <TD>DD<TD>EE<TD>FF <TR> <TD> <TD> <TD> <TR> <TD> <TD> <TD> </TBODY></TABLE> 17.7.2015 HTML - Zdeněk Jelínek 101 HTML Odkazy 17.7.2015 HTML - Zdeněk Jelínek 102 HTML Matematika Opakování vzorců Rovnice kružnice se středem S[x0, y0] a poloměrem r v kartézských souřadnicích je (x – x0)2 + (y – y0)2 = r2. <H2>Opakování vzorců</H2> Rovnice kružnice se středem <I>S</I>[<I>x</I><SUB>0</SUB>, <I>y</I><SUB>0</SUB>] a poloměrem <I>r</I> v kartézských souřadnicích je (<I>x</I> – <I>x</I><SUB>0</SUB>)<SUP>2</SUP> + (<I>y</I> – <I>y</I><SUB>0</SUB>)<SUP>2</SUP> = <I>r</I><SUP>2</SUP>. 17.7.2015 HTML - Zdeněk Jelínek 103 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 104 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 105 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 106 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 107 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 108 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 109 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 110 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 111 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 112 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 113 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 114 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 115 HTML Přehled tagů 17.7.2015 HTML - Zdeněk Jelínek 116 HTML Ukázky 17.7.2015 HTML - Zdeněk Jelínek 117 HTML Ukázky <HTML> <HEAD> <TITLE>Závislost na internetu</TITLE> </HEAD> <BODY> <H1>Seznam příznaků závislosti na Internetu</H1> <UL> <LI>líbáte domácí stránku své dívky <LI>odmítáte odjet na dovolenou tam, kde není elektřina a telefon <LI>v noci se vám zdají sny v HTML <LI>při psaní čehokoliv píšete za každou větou .com <LI>při vypínání modemu máte podobný pocit, jako byste dostával kopačky <LI>všichni vaši přátelé mají ve jménu @ <LI>nevíte, jakého pohlaví jsou vaši přátelé, mají neutrální přezdívky a vás nikdy nenapadlo se jich zeptat <LI>na stěnách veřejných záchodků hledáte webové adresy <LI>nikdy nemáte problémy s obsazenou linkou, protože se vůbec neodhlašujete <LI>vaše virtuální děvče si najde nového hocha s tlustším kabelem <LI>dívka, kterou jste naposledy sbalil, byla jenom JPEG </UL> <A href="default.htm">Zpět</A> na úvodní stránku. </BODY> </HTML> 17.7.2015 HTML - Zdeněk Jelínek 118 HTML Ukázky 17.7.2015 HTML - Zdeněk Jelínek 119 HTML Ukázky Vítejte na mé webové stránce Zprávy z domova Policie zadržela v Praze–Ruzyni dvě neznámé ženy podezřelé z přípravy teroristického útoku v odletové hale na letišti. Několik cestujících ohlásilo podezřelé chování dvou žen, které potřísnily podlahu v odletové hale neznámou tekutinou. Policejní ozbrojenci neprodyšně uzavřeli letiště a okolí. Několik expertiz vzorku látky nezávisle na sobě prokázalo, že se jedná o vodu se saponátem. Policie oběma ženám vrátila kýbly, smetáky i hadry, jež předtím zajistila, a propustila je na svobodu. Opakování vzorců Rovnice kružnice se středem S[x0, y0] a poloměrem r v kartézských souřadnicích je (x – x0)2 + (y – y0)2 = r2. 17.7.2015 HTML - Zdeněk Jelínek 120 HTML Ukázky <HTML> <HEAD> <TITLE>Úvodní stránka</TITLE> </HEAD> <BODY> <H1 align="center">Vítejte na mé webové stránce</H1> <HR color="blue" width="80%"> <H2>Zprávy z domova</H2> <IMG src="uklizecka.gif" align="left"> Policie zadržela v Praze–Ruzyni dvě neznámé ženy podezřelé z přípravy teroristického útoku v odletové hale na letišti. Několik cestujících ohlásilo podezřelé chování dvou žen, které potřísnily podlahu v odletové hale neznámou tekutinou. Policejní ozbrojenci neprodyšně uzavřeli letiště a okolí. Několik expertiz vzorku látky nezávisle na sobě prokázalo, že se jedná o vodu se saponátem. Policie oběma ženám vrátila kýbly, smetáky i hadry, jež předtím zajistila, a propustila je na svobodu.<BR clear="all"> <H2>Opakování vzorců</H2> Rovnice kružnice se středem <I>S</I>[<I>x</I><SUB>0</SUB>, <I>y</I><SUB>0</SUB>] a poloměrem <I>r</I> v kartézských souřadnicích je (<I>x</I> – <I>x</I><SUB>0</SUB>)<SUP>2</SUP> + (<I>y</I> – <I>y</I><SUB>0</SUB>)<SUP>2</SUP> = <I>r</I><SUP>2</SUP>. <H2>Zajímavé odkazy</H2> <UL> <LI><A href="pocasi.htm">Počasí v České republice</A> <LI><A href="zavislost.htm">Seznam příznaků závislosti na Internetu</A> <LI><A href="http://www.fce.vutbr.cz" target="_blank">FAST VUT v Brně</A> </UL> </BODY></HTML> 17.7.2015 HTML - Zdeněk Jelínek 121 HTML Ukázky 17.7.2015 HTML - Zdeněk Jelínek 122 HTML Ukázky pocasi.htm <HTML> <HEAD> <TITLE>Počasí</TITLE> </HEAD> <BODY> <H1>Počasí v České Republice</H1> <A href="http://czech.wunderground.com/global/stations/11518.html"> <IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11518.gif" alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"></A><BR><BR> <A href="http://czech.wunderground.com/global/stations/11723.html"> <IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11723.gif" alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"></A><BR><BR> <A href="http://czech.wunderground.com/global/stations/11782.html"> <IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11782.gif" alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"></A><BR><BR> Další informace o počasí získáte na serveru <A href="http://czech.wunderground.com" target="_blank">Weather Underground</A>.<BR> <A href="default.htm">Zpět</A> na úvodní stránku. </BODY> </HTML> 17.7.2015 HTML - Zdeněk Jelínek 123 HTML Ukázky Odkazy z : http://czech.wunderground.com/ 17.7.2015 HTML - Zdeněk Jelínek 124