Hlavne menu We are sorry, but magazine AMMO is suspended. Here is just read-only access to the articles archive. Some features are removed because they were outdated, pointless in read-only (voting and pools), or it was missused by spammers (comments) etc. Now the webpages aren't maintained so when something will get broken most probably it won't be fixed at all. If you liked our magazine then please make donation with paypal so we can pay for traffic on this server.

TOP Výuka
01 Maľované krížovky 103 bodov
02 OpenGL, lákadlo 38 bodov
03 MySQL (+ použitie Visual C++ a PHP) 28 bodov
04 OpenGL, časť 1 21 bodov
05 Huffmanove kódovanie 19 bodov
06 Pascal, časť 1 18 bodov
07 Ako tlačiť s HP 16 bodov
08 Základy HTML časť 2 16 bodov
09 Základy HTML časť 3 13 bodov
10 Hry pre nenáročných + zdrojáky 10 bodov
11 OpenGL, úvod 8 bodov
12 Faktúrka v4.0 + zdrojáky v MS Visual C++ 6.0 7 bodov
13 OpenGL – Intermezzo 1 7 bodov
14 OpenGL povinná literatúra 6 bodov
15 WinSocket Communication via VC++ 6 bodov
Najnovsie clanky
Kvalitné služby podľa skúseností iných - TopSlužby.sk
LOTR - Dve veže - Parodia - Scénka 2. časť
Neverwinter nights
Children Of Bodom-Hatebreeder
Kult Duny - 6. časť (Bonus)
Kult Duny - 5. časť (Filmy, Hry)
Dobré ráno. (morc certa, hora incerta...)
Kult Duny - 4. časť (Knihy 2/2)
Stretnutie Spoločenstva Tolkiena
GRAVE DIGGER – Knights Of The Cross
Kult Duny - 3. časť (Knihy 1/2)
Kult Duny - 2. časť (Pojmy)
Kult Duny - 1. časť (Úvod)
LOTR - Dve veže - Parodia - Scénka
Jackass
Vsetky clanky
Airsoft - Specnaz [4 clanky]
Básne [6 clankov]
Fantázia [4 clanky]
Filmy a DVD [51 clankov]
Hardware [10 clankov]
Hry [170 clankov]
Hry, návody [6 clankov]
Hudba [8 clankov]
Internet [7 clankov]
Knihy [6 clankov]
O AMME [4 clanky]
Pandemonium [10 clankov]
Poviedky [14 clankov]
Programy [18 clankov]
Rôzne [8 clankov]
Technické [3 clanky]
Úvahy [8 clankov]
Výuka [50 clankov]
Ako tlačiť s HP
Algoritmy v grafoch
Fake2
Faktúrka
Faktúrka v4.0 + zdrojáky v MS Visual C++ 6.0
Fract
HLSaver
Hry pre nenáročných + zdrojáky
Huffmanove kódovanie
IPicture2 & aggresiveoptimize.h
Maľované krížovky
MySQL (+ použitie Visual C++ a PHP)
OpenGL - GLWnd
OpenGL AMMO Saver
OpenGL povinná literatúra
OpenGL – Intermezzo 1
OpenGL, časť 10
OpenGL, časť 11
OpenGL, časť 12
OpenGL, časť 13
OpenGL, časť 14
OpenGL, časť 15
OpenGL, časť 16
OpenGL, časť 17
OpenGL, časť 18
OpenGL, časť 8
OpenGL, časť 9
Opengl – Cloth Simulation
RenameR
SkinMagic
WinSocket Communication via VC++
Údajové štruktúry
viac...
Zábava [5 clankov]
Zdravie [15 clankov]
Celkovy pocet clankov: 407
Základy HTML časť 1 
Výuka | Dna 14.2.2002 | Petr Grolmus | 14 znamok, priemer 3.50 | 3317 videni | 124 WAP videni

