Elementy blokowe

Zamienić @@ na @H

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

Aby zobaczyć rodzaje list, kliknij tutaj.

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ł).

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/>

Nie stosuj wielokrotnego <br/> do robienia odstępów. Odstępy ustala się za pomocą marginpaddingCSS

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 Bug w IE

XHTML ma trzy typy list — nieuporządkowane, uporządkowanelisty 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.

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). np. Menu jest listą definicyjną. Jeśli chcesz zrobić zagnieżdżoną listę, umieszczaj listy wewnątrz <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

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/> Bug w IE

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ę (na przykład pionową).

 <p>Treść dokumentu</p>
 <hr/>
 <p>Stopka z informacją o prawie autorskim</p>

<hr/> nie może być umieszczany wewnątrz akapitó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>

<div> jest bardzo przydatny do nakładania kilku różnych efektów CSS.

Czasem jest błędnie nazywany warstwą.

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>


Zmodyfikowano: 11.09.2011, 11:29
submit