Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Tekst i jego atrybuty

Email Drukuj PDF

Wypełnianie stron WWW tekstem zawsze będzie trudniejsze niż wypełnienie tym samym tekstem kartki papieru za pomocą edytora tekstu, takiego jak Microsoft Word. Tworząc stronę WWW, musisz cały czas pamiętać o zachowaniu struktury dokumentu; na przykład, jeśli linijka tekstu pełni funkcję nagłówka sekcji tekstu, musisz zawrzeć ją wewnątrz znacznika XHTML opisującego nagłówek. Poza tym sam wygląd strony musi być o wiele ciekawszy niż w przypadku dokumentu wydrukowanego na papierze — do dyspozycji masz wiele krojów, rozmiarów i kolorów czcionek, a informacje ich dotyczące musisz w odpowiedni sposób zakodować.

Wprowadzanie tekstu

Podstawowym elementem tekstowym języka XHTML jest akapit. Akapit tekstu reprezentowany jest w kodzie przez element <p>. Nie jest istotne, jak rozmieścisz tekst wewnątrz elementu <p>; przeglądarka zawsze złoży go tak, aby wypełnił całą szerokość okna.

Spróbuj teraz umieścić kursor zaraz za znacznikiem otwierającym <body>, oznaczającym początek kodu treści strony. Naciśnij klawisz Enter, aby wstawić nową linię zaraz za znacznikiem, a następnie wprowadź znacznik otwierający <p>, dowolny tekst, który ma być umieszczony na stronie, i znacznik zamykający </p>. Na koniec zapisz zmieniony kod strony i zaktualizuj zawartość okna przeglądarki.

Jak widzisz, wprowadzony tekst pojawił się wewnątrz okna przeglądarki, jednak zamiast polskich znaków diakrytycznych pojawiły się różne dziwne znaki (rysunek 3.1).

Rysunek 3.1. Treść tworzonej strony WWW pojawiła się już w oknie przeglądarki — zamiast polskich akcentów pojawiły się jednak prostokąty

Deklarowanie sposobu kodowania polskich znaków diakrytycznych

Zauważyłeś zapewne, że przeglądarka nieprawidłowo wyświetla polskie znaki diakrytyczne: zamiast nich wyświetlane są symbole zwane popularnie „robaczkami”. Dzieje się tak dlatego, że w kodzie strony nie ma informacji o sposobie kodowania polskich znaków.

Aby ją dodać, umieść kursor zaraz za elementem <title> i naciśnij klawisz Enter, aby umieścić za nim nową, pustą linię. Wprowadź w niej tekst znacznika <meta> o postaci:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Wydawać by się mogło, że powyższy element <meta> nie został zamknięty. Nic bardziej błędnego: znak / umieszczony tuż przed kończącym znacznik nawiasem ostrokątnym oznacza, że wprowadzony znacznik jest zarazem znacznikiem otwierającym, jak i zamykającym element <meta>. Z tego typu sztuczką spotkasz się jeszcze przy okazji omawiania wielu innych znaczników.

Powyższa deklaracja określa, że strona zapisana jest zgodnie z normą UTF-8. Oczywiście aby było to prawdą, faktycznie w czasie zapisywania pliku musisz wybrać opcję wymuszającą trzymanie się standardu UTF-8. W programie Webber możesz to uczynić, wybierając przed zapisaniem pliku w menu Kodowanie pozycję Unikod UTF-8, zaś w Notatniku w oknie dialogowym Zapisz jako z listy Kodowanie powinna być wybrana pozycja UTF-8. Zakodowanie pliku podczas jego zapisywania w inny sposób, niż jest to podane w jego wnętrzu, uniemożliwi przeglądarce prawidłowe wyświetlenie znaków spoza alfabetu łacińskiego.

Jeżeli dodałeś już znacznik <meta> i zapisałeś zmiany na dysku twardym, odśwież stronę w oknie przeglądarki. Polskie znaki diakrytyczne powinny teraz prezentować się bez zarzutu (rysunek 3.2).

Rysunek 3.2. Tym razem tekst prezentuje się najzupełniej poprawnie

Gdybyś chciał użyć normy ISO-8859-2 (możesz tego dokonać tylko, korzystając z programu Webber lub innego, dysponującego taką funkcją edytora tekstu), musisz zamienić napis utf-8 na iso-8859-2 nie tylko wewnątrz elementu <meta> wprowadzonego przed chwilą, ale też w znaczniku <?xml?> znajdującym się w pierwszym wierszu pliku:

<?xml version="1.0" encoding="iso-8859-2"?>

...

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

Wskazówka
Decydujące znaczenie w wyborze standardu kodowania ma niestety serwer WWW, na którym umieszczone są pliki składowe strony. Jeżeli zatem strona WWW działa doskonale tak długo, jak długo zapisana jest na dysku twardym Twojego komputera, przestaje jednak wyświetlać prawidłowo polskie znaki diakrytyczne po umieszczeniu jej na serwerze, będziesz musiał zmienić standard kodowania lub porozumieć się z administratorem serwera, by wprowadził odpowiednie zmiany w konfiguracji.

Atrybuty tekstu

Aby wyróżnić szczególnie istotny fragment tekstu na ekranie, należy użyć tak zwanych atrybutów tekstu. Należą do nich między innymi:

  • pogrubienie, będące najprostszym sposobem wyróżnienia tekstu na ekranie komputera lub kartce papieru,

  • pochylenie (kursywa), stosowane najczęściej do wyróżniania terminów obcojęzycznych lub cytatów,

  • podkreślenie, stosowane bardzo rzadko, gdyż może mylić się z odnośnikami,

  • indeksy górne i dolne, stosowane we wzorach matematycznych i chemicznych.

Pamiętaj, by atrybuty tekstu stosować tylko i wyłącznie do podkreślania znaczenia pojedynczych wyrazów czy zwrotów. Nie wolno ich używać w celu nadawania wyglądu całym większym fragmentom tekstu, na przykład pogrubiania wszystkich nagłówków lub elementów menu nawigacyjnego strony, służącego do przechodzenia między poszczególnymi stronami składowymi serwisu. Tego, jak sterować wyglądem całych partii tekstu, dowiesz się w dalszych partiach kursu, w części poświęconej kaskadowym arkuszom stylu.

Skoro już wiesz, w jakich okolicznościach wolno używać atrybutów tekstu, czas na przykład pokazujący, jak ich używać. Każdy atrybut wymaga otoczenia fragmentu tekstu, którego ma dotyczyć, znacznikiem otwierającym (nadającym atrybut) i zamykającym (kończącym jego wykorzystanie). Oto odpowiednie pary znaczników dla poszczególnych atrybutów:

pogrubienie fizyczne:

<b>...</b>

pogrubienie logiczne:

<strong>...</strong>

kursywa:

<i>...</i>

emfaza:

<em>...</em>

podkreślenie:

<u>...</u>

indeks górny:

<sup>...</sup>

indeks dolny:

<sub>...</sub>

Pamiętaj o tym, aby nie przeplatać ze sobą elementów. Gdybyś zatem chciał uzyskać następujący efekt:

fragment tekstu najpierw pochylony, potem jeszcze pogrubiony, a na koniec tylko gruby

absolutnie nie wolno Ci zastosować następującej konstrukcji:

<p>fragment tekstu <i>najpierw pochylony, <b>potem jeszcze pogrubiony,</i> a na koniec tylko gruby</b></p>

gdyż element <i> kończy się wewnątrz zawartego w nim elementu podrzędnego <b>. Prawidłowy kod to:

<p>fragment tekstu <i>najpierw pochylony, <b>potem jeszcze pogrubiony,</b></i><b> a na koniec tylko gruby</b></p>

