pdfczeHTML slides

Značky HTML Jakub Vrána HTML–tvorné značky {hypertext markup language} záhlaví dokumentu název dokumentu tělo do...
0 downloads 222 Views 442KB Size
DOWNLOAD .PDF
Značky HTML Jakub Vrána

HTML–tvorné značky

{hypertext markup language} záhlaví dokumentu název dokumentu tělo dokumentu vložení metainformací

Základní tvar dokumentu

Název dokumentu Tělo dokumentu

Tělo dokumentu background bgcolor text link vlink alink

obrázek na pozadí ! barva pozadí ! barva obyčejného textu ! barva odkazu ! barva prohlédnutého odkazu ! barva aktivního odkazu ! [#rrggbb | jméno]

Metainformace http-equiv doplnění informace v hlavičce name jméno content obsah

HTML entity < > &  

< (menší než) > (větší než) & (ampersand) (pevná mezera)

komentáře

Stránkotvorné značky

{paragraph}
{line break} {horizontal rule} - {heading} {anchor}

odstavec zlom řádku vodorovná čára nadpis odkaz

Formát odstavce

zarovnání ! [right | center | justify]
vyčištění okolí ! [all | left | right] vycentrování ! naformátovaný text kontejner na objekty kontejner na text citace

Vodorovná čára size width align noshade

tloušťka ! šířka na obrazovce ! zarovnání ! potlačení stínování !

Odkaz href name title accesskey

odkaz na dokumenty vytvoření částí dokumentu nápovědný text přístupová klávesa [x]

odkaz

Formátování Fyzické × Logické size color face

přímá úprava písma ! velikost písma [ 1–7] barva [#rrggbb | jméno] řez písma

základní nastavení písma !

Fyzické formátování

{bold} {italic} {underline} {superscript} {subscript} {teletype}

tučné písmo kurzíva podtržení ! horní index dolní index pevná šířka znaku

Logické formátování

{emphasized} zvýraznění silné zvýraznění ukázka kódu vstup z klávesnice

Seznamy



  • {unordered list} {ordered list} {list item} {definition list} {definition term} {def. description}

    nesetříděný seznam setříděný seznam položka seznamu seznam definic pojem vysvětlující text

    Příklad seznamu
      • První položka
    • První položka
      • • Druhá položka
    • Druhá položka 1. První vnořená položka
    • První vnořená položka
      • 2. Druhá vnořená
    • Druhá vnořená položka
      • položka


    Atributy seznamů
      type

      podoba značky ! [circle, disc, square]

      type start

      podoba značky ! [1 | i | I | a | A] číslování od !

    • value

      číslování od této značky dále !

      Obrázky 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 indikace obrázku s klikou deklarace oblastí definice oblasti shape coords href nohref alt

      tvar [rect | circle | polygon] souřadnice odkaz v dané oblasti není odkaz pomocný text

      Příklad obrázku s klikou

      Tabulky tabulka {table row} řádka
      {table heading} políčko nadpisu {table data} datové políčko

      Příklad tabulky 1. řádek, 1. sloupec
      1. řádek, 1. sloupec 1. řádek, 2. sloupec
      2. řádek, 1. sloupec 2. řádek, 2. sloupec
      2. řádek, 1. sloupec

      1. řádek, 2. sloupec 2. řádek, 2. sloupec

      Formát tabulky border cellspacing cellpadding width align bgcolor

      okraj velikost mezer mezi buňkami vzdálenost dat od okraje šířka zarovnání ! [center | right] barva pozadí !

      Atributy tabulky ,
      , align vodorovné zarovnání [center | right] valign svislé zarovnání [top | bottom | middle] bgcolor barva pozadí !

      		, colspan spojení více sloupců rowspan spojení více řádek nowrap nezalamovat obsah buněk !

      Rámy deklarace rámů rows cols

      src name

      rozdělení okna na řádky a sloupce [* | 200 | 20% | 3*]

      definice rámů zdrojový dokument rámu jméno rámu

      klienti nepodporující rámy

      Příklad dokumentu s rámy Dokument pro klienty nepodporující rámy. Obsah

      Úpravy rámů frameborder scrolling noresize marginheight marginwidth

      rámeček [yes | no | 0] přikáže, zakáže posouvání [yes | no | auto] znemožní změnu velikosti šířka okraje výška okraje

      Odkazy na rámy cílový rám [jméno |

      _blank | _self | _parent | _top]

      target href

      základ pro odkaz základní rám pro odkaz základ pro odkaz na dokument

      Formuláře

      formulář vstupní pole vstupní textová oblast menu

      Formulář action method enctype target

      co se s daty formuláře provede jak se to provede [get | post] jakého jsou data druhu cílové okno



      Příklad formuláře Jméno: E-mail: Zpráva: Stránky se mi: Líbí Nelíbí



      Vstupy formulářů 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ů 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 name identifikátor rows, cols počet řádků, sloupců wrap zalamování na konci řádku !! [off | soft | hard] Text, který se na začátku zobrazí ve vstupním poli.

      Výběrový seznam name size multiple

      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:
      • Hodnoty atributů jsou vždy obaleny uvozovkami • Přepínače musí mít stejnojmennou hodnotu • Dokument musí být uvozen a správným

      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)

      Značky HTML Jakub Vrána

      1

      1

      HTML–tvorné značky

      {hypertext markup language} záhlaví dokumentu název dokumentu tělo dokumentu vložení metainformací

      2

      2

      Základní tvar dokumentu

      Název dokumentu Tělo dokumentu 3

      3

      Tělo dokumentu background bgcolor text link vlink alink

      obrázek na pozadí ! barva pozadí ! barva obyčejného textu ! barva odkazu ! barva prohlédnutého odkazu ! barva aktivního odkazu ! [#rrggbb | jméno] 4

      4

      Metainformace http-equiv doplnění informace v hlavičce name jméno content obsah

      5

      5

      HTML entity < > &  

      < (menší než) > (větší než) & (ampersand) (pevná mezera)

      komentáře

      6

      Stránkotvorné značky

      {paragraph}
      {line break} {horizontal rule} - {heading} {anchor}

      odstavec zlom řádku vodorovná čára nadpis odkaz

      7

      7

      Formát odstavce

      zarovnání ! [right | center | justify]
      vyčištění okolí ! [all | left | right] vycentrování ! naformátovaný text kontejner na objekty kontejner na text citace 8

      Vodorovná čára size width align noshade

      tloušťka ! šířka na obrazovce ! zarovnání ! potlačení stínování !

      9

      Odkaz href name title accesskey

      odkaz na dokumenty vytvoření částí dokumentu nápovědný text přístupová klávesa [x]

      odkaz 10

      Formátování Fyzické × Logické size color face

      přímá úprava písma ! velikost písma [ 1–7] barva [#rrggbb | jméno] řez písma

      základní nastavení písma ! 11

      Fyzické formátování

      {bold} {italic} {underline} {superscript} {subscript} {teletype}

      tučné písmo kurzíva podtržení ! horní index dolní index pevná šířka znaku

      12

      Logické formátování

      {emphasized} zvýraznění silné zvýraznění ukázka kódu vstup z klávesnice

      13

      Seznamy



      • {unordered list} {ordered list} {list item} {definition list} {definition term} {def. description}

        nesetříděný seznam setříděný seznam položka seznamu seznam definic pojem vysvětlující text

        14

        Příklad seznamu
          • První položka
        • První položka
          • • Druhá položka
        • Druhá položka 1. První vnořená položka
        • První vnořená položka
          • 2. Druhá vnořená
        • Druhá vnořená položka
          • položka
        15

        Atributy seznamů
          type

          podoba značky ! [circle, disc, square]

          type start

          podoba značky ! [1 | i | I | a | A] číslování od !

        • value

          číslování od této značky dále ! 16

          Obrázky 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 !

          17

          Obrázky s klikou indikace obrázku s klikou deklarace oblastí definice oblasti shape coords href nohref alt

          tvar [rect | circle | polygon] souřadnice odkaz v dané oblasti není odkaz pomocný text 18

          Příklad obrázku s klikou

          19

          Tabulky tabulka {table row} řádka
          {table heading} políčko nadpisu {table data} datové políčko

          20

          Příklad tabulky 1. řádek, 1. sloupec
          1. řádek, 1. sloupec 1. řádek, 2. sloupec
          2. řádek, 1. sloupec 2. řádek, 2. sloupec
          2. řádek, 1. sloupec

          1. řádek, 2. sloupec 2. řádek, 2. sloupec 21

          Formát tabulky border cellspacing cellpadding width align bgcolor

          okraj velikost mezer mezi buňkami vzdálenost dat od okraje šířka zarovnání ! [center | right] barva pozadí !

          22

          22

          Atributy tabulky ,
          , align vodorovné zarovnání [center | right] valign svislé zarovnání [top | bottom | middle] bgcolor barva pozadí !

          		, colspan spojení více sloupců rowspan spojení více řádek nowrap nezalamovat obsah buněk ! 23

          23

          Rámy deklarace rámů rows cols

          src name

          rozdělení okna na řádky a sloupce [* | 200 | 20% | 3*]

          definice rámů zdrojový dokument rámu jméno rámu

          klienti nepodporující rámy 24

          24

          Příklad dokumentu s rámy Dokument pro klienty nepodporující rámy. Obsah 25

          Úpravy rámů frameborder scrolling noresize marginheight marginwidth

          rámeček [yes | no | 0] přikáže, zakáže posouvání [yes | no | auto] znemožní změnu velikosti šířka okraje výška okraje

          26

          26

          Odkazy na rámy cílový rám [jméno |

          _blank | _self | _parent | _top]

          target href

          základ pro odkaz základní rám pro odkaz základ pro odkaz na dokument

          27

          Formuláře

          formulář vstupní pole vstupní textová oblast menu

          28

          28

          Formulář action method enctype target

          co se s daty formuláře provede jak se to provede [get | post] jakého jsou data druhu cílové okno



          29

          29

          Příklad formuláře Jméno: E-mail: Zpráva: Stránky se mi: Líbí Nelíbí

          30

          Vstupy formulářů 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

          31

          Atributy vstupů 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

          32

          Vstupní textová oblast name identifikátor rows, cols počet řádků, sloupců wrap zalamování na konci řádku !! [off | soft | hard] Text, který se na začátku zobrazí ve vstupním poli. 33

          33

          Výběrový seznam name size multiple

          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

          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:
          • Hodnoty atributů jsou vždy obaleny uvozovkami • Přepínače musí mít stejnojmennou hodnotu • Dokument musí být uvozen a správným 35

          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

          36