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

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

Programování HTML stránek

Podobné prezentace


Prezentace na téma: "Programování HTML stránek"— Transkript prezentace:

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=„http://www.zsebenese.opava.cz“ 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>


Stáhnout ppt "Programování HTML stránek"

Podobné prezentace


Reklamy Google