Úvod

V této práci je popisován standard při vytváření WWW stránek jazyk
HTML.. V první kapitole je uveden vývoj, který dospěl až k ustanovení
standartů
při vytváření WWW stránek a je rozebrán dosavadně platný standard při
vytváření
a to HTML verze 3.00, respektive HTML verze 3.2. Vývoj ovšem pokračuje a stále
nová rozšíření, která se objevují si vynutila ustanovení nového standardu HTML
v.
4.00. V tomto standardu byla přijata většina rozšíření firmy Microsoft a
některá
rozšíření firmy Netscape. Tímto standardem se zabývá druhá kapitola. Jsou zde
osvětleny nové elementy, které se ve HTML 4.00 objevují, a naopak je
upozorněno
na některé, které byly vypuštěny.

I.Standard HTML

I.I. Pravidla a syntaxe jazyka HTML

HTML je jazyk a jako takový má svoji přesnou syntaxi, kterou bychom při
vytváření WWW stránky měli dodržovat. Ovšem unikátnost tohoto jazyka je v tom,
že i když má daná přesná pravidla, v případě, že jsou ve zdrojovém textu
chyby,
prohlížeč je schopen je najít a rozpoznat, a dál si těchto částí nevšímat a
pracovat
pouze se „zdravými" částmi zdrojového textu. Uvádí se, že přes 90% WWW
stránek nějakým způsobem porušují pravidla syntaxe HTML, a přesto jsou
zobrazovány a prohlíženy.
Jazyk HTML vychází čistě z textové podoby svého zdrojového souboru, tzn.
WWW stránku lze vytvořit v jakémkoli textovém editoru, který je schopen
pracovat
s čistým ASCII textem. Čistým textem je myšlen text bez řídících a
formátovacích
značek textových editorů. Čistý text je načtem prohlížečem a je zobrazena WWW
stránka. Jednoduše řečeno jazyk HTML udává, co se má udělat, zobrazit, kde
,ale
neříká již jak. Toto je ponecháno na prohlížeči a na platformě, na které
pracuje. Z
toho vyplývá nenáročnost HTML na jakýkoli překladač či zvláštní software.
Celý jazyk HTML je postaven na definici TAGů a ODKAZů. Kombinací
těchto dvou jednoduchých elementů se dosáhne obdivuhodné pružnosti. Tagy
rozdělujeme na párové a na nepárové. Párový TAG vždy uvozuje určitý obsah a
tomuto přiřazuje nějakou vlastnost či hodnotu.

př. párového TAGU - <TAG> text </TAG>

Nepárové tagy umisťují do stránky jeden jediný element dále nedělitelný.

př. nepárového TAGU <TAG = „hodnota">

I.II. Základní části stránky

Výše bylo uvedeno, že jazyk HMTL má svoje pravidla pro psaní zdrojových
souborů. V této kapitole bude objasněno, jaká je struktua HTML souboru, jaké
části musí obsahovat a jaké by měl obsahovat.

Struktura stránky by mohla velmi jednoduše vypadat takto:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 3.2//EN">
toto je označení typu dokumentu a verze.
( v případě HTML 4.00 napsáno totožně pouze uvedena verze 4.0 viz kap.2
podkap1)

<HTML> počátek zdrojového souboru v jazyku HTML
<HEAD> hlavička stránky
<TITLE> název dokumentu </TITLE> hlavička - titulek okna v,
kterém bude stránka zobrazena
<META NAME=„POPIS" CONTENT=„CO JE V DOKUMENTU">
tzv. meta-informace - viz. dále
</HEAD> konec hlavičky HTML stránky

<BODY> vlastní tělo stránky - začátek

...... zde tělo stránky . obsah

</BODY> konec těla stránky
</HTML> konec zdrojového souboru jazyka HTML

Popis tagů použitých v základní struktuře zdrojového souboru:

tag HTML

párový tag ohraničující zdrojový text souboru. Tento tag je povinný, přesto ho
dokáže většina prohlížečů v případě, že není uveden ignorovat a chovat se jako
by
ve zdrojovém souboru byl.

tag HEAD

viz. tag HEAD v HTML 4.0

Párový tag, který vymezuje sekci ve které může být použito jeden až sedm
různých tagů. Tagy v sekci HEAD neslouží k zobrazování informací na stránce
(vyjímku tvoří tag TITLE), ale obsahují důležité údaje týkající se obsahu
stránky.
Které to jsou:

tag ISINDEX

Dnes již zastaralý element, který informoval o tom, že dokument je
indexován a je zde možnost využít vyhledávání již při zadávání URL adresy.

tag BASE

Nepovinný, určuje základní adresářovou cestu. Tzn., že v případě
rozsáhlé
WWW stránky , která obsahuje několik i desítek zdrojových souborů - zdrojů,
obrázků atd. pomocí tagu Base vytvoříme jakýsi kořenový adresář a všechny
následující odkazy se již vztahují k této cestě.

př. <BASE HREF="http://www.pf.jcu.cz/manual/main.html„>

potom můžeme použít odkaz :

<IMG SRC=„data/data.gif„>
což bude interpretováno jako: www.pf.jcu.cz/manual/data/data.html

tag SCRIPT

viz. tag SCRIPT v HTML 4.0

Tento tag je určen pro budoucí použití. (viz. část o HTML 4.0 tag SCRIPT)

tag STYLE

viz. CSS - Cascading Style Sheets

Tento tag je určen pro budoucí použití. (viz. část o HTML 4.0 tag STYLE)

tag META

viz. tag META v HTML 4.0

Tento tag může obsahovat nejrůznější parametry, které nelze sdělit přímo na
www
stránce. Slouží především ke sdělování informací programům běžícím na web
serveru , které se podle toho chovají.

syntaxe tagu META:

Typ informace:
pro NAME:

DESCRIPTION - informace o tom co lze na stránce nalézt.
např. <META NAME=„Description„ CONTENT=„Text o
html„>
KEYWORDS - určeno pro indexovací služby a jsou zde klíčovíá slova
např. <META NAME=„keywords„ CONTENT=„HTML, BODY,
TABLE, FRAMES„>
ROBOTS - řídí práci robotů, kteří mohou zpracovávat stránku.
např. <META NAME=„robots„ CONTENT=„NOINDEX„>
stránka nebude indexována.

pro HTTP-EQUIV:

REPLY-TO - udává E-mailovou adresu, pro posílání zpráv.
EXPIRES - udává časový údaj sdělující, kdy je dokument považován za zastaralý.
Může sloužit prohlížeči pro aktualizace či webovým robotům k odstranění
starých
dokumentů ze svých seznamů.
např. <META HTTP-EQUIV=„EXPIRES„ CONTENT=„FRI, 9
APR 1998 12:00:00 GMT „>
PRAGMA - řídí cacheování (u Netscape s hodnotou no-cache - bez cache na
lokální disk)
CONTENT-TYPE - sděluje znakovou sadu a typ obsahu stránky, protože některé
prohlížeče jsou schopny podle hodnoty charset nastavit pro správné zobrazení
příslušnou znakovou sadu.
např. <META HTTP-EQUIV=„CONTENT-TYPE„
CONTENT=„TEXT/HTML; CHARSET=ISO-2022-JP „>
CONTENT-LANGUAGE - sděluje jazyk, ve kterém je dokument vytvořen, má
především význam pro roboty a jejich kategorizaci stránek.
REFRESH - sděluje počet sekund , během kterých prohlížeč načte dokument
znovu.
PICS-LABEL - tzv. Platform-independent-content-rating-scheme - definování
obsahu stránky z hlediska škodlivosti pro věkové skupiny (sex, násilí atd.)
CACHE-CONTROL - určuje činnost cache agentů.

