Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Programování HTML stránek
Mgr. Rostislav Salamon
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
3
Obsah HTML dokumentu běžný formátovaný text
číslované a nečíslované seznamy odkazy ( hyperlink ) tabulky obrázky formuláře
4
Tagy ( značky ) příkaz pro prohlížeč párový nepárový ( samostatný )
<html> … </html> <head> … </head> <body> … </body> nesmí se křížit – podobně jako závorky nepárový ( samostatný ) <br> <meta> <img> <hr>
5
Atributy zapisují se do tagu nastavují vlastnosti
hodnota atributu se zapisuje do uvozovek <font size=„4“ color=„red“ face=„verdana“> … </font>
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
7
Kostra dokumentu <html> <head> <title> TITULEK
hlavička HTML <head> <html> <head> <title> TITULEK </title> </head> <body> OBSAH WWW STRÁNKY </body> </html> tělo HTML <body>
8
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Language" content="cs"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Titulek html stránky</title> </head> <body> Obsah html stránky. </body> </html>
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
10
Barvy Zápis barvy: anglickým slovem RGB model: R – red (červená)
Zápis barvy: anglickým slovem RGB model: R – red (červená) G – green (zelená) 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
#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á Odkazy:
12
Formátování odstavce zalomení řádku … <br>
mezery ( více než jedna ) … (& … levé Alt+38) zalomení odstavce … <p> zarovnání textu: align=„left, center, right nebo justify“ centrování odstavce … <center> … </center> nadpisy … <h1 až h6> … </h1 až h6> běžící text … <marquee> … </marquee>
13
Formátování textu tučné písmo: <b> … </b>
kurzíva: <i> … </i> podtržené písmo: <u> … </u> přeškrtnuté písmo: <s> … </s> dolní index: <sub> … </sub> horní index: <sup> … </sup> větší písmo: <big> … </big> menší písmo: <small> … </small>
14
<font> size … velikost písma od 1 do 7 color … barva písma, buď slovně nebo #kód face … druh písma (font) </font>
15
Oddělovací čára vodorovná čára <hr>
width … šířka čáry v pixelech nebo v % size … tloušťka čáry 1 až 10 align … zarovnání: left, center, right color … barva čáry
16
Seznamy odrážkové: <ul> … </ul>
type: disc(puntík), circle(kolečko), square(čtverec) <li> položka </li>
17
číselné: <ol> … </ol>
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 <li> položka </li> value … číslo položky
18
Tabulky <table> … </table>
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
19
nový řádek tabulky … <tr> … </tr>
nová buňka na řádku … <td> … </td> 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 <table>
20
Odkazy <a> … </a> href … adresa odkazu
name … jméno záložky target … způsob zobrazení „_blanc“ (nové okno)
21
<a href=„http://www. zsebenese. opava
<a href=„ target=„_blanc“> WEB ŠKOLY </a> <a </a> <a href=„ #1“>Název odkazu</a> … <a name=„1“>První slovo textu</a>… text pokračuje
22
Obrázky <img> 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 <img src=„obrazek.gif“ border=„1“ alt=„Obrázek“ align=„right“>
23
Obrázek jako odkaz <a href="obrazek.jpg" target="_blanc">
<img src="obrazek_maly.jpg" border="5" alt="Příroda" align="right"> </a>
Podobné prezentace
