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 Opera Safari Google Chrome textový dokument s příponou html htm
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
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>
Atributy zapisují se do tagu nastavují vlastnosti hodnota atributu se zapisuje do uvozovek <font size=„4“ color=„red“ face=„verdana“> … </font>
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
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>
<. 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>
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
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
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: 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
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>
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>
<font> size … velikost písma od 1 do 7 color … barva písma, buď slovně nebo #kód face … druh písma (font) </font>
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
Seznamy odrážkové: <ul> … </ul> type: disc(puntík), circle(kolečko), square(čtverec) <li> položka </li>
čí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
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
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>
Odkazy <a> … </a> href … adresa odkazu name … jméno záložky target … způsob zobrazení „_blanc“ (nové okno)
<a href=„http://www. zsebenese. opava <a href=„http://www.zsebenese.opava.cz“ target=„_blanc“> WEB ŠKOLY </a> <a href=„mailto:salamon@opava.cz“> EMAIL </a> <a href=„ #1“>Název odkazu</a> … <a name=„1“>První slovo textu</a>… text pokračuje
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“>
Obrázek jako odkaz <a href="obrazek.jpg" target="_blanc"> <img src="obrazek_maly.jpg" border="5" alt="Příroda" align="right"> </a>