ECONNECT - HyperText Markup Language (HTML)

HyperText Markup Language

Pavel Jisl (xpj@cetoraz.net, www.cetoraz.net)

Obsah

Úvod
Základní struktura dokumentu
Sekce <HEAD>
Sekce <BODY>
Zápis barev
Úprava textu

Fyzické značky
Logické značky

Seznamy a výčty
Odkazy a skoky
Obrázky a "mapy s klikou"
Neviditelné tagy
Rámce
Tabulky
Formuláře
Kaskádová definice stylů (CSS)

Použité jednotky
Parametry písma
Barvy a pozadí
Parametry textu
Parametry obdélníků, reprezentujících elementy
Vlastnosti zobrazení

Novinky normy HTML 4.0

Nové příkazy
Příkazy, které by se neměly používat
Příkazy, které se nemají používat

Úvod

HTML se používá k tvorbě webovských stránek na Internetu. Jedná se vlastně o několik speciálních značek, které se vpisují do textového souboru a ovlivňují vzhled stránky. Je důležité si uvědomit, že konečný vzhled stránky tvoří WWW Browser (dále jen klient). V tomto dokumentu jsou popsány základní příkazy jazyka HTML verze 3.2, na konci jsou popsány nové příkazy a změny v jazyce HTML 4.0. Některé změny jsou popsány i v textu, hlavně, které příkazy se nemají dále používat.

Vývojem jazyka HTML se zabývá W3C konsorcium (World Wide Web Consorcium), ale původní HTML 1.0 bylo vytvořeno v CERNu pro publikování vědeckých zpráv na Internetu. Druhá verze jazyka byla uvedena v roce 1995 a pravděpodobně nejprůlomovější verze 3.2 v roce 1996 už pod hlavičkou W3C. Na adrese konsorcia (www.w3c.org) je jinak mnoho dokumentů a specifikací, které jsou docela zajímavé (HTML 3.2, HTML 4.0, CSS 1, CSS 2, grafický formát PNG nebo nový XML - eXtensive Markup Language, možná nástupce HTML).

Vlastní příkazy HTML jsou značky, které mají obecný tvar <příkaz> a </příkaz>.Tvar s lomítkem zakončuje blok, začatý tvarem bez lomítka. Existují ale také příkazy, které nemají ukončovací tvar.

Základní struktura dokumentu

Každý HTML dokument má tuto základní strukturu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD> Začátek hlavičky dokumentu

<TITLE> Titulek, který se objeví v titulku okna klienta

</TITLE>

</HEAD> Konec hlavičky dokumentu

<BODY> Začátek vlastního těla dokumentu

... vlastní obsah stránky ...

</BODY> Konec těla dokumentu

</HTML>

Většina klientů zvládá dokumenty bez <HTML> a </HTML> , ale je slušností je uvádět.

Od specifikace HTML verze 3.2 musí dokument začínat příkazem <!DOCTYPE>, který rozlišuje nové dokumenty verze 3.2 (nebo novější) od starších. Ve verzi 4.0 je funkce tohoto příkazu rozšířena a má jednu z těchto tří podob:

HTML 4.0 Strict DTD - dokumenty, používající pouze příkazy z verze 4.0, nepoužívají se příkazy, které by se neměly používat a neobsahuje rámce. Pro tento dokument by příkaz vypadal takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

HTML 4.0 Transitional DTD - obsahuje všechny příkazy z jazyka 4.0 plus příkazy, které by se neměly používat. Řekl bych, že tato podoba je nejvhodnější pro většinu dokumentů, které neobsahují rámce. Příkaz by vypadal:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

HTML 4.0 Frameset DTD- obsahuje všechno z HTML 4.0 Transitional DTD a rámce. Příkaz by vypadal takto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

Nové rozšíření je URL adresa na DTD (document type declaration), které umožňuje browseru stáhnout deklaraci tohoto typu. Deklarace podporované konsorciem W3C jsou tyto:

http://www.w3c.org/TR/REC-html40/strict.dtd	standardní Strict DTD
http://www.w3c.org/TR/REC-html40/loose.dtd	používá se pro Transitional DTD
http://www.w3c.org/TR/REC-html40/frameset.dtd	DTD pro dokumenty s rámcemi
http://www.w3c.org/TR/REC-html40/HTMLlat1.ent	znaky a symboly z kódové stránky Latin 1
http://www.w3c.org/TR/REC-html40/HTMLsymbol.ent	různé znaky a symboly
http://www.w3c.org/TR/REC-html40/HTMLspecial.ent	speciální znaky a symboly

Sekce <HEAD>

Sekce <HEAD> se uvádí hned na začátku dokumentu. Obsahuje několik tagů, které se využívají pro zjednodušení a zpříjemnění práce s HTML dokumentem. V sekci <HEAD> můžeme použít následující tagy:

<TITLE> text </TITLE> - definuje název dokumentu, který se objeví v titulku okna klienta, povinný příkaz, který je vyžadován specifikací HTML 3.2
<ISINDEX> - pro jednodušší vyhledávání slov
<BASE> - definuje základní URL adresu pro vyhodnocení relativní URL adresy, má tento atribut:
- >href="URL adresa"
<SCRIPT> - rezervováno pro užití se skriptovacími jazyky (např. JavaScript), viz. neviditelné tagy
<STYLE> - rezervováno pro užití se styly <META> - užito pro META informace, využitelné pro vyhledáče (search engines), možné atributy:
- NAME="klíčové-slovo" - určuje, co zde bude za informace, za klíčové slovo se může doplnit:
  - keywords - což určuje, že atribut CONTENT bude obsahovat klíčová slova pro vyhledávání
  - description - atribut CONTENT bude obsahovat stručný popis stránky
- CONTENT="text"- samotný text
Jak to vlastně použít. Například pro tuto stránku by mohl tag <META> obsahovat toto (doporučuje se používat angličtinu):
<META NAME="keywords" CONTENT="html specification czech">
a pro popis by mohl obsahovat zase toto:
<META NAME="description" CONTENT="HTML-specification in czech language">
<LINK> - užito pro definování spojení s dalšími dokumenty

Sekce <BODY>

V sekci <BODY> lze specifikovat některé parametry pro celý dokument. Jedná se například o barvy pozadí, textu, odkazů nebo o obrázky na pozadí stránky. K tomu se používají tyto parametry:

BGCOLOR="barva" - specifikuje barvu pozadí (jak se barvy zapisují, viz. níže)
TEXT="barva"- specifikuje barvu textu
LINK="barva"- specifikuje barvu nenavštíveného odkazu
VLINK="barva"- specifikuje barvu navštíveného odkazu
ALINK="barva"- specifikuje barvu odkazu v momentu, když na něj uživatel kliká
BACKGROUND="zdroj" - specifikuje URL obrázku, který bude na pozadí dokumentu (zápis viz. odkazy nebo obrázky), doporučuje se délka do 5 Kb, aby načítání netrvalo moc dlouho

Například:
<BODY bgcolor="black" text="#CC11FF" background="pozadi.jpg">

Zápis barev