Widzisz zatem, że konieczność trzymania się zasady zamykania znaczników zawsze w kolejności odwrotnej do ich otwierania może czasem powodować konieczność wprowadzania dodatkowych, nadmiarowych znaczników.

Nieco uwagi trzeba poświęcić podziałowi na formatowanie logiczne i fizyczne. Jeżeli chcesz podkreślić jakiś fragment tekstu — tak, by w czasie czytania musiał być odczytany podniesionym głosem — stosuj formatowanie logiczne, a więc element <strong>. Formatowanie fizyczne — element <b> — jest zarezerwowane tylko dla przypadków, w których liczy się wyłącznie wygląd tekstu, a nie jego znaczenie; krótko mówiąc — gdy tekst nie jest istotny, a ma być jedynie zapisany grubszymi literkami. Nieco trudniejsza sprawa jest z emfazą: w języku polskim raczej nie stosuje się kursywy do podkreślania znaczenia tekstu; kursywą zapisuje się wyrazy obce, a tę funkcję może spełniać bez problemu element formatowania fizycznego <i>.

Spróbuj teraz przetestować działanie atrybutów, umieszczając wewnątrz elementu <body> akapit tekstu zawierający próbki wszystkich atrybutów fizycznych, na przykład (rysunek 3.3):

  <p><b>Próba:</b> <i>c</i><sup>2</sup> = <i>a</i><sup>2</sup> +

  <i>b</i><sup>2</sup>,  C<sub>2</sub>H<sub>5</sub>OH</p>

Rysunek 3.3. Za pomocą języka XHTML bez problemu można zapisywać nawet proste wyrażenia algebraiczne czy wzory chemiczne

Wskazówka
Aby jeszcze lepiej podkreślić pochodzenie wyrazu obcego wyróżnionego kursywą, możesz użyć atrybutu lang, pozwalającego określić język, którym zapisany jest tekst dowolnego znacznika. Co prawda nie wpływa to w żaden sposób na wyświetlanie zawartości strony WWW, jednak upraszcza dalszą obróbkę tekstu. Poniższy przykładowy fragment kodu XHTML zawiera kilka wyrazów obcojęzycznych (rysunek 3.4):

<p><i lang="fr">Mon dieu</i>&nbsp;&mdash; zakrzyknęła hrabina&nbsp;&mdash; Cóż&nbsp;mam począć, gdy&nbsp;to piekielne urządzenie wyświetla wciąż komunikat <i lang="en">Out of paper</i>?</p>

Rysunek 3.4. W powyższym fragmencie tekstu niektóre wyrazy są nie tylko zapisane innym krojem, podkreślającym ich obce pochodzenie, lecz również są wyróżnione w samym kodzie, dzięki czemu prostsza staje się automatyczna obróbka tekstu

Sterowanie łamaniem wierszy

Twarde spacje

Twarda spacja to pewien szczególny rodzaj spacji (odstępu). Na ekranie niczym się nie różni od zwykłej spacji, jednak wyrazy nią połączone zawsze będą wyświetlane w jednej linii: jeśli pojawią się na końcu linii, to albo zostaną przeniesione oba, albo też razem pozostaną na końcu wiersza.

W języku XHTML twardej spacji odpowiada tzw. encja o postaci &nbsp;. Używając programu Webber, masz jednak ułatwione zadanie — wstawienie twardej spacji wymaga skorzystania z kombinacji klawiszy Ctrl+Spacja, zaś sama twarda spacja wyświetlana jest na ekranie jako mała szara kropka, niezaciemniająca wyglądu tekstu.

Wskazówka
Encja to pewien specyficzny rodzaj znacznika XHTML. Rozpoczyna się znakiem &, kończy znakiem średnika (;), zaś tekst zawarty między tymi dwoma znakami reprezentuje jeden ze znaków specjalnych dostępnych dla projektanta strony WWW. Więcej o znakach specjalnych dowiesz się w dalszej części kursu.

Oto przykład kodu (oczywiście wymagającego wstawienia do wnętrza elementu <body> szablonu pustej strony WWW) przedstawiającego różnicę pomiędzy zwykłą spacją a encją &nbsp; (rysunek 3.5):

<p>Bez twardych spacji: a a a a a a a a a a a a m m m m m m m m m m m m m

m m m m o o o o o o o o o o o o o o w w w w w w w w w w w w w w w</p>

<p>Z twardymi spacjami: a&nbsp;a&nbsp;a&nbsp;a&nbsp;a&nbsp;a&nbsp;a&nbsp;a&nbsp;a&nbsp;a

m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m&nbsp;m

o&nbsp;o&nbsp;o&nbsp;o&nbsp;o&nbsp;o&nbsp;o&nbsp;o&nbsp;o&nbsp;o&nbsp;o&nbsp;o

w&nbsp;w&nbsp;w&nbsp;w&nbsp;w&nbsp;w&nbsp;w&nbsp;w&nbsp;w&nbsp;w&nbsp;w&nbsp;w</p>

Rysunek 3.5. Brak twardych spacji powoduje, że przeglądarka może złamać wiersz w każdym miejscu, w którym w tekście pojawia się znak odstępu; twarda spacja pozostawia odstęp, uniemożliwia jednak podział wiersza w tym miejscu

Pamiętaj, że przeglądarka WWW łamie tekst na wiersze nie tylko w miejscach, w których wcisnąłeś klawisz Enter, pisząc kod, ale też na każdym znaku spacji — o ile widzi taką potrzebę. Twardych spacji używaj zatem wszędzie tam, gdzie niezbędne jest, by dwa wyrazy lub symbole nie zostały rozdzielone pomiędzy wiersze tekstu. Nie nadużywaj jednak encji &nbsp;, gdyż w nadmiarze może spowodować, że wiersze tekstu będą nienaturalnie krótkie i nieregularne.

Dobrym przykładem prawidłowego zastosowania twardych spacji jest łączenie krótkich wyrazów (i, na, od, pod, się) z ich sąsiadami, by uniknąć kończenia wiersza samotnym i lub rozpoczynania należącym do poprzedniego wyrazu się.

Dzielenie wyrazów

W każdej dobrze złożonej książce długie wyrazy znajdujące się na końcu wiersza i niemieszczące się w nim dzieli się, by nie musieć przenosić ich do kolejnego wiersza i wstawiać wielkich odstępów między pozostałymi wyrazami. Reguły dzielenia są inne w każdym języku, a w przypadku języka polskiego są szczególnie skomplikowane, uwzględniają bowiem nie tylko podział sylabiczny, ale też pochodzenie poszczególnych słów. Dobrze zrealizowane dzielenie wyrazów wyrównuje odstępy między nimi i przyspiesza czytanie długich fragmentów tekstu; źle podzielony tekst irytuje prawie tak bardzo, jak tekst pozbawiony podziałów.

Niestety, przeglądarki WWW nie potrafią samodzielnie dzielić tekstu. Zadanie to trzeba wykonać samemu, wprowadzając do kodu XHTML informacje o tym, w których miejscach można dzielić wyrazy. Oczywiście jest to zadanie tak monotonne i czasochłonne, że ktokolwiek myślący o wprowadzaniu informacji o wszystkich możliwych miejscach podziału musi szukać rozwiązania programowego, automatyzującego tę czynność.

Często jednak w jakimś bloku tekstu wystarczy podzielić kilka wyjątkowo długich wyrazów, by zdecydowanie zyskał on na czytelności i wyglądzie. W takim przypadku wystarczy wstawić kod (encję — z dalszej części rozdziału dowiesz się, czym jest encja) &shy; we wszystkich miejscach, w których może nastąpić podział wyrazu i wiersza (rysunek 3.6):

