Elementy blokowe
Nagłówki sekcji: <h1>
, <h2>
, ..., <h6>

Nagłówki (ang. heading) dzielą dokument na logiczne fragmenty. Można nagłówki rozumieć jako tytuły rozdziałów, sekcji, podsekcji, itp.
Występują w sześciu „stopniach”, od <h1>
(najsilniejszy podział) do <h6>
(najdrobniejszy podział).
Nagłówki powinny być ułożone wg hierarchii. Sekcja, której tytuł nadaje <h1>
powinna być podzielona za pomocą <h2>
, a każda z tych sekcji przez
<h3>
, itd. Nie powinno się „przeskakiwać” stopni nagłówków, tj. po <h1>
nie powinno się użyć od razu np. <h4>
.
Pierwszy to tytuł/temat danej strony, np.:
<h1>
Elementy blokowe</h1>
Kolejnym stopniem nagłówków dzieli się stronę na rozdziały:
<h2>
Nagłówki</h2>
...<h2>
Wypunktowywanie</h2>
...<h2>
Tekst preformatowany</h2>
Ponieważ fragment o wypunktowaniach opisuje kilka ich rodzajów, podzieliliśmy go jeszcze bardziej szczegółowo:
<h2>
Wypunktowywanie</h2>
<h3>
Listy nieuporządkowane</h3>
...<h3>
Listy uporządkowane</h3>
...<h3>
Listy definicji</h3>
...
Numeracja nagłówków nie oznacza ich kolejności, ani ważności. Oznacza ich hierarchię — <h3>
dzieli tekst należący do <h2>
, <h2>
dzieli
tekst należący do <h1>
, <h1>
dzieli <body>
.
Akapity: <p>
i łamanie linii: <br />
Akapit oznacza element <p>
(paragraph). Tekst jest automatycznie łamany (zawijany) do szerokości akapitu, dlatego nie powinno się wymuszać przejść do nowej linii
z wyjątkiem wierszy (liryki), linii dialogów i miejsc gdzie jest to nieuniknione, np. w adresach pocztowych wewnątrz elementu <address>
.
Listy
XHTML ma trzy typy list — nieuporządkowane, uporządkowane i listy definicji. Elementy list mogą zawierać w sobie tekst lub elementy blokowe, w tym także inne listy.
Listy są elementem blokowym i nie mogą być wewnątrz akapitu <p>
. Gdy umieszczasz listy w listach, to wewnątrz,
a nie pomiędzy elementami <li>
.
Listy nieuporządkowane: <ul>
Używa się ich, gdy kolejność elementów listy jest bez znaczenia. Np. menu nawigacyjne jest nieuporządkowaną listą linków.
Listę definiuje się elementem <ul>
(unordered list), a poszczególne jej elementy przez <li>
(list item). Bezpośrednio
w <ul>
nie może być żadnych innych elementów niż <li>
. Jeśli chcesz zrobić zagnieżdżoną listę, umieszczaj listy wewnątrz <li>
.
<p>
Kupić:</p>
<ul>
<li>
cukier puder,</li>
<li>
taśmę klejącą,</li>
<li>
wykałaczki.</li>
</ul>
Wygląd wypunktowania listy można zmienić za pomocą CSS.
Listy uporządkowane: <ol>
List uporządkowanych używamy gdy kolejność elementów ma znaczenie dla treści. Np. spis treści jest uporządkowaną listą elementów.
Listę uporządkowaną definiuje się elementem <ol>
(ordered list), a poszczególne jej elementy przez <li>
(list item).
<h1>
Spis treści</h1>
<ol>
<li>
Idą</li>
<li>
Walczą</li>
<li>
Idą</li>
<li>
Wrzucają pierścień</li>
<li>
Odpływają łódką</li>
</ol>
Można tworzyć bardziej złożone sposoby numerowania za pomocą generowanych liczników? CSS.
Elementy listy będą automatycznie ponumerowane przez przeglądarkę. Można zmienić sposób numeracji (na np. litery albo liczby rzymskie) za pomocą CSS.
Listy definicji: <dl>
Listy definicji (<dl>
— definition list) zawierają dwa rodzaje elementów — termin (<dt>
— definition term) i jego objaśnienie
(<dd>
— definition description). Przydatne są do tworzenia słowniczka, FAQ. Jeden termin może mieć wiele definicji i jedna definicja może opisywać wiele terminów (to
oznacza swobodność powtarzania <dt>
i <dd>
).
<dl>
<dt>
Kermit</dt>
<dd>
Zielona, gadająca, żaba</dd>
<dt>
Pigi</dt>
<dd>
Świnia jaka jest każdy widzi. W dodatku zakochana w zielonej żabie</dd>
</dl>
Termin i definicję można umieścić w tej samej linii za pomocą display:run-in
lub float
.
Cytowany fragment: <blockquote>
Używany jest do cytowania długich fragmentów tekstu. Wewnątrz <blockquote>
należy używać elementów blokowych (paragrafów i innych elementów formatujących tekst).
<blockquote>
posiada atrybut cite
, za pomocą którego można definiować źródło (URI) pochodzenia cytatu. Jak
dotąd nie ma wielu przeglądarek, które by go poprawnie interpretowały, ale za pomocą CSS lub skryptów
Javascript można ten atrybut wykorzystać.
<p><cite>
Adam Małysz</cite>
kiedyś powiedział:</p>
<blockquote cite="http://pl.wikiquote.org/wiki/Adam_Małysz">
<p>
Zdawałem sobie sprawę, że muszę wszystko postawić na jedną kartę. W związku z tym, że byłem w formie, wystarczyło skoczyć bardzo spokojnie. I tak też się stało. Pojechałem bez zbędnego podniecania się, spokojnie i...wyszedł mi wtedy chyba jeden z lepszych skoków.</p>
<p>
Kiedy wylądowałem, wiedziałem, że jestem bardzo blisko tego, co sobie postanowiłem. Byłem szczęśliwy. Wojtek Skupień złapał mnie i podniósł do góry. Podbiegli inni członkowie naszej ekipy, wszyscy mi gratulowali.</p>
<p>
Spełniło się moje kolejne marzenie, nie zapomnę tego nigdy. Na ryneczku w Lahti, na specjalnie ustawionej scenie, w blaskach świateł i przy asyście tysięcy ludzi zabrzmiał Mazurek Dąbrowskiego. Widziałem biało-czerwone flagi, kibiców. Bardzo się wtedy wzruszyłem.</p>
</blockquote>
Krótkie cytaty można oznaczać za pomocą <q>
.
Oddzielanie elementów: <hr />
Czasem nie da się właściwie podzielić dokumentu za pomocą nagłówków i wtedy z pomocą przychodzi (pusty) element <hr />
.
Wstawia poziomą linię oznaczającą podział.
Za pomocą CSS można zmienić wygląd <hr />
na dowolną ornamentację.
<p>
Treść dokumentu</p>
<hr />
<p>
Stopka z informacją o prawie autorskim</p>
<hr />
nie może być umieszczany wewnątrz paragrafów. Służy on do ich oddzielania.
Tekst preformatowany: <pre>
Element <pre>
służy do wyświetlania tekstu z zachowaniem wszystkich spacji i znaków podziału wiersza dokładnie tak, jak są zapisane w kodzie źródłowym HTML. Zazwyczaj używa się go
w połączeniu z <code>
lub <samp>
:
<pre>
<code>
10 PRINT "HOME"
20 PRINT "SWEET"
30 GOTO 10
</code>
</pre>
Dane kontaktowe autora: <address>
Element ten definiuje adres związany ze stroną, na której jest umieszczony, np. dane kontaktowe z autora danej strony lub znaczącej jej części. Może zawierać jedynie elementy liniowe, dlatego
wstawiając wielolinijkowy adres należy posłużyć się elementem <br />
:
<address>
Jan Kowalski<br />
ul. Długa 5/17<br />
00-005 Warszawa</address>
Za pomocą elementu <address>
można określać nie tylko adres pocztowy, ale również różne sposoby kontaktu, np. adres e-mail, numer telefonu czy adres/numer komunikatora
internetowego.
Odradzane jest używanie <address>
do wszystkich danych adresowych. Do
oznaczenia innych adresów można użyć np. <p class="address">
Sekcja: <div>
Służy do grupowania elementów i dzielenia strony na sekcje, jeśli nie ma bardziej właściwego elementu do tego celu.
<div class="naglowek-z-podtytulem">
<h1>
Cukier krzepi</h1>
<p>
Strona dla prawdziwych twardzieli!</p>
</div>
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 10.12.2006, 17:16