Difference between revisions 184715 and 184716 on plwikibooks

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:

<source lang="html4strict">
<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>
</source>

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 <code><div></code> <s>z</s> 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:
<pre>
aside, article, footer, header, section, nav, hgroup, figure {display:block}
</pre>

Przykład sekcji z artykułami:
<source lang="html5">
<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>
</source>

<small>Czy mógłbyś pomóc mi w tworzeniu podr. o XML?</small>
Wygląda to tak:


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

_____________________________
WPROWADZENIE DO SYSTEMU DEBIAN - SPIS TREŚCI

===Wstęp===
# [[Debian/Wstęp|Wstęp do treści]]
# [[Debian/Wady i zalety|Wady i zalety]]
===Instalacja i konfiguracja===
# Woody
## [[Debian/Bardzo Szczegółowy Przewodnik po Instalacji Debiana 3.0|Bardzo Szczegółowy Przewodnik po Instalacji Debiana 3.0]]
## [[Debian/Instalacja Debiana na nForce2 i dyskach SATA|Instalacja Debiana na nForce2 i dyskach SATA]]
## [[Bardzo szczegółowy przewodnik po aktualizacji i kompilacji jądra w Debianie]]
# Sarge
## [[Debian/Instalacja Debiana 3.1 sarge z płyty CD w trybie "linux" na architekturze i386 |Instalacja Debiana 3.1 sarge z płyty CD w trybie "linux" na architekturze i386]]
# AMD64
## [[Debian/Instalacja Debiana AMD64 na notebookach Acer Aspire 502x|Instalacja Debiana AMD64 na notebookach Acer Aspire 502x]]
# [[Debian - uniwersalna instalacja|Uniwersalna instalacja]]
# [[Aptosid - czyli Debian sid krok po kroku dla każdego/Programy użytkowe|Lista programów]]
===Tryb tekstowy===
#[[Ubuntu/Pierwszy raz z trybem tekstowym|Jak go nie używać]] {{kompletność krótka|100%|21.03.2012}}
#[[Ubuntu/Podstawowe polecenia|Podstawowe polecenia]] {{kompletność krótka|100%|12.07.2010}}
#[[Ubuntu/Dostęp do konta root|Dostęp do konta root]] {{kompletność krótka|100%|13.07.2010}}
#[[Ubuntu/Zarządzanie pakietami|Zarządzanie pakietami]] {{kompletność krótka|100%|13.07.2010}}
#[[Ubuntu/Kompilacja programów ze źródeł|Kompilacja programów ze źródeł]] {{kompletność krótka|100%|14.07.2010}}
#[[Ubuntu/Kompilacja jądra|Kompilacja jądra]] {{kompletność krótka|100%|14.07.2010}}