Zkratka HTML znamená Hypertext Markup Language. Jedná se o jazyk pro tvorbu dokumentů, který definuje vzhled textu (velikost nadpisů, použité fonty písma, okraje, ...). Jazyk HTML byl speciálně vyvinut (a stále se vyvíjí) za účelem publikování dokumentů na World Wide Webu.
Jak je již z názvu patrné, původně byl jazyk HTML vytvořen pro zobrazování textové dokumentace. Avšak během relativně krátké doby byla jeho původní funkce doplněna o další multimediální prvky (grafika, animace, hudba). Tím se znásobila jeho hodnota, coby média pro přenos informace. Dnes již patrně nikoho, kdo je obeznámen se službami Internetu nepřekvapí, že prakticky ihned je možné získat snímky z meteorologické stanice, uchvacující obrázky ze všech koutů naší planety, či vyslechnout skladby hudebních skupin a interpretů všech žánrů.
Naším cílem je seznámit Vás v několika tématicky odlišených lekcích s jazykem HTML (s jeho verzí 3.2) do té míry, abyste se dokázali orientovat ve zdrojových souborech HTML jazyka napsaných někým jiným, a abyste dokázali vytvořit vlastní kvalitní WWW stránky.
Zmíněné lekce obsahují množství příkladů a vždy po několika výukových lekcích (3 - 4 lekce) je vložena jedna lekce opakovací s příkladem, ve kterém jsou shrnuty nové poznatky. V opakovací lekci je též možné ověřit si znalosti z jayzka HTML v krátkém testu.


Zdrojový kód dokumentu psaném v jazyce HTML je prostý text psaný v ASCII formátu, který lze prohlížet i upravovat v libovolném textovém editoru. Jazyk HTML je jazykem typografickým, což znamená, že výsledný dokument pouze popisuje, ale jeho interpretace je přenechána až na cílový browser (čti brouzr = prohlížeč HTML dokumentů - např. Netscape Navigator, Internet Explorer nebo Mosaic).

Syntaxe příkazů



Úprava textu je realizována pomocí příkazů, které jsou uzavřeny do ostrých závorek "<" a ">". Většina těchto příkazů ohraničujících určitou část textu má na začátku umístěno počáteční a na konci koncové návěští příkazu. Koncové návěští se od počátečního liší pouze umístěním lomítka "/" před název návěští:

<H2> Obsah </H2>

Příkaz, který je tvořen počátečním a koncovým návěštím, se nazývá "kontejner". Avšak ne všechny příkazy jsou ukončovány koncovým návěštím. Jako příklad může sloužit příkaz <BR>, který si v textu vynucuje přechod na nový řádek.
Většinu příkazů lze upřesnit pomocí různých atributů. Atributy jsou psány hned za vlastní počáteční návěští (dovnitř ostré závorky). Hodnoty jsou atributům přiřazovány pomocí rovnítka. Příkladem může být příkaz <IMG> zobrazující obrázek, jehož umístění je uloženo v atributu SRC:

<IMG SRC="image/fotka.gif">

Je běžné, že příkazy HTML lze do sebe vkládat - mezi počáteční a koncové návěští jednoho příkazu se vloží příkaz jiný. Tímto způsobem je možné dosáhnout pozoruhodných výsledků v konečném vzhledu dokumentu.
Pokud prohlížeč některé návěští nezná, jednoduše jej ignoruje. Tedy starší prohlížeč, který nezná některá z nových rozšíření jazyka HTML neukončí svou činnost chybovým hlášením, ale přejde neznámé návěští bez povšimnutí.

URL adresa



Hlavním cílem prohlížečů je zajistit přístup ke zdrojům, které se mohou nacházet na libovolném serveru připojeným na Internet. Zdrojem je míněn objekt na Internetu a mohou jím být HTML dokumenty, obrázky, programy a mnoho dalších. K jednoznačné identifikaci těchto objektů slouží URL (Uniform Resource Locator) adresa.
Tyto URL adresy slouží jednak při zadávání adres v prohlížečích, pokud si chcete prohlédnout některý konkrétní dokument nebo do prohlížeče natáhnout nějaký jiný objekt, a jednak přímo v HTML dokumentech, kde slouží k realizaci hyperlinků a vkládání obrázků.
Části kompletní URL adresy:

  • přenosový protokol (např. http:, ftp:, news:, telnet:)
  • jméno serveru, port
  • přístupová cesta
  • jméno souboru




http://dione.zcu.cz/~indy/index.html
V tomto případě prohlížeč zobrazí HTML dokument index.html, který je uložen na serveru dione.zcu.cz v adresáři ~indy.

Při zadávání cest je nutno si dát pozor na to, že v jazyce HTML se k oddělení názvů adresářů používá místo obráceného lomítka ("") lomítko normální ("/").
Adresa objektu se nemusí vždy zadávat jako kompletní URL adresa, ale je možné používat i relativní adresy. Relativní adresování se obvykle používá v případech, kdy odkazujete na zdroje uložené přímo na vašem serveru. Základním adresářem je pak adresář, v němž je uložen aktuální dokument.



