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