ÚVOD DO HTML

JIŘÍ ČERNÝ

Jsou shrnuty a na příkladech ilustrovány základy HTML. Optimálním způsobem studia je čtení textu se zkoušením příkladů a jejich modifikací.

1 Předmluva

V textu jsou shrnuty elementy pro psaní HTML kódu. Pro studium doporučuji:

současně číst text a prohlížet jeho vzhled ťuknutím na příslušný odkaz
spíše než studovat manuály jednotlivých verzí zkoušet modifikaci textu a prohlédnout výsledek
stránku lze psát v libovolném editoru, hotová stránka se uloží jako ASCII text s příponou html
k odzkoušení HTML stránek není třeba je ukládat na Web server, stačí pouze webovský prohlížeč
nejvíce se lze naučit prohlížením hotavých stránek na Internetu; pokud se nám některá líbí, prohlédnout zdrojový text (View - Source)
chceme - li se vážně věnovat programování pro WWW, pro začátek nepoužívat "WYSIWIG" editory, znalost HTML nezbytná pro psaní aktivních aplikací

2 Struktura HTML dokumentu

HTML dokument je textový soubor, který je proložen značkami (tagy), interpretovanými webovským prohlížečem, obdobně jako např. v dokumentu TEX
značky jsou uzavřeny mezi znaky < a >
text, na který se aplikuje značka uzavřen mezi <značka> a </značka >
v textu se ignorují mezery a nové řádky, formátování zařizuje značka
značky lze psát malými i velkými písmeny

2.1 Základní značky v HTML dokumentu

<HTML>: oznamuje prohlížeči, že soubor je HTML text
<HEAD>: hlavička dokumentu, obsahující řadu informací pro prohlížeč
<TITLE>: identifikace dokumentu, která se objevuje v titulku okna prohlížeče a používají ji vyhledávací mechanismy v Internetuů; proto lepší psát bez diakritiky
<BODY>: vlastní HTML text
<Hn>: n=1, 2,...,6 nadpisy různé úrovně významnosti; 1 nejvyšší, 6 nejnižší
<P>: odstavec textu

Př. 1. Základní struktura HTML dokumentu

<HTML>
<HEAD>
<TITLE>Struktura HTML dokumentu</TITLE>
<BODY>
<H1> Největší nadpis se uzavře mezi značky H1 a /H1</H1>
<P>
Odstavec se uzavře mezi značky P a /P
</P>
</BODY>
</HTML>

2.2 Barvy v HTML

