HyperText Markup Languange
http://www.w3.org The World Wide Web Consortium (W3C)
http://www.w3schools.com W3Schools Online Web Tutorials
Elisabeth Castro: HTML, XHTML a CSS
ELEMENTY su drobne nazvy identifikujuce a strukturujuce rozne casti webstranky ako je hlavicka, odstavec, dolezita informacia. Elementy mozu mat jeden alebo viac PARAMETROV. Parametrom udelujeme HODNOTY
Elementy obsahuju text a/alebo ine elementy alebo su prazdne, pozostavaju z otvaracej znacky (angl. tag), parametrov, obsahu a uzatvaracej znacky (tagu). Znacky su uzavrete v ostrych zatvorkach.
Priklad: <h1>Nadpis</h1>
Prazdny element je taky, kde je otvaraci aj uzatvaraci element v jednom ohraniceni.
Priklad: <img src="vno.jpg" width="300" height="200" alt="vno" />
Existuje viac verzii jazyka HTML a jazyk XHTML. HTML 4 a XHTML 1.0 pouzivaju uplne tie iste elementy, ich syntax je vsak ina. Nie je mojim cielom analyzovat vyhody a nevyhody jednotlivych standardov jazyka HTML. Ja som si vybral striktnu verziu jazyka XHTML, dovodov je viacero, jeden z nich je, ze ked sa uz ucim cudzi jazyk, tak sa ho chcem naucit v cistej podobe, bez prizvukov, a dialektov...
Zakladne rozdiely medzi HTML 4 a XHTML 1.0 su tieto:
/>XTHML (dalej bude rec len o nej) striktne vyzaduje uvedenie typu dokumentu, v ktorom je dokument napisany. Existuju 3 verzie jazyka XHTML (ale aj HTML 4.0):
Na zaciatku HTML dokumentu moze, XHTML dokumentu musi byt definicia DOCTYPE. Deklaracie mozete najst tu: Odkaz na deklaracie z W3C.
Prazdny XHTML dokument striktnej verzie by mal vyzerat takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Text titulky stranky</title>
...
</head>
<body>
...
...
...
</body>
</html>
XHTML dokument sa zacina deklaraciou DOCTYPE ktoru som uz vysvetlil tu. Samotny dokument sa zacina tagom htlm (riadok 2), ktory konci uzatvaracim tagom /html (tu na riadku 9). Potom nasleduju dva zakladne elementy kazdej stranky: Hlavicka a Telo.
Hlavicka sa zacina tagom head, konci uzatvaracim tagom /head. Do hlavicky sa zapisuju nasledujuce udaje: deklaracia kodovania suboru v prazdnej znacke meta, odputucamu kodovanie UTF-8. Deklaracia titulky strany - obsahom znacky title (a uzatvaracou znackou /title). Titulka sranky sa pouzije napriklad na oznacenie okna prehliadaca.
Znacky <html> <head> <head> <body> </body> </html> su v XHTML povinne
V znacke <meta http-equiv="content-type" content="text/html; charset=kodovanie" /> sa nachadza deklaracia kodovania stranky. Kodovanie urcuje ako sa budu interpretovat znaky pouzite v subore. Zakladne kodovanie je kodovanie ASCII, ja odporucam pouzivat UTF-8
Je sucastou hlavicky stranky, jeho syntax je:<title>Text titulku</title>
Pouzitie tejto znacky je v XHTML povinne.
Je to dolezita sucast stranky, ktora sa pouziva napriklad vo vyhladavacich programoch alebo v prehliadaci v zozname poslednych navstivenych stranok a v oblubenych polozkach.
Nadpis - heading - maju znacku <h1>Nadpis</h1> az po <h6>Nadpis</h6>
jednotlive nadpisy urcuju logicku strukturu strany a roznym sposobom zväcsuju ci zmensuju pismo a riadkovanie textu pred a po nadpise. Text v lavom stlpici je napisany v zdrovojom kode stranky, v pravom stlpic je to, co sa na zaklade tohto zapisu zobrazi na stranke:
riadok pred nadpisom
<h1>Nadpis 1</h1>Nasledujuci text... <h2>Nadpis 2</h2>Nasledujuci text... <h3>Nadpis 3</h3>Nasledujuci text... <h4>Nadpis 4</h4>Nasledujuci text... <h5>Nadpis 5</h5>Nasledujuci text... <h6>Nadpis 6</h6>Nasledujuci text... |
riadok pred nadpisom
Nadpis 1Nasledujuci text...Nadpis 2Nasledujuci text...Nadpis 3Nasledujuci text...Nadpis 4Nasledujuci text...Nadpis 5Nasledujuci text...Nadpis 6Nasledujuci text... |
Odstavec - paragraph - ma znacku <p>, za nou nasleduje text odstavca a uzatvara ho uzatvaracia znacka </p>.
Toto je dalsi odstavec textu, vsimnite si ako prehliadac oddeluje jednotlive odstavce. text v odstavci, jeho zarovnanie, odsadenie prveho riadka, okraje ,pozadie a pod. sa formatuju pomocou stylov CSS.
Medzera medzi odstavcami je urcena proporcne podla velkosti textu.
| <em> | Emphasized text | </em> |
| Emphasized text | ||
| <b> | Bold text - tucne pismo | </b> |
| Bold text - tucne pismo | ||
| <big> | Big text | </big> |
| Big text | ||
| <small> | Small text | </small> |
| Small text | ||
| <small><small> | Small small text | </small></small> |
| Small small text | ||
| <i> | Italic text - kurziva | </i> |
| Italic text - kurziva | ||
| <strong> | Strong text | </strong> |
| Strong text | ||
| <dfn> | Definition term | </dfn> |
| Definition term | ||
| <code> | Computer code text | </code> |
Computer code text |
||
| <samp> | Sample computer code text | </samp> |
| Sample computer code text | ||
| <kbd> | Keyboard text | </kbd> |
| Keyboard text | ||
| <tt> | Tt text | </tt> |
| Tt text | ||
| <var> | Variable | </var> |
| Variable | ||
| <cite> | Citation | </cite> |
| Citation | ||
| <address> | peter.slovak@web.de | </address> |
| peter.slovak@web.de |
| ColorName | HEX | color |
|---|---|---|
| AliceBlue | RGB(240,248,255) | |
| AntiqueWhite | RGB(250,235,215) | |
| Aqua | RGB(0,255,255) | |
| Aquamarine | RGB(127,255,255) | |
| Azure | RGB(240,255,255) | |
| Beige | RGB(245,245,220) | |
| Bisque | RGB(255,228,196) | |
| Black | RGB(0,0,0) | |
| BlueViolet | RGB(138,43,226) | |
| Brown | RGB(165,42,42) | |
| BurlyWood | RGB(222,184,135) | |
| CadetBlue | RGB(95,158,160) | |
| Chartreuse | RGB(127,255,0) | |
| Chocolate | RGB(210,105,30) | |
| Coral | RGB(255,127,80) | |
| CornflowerBlue | RGB(100,149,237) | |
| Cornsilk | RGB(255,248,220) | |
| Crimson | RGB(220,20,60) | |
| Cyan | RGB(0,255,255) | |
| DarkBlue | RGB(0,0,139) | |
| DarkCyan | RGB(0,139,139) | |
| DarkGoldenRod | RGB(184,134,11) | |
| DarkGrey | RGB(169,169,169) | |
| DarkGreen | RGB(0,100,0) | |
| DarkKhaki | RGB(189,183,107) | |
| DarkMagenta | RGB(139,0,139) | |
| DarkOliveGreen | RGB(85,107,47) | |
| DarkOrange | RGB(255,140,0) | |
| DarkOrchid | RGB(153,50,204) | |
| DarkRed | RGB(139,0,0) | |
| DarkSalmon | RGB(233,150,122) | |
| DarkSeaGreen | RGB(143,188,143) | |
| DarkSlateBlue | RGB(72,61,139) | |
| DarkSlateGrey | RGB(47,79,79) | |
| DarkTurquoise | RGB(0,206,209) | |
| DarkViolet | RGB(148,0,211) | |
| DeepPink | RGB(255,20,147) | |
| DeepSkyBlue | RGB(0,191,255) | |
| DimGrey | RGB(105,105,105) | |
| DodgerBlue | RGB(30,144,255) | |
| FireBrick | RGB(178,34,34) | |
| FloralWhite | RGB(255,250,240) | |
| ForestGreen | RGB(34,139,34) | |
| Fuchsia | RGB(255,0,255) | |
| Gainsboro | RGB(220,220,220) | |
| GhostWhite | RGB(248,248,255) | |
| Gold | RGB(255,215,0) | |
| GoldenRod | RGB(218,165,32) | |
| Gray | RGB(128,128,128) | |
| Green | RGB(0,128,0) | |
| GreenYellow | RGB(173,255,47) | |
| HoneyDew | RGB(240,255,240) | |
| HotPink | RGB(255,105,180) | |
| IndianRed | RGB(205,92,92) | |
| Indigo | RGB(75,0,130) | |
| Ivory | RGB(255,255,240) | |
| Khaki | RGB(240,230,140) | |
| Lavender | RGB(230,230,250) | |
| LavenderBlush | RGB(255,240,245) | |
| LawnGreen | ||
| LemonChiffon | RGB(255,250,205) | |
| LightBlue | RGB(173,216,230) | |
| LightCoral | RGB(240,128,128) | |
| LightCyan | RGB(224,255,255) | |
| LightGoldenRodYellow | RGB(250,250,210) | |
| LightGrey | RGB(211,211,211) | |
| LightGreen | RGB(144,238,144) | |
| LightPink | RGB(255,182,193) | |
| LightSalmon | RGB(255,160,122) | |
| LightSeaGreen | RGB(32,178,170) | |
| LightSkyBlue | RGB(135,206,250) | |
| LightSlateGrey | RGB(119,136,153) | |
| LightSteelBlue | RGB(176,196,222) | |
| LightYellow | RGB(255,255,224) | |
| Lime | RGB(0,255,0) | |
| LimeGreen | RGB(50,205,50) | |
| Linen | RGB(250,240,230) | |
| Magenta | RGB(255,0,255) | |
| Maroon | RGB(128,0,0) | |
| MediumAquaMarine | RGB(102,205,170) | |
| MediumBlue | RGB(0,0,205) | |
| MediumOrchid | RGB(186,85,211) | |
| MediumPurple | RGB(147,112,216) | |
| MediumSeaGreen | RGB(60,179,113) | |
| MediumSlateBlue | RGB(123,104,238) | |
| MediumSpringGreen | RGB(0,250,154) | |
| MediumTurquoise | RGB(72,209,204) | |
| MediumVioletRed | RGB(199,21,133) | |
| MidnightBlue | RGB(25,25,112) | |
| MintCream | RGB(245,255,250) | |
| MistyRose | RGB(255,228,225) | |
| Moccasin | RGB(255,228,181) | |
| NavajoWhite | RGB(255,222,173) | |
| Navy | RGB(0,0,128) | |
| OldLace | RGB(253,245,230) | |
| Olive | RGB(128,128,0) | |
| OliveDrab | RGB(107,142,35) | |
| Orange | RGB(255,165,0) | |
| OrangeRed | RGB(255,69,0) | |
| Orchid | RGB(218,112,214) | |
| PaleGoldenRod | RGB(238,232,170) | |
| PaleGreen | RGB(152,251,152) | |
| PaleTurquoise | RGB(175,238,238) | |
| PaleVioletRed | RGB(216,112,147) | |
| PapayaWhip | RGB(255,239,213) | |
| PeachPuff | RGB(255,218,185) | |
| Peru | RGB(205,133,63) | |
| Pink | RGB(255,192,203) | |
| Plum | RGB(221,160,221) | |
| PowderBlue | RGB(176,224,230) | |
| Purple | RGB(128,0,128) | |
| Red | RGB(255,0,0) | |
| RosyBrown | RGB(188,143,143) | |
| RoyalBlue | RGB(4,22,144) | |
| SaddleBrown | :RGB(139,69,19) | |
| Salmon | RGB(250,128,114) | |
| SandyBrown | RGB(244,164,96) | |
| SeaGreen | RGB(46,139,87) | |
| SeaShell | RGB(255,245,238) | |
| Sienna | RGB(160,82,45) | |
| Silver | RGB(192,192,192) | |
| SkyBlue | RGB(135,206,235) | |
| SlateBlue | RGB(106,90,205) | |
| SlateGray | RGB(112,128,144) | |
| Snow | RGB(255,250,250) | |
| SpringGreen | RGB(0,255,127) | |
| SteelBlue | RGB(70,130,180) | |
| Tan | RGB(210,180,140) | |
| Teal | RGB(0,128,128) | |
| Thistle | RGB(216,191,216) | |
| Tomato | RGB(255,99,71) | |
| Turquoise | RGB(64,224,208) | |
| Violet | RGB(238,130,238) | |
| Wheat | RGB(245,222,179) | |
| White | RGB(255,255,255) | |
| WhiteSmoke | RGB(245,245,245) | |
| Yellow | RGB(255,255,0) | |
| YellowGreen | RGB(154,205,50) |