Vzhledem k velké šíři použití tagu META uvádím některé adresy, na kterých je
možné najít další informace.

http://www.w3.org/pub/WWW/designissues/metadata.html
http://www.stack.nl/~galactus/html/meta.html
http://www.stars.com/search/meta.html
http://www.hwg.org/faqs/metametafaq.html
http://www.erin.gov.au/www-standards/metainfo.html

tag LINK

Tento tag indikujevztah mezi aktuálním dokumentem a jinými dokumenty či
objekty v těchto dokumentech. Dnes patří již k nejstarším tagům.

tag TITLE

viz. tag TITLE v HTML 4.0

Tento tag obsahuje titulek okna, ve kterém bude zobrazena stránka.

např. <TITLE>Titulek okna</TITLE>

tag BGSOUND

- zvuk na pozadí WWW stránky

SRC udává zvuk. soubor ve formátu .wav, .au, .mid
LOOP kolikrát se soubor přehraje (implicitně jednou, je-li
hodnota LOOP=1 zvuk se přehrává do nekonečna)
TITLE pouze nápovědná informace o souboru

I.III. Část BODY - tělo stránky

tag BODY

viz. tag BODY v HTML 4.0

Tento tag uzavírá celé vlastní tělo stránky a definuje vlastnosti této
stránky.
Parametry:
BACKGROUND - definuje obrázek, který vyplní pozadí stránky. Musíse
jednat o obrázek v těchto formátech: GIF, JPG

př. <BODY BACKGROUND = „obrázek.jpg">

tělo stránky ....

</BODY>

BGCOLOR - určuje barvu vyplňující pozadí
TEXT - určuje barvu textu (implicitně černá)
LINK - barva ještě nenavštíveného odkazu
VLINK - barva navštíveného odkazu
ALINK - barva aktuálního odkazu, tj. odkazu na kterém právě stojí
ukazatel
myši
LEFTMARGIN - určuje kolik pixelů od levého okraje začíná vlastní stránka
Poznámka: Nefunguje v Netscape

TOPMARGIN - určuje kolik pixelů od horního okraje začíná zobrazení
stránky
Poznámka: Nefunguje v Netscape

BGPROPERTIES - slouží k ukotvení obrázku na pozadí, aby při rolování
obrazovky zůstal na svém místě.
př. bgproperties = fixed
Poznámka: Nefunguje v Netscape

tag H

Tag H slouží k definování nadpisů. V HTML je definováno šest úrovní nadpisů od
1 (nejvýraznější) až 6 (nejméně výrazný)
parametry - lze zde použít všechny tagy pro formátování textu.(viz. dále),
uvedu
pouze ALIGN.
ALIGN - zarovnání nadpisu.
Možné hodnoty jsou: LEFT, RIGHT, CENTER, JUSTIFY

tag BR

Nepárový tag, který způsobí zalomení konce řádku. Jestliže ve zdrojovém
souboru
HTML vytváříme při psaní textu, který se má zobrazit, řádky pomocí klávesy
ENTER nejsou tyto značky konce řádku při zobrazení internetovým prohlížečem
brány v úvahu. Pro ukončení řádku je nutné použít tento tag..

př. jeden řádek <BR>
druhý řádek <BR>

parametr CLEAR

tag P

Párový tag, který uvozuje standartní odstavec.
Má jediný parametr:
ALIGN - určuje zarovnání odstavce. Hodnoty - CENTER, RIGHT, LEFT

tag BLOCKQUOTE

Párový tag, který lze použít pro formátování sub-odstavců. Původně byl
vytvořen
pro formátování citací.

př. <BLOCKQUOTE> zde je text citace </BLOCKQUOTE>

tag DIV

Párový tag uvozující část dokumentu s jednotným zarovnáním. V případě, že část
textu s více odstavci má mít jednotné zarovnání použijeme tento tag.
Jediný parametr:
ALIGN - určuje jak bude text zarovnán. Hodnoty : LEFT, RIGHT, CENTER

tag PRE

Párový tag pro přesné zobrazení textu. Znamená to, že text v prohlížeci bude
zobrazen přesně tak, jak je napsán ve zdrojovém souboru.
Parametr WIDTH - určuje počet znaků na řádek

tag CITE

Párový tag, který se stejně jako tag BLOCKQUOTE používá pro citace. Uvozený
text je vypsán kurzívou.

I.IV. Tagy pro formátování text řetězců

tag B

parový tag uvozující tučný text

tag I

parový tag uvozující text psaný kurzívou

tag U

parový tag uvozující podtržený text

tag STRIKE

- parový tag uvozující přeškrtnutý text

tag SMALL

- parový tag uvozující text, který je o jeden bod menší než text
okolní

tag BIG

- parový tag uvozující text, který je o jeden bod větší než text okolní

tag SUB

- text dolní index

tag SUP

- text horní index

tag CODE

- párový tag uvozující text zobrazený neproprorcionálním
písmem

tag FONT

Párový tag, který se používá v případech, kdy nestačí standartní formátování
textu.
Parametry:
SIZE - určuje velikost písma. Tu ovšem nelze nikdy zadat napevno v
nějakých měrných jednotkách, a tak parametr SIZE umožňuje relativní změnu
velikosti písma oroti základní velikosti.

př. <FONT SIZE = +1> písmo zvětšené o jednu úroveň
</FONT>

FACE - určuje písmo, kterým bude text znázorněn. Používá se standartní
název písma.

př. <FONT FACE = „Arial CE, Helvetica">

Jestliže je uvedeno více druhů písem zajistíme, že v případě, že při
zobrazování
stránky není první písmo nalezeno, použije se náhradní uvedené v seznamu.

COLOR - parametr určující barvu písma

tag BASEFONT

Určuje velikost základního písma stránky

př. <BASEFONT SIZE = n> kde n určuje velikost písma v sedmi
úrovních.

tag STRONG

Je stejný jako tag B - tučné písmo.

tag EM

Je stejný jako tag I - kurzíva.

tag DFN

Vysvětlení pojmu. Různé prohlížeče ovšem pracují s tímto tagem různě, proto
doporučuji tento tag nepoužívat.

tag ADDRESS

Párový tag, který neurčuje textu žádné vlastnosti, ale má význam pro možné
indexovací a vyhledávací programy.

př. <ADDRESS> uvedená adresa </ADDRESS>

Text uvedená adresa je ve většině prohlížečů zobrazen kurzívou, pokud je
adresa
rozdělena na více řádku, musíme se o řádkování postarat sami.

tag SAMP, KBD, TT, VAR
Nepříliš používané či historické tagy.

