Značky HTML Jakub Vrána
HTML tvorné značky <html> <head> <title> <body> <meta/> {hypertext markup language} záhlaví dokumentu název dokumentu tělo dokumentu vložení metainformací
Základní tvar dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>název dokumentu</title> </head> <body> Tělo dokumentu </body> </html>
Tělo dokumentu <body> background obrázek na pozadí! bgcolor barva pozadí! text barva obyčejného textu! link barva odkazu! vlink barva prohlédnutého odkazu! alink barva aktivního odkazu! [#rrggbb jméno]
<meta/> Metainformace http-equiv doplnění informace v hlavičce name jméno content obsah <meta http-equiv="content-type" content="text/html;charset=iso-8859-2"> <meta name="description" content="...">
HTML entity < < (menší než) > > (větší než) & & (ampersand) (pevná mezera) <!--... --> komentáře
Stránkotvorné značky <p> {paragraph} odstavec <br/> {line break} zlom řádku <hr/> {horizontal rule} vodorovná čára <h1> - <h6> {heading} nadpis <a> {anchor} odkaz
Formát odstavce <p align=> zarovnání! [right center justify] <br clear=> vyčištění okolí! [all left right] <center> vycentrování! <pre> naformátovaný text <div> kontejner na objekty <span> kontejner na text <blockquote> citace
Vodorovná čára <hr/> size tloušťka! width šířka na obrazovce! align zarovnání! noshade potlačení stínování!
Odkaz <a> href name title accesskey odkaz na dokumenty vytvoření částí dokumentu nápovědný text přístupová klávesa [x] <a name="kapitola1"></a> <a href="#kapitola1">odkaz</a>
Formátování Fyzické Logické <font> přímá úprava písma! size velikost písma [ 1 7] color barva [#rrggbb jméno] face řez písma <basefont/> základní nastavení písma!
Fyzické formátování <b> {bold} tučné písmo <i> {italic} kurzíva <u> {underline} podtržení! <sup> {superscript} horní index <sub> {subscript} dolní index <tt> {teletype} pevná šířka znaku
Logické formátování <em> <strong> <code> <kbd> {emphasized} zvýraznění silné zvýraznění ukázka kódu vstup z klávesnice
Seznamy <ul> {unordered list} nesetříděný seznam <ol> {ordered list} setříděný seznam <li> {list item} položka seznamu <dl> {definition list} seznam definic <dt> {definition term} pojem <dd> {def. description} vysvětlující text
Příklad seznamu <ul> <li>první položka</li> <li>druhá položka <ol> <li>první vnořená položka</li> <li>druhá vnořená položka</li> </ol> </li> </ul> První položka Druhá položka 1. První vnořená položka 2. Druhá vnořená položka
Atributy seznamů <ul> type podoba značky! [circle, disc, square] <ol> type podoba značky! [1 i I a A] start číslování od! <li> value číslování od této značky dále!
Obrázky <img/> src URL obrázku align zarovnání! [left right middle...] alt informace pro textové klienty border rámeček obrázku s odkazem! width, height rozměry v pixelech vspace, hspace mezera okolo obrázku!
Obrázky s klikou <img usemap=> indikace obrázku s klikou <map name=> <area> deklarace oblastí definice oblasti shape tvar [rect circle polygon] coords souřadnice href odkaz nohref v dané oblasti není odkaz alt pomocný text
Příklad obrázku s klikou <img src="obrazek.gif" usemap="#mapa" width="35" height="30"> <map name="mapa"> <area shape="circle" coords="10,10,5" href="elipsa.html"> <area shape="rect" coords="20,15,30,25" href="obdelnik.html"> </map>
Tabulky <table> tabulka <tr> {table row} řádka <th> {table heading} políčko nadpisu <td> {table data} datové políčko
Příklad tabulky <table border="1"> <tr> <td>1. řádek, 1. sloupec</td> <td>1. řádek, 2. sloupec</td> </tr> <tr> <td>2. řádek, 1. sloupec</td> <td>2. řádek, 2. sloupec</td> </tr> </table> 1. řádek, 1. sloupec 1. řádek, 2. sloupec 2. řádek, 1. sloupec 2. řádek, 2. sloupec
Formát tabulky <table> border okraj cellspacing velikost mezer mezi buňkami cellpadding vzdálenost dat od okraje width šířka align zarovnání! [center right] bgcolor barva pozadí!
Atributy tabulky <tr>, <td>, <th> align vodorovné zarovnání [center right] valign svislé zarovnání [top bottom middle] bgcolor barva pozadí! <td>, <th> colspan spojení více sloupců rowspan spojení více řádek nowrap nezalamovat obsah buněk!
Rámy <frameset> deklarace rámů rows rozdělení okna na řádky a sloupce cols [* 200 20% 3*] <frame> definice rámů src zdrojový dokument rámu name jméno rámu <noframes> klienti nepodporující rámy
Příklad dokumentu s rámy <frameset cols="20%,*"> <frameset rows="*,120"> <frame name="obsah" src="obsah.html"> <frame name="logo" src="logo.html"> </frameset> <frame name="hlavni" src="titulni.html"> <noframes> Dokument pro klienty nepodporující rámy. <a href="obsah.html">obsah</a> </noframes> </frameset>
Úpravy rámů <frame> frameborder rámeček [yes no 0] scrolling noresize marginheight marginwidth přikáže, zakáže posouvání [yes no auto] znemožní změnu velikosti šířka okraje výška okraje
Odkazy na rámy <a target=> cílový rám [jméno _blank _self _parent _top] <base/> target href základ pro odkaz základní rám pro odkaz základ pro odkaz na dokument
Formuláře <form> <input/> <textarea> <select> formulář vstupní pole vstupní textová oblast menu
Formulář <form> action co se s daty formuláře provede method jak se to provede [get post] enctype jakého jsou data druhu target cílové okno <form enctype="application/form-data">
Příklad formuláře <form action="mailto.php" method="post"> Jméno: <input type="text" name="jmeno"> E-mail: <input type="text" name="email"> Zpráva: <textarea name="zprava"></textarea> Stránky se mi: <input type="radio" name="libi" value="ano"> Líbí <input type="radio" name="libi" value="ne"> Nelíbí <input type="submit" value="odeslat"> </form>
Vstupy formulářů <input type=> TEXT, PASSWORD CHECKBOX RADIO HIDDEN FILE SUBMIT RESET jednoduchý, skrytý text zaškrtávací políčko přepínač skrytý prvek odeslání celého souboru tlačítko pro odeslání tlačítko pro vynulování
Atributy vstupů <input/> name value size maxlength checked disabled readonly identifikátor hodnota velikost vstupního pole maximální délka vstupu indikátor výběru prvek nelze vybrat prvek nelze změnit
Vstupní textová oblast <textarea> name identifikátor rows, cols počet řádků, sloupců wrap zalamování na konci řádku!! [off soft hard] <textarea wrap="hard"> Text, který se na začátku zobrazí ve vstupním poli. </textarea>
Výběrový seznam <select> name size multiple <option> value selected identifikátor položky velikost menu možnost vybrat více položek položka nabídky text odeslaný formulářem vybraná položka
XHTML Rozdíly XHTML 1.0 proti HTML 4.01: Značky a atributy jsou psány malými písmeny Nepárové značky musí být ukončeny: <br /> Hodnoty atributů jsou vždy obaleny uvozovkami Přepínače musí mít stejnojmennou hodnotu <area nohref="nohref"> Dokument musí být uvozen <?xml version="1.0"?> a správným <!DOCTYPE>
Závěr Literatura Stránky v HTML na WWW World wide web consortium (http://www.w3.org) HTML Reference Library (HomeSite) Jiří Kosek: HTML tvorba dokonalých WWW stránek Další studium dynamické prvky (JavaScript, PHP, databáze) moderní rysy (styly, XHTML)
1 Značky HTML Jakub Vrána 1
2 HTML tvorné značky <html> <head> <title> <body> <meta/> {hypertext markup language} záhlaví dokumentu název dokumentu tělo dokumentu vložení metainformací 2
3 Základní tvar dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>název dokumentu</title> </head> <body> Tělo dokumentu </body> </html> 3
4 Tělo dokumentu <body> background obrázek na pozadí! bgcolor barva pozadí! text barva obyčejného textu! link barva odkazu! vlink barva prohlédnutého odkazu! alink barva aktivního odkazu! [#rrggbb jméno] 4
5 Metainformace <meta/> http-equiv doplnění informace v hlavičce name jméno content obsah <meta http-equiv="content-type" content="text/html;charset=iso-8859-2"> <meta name="description" content="..."> 5
< > & HTML entity < (menší než) > (větší než) & (ampersand) (pevná mezera) <!--... --> komentáře 6
7 Stránkotvorné značky <p> {paragraph} odstavec <br/> {line break} zlom řádku <hr/> {horizontal rule} vodorovná čára <h1> - <h6> {heading} nadpis <a> {anchor} odkaz 7
Formát odstavce <p align=> zarovnání! [right center justify] <br clear=> vyčištění okolí! [all left right] <center> vycentrování! <pre> <div> <span> <blockquote> naformátovaný text kontejner na objekty kontejner na text citace 8
Vodorovná čára <hr/> size tloušťka! width šířka na obrazovce! align zarovnání! noshade potlačení stínování! 9
Odkaz <a> href name title accesskey odkaz na dokumenty vytvoření částí dokumentu nápovědný text přístupová klávesa [x] <a name="kapitola1"></a> <a href="#kapitola1">odkaz</a> 10
Formátování Fyzické Logické <font> přímá úprava písma! size velikost písma [ 1 7] color barva [#rrggbb jméno] face řez písma <basefont/> základní nastavení písma! 11
Fyzické formátování <b> {bold} tučné písmo <i> {italic} kurzíva <u> {underline} podtržení! <sup> {superscript} horní index <sub> {subscript} dolní index <tt> {teletype} pevná šířka znaku 12
Logické formátování <em> <strong> <code> <kbd> {emphasized} zvýraznění silné zvýraznění ukázka kódu vstup z klávesnice 13
Seznamy <ul> {unordered list} <ol> {ordered list} <li> {list item} <dl> {definition list} <dt> {definition term} pojem nesetříděný seznam setříděný seznam položka seznamu seznam definic <dd> {def. description} vysvětlující text 14
Příklad seznamu <ul> <li>první položka</li> <li>druhá položka <ol> <li>první vnořená položka</li> <li>druhá vnořená položka</li> </ol> </li> </ul> První položka Druhá položka 1. První vnořená položka 2. Druhá vnořená položka 15
<ul> type <ol> Atributy seznamů podoba značky! [circle, disc, square] type podoba značky! [1 i I a A] start číslování od! <li> value číslování od této značky dále! 16
<img/> src Obrázky URL obrázku align zarovnání! [left right middle...] alt informace pro textové klienty border rámeček obrázku s odkazem! width, height rozměry v pixelech vspace, hspace mezera okolo obrázku! 17
Obrázky s klikou <img usemap=> indikace obrázku s klikou <map name=> <area> shape coords href nohref alt deklarace oblastí definice oblasti tvar [rect circle polygon] souřadnice odkaz v dané oblasti není odkaz pomocný text 18
Příklad obrázku s klikou <img src="obrazek.gif" usemap="#mapa" width="35" height="30"> <map name="mapa"> <area shape="circle" coords="10,10,5" href="elipsa.html"> <area shape="rect" coords="20,15,30,25" href="obdelnik.html"> </map> 19
<table> <tr> {table row} Tabulky tabulka řádka <th> {table heading} políčko nadpisu <td> {table data} datové políčko 20
Příklad tabulky <table border="1"> <tr> <td>1. řádek, 1. sloupec</td> <td>1. řádek, 2. sloupec</td> </tr> <tr> <td>2. řádek, 1. sloupec</td> <td>2. řádek, 2. sloupec</td> </tr> </table> 1. řádek, 1. sloupec 1. řádek, 2. sloupec 2. řádek, 1. sloupec 2. řádek, 2. sloupec 21
22 Formát tabulky <table> border okraj cellspacing velikost mezer mezi buňkami cellpadding vzdálenost dat od okraje width šířka align zarovnání! [center right] bgcolor barva pozadí! 22
23 Atributy tabulky <tr>, <td>, <th> align vodorovné zarovnání [center right] valign svislé zarovnání [top bottom middle] bgcolor barva pozadí! <td>, <th> colspan spojení více sloupců rowspan spojení více řádek nowrap nezalamovat obsah buněk! 23
24 Rámy <frameset> deklarace rámů rows rozdělení okna na řádky a sloupce cols [* 200 20% 3*] <frame> definice rámů src zdrojový dokument rámu name jméno rámu <noframes> klienti nepodporující rámy 24
Příklad dokumentu s rámy <frameset cols="20%,*"> <frameset rows="*,120"> <frame name="obsah" src="obsah.html"> <frame name="logo" src="logo.html"> </frameset> <frame name="hlavni" src="titulni.html"> <noframes> Dokument pro klienty nepodporující rámy. <a href="obsah.html">obsah</a> </noframes> </frameset> 25
26 Úpravy rámů <frame> frameborder rámeček [yes no 0] scrolling noresize marginheight marginwidth přikáže, zakáže posouvání [yes no auto] znemožní změnu velikosti šířka okraje výška okraje 26
Odkazy na rámy <a target=> cílový rám [jméno _blank _self _parent _top] <base/> target href základ pro odkaz základní rám pro odkaz základ pro odkaz na dokument 27
28 Formuláře <form> <input/> <textarea> <select> formulář vstupní pole vstupní textová oblast menu 28
29 Formulář <form> action co se s daty formuláře provede method jak se to provede [get post] enctype jakého jsou data druhu target cílové okno <form enctype="application/form-data"> 29
Příklad formuláře <form action="mailto.php" method="post"> Jméno: <input type="text" name="jmeno"> E-mail: <input type="text" name="email"> Zpráva: <textarea name="zprava"></textarea> Stránky se mi: <input type="radio" name="libi" value="ano"> Líbí <input type="radio" name="libi" value="ne"> Nelíbí <input type="submit" value="odeslat"> </form> 30
31 Vstupy formulářů <input type=> TEXT, PASSWORD CHECKBOX RADIO HIDDEN FILE SUBMIT RESET jednoduchý, skrytý text zaškrtávací políčko přepínač skrytý prvek odeslání celého souboru tlačítko pro odeslání tlačítko pro vynulování 31
32 Atributy vstupů <input/> name value size maxlength checked disabled readonly identifikátor hodnota velikost vstupního pole maximální délka vstupu indikátor výběru prvek nelze vybrat prvek nelze změnit 32
33 Vstupní textová oblast <textarea> name identifikátor rows, cols počet řádků, sloupců wrap zalamování na konci řádku!! [off soft hard] <textarea wrap="hard"> Text, který se na začátku zobrazí ve vstupním poli. </textarea> 33
34 Výběrový seznam <select> name size multiple <option> value selected identifikátor položky velikost menu možnost vybrat více položek položka nabídky text odeslaný formulářem vybraná položka 34
XHTML Rozdíly XHTML 1.0 proti HTML 4.01: Značky a atributy jsou psány malými písmeny Nepárové značky musí být ukončeny: <br /> Hodnoty atributů jsou vždy obaleny uvozovkami Přepínače musí mít stejnojmennou hodnotu <area nohref="nohref"> Dokument musí být uvozen <?xml version="1.0"?> a správným <!DOCTYPE> 35
36 Závěr Literatura Stránky v HTML na WWW World wide web consortium (http://www.w3.org) HTML Reference Library (HomeSite) Jiří Kosek: HTML tvorba dokonalých WWW stránek Další studium dynamické prvky (JavaScript, PHP, databáze) moderní rysy (styly, XHTML) 36