Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


Prezentace na téma: "Programování HTML stránek Mgr. Rostislav Salamon 1."— Transkript prezentace:

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

2 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

3 Obsah HTML dokumentu běžný formátovaný text číslované a nečíslované seznamy odkazy ( hyperlink ) tabulky obrázky formuláře 3

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

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

6 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

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

8 Titulek html stránky Obsah html stránky. 8

9 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

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

11 další barvy v hexadecimálních kódech: #XXXXXX, X je číslice od 0 do F 11 Odkazy: #00FFFF=aqua;azurová#808080=gray;šedá#000080=navy;tmavě modrá#C0C0C0=silver;světle šedá #000000=black;černá#008000=green;zelená#808000=olive;olivová#008080=teal;modrozelená #0000FF=blue;modrá#00FF00=lime;světle zelená#800080=purple;fialová#FFFFFF=white;bílá #FF00FF=fuchsia;purpurová#800000=maroon;hnědá#FF0000=red;červená#FFFF00=yellow;žlutá

12 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 … … 12

13 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

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

15 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

16 Seznamy odrážkové: … type: disc(puntík), circle(kolečko), square(čtverec) položka 16

17 čí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

18 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

19 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

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

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

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

23 Obrázek jako odkaz 23


Stáhnout ppt "Programování HTML stránek Mgr. Rostislav Salamon 1."

Podobné prezentace


Reklamy Google