Programování HTML stránek Mgr. Rostislav Salamon HTML    Hyper Text MarkUp Language nadtextový značkový jazyk HTML dokument  je čitelný v internetovém prohlížeči  Internet Explorer  Mozilla Firefox 

Download Report

Transcript Programování HTML stránek Mgr. Rostislav Salamon HTML    Hyper Text MarkUp Language nadtextový značkový jazyk HTML dokument  je čitelný v internetovém prohlížeči  Internet Explorer  Mozilla Firefox 

Programování HTML stránek Mgr. Rostislav Salamon

1

HTML

   Hyper Text MarkUp Language nadtextový značkový jazyk HTML dokument  je čitelný v internetovém prohlížeči    Internet Explorer Mozilla Firefox Opera    Safari Google Chrome textový dokument s příponou  html  htm 2

Obsah HTML dokumentu

      běžný formátovaný text číslované a nečíslované seznamy odkazy ( hyperlink ) tabulky obrázky formuláře http://www.jakpsatweb.cz/html/ http://www.jakdelatweby.cz/html 3

Tagy ( značky )

   příkaz pro prohlížeč párový     … … … nesmí se křížit – podobně jako závorky nepárový ( samostatný )    

4

Atributy

   zapisují se do tagu nastavují vlastnosti hodnota atributu se zapisuje do uvozovek  … 5

 textový editor Poznámkový blok   chybně zapsané tagy jsou ignorovány některé tagy, atributy a jejich hodnoty mohou být různě zobrazovány v jednotlivých prohlížečích  index.html

6

Kostra dokumentu

          TITULEK OBSAH WWW STRÁNKY hlavička HTML tělo HTML 7

Titulek html stránky Obsah html stránky.

8

BODY

       párový tag background=„soubor“ … obrázek na pozadí bgcolor=„barva“ … barva pozadí text=„barva“ … barva textu pro celou stránku link=„barva“ … barva nenavštíveného odkazu alink=„barva“ … barva aktivovaného odkazu vlink=„barva“ … barva navštíveného odkazu 9

Barvy

Zápis barvy:  anglickým slovem  RGB model: o R – red (červená) o o G – green (zelená) B – blue (modrá) červená barva:  red  rgb(100%,0%,0%)  rgb(255,0,0)  #ff0000  #f00 10

další barvy v hexadecimálních kódech:

#XXXXXX

, X je číslice od 0 do F

#00FFFF=aqua ;azurová #000000=black ;černá #0000FF=blue ;modrá #FF00FF=fuchsia ;purpurová #808080=gray ;šedá #008000=green;zelená #00FF00=lime ;světle zelená #800000=maroon ;hnědá #000080=navy;tmavě modrá #C0C0C0=silver ;světle šedá #808000=olive ;olivová #800080=purple ;fialová #FF0000=red ;červená #008080=teal ;modrozelená #FFFFFF=white ;bílá #FFFF00=yellow ;žlutá Odkazy: http://interval.cz/clanky/paleta-bezpecnych-barev-pro-html-stranky/ http://www.jakpsatweb.cz/archiv/barvy-bezpecne.html

http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html

http://petrkle.wz.cz/barvy/ http://www.jakpsatweb.cz/archiv/barvy-zakladni.html

11

Formátování odstavce

      zalomení řádku …
mezery ( více než jedna ) …   (& … levé Alt+38) zalomení odstavce …

 zarovnání textu: align=„left, center, right nebo justify“ centrování odstavce …

…
nadpisy …

…

běžící text … < marquee> … 12

Formátování textu

        tučné písmo: … kurzíva: … podtržené písmo: … přeškrtnuté písmo: … dolní index: … horní index: … větší písmo: … menší písmo: … 13

   size … velikost písma od 1 do 7   color … barva písma, buď slovně nebo #kód face … druh písma (font) 14

Oddělovací čára

  vodorovná čára

  width … šířka čáry v pixelech nebo v % size … tloušťka čáry 1 až 10   align … zarovnání: left, center, right color … barva čáry 15

Seznamy

 odrážkové:

    …
 type: disc(puntík), circle(kolečko), square(čtverec) 
  • položka
    • 16

     číselné:

      …
     type: 1(arabská čísla), A(velká písmena), a(malá písmena), I(velká římská čísla), i(malá římská čísla)  start … nastavení počáteční hodnoty  
  • položka
    • value … číslo položky 17

    Tabulky

    …
            border … tloušťka rámečku tabulky bordercolor … barva rámečku tabulky width … šířka tabulky či sloupce v pixelech nebo % height … výška tabulky či řádku v pixelech nebo % bgcolor … barva pozadí tabulky, jinak je průhledná background … obrázek na pozadí tabulky cellspacing … vzdálenost mezi buňkami tabulky v pixelech cellpadding … vzdálenost textu od okraje buňky v pixelech 18

      nový řádek tabulky … … nová buňka na řádku … …   align … zarovnání svislé (left, right, center, justify) valign … zarovnání vodorovné (top, middle, bottom)    rowspan … sloučení více buněk ve sloupci do jedné buňky colspan … sloučení více buněk na řádku do jedné buňky + atributy používající se u tagu

    19

    Odkazy

    …  href … adresa odkazu   name … jméno záložky target … způsob zobrazení „_blanc“ (nové okno) 20

       WEB ŠKOLY EMAIL Název odkazu … První slovo textu… text pokračuje 21

    Obrázky

        src … cesta k obrázku, formáty: gif, jpg, png alt … alternativní text   align … zarovnání a obtékání textu kolem obrázku border … šířka rámečku kolem obrázku   width … šířka obrázku height … výška obrázku „Obrázek“ 22

    Obrázek jako odkaz

    Příroda 23