HTML/Układ strony

Pierwsze co zwykle przychodzi nam do głowy, to jak to wszystko "poukładać" na stronie - gdzie umieścimy logo a gdzie treść i odsyłacze do strony?

HTML pozwala to wykonać za pomocą tabeli, poniżej przykład dwukolumnowego podziału strony:

<table width="100%" cellspacing="0" cellpadding="10">
<tr>
<td bgcolor="kolor góra" colspan="2" align="center" valign="middle">Tutaj można umieścić logo serwisu</td>
</tr>
<tr>
<td bgcolor="kolor menu" width="Tutaj wpisz szerokość menu (np.: 150)" valign="top">
Tu umieszcza się odsyłacze spisu treści
</td>
<td bgcolor="kolor strony" valign="top">

Tu wpisuje się treść strony

</td>
</tr>
</table>

Strona z pozoru będzie wyglądać dobrze, jednak nie jest to dobry sposób tworzenia układu strony - tabele już od dawna nie są tworzone do robienia układu strony, przez to często będziemy natrafiać na problemy ("rozsypka" w przeglądarkach). Robiło się je mniej więcej 10 lat temu, kiedy to był jedyny sposób na "organizację" treści na stronie. Dlatego w naszym poradniku skupimy się na nauce używania bloku

z ze współpracą CSS.

Elementy semantyczne w HTML5

Jeżeli tworzysz stronę w rozwijanym jeszcze języku HTML5, stronę tworzysz za pomocą elementów semantycznych: musisz na początku w CSS dodać dyrektywę, że mają być wyśw. blokowo:

aside, article, footer, header, section, nav, hgroup, figure {display:block}

Przykład sekcji z artykułami:

<section id="artykuly">
        <!-- Tag article wskazujący miejsce gdzie znajduje się artykuł. Dodatkowo ma przypisane id, aby skrypt do scrollowania działał -->
        <article>
            <h2>...</h2>
 
            <div class="linia"></div>
 
            <div class="szkielet clear">
            <!-- Tag figure oznacza jakieś zewnętrzne dane (zazwyczaj obrazek), które są częścią artykułu -->
            	<figure>
            		<a href="#"><img src="..." /></a>
            	</figure>
            	<p>...</p>
            	<p>...</p>
            </div>
        </article>
 
        <div class="linia"></div>
 
        <article>
            <h2>...</h2>
 
            <div class="linia"></div>
 
            <div class="szkielet clear">
                <figure>
                	<a href="#"><img src="..." /></a>
                </figure>
                <p>...</p>
                <p>...</p>
            </div>
        </article>
</section>

Tak prawidłowo wygląda układ strony na blokach: