Elementy blokowe i liniowe

O rozdziale: W tej części mówimy o poleceniach języka HTML, które wprowadzają tzw. elementy blokowe, będące podstawowymi, strukturalnymi składnikami budulcowymi strony, jak śródtytuły czy akapity. Elementy blokowe są takimi fragmentami, które zajmują samodzielne miejsce - nie można umieścić obok siebie, w jednej linii, dwóch elementów blokowych, np. dwa akapity czy dwa śródtytuły mogą występować zawsze jeden pod drugim. Przeciwieństwem elementów blokowych są elementy wierszowe (liniowe), które mogą występować obok siebie, w jednym wierszu, jak <span> czy <small>.

Tytuły (nagłówki)

Tytuły, zwane też śródtytułami lub nagłówkami (heading), są podstawowymi elementami dzielącymi dokument na logiczne części. Pełnią one analogiczną rolę, jak nagłówki w gazecie. W języku HTML mamy do dyspozycji sześć poziomów tytułów, które można stosować hierarchicznie - tytuł stopnia drugiego, z punktu widzenia logiki treści, jest podrzędny w stosunku do tytułu stopnia pierwszego, a trzeci - w stosunku do drugiego. 

Kod:

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

Przykłady:

To jest tytuł pierwszego stopnia

To jest tytuł drugiego stopnia

To jest tytuł trzeciego stopnia

To jest tytuł czwartego stopnia

To jest tytuł piątego stopnia

To jest tytuł szóstego stopnia

HTML zrezygnował z formatowania śródtytułów za pomocą atrybutów polecenia Hx - można je za to swobodnie, i znacznie bogaciej, formatować za pomocą stylów, określając atrybuty czcionki, wyrównanie i wcięcie tekstu, kolor, marginesy i obramowania itd. Przykład prostego formatowania widzi Czytelnik w tym rozdziale - śródtytuły dowolnego szczebla mają kropkowane podkreślenie subtelnie wyróżniające poszczególne sekcje, zdefiniowane w zewnętrznym arkuszu stylów za pomocą klasy .tyt { border-bottom: dotted 1px black; padding-bottom:10px; }. Po zapisaniu definicji klasy w arkuszu jest ona za każdym razem przywoływana poleceniem <hx class="tyt">treść śródtytułu</hx>.

Kilka innych przykładów, z użyciem stylu lokalnego:

<h1 style="text-align: right; ">Śródtytuł wyrównany do prawego marginesu</h1>

Śródtytuł wyrównany do prawego marginesu

<h1 style="text-align: center; ">Śródtytuł ustawiony na środku</h1>

Śródtytuł ustawiony na środku

<h1 style="letter-spacing: 1mm; border: 3px double; padding: 10px; ">Obramowany śródtytuł z literami co 1mm</h1>

Obramowany śródtytuł z literami co 1mm

<h1 style="font-variant: small-caps; text-align: center; color: darkseagreen; background-color: black; ">Śródtytuł w kolorze darkseagreen na tle black</h1>

Śródtytuł w kolorze darkseagreen na tle black

Jak widać, śródtytuły powinniśmy traktować jako podstawowe elementy strukturalne dokumentu, natomiast cała strona prezentacyjna, wizualna, jest przenoszona do kaskadowych arkuszy stylów, za pomocą których możemy swobodnie manipulować tymi elementami, mając nieograniczoną wręcz swobodę ich wizualizacji. Mam nadzieję, że te uwagi wystarczająco dobitnie podkreślają fundamentalną rolę stylów we współczesnym webmasterstwie i konieczność ich biegłego opanowania.

Informacje o Hx

Znacznik akapitu

Akapit jest podstawowym elementem zawierającym tekst w dokumentach HTML i służy do wydzielania fragmentów zawierających jakąś zwartą myśl. Obok śródtytułów jest najważniejszym elementem strukturalnym dokumentu HTML.

Kod:

<p> </p>

Przykład:

To jest nieco dłuższy akapit, który powinien zająć więcej niż jeden wiersz, aby można było poprawnie zobrazować stosowanie tego znacznika w dokumencie internetowym. No, chyba już. Wiersz został przeniesiony.

To jest następny akapit, oddzielony od poprzedniego interlinią. Każdy akapit jest objęty parą znaczników.

Dawniej do poziomego wyrównania akapitu (np. do prawego marginesu strony) stosowane atrybut align, jednak w HTML 4 i XHTML 1.0 został on uznany za przestarzały, a z XHTML 1.1 został wycofany. Wszelkie formatowanie, nieporównanie bogatsze, jest wykonywane za pomocą stylów, podobnie jak w opisanych wyżej śródtytułach.

Kilka innych przykładów formatowania, z użyciem stylu lokalnego:

