Bloky

V╣e, za Φφm se zalamuje °ßdka (krom∞ seznam∙ a tabulek). Jde o r∙znΘ oddφly textu a odstavce.

Tok textu

Pokud se text nevejde na °ßdek, automaticky se zalomφ. Slovo, kterΘ by se tam neve╣lo, se prost∞ zobrazφ na zaΦßtku dal╣φho °ßdku. Proto nenφ v HTML nutnΘ ukonΦovat °ßdky. StaΦφ pouze vymezit odstavce a jinΘ bloky textu.

p

Odstavec (angl. paragraph). Zßkladnφ formßtovacφ tag. ZnaΦka <p> se nachßzφ na zaΦßtku ka╛dΘho odstavce. P∙vodn∞ ╣lo o tag nepßrov², ale postupn∞ se zaΦala pou╛φvat i znaΦka </p>, kterß tag ukonΦila. Nov∞j╣φ specifikace vy╛adujφ ukonΦovacφ tag.

Text novΘho odstavce v╛dy zaΦφnß nov² °ßdek a konec odstavce konΦφ °ßdek. Klasick² odstavec v HTML mß p°ed sebou a za sebou navφc vertikßlnφ mezeru, kterß v∞t╣inou p°esn∞ odpovφdß v²╣ce jednoho °ßdku, co╛ odpovφdß anglosaskΘ norm∞. (TΘto mezery se lze zbavit pomocφ CSS stylu <p style="margin-top: 0px; margin-bottom: 0px">.) Pokud se vyskytnou za sebou dva odstavce nebo jinΘ elementy s vertikßlnφ mezerou, v²╣ka mezery se nesΦφtß.

Tag <p> je velmi Φasto pou╛φvßn HTML editory.

Texty, kterΘ majφ odstavce znaΦenΘ pomocφ tagu <p>, jsou dob°e transformovatelnΘ do jin²ch formßt∙ a dob°e se s nimi pracuje pomocφ CSS. Nejen proto pou╛φvßnφ tagu <p> velmi doporuΦuji.

P°φklad: <p align="right">Odstavec zarovnan² doprava.</p>

br

╪ßdkov² zlom (angl. break). Zp∙sobuje okam╛itΘ ukonΦenφ °ßdku. P°φpadn² dal╣φ text pokraΦuje na novΘ °ßdce.

Je d∙le╛itΘ pochopit rozdφl mezi <p> a <br>.

• V zobrazenφ je jedin² rozdφl: <br> kolem sebe ned∞lß vertikßlnφ mezery.
• Z typografickΘho hlediska odpovφdß <br> "m∞kkΘmu entru".
• Pokud je tag <br> pou╛it uprost°ed odstavce, dal╣φ text se pova╛uje za pokraΦovßnφ toho odstavce, nikoli za nov². Tak╛e kup°φkladu pokraΦuje nastavenφ zarovnßnφ.

V n∞kter²ch wysiwyg editorech se m∞kk² enter vytvß°φ kombinacφ Shift + Enter nebo Ctrl + Shift + Enter.

Clear

Jako jedin² HTML tag mß <br> atributy reagujφcφ na plovoucφ (obtΘkanΘ) objekty. ObtΘkan²mi objekty jsou nejΦast∞ji obrßzky nebo tabulky zarovnanΘ k jednΘ stran∞. Vlo╛enφm <br> s atributem clear se dß nastavit, aby se dal╣φ text zobrazil a╛ tam, kde zobrazenφ °ßdk∙ nebude ovliv≥ovßno p°φpadn²mi obtΘkan²mi objekty.

P°φklad: <img align="right" alt="obrßzek zarovnan² vpravo"><br clear="right">Text zaΦφnß a╛ pod obtΘkan²m obrßzkem.

Poznßmka: m∞l jsem tu dlouho chybu, kdy╛ jsem mφsto hodnoty "all" uvßd∞l "both". Spletl jsem si to s CSS. Za upozorn∞nφ d∞kuji dopisovatel∙m RP a PH. 

div

Div se nejΦast∞ji p°eklßdß jako oddφl. Zahrnuje v sob∞ libovoln∞ velkou oblast textu vΦetn∞ nadpis∙, obrßzk∙ a tabulek. Nez°φdka se celß strßnka vyskytuje uvnit° jednoho elementu <div>.

P°ed a za oddφlem se zalomφ °ßdek. V tomto smyslu je <div> velmi podobn² odstavci (<p>).

Tag <div> byl do HTML p°idßn zejmΘna kv∙li kaskßdov²m styl∙m. V tom se zase podobß tagu <span>, kter² takΘ p°ibyl kv∙li styl∙m. Rozdφl mezi <div> a <span> je v tom, ╛e <div> je blokov² element (zp∙sobuje zalomenφ °ßdku p°ed a po), kde╛to <span> je in-line element (°ßdkov²).

Krom∞ obecn²ch atribut∙ (v p°φpad∞ <div> velmi d∙le╛it²ch) lze pou╛φt atribut align (zarovnßnφ), kterΘ mß stejnΘ hodnoty jako v p°φpad∞ tagu <p> (odstavce).

center

Vycentrovßnφ libovoln∞ velkΘho obsahu. Dosahuje stejnΘho efektu jako <div align=center>. NedoporuΦuji jeho pou╛φvßnφ. Smysl m∞l pouze v dobßch, kdy n∞kterΘ prohlφ╛eΦe nepodporovaly <div>.