SAMP - vykreslování textu neproporcionálním písmem. Většinou indikace textu,
který vypisuje počítač.
KBD - indikuje text, který do počítače zadal uživatel
VAR - tag pro výpis proměnných
TT - teletype - pochází z dob častého používání teletypových terminálů.

I.V. SEZNAMY A VÝČTY

tag UL

unnumbered list - nečíslovaný seznam

Párový tag uvozující nečíslovaný seznam, kdy na každém řádku je jedna položka.
Pokud chci položky odsadit musím pro jednotlivou položku použít tag LI -list
item
- položka seznamu.

tag LI

Nepárový tag pro odsazení položek v seznamu

př. <UL>
<LI> položka 1
<LI> položka 2
.
.
<LI> položka n
</UL>

Lze zde využít dva parametry:
COMPACT - je-li uveden budou vypuštěny mezery mezi slovy v prvku
seznamu

TYPE - určuje typ značky na začátku řádky s prvkem seznamu. Hodnotz
jsou:
SQUARE - čtverec
DISC - prázdné kolečko
CIRCLE - plné kolečko

tag OL

ordered list - číslovaný seznam

Párový tag uvozující číslovaný seznam položek. Pro odsazení jednotlivých
položek
je zde opět nutné použít tag LI. Lze použít atributy TYPE, SEQUENUM,
CONTINUE.

TYPE - uvádí jakým způsobem se bude provádět číslování seznamu.
Je pět možností:
1. A, B .... - výčet pomocí velkých písmen
2. a, b, .... - výčet pomocí malých písmen
3. I, II, ... - výčet pomocí velkých řeckých číslic
4. i, ii, ... - výčet pomocí malých řeckých číslic
5. 1, 2, ... - výčet pomocí arabských číslic

př. <OL TYPE = A>
<LI> položka
<LI> položka
</OL>

SEQNUM - tento atribut nastavuje počáteční číslo seznamu, tzn. číslo od
kterého
se seznam začne číslovat.

CONTINUE - jestliže je uveden tento atribut, tak počáteční příkaz OL nemá
začínat
číslování od jedničky, ale navázat na předchozí číslovaný seznam a pokračovat
v
číslování.

tag DL, DT, DD
- tagy pro definiční výčet
Definoční výčet umožňuje vytvořit seznam, v kterém je vždy pojem a k němu
vysvětlení. K tomu to použijeme párový tag DL . definiční seznam, dále
nepárové
tagy DT - pojem a k němu DD - vlastní definice.

př. <DL>
<DT> pojem <DD> vysvětlení
<DT> pojem <DD> vysvětlení
</DL>

tag MENU

Párový tag se stejnou funkcí jako tag UL

tag DIR

Párový tag se stejnou funkcí jako tag UL

tag HR

Nepárový tag - horizontal rule - vodorovná linka. Slouží k vykreslení linky na
obrazovku a má několik parametrů.
SIZE - n - tloušťka linky v pixelech
WIDTH - n - šířka linky v pixelech nebo v procentech šíře okna.
Implicitně je
linka kreslena přes celou šíři okna.
ALIGN - LEFT, RIGHT nebo CENTER - zarovnání linky.
NOSHADE - vypnutí stínu pod linkou
COLOR - barva linky. Imlicitní je šedá.

tag SPACER

Poznámka: Pouze v Netscape Navigator

Nepárový tag, který definuje prázdný horizontální nebo vertikální prostor.
Parametry:
TYPE - určuje typ prázdného místa. Hodnoty: HORIZONTAL, VERTIKAL,
BLOCK
SIZE - udává šířku mezery v pixelech pro horizontální mezeru a výšku pro
vertikální mezeru. V případě, že typ mezery je BLOCK potom se místo SIZE
použijí parametry WIDTH a HEIGHT.
WIDTH, HEIGHT udávají šířku a výšku volného místa pro typ BLOCK.
ALIGN - použitelný pouze u typu BLOCK - udává, jak se prázdné místo
zarovnává.

tag MULTICOL

Poznámka: Pouze v Netscape Navigator

Párový tag pro vytvoření více sloupců v textu
Parametry:
COLS - povinný parametr udávající počet sloupců
GUTTER - určuje šířku mezi sloupci v pixelech
WIDTH - určuje, jak široká bude vícesloupcová sazba, a to buď v pixelech
nebo % okna.

I.VI. Práce s odkazy

tag A

viz. tag A v HTML 4.0

Základní tag pro práci s odkazy. Tento tag má několik parametrů, které lze
použít.
Parametry:
HREF - hyperlink reference - odkaz na jiný soubor.
př. Informace najdete na stránkách <A HREF = „http://www.pf.jcu.cz
„>Jihočeské University </A>

NAME - odkaz na jiné místo v dokumentu. Použije opět HREF a k tomu
vložíme někde v textu značku pomocí NAME.

př. <A HREF=„#kapitolaI">Kapitola I.</A>
text úvodu
i několik stránek
.
.
.
<A NAME=„kapitolaI">Kapitola I.</A>
text kapitoly I.
.
.
Parametry lze různě kombinovat. Např. potřebuji se odkázat nejen na jiný
soubor,
ale ještě k tomu na konkrétní část v tomto externím souboru.
Provedení:
viz WWW stránky firmy<A HREF =
„HTTP://WWW.xxx.qz/main.html"#kapitola6">XXX Kapitola 6</A>

www stránka hypotetické firmy XXX musí obsahovat někde značku:

TITLE - parametr pro vytvoření tkz. bublinové nápovědy u odkazu.
Jestliže
je udán parametr TITLE a zůstane kurzor myši stát na odkazu otevře malé okno
do
kterého se vypíše obsah TITLE.
REV - zpětný odkaz
REL - dopředný odkaz
URN
METHODS
TARGET - určuje, kde se zobrazí obsah odkazu.
Předdefinované hodnoty:
_self - určuje, že odkaz bude načten do aktuálního okna či rámce

(okno s odkazem)
_parent - odkaz bude načten do nadřízeného okna
_top - odkaz bude načten do rámce s najvzšší prioritou
_blank - odkaz bude načten do prázdného okna
_jméno_okna - odkaz bude načten do pojmenovaného okna

I.VII. Práce s obrázky

Webová stránka může obsahovat i grafické komponenty - obrázky, obrazové
mapy či videoklipy. Dále uvádím tagy pro práci s grafikou na www stránce.

tag IMG

Nepárový tag pro umisťování obrázků na WWW stránce.
Parametry:
SRC - je povinný je to tzv. SOURCE - zdroj obrázku. Určuje jméno popř. i
cestu, kde se soubor s obrázkem nalézá.

př. <IMG SRC = „obrázek.jpg">

ALIGN - určuje jakým způssobem bude obrázek zarovnán vzhledem k
okolnímu textu. Možné hodnoty:
left - obrázek je vlevo text obtéká pravou stranou
right - obrázek je vpravo text obtéká levou stranou
top - zarovná horní okraj obrázku s nejvzšším elementem na dané
řádce.
texttop zarovná horní okraj obrázku s nejvzšším písmenem na dané
řádce.

