Členenie textu

Medzi základné nástroje členenia textu patria najmä nadpisy, odseky, ručné zalomenie riadkov, separátory (vodorovné čiary). O každom z nich si niečo málo povieme a na záver vypracujete jednoduché zadanie.

Nadpisy

Poznáme 6 úrovní nadpisov, ktoré sú reprezentované značkami <h1></h1> až <h6></h6>, pričom h1 predstavuje nadpis 1. úrovne, najdôležitejší a nadpis h6 predstavuje nadpis s najmenším významom.

Pre zobrazenie nadpisov a ich veľkosť prehliadače používajú určité prednastavené hodnoty. Keďže my sa naučíme pracovať s CSS, tak si budeme väčšinou určovať vlastný štýl jednotlivých nadpisov.

Zo štandardných atribútov budeme najčastejšie využívať class (trieda), id (identifikátor), style (inline štýl) a title (titulok).

Jednoduchý príklad:

<h1>Nadpis 1. úrovne</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>
<h2>Nadpis 2. úrovne</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis. Nulla quis est nulla. Nulla gravida nisl at metus mattis id blandit quam mattis. Donec eget gravida turpis. In nisi risus, iaculis non ultricies consequat, tempor nec turpis. Integer aliquet mi ut felis scelerisque in convallis enim consequat. Fusce sed elit ipsum, id ullamcorper enim. Sed erat odio, varius et pharetra vitae, ullamcorper ac erat. Curabitur ut neque id orci porta suscipit sed malesuada purus. Suspendisse tempus massa id mi accumsan commodo ornare dolor elementum.
</p>
<h1>Nadpis 3. úrovne</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>
<h1>Nadpis 4. úrovne</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>
<h1>Nadpis 3. úrovne</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>
<h1>Nadpis 4. úrovne</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>

Nezabúdajte na logické členenie aj v prípade nadpisov. Nie že začnete nadpisom 5. úrovne :)

Odseky a ručné zalomenie riadka

O odsekoch, ktoré sú reprezentované prvkom <p> </p> a ručnom zalomení riadka prostredníctvom <br /> sme hovorili v článku Značky v jazyku XHTML.

Vodorovné čiary

Vodorovné čiary - separátory predstavujú jednoduchý prostriedok, ako rozdeliť text do určitých ogických celkov. Ich vzhľad môžeme opäť nastaviť pomocou CSS.

Jednoduchý príklad:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>
<hr /> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla mauris, dictum nec placerat non, pretium nec lacus. Quisque nec mauris aliquam urna malesuada imperdiet. Praesent vel eros vitae velit porttitor dapibus eu ac arcu. Etiam metus urna, scelerisque fringilla congue eget, congue vitae nisi. Nulla tristique iaculis sapien quis ultrices. Duis sed neque ligula, quis tempus diam. Ut vitae est felis.
</p>

Úloha:

Vyberte si ľubovoľnú tému, ktorá vás zaujíma - hudba, šport, technika, ... a vytvorte jednoduchú stránku s názvom moje-hobby.html, v ktorej správne použijete členenie textu. Pokojne sa môžete pokúsiť aj o vloženie obrázku (pozrite ukážku Značky v jazyku XHTML).

V ďalšom článku sa budeme zaoberať formátovaním textu.