Omówione w tym rozdziale reguły znakowania wywodzą się z formalizmów opracowanych w II połowie XX wieku. Początki języka SGML (Standard Generalized Markup Language, czyli Standardowy Uogólniony Język Znakowania) sięgają lat 60–tych XX wieku, a ostateczna postać pochodzi z roku 1986. Obecnie korzysta się z jego uproszczonej wersji o nazwie XML (Extensible Markup Language, Rozszerzalny Język Znakowania) z 1996 r.
Pierwsza część rozdziału ma charakter ogólny i nie wskazuje żadnego konkretnego obszaru zastosowań technik znakowania. Jest to uzasadnione, gdyż sam XML nie wskazuje takiego obszaru, a wielość zastosowań we współczesnym świecie skłania do zapoznania się z jego zasadami.
Kolejne podrozdziały będą się odwoływać do języków opisu dokumentów, ze szczególnym uwzględnieniem najprostszego, a zarazem najszerzej znanego spośród nich, noszącego nazwę XHTML. Mimo to wiele uwag ma charakter ogólny i odnosi się równie dobrze do tworzenia dokumentów źródłowych w innych językach znakowania, np. DocBook lub LaTeX, a także za pośrednictwem oprogramowania użytkowego.
Element formatowania służy do nadania tekstowi właściwości, która nie wynika sama z zapisu znakowego. Może się ona wiązać ze znaczeniem, strukturą, wyglądem albo czymś jeszcze innym. Umówmy się, że obszar obowiązywania elementu będziemy rozpoczynać znacznikiem zawierającym nazwę elementu w nawiasach trójkątnych (znaki nierówności), a zamykać podobnym znacznikiem, ale z kreską ukośną przed nazwą elementu. Jest rzeczą pożądaną, by nazwa elementu była w jakiś sposób związana z definiowaną przezeń właściwością.
<element>W obszarze między znacznikami działa element formatowania, nadając tekstowi pewną właściwość</element>, a tu już nie.
Na przykład element p
języka HTML wymusza sformatowanie obszaru w akapit.
Zawartość całego akapitu umieszczamy więc między znacznikami <p>
i </p>
,
tak jak w poniższym przykładzie.
+- zawartość akapitu ------------------------+<p>Koń jaki jest, każdy widzi (B. Chmielowski).</p>
Para odpowiadających sobie znaczników stanowi rodzaj „nawiasów” wyznaczających zakres operacji formatowania dokonywanej na tekście. Dlatego elementy znakowania można zagnieżdżać w sobie, tak jak to widać niżej:
+- zawartość akapitu -------------------------------+ | +- cytat ------------------+ |<p><q>Koń jaki jest, każdy widzi</q> (B. Chmielowski).</p>
(w obszarze akapitu oznaczonego elementem p
znajduje się
cytat, oznaczony elementem q
). Natomiast przeplatanie znaczników:
+- zawartość akapitu ----------------------------+ +--|- cytat ------------------+ |<q><p>Koń jaki jest, każdy widzi</q> (B. Chmielowski).</p>
jest zawsze niepoprawne, podobnie jak bezsensowne jest wyrażenie algebraiczne (x + [y − z) + u].
Niektóre elementy — jak końce wiersza, obrazy, linie oddzielające —
z zasady nie obejmują żadnego zakresu. Czasem zachodzi potrzeba wstawienia
innego elementu o pustym zakresie (np. pustej komórki lub pustego wiersza tabeli).
Znacznik takiego elementu powinien mieć postać
<element />
; znacznik zamykający jest wtedy niepotrzebny.
Znacznik otwierający może zawierać dodatkowe informacje na temat
sposobu zastosowania elementu. Są to tzw. atrybuty elementu.
Na przykład element języka HTML o nazwie
blockquote
służy oznaczania obszernych cytatów.
Znacznik otwierający elementu blockquote
<blockquote>
będzie zawsze oznaczał rozpoczęcie nowego cytatu blokowego.
Atrybut cite
, którego użycie w znaczniku otwierającym może mieć postać
<blockquote cite="opis-źródła-cytatu">
służy do udokumentowania źródła pochodzenia cytowanego tekstu. W obu przypadkach znacznik zamykający powinien mieć postać
</blockquote>
bez żadnych dodatkowych atrybutów.
Atrybuty mogą istotnie wpływać na zawartość dokumentu.
Na przykład element języka HTML o nazwie
img
służy osadzania w dokumencie obiektów graficznych.
Znacznik elementu img
powinien mieć postać
<img src="nazwa" alt="tekst" />
gdzie nazwa
jest nazwą pliku z obrazem.
Wartości atrybutów piszemy zawsze w cudzysłowach technicznych (tych z zestawu ASCII).
Każdy element ma spis atrybutów, których wolno używać w jego znacznikach. Wszystkie atrybuty nie ujęte w takim spisie są nielegalne w odniesieniu do danego elementu.
Wymogiem XML jest, by cała zawartość dokumentu była umieszczona wewnątrz pojedynczego elementu zwanego elementem głównym.
Na przykład cała zawartość każdego dokumentu HTML
musi być objęta znacznikami elementu głównego o nazwie html
.
Tak więc prawidłowy dokument musi mieć ogólną postać
<html> zawartość dokumentu </html>
gdzie przez zawartość dokumentu
rozumie się
cały tekst wraz z opisującymi go znacznikami (oczywiście oprócz znaczników
elementu głównego).
Czasem trzeba napisać w tekście znak „<” lub „>”. Nie możemy napisać ich wprost: nasz zecer mógłby „pomyśleć”, że nie są to znaki nierówności, tylko nawiasy znaczników. Robimy więc tak: piszemy
<
chcąc uzyskać znak „<”, zaś
>
kiedy mamy zamiar umieścić w dokumencie znak „>”.
Tym samym zamiast wskazywać znak, używamy jego nazwy zrozumiałej dla zecera,
którym może być człowiek lub maszyna. (Nazwa lt
jest skrótem
od less than, czyli „mniejszy niż”;
nazwa gt
jest skrótem od greater than).
Okaże się, że ciągi znaków postaci &nazwa;
mogą generować
także wiele innych pożytecznych znaków. W zasadzie można tym sposobem wygenerować
każdy znak UNICODE, także te, których nie ma bezpośrednio na klawiaturach
ani nawet w kodzie informacyjnym, którego używamy do przechowywania pliku źródłowego.
Ciągi takie będziemy nazywać jednostkami (entities).
Niestety, czasem trzeba napisać także znak „&” (tzw. etka, a po angielsku ampersand), który — jak widać — pełni rolę znaku sterującego „rozpoczynam nazwę jednostki”. Robimy to tak:
&
Proste, prawda? A jeżeli nie proste, to przynajmniej logiczne.
Język HTML (Hypertext Markup Language) nadaje tekstowi dokumentu strukturę i określa sposób jego przedstawiania. Podstawowe elementy HTML odnoszą się do podziału dokumentu na części, wyróżnienia w dokumencie bloków tekstu, wyliczeń i tabel, nadania dokumentowi właściwości hipertekstowych, osadzenia w nim ilustracji, ustalenia sposobu prezentacji tekstu. Te funkcje języka będą omówione najpierw za pomocą przykładów, a na końcu tego opracowania także w bezpośrednim opisie. Inne elementy HTML, mające za zadanie zarządzanie oknami przeglądarek internetowych oraz umożliwienie użytkownikom sieci tworzenie informacji zwrotnej i przesyłanie jej do serwera, nie stanowią obszaru naszego zainteresowania.
Zadaniem HTML jest określenie pewnych ogólnych właściwości tekstu. Nie można natomiast za jego pomocą precyzyjnie opisać wyglądu dokumentu. Nie ma nic dziwnego ani złego w tym, że ten sam dokument przedstawiany przez różne programy formatujące (przeglądarki) przybiera nieco inny wygląd. Nawet więcej: nie jest wcale powiedziane, że dokument ma być przedstawiany środkami wizualnymi (tj. że będzie przeznaczony do oglądania); nietrudno sobie wyobrazić, że dokument można odsłuchać, lub że pewien automat przeszukuje dokumenty w poszukiwaniu określonej zawartości (spisów literatury? nazwisk autorów? adresów?).
Od pierwszych chwil swojego istnienia, datowanych na 1992 rok, język HTML jest żywym tworem podlegającym ciągłej ewolucji. Normatywne definicje jego kolejnych wersji, sformułowane za pomocą języków SGML oraz XML, są sygnowane przez zespół roboczy Konsorcjum WWW (W3C). Dokumenty te stanowią ostateczną instancję przesądzającą o legalności lub nielegalności sposobu użycia elementów znakowania.
Wersja o nazwie XHTML 1.1 jest opatrzona datą z maja 2001 roku. W pierwszych latach XXI wieku opracowywano wersję o nazwie XHTML 2.0, która pod wieloma względami znacznie odbiegała od wersji poprzednich. Jej rozwój zarzucono w roku 2009. Od roku 2006 opracowywana jest wersja zwana HTML 5. W przeciwieństwie do XHTML 2.0 stanowi ona kontynuację poprzednich wersji języka.
Wczesne definicje języka HTML stwierdzały,
że nie jest istotne, czy nazwy elementów są pisane małymi, czy wielkimi
literami (czyli nazwy table
, Table
,
TABLE
oraz TablE
oznaczały ten sam element).
Jednak najnowsze sformułowania definicji języka HTML
(zwane XHTML) są wyrażone w metajęzyku XML,
który rozróżnia małe i wielkie litery w nazwach elementów.
Zgodnie z tą standaryzacją, nazwy wszystkich elementów
XHTML należy pisać małymi literami.
Wielkość liter jest też istotna w nazwach jednostek znakowych,
(np. δ
to „δ”,
a Δ
to „Δ”)
oraz w wartościach niektórych atrybutów, zwłaszcza związanych
ze znacznikami wyliczeń.
Wczesne definicje języka HTML dopuszczały
pomijanie znaczników zamykających niektórych elementów
(np. znacznika zamknięcia akapitu </p>
lub pozycji wyliczenia </li>
). Jednak w żadnym języku
zdefiniowanym za pomocą metajęzyka XML takie pominięcie
nie jest dopuszczalne. Dlatego chcąc pozostać w zgodzie z aktualnym sformułowaniem
składni XHTML powinniśmy pilnować,
by każdemu użytemu w dokumencie znacznikowi otwierającemu
odpowiadał właściwy znacznik zamykający
(lub by zamykać znaczniki nie obejmujące żadnego zakresu).
Przyjrzymy się teraz kilku wstępnym przykładom użycia znaczników podczas formatowania tekstu. Gorąco zachęcam do ich obejrzenia za pomocą jak największej liczby przeglądarek pochodzących od różnych producentów. Proszę zwrócić uwagę na nazwy elementów znakowania: z jakim przeznaczeniem się kojarzą? do wyróżniania jakich funkcji i właściwości tekstu skłaniają? Jakich środków wyrazu dla znaczników wykorzystanych w tych przykładach jest w stanie użyć: przeglądarka internetowa pracująca w środowisku graficznym, program wyświetlający teksty na terminalu znakowym, syntezator głosu, osoba–lektor; osoba–grafik, osoba–zecer. Które ze znaczników będą uniwersalne, a które są przeznaczone tylko dla szczególnych odbiorców? Które trzeba będzie zastąpić innymi, jeżeli pewnego dnia zechcemy inaczej przedstawić efekty naszej pracy?
Jako przykład rozpatrzymy następujący krótki tekst:
Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).
Brak znaczników powoduje, że nie ma żadnej informacji o sposobie przedstawienia tekstu. Jest on więc sformatowany domyślnie: tak, jakby był zwykłym zdaniem w akapicie.
Chwila refleksji nad zawartością naszego przykładu prowadzi do następującego spostrzeżenia: tekst zawiera cytat z pewnego dzieła, którego autor, tytuł i rok wydania zostały podane dalej. Wchodząc głębiej, można jeszcze zauważyć, że cytowane zdanie jest encyklopedycznym objaśnieniem pewnego terminu.
Odwzorowanie tej informacji za pomocą znaczników doprowadzi do następującej interpretacji:
<cytat><termin>Koń</termin> <objaśnienie>jaki jest, każdy widzi</objaśnienie></cytat> (<autor>Benedykt Chmielowski</autor>: <zródło>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</zródło>, <wydanie>Lwów 1745–46</wydanie>).
( Koń jaki jest, każdy widzi Benedykt Chmielowski :Nowe Ateny albo Akademia wszelkiej sciencyi pełna ,Lwów 1745–46 ).
Nazwy elementów znakowania ustalono dowolnie, tym niemniej oddają one istotę rzeczy. Zecer, z którym współpracujemy, nie rozumie dyrektyw wyrażonych za pomocą dowolnie przyjętego zestawu pojęć. Dlatego skutek jest taki, jaki jest (czyli żaden).
Tę samą strukturę tekstu możemy opisać również w konwencji narzuconej przez język HTML.
<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>: <cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>, <span class="wydanie">Lwów 1745–46</span>).
Koń jaki jest, każdy widzi(Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).
Nasz zecer rozumie podane w ten sposób instrukcje i formatuje tekst zgodnie ze swoją (najlepszą?) wiedzą o tym, jak ma wyglądać cytat, objaśniany termin, czy też tytuł źródła bibliograficznego.
Można się zastanawiać, czy zwyczaje naszego zecera nam odpowiadają. Być może chcielibyśmy wymusić na nim inny sposób prezentacji tekstu.
Moglibyśmy sami zastanowić się nad pożądanym (w danej chwili!) sposobem zaprezentowania powyższego przykładu. Jesteśmy w stanie podjąć np. następujące ustalenia: termin opisywany w haśle należy pisać kursywą, dla cytatu jako całości zastosować pismo bezszeryfowe, a tytuły dzieł źródłowych pisać także kursywą.
Ustalenia te da się wyrazić za pomocą znaczników:
<font face="sans-serif"><i>Koń</i> jaki jest, każdy widzi</font> (Benedykt Chmielowski: <i>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</i>, Lwów 1745–46).Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).
Zecer nas co prawda zrozumiał, ale stała się rzecz niedobra: znakowanie nie oddaje już budowy naszego fragmentu tekstu! Co gorsza, dwie zupełnie różne sprawy: treść hasła i tytuł źródła, zostały oznakowane w dokładnie taki sam sposób. Nic nie szkodzi, że w danej chwili na wydruku wyglądają tak samo; gorzej, że dokument nie zawiera żadnej informacji pozwalającej rozstrzygnąć, czy w danym przypadku chodzi o hasło, czy o tytuł, czy może o coś jeszcze innego. Analizując układ znaczników nigdy nie znajdziemy sposobu, żeby je rozróżnić.
Zupełnie inna, choć równie sensowna, decyzja redakcyjna: termin opisywany w haśle piszemy wielkimi literami, pismem pogrubionym i w kolorze, tytuł dzieła piszemy prostym pismem bezszeryfowym, nazwisko autora piszemy kapitalikami, wymaga więc powtórnego znakowania, przy czym zmienią się nie tylko nazwy znaczników, ale także ich układ.
<font style="text-transform: uppercase"><font color="#000080"><b>Koń</b></font></font> jaki jest, każdy widzi (<span style="font-variant: small-caps">Benedykt Chmielowski</span>: <font face="sans-serif">Nowe Ateny albo Akademia wszelkiej sciencyi pełna</font>, Lwów 1745–46).Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).
To znaczy, że decydując się na znakowanie fizycznych cech wydruku wpadliśmy w pułapkę. Zobaczmy, jak jej uniknąć pozostając przy znakowaniu samej struktury.
Zdecydujmy się, które elementy budowy tekstu są dla nas istotne i oznaczmy je za pomocą znaczników.
<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>: <cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>, <span class="wydanie">Lwów 1745–46</span>).
W razie konieczności, zamiast zmieniać układ znaczników, będziemy raczej dążyć do zmiany przyzwyczajeń zecera. Wariant pierwszy:
<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>: <cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>, <span class="wydanie">Lwów 1745–46</span>).
Koń jaki jest, każdy widzi(Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).
Wariant drugi:
<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>: <cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>, <span class="wydanie">Lwów 1745–46</span>).
Koń jaki jest, każdy widzi(Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).
Wariant trzeci:
<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>: <cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>, <span class="wydanie">Lwów 1745–46</span>).
Koń jaki jest, każdy widzi(Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).
Jak widać, udało się. Zauważmy, że za każdym razem przykładowy tekst ma nie tylko tę samą treść, lecz również ten sam układ znaczników. Dobrze zaprojektowany pod względem logicznym dokument może przybrać dowolną spośród sensownych postaci ustalonych przez redaktora, bez jakiejkolwiek ingerencji w jego treść.
To jest właśnie istota znakowania logicznego. Skłonienie zecera do zrealizowania naszej wizji estetycznej jest co prawda ważne, ale stanowi zupełnie odrębne zadanie, do którego tekst dokumentu w ogóle nie jest potrzebny. Więcej: nie jest potrzebny do tego autor tekstu, tylko jego redaktor. Skupimy się teraz na technice opisywania budowy dokumentu, sprawy prezentacyjne zostawiając (redaktorowi) na później.
Języki: SGML i XML określają ogólne zasady znakowania, pozwalające opisywać obszary obowiązywania elementów i ich atrybutów za pomocą znaczników otwierających i zamykających. Chociaż same nie narzucają żadnych gotowych elementów ani atrybutów, to umożliwiają ich definiowanie za pomocą tzw. definicji typu dokumentu DTD (stosowanych w SGML i w XML) oraz XML-Schema (stosowanych w XML). Każda taka specyfikacja definiuje pewien szczególny zestaw elementów znakowania, określa wszystkie atrybuty dozwolone do umieszczenia w ich znacznikach i ustala zasady ich poprawnego użycia, a także ich zamierzone przeznaczenie. W ten sposób powstaje pewien szczególny język znakowania, przeznaczony do określonego celu. Jednym takich języków — jednym z najprostszych, a dla nas najważniejszym — jest HTML.
Reguły języka XML, obejmujące: nadawanie tekstowi właściwości opisanych przez elementy, wyznaczanie obszarów obowiązywania elementów za pomocą par znaczników, ujmowanie wartości atrybutów w cudzysłowy techniczne, ujęcie całego dokumentu w jeden element główny — można porównać do ogólnych reguł ruchu drogowego. Znajomość poszczególnych elementów języka HTML i celu ich stosowania można porównać do znajomości planu miasta. W tej analogii rolę pojazdów będzie pełnić używane przez nas oprogramowanie: edytory i przeglądarki. Po danym mieście, w zgodzie z zasadami ruchu drogowego, można poruszać się pojazdami wielu typów i marek.
W krótkiej, lecz burzliwej historii standaryzacji języka HTML
można zauważyć tendencję do wiązania znakowania ze strukturą dokumentu
i unikania bezpośredniego opisu wyglądu sformatowanego tekstu.
W myśl tych założeń, znaczniki odnoszące się wprost do wyglądu (np. przez jawne określanie
cech pisma znacznikiem font
, podkreślanie za pomocą znacznika u
itp.)
oraz atrybuty znaczników odnoszące się bezpośrednio do wyglądu (np. atrybut wyrównywania bloku
tekstu align
) winny być stopniowo wypierane przez konstrukcje,
których elementy i atrybuty odnoszą się do warstwy logicznej, a za wygląd odpowiada styl.
Elementy i atrybuty przestarzałego rodzaju, nawet jeżeli funkcjonują jeszcze w definicji języka
i są powszechnie używane przez autorów, zostały już skazane na wymarcie.
W bieżącym opracowaniu będę się starał wyrobić (a przynajmniej stymulować) u Czytelnika
nawyk myślenia o dokumencie w kategoriach zgodnych z duchem znakowania logicznego.
Przeglądarki HTML zwykle reagują wyrozumiale na błędy znakowania w pliku źródłowym. Zachowanie takie jest zgodne z zamiarem projektantów oprogramowania i ma na celu umożliwienie korzystania nawet z tych dokumentów, w których znaczniki rozmieszczono nie całkiem poprawnie.
Na przykład w większości przypadków element, którego nazwa nie jest zdefiniowana w standardzie HTML, zostanie po prostu zignorowany. Jednak niektóre przeglądarki rozumieją pewne dodatkowe znaczniki, nie należące oficjalnie do języka; znaczników takich będziemy unikać. Zajmujemy się bowiem tworzeniem dokumentów „w języku” i „zgodnie ze standardem”, a nie „dla programu”.
Jeżeli z konstrukcji dokumentu wynika jednoznacznie, że w danym miejscu powinien wystąpić znacznik zamykający, to przeglądarki na ogół pogodzą się z jego brakiem: na przykład rozpoczęcie akapitu na ogół będzie rozumiane jako zakończenie akapitu poprzedniego. Jednak nie oznacza to, że brak znacznika jest poprawny. Wygląd sformatowanego tekstu w danym przypadku nie może być argumentem przesądzającym, że znacznik zamykający jest zbędny. W szczególności jakiś inny program może zareagować na błąd, na przykład odmawiając przetwarzania dalszej części dokumentu lub przetwarzając ją w sposób nieoczekiwany dla użytkownika.
Wiele współczesnych — a zwłaszcza starszych — programów
ignoruje wielkość liter w nazwach elementów HTML.
Działają one na mocy starszych definicji języka.
Jeżeli jednak np. znacznik początku akapitu ma w jednym miejscu
postać <p>
, a w innym <P>
,
i podobnie jest ze znacznikami zamykającymi,
to należy spodziewać się kłopotów z unifikacją wyglądu elementów
(w tym przypadku akapitów) przez zarządzanie stylami.
Zgodność układu znaczników w dokumencie z oficjalnym standardem (X)HTML da się sprawdzić automatycznie. Test poprawności, zwany też walidacją, oferują niektóre programy użytkowe. Wysokiej klasy walidator dostępny jest w serwisie Konsorcjum WWW.
W niniejszym podrozdziale przedstawiamy kilka przykładów poprawnego zastosowania znaczników HTML do opisu budowy dokumentu. Przykłady są uszeregowane według wzrastającego stopnia złożoności i wzrastającej liczby zastosowanych środków formatowania. Jeżeli naprawdę chcesz zrozumieć zasady znakowania, to radzę oglądać je — tak jak i wszystkie następne analizowane dokumenty — równocześnie w postaci sformatowanej i źródłowej. Nie obejdzie się też bez własnych eksperymentów. Zalecam korzystanie z wielu różnych programów formatujących (przeglądarek) pochodzących od różnych producentów.
Poniższa tabela zestawia wybrane elementy struktury tekstu i sposoby ich uzyskania
w kilku środowiskach. Inaczej formatujemy tekst znakowy ASCII,
inaczej robimy to mając pełny repertuar symboli UNICODE.
Jeszcze inaczej redagujemy znakowe pliki źródłowe dokumentów XHTML
albo LaTeX-a.
Inaczej wreszcie posługujemy się środowiskami wizualnymi, w których tylko
pośrednio mamy do czynienia z generowaniem plików dokumentu.
Sposoby wykonywania poszczególnych operacji edycyjnych oraz uzyskiwania znaków
interpunkcyjnych i typograficznych są różne w różnych programach użytkowych,
a nawet w kolejnych wersjach tych samych programów. Szczegółowych informacji
można szukać w dokumentacji oprogramowania oraz w poświęconych mu książkach
(w których często co drugie zdanie rozpoczyna się słowem Aby
).
Nie znajdziemy w nich jednak na ogół informacji
o zasadach poprawnego projektowania dokumentu.
Efekt formatowania | ASCII | ISO-Latin-2 | UNICODE | XHTML | LaTeXa | Środowiska wizualne |
---|---|---|---|---|---|---|
Nagłówek rozdziału | (brak) | (brak) | <h1>tytuł</h1> |
\chapter{tytuł} \section{tytuł} \subsection{tytuł} i inne |
(standardowe style blokowe nagłówków) | |
Początek akapitu | (brak) | (brak) | <p> |
(brak) | (brak) | |
Wcięcie wiersza na początku akapitu | (spacje lub znak tabulacji) | (spacje lub znak tabulacji) | (zastosowanie stylu) | (wynika ze stylu) | (atrybut akapitu lub styl) |
|
Koniec akapitu | (pusty wiersz) | (pusty wiersz) | </p> |
(pusty wiersz) lub \par |
Enter | |
Koniec wiersza | #10 lub #13#10 | #10 lub #13#10 | (automat) | (automat) | (automat) | |
Wymuszony koniec wiersza | #10 lub #13#10 | #10 lub #13#10 | <br /> |
\\ lub \newline lub \linebreak |
Shift+Enter | |
Spacja | #32 | #32 | dowolna liczba spacji #32 lub końców wiersza #10 albo #13#10 |
dowolna liczba spacji #32 | Spacja | |
Spacja wymuszona | #32 | #32 | |
~ lub \ (po ukośniku jest spacja) |
Spacja | |
Spacja z zakazem końca wiersza | #32 | #32 | |
~ |
Shift+Spacja lub Ctrl+Spacja |
|
Koniec strony | (brak) | (brak) | (brak lub zastosowanie stylu) | (automat) | (automat) | |
Wymuszony koniec strony | #12 | #12 | (brak) | \pagebreak lub \newpage lub \clearpage |
(wstaw z menu) | |
Zakaz końca strony | (brak) | (brak) | (brak lub zastosowanie stylu) | \nopagebreak |
(wstaw z menu) | |
Wyróżnienie znaczenia tekstu | (brak) | (brak) | <em>tekst</em> (widzisz tekst)<strong>tekst</strong> (widzisz tekst)<code>tekst</code> (widzisz tekst )i inne |
\emph{tekst} i inne |
(zastosowanie stylu znakowego) | |
Atrybuty pisma | (brak) | (brak) | <b>tekst</b> (widzisz tekst)<i>tekst</i> (widzisz tekst)<tt>tekst</tt> (widzisz tekst)i inne |
\bf \rm \it \sl \sf \sc \tt i inne |
(sterowane z menu lub listy atrybutów) |
|
Indeks górny | (brak) | (brak) | tekst<sup>indeks</sup> (widzisz tekstindeks) |
^{tekst} (w równaniach) lub \textsuperscript{tekst} |
(sterowane z menu lub listy atrybutów) |
|
Indeks dolny | (brak) | (brak) | tekst<sub>indeks</sub> (widzisz tekstindeks) |
_{tekst} (w równaniach) lub \textsubscript{tekst} |
(sterowane z menu lub listy atrybutów) |
|
Logiczne sterowanie wielkością znaków | (brak) | (brak) | <big>tekst</big> (widzisz tekst)<small>tekst</small> (widzisz tekst) |
\Huge \huge \LARGE \Large \large \normalsize \small \scriptsize \footnotesize \tiny |
(właściwości pisma w deklaracji stylu) | |
Określenie kroju pisma | (brak) | (brak) | (definicja stylu) | (sterowane z menu) | ||
Określenie absolutnej wielkości znaków | (brak) | (brak) | (definicja stylu) | (definicja stylu) | (sterowane z menu) | |
Cudzysłów podwójny | "tekst" lub ,,tekst'' |
(brak)b | „tekst” (widzisz „tekst”) |
dwuznaki ,,tekst'' (widzisz „tekst”) |
(znaki cudzysłowów z listy) | |
Cudzysłów kątowy | >>tekst<< |
(brak)b | »tekst« (widzisz »tekst«)c |
dwuznaki >>tekst<< (widzisz »tekst«) |
(znaki cudzysłowów z listy) | |
Łącznik | - (znak ASCII) |
- (znak ASCII) | - (znak ASCII) |
- (znak ASCII) |
- (znak ASCII) |
|
Pozwolenie na łącznik przy podziale wyrazu | (brak) | (brak) | ­ |
(automatyczne dzielenie wyrazów), \dywiz |
(automatyczne dzielenie wyrazów) | |
Półpauza | -- |
(brak)b | – (widzisz „–”) |
-- lub \textendash lub \ppauza |
(znak z listy) | |
Pauza | --- |
(brak)b | — (widzisz „—”) |
--- lub \textemdash lub \pauza |
(znak z listy) | |
Wielokropek | ... |
(brak)b | … (widzisz „…”) |
\ldots |
(znak z listy) |
Umieszczone niżej opisy elementów HTML są pomyślane jako podręczne przypomnienie ich składni i znaczenia dla osób nie zamierzających stać się ekspertami tego języka, lecz znających jego podstawowe zasady i pragnących go poprawnie stosować w praktyce. Spodziewam się, że większość uczestników zajęć należy do tej grupy.
Opisy te obejmują bardzo ograniczony (i dodajmy: subiektywny) wybór spośród pełnego repertuaru środków języka HTML zorientowany na odzwierciedlenie budowy logicznej typowego dokumentu i nie mogą zastąpić ani lektury podręcznika, ani doświadczenia płynącego z analizy gotowych przykładów i wykonywania ćwiczeń praktycznych.
Atrybuty elementów mające charakter opcjonalny (tzn. takie, które można
zastosować, lecz nie trzeba tego robić) w większości pominąłem
włączając w to wiele atrybutów, które można umieścić w opisie
rozmaitych elementów, a których znaczenie nie budzi wątpliwości
(np. align
lub class
).
Nieliczne atrybuty opcjonalne, które pełnią szczególnie istotną rolę,
zostały ujęte w opisach i wyróżnione zmniejszeniem znaków tekstu.
Przegląd zawiera również opisy elementów niepożądanych, których stosowanie utrudnia lub uniemożliwia zarządzanie budową logiczną dokumentu. Opisy tych elementów wyróżniono jasnością tekstu.
Wraz ze standardem HTML 5 język wzbogacił się o nowe znaczniki. W większości nie są one ujęte w poniższym zestawieniu.
<html>
tekst </html>
<head>
tekst </head>
html
,
przed elementem body
.
<meta name="nazwa" content="informacje" />
head
.
<title>
tekst </title>
head
.
<body>
tekst </body>
html
,
po elemencie head
.
Elementy wymienione w tym podrozdziale należą do części prezentacyjnej
dokumentu. Dlatego powinny być stosowane w obrębie elementu body
.
<h1>
tekst </h1>
h1
stosuje się do całości dokumentu
lub do jego pojedynczych rozdziałów.<h2>
tekst </h2>
<h3>
tekst </h3>
<h4>
tekst </h4>
<h5>
tekst </h5>
<h6>
tekst </h6>
<p>
tekst </p>
<pre>
tekst </pre>
<blockquote>
tekst </blockquote>
<div>
tekst </div>
Grupa znaczników logicznych obejmuje elementy umożliwiające wyróżnianie takich cech tekstu, jak m.in. „nowy termin”, „tekst o szczególnym znaczeniu”, „tytuł przytaczanej książki”, „nazwa zmiennej”. Są to wszystko niezależne do siebie to pojęcia związane z sensem przekazu. Dlatego warto je rozróżniać już na poziomie znakowania. Nie należy też mylić ich znaczenia z pożądanym w danej chwili sposobem przedstawienia tekstu — tym zajmą się automaty formatujące.
<em>
tekst </em>
<strong>
tekst </strong>
<q>
tekst </q>
<cite>
tekst </cite>
<dfn>
tekst </dfn>
<code>
tekst </code>
<var>
tekst </var>
<samp>
tekst </samp>
Zmienna adres może przyjąć wartość ul. Grunwaldzka 51.
<span>
tekst </span>
HTML nie zawiera mechanizmu definiowania własnych znaczników. Mimo to możliwe jest poprawne znakowanie logiczne za pomocą klas.
<element class="nazwa">
class="nazwa"
prawie dowolnego
elementu
przypisuje obszar elementu
do klasy nazwa. Nazwa klasy jest nadawana przez użytkownika.
Tę samą klasę należy nadawać zakresom elementów, spełniającym tę samą funkcję
w tekście, jeżeli nie da się jej wyrazić za pomocą standardowych znaczników.
Jako element
najlepiej użyć elementu HTML
odpowiadającego choćby w przybliżeniu oznaczanej funkcji; w przypadku braku
odpowiedniego kandydata najlepiej zastosować element span
w odniesieniu do tekstu umieszczonego w wierszu,
zaś element div
w odniesieniu do całości bloku.
Wyglądem zakresów klas można zarządzać, definiując odpowiadające im style.
<br clear="położenie" />
clear
wymusza dodatkowo zakończenie opływania
tekstu dokoła ilustracji umieszczonych
przy wybranym marginesie bieżącego akapitu
(efekt opływania zostanie przerwany także w miejscu rozpoczęcia dowolnego elementu,
którego styl posiada zdefiniowaną cechę clear
).
br
.
<ol type="typ-znacznika" start="pierwszy-numer">
tekst </ol>
type
decyduje o postaci numeracji: liczbowej arabskiej (type="1"
),
rzymskiej ("i"
lub "I"
) albo literowej ("a"
lub "A"
).
Tekst powinien składać się z elementów li
.<ul type="typ-znacznika">
tekst </ul>
type
decyduje o kształcie znacznika.
Tekst powinien składać się z elementów li
.<li value="n">
tekst </li>
ol
lub ul
.
Znacznik lub numer jest wstawiany automatycznie w postaci ustalonej dla całej listy.
Atrybut value="n"
nadaje elementowi listy numerowanej
numer n (wartość n musi być liczbą całkowitą).
Następny element listy będzie nosił numer n+1.
<dl>
tekst </dl>
dt
–dd
.<dt>
tekst </dt>
dl
, przed elementem dd
.<dd>
tekst </dd>
dl
, za elementem dt
.
Zasady numeracji elementów list za pomocą atrybutów start
, value
i type
powoli tracą aktualność. W nowocześniej projektowanych listach
postać i wartość znacznika winny być wymuszone zastosowaniem stylu.
Na pełną realizację tej idei w programach formatujących musimy jeszcze trochę poczekać
<table width="szer" border="szer-linii" rules="typ-siatki">
tekst </table>
all
(wszystkie linie),
rows
(tylko linie rozdzielające wiersze),
cols
(tylko linie rozdzielające kolumny),
groups
(tylko linie rozdzielające grupy kolumn i wierszy) lub
none
(brak linii siatki).
<caption>
tekst </caption>
<colgroup>
tekst </colgroup>
<col span="liczba-kolumn" align="wyrównanie" width="szer" />
align="char" char="."
wymusza wyrównanie kolumny liczb względem znaku
separatora dziesiętnego (tutaj jest nim kropka). Pozostałe wartości atrybutu align
mają standardowe znaczenie.<thead>
tekst </thead>
<tbody>
tekst </tbody>
tbody
.<tr align="wyrównanie" valign="wyrównanie-pion">
tekst </tr>
<td align="wyrównanie" valign="wyrównanie-pion" colspan="kolumn" rowspan="wierszy">
tekst </td>
<th>
tekst </th>
td
.<tfoot>
tekst </tfoot>
W tym miejscu wyjątkowo rozdzielam opisy definicji zakładek
i odsyłaczy, mimo że formalnie stanowią one tylko opcje elementu a
;
robię tak ze względu na odmienne funkcje spełniane przez te dwie opcje
i na fakt, że jedna z tych funkcji jest już przestarzała.
<a href="adres-URI">
tekst </a>
<element id="nazwa">
id="nazwa"
prawie dowolnego
elementu
opatruje obszar elementu
etykietą nazwa. Etykietę tę można wykorzystać w odsyłaczach
hipertekstowych (w tym samym lub innym dokumencie).
Podobną funkcję spełnia przestarzały sposób użycia elementu a
:
<a name="nazwa">tekst</a>
.
<a name="nazwa">
tekst </a>
id="nazwa"
znacznikowi otwierającemu element obejmujący wybrany fragment dokumentu.
<img src="URI-pliku" alt="opis" width="szer" height="wys" align="położenie" />
left
lub right
atrybutu align
spowodują „opływanie”
tekstu dookoła obrazka, dosuniętego do lewego lub prawego marginesu.
Efekt opływania zostanie przerwany w miejscu, w którym umieścimy element wymuszający koniec wiersza
w postaci <br align="położenie" />
, lub dowolny element, którego styl
posiada zdefiniowaną cechę clear
.
<object type="typ-danych" data="URI-pliku" width="szer" height="wys" align="położenie">opis</object>
object
jest niezwykle ogólny,
zaś wymagania co do sposobu jego interpretacji niezbyt ściśle określone;
w kontekście bieżącego kursu znaczenie mają jedynie typy danych:
text/plain
(tzn. tekst niesformatowany),
text/html
(tekst sformatowany środkami języka HTML)
oraz image/*
(czyli obrazy bądź rysunki zapisane w odpowiednim formacie;
zamiast gwiazdki należy umieścić nazwę formatu rastrowego
gif
, jpeg
lub png
albo formatu wektorowego svg+xml
).
Wartości left
lub right
atrybutu align
spowodują „opływanie”
tekstu dookoła obrazka, dosuniętego do lewego lub prawego marginesu.
Efekt opływania zostanie przerwany w miejscu, w którym umieścimy element wymuszający koniec wiersza
w postaci <br align="położenie" />
, lub dowolny element, którego styl
posiada zdefiniowaną cechę clear
.
Elementów z tej grupy (oprócz dwóch pierwszych) nie powinno się nadużywać. Bardzo często zamiast nich lepiej jest zastosować odpowiedni element znakowania logicznego.
<sub>
tekst </sub>
<sup>
tekst </sup>
<big>
tekst </big>
<small>
tekst </small>
<b>
tekst </b>
strong
).<i>
tekst </i>
cite
, dfn
, em
, q
ani var
).<tt>
tekst </tt>
code
ani pre
).<u>
tekst </u>
<hr width="szer" />
Znaczniki elementu font
nie wnoszą żadnej istotnej informacji
związanej z budową dokumentu. Te same efekty prezentacyjne można
w prostszy i bardziej elastyczny sposób osiągnąć korzystając
z arkuszy stylów. Znaczniki bezpośredniego sterowania pismem
są wyraźnie przestarzałe i ich używanie świadczy najczęściej
o braku umiejętności poprawnego znakowania strukturalnego.
W najnowszych specyfikacjach języka XHTML
element font
już nie występuje.
<font face="nazwa">
tekst </font>
<font size="stopień">
tekst </font>
<font color="kolor">
tekst </font>
<style type="text/css">
tekst </style>
style
powinien wystąpić w obszarze nagłówka (head
) dokumentu.<link rel="stylesheet" type="text/css" href="nazwa" />
nazwa
.
Opisy stylów zawarte we wskazanym pliku zostaną zastosowane do prezentacji dokumentu.
Element link
powinien wystąpić w obszarze nagłówka (head
) dokumentu.* {opis-stylu}
nazwa-elementu {opis-stylu}
nazwa-elementu1 nazwa-elementu2 {opis-stylu}
nazwa-elementu1>nazwa-elementu2 {opis-stylu}
nazwa-elementu1 + nazwa-elementu2 {opis-stylu}
nazwa-elementu.nazwa-stylu {opis-stylu}
.nazwa-stylu {opis-stylu}
.nazwa-stylu nazwa-elementu {opis-stylu}
nazwa-elementu:pseudoelement {content: "zawartość" opis-stylu}
before
, sformatowana zgodnie z opisem-stylu,
jest umieszczana w dokumencie bezpośrednio przed każdym obszarem zastosowania
elementu nazwa-elementu, a pseudoelementu after
—
bezpośrednio za takim obszarem. Inne pseudoelementy nie są dla nas interesujące.<element class="nazwa-stylu">
class
dowolnego elementu wskazuje, że
obszar jego obowiązywania ma zostać sformatowany zgodnie z wymaganiami
stylu nazwa-stylu.<element style="opis-stylu">
style
dowolnego elementu zawiera szczegółowy opis
właściwości stylu, za którego pomocą element ten ma zostać sformatowany. Mimo, że formalnie
atrybut style
jest związany z pojęciem stylu, to jego stosowanie zachęca
do formatowania wizualnego i dlatego jest niepożądane w dokumentach projektowanych strukturalnie.Elementy tu wymienione nie powinny się znaleźć w żadnym poprawnie oznakowanym dokumencie HTML. Ich stosowanie świadczy na ogół o braku umiejętności poprawnego projektowania dokumentu. Ponieważ elementów tych powinno się w ogóle nie używać, podajemy tylko ich nazwy, pomijając szczegółowy opis.
<center>
<blink>
<font>
<marquee>
<iframe src="URI-pliku" width="szer" height="wys" align="położenie">opis</iframe>
object
.
<multicol>
Lista elementów nielegalnych i niepożądanych jest o wiele dłuższa. Wymieniłem tylko kilka pozornie najbardziej atrakcyjnych, zatem najchętniej stosowanych przez nieświadomych rzeczy autorów.
Tekst źródłowy dokumentu HTML zawiera treść i polecenia formatowania. Oba typy informacji są zapisane znakowo (potrafimy je zapisywać i czytać jako znaki ASCII lub UNICODE). Plik źródłowy HTML jest więc dokumentem znakowym.
W trakcie prezentacji dokumentu polecenia te muszą być zinterpretowane przez przeglądarkę. Dokument HTML w postaci przeznaczonej do czytania nie jest dokumentem znakowym, mimo że został przygotowany na podstawie zawartości pliku znakowego.
Elementy HTML, stosowane w myśl reguł znakowania XML, umożliwiają — choć w ograniczony sposób — nadawanie tekstowi cech wskazujących na rolę, jaką pełni w dokumencie zgodnie z zamiarem autora. Możliwe — i zalecane — jest więc oddzielenie procesu znakowania od procesu określania szczegółów wyglądu oznakowanego tekstu (ten drugi nie należy już do zakresu kompetencji autora, lecz redaktora, nawet jeżeli w danym przypadku jest to ta sama osoba). Znaczy to, że podczas znakowania należy przede wszystkim korzystać ze znaczników strukturalnych i logicznych, a o innych najlepiej zapomnieć. Tak zbudowane dokumenty będą czytelne, a zarazem podatne na zmiany redakcyjne.
Współczesne procesory tekstu mogą odczytywać i interpretować dokumenty HTML. Język HTML stanowi więc sensowny sposób przechowywania i wymiany umiarkowanie skomplikowanych dokumentów o typowej budowie, możliwy do wykorzystania przez większość użytkowników komputerów, niezależnie od stosowanego przez nich oprogramowania.
Tworzenie prawidłowych dokumentów (X)HTML nie jest trudne, lecz wymaga zapoznania się z ogólnymi zasadami budowania i formatowania dokumentu, a także zachowania pewnej dyscypliny. Istnieją środowiska edycyjne przeznaczone specjalnie do tworzenia dokumentów HTML (np. Amaya, SeaMonkey Composer, NVu, Pajączek). Wykorzystanie w tym celu biurowych edytorów wizualnych jest co prawda możliwe, lecz niezbyt skuteczne, gdyż wpływ autora na ostateczną zawartość pliku źródłowego jest ograniczony.
Istotne jest, że reguły znakowania są niezależne od środowisk przygotowywania dokumentów oraz od przeglądarek interpretujących dokumenty. O tym, czy dany dokument jest zbudowany zgodnie z wymaganiami języka, da się rozstrzygnąć na podstawie formalnej procedury. Automaty dokonujące takiej analizy noszą nazwę walidatorów składni. Konsorcjum WWW w swoim serwisie sieciowym umożliwia wszystkim chętnym przeprowadzenie analizy dowolnego dokumentu.