Barvy se zapisují jako hexadecimální hodnota (např. COLOR="#C012FF"} nebo jako jméno jedné z šestnácti předdefinovaných barev:

barva a hexa-zápis	česky
Black="#000000"	(černá)
Green="#008000"	(zelená)
Silver="#C0C0C0"	(stříbrná)
Lime="#00FF00"	(světle zelená)
Gray="#808080"	(šedivá)
Olive="#808000"	(olivová hněď)
White="#FFFFFF"	(bílá)
Yellow="#FFFF00"	(žlutá)
Maroon="#800000"	(tmavě červená)
Navy="#000080"	(tmavě modrá)
Red="#FF0000"	(červená)
Blue="#0000FF"	(modrá)
Purple="#800080"	(fialová)
Teal="#008080"	(taková zelená)
Fuchsia="#FF00FF"	(světle fialová)
Aqua="#00FFFF"	(modrá jako voda)

Zápis barev hexadecimálně se provádí zápisem #RRGGBB, kde RR je hodnota pro červenou složku, GG pro zelenou složku a BB pro modrou složku.

Úprava textu

<Hx> text </Hx> - tyto párové značky určují velikost textu, většinou se používají na nadpisy. Číslo x je z intervalu 1 až 6, kdy 1 je největší velikost písma. Může se použít parametr:

ALIGN=
- LEFT
- RIGHT
- CENTER
<FONT> text </FONT> - určuje použitý font a jeho parametry. Atributy:
- SIZE=n - velikost písma, n je celé číslo od 1 do 7, standardně 3, parametrem může být také např. číslo +2, což znamená, že se použije velikost o dvě větší než standardní
- COLOR="barva"- určuje barvu písmen použitého fontu
- FACE="název_fontu, název_náhradního_fontu, další_náhradní_font, ... " (jen Internet Explorer a Netscape 3+) určuje jaký řez fontu se má použít, browser vybere první z řady fontů, který je dostupný.
  Příklad:
  <font face="Times New Roman, MS Sans Serif, Arial CE">Text bude zobrazen nejakym z vypsanych fontu fontem</font>
Místo tohoto tagu však doporučujeme používat Kaskádové styly.
<BASEFONT> - slouží k nastavení základní velikosti fontu, která je užita v celém dokumentu. Ukončovací forma se nepoužívá. Má jeden parametr:
- SIZE=n - kde n je v mezi 1 a 7
<P> - začátek nového odstavce (může, ale nemusí být ukončeno příkazem </P>)
- ALIGN= - zarovnání odstavce k:
  - levé ("LEFT") straně
  - pravé ("RIGHT") straně
  - na střed ("CENTER")
<BR> - začátek nového řádku
<HR> - vykreslí horizontální řádku přes celou šíři okna klienta. Atributy:
- WIDTH=xx - šířka v pixelech/procentech (%)
- ALIGN=... -zarovnání k
  - levé ("LEFT") straně
  - pravé ("RIGHT") straně
- SIZE=n -tloušťka čáry v pixelech
- NOSHADE - při použití - plné čáry, jinak stínované, plastické
<BLOCKQUOTE> text </BLOCKQUOTE> - text se zvýrazní a zvětší se okraje, tyto bloky se dají vnořovat.
<PRE> text </PRE> - text se zobrazí přesně tak, jak byl napsán (konce řádek, mezery)

Dále máme značky, které nám říkají, jakým typem písma se má text napsat. Tyto značky můžeme rozdělit na fyzické a logické. Fyzické přesně říkají klientovi, jak má text zobrazit, logické mu oznamují, jak by měl text zobrazit. Doporučuje se používat spíše logické značky.

Fyzické značky:

<B> text </B> - tučné písmo
<I> text </I> - kurzívou
<U> text </U> - podtržení, nedoporučuje se používat, protože by se pletlo z odkazy
<TT> text </TT> - neproporciálním písmem
<S> text </S> - přeškrtne text

Logické značky:

<EM> text </EM> - text se zvýrazní (doporučeno kurzívou)
<STRONG> text </STRONG> - text se silně zvýrazní (doporuč. tučně)
<BIG> text </BIG> - vypíše text větším písmem
<SMALL> text </SMALL> - vypíše text menším písmem (opak příkazu <BIG>)
<STRIKE> text </STRIKE> - text se přeškrtne
<CODE> text </CODE> - zdrojový kód (psací stroj - neproporciálně?)
<CITE> text </CITE> - citace (doporuč. kurzívou)
<KBD> text </KBD> - vstup z klávesnice
<ADDRESS> text </ADDRESS> - adresa
<XMP> výpis </XMP> - vypíše přesný obsah textu (i s příkazy HTML) , podobné příkazu <PRE> (Norma HTML 4.0 nedoporučuje tento příkaz používat!, místo toho se má použít příkaz <PRE>)
<LISTING> výpis </LISTING> - podobné příkazu <PRE> (Norma HTML 4.0 nedoporučuje tento příkaz používat!, místo toho se má použít příkaz <PRE>)
<PLAINTEXT> výpis </PLAINTEXT> - podobné příkazu <PRE> (Norma HTML 4.0 nedoporučuje tento příkaz používat!, místo toho se má použít příkaz <PRE>)
<SUB> text </SUB> - text bude napsán jako dolní index
<SUP> text </SUP> - text bude napsán jako horní index
<CENTER> text </CENTER> - specialita HTML 3, vše, co je mezi těmito značkami se vycentruje (texty, obrázky, odkazy, tabulky, formuláře, ...)
<BLINK> text </BLINK> - způsobuje blikání textu

Do textu se dají dále vkládat některé symboly:

©	copyrightová značka	© nebo ©
®	symbol reg. ochr. Známky	® nebo ®
&	ampersand	& nebo &
>	větší než	> nebo >
<	menší než	< nebo <
"	dvojitá uvozovka	" nebo "
	nezalamovatelná mezera	nebo

Seznamy a výčty

Seznam definic, který je vhodný pro slovníky používá tyto značky:
- <DL> seznam </DL> - omezovače seznamu definic
- <DT> - uvádí definici (neukončuje se značkou </DT> !)
- <DD> - výklad definice (opět bez </DD> !)
Neuspořádaný seznam začíná grafickým znakem (např. černý puntík). Charakteristickým rysem je zvětšený levý okraj.
- <UL> seznam </UL> - omezovače seznamu. HTML 3 zavádí u značky <UL> atribut TYPE, který určuje, čím bude seznam uvozen. Nabývá hodnot
  - "DISC"(černý puntík, implicitní)
  - "CIRCLE"(prázdné kolečko)
  - "SQUARE"(čtvereček)
- <LI> - položka seznamu
Uspořádaný seznam je to číslovaný seznam, hodící se např. na pracovní postupy.
- <OL> seznam </OL> - omezovač číslovaného seznamu.
  - TYPE=x - určuje číslování položek. Může mít tyto hodnoty:
    - 1 - arabské číslice - implicitní
    - A - velká písmena angl. abecedy
    - a - malá písmena angl. abecedy
    - I - velké římské číslice
    - i - malé římské číslice
  - START=x - od jakého čísla se má číslovat