<p><b>Tekst bez podziału wyrazów:</b></p>

<p style="text-align: justify;">Chrzęszczybrzyszczykiewicz chrabąszczównę nieprawdopodobnie skoncentrował pałaszując przeterminowaną jagnięcinę poszczekując przefantastycznie energicznie i&nbsp;wstrząsając tryumfalnie wybujałą grzywą.</p>

<p><b>Tekst z&nbsp;podziałami wyrazów:</b></p>

<p style="text-align: justify;">Chrzęszczy&shy;brzysz&shy;czy&shy;kie&shy;wicz chra&shy;bąsz&shy;czównę nie&shy;praw&shy;do&shy;po&shy;dob&shy;nie skon&shy;cen&shy;tro&shy;wał pała&shy;szu&shy;jąc prze&shy;ter&shy;mi&shy;no&shy;waną jag&shy;nię&shy;cinę poszcze&shy;ku&shy;jąc prze&shy;fan&shy;tas&shy;tycz&shy;nie ener&shy;gicz&shy;nie i&nbsp;wstrzą&shy;sa&shy;jąc tryum&shy;fal&shy;nie wybu&shy;ja&shy;łą grzywą.</p>

Rysunek 3.6. Dzielenie wyrazów przede wszystkim czyni czytanie tekstu przyjemniejszym; jeżeli tekst zawiera bardzo długie wyrazy, zapobiega też pojawianiu się zbyt dużych odstępów w wierszu

Wskazówka
Więcej informacji o dzieleniu wyrazów na stronach WWW znajdziesz pod adresem http://www.grush.one.pl/blog.php?month=2009-08&id=960.

Wymuszanie złamania wiersza

Czasem może Ci być potrzebne przerwanie biegu tekstu wewnątrz akapitu i rozpoczęcie dalszej części od kolejnego wiersza. Mógłbyś próbować to zrobić poprzez zamknięcie poprzedniego elementu <p> i otwarcie nowego, jednak oznacza to stworzenie nowego akapitu tekstu — a więc zmianę struktury logicznej strony. Ponadto przeglądarka może w takim przypadku wstawić między akapitami dodatkowy odstęp, który przeszkodzi w osiągnięciu zamierzonego układu tekstu. Język XHTML definiuje jednak element jednoznacznikowy <br>, którego zadaniem jest przerywanie biegu tekstu wewnątrz akapitu (rysunek 3.7):

<p style="text-align: left;">To<br />

jest<br />

jeden<br />

akapit<br />

w sześciu<br />

wierszach!</p>

Rysunek 3.7. Element <br> umożliwia wymuszenie podziału wiersza bez konieczności tworzenia nowego akapitu tekstu

Wskazówka
Staraj się jak najrzadziej używać elementu <br>. Jest on przydatny w naprawdę wyjątkowych sytuacjach. Normalny tekst, podzielony na akapity, prawie nigdy nie musi być przerwany w środku wiersza i kontynuowany od kolejnego.

Skróty i cytaty

Kolejnymi składnikami tekstu, które w języku XHTML awansują do roli budulca struktury dokumentu, są skróty i cytaty. Stosując odpowiednie znaczniki, można ułatwić automatyczne rozwijanie skrótów (o ile się je stosuje), skrótowców (przed którymi trudno uciec), a także wspomóc mechanizm budowania spisu odniesień do literatury oraz ułatwić innym przeglądanie źródeł, na podstawie których przygotowało się tekst.

Skróty

Skróty — z punktu widzenia języka XHTML — dzielą się na dwie podstawowe grupy:

  • skróty często używanych sformułowań: „np.” (na przykład), „sp. z o. o.” (spółka z ograniczoną odpowiedzialnością),

  • skrótowce odpowiadające nazwom rozwiązań lub firm: „IBM” (ang. International Business Machines), „XHTML” (ang. Extended Hypertext Markup Language).

Pisząc tekst w edytorze, zazwyczaj wprowadza się skróty i skrótowce bez specjalnego zastanowienia. Dokument zostanie przecież wydrukowany i przeczytany, a osoba czytająca podświadomie zastąpi znane przecież skróty ich rozwinięciami. Kłopot może się pojawić jedynie w przypadku stosowania skrótowców mniej znanych nazw.

Ze stroną WWW jest inaczej. Strona może być czytana nie bezpośrednio przez czytelnika, lecz przez moduł syntezatora mowy, odczytujący na głos jej treść osobie niewidomej. Zamknij teraz oczy i wyobraź sobie, że słyszysz syntezator ogłaszający: „Można zastosować en pe. Takie rozwiązanie”. Nie ma to sensu, prawda?

Rozwiązaniem jest element <abbr> języka XHTML. Pozwala on zachować w tekście skróconą formę pewnego sformułowania, a jednocześnie zapisać jej rozwinięcie, przydatne syntezatorom mowy. Rozwinięcie zapisuje się za pomocą atrybutu title elementu, zaś formę skróconą — wewnątrz elementu. Przeglądarki WWW najczęściej wyświetlają skrót bez zmian (Internet Explorer) lub z wykropkowanym podkreśleniem (Mozilla Firefox), a po wskazaniu go myszą prezentują (w dymku) rozwinięcie. Czytniki stron wyposażone w syntezatory mowy zignorują natomiast zawartość znacznika i odczytają w zamian treść atrybutu title (rysunek 3.8).

<p>Użycie innych środków, <abbr title="na przykład">np.</abbr> kleju do&nbsp;glazury, może spowodować odpadnięcie tapety od&nbsp;ściany. Zastosuj raczej <abbr title="wyżej wymienione">ww.</abbr> metody, a&nbsp;nie wymyślaj własnych.</p>

Rysunek 3.8. Za pomocą elementu <abbr> można wzbogacić skróty stosowane na stronie o rozwinięcia, wykorzystywane na przykład przez syntezatory tekstu używane przez niewidomych

Wskazówka
Mimo użyteczności elementu <abbr> pamiętaj, że na stronach WWW nie jesteś ograniczony miejscem, a pisanie tekstu na komputerze nie jest tak uciążliwe jak pisanie ręczne lub używanie maszyny do pisania. Zazwyczaj na stronach WWW po prostu nie stosuje się skrótów, od razu w tekście umieszczając rozwinięcia. Taki tekst jest nieco obszerniejszy, ale przyjemniej się go czyta.

W inny sposób należy oznaczać skrótowce powstałe z długich nazw pochodzących z obcych języków, nazw firm lub rozwiązań. Takie skrótowce często są zrozumiałe mimo czytania litera po literze, nie mogą być zatem zawsze rozwijane do pełnej postaci. Z drugiej strony, warto zapisać w tekście strony rozwinięcie skrótu, gdyż czytelnik może go nie znać i na pewno będzie wdzięczny, jeżeli rozwinięcie zostanie wyświetlone po wskazaniu skrótu myszą i oszczędzi mu konieczności wędrowania po obcych stronach WWW lub samodzielnego poszukiwania informacji.

Do zapisywania skrótowców służy element <acronym>. Jak w przypadku elementu <abbr>, sam skrót zapisuje się w treści elementu, zaś rozwinięcie — wewnątrz atrybutu title (rysunek 3.9). Ponieważ jednak skróty najczęściej są obcego pochodzenia, praktycznie obowiązkowe staje się użycie również atrybutu lang, umożliwiającego wskazanie języka, w którym zapisane jest rozwinięcie skrótu. Pozwoli to syntezatorowi mowy na zmianę modułu syntezującego i odczytanie (w razie potrzeby) skrótu we właściwy sposób.

