Strukturování dokumentu

Obsah lekce:

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  ..  (paragraph).

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

Výsledek:

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

Jazyk HTML je jednoduchý.

...text odstavce...

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í  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>
Každý začátek je těžký.
Jazyk HTML je jednoduchý.
</BODY>

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

<BODY>

Každý

začátek je těžký.

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.

Každý začátek je těžký.
     Jazyk HTML je jednoduchý.

</PRE>
</BODY>

Se zobrazí jako:

Každý začátek je těžký.
     Jazyk HTML je jednoduchý.

<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  definuje nový odstavec, příkaz   (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  .

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

Se zobrazí jako:

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

Jazyk HTML je jednoduchý.

Každý začátek je těžký.
Jazyk HTML je jednoduchý.

 

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>

Výsledek:

Normální čára

Čára bez stínu

Silnější čára

Poloviční čára uprostřed

<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