- <LI> - položka seznamu

Existují ještě další seznamy (např. MENU a DIR), ale jsou velmi málo používané a chovají se jako nečíslovaný seznam <UL>.

Odkazy a skoky

<A HREF="cílové URL"> odkaz </A>

Toto je schéma odkazu (Anchor). HREF určuje, kam bude odkaz směřovat. Může být absolutní (celá cesta i s typem přístupové metody a adresou serveru) nebo relativní (bez specifikace serveru, je relativní buď k aktuálnímu dokumentu nebo k aktuálnímu serveru). Odkazem může být text nebo obrázek.

Cílovým URL mohou být tyto typy:

<A HREF="http://..."> - link na dokument na WWW serveru
<A HREF="ftp://..."> - link na ftp server, většinou anonymní
<A HREF="gopher://..."> - link na gopher server
<A HREF="mailto:..."> - aktivuje klientův e-mailový dialog, pro zaslání zprávy tomu, jehož adresa následuje za mailto: (např. pro e-mail na mě by tam bylo: <HREF="mailto:xpj@cetoraz.net">)
<A HREF="news:..."> - link na newsgroup
<A HREF="newsrc:..."> - link na určitý newsrc soubor
<A HREF="nntp://..."> - může být použito pro specifikaci jiného news serveru (???)
<A HREF="telnet://..."> - inicializuje telnet (externí aplikaci)
<A HREF="wais://..."> - link pro spojení se specifikovaným WAIS indexovým serverem

Dále můžeme použít tohoto odkazu ke skoku na určitou pozici v HTML dokumentu. To se provede jednoduše tak, že na místo kam chceme skočit vložíme následující příkaz:

<A NAME="jmeno"></A>

(může se použít i bez koncového </A>) a na místo, odkud chceme skákat, vložíme standardní odkaz:

<A HREF="#jmeno"> text nebo obrázek </A> Obrázky a "mapy s klikou"

Dají se vkládat obrázky GIF a JPG, doporučuje se délka do 20 kB, aby se zrychlilo načítání. Ikonky pro odkazy mají délku kolem 2 - 5 kB.

<IMG atributy>

Nepárová značka, která má mnoho atributů:

SCR="zdroj" - určuje, kde se obrázek nalézá
LOWSRC="zdroj" - (jen u Netscape) určuje obrázek s nižším rozlišením, který je nahrán dříve než obrázek určený parametrem SRC, po načtení celého dokumentu je načten obrázek určený parametrem SRC, slouží k urychlení načtení stránky
ALT="text" - alternativní text, pokud se obrázek nedá zobrazit
HEIGH=výška
WIDTH=šířka - obě hodnoty jsouv pixelech a určují plochu (zrychlí se zobrazování, protože klient rezervuje pro obrázek plochu)
ALIGN=
- left - obrázek umístěn k levému okraji
- right - obrázek umístěn k pravému okraji
- top - obrázek umístěn k vrcholu nejvyššího prvku v řádce
- texttop - obrázek umístěn k nejvyššímu textu v řádce
- middle - střed obrázku na středu dané řádky
- absmiddle - střed obrázku na absolutním středu řádky
- baseline - spodní hrana obrázku se kryje se základnou dané řádky
- bottom - stejně jako baseline
- absbottom - spodní hrana obrázku se kryje se spodní hranou dané řádky
Parametr ALIGN slouží hlavně pro určení, jak má text obrázek obtékat, protože jinak se obrázek formátuje jako text. Pro vycentrování obrázku se pak musí použít příkaz <CENTER>
BORDER=x - určuje velikost rámečku okolo obrázku v pixelech, standardně je 0 (pokud se nepoužije). Pokud však je obrázek uvnitř hypertextového odkazu, nakreslí se kolem něj rámeček, pokud se tímto parametrem nenastaví jeho šířka na 0
HSPACE=x
VSPACE=x - tyto dva parametry určují, o kolik bodů se mají okraje obrázku odsadit od okolního textu nebo objektů
USEMAP="#jméno" - označuje, že obrázek bude použit jako mapa, viz. Níže.

Pokud je použit parametr usemap="#jméno", pak bude obrázek použit jako mapa, ve které jsou aktivní plochy, fungující jako tlačítka ke skoku do jiných dokumentů. Parametrem atributu usemap je jméno MAPy, která určuje aktivní oblasti.

Mapa se označuje párovými značkami <MAP> a </MAP>, která má pouze jeden parametr:

NAME="jméno"- jméno mapy, určuje, ke kterému obrázku mapa patří

Jednotlivé aktivní oblasti mapy se označují tagem <AREA>, který má tyto parametry:

SHAPE="tvar" - označuje tvar aktivní plochy, možné tvary:
RECT - čtverec nebo obdélník
CIRCLE - kolečko
POLY - polynom
COORDS="souřadnice" - souřadnice použitého tvaru, vymezující aktivní oblast, možné použití souřadnic je:
- shape=rect coords="x1,y1,x2,y2", kde [x1,y1] jsou souřadnice levého horního rohu a [x2,y2] pravého dolního rohu
- shape=circle coords="x,y,r", kde [x,y] jsou souřadnice středu a r je poloměr
- shape=poly coords="x1,y1,x2,y2,..." - souřadnice se počítají od levého horního rohu obrázku a jsou k němu absolutní, mohou se ale použít i souřadnice zadané procenty.
HREF="cílové URL" - určuje, kam se bude skákat
NOHREF - pokud oblast nemá žádný skok (je neaktivní)
ALT="text" - alternativní text, který se zobrazuje při najetí na region v informačním pruhu, nebo je pro klienty, kteří neumí obrázky zobrazovat, velmi se doporučuje používat !!!

Jak se tedy tento aktivně-klikačně-odskakovací obrázek vytvoří, zde je příklad:

<img src="navig.jpg" border="0" usemap="#mapa1"> <map name="mapa1"> <area href=index.htm alt="skok na index" shape=rect coords="0,0,100,30"> <area href=autor.htm alt="neco o autoru" shape=circle coords="150,40,30"> <area href=nabidka.htm alt="nabidka produktu" shape=poly coords="200,0,250,100,400,20,450,120"> </map>

Pro jednodušší nadefinování oblastí byly vytvořeny utilitky, které jsou většinou šířeny jako shareware nebo freeware. Je to například program MapEdit ( www.boutell.com/mapedit ).

Neviditelné tagy

V HTML dokumentech se dále mohou vyskytovat tagy, které nejsou v dokumentu viditelné, ale mají (menší nebo větší) vliv na jeho chování. Jsou to například tyto tagy:

 - tento tag se používá jako poznámka a nemá vliv na zobrazení dokumentu. Dále se používá ke skrytí nových tagů pro starší prohlížeče, které nemají např. zabudovanou normu HTML 3.2

Vkložení JAVA apletu:

<APPLET> - tento tag slouží k připojení Javovského appletu k HTML dokumentu a je podporován všemi klienty, kteří podporují Javu. Tento tag je párový a má tyto atributy:

CODEBASE="zdrojové URL" - volitelný parametr, určující, kde se applet nachází. Pokud není tento atribut použit, použije se URL dokumentu.
CODE="jméno"- tento vyžadovaný atribut určuje jméno souboru, který obsahuje zkompilované podtřídy aplety. Je vždy relativní k zdrojovému URL a nemůže být absolutní.
ALT="text" - specifikuje alternativní text pro klienty, kteří mají zabudovaný tag APPLET, ale nemohou spouštět Javovské applety.
NAME="jméno"- určuje jméno appletu, které slouží pro komunikaci mezi dalšími applety zahrnutých do stránky.
WIDTH=xxx - určuje šířku zobrazovacího okna appletu
HEIGHT=xxx - určuje výšku zobrazovacího okna appletu
ALIGN="jak"- vyžadovaný atribut, který určuje zarovnání appletu. Možné hodnoty:
- LEFT
- RIGHT
- TOP
- TEXTTOP
- MIDDLE
- ABSMIDDLE
- BASELINE
- BOTTOM
- ABSBOTTOM
VSPACE=xxx - určuje počet pixelů nad a pod appletem
HSPACE=xxx - určuje počet pixelů na každé straně appletu

K tagu <APPLET> ještě patří tag <PARAM>, který slouží k předávání parametrů appletu (až v normě HTML 4.0). Používá se s tímto formátem:

<PARAM NAME=appletParameterVALUE=value>

Applet potom čte tyto parametry příkazem getParameter().

A dále tu je něco jednoduššího, JavaScript:

