HTML

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

HTML je jazykom webu. Existuju tri hlavne typy zdrojoveho kodu HTML-dokumentu:

Elementy
Parametre
Hodnoty

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" />

HTML a XHTML a ich verzie

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:

HTML je jedno, ci pouzijeme elementy html, head a body a s nimi deklaraciu DOCTYPE.
XHTML elementy html, head a body a s nimi deklaraciu DOCTYPE vyzaduje ako povinne.
HTML umoznuje nejaky tagy neukoncit, XHTML trva na uzavreti vsetkych elementov! ( />
HTML umoznuje vypustit uvodzovky okolo hodnot parametrov, ktore obsahuju ina pismena, cislice a 4 jednoduche symboly (- . _ :).
XHTML tieto uvodzovky bezpodmienecne vyzaduje.
XHTML vyzaduje, aby sa vsetky elementy, parametre a preddefinovane hodnoty pisali malymi pismenami, HTML je to jedno.
HTML umoznuje, aby ste uplne vypustili nazov hodnoty parametru, pokial je totozny s nazvom parametru, XHTLM trva na uvedeni aj takejto hodnoty parametru.

Typ (verzia) dokumentu HTML - DOCTYPE

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):

striktna (angl. strict) - tato varianta je odporucana W3-Konzorciom
prechodna (angl. transitional)
s ramami (angl. frameset)

Na zaciatku HTML dokumentu moze, XHTML dokumentu musi byt definicia DOCTYPE. Deklaracie mozete najst tu: Odkaz na deklaracie z W3C.

Deklaracia striktnej verzie XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Deklaracia prechodnej verzie XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Deklaracia verzie XHTLM s ramcekni

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Vytvarame XHTML dokument

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

Titulok stranky

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.

Nadpisy

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 1

Nasledujuci text...

Nadpis 2

Nasledujuci text...

Nadpis 3

Nasledujuci text...

Nadpis 4

Nasledujuci text...

Nadpis 5

Nasledujuci text...

Nadpis 6

Nasledujuci text...

Odstavce

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

Tag	Popis	DTD
<!--...-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area />
<b>
<base />
<basefont />
<bdo>
<big>
<blockquote>
<body>
<br />
<button>
<caption>
<center>
<cite>
<code>
<col />
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame />
<frameset>
<h1 to h6>
<head>
<hr />
<html>
<i>
<iframe>
<img />
<input />
<ins>
<isindex>
<kbd>
<label>
<legend>
<li>
<link />
<map>
<menu>
<meta />
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<param />
<p>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>
<xmp>

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)