Spis treści Skorowidz Poziom główny Poziom nadrzędny Wstecz Dalej

Formowanie bloków tekstu

Powiązanie sensu z układem graficznym

Akapity

W dokumentach zawierających tekst ciągły, przeznaczony do czytania, podstawowa treść jest formowana w akapity. Z punktu widzenia autora tekstu akapit powinien stanowić całość pod względem treściowym. W skład akapitu powinny wchodzić pełne zdania, wyrażające lub rozwijające pewną myśl lub wątek logiczny.

Z punktu widzenia formatowania dokumentu, akapit stanowi blok tekstu, którego wyróżnienie ma wspomagać proces czytania i rozumienia przedstawionych w nim treści. Zatem znakowanie początku i końca akapitu winno być zgodne z podziałem tekstu na porcje zamknięte pod względem treściowym, tak jak to omówiono powyżej.

W dokumencie HTML akapit oznacza się za pomocą elementu p (ang. paragraph). Zatem dla złożenia akapitu zawierającego tekst potrzebne jest polecenie <p>tekst</p>

Przy automatycznym składaniu tekstu w akapity podział na wiersze wynika z szerokości obszaru tekstu i właściwości czcionki. W niektórych sytuacjach wskazane jest zakończenie wiersza w ramach akapitu. Służy do tego osobne polecenie <br /> (ang. break).

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Oprócz elementu p, przeznaczonego do oznaczania akapitów, język HTML zawiera kilka innych elementów formujących bloki tekstu, przeznaczonych do zastosowania w szczególnych okolicznościach. Zostaną one omówione poniżej.

Cytaty blokowe

Element <blockquote>...</blockquote> jest zaprojektowany do wyróżniania w tekście cytatów blokowych. Znaczniki HTML nie służą do sterowania marginesem akapitu; odpowiednich mechanizmów dostarczają arkusze stylów.

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten blok jest oznaczony jak cytat blokowy za pomocą znaczników <blockquote>...</blockquote>. Jego zawartość jest sformatowana tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”. Domyślnie lewy i prawy skraj bloku cytatu są wcięte względem otoczenia.
Ten fragment rozpoczyna nowy wiersz w tym samym bloku. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość tekstu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten blok jest oznaczony jak cytat blokowy za pomocą znaczników <blockquote>...</blockquote>. Jego zawartość jest sformatowana tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”. Domyślnie lewy i prawy skraj bloku cytatu są wcięte względem otoczenia.
Ten blok jest zagnieżdżonym cytatem blokowym. Jego zawartość w domyślnym sposobie prezentacji jest dodatkowo obustronnie wcięta względem całości. Odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).
Ten fragment rozpoczyna kontynuację cytatu po zakończeniu cytatu zagnieżdzonego. Rozpoczęcie od nowego wiersza wynika z zakończenia bloku zagnieżdżonego. Szerokość tekstu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Podpis autora

Osobny element blokowy służy do wyróżniania nazwiska i adresu adresu autora lub jego adresu kontaktowego, np.:

Jan Jełowicki, Katedra Matematyki
Uniwersytet Przyrodniczy we Wrocławiu
ul. Grunwaldzka 51, 50-357 Wrocław, PL

Tekst preformatowany

Specjalnego traktowania wymagają fragmenty tekstu zawierające cytowany maszynopis, tekst źródłowy programu komputerowego, zawartość pliku znakowego z danymi lub wydrukiem itp. Do prezentacji takich fragmentów służy element <pre>...</pre>.

Ten fragment zawiera tekst wstępnie sformatowany.
Oznacza to, że znaki spacji, tabulacji i końca wiersza 
w tekście źródłowym są interpretowane dosłownie w dokumencie. 
Tekst preformatowany jest złożony czcionką o stałej szerokości
znaków. W obszarze preformatowanym można zamieszczać niektóre 
dodatkowe polecenia formatowania, jak tu: 

    x + 2⋅y − 4 = 0.

Preformatowanie jest polecane do prezentacji tekstów programów, 
wydruków komputerowych, zawartości plików znakowych i ekranów 
terminali tekstowych.

Bloki wyróżnione z innych powodów

Może się zdarzyć, że trzeba potraktować jako blok pewien fragment tekstu, który nie stanowi osobnego akapitu lub obejmuje kilka akapitów. Zamiast wyspecjalizowanego elementu <p> należy wtedy zastosować element <div>, który nie przesądza o przeznaczeniu bloku.

Miejscem geometrycznym rozwiązań równania

x2 + y2 = 4

jest okrąg o promieniu R=2.