<p style="text-align: right; ">Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu Akapit wyrównany do prawego marginesu</p>

Akapit wyrównany do prawego marginesu

<p style="text-align: center; ">Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. Akapit ustawiony na środku. </p1>

Akapit ustawiony na środku.

<p style="word-spacing:1em; border: 1px dashed brown; padding:5px; ">Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli</p>

Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli

<p style="width: 50%; text-indent: 5em; line-height: 200%; text-align: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szerokości 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójną wysokością wiersza</p>

Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza Akapit w niebieskim kolorze, wyrównany do obu marginesów i z wcięciem pierwszego wiersza i podwójną wysokością wiersza

Jak widać, użytkownik ma pełną swobodę formatowania akapitu, ograniczoną jedynie własną wyobraźnią i bieżącymi potrzebami.

Informacje o P

Znacznik końca wiersza

Znacznik końca wiersza służy do przełamywania wiersza i przenoszenia treści do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii, w przeciwieństwie do polecenia akapitu, które wprowadza dodatkowy odstęp między dwoma akapitami z tekstem.

Kod:

<br>

Przykład:

Pierwszy akapit, w którym zastosowaliśmy przenoszenie wiersza. Uwaga, przenosimy...
Następny wiersz tego samego akapitu, wpisywany po znaczniku <br>, dzięki któremu został utworzony.

A teraz następny akapit, w którym zastosujemy...
ten sam manewr.
W taki sposób możemy skracać wiersze akapitu i przenosić je niżej, co bardzo się przyda we współczesnej poezji
pisanej
często
w słupkach (taka moda)

Pić
albo nie pić,
oto jest pytanie...
a odpowiedzi
udzieli Ci na nie...
stosowna komisja parlamentarna Sejmu RP

Dawniej stosowano niekiedy kilka kolejnych poleceń <br> do zwiększania pionowych odstępów między elementami, jednak nie jest to technika zalecana i powinno się w tym celu stosować odstępy definiowane za pomocą stylów, np. margin.

W starszych wersjach HTML wykorzystywano atrybut clear służący do "zrzucania" w dół elementów liniowych, aby nie występowały obok siebie, jednak atrybut ten, choć jest obecny w specyfikacji HTML 4 i XHTML 1.0, jest uznany za przestarzały, a z XHTML 1.1 został usunięty. Zaleca się stosowanie stylów.

Informacje o BR

Pozioma linia

Pozioma linia to po prostu kreska ciągnąca się przez całą szerokość okna lub pojemnika, w którym została umieszczona.

Kod:

<hr>

Przykład:

W starszych wersjach HTML stosowano szereg atrybutów, które zachowały się jeszcze w HTML 4 i XHTML 1.0, ale tylko w wersjach Transition i Frameset, natomiast w wersji Strict są to atrybuty uznane za przestarzałe, zaś w XHTML 1.1 już w ogóle nie istnieją. Są to atrybuty noshade (pozbawienie cieniowania), width (szerokość), size (grubość) i align (poziome wyrównanie). Formatowanie poziomych linii zostało przeniesione do stylów CSS.

Kilka innych przykładów formatowania, z użyciem stylu lokalnego:

Linii możemy nadać dowolną grubość i kolor: <hr style="height: 5px; color: red">

Linia może mieć określoną długość w pikselach lub procentach: <hr style="width: 50%; ">

Linia może być dosunięta do prawego marginesu: <hr style="width: 50%; text-align: right; ">

Informacje o HR

Blok preformatowany

Blok preformatowany jest blokiem tekstu, w którym uwzględniane są białe znaki znajdujące się w kodzie źródłowym, np. dodatkowe spacje, punkty tabulacji, znaki końca akapitu itd., które są pomijane w innych poleceniach, np. w akapicie.

Kod:

<pre> </pre>

Rezultat:

Tekst preformatowany, wyświetlany czcionką monotypiczną

(o stałej szerokości znaku)

pozwala wprowadzać dodatkowe spacje,

uwzględnia także

punkty tabulacji,

i znaki końca akapitu.

a1 a2 a3 a4

b1 b2 b3 b4

Porównaj ten sam tekst umieszczony w ramach akapitu - jak widać, wszystkie białe znaki zostały "zlane".

Tekst preformatowany, wyświetlany czcionką monotypiczną (o stałej szerokości znaku) pozwala wprowadzać dodatkowe spacje, uwzględnia także punkty tabulacji, i znaki końca akapitu. a1 a2 a3 a4 b1 b2 b3 b4

Zwróć uwagę, że jeśli umieścimy w obrębie pre zbyt długi wiersz, w oknie przeglądarki pojawi się dolny suwak, gdyż wiersz nie jest zawinięty.

Informacje o PRE

Blok cytowany