Příklad.
V rámci dokumentu:
http://dione.zcu.cz/~indy/index.html
má být zobrazena grafika:
http://dione.zcu.cz/~indy/Images/pinknet.gif

Potom v návěští IMG stačí zadat cestu:

<IMG SRC="Images/pinknet.gif">

Příkazy každého HTML dokumentu

Některá návěští jsou povinná a tvoří základní kostru každého HTML dokumentu. Celý dokument musí být uzavřen mezi návěští <HTML> a </HTML>. Kromě toho musí každý dokument mít svou hlavičku, která se označuje návěštím <HEAD> a </HEAD>. V hlavičkové části dokumentu je nutné pomocí návěští <TITLE> a </TITLE> zadat název dokumentu. Vlastní obsah dokumetu je pak zadáván do oblasti omezené návěštími <BODY> a </BODY>.
Dále by měl dokument, podle standardu verze 3.2 jazyka HTML, obsahovat oficiální identifikaci HTML dokumentu, která je specifikována v prvku komentáře uvozeného znakem "!" - vykřičník (viz. první řádka zdrojového souboru následujícího příkazu).



Příklad (nejjednodušší úplná definice stránky).

<!DOCTYPE HTML PUBLIC "-//IETF/DTD HTML v.m//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>


<! [--text_komentáře_1--] [--text_komentáře_2--] ... >
komentář je text, který přímo s obsahem HTML dokumentu nesouvisí a při zpracování prohlížečem je ignorován; kromě kometování částí dokumentu může mít i jiný specifický účel, jako např.:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML v.m//EN"> - oficiální identifikace HTML dokumentu
<!--#příkaz parametr=hodnota parametr=hodnota ... --> - příkaz pro server (serverem vkládané vsuvky - server nahradí tyto příkazy v těle dokumentu částmi HTML textu):
#echo var="proměnná" - nahradí vsuvku hodnotou proměnné (LAST_MODIFIED, DOCUMENT_NAME, DOCUMENT_URL, QUERY_STRING_UNESCAPED, DATE_LOCAL, DATE_GMT, ...)
#exec cgi="program" - nahradí vsuvku výstupem spuštěného programu nebo scriptu
#exec cmd="příkaz" - nahradí vsuvku výstupem příkazu standardního interpretu příkazů (shellu)
#size file="soubor" - nahradí vsuvku údajem o velikosti zadaného souboru
#flastmod file="soubor" - nahradí vsuvku dobou poslední modifikace zadaného souboru
#include file="soubor" - nahradí vsuvku obsahem souboru
#include virtual="url" - nahradí vsuvku obecným URL



<HTML> ... </HTML>
párová značka, která slouží k ohraničení každého dokumetu



<HEAD> ...prvky záhlaví... </HEAD>
párová značka, která vymezuje záhlaví dokumentu; obsahuje uspořádanou kolekci informací o dokumentu, která slouží výlučně pro prohlížecí program; do záhlaví dokumentu náleží prvky: <TITLE>, <BASE>, <ISINDEX>, <META>, <LINK>, <STYLE>, <SCRIPT>



