Formatowanie treści#

Blok grupujący#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div>...</div>

Możliwe jest podanie atrybutu align="wartość" o następujących wartościach:

Blok grupujący (sekcja, warstwa), jest we współczesnym semantycznym webmasterstwie jednym z najbardziej fundamentalnych poleceń języka (X)HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów dokumentu. Na blokach formatowanych za pomocą kaskadowych arkuszy stylów oparte są dziś nowoczesne układy stron (layouty).

Obecnie atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Element div pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocześnie), a następnie nadać mu jakiś rodzaj formatowania, np. wyśrodkowanie lub dosunięcie do prawego marginesu, kolor tekstu, obramowanie itd.

Blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielone od siebie znakami nowej linii, ale nie są dodawane linijki przerwy.

Oto proste przykłady zastosowania:

Kod:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div style="text-align: right; color: green;">Ten wydzielony blok tekstu został dosunięty do prawego marginesu. Tekst zawarty w elemencie powinien być koloru zielonego.</div><br />
<div style="text-align: left; color: blue;">Ten wydzielony blok tekstu został dosunięty do prawego marginesu. Tekst zawarty w elemencie powinien być koloru niebieskiego.</div><br />
<div style="text-align: justify; border: 2px dashed black; padding: 20px;">Z kolei ten wydzielony blok tekstu powinien zostać wyjustowany (wyrównany do obu marginesów jednocześnie). Efekt powinniśmy zauważyć jeśli napisany przez nas tekst jest dostatecznie długi, dlatego też staram się go przeciągać w nieskończoność... Dodatkowo ustawiłem w nim obramowanie oraz odstępy wewnętrzne.</div>

Efekt:

Ten wydzielony blok tekstu został dosunięty do prawego marginesu. Tekst zawarty w elemencie powinien być koloru zielonego.

Ten wydzielony blok tekstu został dosunięty do prawego marginesu. Tekst zawarty w elemencie powinien być koloru niebieskiego.

Z kolei ten wydzielony blok tekstu powinien zostać wyjustowany (wyrównany do obu marginesów jednocześnie). Efekt powinniśmy zauważyć jeśli napisany przez nas tekst jest dostatecznie długi, dlatego też staram się go przeciągać w nieskończoność... Dodatkowo ustawiłem w nim obramowanie oraz odstępy wewnętrzne.

Kod:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div style="text-align: center;">
	<p>W tym bloku umieściłem obrazek z tekstem. Dodatkowo całość została wycentrowana.</p>
	<img src="../../pliki/html/formatowanietresci/blok/orzel.gif" alt="Orzeł bielik" />
</div>

Efekt:

W tym bloku umieściłem akapit wraz z obrazkiem. Dodatkowo całość została wycentrowana.

Orzeł bielik
Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Formatowanie treści (H1) Blok grupujący (H2)