middle - zarovná základnu řádku se středem obrázku
absmiddle - zarovná prostředek řádku se středem obrázku
baseline - zarovná spodní okraj se základnou daného textu
bottom - stejné jako baseline
absbottom - zarovná spodní okraj obrázku s nejspodnější linkou
textu

WIDTH - šířka obrázku v pixelech
HEIGHT - výška obrázku v pixelech
ALT - definuje alternativní text, který se použije v případě, že není
obrázek
na tomto místě vykreslen.
BORDER - vykreslení rámečku okolo obrázku.

př. <IMG SRC = „obrázek.jpg" BORDER = n>
n určuje tloušťku rámečku v pixelech

HSPACE, VSPACE, - parametrz určují velikost volného prostoru okolo obrázku.
HSPACE určuje místo vlevo a vpravo a VSPACE nahoře a dole.

př. HSPACE = n - hodnota v pixelech
VSPACE = m - hodnota v pixelech

Video klip

Jestliže chci ve stránce místo obrázku použít videoklip použiji místo
parametru
SRC parametr DYNSRC.

př. <IMG DYNSRC = „videoklip.avi">

LOOP - parametr určující kolikrát se videoklip přehraje.
CONTROLS - určuje zda jsou zobrazena ovládácí tlačítka k videoklipu či
nikoli.
START - určuje na jaký pokyn se vidoeklip začne přehrávat.
hodnoty: fileopen -implicitní - při otevírání souboru
mouseover - po přejetí kurzorem myši přes videoklip.

Obrazové mapy

ISMAP - určuje zda je obrázek obrazovou mapaou či ne.
USEMAP - určuje jméno obrázku, který určuje pravidla pro práci s
obrazovou mapou na straně serveru.

I.VIII. Objekty na stránce

Každá stránka může také obsahovat různé grafické objekty - tlačítka,
rolety,
checkboxi, atd. V této kapitole jsou uvedeny tagy , které umožňují takové to
objekty na stránku vložit.

tag INPUT

viz. tag INPUT v HTML 4.0

Slouží k vytváření elementů ve www stránce, a na které uživatel přímo reaguje.
Jsou to např. tlačítka, rolety, textová pole atd.
Parametry:
TYPE určuje typ elementu
hodnoty:
text - textové políčko pro vyplnění
textarea - rozšířené pole pro vkládání
button - tlačítko, pro které je nutné napsat skript s popisem
události.
checkbox - zatržítko
hidden - skrytý řídící element
image - obrázek, který je tlačítkem
password - textové pole pro psaní hesel. Místo znaku se objevuje
„*"
radio - zatržítko
reset - textové políčko
submit - stejné jako text a slouží k odeslání vyplněného formuláře
směrem k serveru.

ALIGN - zarovnání - možnosti jsou:
TOP, MIDDLE, BOTTOM, LEFT, RIGHT
NAME - důležitý parametr, který nesmí chybět, protože provádí vazbu se
skriptem, kdy toto jméno rovná se proměné použité ve skriptu.
SIZE - udává šířku a výšku.
SRC - zdroj pro obrázek.
TITLE - titulek k obrázku.
VALUE - hodnota, která může být vrácena serveru.

tag TEXTAREA

viz. tag TEXTAREA v HTML 4.0

Párový tag určený pro zadávání větší plochy textu.
Parametry:
COLS - uidává šířku oblasti ve znacích
ROWS - udává počet řádků oblasti
NAME - jméno pro použití ve skriptu
WRAP - určuje zalamování řádku

tag SELECT

viz. tag SELECT v HTML 4.0

Tento tag slouží pro vytvoření roletky obsahující prvky z níž je jeden vybrán
Syntaxe je následující:
<SELECT NAME = Seznam MULTIPLE>
<OPTION>položka1
<OPTION>položka2
</SELECT>
parametry
NAME - proměnná pro účely skriptu
MULTIPLE - určuje je-li možné vybrat více prvků naráz.
OPTION - vlastní prvky seznamu

tag APPLET

Tag pro vložení appletu do stránky
Syntaxe je následující:

<APPLET CODE = „soubor" WIDTH = m HEIGHT = n ALIGN
=zarovnání>
Popis appletu
</APPLET>

Dále doporučuji tyto internetové adresy:
http://java.sun.com a http://www.microsoft.com.java

tag MARQUEE

Vytvoří efekt rolujícího textu v okně.
Parametry: ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HSPACE,
LOOP,SCROLLAMOUNT, SCROLLDELAY, VSPACE, WIDTH

tag EMBED

Slouží k vkládání modulů do prohlížečů. Je ji zastaralý a doporučuji používat
raději
tag OBJECT.

tag OBJECT

viz. tag OBJECT v HTML 4.0

Slouží pro vkládání objektů do prohlížečů stránek. Objekty mohou být ovladačd
Active X nebo Javy. Tagem Object se zabývám dále v kapitole o HTML 4.0.

Parametry: ALIGN, BORDER, HEIGHT, HSPACE, SHAPES, STADNBY,
STYLE, TITLE, TYPE, USEMAP, VSPACE, WIDTH, PARAMNAME, VALUE

Dále doporučuji Internetové stránky:
http://www.w3.org/pub/www/tr/wd/object.html - vkládání objektů
http://www.microsoft.com/workshop/author/cpad - inf. týkající se Active X
Control
Padu.

I.IX. Práce s tabulkami

tag TABLE

Párový tag pro vykreslování tabulek.

Syntaxe je velmi složitá:

obsah tabulky

</TABLE>

Parametry :

ALIGN - zarovnání tabulky vzhledem k stránce
BACKGROUND - obrázek na pozadí
BGCOLOR - barva pozadí
BORDER - tloušťka rámečku v pixelech
BORDERCOLOR - barva rámečku
BORDERCOLORDARK - barva tmavší části rámečku
BORDERCOLORLIGHT - barva světlejší části rámečku
CELLPADDING - určuje vzdálenost mezi okrajem a obsahem buňky po
všech čtyřech stranách v pixelech.
CELLSPACING - vzdálenost mezi buňkami.
COLS - číslo udávající počet sloupců tabulky
FRAME - určuje, jak vypadá vnější rámeček tabulky. Může nabývat těchto
hodnot :
VOID - odtraní všechny vnější rámečky
ABOVE - zobrazí rámeček pouze nad horním okrajem celé tabulky.
BELOW - zobrazí rámeček pouze pod dolním okrajem tabulky.
HSIDES - zobrazí rámeček nad a pod tabulkou.
VSIDES - zobrazí rámeček vlevo a vpravo tabulky.
LHS - rámeček pouze vlevo.
RHS - rámeček pouze vpravo.

ID - identifikátor tabulky
RULES - určuje, které vnitřní rámečky se zobrazí. Může nabývat těchto
hodnot:
NONE - nejsou žádné vnitřní linky
BASIC - vodorovné linky mezi hlavičkou, tělem a patou tabulky
ROWS - linky mezi všemi řádky tabulky
COLS - linky mezi všemi sloupci tabulky
ALL - všechny vintřní linky
VALIGN - určuje zarovnání textu v políčkách tabulky. Imlicitně je na
střed.
Možné hodnoty:
CENTER - na střed buňky
TOP - na vrch buňky
BOTTOM - na spodek buňky
WIDTH - určuje šířku tabulky v pixelech nebo v procentech okna.

