3.1 Uspořádání textu

Zobrazit na projektor

Text lze na stránce uspořádat několika způsoby:

Pro zalomení řádku se používá tag <br>.

Běžně se text uspořádává do odstavců pomocí párového tagu <p> a </p>. 

Pokud chceme formátovat pouze část textu, označíme ji pomocí párového tagu <span> a <span>.

 

Do těla svojí nové stránky přenes následující text (Ctrl+c, Ctrl+v)
a rozděl ho do několika odstavců:

 

Malá pohádka o řepě - František Hrubín (Špalíček veršů a pohádek)
Dědek řepu zasadil,
u pole se posadil,
čekal, čekal,
mráz ho lekal,
sluníčka se bál,
dešti jenom lál.
Bez večeře, bez oběda
čeká dědeček,
najednou se hlína zvedá,
roste kopeček.
"Bábo, roste řepa!"
"Prosím tě, co vidíš!"
"Bábo, což jsi slepá?"
"Dědku, ty mě šidíš!"
Zavolali vnučku,
vnučka pejska,
pejsek kočku,
kočka myš.
Chytli se a čekají,
šepty, šepty šeptají -
neslyšíš?
Myšce byla dlouhá chvíle,
hopsala si rozpustile,
trhla kočkou,
kočka pejskem,
pejsek vnučkou,
vnučka bábou,
bába dědkem -
dědek prázdné ruce měl,
nikoho se nedržel,
udělali bác...
Kopeček se ještě chvěje,
jak se pod ním krtek směje.

Rozšíření: 

K uspořádání textu a dalších objektů do bloků se používá párový tag <div> a </div>. 
Pomocí tohoto tagu se např. na stránkách vytvářejí sloupce, nebo se celý obsah stránky centruje na doprostřed. 

Bloky vytvořené pomocí tagů  <div> a </div> se do sebe mohou podle potřeby vkládat. V jednom "divu" mohou být vloženy další "divy", a v nich případně další... Musí však tvořit logickou hierarchickou stukturu:

 Každý "div" může mít nastavenou šířku a další vlastnosti.
- nastavení šířky divu v pixelech: <div style= "width: 600px;">     ...   </div>
- nastavení šířky divu v procentech: <div style= "width: 80%;">     ...   </div>

- nastavení výšky divu v pixelech: <div style= "height: 300px;">     ...   </div>