<SCRIPT> - tento tag se používá při zápisu zdrojového textu JavaScriptu přímo do dokumentu HTML. Musí se použít v sekci <HEAD>. Tento tag může mít atribut LANGUAGE="jméno", kde jméno je např. JavaScript pro JavaScript (pravděpodobně je to pro příští rozšiřování možností, že by bylo třeba více scriptových jazyků). Dále se doporučuje zdrojový kód JavaScriptu skrýt mezi poznámkový tag (, aby nemátl starší klienty.

Takto nějak vypadá velmi jednoduchý HTML dokument s JavaScriptem:

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> Vse v pohode ... </BODY> </HTML>

Ještě k JavaScriptu: Netscape Navigator verze 2.0+ rozšířil možnosti formulářů o práci s JavaScripty, takže příkazy formulářů mohou mít tento formát:

<TAG eventHandler="JavaScript Code">

například: v JavaScriptu máme napsanou funkci compute a chceme, aby Navigátor spustil tuto funkci po stisku čudlíku. Takto by vypadala definice čudlíku:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"> Rámce

Myšlenka rámů spočívá v rozdělení obrazovky klienta na několik částí tak, aby v každém vzniklém okně mohl být jiný dokument nebo po vybrání odkazu v jednom okně by se v jiném zobrazil výsledek. Rámce nejsou obsaženy v normě HTML v 3.2, ale až od verze 4.0. Většina (grafických) browserů je ale již podporuje.

Tvorba rámů se dělí do dvou částí:

V první části se definuje hlavní stránka s jednotlivými rámy. Jde o HTML dokument, pouze kromě příkazu <BODY> se použije <FRAMESET> a </FRAMESET>. Uvniř jsou povoleny pouze definice rámů, obyčejný text se nesmí vyskytnout. Parametry u příkazu <FRAMESET> definují rozdělení dokumentu - ROWS udává počet řádků a COLS počet sloupců.

Například:
<FRAMESET ROWS="velikost 1. okna,velikost 2. okna,...."> <FRAMESET COLS="velikost 1. sloupce, velikost 2.sloupce,...">
Velikost mohou být zadány buď v procentech (50%) nebo pixelech. Pokud se použije *, udává to zbytek velikosti okna, pokud dvě *, zbývající část okna se rozdělí na půlku.

Příkaz <FRAMESET> může obsahovat další parametry (u Netscape Navigatoru):
- BORDER=x - určuje šířku rámečku ohraničujících rámce v pixelech
- BORDERCOLOR=barva - udává barvu rámečku
- FRAMEBORDER - udává, jestli jsou rámce ohraničeny rámečky, povolené hodnoty:
  - YES
  - NO
Okna jsou zde definována pomocí příkazu <FRAME>, který má další parametry:
- NAME - nepovinný atribut, udává jméno pro odkaz z jiné části dokumentu
- SCROLLING - nepovinný atribut, říká, zda bude mít rám rolovací lišty, povolené hodnoty jsou:
  - YES
  - NO
  - AUTO (implicitní)
- SRC - cesta k zobrazovanému dokumentu
- MARGINWIDTH=x - parametr určující vertikální mezeru uvnitř rámce (mezi rámečkem a jeho dokumentem)
- MARGINHEIGHT=x - parametr určující horizontální mezeru uvnitř rámce (mezi rámečkem a jeho dokumentem)
- FRAMEBORDER=x - určuje šířku rámečku, 0 znamená, že rámečkem nepůjde pohybovat
- NORESIZE - rámečkem nepůjde přesouvat
V druhé části se definují jednotlivé dokumenty, na které se odkazujeme v první části. Jsou to standardní dokumenty bez <TITLE>, který je nastaven v hlavní stránce.

Je slušné stránku obsahující rámy doplnit textem pro "nerámové" klienty. K tomu se používají značky <NOFRAMES> a </NOFRAMES>. Vše co je v těchto příkazech, zobrazuje "nerámový" klient na místě, kde jsou rámy.

Dokumenty popř. obrázky se do rámců nahrávají pomocí tagu <A HREF=““ TARGER=“jmeno_ramce“>, kde za parametr TARGET se vkládá jméno rámce, do kterého se má dokument nahrát. Toto jmého se specifikuje parametrem NAME v tagu <FRAME>. Browsery mají dále vyhražena další jména, které určují, do jakého okna se má dokument nahrát. Možné varianty:
- _blank - dokument se nahraje do nového okna prohlížeče
- _self - dokument se nahraje do stejného okna, ze kterého byl volán (odkaz sám na sebe)
- _parent - dokument se nahraje do okna, které obsahuje okno, ze kterého byl dokument zavolán (tj. okno výše v hierarchii oken)
- _top - dokument se nahraje do okna, které je v hierarchii úplně nejvýše (tj. hlavní okno prohlížeče)

Tabulky

Dříve bylo možno uspořádat text do tabulek jen pomocí příkazu <PRE>, a to pouze neproporciálně písmem Courier. Bylo to složité, zdlouhavé a ne moc pěkné. Nyní se používá příkaz <TABLE> a </TABLE>.

Kostra tabulky:

<TABLE> <TR> <TD> 1. radek, 1. policko </TD> <TD> 1. radek, 2. policko </TD> <TD> 1. radek, 3. policko </TD> </TR> <TD> 2. radek, 1. policko </TD> <TD> 2. radek, 2. policko </TD> <TD> 2. radek, 3. policko </TD> </TR> ... </TABLE>

<TABLE> - Začátek tabulky, atributy:
- BORDER=n - určuje šířku rámečku, čím je n větší, tím je rámeček tlustší
- WIDTH=xx - tabulka bude vždy široká xx pixelů nebo xx %.
- ALIGN="jak"- zarovnání tabulky vůči oknu klienta
- CELLSPACING=xx - definuje mezery mezi políčky v tabulce
- CELLPADDING=xx - definuje mezeru v políčku
- BACKGROUND="zdroj" - specifikuje URL obrázku, který bude na pozadí tabulky (zápis viz. odkazy nebo obrázky)
<TR> text </TR> - začátek nového řádku, lze použít atribut:
- HALIGN=x - zarovnání v horizontálním směru
- VALIGN=x - zarovnání ve vertikálním směru
- ALIGN=x - zarovnání ve všech směrech
- BACKGROUND="zdroj" - specifikuje URL obrázku, který bude na pozadí celé řádky (zápis viz. odkazy nebo obrázky)
<TD> text </TD> - nové políčko, lze použít tyto atributy:
- HALIGN= - zarovnání v horizontálním směru, známé parametry
  - LEFT
  - RIGHT
  - CENTER.
- VALIGN= - zarovnání v vertikálním směru, může nabývat hodnot
  - TOP
  - BOTTOM.
- ROWSPAN=n - kde n znamená, přes kolik řádek bude políčko vysoké
- COLSPAN=n - kde n znamená, přes kolik sloupců bude políčko dlouhé
- NOWRAP - zakazuje dělení slov v políčku
- WIDTH=n - určuje šířku políčka
- HEIGHT=n - určuje výšku políčka BACKGROUND="zdroj" - specifikuje URL obrázku, který bude na pozadí políčka (zápis viz. odkazy nebo obrázky)
<TH> text </TH> - políčko s nadpisem, lze použít stejné atributy jako u <TD>
<CAPTION> titulek </CAPTION> - jméno tabulky, píše se hned za <TABLE>, může se použít atribut
- ALIGN s parametry
  - TOP
  - BOTTOM

Formuláře

Formuláře se používají pro komunikaci uživatele se serverem, kdy uživatel vyplňuje do polí své požadavky, údaje apod. a server podle toho reaguje. Klasické využití je jako dotazník na informace o uživateli. Formulář se definuje pomocí dvojice tagů <FORM> a </FORM>, přičemž může mít tyto atributy:

ACTION="akce"- specifikuje URL, které přijímá poslaný formulář. Může to být HTTP server nebo Mail-To URL. Mail-To URL umožňuje poslat vyplněný formulář přes e-mail, např. takto: action="mailto:xpj@cetoraz.net".
METHOD="metoda" - specifikuje, jakou HTTP-metodou bude formulář HTTP serveru poslán, možné hodnoty jsou:
- GET - standard
- POST
ENCTYPE="typ"- určuje mechanismus kódování obsahu formuláře, standardně je to řetězec "application/x-www-form-urlencoded"

Pokud máme nadefinovanou hlavičku formuláře, můžeme začít do něj vkládat jednotlivé komponenty. K tomu slouží tyto tagy:

<INPUT> - používá se pro pole jako input-lajny, pole na vkládání hesel, checkboxy, radiobuttons, posílací a resetovací tlačítko, skrytá pole nebo pole na uploadování souborů. Možné atributy jsou:
- TYPE="typ" - určuje typ pole, možné hodnoty jsou:
  - text - standardní, používá se ke vkládání jednoho řádku textu, počet viditelných znaků může být určen atributem size, celkový počet znaků může být omezen atributem maxlength, atribut name je použit jako jméno pole a value atribut může být použit k hodnotě, která se bude standardně objevovat.
  - password - ke vkládání hesla, vkládané znaky se interpretují jako "*", opět se zde mohou použít atributy size a maxlength jako u pole text
  - checkbox - používá se k určení Booleanovské hodnoty (ano/ne) nebo jako atribut, který může nabývat více hodnot. Různé checkboxy jsou reprezentovány stejným jménem v atributu name a různými hodnotami v atributu value. Každý zaškrtnutý checkbox generuje rozdělené jméno nebo hodnotu v posílaných datech. Atribut checked může být použit k určení startovací hodnoty checkboxu a to k zaškrtnutí
  - radio - používá se k určení jedné hodnoty z několika variant. Každý radiobutton ve skupině musí mít stejný atribut name a vyžaduje se atribut value, ve kterém se určuje posílaná hodnota a pouze jeden radiobutton ze skupiny ji generuje. Jeden radiobutton ze skupiny by měl být při inicializaci označen atributem checked
  - submit - slouží k odeslání obsahu formuláře k serveru. Text použitý na čudlíku se definuje atributem value, pokud je použit atribut name, jeho jméno bude vloženo do posílaných dat.
  - image - používá se jako posílací tlačítko (type="submit"), ale místo textu se použije obrázek. Zdrojové URL obrázku se definuje atributem scr a zarovnání atributem align, což je stejné jako u obrázků. Atributy name a value mají stejné vlastnosti jako u textového čudlíku submit.
  - reset - používá se k vymazání formuláře a nastavení inicializačních hodnot. Jméno se nastavuje atributem value.
  - file - slouží k připojení souboru do obsahu formuláře. Většinou je renderován klientem jako textové pole s čudlíkem, sloužícím k vyhledávání souborů.
  - hidden - toto pole není zobrazováno a využívá se pro servery jako informace o obsahu formuláře.
- NAME="jméno"- definuje jméno, které bude použito k identifikování obsahu pole po odeslání k serveru
- VALUE="hodnota" - užívá se k inicializování hodnoty pole nebo jako text k posílacímu nebo resetovacímu tlačítku
- CHECKED - nastavuje u checkboxů nebo radiobuttonů označený stav
- SIZE="délka"- nastavuje viditelnou délku textových polí (ve znacích)
- MAXLENGTH="délka" - nastavuje maximální počet vložitelných znaků do textových polí
- SRC="zdrojové URL" - specifikuje URL obrázku o grafického posílacího tlačítka
- ALIGN="jak"- určuje zarovnání obrázku, stejné jako u obrázků
<SELECT> - slouží k definování menu, kde se vybírá buď jedna položka z více položek nebo více položek z více položek. Používá se v párové formě <SELECT> a </SELECT> a mezi ně se vkládá tag <OPTION>, kterým se definují jednotlivé položky. Tag <SELECT> může mít tyto atributy:
- NAME="jméno"- specifikuje jméno, které bude použito k identifikování volby z menu při odeslání formuláře k serveru. Každá označená volba bude vložena do obsahu odesílaného formuláře.
- SIZE="délka"- nastavuje počet viditelných znaků pro menu pro výběr více položek z více položek.
- MULTIPLE - nastavuje menu pro výběr více položek z více položek, pokud se nepoužije, užije se menu pro výběr jedné položky z více položek
<OPTION> - tento tag se používá k definování jednotlivých položek menu a může mít tyto atributy:
- SELECTED - položka bude při startu označena, u menu pro výběr jedné položky z více položek se smí použít pouze jednou!!
- VALUE="hodnota" - specifikuje hodnotu, která bude použita při odesílání obsahu formuláře, pokud se za tagem <OPTION> neuvede text, který se bude zobrazovat v menu, bude se zobrazovat tato hodnota.
<TEXTAREA> - užívá se ke vkládání několika řádek textu. Používá se v párové formě a mezi počátečním a ukončovacím tagem může být text, který se bude objevovat při inicializaci. Možné atributy jsou:
- NAME="jméno" - definuje jméno, které bude identifikovat toto pole při odeslání obsahu formuláře
- ROWS="řádek" - definuje počet viditelných řádek
- COLS="sloupců" - definuje počet viditelných sloupců

Kaskádová definice stylů (CSS)

Kaskádová definice stylů byla zavedena pro zjednodušení práce s designem stránek, kdy se oddělí obsah dokumentu od jeho designu. S jejich pomocí můžeme ovlivňovat to, jak budou vypadat jednotlivé textové prvky dokumentu.

Nejdříve si změníme vlastnost nějakého konkrétního prvku, například nadpisu o největší velikosti:

STRONG {color : blue; font-family : Times New Roman, Arial CE, sans-serif; font-size: 28pt}

Tímto zápisem jsme změnili barvu, typ písma a velikost nadpisu. Nyní je nutné tyto vlastnosti zakomponovat do stránky. Existují čtyři způsoby, které se přebíjí od nižší váhy po vyšší, zde jsou uvedeny všechny od nižší váhy:

odkaz - styly jsou nadefinovány ve zvláštním souboru s příponou .css a jsou vloženy do dokumentu příkazem <link>. Takto nadefinované styly se dají použít pro jednotný vzhled celé soustavy stránek
vložení - styly jsou nadefinovány v dokumentu příkazem <STYLE>. Tyto styly se pak použijí pouze v tomto jediném dokumentu
blok - určuje styly pro určitý blok textu, definuje se příkazem <DIV> nebo <SPAN>, je nutné uzavřít pomocí </DIV> popř. </SPAN>
příkaz - vkládá styly do určitého příkazu (např. <FONT> nebo <STRONG>) pomocí nového parametru STYLE

Popis výše použitých příkazů:

<LINK> - slouží ke vložení zvláštního souboru se styly do dokumentu, vkládá se za sekci <HEAD>, používá parametr:
- HREF=url - cesta k souboru
Příklad:

<head> <link rel=stylesheet href=mujstyl.css type="text/css"> </head>
<STYLE> - slouží pro vložení definice přímo do souboru, vkládá se podobně jako JavaScriptovský kód:
<HTML> <HEAD> </HEAD> <STYLE type="text/css">  </STYLE> <BODY> Vse v pohode ... </BODY> </HTML>
<DIV> - slouží pro změnu stylu celých odstavců, na konci bloku se musí použít </DIV>. Parametr:
- CLASS=text - udává jméno třídy, která se použije pro vykreslení dokumentu
<SPAN> - používá se obdobně jako příkaz <DIV>, ale slouží pro změnu stylu několika znaků nebo slov. Používá stejný parametr:
- CLASS=text - udává jméno třídy, která se použije pro vykreslení dokumentu
<libovolný příkaz>- slouží pro změnu stylu pouze pro použití v tomto příkazu, vhodné, pokud nechcete měnit styl celého dokumentu, ale pouze několika drobných součástí. Použije se tak, že do příkazu se doplní nový parametr style:
- STYLE="text"- hodonotou je to, co by bylo v definici stylu zapsáno ve složených závorkách. Atributy se oddělují středníkem a je nutné hodnotu parametru style uzavírat do uvozovek:
  
  příklad:
  
  <strong style="background-color: blue; font-size:28pt">Testik</strong>

Pro definici stylu se dále používají třídy. Ty umožňují u jednoho příkazu nadefinovat několik typů jeho chování. Dá se to ukázat na dokumentu FAQ. Zde jsou otázky a odpovědi, otázky jsou formátovány jinak než odpovědi a jsou vždy v novém odstavci. Proto si nadefinujeme dvě třídy od příkazu <P>, jednu nazveme otazka a druhou odpoved. Jejich definice se provede např. takto:

P.otazka {color: red; font-style: italic} P.odpoved {color: blue}

Ve vlastním dokumentu se to pak použije takto:

<p class=“otazka“>Jakto?</p> <p class=“odpoved“>Takto!</p>

Příkazy také mohou mít třídy předdefinované, nejviditelnější to je u příkazu <A>, zde jsou předdefinovány tyto třídy:

A:link A:visited A:active

Následuje soupis všech možných použitelných atributů, které přináší CSS. Některé z nich ale nemusí fungovat, protože ještě nejsou v prohlížečích naimplementovány. Nícméně většina hlavních již funguje (a to už je na světě specifikace CSS verze 2).

Použité jednotky:

Délkové jednotky - Délkové jednotky můžou být kladné nebo záporné (předchází je buď + nebo -, pokud nic, tak jsou kladné). Pokud se uvede číslo větší nebo menší než je přípustné, je použito nejbližší možné číslo. Délkové jednotky můžeme dále rozdělit na absolutní nebo relativní, které jsou vztaženy k jiným délkovým jednotkám. Následuje seznam přípon, které se zapisují za číselnou hodnotu (bez mezery!):
1. relativní:
  - em - relativní k velikosti fontu elementu, ve kterém je použito
  - ex - relativní k velikosti písmena x
  - px - pixely - velikost v bodech, které odpovídají bodům na zobrazovacím zařízení (obrazovka, tiskárna, ...)
2. absolutní ( používají se, pokud známe vlastnosti zobrazovacího zařízení)
  - in - palce (inches, 1 in = 2.54 cm)
  - cm - centimetry
  - mm - milimetry
  - pt - body (points, 1 pt = 1/72 in)
  - pc - piky (picas, 1pc = 12 pt)
Procenta - jednotky zadané jako procenta (číslo následnované znakem %) jsou vždy staženy k jiným jednotkám
Barvy - barvy se zadávají buď jako názvy barev, hexadecimální nebo decimální čísla.
- názvy barev: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
- hexadecimální hodnota- zapisuje se se znakem # následovaném hexadecimálním číslem. Zde jsou dvě možnosti, které jsou shodné:
  - #ff00ff
  - #f0f - rozvine se do předchozí podoby
- dekadické hodnoty - zapisují se jako hodnoty jednotlivých barev RGB, a to pomocí „funkce“ rgb v tomto formátu:
  - rgb(255, 0, 255)
  - rgb(300, 0, 0) - hodnota 300 je zmenšena na hodnotu 255
  - rgb(110%, 0, 10%) - hodnota 110% je zmenšena na hodntu 100%
URL - zadání adresy se provádí pomocí „funkce“ url(, následované adresou, která může (ale nemusí) být uzavřena v apostrofech nebo v uvozovkách. Adresa je relativní ke stylu, ale ne k dokumentu. Pokud se má v adrese objevit uvozovky, apostrof, čárka, mezera nebo závorky, musí být uvozeny backslashem (zpětné lomítko, např: ( nebo “).

Parametry písma:

font-family: [<family-name>, <generic-family>]
nastavuje určítému prvku rodiny písem, která bude použita. <generic-family> slouží pro nastavení standardní rodiny písma, nadefinovány jsou tyto:
- serif (např. Times)
- sans-serif(např. Helvetica)
- cursive (např. Zapf-Chancery)
- fantasy (např. Western)
- monospace(např. Courier)
Příklad použití: font-family: Arial, Verdana, sans-serif
font-style: [normal|italic|oblique]
slouží pro nastavení stylu písma mezi normálním, kurzívou a oblique (??) typem písma. Standardně nastaveno na normal
font-variant: [normal|small-caps]
nastavuje vlastnost, zda se malá písmena píší jako obvykle (normal) nebo zda se malá písma odvodí od velkých zmenou metriky (small-caps)
font-weight: [normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]
nastavuje váhu fontu (tučnost). Hodnoty jsou od 100 do 900, slovo normal odpovídá hodnotě 400, slovo bold hodnotě 700.
font-size: [<absolute-size> | <relative-size> | <length> | <percentage>]
určuje velikost písma
- <absolute-size> určuje absolutní velikost písma a možné hodnoty jsou: [xx-small | x-small | small | medium | large | x-large | xx-large], velikost medium je 10pt, velikost large by měl být 15pt (odstupňování faktorem 1.5)
- <relative-size> určuje relativní velikost písma k původní velikosti, možné hodnoty jsou [larger | smaller]
font: [[<font-style> | <font-variant> | <font-weight>][<font-size> [/<line-height>] <font-family>]
spojuje všechny vyjmenované vlastnosti do jednoho příkazu.

Barvy a pozadí:

color:
definuje barvu elementu, použitelné tvary zapsání viz. výše
background-color: [<color> | transparent]
nastavuje barvu pozadí elementu
background-image: [<url> | none]
nastavuje obrázek, který se zobrazí na pozadí elementu

Parametry textu:

word-spacing: [normal | <length>]
nastavuje velikost mezery mezi slovy, která se přičte ke standardní hodnotě
letter-spacing: [normal | <length>]
nastavuje velikost mezery mezi písmeny, která se přičte ke standardní hodnotě
text-decoration: [none | underline | overline | line-through | blink]
nastavuje vlastnosti textu:
- underline - podtržení
- overline - nadtžení
- line-through - přeškrtnutí
- blink - blikání
vertical-align: [baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>]
Nastavuje vertikální zarovnání elementu. Parametry:
- baseline - zarovná k vodící lince elementu nebo ke spodku elementu, pokud nemá vodící linku
- middle - zarvnání ke středu elementu (vodící linka + polovina xové výšky vlastníka)
- sub - zarovná ke spodku elementu (kde by byl dolní index)
- super - zarovnání k hořejšku elementu (kde by byl horní index)
- text-top - zarovnání vrcholu elementu k vrcholu původního fontu
- text-bottom - zarovnání spodku elementu ke spodku původního fontu
- top - zarovná vrchol elementu s nejvyšším elementem na řádce
- bottom - zarovná spodek elementu s nejnižším elementem na řádce
text-transform: [capitalize | uppercase | lowercase | none]
- capitalize - udělá každé první písmeno ve slově velkým
- uppercase - změní všechna malá písmena na velká
- lowercase - změní všechna velká písmena na malá
text-align: [left | right | center | justify]
označuje, jak má být text zarovnán vůči elementu
text-indent: [<length> | <percentage>]
udává odsazení prvního řádku odstavce
line-height: [normal | <number> | <length> | <percentage>]
udává vzdálenost mezi dvěmi následujícími vodícími linkami (tj. vzdálenost mezi řádky)

Parametry obdélníků, reprezentujících elementy:

margin-top: [<length> | <percentage> | auto]
nastavuje horní okraj elementu
margin-right: [<length> | <percentage> | auto]
nastavuje pravý okraj elementu
margin-bottom: [<length> | <percentage> | auto]
nastavuje spodní okraj elementu
margin-left: [<length> | <percentage> | auto]
nastavuje levý okraj elementu
margin: [<length> | <percentage> | auto]{1-4}
nastavuje souhrnně levý, pravý, horní a dolní okraj elementu, a to např. takto:
BODY { margin: 2em } - nastavuje všechny okraje na velikost 2em
BODY { margin: 1em 2em} - nastavuje horní a dolní okraj na 1em a levý a pravý na 2em
BODY { margin: 1em 2em 3em} - nastavuje horní okraj na 1em, pravý na 2em, dolní na 3em a levý na 2em

Pokud jsou zadány 4 hodnoty, označují tyto okraje (v tomto pořadí): horní, pravý, dolní, levy. Pokud je zadána pouze 1 hodnota, pak se na ní nastaví všechny okraje a pokud jsou zadány 2 nebo 3 hodnoty, chybějící hodnota je brána z protilehlé strany (levá ß> pravá nebo horní ß> dolní)
padding-top: [<length> | <percentage>]
nastavuje odstup mezi okrajem a obsahem elementu na vrchu
padding-right: [<length> | <percentage>]
nastavuje odstup mezi okrajem a obsahem elementu vpravo
padding-bottom: [<length> | <percentage>]
nastavuje odstup mezi okrajem a obsahem elementu na spodku
padding-left: [<length> | <percentage>]
nastavuje odstup mezi okrajem a obsahem elementu vlevo
padding: [<length> | <percentage>]{1-4}
nastavuje souhrnně všechny odstupy, které byly vyjmenovány (vrchní, pravý, dolní a levý). 5ídí se stejnými pravidly jako margin.
border-top-width: [thin | medium | thick | <length>]
nastavuje šířku okraje elementu na vrchu. Pro slovní vyjádření platí thin <= medium <= thick.
border-right-width: [thin | medium | thick | <length>]
nastavuje šířku okraje elementu vpravo
border-bottom-width: [thin | medium | thick | <length>]
nastavuje šířku okraje elementu na spodku
border-left-width: [thin | medium | thick | <length>]
nastavuje šířku okraje elementu vlevo
border-width: [thin | medium | thick | <length>]{1-4}
nastavuje souhrnně šířku okraje elemtu. Řídí se stejnými vlastnostmi jako margin.
border-color: [<color>]{1-4}
nastavuje barvu okraje, zadává se od jedné do čtyř hodnot, přiřazení jako u margin.
border-style: [none | dotted | dashed | solid | double | groove | ridge | inset | outset]
nastavuje typ okraje:
- none - není nakreslen žádný okraj
- dotted - okraj je tečkovaný
- dashed - okraj je čárkovaný
- solid - okraj je plná čára
- double - dvojitá čára
- groove - okraj je nakreslen jako 3D žlábek
- ridge - okraj je nakreslen jako 3D hřeben (vystouplý)
- inset - okraj je nakreslen plasticky vnořený
- outset - okraj je nakreslen plasticky vystouplý
border-top: [<border-top-width> | <border-style> | <color>]
nastavuje souhrnně šířku, typ a barvu okraje na vrcholu
border-right: [<border-right-width> | <border-style> | <color>]
nastavuje souhrnně šířku, typ a barvu okraje vpravo
border-bottom: [<border-bottom-width> | <border-style> | <color>]
nastavuje souhrnně šířku, typ a barvu okraje naspodku
border-left: [<border-left-width> | <border-style> | <color>]
nastavuje souhrnně šířku, typ a barvu okraje vlevo
border: [<border-width> | <border-style> | <color>]
nastavuje souhrnně stejnou šířku, typ a barvu všech okrajů
width: [<length> | <percentage> | auto]
nastavuje šířku elementu, používá se hlavně u textu, ale může se použít i pro obrázky, kdy se používá ke změně rozměrů
height: [<length> | <percentage> | auto]
nastavuje výšku elementu, používá se podobně jako width.
float: [left | right | none]
pokud je nastavena hodnota none, element je zobrazen tam, kde se zobrazí text. Pokud je nastavena hodnota left/right, element je přesunut vlevo/vpravo a text je kolem něj zarovnán v pravo/vlevo
clear: [none | left | right | both]
nastavuje, zda element umožňuje plavání (float) na svých stranách.

Vlastnosti zobrazení

display: [block | inline | list-item | none]
Popisuje, jak je element zobrazen
- block - zobrazení jako normální odstavec, příkladem jsou příkazy jako STRONG nebo P
- inline - vytvoří nový blok na řádku
- list-item - shodné jako block, ale je přidáno zobrazení prvku, typické pro příkaz LI
- none - vypne zobrazení
white-space: [normal | pre | nowrap]
nastavuje, jak jsou zobrazeny mezery
- normal - standardní cesta zobrazení mezer
- pre - předformátováno, použito jako v příkazu PRE
- nowrap - zarovnání se provádí pouze přes příkaz BR
list-style-type: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none]
nastavuje, jak se zobrazí označení v seznamu
- disc - puntík
- circle - kolečko
- square - čtvereček
- decimal - čísla
- lower-roman, upper-roman - malé nebo velké římské číslice
- lower-alpha, upper-alpha - malá nebo velká písmena
- none - bez ničeho
list-style-image: [<url> | none]
nastavuje obrázek, který se zobrazí v seznamu
list-style-position: [inside | outside]
nastavuje, jak se má zobrazit označení seznamu vzhledem k textu
list-style: [<keyword> | <position> | <url>]
nastavuje souhrnně vlastnosti pro list-style-type, list-style-image a list-style-position.

Novinky normy HTML 4.0

Norma 4.0 přinesla mnoho nového do jazyka HTML, hlavně co se týče lokalizací do různých jazyků. Doplnila k mnoha příkazům nové parametry, umožnila používání rámců a také zavedla nové příkazy. Hodně starých příkazů buď zakázala nebo jenom doporučila nepoužívat (dají se nahradit mechanismem CSS nebo nějak jinak). Zde je krátký přehled nových, nedoporučených a zakázaných příkazů.

Nové příkazy:

ABBR - definuje zkratky, příklad:

<ABBR lang=“cs“ title=“Organizace Spojenych Narodu“>OSN</ABBR> <ABBR title=“World Wide Web“>WWW</abbr>
ACRONYM - definuje akronyma, použití je podobné jako u příkazu <ABBR>
BDO - definuje oboustranné algoritmy (???)
BUTTON - má stejné využití jako tlačítko vytvořené příkazem
<INPUT>, ale umožňuje lepší využití, má i stejné atributy:
- NAME=“jméno“
- VALUE=“hodnota“
- TYPE=
  - submit - vytváří tlačítko, které posílá hodnoty k serveru, standardně použito, pokud není atribut TYPE definován
  - button - vytváří tlačítko
  - reset - vytváří tlačítko, které vymaže formulář
  Příklad:
  
  <FORM action=" " method="post"> <P> Komentar: <INPUT type="text" name="komentar"><BR> <BUTTON name="submit" value="submit" type="submit"> Posli<IMG src="send.gif" alt="posli"></BUTTON> <BUTTON name="reset" type="reset"> Vymaz<IMG src="reset.gif" alt="vymaz"></BUTTON> </P> </FORM>
COL - umožňuje spojovat do skupin atributy, použité pro sloupce, používá se většinou ve spojení s příkazem <COLGROUP>
COLGROUP - vytváří skupinu sloupců, jejichž počet je specifikován buď atributem SPAN nebo pomocí příkazuj <COL>
DEL - slouží pro vymazání určitých sekcí z dokumentu při změnách dokumentu (???)
FIELDSET - slouží pro tématické seskupování prvků ve formuláři.
FRAME - viz. Sekce Rámce
FRAMESET - viz. Sekce Rámce
IFRAME - slouží pro vkládání rámce do bloku textu. Tento text je zobrazen pouze u browserů, které nepodporují rámce nebo mají jejich podporu vypnutou
INS - slouží pro vložení určitých sekcí z dokumentu při změnách dokumentu (???)
LABEL - slouží pro vkládání popisu k prvkům ve formuláři.
LEGEND - slouží pro vkládání nadpisu k příkazu <FIELDSET>
NOFRAMES - viz. Sekce Rámce
NOSCRIPT - sekce, která se provede, pokud neproběhne skript zadaný v příkazu <SCRIPT>.
OBJECT - slouží pro práci s jazyky, jejichž podpora není v browseru naimplementovaná.
OPTGROUP - slouží pro seskupování příkazů <OPTION> ve formulářích.
PARAM - viz. Sekce Neviditelné tagy
S - sice nový příkaz, ale neměl by se používat. Slouží k přeškrtnutí textu
SPAN - slouží pro označování části textu. Tento text je pak upravován podle atributů ID a CLASS. Využití hlavně u CSS (viz. Sekce Styly)
TBODY - slouží k seskupování řádek v tabulce do těla tabulky
TFOOT - slouží k seskupování řádek v tabulce do patičky tabulky
THEAD - slouží k seskupování řádek v tabulce do hlavičky tabulky
Q - podobné použití jako příkaz <BLOCKQUOTE>, ale pouze pro kratší citace (v řádku), kdežto příkaz <BLOCKQUOTE> slouží pro celé odstavce

Příkazy, které by se neměly používat (možná je nebude obsahovat příští norma jazyka HTML)

APPLET - doporučuje se používat nový příkaz <OBJECT>
BASEFONT - doporučuje se používat CSS
FONT - doporučuje se používat CSS
CENTER - doporučuje se používat CSS
DIR - doporučuje se používat příkaz <UL>
ISINDEX - doporučuje se používat příkaz <INPUT>
MENU - doporučuje se používat příkaz <UL>
STRIKE - doporučuje se používat CSS
U - doporučuje se používat CSS

Příkazy, které se nemají používat(norma 4.0 je neobsahuje)

LISTING
PLAINTEXT
XMP

Místo těchto tří příkazů by se měl používat příkaz <PRE>.

HyperText Markup Language

Pro WWW autory

Služby Econnectu