<blockquote> </blockquote>

Bloku cytowanego możemy użyć przy powoływaniu się na jakieś źródło. Cytat jest wyświetlany z uwzględnieniem tabulacji, zaś tekst powinien się znajdować w jakimś elemencie blokowym, np. w akapicie:

<p>Wydaje mi się, że wiersz kończy się fragmentem:</p>
<blockquote>
<p>"Soft you now, the fair Ophelia.<br>
Nymph, in thy orisons,<br>
be all my sins remembered."</p>
</blockquote>
<p>Ale nie mam pewności.</p>

Wydaje mi się, że wiersz kończy się fragmentem:

"Soft you now, the fair Ophelia.
Nymph, in thy orisons,
be all my sins remembered."

Ale nie mam pewności.

(Przykład zaczerpnięty z HTML Reference Library)

Informacje o BLOCKQUOTE

Adres

Polecenie (wyświetlane za pomocą kursywy) jest często stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej, np.:

Kod:

<address> </address>

Rezultat:

Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A.

Informacje o ADDRESS

Blok dokumentu

Polecenie div (blok, sekcja) jest we współczesnym semantycznym webmasterstwie jednym z najbardziej fundamentalnym poleceń języka 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 (ang. layouty).

<div> </div>

Polecenie 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. środkowanie lub dosunięcie do prawego marginesu, nadanie koloru itd.

<div style="text-align:right">zawartość bloku</div>

Wykaz

• pierwszy punkt wykazu

• drugi punkt wykazu

• trzeci punkt wykazu

jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst, jakiś tam tekst.

Informacje o DIV

Wykazy (listy)

Do elementów blokowych zaliczane są wykazy, zwane też potocznie listami. Ze względu na obszerność tematu poświęcamy im osobny rozdział w kursie.

Obramowanie formularza

W specyfikacji HTML 4 pojawiło się polecenie fieldset, które tworzy obramowanie dla znajdujących się w jego ramach elementów formularza - każdy element, jak przyciski radiowe, pole tekstowe czy rozwijana lista wyboru, może być objęty taką ramką.

<fieldset>definicja elementu formularza</fieldset>

Samo obramowanie można oczywiście uzyskać za pomocą stylów, więc wprowadzanie nowego polecenia nie byłoby zasadne. Rzeczywisty efekt widzimy dopiero po połączeniu go ze znacznikiem <legend>.

<fieldset>
<legend>Ankieta</legend>
<textarea rows="3" cols="30">Wpisz opinię...</textarea>
</fieldset>

A oto wynik:

Ankieta

Informacje o FIELDSET

Informacje o LEGEND

Elementy liniowe

Zakres

Zakres definiowany jest za pomocą polecenia <span> </span>. Jest elementem wydzielającym jakiś fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle.

<span> </span>

<p>W tym akapicie <span style="font-weight:bold; color:blue">ten fragment jest pogrubiony i w niebieskim kolorze</span>, natomiast <span style="font-style:italic; background-color:green">ten fragment jest pochylony i na zielonym tle</span>, a tu jest koniec akapitu.</p>

W tym akapicie ten fragment jest pogrubiony i w niebieskim kolorze, natomiast ten fragment jest pochylony i na zielonym tle, a tu jest koniec akapitu.

Informacje o SPAN

Cytat w wierszu

Nowym poleceniem HTML jest krótki cytat w ramach wiersza (in-line quote), wprowadzany za pomocą <q></q> (porównaj je z blokiem cytowanym).

Polecenie ma automatycznie obejmować cytowany tekst cudzysłowem, przy czym od definicji języka zależy sposób wyświetlania cudzysłowu. Na przykład, dla języka angielskiego, zagnieżdżone polecenie:

John said, <Q lang="en">I saw Lucy at lunch, she says <Q lang="en">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

powinno dać w efekcie

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

Jak widać, "zewnętrzne" Q tworzy cudzysłów " ", a "wewnętrzne" - apostrofy ' '.

Uwaga: w przykładzie cudzysłowy zostały wprowadzone ręcznie.

Polecenie to interpretują Netscape 6 i Opera 5, ale wprowadzają w obu miejscach cudzysłów.

I saw Lucy at lunch, she says Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road.

(przykład pochodzi z HTML Reference Library)

Informacje o Q

Czcionki

Elementami liniowymi są fizyczne i logiczne style czcionek - poświęcamy im odrębny rozdział.

Komentarz

<!-- ... -->

Polecenie pozwala wstawiać do dokumentu komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację dla samego autora lub osoby czytającej, gdy zajrzy do źródła dokumentu. Na przykład:

<!-- Ten dokument jest w trakcie budowania. Najprawdopodobniej następne zmiany pojawią się w przyszłym