Równanie umieszczone wyżej stanowi integralną część wypowiedzi, na tyle ważną, by umieścić ją w osobnym bloku. Blok ten jednak nie jest zwykłym blokiem akapitowym; więcej — z punktu widzenia logiki wchodzi on w skład akapitu. Mówimy, że równanie jest wystawione, czyli eksponowane; dlatego ujęto je w znaczniki elementu blokowego div, a nie akapitu p.

Ten sam element <div> będzie służył do oznaczania bloków zasługujących na wyróżnienie z wielu różnych powodów. Dlatego warto każde wystąpienie elementu <div> uzupełnić atrybutem class wskazującym na powód wyróżnienia:

<div class="powód_wyróżnienia">treść bloku</div>

przy czym powód_wyróżnienia winien być identyczny dla wszystkich bloków wyróżnionych z tego samego powodu.

W niniejszym dokumencie jest więcej bloków <div> z atrybutem class. Za ich pomocą są opisane m.in. wszystkie przykłady.

Przypisy

Nieodłącznym elementem dokumentu naukowego lub technicznego są przypisy: objaśnienia do tekstu, zazwyczaj umieszczane na dole strony lub grupowane na końcach rozdziałów. Zazwyczaj pojedynczy przypis jest osobnym blokiem, opatrzonym odsyłaczem z tekstu zasadniczego. Niestety, HTML nie ma wbudowanego mechanizmu automatycznej obsługi przypisów. Za pomocą zaawansowanych narzędzi (takich jak np. style) da się osiągnąć efekty równoważne przypisom, a także notkom marginesowym.

Szczegółowe zarządzanie wyglądem

Oznaczanie fragmentu tekstu jako akapitu nie ma nic wspólnego z określaniem wyglądu tego akapitu. Język HTML umożliwia definiowanie wyglądu na wiele sposobów. W tym rozdziale zostaną przedstawione podstawowe pojęcia i parametry związane z formatowaniem akapitów. Parametrami tymi można sterować, nadając akapitom pożądane atrybuty. Elastyczną kontrolę wyglądu dokumentu zapewniają arkusze stylów, które zostaną omówione osobno.

Do najważniejszych parametrów akapitu, od których zależy ich wygląd, należą przede wszystkim: sposób wyrównywania, położenie lewego i prawego marginesu, głębokość wcięcia pierwszego wiersza, interlinia (odstęp między wierszami), odstęp przed i za akapitem.

Język HTML nie opisuje wyglądu wydruku i nie zawiera poleceń dotyczących np. podziału na strony i rozmiaru stron. Część tych zadań biorą na siebie języki stylów, uzupełniające znakowanie HTML.

Sposoby wyrównywania i podział na wiersze

W historycznych definicjach HTML było miejsce na atrybut align, dający się zastosować do prawie każdego elementu blokowego w celu wymuszenia odpowiedniego wyrównania zawartości bloku. Ponieważ działanie takiego atrybutu polega wyłącznie na wymuszeniu graficznej aranżacji tekstu, został on uznany za niepożądany w nowych specyfikacjach języka. Mimo to zostawiłem w opracowaniu przykłady użycia atrybutu align, gdyż mają one pewną wartość dydaktyczną: stosowanie atrybutu jest prostsze od stosowania stylu w pierwszej fazie nauki.

Wyrównanie „w chorągiewkę”

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”. Jest to domyślny sposób wyrównywania marginesów w akapitach. Można go też wymusić, nadając odpowiedni atrybut znacznikowi otwierającemu akapit: <p align="left">.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. W tym zdaniu spacje mają postać &nbsp; zakazującą zakończenia wiersza. In­ne po­le­ce­nie o naz­wie &shy; (soft hyphen) poz­wa­la po­dzie­lić wy­raz mię­dzy wier­sze. Tak jest w tym i pop­rzed­nim zdaniu. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”. Jest to domyślny sposób wyrównywania marginesów w akapitach. Można go też wymusić, umieszczając w opisie stylu parametr text-align: left.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany nieco inaczej. Każdy nowy wiersz kończy się przy prawej krawędzi akapitu, odległości między wyrazami są stałe, a lewa krawędź jest „poszarpana”. Ten sposób wyrównywania marginesów można go wymusić, nadając odpowiedni atrybut znacznikowi otwierającemu akapit: <p align="right">.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany nieco inaczej. Każdy nowy wiersz kończy się przy prawej krawędzi akapitu, odległości między wyrazami są stałe, a lewa krawędź jest „poszarpana”. Ten sposób wyrównywania marginesów można go wymusić, umieszczając w opisie stylu parametr text-align: right.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Centrowanie