Jak vlastně udělat tabulku? K tomu jsou nutné njeméně další dva tagy
vysvětlené
dále, ale pro představu uvedu jednoduchou kostru tabulky.

př. <TABLE zde jsou různé parametry>
<TR> - první řádek tabulky se 4 buňkami
<TD>buňka 1</TD>
<TD>buňka 2</TD>
<TD>buňka 3</TD>
<TD>buňka 4</TD>
</TR>
<TR> - druný řádek se 4 buňkami
<TD>buňka 5</TD>
<TD>buňka 6</TD>
<TD>buňka 7</TD>
<TD>buňka 8</TD>
</TR>
</TABLE>

tag TR

Párový tag pro vytváření řádků tabulky. Podle počtu tagů TR bude mít tabulka
řádků.

Parametry :

ALIGN - určuje vodorovné zarovnání textu v buňkách celé řady
BGCOLOR - barva pozadí řádku
BORDERCOLOR - barva rámečku
VALIGN - určuje svislé zarovnání textu v buňkách řádku
BORDERCOLORDARK - barva tmavší části rámečku
BORDERCOLORLIGHT - barva světlejší části rámečku
NOWRAP - určuje, zde se taeft v buňkách zalonuje na řádky či nikoliv

tag TD

Párový tag určený pro formátování jednotlivých buněk.

Parmetry: ALIGN, BACKGROUND, BGCOLOR, BORDERCOLOR,
BORDERCOLORDARK, BORDERCOLORLIGHT, NOWRAP, VALIGN již byly
dvakrát vysvětleny u tag TABLE a tagu TR, dále vysvětluji pouze parametry,
které
ještě nebyly nikde použity.

COLSPAN - umožňuje spojit více buňek na jednom řádku dohromady.
ROWSPAN - umožňuje spojit více buněk v jednom sloupci.
WIDTH - určuje šířku buňky buď v pixelech nebo v procentech. Toto
nastavení potom platí pro celý sloupec. Případná jiná hodnota v buňce
pod
touto buňkou není brána na zřetel.
HEIGHT - určuje výšku buňky - celého řádku. Nebere se ohled na jiné
hodnoty zadané v dalších buňkách.

tag TH

Párový tag pro vytvoření hlavičky tabulky. Je podobný tagu TD, ale text je
implicitně vypisován tučným písmem azarovnán na střed.

př. <TABLE .......>
<TR>
<TH>NADPIS</TH>
</TR>
<TR>
<TD> ...
...
</TR>
</TABLE>

tag COLGROUP

Nepárový tag sloužící k formátování celých sloupců.

Objasním pouze parametr SPAN, který je nový, všechny ostatní mají stejný
význam jako u tagů TABLE, TR, TD, TH.

SPAN - určuje pro kolik sloupců za sebou se toto nastavení vztahuje.

tag CAPTION

Párový tag sloužící pro vytvoření nadpisu tabulky.

Parametry:
ALIGN - určuje zarovnání vzhledem k pravému, levému nebo středu tabulky
a jednak pro umístění nadpis nad či pod tabulkou.
VALIGN - určuje stejně jako parametr ALIGN umístění nadpisu vzhledem k
tabulce. Můžeme říci, že oba upřesňují stejnou vlastnost. Existence dvou
víceméně
stejných parametrů má základ ve sjednocování a vytváření HTML standartů. V
případě, že nastavení si konkurují má větší prioritu VALIGN.

I.X. Frames - Rámce

V této kapitole se budu zabývat tzv. Rámci - frames. Rámce umožňují rozdělit
obrazovku na několik různých oken a v každém okně může být otevřen jiný
dokument.

tag FRAMESET

viz. tag FRAMESET v HTML 4.0

Párový tag určující kolik bude v okně rámů, jak budou velké, co budou
obsahovat a
jak budou uspořádány.

<FRAMESET COLS = výšky ROWS = šířky FRAMEBORDER = 1|0
FRAMESPACING = mezery> popis rámů
</FRAMESET>

Parametry :

ROWS - seznam výšek jadnotlivých rámů v řadě za sebou. Velikost lze
udávat 3 různými způsoby. Buď v pixelech, v procentech či v relativní hodnotě.

např.
ROWS = „20%,*" - udává dva rámy. První zabírá 20% z velikosti okna a
druhý zabere zbytek.
ROWS = „40, 60%, *" - udává tři rámy. První 40 pixelů, druhý 60% okna a
třetí zbytek.

COLS - seznam šířek jednotlivých rámů v řadě za sebou. Velikost se udává
stejně jako v případě parametru ROWS.

FRAMEBORDER - určuje zde jsou rámy ohraničené (1) či ne (0).
FRAMESPACING - vytváří volný prostor mezi rámy. Hodnota v pixelech.

BORDERCOLOR -určuje barvu ohraničení.
Poznámka: Pouze v Netscape Navigator

tag FRAME

Tag FRAME určuje obsah a formu rámů.

Parametry:
FRAMEBORDER - určuje zde je rám ohraničený (1) či ne (0).
MARGINHEIGHT - výška volného prostoru nad a pod rámem.
MARGINWIDTH - šířka volného prostoru vlevo a vpravo od rámu.
NAME - jméno rámu
NORESIZE - je-li toto slovo přítomno v definuci rámu, nelze velikost
rámu
upravovat tahem myší.
SCROLLING - zakázaní/povolení rolování v oknech. Hodnota AUTO nastaví
rolování podle toho je-li to vzhledem k obsahu okna potřeba.
FRAMESPACING - pouze v MS Exploreru. Umožňuje zadat volné místo
okolo rámu.

BORDERCOLOR -určuje barvu ohraničení.
Poznámka: Pouze v Netscape Navigator

SRC - určuje HTML soubor, který bude do rámu umístěn.

Příklad na Frames - rámce

1. <HTML>
2. <HEAD>
3. <TITLE>TEST FRAMES</TITLE>
4. <FRAMESET ROWS="100%" COLS="25%,*">
5. <FRAME NAME="FRAME1 " SRC="FRAME1.HTM">
6. <FRAME NAME="FRAME2" SRC="FRAME2.HTM">
7. <NOFRAMES>
8. NEJSOU RAMY
9. </NOFRAMES>
10. </FRAMESET>
11. </HTML>

Komentář k řádkům:

1. - 3. Bez komentáře.
4. Definice dvou rámů, oba vysoké 100% to znamená přes celou obrazovku, první
na šířku 25% okna a druhý zbytek.
5. Definice prvního rámu. Soubor „FRAME1.HTM" jméno rámu je FRAME1.
6. Definice druhého rámu. Soubor „FRAME2.HTM" jméno rámu je FRAME2.
7. - 9. Část pro prohlížeče, které rámy neumějí zobrazit. Viz. další tag
NOFRAME.
10. Konec definice rámů pomocí FRAMESET.
11. Konec HTML dokumentu. Zde vidíme, že dokument určuje dva rámce a přitom
úplně chybí část BODY.

tag NOFRAMES

Tento párový tag uvozuje text, který se uživateli zobrazí v případě, že jeho
prohlížeč neumí pracovat s rámci.