h1 a╛ h6

Nadpisy (angl. heading) jsou vlastn∞ zvlß╣tnφm druhem odstavc∙ (tag <p>). Je rozli╣ovßno ╣est stup≥∙ nadpis∙. 

Nadpisy se automaticky zobrazujφ tuΦn∞, r∙zn²m stupn∞m pφsma (odpovφdß stupni u tagu <font>) a majφ kolem sebe vertikßlnφ mezery. Nenφ tedy t°eba je formßtovat ruΦn∞.

Tagy <h1> a╛ <h6> majφ jedin² atribut (krom∞ obecn²ch): align se stejn²mi hodnotami, jako mß odstavec.

Mnozφ auto°i pro nadpisy nepou╛φvajφ tyto tagy <hx>, ale normßlnφ odstavce (tag <p>), kter²m nastavφ velikost a °ez (pomocφ tag∙ <font>, <b> a <i>). To je vcelku chyba, zejmΘna proto╛e si tak p°id∞lßvajφ spoustu prßce. Vzhled nadpis∙ lze snadno p°edefinovat pomocφ CSS.

Text se sprßvn∞ nadefinovan²mi nadpisy se snßze p°evßdφ do jin²ch formßt∙ (rtp, pdf, doc). V∞t╣ina HTML editor∙ umo╛≥uje snadnΘ zadßvßnφ nadpisov²ch tag∙. N∞kterΘ programy na zßklad∞ nadpis∙ dokß╛φ automaticky vytvß°et obsah dokumentu. N∞kterΘ vyhledßvaΦe si takΘ v╣φmajφ tag∙ nadpis∙ a p°iklßdajφ jejich textu v∞t╣φ vßhu.

blockquote

Blokovß citace, kterß se p∙vodn∞ pou╛φvala pro del╣φ kusy citacφ (na rozdφl od krßtk²ch, kterΘ realizoval tag <cite>).

<blockquote> se zobrazuje jako odstavec s v∞t╣φm lev²m a prav²m odsazenφm (odsazenφ znamenß, ╛e je po okrajφch odstavce prßzdnΘ mφsto). Dφky odsazenφ se tag <blockquote> v praxi pou╛φvß ani ne tak pro citaci, jako spφ╣e pro odsazenφ. V dne╣nφch prohlφ╛eΦφch je odsazenφ <blockquote> p°ibli╛n∞ 40 pixel∙. Odsazenφ se zv∞t╣φ, pokud se tag pou╛ije vφcekrßt za sebou.

Tag <blockquote> nemß ╛ßdnΘ zvlß╣tnφ atributy krom∞ obecn²ch.

P°ed p°φchodem CSS byl tag <blockquote> jedin²m zp∙sobem, jak odsadit odstavec. Dnes doporuΦuji rad∞ji pou╛itφ normßlnφho odstavce <p> s deklaracφ stylu. Nßsledujφcφ dva elementy se tedy zobrazφ stejn∞:

<blockquote>Odsazenφ blokovou citacφ </blockquote>
<p style="margin-left: 40px; margin-right: 40px">Odsazenφ pomocφ stylu</p>

address

Vymezenφ adresy. Dal╣φ tag, kter² se Φasem ukßzal b²t zbyteΦn²m. Zobrazuje se stejn∞ jako odstavec, akorßt ╛e kurzφvou. Nemß ╛ßdnΘ atributy.

pre

P°edformßtovan² text. Tento tag umo╛≥uje rychlΘ publikovßnφ textov²ch soubor∙, kterΘ u╛ jsou formßtovanΘ pomocφ mezer a konc∙ °ßdek.

Uvnit° tagu <pre> toti╛ neplatφ zßkladnφ pravidlo HTML syntaxe, kterΘ konec °ßdku bere jako mezeru a skupinu mezer chßpe jako mezeru jednu. Tak╛e p°φpadnΘ nßsobnΘ mezery a konce °ßdk∙ se v prohlφ╛eΦi zobrazφ stejn∞ jako ve zdroji.

P°φpadn² konec °ßdku bezprost°edn∞ po znaΦce <pre> a p°ed znaΦkou </pre> je zanedbßvßn, aby nevznikaly ne╛ßdoucφ vertikßlnφ mezery.

Aby se pφsmenka zarovnßvala pod sebe, zobrazujφ prohlφ╛eΦe p°edformßtovan² text neproporcionßlnφm pφsmem (nejΦast∞ji Courier), kterΘ mß v╣echny znaky stejn∞ ╣irokΘ. Zobrazenφ fontu se dß p°edefinovat pomocφ CSS.

hr

Vodorovnß Φßra (angl. horizontal rule). Bez atribut∙ se zobrazφ stφnovan∞ ╣edß p°es celou ╣φ°ku strßnky. Atributy ale mohou jejφ vzhled ovlivnit.

P°φklad: <hr width="50" size="50" color="red" align="center" noshade> zobrazφ vycentrovan² Φerven² Φtverec.

O tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek. Zßklady HTML CSS FrontPage Hledßnφ

HTML  p°φruΦka http://dusan.pc-slany.cz/internet/html/

Pφ╣e Yuh∙: autorova strßnka, mail: dusan@pc-slany.cz