Ten akapit jest sformatowany jeszcze inaczej. Każdy wiersz jest umieszczony centralnie na stronie, odległości między wyrazami są stałe. Ten sposób wyrównywania marginesów nosi nazwę „centrowania”. Można go wymusić, nadając odpowiedni atrybut znacznikowi otwierającemu akapit: <p align="center">.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany jeszcze inaczej. Każdy wiersz jest umieszczony centralnie na stronie, odległości między wyrazami są stałe. Ten sposób wyrównywania marginesów nosi nazwę „centrowania”. Można go wymusić, umieszczając w opisie stylu parametr text-align: center.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Justowanie

Ten akapit jest sformatowany jeszcze inaczej. Każdy wiersz rozpoczyna się przy lewej krawędzi, a kończy się przy prawej krawędzi. Odległości między wyrazami są zmienne. Takie formatowanie nosi nazwę justowania. Można je wymusić, nadając odpowiedni atrybut znacznikowi otwierającemu akapit: <p align="justify">.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany jeszcze inaczej. Każdy wiersz rozpoczyna się przy lewej krawędzi, a kończy się przy prawej krawędzi. Odległości między wyrazami są zmienne. Takie formatowanie nosi nazwę justowania. Można go wymusić, umieszczając w opisie stylu parametr text-align: justify.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Odstępy i marginesy

Sterowanie marginesem akapitu

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”. Lewy margines akapitu został przesunięty o 1 cm w prawo.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Ten akapit jest sformatowany tradycyjnie. Każdy nowy wiersz zaczyna się przy lewej krawędzi, odległości między wyrazami są stałe, a prawa krawędź jest „poszarpana”.
Ten fragment rozpoczyna nowy wiersz w tym samym akapicie. Rozpoczęcie nowego wiersza wymuszono poleceniem formatowania <br />. Szerokość akapitu nie jest ustalona, decyduje o niej klient (przeglądarka).

Wcięcia akapitowe

Spacja służy do oddzielania wyrazów w wierszu i do niczego więcej.

Wyrównywanie pionowe osiągamy ustawiając punkty tabulacji i stosując znaki tabulacji. Użycie spacji do wyrównywania w pionie jest błędem.

Wcięcie akapitowe służy do optycznego wyróżnienia początku akapitu z bloku tekstu. Wcięcie nie jest spacją ani znakiem tabulacji. Wynika ono z faktu rozpoczęcia akapitu i powinno być wprowadzone jako parametr jego stylu. W tym podrozdziale wcięcia akapitowe mają głębokość 1.2 em.

Odstępy między wierszami wewnątrz akapitu

Interlinia jest parametrem określającym zagęszczenie wierszy w akapicie. Stosownie do wielkości czcionki dobierany jest odstęp między liniami wiodącymi sąsiadujących wierszy tekstu. Parametr interlinii określa, ile razy trzeba powiększyć ten standardowy odstęp.

Na przykład interlinia podwójna oznacza, że odstęp między wierszami akapitu ma być dwukrotnie większy, niż standardowy dla danej wielkości czcionki. Tak właśnie jest w bieżącym podrozdziale.

Odstępy między akapitami

Dodatkowy odstęp pionowy może być związany z faktem rozpoczęcia albo zakończenia akapitu lub innego bloku tekstu (np. tytułu). Oddzielanie akapitów pustym wierszem jest błędem: wiersz tekstu służy do prezentowania informacji, a nie do separowania jej bloków. Na dodatek, odstęp poakapitowy wynika z zakończenia akapitu, powinien być więc wstawiany automatycznie po zakończeniu akapitu. Zamiast pustego wiersza, należy posługiwać się odstępem zdefiniowanym jako cecha przysługująca blokom akapitowym.

Poprawne oznaczanie odstępów pionowych jest szczególnie istotne w odniesieniu do nagłówków. Nigdy nie oddzielamy tytułu rozdziału od pierwszego akapitu pustym wierszem lub (zgroza) większą ich liczbą. Posługujemy się tylko odstępami przed- i poakapitowymi. W tym podrozdziale mają one wielkość zerową.

Jeżeli dany akapit ma być ostatnim tekstem na stronie, to bezpośrednio za końcem akapitu wstawiamy znak (polecenie) końca strony. Język HTML nie dysponuje takim poleceniem. W sterowaniu podziałem na strony nie powinno się posługiwać żadną postacią odstępów pionowych ani pustych akapitów.

Uwagi końcowe

Spójny wygląd całej pracy zyskamy, jeżeli zamiast opisywać sposób formatowania każdego akapitu osobno za pomocą atrybutów i stylów, najpierw zdefiniujemy kilka stylów i nadamy im nazwy, a później będziemy z nich korzystać, powołując się na te nazwy. Do idei tego rozwiązania powrócimy w dalszych rozdziałach.

© Copyright 2000–2003, 2006 by Jan Jełowicki, Katedra Matematyki Uniwersytetu Przyrodniczego we Wrocławiu
janj@aqua.ar.wroc.pl
http://karnet.up.wroc.pl/~jasj