<p>Jeżeli połączysz język opisu struktury dokumentu <acronym lang="en" title="Extended Hypertext Markup Language">XHTML</acronym> z&nbsp;językiem opisu formy graficznej <acronym lang="en" title="Cascading Style Sheets">CSS</acronym> i&nbsp;dołożysz do&nbsp;tego język programowania <acronym lang="en" title="PHP Hypertext Preprocessor">PHP</acronym>, uzyskasz w&nbsp;efekcie <acronym title="Super Wyglądającą Stronę WWW">SWSW</acronym>!</p>

Rysunek 3.9. Element <acronym> działa podobnie jak <abbr>, należy go jednak stosować do skrótowców

Wskazówka
Atrybut lang można pominąć, jeżeli rozwinięcie skrótu jest zapisane w tym samym języku co reszta treści strony.

Cytaty

Cytowanie jest podstawą pracy naukowej. Jednak nawet jeżeli strona WWW nie ma charakteru naukowego, trudno uciec przed koniecznością cytowania wypowiedzi innych, czy to ustnych, czy też zaczerpniętych z druku lub wręcz innej strony WWW.

Cytowany tekst powinien być zamknięty znakami cudzysłowu, a także wyróżniony wizualnie. Dodatkowo należy jednak pamiętać, że dokumenty zapisane w języku XHTML muszą mieć wyraźnie oznaczoną strukturę logiczną; takie oznaczenie dotyczy też cytatów, którym przysługują dwa odrębne elementy języka.

Krótkie wtrącenia, niestanowiące odrębnego akapitu, należy zamykać w elemencie <q>. Tak oznaczony fragment tekstu zostanie wyróżniony kursywą i zapisany wewnątrz znaków cudzysłowu (rysunek 3.10); oczywiście ten sposób wyróżnienia można zmienić za pomocą kaskadowych arkuszy stylu, o których dowiesz się więcej w kolejnych rozdziałach. Opcjonalny atrybut lang określa język, w którym zapisana jest treść cytatu (o ile różni się on od języka całości dokumentu), a atrybut cite może zawierać adres URI strony WWW, z której pochodzi cytat (o ile oczywiście jest to cytat z jakiejś strony).

<p><q lang="en">Geez, have I really sold so many CDs?</q>&nbsp;&mdash;

zdumiała&nbsp;się &bdquo;księżniczka popu&rdquo;. Bezpodstawnie, gdyż

<q cite="http://pl.wikipedia.org/wiki/Britney_Spears">[...]&nbsp;[w]edług

serwisu Billboard jest najlepiej sprzedającą&nbsp;się artystką ostatniej

dekady.&nbsp;[...]</q>.</p>

Rysunek 3.10. Element <q> umożliwia umieszczanie krótkich cytatów wewnątrz akapitu i ich automatyczne formatowanie

Wskazówka
Jak widzisz, dzięki atrybutowi lang przeglądarka WWW może zastosować właściwe dla danego języka typograficzne znaki cudzysłowu.

Wskazówka
Atrybut cite nie stanowi odnośnika. Informacja o adresie pochodzenia cytatu będzie zapisana w kodzie XTML strony i dostępna dla ciekawych, jednak przeglądarka WWW nie ma obowiązku udostępniania jakiegokolwiek mechanizmu przechodzenia na źródłową stronę WWW (i — jak widać — nie robi tego).

Większe cytaty zazwyczaj umieszcza się w oddzielnym akapicie, często wyróżnionym szerszymi marginesami. Język XHTML znów idzie tutaj na rękę twórcy stron WWW, udostępniając element <blockquote> służący właśnie do zapisu większych cytatów, stanowiących oddzielny blok tekstu. Element ten stosuje się podobnie jak element <q> (również uzupełniając go w razie potrzeby atrybutami lang i cite), jednak — ze względu na blokowy charakter — element <blockquote> nie może znajdować się wewnątrz akapitu tekstu (elementu <p>), lecz równorzędnie z innymi akapitami (rysunek 3.11).

<p>Zapytana czym jest dla&nbsp;niej śpiewanie, Anna Maria Jopek odpowiedziała:</p>

<blockquote cite="http://muzyka.onet.pl/10172,1324764,wywiady.html">Śpiewanie to&nbsp;najdoskonalsza forma oddychania. Cała&nbsp;wiedza o&nbsp;technice śpiewu tkwi w&nbsp;umiejętności oddechu&nbsp;&mdash; jeśli już Bóg dał&nbsp;ci ciekawą barwę głosu, i&nbsp;nieskazitelny słuch, i&nbsp;wrodzone wyczucie stylu. Ciężko&nbsp;to zdefiniować! Szczególnie, że&nbsp;moje ulubione wokalistki to&nbsp;nie akrobatki, a&nbsp;mądre, dojrzałe, prawdziwe kobiety, takie jak Shirley Horn czy Joni Mitchell.</blockquote>

Rysunek 3.11. Element <blockquote> należy stosować, gdy chce się umieścić na stronie dłuższy cytat, składający się z odrębnego akapitu lub kilku akapitów

Wskazówka
Za pomocą kaskadowych arkuszy stylu możesz w bardzo prosty sposób zmodyfikować domyślny wygląd cytatu blokowego <blockquote>, dodając wszystkim takim cytatom tło, zmieniając krój pisma czy nawet — zgodnie z obowiązującą ostatnio modą — wstawiając w tło obraz przedstawiający wielki znak cudzysłowu.

Zapisywanie fragmentu tekstu
czcionką nieproporcjonalną

Tekst, który właśnie czytasz, zapisany jest czcionką proporcjonalną, to znaczy taką, w której każda z liter alfabetu ma inną szerokość, idealnie dopasowaną do jej kształtu. Tekst zapisany takim rodzajem czcionki jest znacznie przyjemniejszy w odbiorze niż tekst złożony za pomocą czcionki nieproporcjonalnej, o stałej szerokości znaków.

Są jednak sytuacje, w których fragment tekstu trzeba obowiązkowo zapisać czcionką nieproporcjonalną. Najczęściej taką czcionkę stosuje się na stronie WWW, na której ma być zamieszczony fragment kodu programu lub ciąg poleceń systemu operacyjnego.

Język XHTML daje Ci do dyspozycji element <tt>, dzięki któremu zapisanie dowolnego fragmentu tekstu czcionką nieproporcjonalną jest równie proste jak pogrubienie go lub zapisanie kursywą. Elementu <tt> używa się najczęściej do osadzania wewnątrz akapitu pełnego tekstu pojedynczego słowa kluczowego, na przykład polecenia systemu operacyjnego (rysunek 3.12):

<p>Aby&nbsp;wyświetlić zawartość katalogu, wprowadź polecenie&nbsp;<tt>ls</tt>.

Aby&nbsp;dodatkowo wyświetlić&nbsp;też szczegóły dotyczące każdego pliku

czy&nbsp;katalogu, dodaj parametr&nbsp;<tt>-l</tt>: <tt>ls&nbsp;-l</tt>.</p>

Rysunek 3.12. Element <tt> umożliwia zapisanie dowolnego fragmentu tekstu nieproporcjonalną czcionką maszynową, nie definiuje jednak funkcji tak wyróżnianego tekstu

Wskazówka
Powyższy przykład pokazuje też, jak można skutecznie i przydatnie wykorzystywać encję &nbsp;, tworzącą twarde, niełamliwe spacje.