př. <NOFRAMES> Váš prohlížeč neumí pracovat s
rámci</NOFRAMES>

tag IFRAME

- MS Explorer 3.0 a výš

Tento nepárový tag umožňuje vložit do stránky tzv. plovoucí rám. Tento rám se
definuje v sekci BODY a má pevě stanovenou velikost.

Dále jsou vysvětleny pouze neznámé parametry či parametry s udávající jiný než
výše uvedený smysl.
Parametry:
ALIGN zarovnání rámu vůči okolnímu textu. Rám se chová jako by to byl
obrázek vložený do textu.
BORDER - šířka ohraničení rámu.
BORDERCOLOR - barva ohraničení rámu.
NORESIZE - může nabývat dvou hodnot, který určují zda je možné měnit
velikost rámu ( NORESIZE = RESIZE ) či není ( NORESIZE = NORESIZE )
HEIGHT - výška rámu v pixelech.
WIDTH - šířka rámu v pixelech.

II. HTML 4.0

V HTML v. 4.0 nastalo několik změn. Některé tagy či jejich parametry
zmizely a některé nové tagy či parametry se objevily. Nyní uvedu stručně k
jakým
změnám došlo, a tyto jsou dále podrobněji rozebrány.
Přibyly následující tagy:
Q, INS, DEL, ACRONYM, LEGEND, LABEL, COLGROUP, BUTTON,
FIELDSET.
Jako historické byly označeny tyto elementy :
ISINDEX, APPLET, CENTER, FONT, BASEFONT, STRIKE, S, U, DIR, MENU.
Dále nastaly změny v tabulkách a ve formulářích.

Změny podrobněji
Při použití standardu HTML 4.0 v dokumentu měla by první řádka obsahovat tento
text:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0
FINAL//CZ„>
Že toto sdělení bude správně interpretováno lze zajistit pouze jestli
použijeme MSIE 4.0 nebo NN 4.0.

tag HEAD

přibyl argument PROFILE - určující umístění jednoho nebo více datových
profilů (metasouborů). Toto umožňuje vyčlenit metainformace do externích
souborů, které jsou do stránky načteny.
Tag HEAD je definován jako nepovinný.

viz. tag HEAD v HTML 3.2

tag TITLE

Povinný element stránky a musí se vyskytovat v sekci HEAD.

viz. tag TITLE v HTML 3.2

tag META

Zde jsou patrné vlivy vývoje tohoto tagu. Uvedu změny či doplnění, které se
zde
objevily.
1. Je možné citování externího profilu - souboru obsahujícího pravidla pro
práci s
metadaty, v atributu profile u tagu HEAD
2. Vlastní hodnoty metadat lze definovat jednak v tagu META, jednak externím
odkazem v tagu LINK
3. K základním parametrům HTTP-EQUIV a NAME přibývají parametry
CONTENT, SCHEME, LANG.
CONTENT - informace o obsahu
SCHEME - schéma pro interpretování hodnoty obsahu
LANG - použitý jazyk
4. Lze použít více tagů META v jedné stránce. Např. pro různé jazyky.

viz. tag META v HTML 3.2

tag BODY

U tohoto tagu některé nové prvky přibyly a jiné byly označené za zastaralé a
neměly by se používat.
Parametry, které by se již neměly používat jsou následující:
BACKGROUND, TEXT, VLINK, ALINK, LINK
Hlavním důvodem tohoto označení je to, že v HTML 4.0 se předpokládá používaní
stylů pro formátování textů, odkazů atd.
Dále lze u tagu BODy použít některé události typu Intrinsic. Např. onload a
onunload. Události Intrinsic viz, tag Script.

viz. tag BODY v HTML 3.2
viz. tag OBJECT

tag ACRONYM

Nový tag pro účely algoritmizování dokumentu. Slouží k označení a popisu
zkratky.

př. <ACRONYM TITLE=vysvětlení
zkratky>zkratka</ACRONYM>

Na tento tag mohou prohlížeče reagovat různě. Znamená to, že vysvětlení mohou
různě zobrazit - okno s vysvětlením, bublina atd.

tag Q

Tento tag má stejný význam jako tag BLOCKQUOTE až na nepatrně odlišnou
syntaxi. To znamená, že uzavírá citaci.

př. <Q CITE=........./stranka.html>Citace</Q>

tag INS

Párový tag označující tu část dokumentu, která do stránky byla vložena
pozdější
úpravou.

př. <INS DATETIME = datum_a_čas>část
dokumentu</INS>

atribut DATETIME má speciální formát - RRRR-MM-DDThh:mm:ssTZD

př. 1998-01-31T12:00:00-05:00

RRRR - rok čtyřciferným číslem
MM - měsíc dvouciferným číslem
DD - den dvouciferným číslem
hh - hodina dvouciferným číslem
mm - minuta dvouciferným číslem
ss - sekunda dvouciferným číslem
TZD - časová zóna - „+ nebo - n hodin od Greenwiche" -> „-10:00"

tag DEL

Párový tag označující tu část dokumentu, která byla ze stránky vyjmuta
pozdější
úpravou.

př. <DEL DATETIME = datum_a_čas>část
dokumentu</DEL>

Formát atributu DATETIME viz. tag INS.

Rozšíření ve vytváření tabulek

tag THEAD - hlavička tabulka
tag TBODY - tělo tabulky
tag TFOOT - patička

Tyto tři tagy již dříve podporované některými prohlížeči byli oficiálně
přijaty do standardu HTML 4.0.

př. <TABLE .......>
<THEAD>
<TR>Hlavička tabulky
<TR>Další řádek hlavičky tabulky
</THEAD>
<TFOOT>
<TR>Patička tabulky
<TR> Další řádek patičky tabulky
</TFOOT>
<TBODY>
<TR>
<TD> ...
...
</TR>
</TBODY>

</TABLE>

viz. TABULKY v HTML 3.2

tag COL

Slouží k definování vlastností sloupců či řádků.

Parametry:

ALIGN - zarovnání textu v buňkách.
SPAN - určuje pro kolik sloupců se toto nastavení vztahuje.
VALIGN - určuje zarovnání textu v políčkách tabulky. Imlicitně je na
střed.
Možné hodnoty:
CENTER - na střed buňky
TOP - na vrch buňky
BOTTOM - na spodek buňky
WIDTH - určuje šířku tabulky v pixelech nebo v procentech okna.

tag A

Důležitý element A byl také podstatně rozšířen. A to o několik parametrů:

charset = znaková_sada - určuje znakovou sadu, která bude použita na stránce a
je určena odkazem.
accesskey = znak - určuje klávesovou zkratku k vyvolání odkazu. Ve windows
nutné použít ALT +zadaný znak.
shape - vztahuje se na použití imagemap na straně klienta a definuje tvar
oblast, která bude nějakým způsobem reagovat. Tvary oblasti jsou:
default - celá dostupná oblast
rect - obdélník
circle - kruh
poly - polygonální oblast
coords = seznam souřadnic - seznam pro určující oblast. Pro každý typ oblasti
je tento seznam jiný.
rect - x,y,x,y
circle - x,y,r
polygon - x1,y1,x2,y2 ..........

