Difference between revisions 184659 and 184713 on plwikibooks

< previous diff
next diff >
Wikipedysta:Kompowiec2/Brudnopis2
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> z<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>

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]]
(contracted; show full)
#[[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}}