Element <tt> jest przydatny, lecz nie wprowadza do kodu żadnej informacji o funkcji tak wyróżnianego tekstu. Dlatego — gdy tylko to możliwe — należy stosować elementy języka XHTML wprowadzające formatowanie logiczne — dające identyczny efekt wizualny, jednak wzbogacające stronę WWW o warstwę informującą o znaczeniu poszczególnych znaków. Do elementów tych należą:

  • <code> — wskazuje, że dany fragment tekstu stanowi kod zapisany w jakimś języku programowania lub opisu strony,

  • <var> — wskazuje, że dany fragment tekstu może podlegać zmianom w zależności od tego, jaki efekt użytkownik (korzystający z tekstu jako przykładu) chce uzyskać,

  • <samp> — wyróżnia fragment kodu pełniący rolę przykładu do natychmiastowego wykorzystania,

  • <kbd> — wyróżnia fragment kodu lub tekstu, który ma zostać wprowadzony z klawiatury.

Poniższy przykład prezentuje wykorzystanie czterech opisanych powyżej elementów (rysunek 3.13):

<p>Aby&nbsp;spowodować przerwanie pętli komunikatów, wywołaj funkcję <code>PostQuitMessage(<var>kod</var>)</code>. Parametr <var>kod</var> oznacza kod&nbsp;zakończenia, przekazywany w&nbsp;polu <code>wParam</code> komunikatu <tt>WM_QUIT</tt>; kod&nbsp;ten należy zwrócić systemowi operacyjnemu, na&nbsp;przykład w&nbsp;następujący sposób: <samp>return msg.wParam;</samp>.</p>

<hr />

<p>Dialog z&nbsp;programem może wyglądać następująco:</p>

<p><samp>Wprowadź imię: <kbd>Radosław</kbd><br />

Wprowadź nazwisko: <kbd>Sokół</kbd></samp></p>

Rysunek 3.13. Przykład poprawnego zastosowania formatowania logicznego z wykorzystaniem elementów <code>, <var>, <samp> i <kbd>

Wskazówka
Domyślnie element <samp> nie różni się wizualnie od <code> czy <tt>, zaś element <kbd> w ogóle nie ma wpływu na wygląd tekstu. Za pomocą kaskadowych arkuszy stylu — o których dowiesz się więcej z dalszych rozdziałów tego poradnika — możesz jednak dowolnie kształtować wygląd strony korzystającej z wymienionych elementów języka XHTML. Opłaca się prawidłowo zapisywać kod, nawet jeśli początkowo nie ma to wpływu na formę strony: późniejsze narzucenie spójnej formy graficznej będzie naprawdę proste.

Zapisywanie większego fragmentu tekstu
czcionką nieproporcjonalną

Czasem może pojawić się potrzeba umieszczenia na stronie WWW większego fragmentu tekstu zapisanego czcionką nieproporcjonalną — na przykład fragmentu kodu źródłowego programu albo fragmentu kodu XHTML. Formatowanie takiego fragmentu zgodnie z regułami narzuconymi przez język XHTML byłoby straszliwie pracochłonne i nużące.

Na szczęście język XHTML pozwala na chwilowe anulowanie zasad składu i przejęcie przez autora kodu całkowitej kontroli nad wyświetlanym tekstem. Aby to uczynić, wystarczy objąć fragment tekstu znacznikami <pre> oraz </pre>. Tak ograniczony fragment będzie wyświetlany czcionką podobną do tej, jaką wyświetlany jest tekst elementu <tt>, jednak — w przeciwieństwie do elementu <tt> oraz znanych Ci już pewnie reguł, którymi kieruje się przeglądarka WWW, składając tekst strony — uwzględniany będzie każdy znak odstępu i każde naciśnięcie klawisza Enter. Spójrz zresztą na przykład (rysunek 3.14):

  <tt>To jest

  fragment           tekstu

 

  zapisany w znaczniku &lt;tt&gt;.</tt>

 

  <pre>To jest

  fragment           tekstu

 

 zapisany w znaczniku &lt;pre&gt;.</pre>

Rysunek 3.14. Różnica między tekstem zapisanym jako zwykły akapit (z wykorzystaniem elementu <tt>) oraz jako tekst preformatowany (element <pre>) jest widoczna na pierwszy rzut oka

