Tvorba webu krok za krokem
od HTML až po SEO a webhosting
Blokové elementy v HTML
Blokové elementy jsou elementy, za kterými se zalomí řádek. Příkladem může být odstavec p nebo nadpis h1.
P - odstavec
Tagem p se vytvářejí odstavce. Odstavce mají před sebou a za sebou mezeru a můžeme je zapisovat párově i nepárově.
<p>Blokové elementy: H1-H6, P, BR, DIV...</p>
<p>Za blokovými elementy se zalamuje řádek.</p>
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>
Br - nový řádek
Tag br se používá k přechodu na další řádek. Na rozdíl od odstavce nemá před sebou ani za sebou mezeru a je nepárový.
Blokové elementy:<br>h1-h6<br>p<br>br<br>div.
clear
Atribut clear zabraňuje plovoucím objektům přetékat, nejčastější plovoucí objekty jsou obrázky.
Hodnoty:
- left
- right
- all
<img src="moje-moto.jpg" align="left" alt="Moje motorka">
<br clear="all">Tento text se zobrazí až pod obrázkem.
Stejného efektu bychom dosáhli použitím clear="left", protože obrázek je zarovnaný vlevo. Kdyby byl zarovnaný vpravo, použili bychom clear="right".
Bez použití clear.
<img src="moje-moto.jpg" align="left" alt="Moje motorka">
<br>Tento text se zobrazí vedle obrázku.
Div - oddíl
Div je neutrální tag a využívá se především ve spojení s CSS. Div může 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>
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 zobrazí stejně, jak je napsán ve zdroji, včetně mezer a nových řádků.
Pre se zobrazuje neproporcionálním písmem.
<pre>
body {
font-family : "Times New Roman", Times, serif;
color : black;
background-color : white;
}
</pre>
Address - adresa
Address by se měl používat k výpisu adresy, nicméně se příliš nepoužívá. Address se zobrazuje kurzívou.
<address>
Maťěj Novák<br>
Horní Dolní<br>
Pardubice<br>
53355
</address>
Blockquote - citace
Blockquote se používá pro delší citace. Zleva i zprava je odsazený.
<blockquote>
Blokové elementy jsou elementy za, kterými se zalamuje řádek, příkladem může být
odstavec p, nebo nadpis h1.
</blockquote>
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 po něm by měly následovat nadpisy nižších úrovní.
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>
Hr - vodorovná čára
Hr je vodorovná čára. Pokud není nastaveno jinak, zobrazuje se přes celou stránku.
Pomocí atributů můžeme nastavit šíř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 jeho použití 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">
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>
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>
Reklama
Copyright (c) 2004 Tvorba webu – Kontakt – Mapa webu