tabindex - určuje je navigování mezi políčky pomocí klávesy TAB.

viz. tag A v HTML 3.2

tag OBJECT

Vzhledem k rozšiřování webových stránek, kdy WWW stránky obsahují nové a
nové objekty byl rozšířen i tag OBJECT sloužící k vkládání nových datových
objektů.

CLASSID - určuje adresu, kde se nalézá mechanizmus pracující s objektem
CODEBASE - základní cesta pro CLASSID. Tento parametr ovšem není
nutný, neboť CLASSID může obsahovat absolutní cestu.
TYPE - typ obsahu dle specifikace MIME
CODETYPE - typ dat, které očekává mechanizmus pracující s objektem
SHAPES - mapa na straně klienta
TABINDEX - směr navugace ve formuláři.

viz. tag OBJECT v HTML 3.2

tag FRAMESET

Rozšířen o dva parametry
ONLOAD - spuštění skriptu při otevírání rámce
ONUNLOAD - spuštění skriptu při opouštění rámce.

viz. tag FRAMESET v HTML 3.2

tag INPUT

Základní vstupní element. U tohoto tagu byly vypuštěny dva parametry a to
HSPACE a VSPACE z důvodu toho, že se vůbec nepoužívaly. Některé nové
atributy ovšem přibyly.
TYPE = file - jako vstup bude použit soubor. Uvadí se jméno + cesta.
READONLY - určuje zda je možno obsah políčka měnit čo nikoliv.
ALT=„řetězec„ - určuje text, který se zobrazí v případě, že prohlížeč
neumí
zobrazit grafický objekt.
USEMAP=„URL„ - adresa imagemapy na straně klienta
TABINDEX - směr a způsob přskakování pomocí tlačítka TAB
ACCEPT=„seznam„ - seznam typů souborů podle MIME, které určují jaké
lze načítat.
Dále události typu Intrinsic - reagují na události pokud událost přijde
je
spuštěn skript. Viz. dále tag SCRIPT.
ONSELECT - pokud je vybrán text
ONCHANGE - při změně textu

viz. tag INPUT v HTML 3.2

tag ISINDEX - tento tag je označen za zastaralý a není dopručeno ho již
dále používat.

tag BUTTON

- je úplnou novinkou mezi tagy a slouží k vytvoření tlačítka.

<BUTTON NAME=jméno VALUE=hodnota TYPE=typ DISABLED
TABINDEX=číslo > Obsah tlačítka</BUTTON>

NAME - jméno, na které se odkazují řídící skripty.
VALUE - hodnota, která se předá serveru při stisku tlačítka.
TYPE - určuje typ tlačítka. Možné hodnoty jsou -
BUTTON - spouští zadaný skript
SUBMIT - předává hodnoty formuláře serveru.
RESET - nic k serveru neodesílá, pouze nastavuje

vstupní hodnoty formuláře.
DISABLED - určuje zda tlačítko lze nebo nelze použít.
TABINDEX - navigace tabulátorem

Dále lze použít události Intrinsic:
ONFOCUS - pokud je zaměřen element ve stránce
ONBLUR - nezaměřený element

tag SELECT

Tag pro vytvoření roletky. Byl rozšířen o možnost udat na pevno kolik bude
zobrazeno řádků.
Syntaxe je následující:
<SELECT NAME = Seznam SIZE=číslo MULTIPLE>
<OPTION>položka1
<OPTION>položka2
</SELECT>
parametry
NAME - proměnná pro účely skriptu
MULTIPLE - určuje je-li možné vybrat více prvků naráz.
OPTION - vlastní prvky seznamu
SIZE - číslo udávající kolik bude zobrazeno řádků ze seznamu.
Dále lze použít parametry jako u tagů BUTTON a INPUT - DISABLED,
TABINDEX, a dále skrpty spouštěné událostmi - ONFOCUS, ONBLUR,
ONSELECT, ONCHANGE.

viz. tag SELECT v HTML 3.2

tag OPTION

- vztahuje je se k tagu SELECT a udává jednotlivé položky
rolety definované tagem SELECT.
SELECTED -implicitně zvolená hodnota
DISABLED - znepřístupnění výběru konkrétní hodnoty
VALUE - skutečná předávaná hodnota. V seznamu může být uvedeno něco
jiného, ale odeslanou hodnotu obsahuje tento argument.

viz. tag OPTION v HTML 3.2

tag TEXTAREA

- tento tag byl obohacen o formulářové parametry.
TABINDEX - směr tabelátoru
A dále o skripty spouštěné událostmi:
ONFOCUS, ONBLUR, ONSELECT, ONCHANGE
Tyto byly vysvětleny výše.

viz. tag TEXTAREA v HTML 3.2

tag LABEL

Tento tag slouží jako popisovač pro vstupní formulářová políčka.

př. <LABEL for=„Nazev„>Zadej nazev:</LABEL><INPUT
type=„text„ id=„nazev„>

tag FIELDSET a tag LEGEND

Tyto dva nové tagy slouží k seskupení více vstupních formulářových prvků do
graficky označených skupinek

tag FIELDSET ohraničuje více prvků formuláře tenkou čárou.
tag LEGEND umožňuje vytvořit nadpis pro takto ohraničenou skupinku a to tak,
že se linka přeruší a je sem zapsán titulek.
př. <FIELDSET>
<LEGEND align=„top„>Informace o firmě</LEGEND>
<LABEL for=„Nazev„>Zadej nazev:</LABEL><INPUT
type=„text„ id=„nazev„>
.
.
.
.
</FIELDSET>

tag SCRIPT

Tento tag slouží k informaci o skriptu, o vlastním souboru, který tento skript
obsahuje. Musíme ovšem rozlišit dva typy skriptů.
Skripty, které se spustí jednou, většinou v okamžiku načtení - skripty
ohraničené či
označené tagem SCRIPT. Dále jsou to skripty reagující na určité události nebo
splnění konkrétní události. Toto se nazývá událost Intrinsic.

<SCRIPT type=typ language=jazyk src=soubor_se_skriptem>předávaná
data</SCRIPT>
TYPE - typ jazyka, ve kterém je skript vytvořen
LANGUAGE - parametr, který je v HTML 4.0 nedoporučován
SRC - soubor obsahující vlastní skript

Intrinsic - možné události a jejich význam

onload - načtení rámu či okna
onunload - uzavření rámu či okna
onclick - kliknutí nad elementem
ondblclick - double klik nad elementem
onmousedown - pokud je tlačítko myši stisknuté, událost skončí když ja
tlačítko puštěno.
onmouseup - uvolnění tlačítka
onmouseover - myší kurzor se dostane nad element, není nutné klikat tlačítkem
onmousemove - událost pokud se myší kurzor pohybuje
onmouseout - pokud je myší kurzor posunut mimo element
onfocus - pokud je zaměřen element ve stránce
onblur - nezaměřený element
onkeypress - pokud je stisknuta a uvolněna klávesa v elementu
onkeydown - když je klávesa stisknuta a podržena
onkeyup - uvolnění klávesy
onsubmit - událost pouze když je formulář odeslán ke zpracování
onreset - událost je, když je formulář resetován
onselect - pokud je vybrán text
onchange - v případě, že je text ve vstupním poli změněn

