Blok Grupujący - Formatowanie Treści - Kurs HTML - WebRef

Trang chủ » Html Block Tekstu » Blok Grupujący - Formatowanie Treści - Kurs HTML - WebRef

Có thể bạn quan tâm

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:

  • left - ustawienie domyślne, wyrównanie do lewego marginesu
  • right - wyrównanie do prawego marginesu
  • center - wyśrodkowanie
  • justify - wyjustowanie (wyrównanie do obu marginesów jednocześnie)

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ł bielikPasek społecznościowy
  • Nagłówki
  • Tekst preformatowany

Từ khóa » Html Block Tekstu