Jedynymi znakami, których musisz się wystrzegać wewnątrz elementu <pre>, są znaki mniejszości (<), większości (>) i cudzysłowu ("). Za każdym razem, gdy ich użyjesz, zostaną one zinterpretowane jako fragment znacznika XHTML lub początek wartości atrybutu. Jeśli chcesz umieścić je w tekście, zastąp je encjami: &lt; (znak mniejszości), &gt; (znak większości) lub &quot; (cudzysłów). Więcej informacji na temat encji i odpowiadających im znaków specjalnych znajdziesz w punkcie Wstawianie znaków specjalnych.

Zmiana sposobu wyrównywania akapitu tekstu

Przeglądarki standardowo wyrównują akapity tekstu do lewego marginesu. Nic jednak nie stoi na przeszkodzie, by nakazać wyrównywanie akapitu tekstu do prawego marginesu, centrowanie akapitu lub justowanie go (wyrównywanie do obu marginesów).

Wskazówka
Nie nadużywaj centrowania tekstu. Nie ma nic gorszego niż strona WWW, której cała zawartość została wycentrowana.

Aby zamiast dosunięcia do lewego marginesu akapit tekstu reprezentowany przez element <p> został wycentrowany, wyjustowany lub wyrównany do prawego marginesu, dodaj do znacznika otwierającego <p> atrybut style z następującą wartością (rysunek 3.15):

  • text-align: left; — aby wyrównać tekst do lewego marginesu (jest to zachowanie domyślne),

<p style="text-align: left;">

  • text-align: right; — aby wyrównać tekst do prawego marginesu,

<p style="text-align: right;">

  • text-align: center; — aby wycentrować tekst,

<p style="text-align: center;">

  • text-align: justify; — aby wyrównać tekst do obu marginesów.

<p style="text-align: justify;">

Oto przykład:

<p style="text-align: left;">Do lewa</p>

<p style="text-align: center;">Na środek</p>

<p style="text-align: right;">Do prawa</p>

<p style="text-align: justify;">A ten oto akapit tekstu zostanie elegancko

wyjustowany, co uczyni go podobnym do&nbsp;dobrze złożonej książki lub&nbsp;gazety.

Nie&nbsp;zapominaj o&nbsp;znakach twardej spacji, by&nbsp;krótkie wyrazy

i&nbsp;łączniki nie&nbsp;zostawały samotnie na&nbsp;końcu&nbsp;wiersza!</p>

Rysunek 3.15. Cztery sposoby wyrównywania tekstu w ramach akapitu

Pamiętaj, że w ten sposób możesz zmienić wyrównanie tylko i wyłącznie pełnego akapitu tekstu. Jeżeli chcesz dokonać modyfikacji tylko w odniesieniu do fragmentu tekstu, musisz go wydzielić w formie odrębnego akapitu.

W powyższym ćwiczeniu po raz pierwszy użyłeś kaskadowych arkuszy stylu. Kaskadowe arkusze stylu są niezwykle wygodnym i zunifikowanym mechanizmem umożliwiającym nadawanie elementom języka XHTML atrybutów definiujących ich wygląd. Wszędzie, gdzie zobaczysz atrybut style dowolnego znacznika XHTML, masz do czynienia właśnie z kaskadowymi arkuszami stylu.

Zmiana koloru treści i tła akapitu

Mechanizm kaskadowych arkuszy stylu umożliwia Ci zmianę kolorów dowolnego elementu języka XHTML. Najczęściej pojawia się potrzeba zmiany kolorów tekstu, tła tekstu oraz tła całej strony, jednak dzięki kaskadowym arkuszom stylu (o których dowiesz się więcej w dalszych partiach tego kursu) można zmienić kolorystykę praktycznie dowolnego elementu graficznego na stronie.

Zmiana barw będzie polegała na określeniu wartości dwóch atrybutów stylu — background-color dla tła i color dla tekstu — zapisanych wewnątrz atrybutu style dowolnego elementu. To ten sam atrybut style, z którym zetknąłeś się przed chwilą, zmieniając sposób wyrównania akapitu tekstu — jeżeli zatem chcesz jednocześnie zmienić sposób wyrównania i kolorystykę, wystarczy umieścić wszystkie potrzebne deklaracje wewnątrz jednego atrybutu style. Przykład za chwilę.

Wskazówka
Ustalając atrybut stylu color elementu <body>, możesz za jednym zamachem zmienić kolor wszystkich akapitów tekstu, każdy z nich bowiem dziedziczy kolor tekstu po elemencie <body>.

Kolory można określać na trzy sposoby. Najprostszym z nich jest podanie angielskiej nazwy jednej ze standardowych barw przewidzianych przez twórców standardów WWW. W poniższej tabeli znajdziesz wszystkie dopuszczalne nazwy, na rysunku 3.16 możesz zobaczyć reprezentowane przez nie barwy.

Kod koloru

Kolor

aqua

turkusowy

black

czarny

blue

niebieski

fuchsia

jasnofioletowy

gray

szary

green

zielony

lime

jasnozielony

maroon

brązowy

navy

granatowy

olive

oliwkowy

purple

fioletowy

red

czerwony

silver

srebrny

teal

ciemnoturkusowy

white

biały

yellow

żółty

Wskazówka
W formie zadania domowego przetestuj wygląd każdej z barw, zmieniając tło akapitu tekstu.

Rysunek 3.16. Kolory odpowiadające poszczególnym nazwom oraz przypisane im kody barw

Drugi sposób określenia koloru daje znacznie szersze możliwości. Sposób ten polega na podaniu — po znaku # — trzech dwucyfrowych liczb szesnastkowych określających natężenie składowych (kolejno: czerwonej, zielonej i niebieskiej) barwy. Wadą tej metody jest konieczność oswojenia się z liczbami szesnastkowymi (00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11 i tak dalej aż do FF), pomogą Ci w tym jednak może poniższe grafy (rysunek 3.17).

Rysunek 3.17. Grafy przedstawiające przestrzeń barw RGB używaną przy określaniu kolorów elementów znajdujących się na stronach WWW

Trzecia metoda daje taką samą swobodę wyboru, lecz nie wymaga już znajomości liczb szesnastkowych. Zamiast kodu koloru wprowadź formułkę rgb(R,G,B), gdzie R, G i B to liczby z przedziału 0 – 255 oznaczające nasycenie barwy składowej: czerwonej (R), zielonej (G) i niebieskiej (B). Kod rgb(0,0,0) pozwoli Ci uzyskać czerń, rgb(255,255,255) biel, zaś rgb(255,0,0) czystą czerwień. W ten sposób możesz użyć dowolnego z ponad 16 milionów kolorów, o ile będzie on tylko dostępny na komputerze wyświetlającym Twoją stronę —pamiętaj, że możesz być pewien dostępności jedynie predefiniowanych barw.

Czas na przykłady. Poniższy kod strony WWW prezentuje metodę zmiany koloru tła strony oraz koloru tekstu i tła całego akapitu (rysunek 3.18):

<body style="background-color: yellow;">

 <p>Zwykły tekst.</p>

 <p style="text-align: center;">A teraz wycentrowany.</p>

 <p style="text-align: center; color: red;">Dodajemy teraz kolor czerwony.</p>

 <p style="background-color: #0000FF; color: #FFFF00;">Teraz bez centrowania,

 ale żółty na niebieskim tle.</p>

 <p style="background-color: #0000FF; color: #FFFF00; text-align: right;">A

 teraz jeszcze dosunięty do prawej krawędzi.</p>

</body>

Rysunek 3.18. Efekt zmiany koloru tła strony, tła akapitu i czcionki tekstu

Zmiana koloru treści i tła fragmentu tekstu

Za pomocą atrybutu style elementu <body> możesz zmienić kolor tła lub tekstu całej strony, a elementu <p> — kolor tekstu i tła całego akapitu tekstu, nie masz jednak możliwości pokolorowania pojedynczych słów lub zdań. Jest na to rada: wystarczy objąć fragment tekstu, którego kolor ma zostać zmieniony, elementem <span> i temu właśnie elementowi nadać atrybut style oraz atrybuty stylu (rysunek 3.19):

<p><span style="color: blue;">Każdy</span>

<span style="background-color: green; color: red;">wyraz</span>

<span style="background-color: yellow; color: blue;">jest</span>

<span style="background-color: gray; color: white;">inaczej</span>

<span style="background-color: black; color: cyan;">pokolorowany!</span></p>

Rysunek 3.19. Element <span> umożliwia zmianę sposobu formatowania nawet pojedynczych wyrazów lub liter

Zmiana kroju pisma i rozmiaru czcionki

Standardowy krój pisma, choć czytelny i elegancki, może nie odpowiadać Twojej wizji szaty graficznej strony. W każdej chwili masz jednak możliwość zmiany kroju pisma i rozmiaru czcionki globalnie (dla elementu <body>), na poziomie akapitu tekstu (dla elementu <p>) lub dla dowolnego wycinka tekstu (dla elementu <span>).

Przy wyborze kroju pisma masz do dyspozycji wszystkie kroje zainstalowane na Twoim komputerze. Pamiętaj jednak, że inni użytkownicy wcale nie muszą nimi dysponować! Z tego powodu powinieneś w miarę możliwości ograniczać się do standardowych rodzin krojów pisma:

  • serif — czcionka szeryfowa, na przykład Times New Roman [RS1] ,

  • sans-serif — czcionka bezszeryfowa, na przykład Arial [RS2] ,

  • cursive oraz fantasy — ozdobne czcionki pochyłe (rzadko używane, gdyż każda przeglądarka może podstawić w ich miejsce całkowicie inne kroje pisma — często w ogóle nieprzystające do zamysłu autora strony),

  • mono — czcionka nieproporcjonalna (o stałej szerokości wszystkich znaków), używana najczęściej do zapisywania tekstu programów komputerowych, tworzenia prymitywnych tabel lub wyróżniania poleceń programów; przykładem takiej czcionki jest Courier New [RS3] .

Możliwość zadeklarowania kilku krojów pisma pozwala Ci w miarę bezpiecznie korzystać z dokładnych nazw, takich jak Times New Roman. Zadeklaruj po prostu dwa kroje pisma: jeden opisany dokładną nazwą, drugi zaś należący do standardowej rodziny (na przykład serif); nazwy krojów pisma wprowadź jedna po drugiej, rozdzielając je przecinkiem. Jeśli czcionka, którą wybrałeś jako pierwszą, nie zostanie znaleziona na komputerze osoby oglądającej stronę, w zamian zostanie użyta podobna czcionka należąca do standardowej rodziny.

Wskazówka
Jeżeli nazwa kroju pisma zawiera znaki odstępu (spacje), zamknij ją pomiędzy dwoma znakami pojedynczego cudzysłowu ().

Wyboru kroju pisma dokonuje się za pomocą atrybutu stylu o nazwie font-family:

font-family: 'times new roman', serif;

Z kolei rozmiar czcionki możesz określić za pomocą atrybutu stylu font-size:

font-size: 11pt;

Rozmiar czcionki podaje się najczęściej w punktach (pt). Jeden punkt odpowiada 1/72 części cala, zaś jeden cal (1") to 25,4 mm. Ten sposób podawania rozmiaru czcionki umożliwia płynne skalowanie tekstu w zależności od możliwości komputera użytkownika.

Oto przykład zmiany kroju pisma i rozmiaru czcionki dokonanej na trzech poziomach (rysunek 3.20):

  • globalnie — w elemencie <body>,

  • dla akapitu — w elemencie <p>,

  • dla fragmentu tekstu — w elemencie <span>:

<body style="font-family: arial; font-size: 12pt;">

 <p>Ten tekst zostanie zapisany czcionką zadeklarowaną

 dla elementu &lt;body&gt;.</p>

 <p>Dzieje się tak, ponieważ element &lt;p&gt; dziedziczy

 swój wygląd po&nbsp;elemencie nadrzędnym.</p>

 <p style="font-family: 'trebuchet ms',fantasy;">Tutaj jednak

 zmieniamy&nbsp;już krój pisma, a&nbsp;tutaj

 <span style="font-size:14pt;">narzucamy</span>

 <span style="font-size:18pt;">większy</span>

 <span style="font-size:22pt;">rozmiar!</span></p>

</body>

Rysunek 3.20. Różne możliwości kształtowania wyglądu strony WWW za pomocą zmiany kroju pisma i rozmiaru czcionki


 [RS1][Skład]: pozostawić czcionkę „times-opodobną”

 [RS2][Skład]: pozostawić czcionkę „helvetica-podobną”

 [RS3][Skład]: pozostawić czcionkę „couriero-podobną”

Określanie marginesów akapitu tekstu

Standardowo przeglądarka WWW rozdziela poszczególne akapity tekstu od siebie, pozostawiając między nimi nawzajem oraz krawędzią okna odpowiednio dużo wolnej przestrzeni. Nic nie stoi jednak na przeszkodzie, byś dowolnie sterował marginesami każdego z akapitów tekstu.

Aby określić szerokość marginesu z jednej z czterech stron akapitu, dodaj do elementu <p> atrybut stylu margin-strona: margin-top (górny), margin-right (prawy), margin-bottom (dolny) lub margin-left (lewy). Oto przykład:

<p style="margin-top: 5pt; margin-bottom: 3pt;">...</p>

Szerokości marginesów możesz podawać w wielu jednostkach. Najczęściej używane jednostki to milimetry (mm), centymetry (cm), piksele (punkty ekranowe, px) i punkty drukarskie (pt). O ile możesz, unikaj jednak określania szerokości marginesów w pikselach, gdyż nie pozwala to na automatyczne skalowanie zawartości strony w zależności od możliwości komputera użytkownika oglądającego Twoją stronę.

Jeśli chcesz za jednym zamachem określić wszystkie cztery marginesy akapitu, możesz skorzystać z prostszej metody zapisu atrybutu stylu:

margin: gorny prawy dolny lewy;

Wymaganą kolejność łatwo jest zapamiętać: zaczynasz od góry (godzina 12 na zegarze) i przemieszczasz się zgodnie z ruchem wskazówek zegara. Powyższy zapis jest najoszczędniejszy i najdokładniejszy, gdyż jednym atrybutem stylu definiujesz od razu szerokość wszystkich czterech marginesów akapitu.

Oto parę przykładów zastosowania marginesów. Zauważ, że tło akapitu nie obejmuje obszaru marginesów (rysunek 3.21):

<p style="background-color: gray; color: white;">Standardowe marginesy</p>

<p style="background-color: gray; color: white; margin: 0 0 0 0;">

Brak marginesów</p>

<p style="background-color: gray; color: white; margin: 10pt 10pt 10pt 10pt;">

Równe marginesy</p>

<p style="background-color: gray; color: white; margin-right: 100pt;">

Duży prawy margines</p>

<p style="background-color: gray; color: white; margin: 0 0 20pt 100pt;">

Duży lewy i dolny margines</p>

Rysunek 3.21. Przykłady różnej szerokości marginesów akapitów tekstu

Tworzenie nagłówka

Wspominałem już, że dokument zapisany w języku XHTML oprócz treści i wyglądu musi mieć również zakodowaną w sobie strukturę dokumentu. Struktura to podział na rozdziały, podrozdziały, punkty oraz — znajdujący się na najniższym poziomie — zwykły tekst zapisany w akapitach reprezentowanych przez elementy <p> języka XHTML.

Nagłówki dokumentu dzielące tekst strony na logiczne fragmenty zapisuje się w kodzie XHTML z wykorzystaniem elementów <h1>, <h2>, <h3>, <h4> oraz <h5>. Standardowo przypisany nagłówkom wygląd pozwala im znacząco wyróżniać się w otoczeniu zwykłego tekstu. Nie próbuj jednak dopasować rzędu nagłówka do wyglądu tekstu: jeśli struktura dokumentu wymaga, aby w danym miejscu użyć nagłówka pierwszego rzędu (element <h1>), to go użyj — nawet jeśli wydaje się, że jest on o wiele za duży. Wygląd nagłówka możesz przecież zmienić — w sposób analogiczny do opisanego wcześniej sposobu zmiany rozmiaru czcionki — zaś naruszonej struktury logicznej dokumentu tak prosto nie naprawisz.

Oto przykład kodu XHTML wykorzystującego nagłówki (rysunek 3.22):

<h1>Tytuł tekstu</h1>

<h2>Rozdział&nbsp;1. O&nbsp;mątwach</h2>

<p>Mątwy to zwierzęta zdecydowanie morskie.</p>

<h2>Rozdział&nbsp;2. O salamandrach</h2>

<p>Salamandry można spotkać na&nbsp;suchym&nbsp;lądzie.</p>

Rysunek 3.22. Struktura dokumentu — podział na rozdziały i podrozdziały — narzucona na za pomocą elementów <h1> i <h2>

Wstawianie poziomej linii

Aby rozdzielić dwa akapity tekstu poziomą kreską, wstaw pomiędzy odpowiadające im elementy <p> element <hr> (w postaci pojedynczego znacznika-elementu: <hr />). Tak stworzona linia pełni swoją funkcję, jednak wygląda mało estetycznie. Aby poprawić jej wygląd, możesz:

  • usunąć pseudotrójwymiarowe obramowanie, podając atrybut stylu border: none;,

Wskazówka
Niestety, atrybut stylu border jest ignorowany przez przeglądarkę Internet Explorer 6.0.

  • określić wysokość i długość kreski, podając atrybuty stylu width i height,

  • zmienić kolor tła kreski, podając atrybut stylu background-color, analogicznie jak w przypadku strony, akapitu czy fragmentu tekstu.

Wskazówka
To, że zmieniamy nie kolor linii, a kolor tła linii może się wydawać w pierwszej chwili nielogiczne, powinieneś jednak szybko się do tego przyzwyczaić.

Szerokość linii zazwyczaj podaje się w sposób względny — jako procent jej maksymalnej szerokości (na przykład: width: 80%;). Wysokość można podać w punktach drukarskich pt — podobnie jak w przypadku czcionek. Kolor tła możesz podać w dowolny opisany wcześniej w tej części kursu sposób.

Oto przykład kilku różnych linii oddzielających fragmenty tekstu (rysunek 3.23):

<p>Prosta kreska:</p>

<hr />

<p>Ładniejsza kreska:</p>

<hr style="border: none; width: 80%; height: 2pt; background-color: blue;" />

<p>Jeszcze inna kreska:</p>

<hr style="border: none; width: 90%; height: 5pt; background-color: green;" />

Rysunek 3.23. Różne sposoby formatowania linii tworzonych za pomocą elementu jednoznacznikowego <hr>

Listy wypunktowane i numerowane

Lista wypunktowana

Wydawać by się mogło, że stworzenie elegancko wyglądającej, wypunktowanej listy zajmie bardzo dużo czasu. Rzeczywistość jest na szczęście zupełnie inna — korzystając z elementów <ul> oraz <li>, będziesz w stanie stworzyć listę wypunktowaną w ciągu paru minut.

Znaczniki <ul> i </ul> rozpoczynają i kończą obszar listy. Pomiędzy nimi znajdować się będą elementy <li> tworzące kolejne pozycje listy. Oto przykład (rysunek 3.24):

<p>Na wycieczkę należy zabrać:</p>

<ul>

 <li>namiot,</li>

 <li>zapalniczkę,</li>

 <li>gaśnicę,</li>

 <li>10&nbsp;kg prowiantu.</li>

</ul>

Rysunek 3.24. Prosta lista wypunktowana

Zagnieżdżanie listy

Nie musisz ograniczać się do prostych, jednopoziomowych list elementów. Język XHTML pozwala stworzyć znacznie bardziej skomplikowane listy, a przeglądarka wyróżni kolejne poziomy listy różnymi stylami wypunktowania. Wystarczy, by wewnątrz elementu <li> tworzącego pozycję listy nadrzędnej osadzić kolejny element <ul>, a w nim jego własne elementy <li> tworzące pozycje listy podrzędnej. Nie wolno jedynie zapomnieć zadbać o to, by kolejne elementy zaczynały się i kończyły we właściwej kolejności. Oto przykład (rysunek 3.25):

<p>Na wycieczkę należy zabrać:</p>

<ul>

 <li>namiot,</li>

 <li>10&nbsp;kg prowiantu:

  <ul>

   <li>5&nbsp;kg kiełbasy,</li>

   <li>1&nbsp;kg cukru,</li>

   <li>2&nbsp;kg kociej karmy,</li>

   <li>2&nbsp;litry wody mineralnej.</li>

  </ul>

 </li>

 <li>zapalniczkę,</li>

 <li>gaśnicę.</li>

</ul>

Rysunek 3.25. Listy można zagnieżdżać w sposób prawie automatyczny, tworząc dosyć skomplikowane struktury hierarchiczne

Lista numerowana

Nie zawsze proste wypunktowanie listy jest wystarczające. Jeśli niezbędna jest lista zawierająca kolejno ponumerowane elementy, nie musisz tracić czasu na ręczne numerowanie kolejnych linii tekstu — wystarczy skorzystać z elementu <ol> języka XHTML, zastępując nim element <ul>. Kolejne pozycje listy tworzyć będą — jak dotychczas — elementy <li>. Tak naprawdę zamiana listy wypunktowanej na numerowaną (i vice versa) wymaga jedynie zmiany dwóch liter.

Listy numerowane możesz zagnieżdżać w sposób analogiczny do przedstawionego przed chwilą. Zagnieżdżając listy, możesz nawet mieszać ich rodzaje — na przykład umieścić listę wypunktowaną poniżej jednego z elementów listy numerowanej. Oto właśnie przykład takiej listy numerowanej, w której osadzona została lista wypunktowana (rysunek 3.26):

<p>Na wycieczkę należy zabrać:</p>

<ol>

 <li>Namiot;</li>

 <li>10&nbsp;kg prowiantu:

  <ul>

   <li>5&nbsp;kg kiełbasy,</li>

   <li>1&nbsp;kg cukru,</li>

   <li>2&nbsp;kg kociej karmy,</li>

   <li>2&nbsp;litry wody mineralnej.</li>

  </ul>

 </li>

 <li>Zapalniczkę;</li>

 <li>Gaśnicę.</li>

</ol>

Rysunek 3.26. Listę numerowaną tworzy się równie prosto jak wypunktowaną; cała odpowiedzialność za numerowanie kolejnych elementów listy spada na przeglądarkę WWW

Wstawianie znaków specjalnych

Nie wszystkie potrzebne na stronie WWW znaki można wprowadzić wprost z klawiatury. Kłopot mogą sprawić znaki takie, jak © czy , a także często stosowane znaki pauzy i półpauzy. Na szczęście twórcy języka XHTML przewidzieli konieczność stosowania tego typu znaków i opracowali metodę wstawiania ich do kodu XHTML strony w sposób umożliwiający wyświetlenie ich na każdym komputerze.

Aby na stronie był widoczny znak specjalny, w kodzie XHTML musi się pojawić odpowiadająca mu encja, czyli prosty znacznik rozpoczynający się znakiem &, a kończący średnikiem (;). Oto najczęściej stosowane encje XHTML.

Encja

Znak

Opis

&nbsp;

 

Twarda spacja

&lt;

Znak mniejszości

&gt;

Znak większości

&quot;

"

Cudzysłów

&copy;

©

Znak copyright (prawa autorskie zastrzeżone)

&trade;

TM

Znak trademark (znak handlowy)

&ndash;

-

Półpauza (o szerokości litery n)

&mdash;

Pauza (o szerokości litery m)

&bdquo;

Znak otwierający cudzysłów

&rdquo;

Znak zamykający cudzysłów

W powyższej tabeli znajdują się również znaki większości i mniejszości. Są one co prawda bezpośrednio dostępne na każdej klawiaturze, jednak jeśli przeglądarka napotka je w kodzie XHTML, potraktuje je jako fragment kodu znacznika, a nie jako pojedyncze znaki. Za każdym razem, kiedy chcesz zamieścić na stronie znaki mniejszości lub większości, musisz zapisać je za pomocą encji.

Kompletna, prosta strona

Poniższy przykład stanowi podsumowanie wszystkich informacji przekazanych w tym rozdziale. Wykonując poniższe kroki, stworzysz niezwykle prostą i wyglądającą amatorsko, lecz poprawną i funkcjonalną stronę WWW (rysunek 3.27).

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

 <head>

  <title>Moja pierwsza strona WWW</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body style="background-color: #FFFFA0;">

  <h1 style="font-family: Arial, sans-serif; font-size: 16pt;">Strona domowa

  zespołu &bdquo;Kumple z&nbsp;podwórka&rdquo;<br />

  <hr style="background-color: olive; border: none; height: 3pt;" /></h1>

  <p>Zespół <b>Kumple z podwórka</b> powstał 2 lata temu na naszym podwórku.

  Zespół liczy trzech członków:</p>

  <ul>

   <li>wokalista <i>Maciej Wyjec</i></li>

   <li>gitarzysta <i>Antoni Pazur</i></li>

   <li>cymbalistka <i>Justyna Patyczek</i></li>

  </ul>

  <p>Nietuzinkowy zestaw instrumentów zapewnia nowatorskie, niepowtarzalne

  brzmienie granej przez nas muzyce metalowej.</p>

 </body>

</html>

Rysunek 3.27. Kompletna strona WWW, zbudowana z wykorzystaniem wiadomości przedstawionych w tym rozdziale

Podsumowanie

  • Pamiętaj o umieszczaniu w każdym dokumencie deklaracji typu dokumentu (znaczniki <?xml?> oraz <!DOCTYPE>) oraz elementu <meta> informującego o sposobie kodowania polskich znaków diakrytycznych.

  • Nie zapominaj o zamykaniu wszystkich znaczników w kolejności odwrotnej do kolejności ich otwierania.

  • Elementy formatowania logicznego <strong> i <em> stosuj, gdy podkreślenie dotyczy treści, a elementy formatowania fizycznego (<b> i <i>) w przypadkach, gdy chodzi jedynie o wizualne podkreślenie paru liter lub wyrazów.

  • Korzystając z nagłówków (elementy od <h1> do <h5>), miej na uwadze strukturę logiczną dokumentu, a nie jego wygląd.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15502191