<TITLE> ...text titulku... </TITLE>
párová značka, která definuje titulek dokumentu, každý HTML dokument musí obsahovat titulek TITLE (měl by obsahovat stručnou a výstižnou charakteristiku; použije se například v seznamu záložek, zobrazí se na horní liště okna prohlížecího programu a zachovává jej většina vyhledávacích programů; počet znaků by neměl překročit 64 znaků



<BODY background="url" bgcolor=" barva" text="barva" link=" barva" alink="barva" vlink=" barva">
...tělo dokumentu...
</BODY>
párová značka ohraničující celou hlavní část dokumentu
background URL obrázku použitého jako podklad
bgcolor barva podkladu dokumentu
text barva normálního textu
link barva hypertextových odkazů
alink barva aktivních (právě vybraných) odkazů
vlink barva již použitých odkazů

Odstavec v jazyce HTML



V jazyce HTML jsou mezery mezi řádky a několik po sobě jdoucích mezer mezi slovy ignorovány. Proto je nutné požadovanou strukturu dokumentu dotvořit až pomocí několika příkazů. Například formátování textu do odstavců je nutno zadávat příkazem <P> .. </P> (paragraph).

<BODY>
<P>Každý začátek je těžký.</P>
<P>Jazyk HTML je jednoduchý.</P>
</BODY>

<P nowrap align=[left | right | center | justify]>
...text odstavce...
</P>
párová značka která zahajuje nový odstavec textu, který je automaticky zalamován mezi okraje okna a před nějž se automaticky vkládá mezera o výšce zhruba půlřádku
nowrap zakazuje lámání řádků uvnitř odstavce (povoluje jen místa, kde je lámání vynuceno příkazem <BR>)
align ovlivňuje uspořádání odstavce:
left řádky se zarovnávají s levým okrajem (implicitní hodnota)
right řádky se zarovnávají k pravému okraji
center řádky budou vycentrované uprostřed
justify řádky budou zarovnány s oběma okraji

Jelikož nelze vkládat odstavce jeden do druhého, lze koncové návěští </P> vynechat. Prohlížeč automaticky uzavře odstavec, jakmile narazí na počáteční návěští nového odstavce.



Výsledné zobrazení následujících příkladů je totožné jako u příkladu předcházejícího:

<BODY>
<P>Každý začátek je těžký.
<P>Jazyk HTML je jednoduchý.
</BODY>


<BODY>
<P>Každý začátek je těžký. <P>Jazyk HTML je jednoduchý.
</BODY>


<BODY>
<P>


Každý začátek je těžký.
<P>


Jazyk HTML je jednoduchý.
</BODY>




Předformátovaný text



Jsou však případy, kdy automatická redukce mezer může mít nežádoucí účinek na celkový vzhled dokumentu. Klasickým příkladem je výpis zdrojového textu nějakého programu, kde se odsazování používá k jeho zpřehlednění. V tomto případě použijeme příkazu <PRE> (preformatted), který zobrazí text mezi návěštími přesně tak jak byl napsán, tj. včetně mezer mezi slovy i řádky. Kromě toho bude text vysázen v písmu s konstantní šířkou znaku.



<BODY>
<PRE>
Každý začátek je těžký.
Jazyk HTML je jednoduchý.
</PRE>
</BODY>

<PRE clear=[left | right | all] width=šířka bloku>
...předformátovaný text...
</PRE>
párová značka pro text, který má být zobrazen přesně tak, jak je napsán (včetně všech mezer, tabulátorů a nových řádků); je zobrazován fontem s konstantní šířkou znaku; v předformátovaném textu se smí použít pouze hyperlinky a frázové prvky; příkazy definující formátování textu nesmí být použity
clear způsob obtékání obrázků:
left obtékány budou pouze obrázky umístěné vlevo
right obtékány budou pouze obrázky umístěné vpravo
all pokračuje se až pod všemi obrázky
width šířka bloku - maximální počet znaků v řádku

Přechod na novou řádku



Příkaz <P> definuje nový odstavec, příkaz <BR> (break) způsobuje ukončení současné řádky a přesun na řádku další. Prohlížeč na konci odstavce ukončuje řetězec textu automaticky, ale v rámci odstavce lze vynutit přechod na novou řádku právě příkazem <BR>.


<BODY>
Každý začátek je těžký.<P>
Jazyk HTML je jednoduchý.<P>
Každý začátek je těžký.<BR>
Jazyk HTML je jednoduchý.
</BODY>



<BR clear=[left | right | all]>
clear specifikuje způsob obtékání obrázků
left obtékány budou obrázky umístěné vlevo
right obtékány budou obrázky umístěné vpravo
all pokračuje se až pod všemi obrázky


Vodorovná čára v textu



Dalším příkazem ke strukturování dokumentu je vodorovná čára <HR> (horizontal rule line). Podle nového standardu jayzka HTML lze ovlivnit i vzhled oddělovací čáry.



<BODY>
Normální čára
<HR>
Čára bez stínu
<HR NOSHADE>
Silnější čára
<HR SIZE=10>
Poloviční čára uprostřed
<HR WIDTH=50% ALIGN=center>
</BODY>


<HR size=tloušťka_čáry width= délka_čáry noshade src=" url_grafiky" align=[left | right | center] clear=[left | right | all]>
nepárová značka vytvářející vodorovnou čáru v textu
size tloušťka čáry v pixelech (zobrazovaných bodech)
width délka čáry udaná buď počtem pixelů nebo relativní šířkou v procentech (vztaženo na aktuální šířku okna)
noshade zákaz vytvoření stínu - čára se nebude jevit plasticky
src URL grafiky, kterou má být realizována dělící čára
align způsob umístění čáry v okně
left zarovnání k levému okraji (implicitní)
right zarovnání k pravému okraji
center zarovnání do středu

clear specifikuje způsob obtékání obrázků
left obtékány budou obrázky umístěné vlevo
right obtékány budou obrázky umístěné vpravo
all pokračuje se až pod všemi obrázky


Nadpisy



Příkazů k typografické úpravě textu v jazyce HTML existuje velmi mnoho. Pomocí příkazů pro tzv. "header" jsou označovány nadpisy. Jazyk HTML poskytuje šest velikostí nadpisů. Příkazy pro nadpis jsou definovány jako <H1> - <H6>, přičemž <H1> je největší a <H6> nejmenší nadpis.



<BODY>
Normální text
<H1>Velikost 1</H1>
<H2>Velikost 2</H2>
<H3>Velikost 3</H3>
<H4>Velikost 4</H4>
<H5>Velikost 5</H5>
<H6>Velikost 6</H6>
<H3 ALIGN=center>Vycentrovaný nadpis velikosti 3</H3>
</BODY>



<Hn src="url" nowrap align=[left | right | center | justify] clear=[left | right | all] dingbat=symbol seqnum=číslování skip=krok>

...text nadpisu...

</Hn>

párová značka sloužící pro specifikaci nadpisů v dokumentu; H1 je největší a H6 nejmenší písmo src URL adresa grafiky, která má být vložena před vlastní text nadpisu
nowrap zakazuje lámání řádků uvnitř nadpisu, s výjimkou míst vynuceného přechodu na nový řádek (<BR>)
align slouží pro určení pozice nadpisu ve vodorovném směru
left zarovnání vlevo (implicitní)
right zarovnání vpravo
center zarovnání na střed
justify zarovnání obou okrajů

clear specifikace způsobu obtékání obrázků
left obtékány budou obrázky uložené vlevo
right obtékány budou obrázky uložené vpravo
all pokračuje se až pod všemi obrázky
dingbat grafiký symbol vložený před text nadpisu; jména grafických symbolů jsou standardizována jako doplňek HTML (např. clock, mouse, ...)
seqnum určuje ručně pořadové číslo hlavičky v rámci automatického číslování hlaviček
skip zvětší hodnotu automatického čítače o uvedené číslo



Citáty



K označení delších citátů se používá příkaz <BLOCKQUOTE>, který je prohlížečem zobrazován jako text odsazený od okraje, nebo je zobrazen kurzívou, případně obojí. Ke zvýraznění jména autora nebo názvu citovaného díla lze použít příkaz <CITE>, který nevytvoří nový odstavec.
Pokud jde o zápis adres (především e-mailových), používá se příkaz <ADDRESS>. Ani při interpretaci tohoto návěští nevytvoří prohlížeč nový odstavec.



<BODY>
Z článku <CITE>Směle do Webu!</CITE> z časopisu HTML & Java (Chip SPECIAL) od vydavatelství Vogel Publishing, s.r.o.:

<BLOCKQUOTE>
Svět World Wide Webu je úžasný především proto, že každý uživatel Internetu zde může za dostupnou cenu publikovat vlastní dokumenty. Populární on-line služby typu CompuServe či AOL poskytují každému předplatiteli několik megabajtů na svých webovských serverech a další společnosti je budou jistě brzy následovat. Dokonce i klasičtí poskytovatelé Internetu už objevili přitažlivost obrovského trhu a začínají přehodnocovat svou cenovou politiku.
</BLOCKQUOTE>

Více informací o literatuře, týkající se nejen Webu, se dozvíte na adrese <ADDRESS>http://www.vogel.cz</ADDRESS>. </BODY>



<BLOCKQUOTE> ...citovaný text... </BLOCKQUOTE>
<BQ> ...citovaný text... </BQ>
párová značka pro citovaný text; typicky je text odsazen od levého i pravého okraje s mezerou před a za blokem citovaného textu; uvnitř tohoto příkazu je možné použít všechny ostatní značky


<CITE> ... </CITE>
odkaz na literaturu (používá se jako citace nebo odkazy na jiné zdroje)


<ADDRESS> ... </ADDRESS>
párová značka pro adresu; obsahuje informace jako adresa, podpis, autorství; text je zpravidla zobrazován kurzívou s odsazením od levého okraje


Další úpravy textu



Příkazy pro logické formátování textu jsou: <I> kurzíva (lehce položený text)
<B> tučné písmo
<TT> text s pevnou šířkou znaku
<S> přeškrtnutý text
<U> podtržený text
<KBD> formátování vstupů zadávaných z klávesnice
<VAR> označení názvů proměnných
<SAMP> označení výstupů programů
<CODE> vhodné pro zdrojové programy
<EM> zvýraznění textu kurzívou
<STRONG> tučný text
<SUP> horní index
<SUB> dolní index
<SMALL> malé písmo
<BIG> velké písmo
Všechny zde uvedené příkazy lze libovolně vnořovat a kombinovat.



<BODY>
<I>Návěští I</I>
<B>Návěští B</B>
<TT>Návěští TT</TT>
<S>Návěští S</S>
<U>Návěští U</U>
<KBD>Návěští KBD</KBD>
<VAR>Návěští VAR</VAR>
<SAMP>Návěští SAMP</SAMP>
<CODE>Návěští CODE</CODE>
<EM>Návěští EM</EM>
<STRONG>Návěští STRONG</STRONG>
<SUP>Návěští SUP</SUP>
<SUB>Návěští SUB</SUB>
<SMALL>Návěští SMALL</SMALL>
<BIG>Návěští BIG</BIG>
</BODY>




<B> ... </B>
tučné písmo


<I> ... </I>
kurzíva


<U> ... </U>
podtržené písmo


<TT> ... </TT>
písmo s pevnou šířkou znaku


<BIG> ... </BIG>
velké písmo


<SMALL> ... </SMALL>
malé písmo


<SUB> ... </SUB>
dolní index


<SUP> ... </SUP>
horní index


<STRIKE> ... </STRIKE>

<S> ... </S>
přeškrtnuté písmo


<EM> ... </EM>
zvýraznění textu (typicky kurzívou)


<STRONG> ... </STRONG>
zesílení textu (typicky tučným písmem)


<KBD> ... </KBD>
indikuje text zadávaný uživatelem z klávesnice


<CODE> ... </CODE>
program (př. zdrojový text programu)


<SAMP> ... </SAMP>
příklad (výstupy programů, apod.)


<VAR> ... </VAR>
indikuje proměnné nebo argumenty příkazů


<DFN> ... </DFN>
definice termínu



Možnosti formátování textu



Jazyk HTML je pro formátování bloků textu vybaven celou řadou příkazů a jejich parametrů. Jedním z parametrů mnoha příkazů je atribut ALIGN, který slouží především k zarovnávání textů podle okrajů a k obtékání obrázků. U drtivé většiny příkazů, které mají tento parametr, může nabývat hodnot left, right a center.



Vycentrování textu odstavce:


<P ALIGN="center">Text odstavce</P>


Velmi často je potřeba umístit stejným způsobem několik prvků dokumentu. Toho lze dosáhnout použitím příkazu <DIV>, přičemž u centrovaných prvků se nemusí zadávat parametr ALIGN, neboť jeho standardní hodnota je nastavena na center. Stejného efektu jako u příkazu <DIV> lze dosáhnout použitím příkazu <CENTER>, s tím rozdílem, že příkaz <CENTER> na rozdíl od <DIV> umožňuje pouze vycentrování prvků dokumentu (neumožňuje zarovnání vlevo či vpravo).
Pokud použijete atribut ALIGN u prvku umístěného v části dokumentu definovaného příkazy <DIV> nebo <CENTER>, má tento parametr vyšší prioritu a objekt bude zarovnán podle tohoto lokálního parametru.




<DIV class=chapter nowrap align=[ left | right | center | justify]>

...logická část textu...
</DIV>
párová značka sloužící k logickému členění textu na části class chapter označuje logickou část "kapitola" textu
nowrap zakazuje lámání textu uvnitř textu s výjimkou vynuceného přechodu na novou řádku příkazem <BR>
align určuje způsob zarovnávání textu
left zarovnávání vlevo (implicitní)
right zarovnávání vpravo
center centrování na střed
justify zarovnávání obou okrajů (pokud je to možné)


<CENTER> ... </CENTER>
vystředění textu a obrázků


Fonty



Pomocí příkazu FONT lze měnit velikost písma v rámci odstavce. Použitá velikost písma je definovaná pomocí parametru SIZE, který může nabývat hodnot 1 až 7, přičemž číslo 7 udává největší písmo. Standardně je velikost fontu nastavena na SIZE=3. Kromě absolutních údajů o velikosti písma lze zadávat také údaje relativní. V tomto případě předchází číslu značícímu velikost fontu znaménko "+" nebo "-", které znamená o kolik se má se font zvětšit (zmenšit) oproti současnému nastavení.
Standardní velikost písma lze pro daný dokument změnit pomocí příkazu BASEFONT.



<BODY>
<BASEFONT SIZE=4>Písmo velikosti 4<BR>
<FONT SIZE=+2>Přechodné písmo velikosti 6</FONT><BR>
A zase velikost 4
</BASEFONT>
</BODY>


<FONT size=n color="barva" face="typ">
...text...
</FONT>
výběr velikosti, barvy a typu písma
size velikost písma (nabývá hodnot od 1 do 7; 7 je největší písmo)
color barva písma
face typ písma


<BASEFONT size=n color="barva" face="typ">
...text...
</BASEFONT>
umožňuje předepsat velikost, barvu a typ základního písma
size velikost písma (nabývá hodnot od 1 do 7; 7 je největší písmo)
color barva písma
face typ písma

Nečíslovaný seznam



Jazyk HTML obsahuje několik druhů seznamů. Prvním z nich je nečíslovaný seznam <UL>. Jednotlivým položkám seznamu pak předchází uvozující příkaz <LI> (list item). Položky jsou následně automaticky odsazeny a je před ně umístěna odrážka. Návěští <LH> slouží k definici záhlaví (nadpisu) seznamu.


Příkladem může být obsah této lekce:

<BODY>
<UL>
<LH>Obsah lekce</LH>
<LI>nečíslovaný seznam</LI>
<LI>číslovaný seznam</LI>
<LI>seznam definic</LI>
<LI>seznam menu a adresářů</LI>
</UL>
</BODY>

Seznamy lze do sebe vkládat a prohlížeč bude položky tohoto "vnořeného" seznamu odsazovat vždy o jeden krok vpravo.


<BODY>
<UL>
<LI>nečíslovaný seznam</LI>
<UL>
<LI>příkaz <B>UL</B></LI>
<LI>příkaz <B>LI</B></LI>
</UL>
<LI>číslovaný seznam</LI>
<LI>seznam definic</LI>
<LI>seznam menu a adresářů</LI>
</UL>
</BODY>


<UL type=[disk | circle | square] dingbat="znak_odrážky" src="url_grafiky" plain compact wrap=[vert | horiz] align=[center | left | right | justify] clear=[left | right | all]>
...položky seznamu...
</UL>
párová značka vymezující neuspořádaný seznam; prvek <UL> musí obsahovat alespoň jeden prvek <LH> nebo <LI> type vzhled grafických symbolů zahajujících položky seznamu
disk plné tečky (implicitní)
circle prázdná kolečka
square čtverečky

dingbat znak použitý jako symbol zahajující položky seznamu
src URL grafiky, která bude použita jako symbol zahajující položky seznamu
plain bez úvodních symbolů před položkami seznamu
compact požadavek na úsporné provedení seznamu (záleží na prohlížeči)
wrap požadavek na vícesloupcové provedení seznamu (předpoklad, že položky jsou krátké)
vert uspořádání položek po sloupcích
horiz uspořádání položek po řádcích
align způsob horizontálního zarovnání seznamu
left zarovnání k levému okraji
right zarovnání k pravému okraji
center vycentrování doprostřed
justify zarovnání do bloku (víceřádkové položky)
clear způsob obtékání seznamu
left jen pro seznamy umístěné vlevo
right jen pro seznamy umístěné vpravo
all další text pokračuje až pod všemi položkami seznamu


<LH>
...text záhlaví seznamu...
</LH>
párová značka, která definuje záhlaví seznamu jako nadpis seznamu


<LI type=[disk | circle | square | a | A | i | I | 1] value=číslo_položky start=číslo align=[center | left | right | justify]>
...text položky seznamu...
</LI>
párová značka definující jednotlivé položky seznamu
type vzhled grafických symbolů zahajujících položky seznamu
disk plné tečky (implicitní)
circle prázdná kolečka
square čtverečky

type následující typy jsou rozšířením Netscape Navigatoru a platí pouze u číslovaných seznamů:
a číslovaní pomocí malých písmen abecedy
A číslování pomocí velkých písmen abecedy
i číslování pomocí římských číslic (malá písmena)
I číslování pomocí římských číslic (velká písmena)
1 číslování číslicemi (implicitní)
start nastavuje počáteční hodnotu u číslovaného seznamu (rozšíření Netscape Navigatoru)
value pořadové číslo položky v uspořádaném seznamu (jen u číslovaného seznamu)
align způsob horizontálního zarovnání obsahu této položky seznamu
left zarovnání k levému okraji
right zarovnání k pravému okraji
center vycentrování doprostřed
justify zarovnání do bloku (víceřádkové položky)



Číslovaný seznam



Číslované seznamy jsou definovány obdobně jako nečíslované. Jediným rozdílem je použití příkazu <OL> místo <UL>. Použití příkazů <LH> a <LI> je totožné jako u nečíslovaného seznamu.


<BODY>
<OL>
<LI> položka</LI>
<LI> položka</LI>
<LI> položka</LI>
</OL>
</BODY>


<OL type=[a | A | i | I | 1] start|seqnum=počáteční_hodnota continue compact align=[center | left | right | justify] clear=[left | right | all]>
...položky seznamu...
</OL>
párová značka vymezující uspořádaný seznam; prvek <OL> musí obsahovat alespoň jeden prvek <LH> nebo <LI> type způsob číslování položek seznamu
a malými písmeny abecedy
A velkými písmeny abecedy
i římskými číslicemi (malá písmena)
I římskými číslicemi (velká písmena)
1 arabskými číslicemi (implicitní)
start počáteční hodnota číslování položek seznamu (rozšíření Netscape)
seqnum počáteční hodnota číslování položek seznamu
continue zajišťuje návaznost na předchozí seznam (čítač si ponechává aktuální hodnotu)
compact požadavek na úsporné provedení seznamu (záleží na prohlížeči)
align způsob horizontálního zarovnání seznamu
left zarovnání k levému okraji
right zarovnání k pravému okraji
center vycentrování doprostřed
justify zarovnání do bloku (víceřádkové položky)
clear způsob obtékání seznamu
left jen pro seznamy umístěné vlevo
right jen pro seznamy umístěné vpravo
all další text pokračuje až pod všemi položkami seznamu

Seznam definic



Seznamy definic slouží k definování pojmů. Tento seznam je uvozen příkazem <DL> (definition list). Mezi návěštími tohoto příkazu jsou umístěny návěští dalších dvou. Jedná se o definici pojmu <DT> (definition term) a vysvětlení pojmu <DD>. Tyto dva příkazy jsou od sebe opticky odlišeny a jejich realizace je ponechána na prohlížeč.



<BODY>
<DL>
<DT><B>B</B></DT>
<DD>použité písmo u tohoto příkazu bude zvýrazněno tučně </DD>
<DT><B>I</B></DT>
<DD>použité písmo u tohoto příkazu bude zvýrazněno kurzívou </DD>
</DL>
</BODY>


<DL compact clear=[left | right | all]>
...položky seznamu...
</DL>
párová značka vymezující specifický typ seznamu; každá jeho položka se skládá ze dvou částí: pojmu uvedeného značkou <DT> a vysvětlení pojmu uvedeného značkou <DD>
compact požadavek na úsporné provedení seznamu (záleží na prohlížeči)
clear způsob obtékání seznamu
left jen pro seznamy umístěné vlevo
right jen pro seznamy umístěné vpravo
all další text pokračuje až pod všemi položkami seznamu


<DT> ...pojem... </DT>
párová značka obsahující oddělený pojem v seznamu definic


<DD> ...vysvětlení pojmu... </DD>
párová značka obsahující definici pojmu v seznamu definic; v <DL> seznamu musí prvku <DD> předcházet alespoň jeden prvek <DT>.


Pou�ita literat�ra

Heiko Knappe, Till S.Schwalm: HTML a Java - Chip Special (katal.č.:CH036)
z tohoto zdroje byla čerpďż˝na předev��m nďż˝plň vďż˝ech vďż˝ukovďż˝ch lekcďż˝
(c) 1996 Vydavatelstvďż˝ Vogel Publishing, s.r.o. v licenci německďż˝ho nakladatelstvďż˝ Vogel International Verlag GmbH

Pavel Mikle: Referenčnďż˝ přďż˝ručka jazyka HTML
kniha obsahuje seznam přďż˝kazů jazyka HTML verze 3.2
(c) 1996 Unis Publishing s.r.o.

Petr Lampa: Syst�m WWW (8.d�l) - Connect 11/96
tento člďż˝nek (strana 38 - 40) se zabďż˝vďż˝ nestandradnďż˝mi roz��řenďż˝mi jazyka HTML
vydalo nakladatelstvďż˝ Computer Press, s.r.o.


Najnovsie clanky od tohto redaktora
Podobne clanky