Tematy: Tytuły (nagłówki) | Znacznik akapitu | Znacznik końca wiersza | Pozioma linia | Blok preformatowany | Blok cytowany | Adres | Blok dokumentu | Wykazy | Obramowanie formularza | Zbiór elementów multimedialnych | Elementy liniowe | Zakres | Przełamanie wyrazu |Cytat w wierszu | Czcionki | Komentarz

O rozdziale (aktualizacja 10.03.2013): 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, akapity, poziome linie czy bloki elementów multimedialnych. 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, dwie poziome linie 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:

Przykłady:

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:

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:

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:

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 i HTML 5 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 i HTML 5 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:

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 wcięciem i z automatycznie nadanym cudzysłowem:

(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:

Informacje o ADDRESS

Blok dokumentu

Polecenie div (blok, sekcja) jest we współczesnym semantycznym webmasterstwie jednym z fundamentalnych poleceń języka HTML, które odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach pozycjonowanych i formatowanych za pomocą kaskadowych arkuszy stylów oparte są nowoczesne układy stron (ang. layouty). w HTML 5 polecenie div utraciło jednak część swoich funkcji, gdyż autorzy specyfikacji postanowili wydzielić specjalną grupę poleceń - header, footer, nav, section, article, hgroup, aside (mówimy o nich w rozdziale o strukturze dokumentu) - które tworzą szkielet strony, natomiast poleceniu div pozostawili uzupełniające zadanie tworzenia pozostałych bloków elementów.

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

A oto wynik:

Informacje o FIELDSET

Informacje o LEGEND

Zbiór elementów multimedialnych

Nowe w HTML 5 polecenie figure definiuje zbiór elementów we wspólnym kontenerze, szczególnie multimedialnych, jak obrazy, wideo, diagramy, i niektórych tekstowych, jak np. listingi. Kontener taki można formatować, a formatowanie obejmuje wtedy wszystki elementy, np. wyrównanie na stronie, obramowanie czy margines.

Poleceniu towarzyszy zazwyczaj uzupełniające polecenie figcaption zawierające tytuł kontenera - od jego położenia w stosunku do grafik zależy pozycja podpisu (nad lub pod zbiorem elementów).