Blokové elementy v HTML

Blokové elementy jsou elementy za, kterými se zalamuje řádek příkladem může být odstavec p nebo nadpis h1.

P - odstavec

Tagem p se vytvářejí odstavce, odstavce májí před a pod sebou mezeru, odstavec můžeme zapisovat párově i nepárově.

<p>Blokové elementy: H1-H6, P, BR, DIV...</p>
<p>Za blokovými elementy se zalamuje řádek.</p>

zobrazit výsledek

Align

Odstavce můžeme zarovnávat pomocí atributu align.

Hodnoty align mohou být: left, center, right.

<p align="left">Odstavec zarovnaný vlevo (výchozí hodnota).</p>
<p align="center">Odstavec zarovnaný na střed.</p>
<p align="right">Odstavec zarovnaný vpravo.</p>

zobrazit výsledek

Br - nový řádek

Tag br se používá na přechod na další řádek, narozdíl od odstavce nemá před a pod sebbou mezeru a je nepárový.

Blokové elementy:<br>h1-h6<br>p<br>br<br>div.

zobrazit výsledek

clear

Atribut clear zabraňuje plovoucím objektům přetékat, nejčastější plovoucí objekty jsou obrázky.

Hodnoty:

<img src="moje-moto.jpg" align="left" alt="Moje motorka">
<br clear="all">Tento text se zobrazí až pod obrázkem.

zobrazit výsledek

Stejný efekt by mělo použítí clear="left", protože obrázek je zarovnaný vlevo, kdyby byl obrázek zarovnán vpravo použilo by se clear="right"

Bez použití clear.

<img src="moje-moto.jpg" align="left" alt="Moje motorka">
<br>Tento text se zobrazí vedle obrázku.

zobrazit výsledek

Div - oddíl

Div je neutrální tag a využívá se předevšem ve spojení s css, div může v sobě obsahovat libovolný obsah například několik odstavců.

U divu můžeme používat atribut align stejně jako se používá u odstavců p.

<div align="center">
<p>První odstavec.</p>
<p>Druhý odstavec.</p>
<p>A třetí odstavec.</p>
</div>

zobrazit výsledek

V příkladu div zarovná všechny odstavce na střed.

Pre - přeformátovaný text

Nejlepší využití tagu pre je při psaní zdrojových kódů, text uzavřený mezi tagy pre se bude zobrazovat stejně jak je napsán ve zdroji zachovají se mezery a nové řádky.

Pre se zobrazuje neproporcionálním písmem.

<pre>
body {
    font-family : "Times New Roman", Times, serif;
    color : black;
    background-color : white;
}
</pre>

zobrazit výsledek

Address - adresa

Address by se měl používat k výpisu adresy, nicméně se moc nepoužívá, address se zobrazuje kurzívou.

<address>
Maťěj Novák<br>
Horní Dolní<br>
Pardubice<br>
53355
</address>

zobrazit výsledek

Blockquote - citace

Blockquote se používá pro zvýraznění delší citace, blockquote je zleva i zprava odsazen mezerou.

<blockquote>
Blokové elementy jsou elementy za, kterými se zalamuje řádek, příkladem může být odstavec p, nebo nadpis h1.
</blockquote>

zobrazit výsledek

H1-h6 - nadpisy

H1 až h6 jsou nadpisy, h1 je nadpis první úrovně a h6 je nadpis šesté úrovně.

Nadpisy by měly mít určitou strukturu, nadpis h1 by měl být první a teprve až po něm by měly následovat další nadpisy nižších úrovních.

U nadpisů se může používat atribut align stejně jako u odstavců.

<h1>Nadpis 1. úrovně.</h1>
<h2>Nadpis 2. úrovně.</h2>
<h3>Nadpis 3. úrovně.</h3>
<h4>Nadpis 4. úrovně.</h4>
<h5>Nadpis 5. úrovně.</h5>
<h6>Nadpis 6. úrovně.</h6>

zobrazit výsledek

Hr - vodorovná čára

Hr je vodorovná čára, pokud není nastaveno jinak zobrazuje se přes celou stránku.

Pomocí atributů můžeme nastvit: šířku, výšku, zarovnání a stín.

Width

Width nastavuje šířku čáry, jako hodnota se uvádějí pixely.

Size

Atributem size se nastavuje výška vodorovné čáry jako hodnota se uvádějí pixely.

Align

Align je zarovnání stejné jako u odstavců.

Noshade

Noshade se zapisuje bez hodnoty, při použití noshade se u čáry nezobrazí stín

Příklad použití hr

<hr>
<hr noshade>
<hr noshade size="5">
<hr width="50%">
<hr width="50%" align="left">

zobrazit výsledek

Center - zarovnání na střed

Center je to samé jako <div align="center">střed</div>.

<center>Text ve středu řádku.</center>
<div align="center">Text ve středu řádku.</div>

zobrazit výsledek

Příklad s bloky

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Příklad použití bloků</title>
</head>
<body>
<h1>Příklad použití bloků</h1>
<p>Krátký odstavec textu následuje hned za nadpisem.</p>
<hr noshade>
<h2>Nadpis druhé úrovně</h2>
<p>Další krátký odstavec textu následuje hned za nadpisem druhé úrovně.<br>Br zalomuje řádek.</p>
<hr>
<h3>Trocha css</h3>
<p>Vypíšeme trochu css kódu, který nás teď nemusí zajímat.</p>
<pre>
body {
    font-family : "Times New Roman", Times, serif;
    color : black;
    background-color : white;
}
</pre>
<hr size="5">
<h3>Citace</h3>
<blockquote>Blokové elementy jsou elementy za, kterými se zalamuje řádek příkladem může být odstavec p nebo nadpis h1.</blockquote>
<h3>Adresa</h3>
<address>
Maťěj Novák<br>
Horní Dolní<br>
Pardubice<br>
53355
</address>
<hr>
<p align="center">Copyright (c) 2004 nekdo@nekde.cz.</p>
</body>
</html>
 

zobrazit příklad

Reklama

Webhosting C4



Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu - RSS