Dále odkazuji na Internetové stránky:

Microsoftu - http://www.microsoft.com/sutebuilder
Netscape - http://www.netscape.com/devedge
VBScript - http://www.microsoft.com/vbscript/us/vbstutor/vbstutor.htm

III. CSS - Cascading Style Sheets - práce se styly

CSS definování stylů pro formátování úplně popřelo základní kameny, na
ktrerých
bylo HTML koncipováno. Způsob formátování přímo u textu pomocí tagu je úplně
postaveno mimo.

III.I. Základ CSS

Pomocí stylů lze vytvářet nové styly, případně pozměňovat stávající. CSS dává
velké možnosti a dosahují šíří skoro programovacího jazyka.

příklad:
<HTML>
<HEAD>
<TITLE>WWW stránka</TITLE>
<STYLE TYPE = "text/css">
<!---
H2 { font-family: Impact;
font-weight:bold;
color:Green;
background:Aqua }

.jinýstyl { font-family: „Times New Roman CE„;
font-size: 20pt;
background: Red }
--->>
</STYLE>
</HEAD>
<BODY>
<H2> Nový styl nadpisu</H2>
<span class=jinýstyl>Jo ahoj naydar to je ale bomaba co . No jasne ty
starej
troubo!
</span>
</BODY>
</HTML>

tag SPAN
tento tag se používá k požítí definovaného stylu v těle stránky. Použítí viz.
výše.

Vlastnosti písma

Velkou skupinou vlstaností jsou vlastžnosti písma.
font-family: - definice písma. Určení, které písmo bude použito.
font-style: - určuje styl výpisu. Možné hodnoty jsou NORMAL, ITALIC,
OBLIQUE.
font-weight: - určuje tučnost písma. Možné hodnoty jsou NORMAL, BOLD,
BOLDER, LIGHTER, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-variant: - určuje zda je písmo psáno verzálkami nebo malými kapitálkami.
Hodnoty jsou NORMAL, SMALL-CAPS
font-size: velikost písma

Vlastnosti textu a pozadí

color: - určuje barvu textu
background-color: - určuje barvu pozadí. Hodnoty BARVA, TRANSPARENT
background-image: - obrázek na pozadí. Hodnoty url, none.
background-repeat: - způsob vyskládání dlaždic obrázku na plochu.
background-attachment: určuje fixování obrázku. Rolvání obrázku s textem nebo
ukotvení obrázku na jednom místě. Hodnoty SCROLL, FIX.
background-position: - určuje přesnou pozici obrázku.

Vlastnosti textu

word-spacing: - určuje mezeru mezi slovy. Hodnoty jsou NORMAL, délka.
letter-spacing: - určuje mezeru mezi písmeny. Hodnoty NORMAL, délka.
text-decoration: - určuje další efekty na písmu. Hodnoty jsou NONE,
UNDERLINE, OVERLINE, LINE-THROUGH, BLINK,
vertical-align: určuje svislé zarovnání. Zarovnání se vztahuje k elementům v
textu a
to k jejich základně, středu, atd.
text-transform: slouží k zadávání verzálek a mínusek. Možné hodnoty jsou
CAPITALIZE, UPPERCASE, LOWERCASE, NONE.
text-align: slouží k zarovnání textu v horizintále. Možné hodnoty jsou LEFT,
RIGHT, CENTER, JUSTIFY.
text-indent: slouží k odsazování textu.
line-height: slouží k určení mezery mezi řádky

Vlastnosti rámečku

margin-top - určuje místo nad textem.
margin-bottom - určuje místo pod textem.
margin-left - určuje místo vlevo od textu.
margin-right - určuje místo vpravo od textu.
padding-top - řídí velikost nahoře.
padding-bottom - řídí velikost dole.
padding-left - řídí velikost vlevo.
padding-right - řídí velikost vpravo.
border-top-width - řídí tloušťku rámečku nad elementem.
border-bottom-width - řídí tloušťku rámečku pod elementem.
border-left-width - řídí tloušťku rámečku vlevo.
border-right-width - řídí tloušťku rámečku vpravo.
border-color: - určuje barvu rámečku a to nad, pod, vlevo a vpravo od
elementu.
border-style: určuje způsob vykreslení rámečku. Tzn, jaký typ čáry bude
použit.
Možné hodnoty jsou NONE, DOTTED, DASHED, SOLID, DOUBLE, GROOVE,
RIDGE, INSET, OUTSET.
border-top - vlastnosti pro horní stranu.
border-right - vlsatnosti pro pravou stranu.
border-bottom - vlastnosti pro spodek.
border-left - vlastnosti pro levou stranu.

Formátování elementů

width: - šířka elementu.
height: - výška elementu.
float: vodorovné umístění elementu.
clear: - zrušení plynulého obtékání.
display: - zorbrazení elementu.
white-spacing: - určuje prázdné místo. Možné hodnoty jsou normal, pre, nowrap.
list-style-type: - slouží k formátovánín seznamu. Možné hodnoty jsou disc,
circle,,
decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
list-style-image: slouží k určení obrázku jako značky výčtu.
list-style-position: slouží k odsazování. Možné hodnoty jsou inside, outside.

Třídy a identifikátory

class - tento parametr umožňuje pracovat s třídami.

př. P.výrazný { font-weight: bolder }

ve stránce

<P class=výrazný>Text odstavce</P>

V tagu P ovšem nedošlo k vůbec žádné změně. Tento tag byl poze rozšířen o
třídu
výrazný. Chci-li tedy použít obyčejný tag P normálně ho použiji.
Třída výrazný je ale použitelná pouze u tagu P. Pokud bychom chtěli používat
třídu
i u ostatních tagů musela by definice vypadat jnásledovně:

př. .výrazný { font-weight: bolder }

ve stránce
<H5 class=výrazný>Text</H5>
<P class=výrazný>Text odstavce</P>
<CITE class=výrazný>Text</CITE>

ID - slouží obdobně jako třída - class.

#znak{ ............}

ve stránce

pseudoelementy - jako pseudoelementy jsou označovány dvě nové typografické
vlastnosti. Jsou to „ první řádek - first-line a první písmeno - first -
letter.

komentáře
V definicích stylů lze použít komentáře a to ve tvaru - /* komentář */

Import
Definice stylů nemusí být obsaženy přímo ve zdrojovém textu stránky, ale lze
je
importovat.
př. <STYLE TYPE=„text/css„>
@import url(soubor.css)
</STYLE>

dopředná kompatibilita - vzhledem k rychlému vývoji prostředků jako jsou CSS
je
zajištěno, že na parametry, které jsou prohlížeči neznámé, ať již z důvodu
chybné
syntaxe či příliš nového parametru, prohlížeč nijak nereaguje a řídí se pouze
parametry, které jsou mu známé.

Dále odkazuji na Internetové stránky:

http://www.w3.org/style
http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/WD-positioning
http://www.microsoft.com/workshop/author/css/css-f.htm
http://www.microsoft.com/workshop/prog/ie4/new/newcss-f.htm
http://developer.netscape.com/one/dynhtml/index.html