Používá se barevné schéma RGB - míchání světel
barva se zadává ve formátu #rrggbb
- rr je hexadecimálni intenzita červené barvy (00 žádná, FF maximální)
- gg je hexadecimálni intenzita zelené barvy
- bb je hexadecimálni intenzita modré barvy
- tedy bílá barva vznikne sečtením tří základních barev o maximální intenzitě a je #FFFFFF
- černá barva neobsahuje žádnou základní barvu(#000000)
lze použít i předdefinovaných barev, nemusejí fungovat ve všech prohlížečích

white	#FFFFFF	lime	#00FF00
silver	C0C0C0	green	008000
gray	#808080	yellow	#FFFF00
black	#000000	olive	808000
red	#FF0000	blue	#0000FF
maroon	#800000	navy	#000080
fuchsia	#FF00FF	aqua	#00FFFF
purple	#800080	teal	#008080

Barvy lze definovat pomocí
- parametrů značky <BODY>:
  - BGCOLOR=" barva " pozadí
  - TEXT=" barva " text
  - LINK=" barva " nenavštívené odkazy
  - VLINK=" barva " navštívené odkazy
  - ALINK=" barva " aktivní odkaz
- parametru BGCOLOR=" barva " značky <TD> pro barvu buňky v tabulce

3 Seznamy

seznam s odrážkami
číslovaný seznam
"definiční" seznam
seznamy lze libovolně vkládat do sebe

3.1 Seznam s odrážkami - UL (unordered)

uzavřen mezi <UL> a </UL>
položky mezi <LI> a </LI>

Př. 2. Seznam s odrážkami

<HTML>
<HEAD>
<TITLE>Prezidenti-UL</TITLE>
<H1> Prezidenti Československa a jeho trosek</H1>
<UL>
<LI>1918-1935 T.G. Masaryk</LI>
<LI>1935-1938 E. Beneš</LI>
<LI>1938-1939 E. Hácha</LI>
<LI>1939-1945 E. Hácha a J. Tiso</LI>
<LI>1945-1948 E. Beneš</LI>
<LI>1948-1953 K. Gottwald</LI>
<LI>1953-1957 A. Zápotocký</LI>
<LI>1957-1968 A. Novotný</LI>
<LI>1968-1975 L. Svoboda</LI>
<LI>1975-1989 G. Husák</LI>
<LI>1989-1994 V. Havel</LI>
<LI>1994-???? V. Havel a M. Kováč</LI>
</UL>
</BODY>
</HTML>

3.2 Číslovaný seznam - OL (ordered)

uzavřen mezi <OL> a </OL>
položky mezi <LI> a </LI>

Př.3. Číslovaný seznam

<HTML>
<HEAD>
<TITLE>Prezidenti</TITLE>
<BODY>
<H1> Prezidenti Československa a jeho trosek</H1>
<OL>
<LI>1918-1935 T.G. Masaryk</LI>
<LI>1935-1938 E. Beneš</LI>
<LI>1938-1939 E. Hácha</LI>
<LI>1939-1945 E. Hácha a J. Tiso</LI>
<LI>1945-1948 E. Beneš</LI>
<LI>1948-1953 K. Gottwald</LI>
<LI>1953-1957 A. Zápotocký</LI>
<LI>1957-1968 A. Novotný</LI>
<LI>1968-1975 L. Svoboda</LI>
<LI>1975-1989 G. Husák</LI>
<LI>1989-1994 V. Havel</LI>
<LI>1994-???? V. Havel a M. Kováč</LI>
</OL>
</BODY>
</HTML>

3.3 Definiční seznam - DL

vhodný při popisu významu termínů
zvýrazňuje definovaný termín a jeho dedinici

Př. 4. Definiční seznam

<HTML>
<HEAD>
<TITLE>Prezidenti-DL</TITLE>
<BODY>
<H1> Prezidenti Československa a jeho trosek</H1>
<DL>
<DT>1918-1935</DT>
<DD> T.G. Masaryk</DD>
<DT>1935-1938 </DT>
<DD>E. Beneš</DD>
<DT>1938-1939 </DT>
<DD>E. Hácha</DD>
<DT>1939-1945</DT>
<DD> E. Hácha a J. Tiso</DD>
<DT>1945-1948 </DT>
<DD>E. Beneš</DD>
<DT>1948-1953 </DT>
<DD>K. Gottwald</DD>
<DT>1953-1957</DT>
<DD> A. Zápotocký</DD>
<DT>1957-1968</DT>
<DD> A. Novotný</DD>
<DT>1968-1975</DT>
<DD> L. Svoboda</DD>
<DT>1975-1989</DT>
<DD> G. Husák</DD>
<DT>1989-1994</DT>
<DD> V. Havel</DD>
<DT>1994-???? </DT>
<DD>V. Havel a M. Kováč</DD>
</DL>
</BODY>
</HTML>

3.4 Vkládání seznamů do sebe

Na místě položky se vloží další seznam atd.

Př. 5. Vložené seznamy

<HTML>
<HEAD>
<TITLE>Prezidenti</TITLE>
<BODY>
<H1> Prezidenti Československa a jeho trosek</H1>
<UL>
<LI>Československá republika</LI>
<UL>
<LI>1918-1935 T.G. Masaryk</LI>
<LI>1935-1938 E. Beneš</LI>
<LI>1938-1939 E. Hácha</LI>
</UL>
<LI>Protektorát Čechy a Morava a Slovenský štát</LI>
<UL>
<LI>1939-1945 E. Hácha a J. Tiso</LI>
</UL>
<LI>Československá republika</LI>
<UL>
<LI>1945-1948 E. Beneš</LI>
<LI>1948-1953 K. Gottwald</LI>
<LI>1953-1957 A. Zápotocký</LI>
<LI>1957-1968 A. Novotný</LI>
<LI>1968-1975 L. Svoboda</LI>
<LI>1975-1989 G. Husák</LI>
<LI>1989-1994 V. Havel</LI>
</UL>
<LI>Česká republika a Slovenská republika</LI>
<UL>
<LI>1994-???? V. Havel a M. Kováč</LI>
</UL>
</UL>
</BODY>
</HTML>

4 Zformátovaný text

uzavře se mezi <PRE> a </PRE>
zachovává formátování textu
vhodný např. pro výpisy programů
používá neproporcionální písmo

Př. 6. Zformátovaný text

<HTML>
<HEAD>
<TITLE>Pr6. Zformatovany text</TITLE>
<BODY>
<H4>Skript posune všechny řádky zadaného souboru o tabulátor vlevo</H4>
<PRE>
if [ $# != 1 ]
then
echo "Pouziti: $0 soubor"
exit 1
fi
ex -s $1 <<KONEC
%<<
x
KONEC
more $1
</PRE>
</BODY>
</HTML>

5 Odražený text

uzavře se mezi <BLOCKQUOTE> a </BLOCKQUOTE>
text je odražen o tabulátor
použití např. souhrny, novinové sloupky

Př. 7. Odražený text

<HTML>
<HEAD>
<TITLE>Pr. 7. Souhrn</TITLE>
</HEAD>
<BODY>
<H4>SOUHRN</H4>
<BLOCKQUOTE>
Příspěvek se zabývá zkušenostmi, získanými
při přípravě aplikací GIS na WWW v Institutu
městské informatiky pro potřeby Intranetu
městských úřadů i k informaci občanů na Internetu.
Jsou stručně shrnuty potřeby městské správy v této
oblasti,  použité technologie, poznatky z testovacích
řešení a perspektivy dalšího rozvoje.
</BLOCKQUOTE>
</BODY>
</HTML>

6 Adresa

uzavře se mezi <ADRESS> a </ADDRESS>
text je zformátován jako adresa na jednom řádku
nevhodné pro skutečnou adresu na obálku, spíše pro informaci

7 Zalomení řádky

napíše se <BR> (BREAK) na místě, kde chceme ukončit řádku
připomínám, že jinak text zformátován bez ohledu na jeho fyzický zápis (nové řádky, mezery, tabulátory)
použití všude tam, kde chceme ovlivnit skutečnou délku řádku - adresa na obálku nebo třeba báseň

8 Vodorovná čara

napíše se <HR SIZE=n WIDTH="m%"> (HORIZONTAL RULE)
n určuje tloušťku čáry v pixelech, nepovinné
m kolik procent šířky okna prohlížeče zabírá čára, nepovinné
pro oddělení logických částí textu, záhlaví či pata stránky

Př. 8. Báseň

<HTML>
<HEAD>
<TITLE>Pr. 8. Basen</TITLE>
<BODY>
<BLOCKQUOTE>
<H4>Úpění</H1>
<P>Když tě život bije
<BR>
chraň si aspoň pyje
</P>
<P>Nebo přijde bolševik
<BR>
a udělá  šmik, šmik, šmik!</P>
</BLOCKQUOTE>
<HR>
<ADDRESS>
Jiří Černý, samizdat 1980 - JiriCe@imip.monet.cz
</ADDRESS>
</BODY>
</HTML>

9 Další formáty znaků

HTML prohlížeč v zásadě přistupuje k formátování textu z logického hlediska - autor předepíše, že text je např. odstavec, seznam a na webovském prohlížeči ponechá, jak těmto pojmům rozumí - nedefinuje tedy, kolik mezer se odsadí v prvním řádku, jaká je skutečná velikost písma v nadpisu < H1> či < H2> - tento styl formátování se nazývá logický
textový editor a ještě více DTP program naopak formátuje text z fyzického hlediska - velikost a typ písma, mezery a v podstatě ho nezajímá logický či sémantický význam formátovaného textu - mluvíme o fyzickém stylu formátu
to bylo na počátku vývoje HTML, v současných verzích se do HTML přidává čím dál tím více prvků pro fyzické formátování; dokonce se předpokládá, že HTML se v budoucnu stane i univerzálním formátem pro textové editory
v HTML je vhodné dávat přednost logickému stylu, protože prohlížeč si s ním vždy nějakým způsobem poradí
zde pouze základ, další styly, v podrobnější dokumentaci
nouzové řešení pro věci, které nejdou zatím v HTML (např. matematické vzorce) - napsat např v TEXU či Wordu a vyrobit z nich bitový obrázek

9.1 Fyzické styly

<B>: tučné písmo (bold)
<I>: kurzíva (italic)
<TT>: font s pevnou šířkou (teletype)

9.2 Logické styly

<EM>: zdůrazněný (emphasis), zobrazuje se kurzívou
<CITE>: názvy, zobrazuje se kurzívou
<CODE>: výpisy programů, zobrazuje se malými fonty písmem pevné šířky
<KBD>: vstup z klávesnice, písmo pevné šířky
<SAMP>: vzorek programů, malý font pevné šířky
<STRONG>: důležité zvýraznění, tučné písmo
<VAR>: proměnná, kurzíva
<SUB>: _{dolní index}
<SUP>: ^{horní index}

9.3 Zvláštní symboly

zobrazení znaků ASCII se zvláštním významem
zobrazení znaků s vyšší hodnotou než mají ASCII, např. znaků s diakritickými znaménky, viz specifikace HTML
nevhodné pro češtinu, protože HTML obsahuje pouze ISOLATIN-1

<	<	menší než
>	>	větší než
&	&	ampersand
"	"	uvozovky
		pevná mezera
		pomlčka
©	©	copyright
®	®	ochranná známka
°	°	stupeň

10 Hypertextové odkazy

odkazy na dokumenty a na části dokumentů, rozložené ve WWW prostoru jsou nejdůležitějším rysem HTML
k práci s odkazy slouží značka <A;>, definující cíle a polohu odkazu
odkazy mohou být:
- na jiný dokument s absolutní cestou
- na jiný dokument s relativní cestou
- na určité místo stejného dokumentu
- na určité místo jiného dokumentu

10.1 Odkazy s absolutní cestou

zapisují se ve formátu <A =HREF= URL > text </A>
URL má tvar: schéma :// host.doména [: port ]/ cesta / jméno_souboru
vhodné pro odkazy, na kterých jsou univerzální služby, které se často využívají (www.altavista.com)

schéma může nabýt hodnoty:

file: lokální soubor
ftp: soubor na anonymním ftp serveru
gopher: soubor na Gopheru
http: soubor na WWW serveru
WAIS: soubor na serveru WAIS
telnet: služba telnet

Př. 9. Odkaz na osobní stránku autora

<HTML>
<HEAD>
<TITLE>Pr. 9. Hypertextovy odkaz</TITLE>
<BODY>
<A HREF=http://oracle.monet.cz/cernyj>J. Černý osobní stránka </A>
</BODY>
</HTML>

10.2 Odkazy s relativní cestou

cesta k souboru relativně vzhledem k aktivnímu adresáři, nevypisuje se celé schéma
vhodné pro vzájemně se odkazující stránky, uspořádané popř, do stromové struktury
není třeba měnit absolutní cesty ve všech provázaných dokumentech při uložení hlavního dokumentu do jiného adresáře
rychlejší přístup než s absolutní cestou

Př. 10. Odkaz na dokument basen.html

<HTML>
<HEAD>
<TITLE>Pr. 10. Odkaz na dokument basen.html v aktualnim adresari</TITLE>
<BODY>
<A HREF="./html/pr10_basen.html">  </A> J. Černý-Úpění
</BODY>
</HTML>

10.3 Odkazy na návěští v aktuálním textu

návěští v HTML textu se definuje jako <A NAME=" návěští "> text </A> odkaz na toto návěští se potom zapíše <A HREF="# návěští "> text </A>

10.4 Odkazy na návěští v jiném dokumentu

zapíše se ve tvaru <A HREF= " cesta_k_dokumentu # návěští "> text </A>
Př. 11. Odkaz na kapitolu "Sítě v Unixu", která je označena návěštím 18 v dokumentu na URL adrese http://oracle.monet.cz/cernyj/kuz7/kuz.html

<HTML>
<HEAD>
<TITLE>Pr. 11. Odkaz na navesti v jinem dokumentu</TITLE>
<BODY>
<A HREF=HREF="http://oracle.monet.cz/cernyj/kuz/kuz7.htm#18"> Sítě v Unixu  </A>
</BODY>
</HTML>

10.5 Odeslání elektronické pošty

Pomocí <A HREF="mailto: Eletkronická adresa > ;text </A> lze specifikovat odeslání pošty.
Př. 12. Odeslání pošty autorovi tohoto textu

<HTML>
<HEAD>
<TITLE>Pr. 12. Odeslani elektronicke posty</TITLE>
<BODY>
<A HREF="mailto:JiriCe@imip.monet.cz">JiriCe@imip.monet.cz  </A>
</BODY>
</HTML>

11 Obrázky

11.1 Zahrnutí obrázků do stránky

značka <IMG SRC= odkaz na obrazek >
odkaz na obrazek se specifikuje stejně jako URL ve značce HREF, obrázek může tedy být na jakémkoliv WWW serveru
některé další nepovinné atributy značky IMG:
- ALT= alternativní_text, text, který se zobrazí v negrafickém prohlížeči místo obrázku
- WIDTH= šířka obrázku v pixelech
- HEIGHT= výška obrázku v pixelech
- artributy WIDTH a HEIGHTse doporučje uvádět vždy, prodože
- během zobrazení stránky se rezervuje místo na obrázek a okolní text je již čitelný je třeba zapsat skutečné rozměry, zjištěné vhodným grafickým programem
- zadají-li se jiné, záleží zobrazení na prohlížeči; některý změní rozměry na zadanou velikost, jiný ne
- ALIGN definuje zarovnání obrázku vzhledem k textu, hodnoty TOP, MIDDLE, BOTTOM, LEFT, RIGHT,viz příklad dále
prohlížeče umí zobrazit běžné formáty tastrových obrázků (gif, jpeg,bmp, png)
rozumný člověk je použije pouze tam, kde je to nezbytné (schema, fotografie), jinak jsou dezinformačním smogem, který zpomaluje natažení naší stránky a zamořují celý Internet
pro urychlení lidé vypínají často v prohlížeči obrázky nebo používají textový prohlížeč (Lynx), proto je třeba psát stránky tak, aby byly srozumitelné a použitelné i v těchto případech ( viz značka ALT)

Př. 13. Zarovnání textu s obrázkem pomocí ALIGN="TOP"

<HTML>
<HEAD>
<TITLE>Pr. 13. Zarovnani textu s obrazkem (TOP)</TITLE>
<BODY>
<H2>Třicet let po promoci</H2>
<P>
To jsme se  pobavili.
<IMG SRC="./obr/obr1.jpg" ALIGN="TOP"  ALT="Spolužáci">
</P>
</BODY>
</HTML>

Př. 14. Zarovnání textu s obrázkem pomocí ALIGN="MIDDLE"

<HTML>
<HEAD>
<TITLE>Pr. 14. Zarovnani textu s obrazkem (MIDDLE)</TITLE>
<BODY>
<H2>Třicet let po promoci</H2>
<P>
To jsme se  pobavili.
<IMG SRC="./obr/obr1.jpg" ALIGN="MIDDLE"  ALT="Spolužáci">
</P>
</BODY>
</HTML>

Př. 15. Zarovnání textu s obrázkem pomocí ALIGN="BOTOM"

<HTML>
<HEAD>
<TITLE>Pr. 15. Zarovnani textu s obrazkem (BOTTOM)</TITLE>
<BODY>
<H2>Třicet let po promoci</H2>
<P>
To jsme se  pobavili.
<IMG SRC="./obr/obr1.jpg" ALIGN="BOTOM" WIDTH=366  HEIGHT=224  ALT="Spolužáci">
</P>
</BODY>
</HTML>

Př. 16. Zarovnání textu s obrázkem pomocí ALIGN="LEFT"

<HTML>
<HEAD>
<TITLE>Pr. 16. Zarovnani textu s obrazkem (LEFT)</TITLE>
<BODY>
<H2>Třicet let po promoci</H2>
<P>
<IMG SRC="./obr/obr1.jpg"ALIGN="LEFT" WIDTH=366 HEIGHT=224 ALT="Spolužáci ">
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
</P>
</BODY>
</HTML>

Př. 17. Zarovnání textu s obrázkem pomocí ALIGN="RIGHT"

<HTML>
<HEAD>
<TITLE>Pr. 17. Zarovnani textu s obrazkem (RIGHT)</TITLE>
<BODY>
<H2>Třicet let po promoci</H2>
<P>
<IMG SRC="./obr/obr1.jpg"ALIGN="LEFT" WIDTH=366 HEIGHT=224 ALT="Spolužáci ">
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
To jsme se pobavili. To jsme se pobavili. To jsme se pobavili. To jsme se pobavili.
</P>
</BODY>
</HTML>

11.2 Obrázek místo textu odkazu

Někdy může být vhodné použít jako specifikaci odkazu obrázek - např. lze jako odkaz k velkému obrázku použít jeho malý náhled:

Př. 18. Náhled obrázku s odkazem

<HTML>
<HEAD>
<TITLE>Pr. 18. Nahled obrazku s odkazem </TITLE>
<BODY>
<STRONG>Zvětšit obrázek:  </STRONG><A  HREF="OBR1.JPG">
<IMG SRC="./obr/obr2.jpg"ALT="Spolužáci"> </A>
</BODY>
</HTML>

12 Odkazy na multimedia

zahrnou se do stránky pomocí < HREF= url >
jméno souboru se v url musí zapsat s příponou:

wav pro soubory wav, např.
mpeg nebo mpg pro MPEG
au pro zvukové soubory AU
atd.

Př. 19. Zvukový soubor v HTML stránce

<HTML>
<HEAD>
<TITLE>Pr. 19. Zvukovy soubor v HTML strance  </TITLE>
<BODY>
<A HREF="./zvuky/doslaposta.wav">došla pošta</A> 
</BODY>
</HTML>

13 Tabulky

jednoduchá konstrukce tabulek
použití i k formátování textu (více sloupců, text kolem obrázků a pod.)
buňky mohou obsahovat i obrázky
rozměry se určují automaticky
buňku lze vytvořit i přes několik sloupců nebo řádků

13.1 Značky pro tabulky

<TABLE<>/TABLE> začátek a konec tabulky, atributy:

WIDTH chceme-li šířku tabulky stanovit explicitně, lze pomocí počtu pixelů či v % šířky okna
BORDER šířka orámování tabulky a buněk v pixelech. Místo BORDER=1 stačí BORDER
ALIGN zarovnání tabulky; LEFT (standardní), RIGHT nebo CENTER
CELLSPACING mezery mezi rámečky buněk
CELLPADDING mezery mezi obsahem buňky a rámečkem buňky

<CAPTION> </CAPTION> titulek tabulky, umístění nad tabulkou ALIGN="TOP", standardní, ALIGN="BOTTOM" pod tabulkou
<TR> </TR> vymezuje řádek, argumenty:

ALIGN horizontální zarovnání, LEFT, RIGHT, CENTER

VALIGN vertikální, TOP, BOTTOM, MIDDLE

<TD> </TD> vymezuje buňku, použitelné všechy značky pro formátování, může obsahovat vnořenou tabulku; argumenty:

ALIGN
VALIGN
ROWSPAN počet řádků, přes který bude buňka
WIDTH lze explicitně zadat šířku buňky v pixelech
HEIGHT lze explicitně zadat výšku buňky v pixelech
NOWRAP zákaz automatického lámání řádků v buňce

<TH> </TH> hlavičky buněk, stejná pravidla jako u TD Př. 20. Tabulka faktoriálu

<HTML>
<HEAD>
<title> Tabulka faktorialu</title>
</HEAD>
<BODY>
<TABLE BORDER=1 >
<CAPTION>Faktoriál</CAPTION>
<TH>n</TH><TH>n!</TH>
<TR>
<TD>1</TD>
<TD>1</TD>
</TR>
<TR>
<TD>2</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>6</TD>
</TR>
<TR>
<TD>4</TD>
<TD>24</TD>
</TR>
<TR>
<TD>5</TD>
<TD>120</TD>
</TR>
<TR>
<TD>6</TD>
<TD>720</TD>
</TR>
<TR>
<TD>7</TD>
<TD>5040</TD>
</TR>
<TR>
<TD>8</TD>
<TD>40320</TD>
</TR>
<TR>
<TD>9</TD>
<TD>362880</TD>
</TR>
<TR>
<TD>10</TD>
<TD>3628800</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Př. 21. Složitější tabulka

<HTML>
<HEAD>
<title><Slozitejsi tabulka/title>
</HEAD>
<BODY>
<TABLE  BORDER=5  ALIGN="CENTER"  >
<TR>
<TD>
<TABLE  CELLSPACING=0  CELLPADDING=0  ALIGN="CENTER" >
<TR ALIGN="CENTER"   BGCOLOR="#C0C0C0">
<TH COLSPAN=3 >Panel   V</TH>
</TR>
<TR>
<TD BGCOLOR="#FF8040" >Irishmen</TD>
<TD BGCOLOR="#00FF40" >Irländer</TD>
<TD BGCOLOR="#FF80FF" >Ir</TD>
</TR>
<TR>
<TD BGCOLOR="#FF8040" >kept</TD>
<TD BGCOLOR="#00FF40" >hielt</TD>
<TD BGCOLOR="#FF80FF" >držet</TD>
</TR>
<TR>
<TD BGCOLOR="#FF8040" >mouth</TD>
<TD BGCOLOR="#00FF40" >mund</TD>
<TD BGCOLOR="#FF80FF" >ústa</TD>
</TR>
<TR>
<TD BGCOLOR="#FF8040" >catch</TD>
<TD BGCOLOR="#00FF40" >fangen</TD>
<TD BGCOLOR="#FF80FF" >chytit</TD>
</TR>
<TR>
<TD BGCOLOR="#FF8040" >accent</TD>
<TD BGCOLOR="#00FF40" >Akzent</TD>
<TD BGCOLOR="#FF80FF" >přízvuk</TD>
</TR>
<TR>
<TD  COLSPAN=3 >  An Irishman in London
kept his mouth open
to catch the English accent.
</TD>
</TR>
<TR>
<TD  COLSPAN=3  ALIGN="CENTER"  BGCOLOR="#C0C0C0" >
<A  HREF="./zvuky/irishman.wav">Poslouchej</A> a přelož do
němčiny:
</TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN="CENTER" >
<A HREF="mailto:JiriCe@imip.monet.cz"> Překlad odešli elektronickou poštou  </A>
</TD>
</TR>
</TD>
</TR>
</TABLE>
</TABLE>
</BODY>
</HTML>