Značky HTML. Jakub Vrána

Transkript

1 Značky HTML Jakub Vrána

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í

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>

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]

5 <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 "> <meta name="description" content="...">

6 HTML entity < < (menší než) > > (větší než) & & (ampersand) (pevná mezera) <! > komentáře

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

8 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

9 Vodorovná čára <hr/> size tloušťka! width šířka na obrazovce! align zarovnání! noshade potlačení stínování!

10 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>

11 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!

12 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

13 Logické formátování <em> <strong> <code> <kbd> {emphasized} zvýraznění silné zvýraznění ukázka kódu vstup z klávesnice

14 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

15 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

16 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!

17 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!

18 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

19 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>

20 Tabulky <table> tabulka <tr> {table row} řádka <th> {table heading} políčko nadpisu <td> {table data} datové políčko

21 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

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í!

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!

24 Rámy <frameset> deklarace rámů rows rozdělení okna na řádky a sloupce cols [* % 3*] <frame> definice rámů src zdrojový dokument rámu name jméno rámu <noframes> klienti nepodporující rámy

25 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>

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

27 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

28 Formuláře <form> <input/> <textarea> <select> formulář vstupní pole vstupní textová oblast menu

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">

30 Příklad formuláře <form action="mailto.php" method="post"> Jméno: <input type="text" name="jmeno"> <input type="text" name=" "> 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>

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í

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

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>

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

35 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>

36 Závěr Literatura Stránky v HTML na WWW World wide web consortium ( 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)

37 1 Značky HTML Jakub Vrána 1

38 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

39 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

40 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

41 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 "> <meta name="description" content="..."> 5

42 < > & HTML entity < (menší než) > (větší než) & (ampersand) (pevná mezera) <! > komentáře 6

43 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

44 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

45 Vodorovná čára <hr/> size tloušťka! width šířka na obrazovce! align zarovnání! noshade potlačení stínování! 9

46 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

47 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

48 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

49 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

50 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

51 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

52 <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

53 <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

54 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

55 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

56 <table> <tr> {table row} Tabulky tabulka řádka <th> {table heading} políčko nadpisu <td> {table data} datové políčko 20

57 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

58 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

59 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

60 24 Rámy <frameset> deklarace rámů rows rozdělení okna na řádky a sloupce cols [* % 3*] <frame> definice rámů src zdrojový dokument rámu name jméno rámu <noframes> klienti nepodporující rámy 24

61 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

62 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

63 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

64 28 Formuláře <form> <input/> <textarea> <select> formulář vstupní pole vstupní textová oblast menu 28

65 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

66 Příklad formuláře <form action="mailto.php" method="post"> Jméno: <input type="text" name="jmeno"> <input type="text" name=" "> 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

67 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

68 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

69 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

70 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

71 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

72 36 Závěr Literatura Stránky v HTML na WWW World wide web consortium ( 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