M Sokół ABC języka HTML Rozdział III Znaczniki HTML formatujące tekst


Rozdział 3.
Znaczniki HTML formatujące
tekst i nadające strukturę
dokumentowi HTML
Nagłówki i akapity tekstu
Co to są nagłówki i jak wyglądają ich znaczniki HTML?
Nagłówki, tak jak w dokumencie edytora Word, dzielą tekst na części, a dzięki temu, \e nadają
tekstowi rzucający się w oczy wygląd, zwracają na ten podział uwagę czytelnika. Wszyscy
u\ytkownicy edytora Word wiedzą, o co chodzi  musimy jedynie nauczyć się korzystać z innego
narzędzia. Aby przekształcić fragment tekstu w nagłówek, wystarczy zawrzeć go między
znacznikami nagłówka, tak jak w tym przykładzie:

To jest nagłówek pierwszego poziomu


Znaczniki nagłówka powiększają tekst i dodają do niego pogrubienie. Masz do dyspozycji sześć
rozmiarów nagłówka  pokazane są one na rysunku 3.1. Polecałabym korzystanie nagłówków
drugiego poziomu,

. Jeśli chcesz, aby nagłówek był nieco mniejszy, u\yj pary


. Nagłówki naprawdę ogromne uzyskasz stosując

, ale większość projektantów
stron ich unika ze względu na dysproporcję wielkości w stosunku do zwykłego tekstu. Nagłówki

,

i
tak\e są rzadko wykorzystywane, poniewa\ ich rozmiar jest bliski rozmiarowi
tekstu, a w przypadku nagłówka
nawet mniejszy (patrz rysunek 3.1).
Rys. 3.1.
Sześć poziomów nagłówka i
zwykły tekst
Jak zdefiniować nagłówki w kodzie HTML?
W rozdziale 2 nauczyłeś się definiować podstawowy szkielet strony WWW. Skorzystamy teraz z
niego i będziemy go rozbudowywać o nowe elementy. Wczytaj do edytora tekstu (Notatnika lub
Webbera) plik HTML zawierający ten podstawowy kod. Zmień dowolnie tytuł strony (jak
pamiętasz, tytuł zawarty jest między znacznikami ).
Aby zdefiniować nagłówek, wstaw między znacznikami parę znaczników
nagłówka, na przykład

, a między nimi wpisz tekst nagłówka (patrz wydruk 3.1).
Zapisz plik i wyświetl stronę w przeglądarce. Poniewa\ rozbudowywana teraz strona będzie ju\
zapisywana pod tą samą nazwą (zapisując szkielet strony WWW zdefiniowaliśmy nazwę
mojastrona.html  patrz rozdział 2), mo\esz nacisnąć w oknie przeglądarki przycisk Odświe\ lub
Reload, aby ukazała się uaktualniona wersja strony (patrz rysunek 3.2).
Wydruk 3.1. Definiujemy nagłówek


Zwierzaki



Koty du\e


Koty małe




Rys. 3.2.
W oknie
przeglądarki
pojawiły się
zdefiniowane
przed chwilą
nagłówki
Jak wycentrować nagłówek?
Nagłówek jest wyrównany do lewego marginesu  oznacza to, \e jest dosunięty do lewej krawędzi
strony. Wynika to z domyślnych ustawień przeglądarki. Mo\esz go umieścić na środku strony 
nazywa się to wyśrodkowaniem, zagnie\d\ając znaczniki nagłówka w obrębie znacznika
:

Twój nagłówek


lub dodając w znaczniku nagłówka atrybut align= center :

Twój nagłówek


Jak dodać tekst?
Strona ma ju\ tytuł i nagłówek, wprowadzmy więc jej zawartość tekstową. W wersji HTML 4
akapit jest definiowany za pomocą pary znaczników

. Jak ju\ wspominałam, brak
znacznika zamykającego nie spowoduje katastrofy, ale tutaj będziemy go stosować (tym bardziej,
\e w specyfikacji XHTML wymagania są znacznie ostrzejsze).
Otwórz plik strony w oknie edytora. Przygotuj treść strony i wpisz tekst między znacznikami


, w obrębie elementu body. Wydruk 3.2 pomo\e Ci zorientować się o co chodzi. Zapisz
stronę i zobacz jak się prezentuje w przeglądarce (patrz rysunek 3.3).
Wydruk 3.2. Akapity tekstu


Zwierzaki



Koty du\e



Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.
Nale\ą do gromady ssaków, rzędu drapie\nych, rodziny kotowatych
(Felidae). Do tej rodziny nale\ą te\ małe koty: puma, ryś, ocelot,
serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce
są większe od samic. Wszystkie mruczą, gdy sa zadowolone. Rozzłoszczone -
powarkują, prychają. Tylko wielkie koty potrafią ryczeć.


Koty małe



Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota
nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego
(Felis silvestris ornata). Do dziś nie wiadomo dokładnie kiedy i jak kot
stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około
5000 lat temu. Miało to miejsce w dolinie Nilu.




Rys. 3.3.
Strona
została
zaopatrzona
w
wycentrowa
ne nagłówki
oraz w tekst
Jak zwiększyć odstęp między akapitami lub wprowadzić odstęp w samym
akapicie?
Pamiętaj, \e efekt wizualny jaki wywrze Twoja strona, zale\y w du\ym stopniu od ustawień na
komputerach czytelników. Niektórzy mają du\e monitory, inni małe, parametry kart grafiki ró\nią
się, ró\ne są w związku z tym ustawienia. Tekst będzie te\ przeformatowywany przy ka\dej
zmianie rozmiarów okna przeglądarki. Twórcy strony WWW zale\y na tym, aby tak sformatować
zawartość strony, \eby zniosła bezpiecznie te pułapki. Nigdy jednak nie próbuj formatować tekstu
w edytorze dodając puste wiersze lub spacje (od tej zasady jest pewien wyjątek  omawiam go w
następnym punkcie). To nie ma sensu. Dodatkowe spacje zostaną i tak potraktowane jako jeden
odstęp. Nie wstawiaj te\ pustych akapitów, a więc par:

, które nie zawierają \adnego
tekstu.
W takim razie jak sobie poradzić, gdy wprowadzany automatycznie przed i za nagłówkami oraz
akapitami wolny obszar nie wystarcza? Zastosuj znacznik
. Ten znacznik, o czym powinieneś
pamiętać, nie ma znacznika zamykającego. Znacznik pozbawiony znacznika zamykającego nosi
miano pustego.
Wydruk 3.3 pokazuje, w jaki sposób mo\na dodać wolny obszar w samym akapicie. Efekt tej
operacji przedstawiono na rysunku 3.4.
Wydruk 3.3. Dodatkowy wolny obszar  znacznik



Zwierzaki



Koty du\e



Lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi
kotami.

Nale\ą do gromady ssaków, rzędu drapie\nych, rodziny
kotowatych (Felidae). Do tej rodziny nale\ą te\ małe koty: puma, ryś,
ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt.
Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone.
Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią
ryczeć.


Koty małe



Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota
nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego
(Felis silvestris ornata).

Do dziś nie wiadomo dokładnie kiedy i
jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się
okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.




Rys. 3.4.
Do akapitu
wprowadzon
o dodatkowe
wolne
obszary
Jak zachować odstępy i łamania wierszy w tekście?
A jeśli mimo wszystko chcesz zachować wprowadzone do tekstu liczne spacje i łamania wierszy?
Czy jest taka mo\liwość? Tak. Daje ją znacznik 
. Jest to doskonałe narzędzie do prezentacji 
dokumentów, które z natury swojej mają określoną strukturę, jak na przykład programy 
komputerowe. 
Wydruk 3.5 pokazuje sposób u\ycia elementu pre   zwróć uwagę, \e umieszczone w kodzie 
odstępy są zachowane na wyświetlanej w przeglądarce stronie (patrz rysunek 3.5). 
 Wydruk 3.4. Tekst preformatowany 
 
 
 
To jest tekst 
preformatowany. 
Zachowuje on zarówno odstępy 
jak i łamania wierszy. 
 

Znacznik pre jest doskonały do 
prezentacji kodu programu:
 
 
for i = 1 to 10 
 print i 
next i 
 
 
 
Rys. 3.5. 
Element pre 
pozwala na 
zachowanie 
dodatkowych 
odstępów   
porównaj wygląd 
wydruku i strony 
Jak sformatować tekst? 
Jeśli przyglądniesz się stronie z rysunku 3.4, zauwa\ysz, \e a\ się prosi wyró\nić pewne 
fragmenty tekstu   na przykład nazwy łacińskie napisać kursywą, a nazwy polskie czcionką 
pogrubioną. Innymi słowy konieczne jest zastosowanie formatowania. 
Formatowanie pozwala między innymi wprowadzić tekst pisany czcionką pogrubioną, kursywą 
oraz indeksy górne. W specyfikacji HTML 4 zalecane jest co prawda korzystanie przy 
formatowaniu z arkuszy stylu (poznasz je w rozdziale 4., Kaskadowe arkusze stylów), lecz w 
przypadku prostego formatowania mo\na korzystać tak\e ze znaczników stylów z wcześniejszych 
wersji języka HTML. Tabela 3.1 prezentuje listę takich znaczników wraz z opisem i przykładami. 
Tabela 3.1. Style fizyczne i logiczne znaków 
Znacznik Opis Przykład zastosowania 
Style fizyczne 
 
Ten tekst jest pisany czcionką 
Pogrubienie 
pogrubioną
 
 
Ten tekst jest pisany kursywą
 
Kursywa 
 
Wpisz copy nazwa_pliku lpt:, aby 
Czcionka maszynowa 
wydrukować plik
 
(znaki o jednakowej 
szerokości) 
 
Moje oczy zrobiły się 
Czcionka większa od 
WIELKIE
 
reszty tekstu 
 
Krasnoludki są tak 
Czcionka mniejsza od 
malutkie, \e ich nie widać
 
reszty tekstu 
 H2O 
Indeks dolny 
 31P 
Indeks górny 
Style logiczne 
 
Lubię Cię bardzo.
 
Emfaza, wyró\nienie 
tekstu (zazwyczaj 
kursywa) 
 
Lubię Cię ogromnie.
 
Wyrazne wyró\nienie 
(zazwyczaj 
pogrubienie) 
 
For a=1 to 100 
 
Wskazuje, \e fragment 
tekstu to kod 
programu, który ma 
być wyświetlony 
czcionką o stałej 
szerokości 
 
Adres URL: 
Wskazuje, \e jest to 
http://www.microsoft.com.pl
 
tekst przykładowy 
(podobnie jak 
) 
 
Podaj komendę: find . -name  prune  -
Oznacza tekst, który 
print
 
ma być wpisany z 
klawiatury 
 chown twoje_imie 
Wskazuje nazwę 
nazwa_pliku
 
zmiennej 
 
Podane w tabeli znaczniki definiują 
Znacznik definicji 
style znaków.
 
 
Kto to powiedział, \e milczenie jest 
Stosowany w 
złotem?
 
przypadku krótkich 
cytatów lub 
odnośników 
literaturowych 
Na wydruku 3.5 mo\esz zobaczyć przykłady z tabeli bezpośrednio w kodzie HTML, a na rysunku 
3.6 efekt działania poszczególnych sposobów formatowania. 
Wydruk 3.5. Formatowanie tekstu 
 
 
test 
 
 
 
Style fizyczne
 
Czcionka pogrubiona: 
Ten tekst jest pisany czcionką 
pogrubioną
 
Kursywa:
Ten tekst jest pisany kursywą
 
Czcionka maszynowa:
Wpisz copy nazwa_pliku lpt:, aby 
wydrukować plik
 
Czcionka powiększona:
Moje oczy zrobiły się wielkie
 
Czcionka pomniejszona:
Krasnoludki są tak malutkie, 
\e ich nie widać
 
Indeks dolny:
H2O
 
Indeks górny:
31P
 
Style logiczne
 
Emfaza:
Lubię Cię bardzo.
 
Wyrazne wyró\nienie:
Lubię Cię ogromnie.
 
Kod programu:
For a=1 to 100 
 
Tekst przykładowy:
Adres URL: 
http://www.microsoft.com.pl
 
Tekst z klawiatury:
Podaj komendę: find . -name  prune  -
print
 
Zmienna:
chown twoje_imie nazwa_pliku
 
Definicja:
Podane w tabeli znaczniki definiują style 
znaków.
 
Cytat:
Kto to powiedział, \e milczenie jest 
złotem?
 
 
 
Rys. 3.6. 
Oto efekt 
działania 
znaczników 
formatowani
a z tabeli 3.1 
Otwórzmy więc ponownie nasz przykładowy plik HTML w edytorze i korzystając z pomocy 
wyra\eń HTM z tabeli 3.1 sformatujmy odpowiednie fragmenty tekstu (patrz wydruk 3.6). Po 
wpisaniu dodatkowych elementów kodu, plik trzeba zapisać, aby mo\na zobaczyć zmiany w 
przeglądarce (wyświetlimy aktualną postać strony klikając przycisk Odświe\ lub Reload). 
Jak widać na rysunku 3.7 tekst strony jest teraz łatwiejszy w odbiorze. Pamiętaj jednak, aby nie 
przesadzić z formatowaniem, bowiem efekt mo\e być wówczas odwrotny od zamierzonego. 
Wydruk 3.6. Formatowanie tekstu 
 
 
Zwierzaki 
 
 
 
Koty du\e
  
 
Lwa, tygrysa, panterę, geparda i 
jaguara nazywamy wielkimi kotami.

 Nale\ą do 
gromady ssaków, rzędu drapie\nych, rodziny kotowatych (Felidae). 
Do tej rodziny nale\ą te\ małe koty: puma, ryś, 
ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 
gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są 
zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty 
potrafią ryczeć.
 
Koty małe
  
 
Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od 
kota nubijskiego (Felis silvestris lybica) i od 
azjatyckiego kota stepowego (Felis silvestris ornata). 


Do dziś nie wiadomo dokładnie kiedy i jak kot stał się 
zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat 
temu. Miało to miejsce w dolinie Nilu.
 
 
 
Rys. 3.7. 
Do tekstu 
zastosowano 
formatowani 
Czy mo\na stosować do tego samego tekstu kilka znaczników formatujących? 
Do tego samego fragmentu tekstu mo\na zastosować jednocześnie ró\ne style: na przykład 
pogrubienie i kursywę: 
Pogrubienie i kursywa 
co daje w efekcie tekst pogrubiony pisany kursywą. 
Stosując znaczniki wielokrotne pamiętać jednak nale\y o znacznikach zamykających   musi ich 
być tyle samo ile otwierających, oraz o kolejności znaczników   kolejność znaczników 
zamykających musi być odwrotna ni\ znaczników otwierających. Tę zasadę pokazuje rysunek 3.8. 
Rys. 3.8. 
Zasady 
stosowania 
kilku 
znaczników 
do tego 
samego 
tekstu 
Jak dodać linię poziomą? 
Linią poziomą mo\na oddzielać od siebie wizualnie fragmenty strony WWW   w naszym 
przykładzie linia pozioma mo\e oddzielić fragmenty tekstu poświęcone innym zwierzakom. 
Aby umieścić na stronie linię poziomą, otwórz plik w oknie edytora i wpisz pod definicją 
pierwszego akapitu znacznik 
 (patrz wydruk 3.7   element hr wyró\niony został czcionką 
pogrubioną). Zapisz plik i przetestuj go w przeglądarce (patrz rysunek 3.9). 
Wydruk 3.7. Wstawiamy linię poziomą 
 
 
Zwierzaki 
 
 
 
Koty du\e
  
 
Lwa, tygrysa, panterę, geparda i 
jaguara nazywamy wielkimi kotami.

 Nale\ą do 
gromady ssaków, rzędu drapie\nych, rodziny kotowatych (Felidae). 
Do tej rodziny nale\ą te\ małe koty: puma, ryś, 
ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 
gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są 
zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty 
potrafią ryczeć.
 
 
 
Koty małe
  
 
Kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od 
kota nubijskiego (Felis silvestris lybica) i od 
azjatyckiego kota stepowego (Felis silvestris ornata). 


Do dziś nie wiadomo dokładnie kiedy i jak kot stał się 
zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat 
temu. Miało to miejsce w dolinie Nilu.
 
 
 
Rys. 3.9. 
Akapity 
odnoszące się 
do ró\nych 
tematów 
zostały 
rozdzielone 
linią poziomą 
Czy mo\na modyfikować wygląd linii poziomej? 
Znacznik 
 ma swoje atrybuty, które umo\liwiają definiowanie grubości, długości i 
wyrównania linii. Tabela 3.2 prezentuje te atrybuty wraz z przykładem ich u\ycia. Atrybuty te są 
nadal uznawane w wersji HTML 4, lecz zaleca się stosowanie arkuszy stylów. 
Tabela 3.2. Atrybuty znacznika 
 
Atrybut Opis 
size= piksele  
Grubość linii w pikselach; wartość domyślna (i najmniejsza) to 
2 
width= piksele|wartość%  
Długość linii w poziomie; wartości mogą być podawane w 
pikselach lub jako procent szerokości okna 
align= left|right|center  
Wyrównanie linii. 
Przykład: 
 
Trzy rodzaje list 
W języku HTML mo\liwe jest zdefiniowanie trzech rodzajów list: wypunktowanej, 
numerowanej i definicji. W pierwszym wypadku pozycje listy oznaczone są znakiem 
wypunktowania   na przykład kropkami, w drugim są numerowane, a w trzecim listę tworzą 
terminy i ich definicje. 
Jak zdefiniować listę wypunktowaną? 
Listę wypunktowaną definiuje para znaczników 
     
. Między nimi wstawiane są 
pozycje listy   do tego celu słu\y para znaczników 
  •  
    • . Pozycji listy mo\e być wiele. O 
    ile w przypadku elementu ul znacznik zamykający jest konieczny, to w przypadku pozycji listy, 
    czyli elementu li, takiego wymogu nie ma. 
    Wydruk 3.8 prezentuje podstawową postać listy wypunktowanej: 
    Wydruk 3.8. Lista wypunktowana 
     
     
    Lista wypunktowana 
     
     
     
    Lista wypunktowana:
     
       
       
    • pierwsza pozycja listy
      •  
       
    • druga pozycja listy
      •  
       
    • trzecia pozycja listy
      •  
     
     
     
    Czy mo\na modyfikować znak wypunktowania listy? 
    Kropka to domyślny znak wypunktowania. Jeśli chcesz u\yć innego znaku, musisz zdefiniować go 
    korzystając z atrybutu type znacznika 
      . Oto wartości atrybutu type dla listy 
      wypunktowanej: 
       "disc"   znak domyślny   czarna kropka 
       "circle"   kółko (puste w środku) 
       "square"   kwadrat 
      Na wydruku 3.9 pokazano ró\ne przykłady definicji list wypunktowanych, a rysunek 3.10 
      prezentuje wygląd list w oknie przeglądarki. 
      Wydruk 3.9. Lista wypunktowana   znaki wypunktowania 
       
       
      Lista wypunktowana 
       
       
       
      Kropki jako znaki wypunktowania:
       
         
         
      • Brzoza
        •  
         
      • Topola
        •  
         
      • Lipa
        •  
         
      • Dąb
        •  
       
      Kółka jako znaki wypunktowania:
       
         
         
      • Brzoza
        •  
         
      • Topola
        •  
         
      • Lipa
        •  
         
      • Dąb
        •  
       
      Kwadraty jako znaki wypunktowania:
       
         
         
      • Brzoza
        •  
         
      • Topola
        •  
         
      • Lipa
        •  
         
      • Dąb
        •  
       
       
       
      Rys. 3.10. 
      Ró\ne 
      przykłady list 
      wypunktowan
      ych   atrybut 
      type znacznika 
         
        umo\liwia 
        zdefiniowanie 
        znaku 
        wypunktowani
        a 
        Jak zdefiniować listę numerowaną? 
        Drugim typem listy jest lista numerowana. Definiuje ją para znaczników 
           
        . Znacznik 
        zamykający  jest absolutnie konieczny. Pozycje listy są oznaczane w taki sam sposób, jak 
        w przypadku listy wypunktowanej i podobnie jak tam znacznik zamykający  jest 
        opcjonalny. 
        Wydruk 3.10 prezentuje podstawową postać listy numerowanej: 
        Wydruk 3.10. Lista numerowana 
         
         
        Lista numerowana 
         
         
         
        Lista numerowana:
         
           
           
        1. pierwsza pozycja listy
          2.  
           
        2. druga pozycja listy
          3.  
           
        3. trzecia pozycja listy
          4.  
          
         
         
         
        Czy mo\na modyfikować znak numerowania listy? 
        Sposób numeracji listy numerowanej mo\na zmieniać, korzystając z tego samego atrybutu type, 
        co w przypadku listy wypunktowanej. Inne są oczywiście jego wartości. Atrybut type 
        umieszczany jest w znaczniku otwierającym 
          . W przypadku list numerowanych, wartości 
          atrybutu type są następujące: 
           "l"   numeracja standardowa (1, 2, 3...) 
           "a"   małe litery alfabetu (a, b, c...) 
           "A"   wielkie litery alfabetu (A, B, C...) 
           "i"   kolejne liczby rzymskie pisane małymi literami (i, ii, iii...) 
           "I"   kolejne liczby rzymskie (I, II, III...) 
          Na wydruku 3.11 pokazano ró\ne przykłady definicji list numerowanych, a rysunek 3.11 
          prezentuje wygląd list w oknie przeglądarki. 
          Wydruk 3.11. Lista numerowana   typy numeracji 
           
           
          Lista numerowana 
           
           
           
          Lista numerowana:
           
             
          1. Lipa
            2.  
          2. Dąb
            3.  
          3. Klon
            4.  
          4. Kasztan
            5.  
           
          Lista alfabetyczna   wielkie litery:
           
             
          1. Lipa
            2.  
            
          2. Dąb
            3.  
          3. Klon
            4.  
          4. Kasztan
            5.  
           
          Lista alfabetyczna   małe litery:
           
             
          1. Lipa
            2.  
          2. Dąb
            3.  
          3. Klon
            4.  
          4. Kasztan
            5.  
           
          Numeracja rzymska:
           
             
          1. Lipa
            2.  
          2. Dąb
            3.  
          3. Klon
            4.  
          4. Kasztan
            5.  
           
          Liczby rzymskie pisane małymi literami:
           
             
          1. Lipa
            2.  
          2. Dąb
            3.  
          3. Klon
            4.  
          4. Kasztan
            5.  
           
           
           
          Rys. 3.11. 
          Ró\ne przykłady list 
          numerowanych   
          atrybut type znacznika 
             umo\liwia 
            zdefiniowanie znaku 
            numeracji 
            Jak utworzyć listę definicji? 
            Trzecim i ostatnim typem listy jest lista definicji. Umo\liwia ona prezentacje terminów wraz z 
            definicjami. Listę definicji otwiera znacznik 
            , a zamyka znacznik 
            . Terminy wstawiane 
            są za pomocą pary 
             
            , a ich definicje przy u\yciu pary 
             
            . Znaczniki  
            i  są opcjonalne. Wydruk 3.12 pokazuje podstawowy przykład takiej listy, a jej wygląd 
            mo\esz zobaczyć na rysunku 3.12. 
            Wydruk 3.12. Lista definicji 
             
             
            Lista definicji 
             
             
             
            Lista definicji:
             
             
            Pieniądze
             
            Środek płatniczy.
             
            Woda
             
            Substancja chemiczna, zło\ona z dwóch atomów wodoru i jednego atomu 
            tlenu.
             
             
             
             
            Rys. 3.12. 
            Lista definicji 
            Czy listy ró\nego typu mo\na ze sobą łączyć? 
            Tak, listy ró\nego typu mo\na łączyć   jest to tak zwane zagnie\d\anie list. Jest ono przydatne, 
            gdy trzeba na przykład zdefiniować podpunkty określonego punktu listy. Wówczas wystarczy 
            wstawić listę jako element innej listy. Brzmi mo\e trochę tajemniczo, ale przykład wyjaśni Ci o co 
            chodzi. 
            Skorzystajmy z wydruku 3.10 listy numerowanej i dodajmy do jej kolejnych numerowanych 
            pozycji podpunkty oznaczone znakiem wypunktowania. Efekty tej operacji prezentuje wydruk 
            3.13. Wpisz kod html w edytorze, zapisz swój plik i przetestuj w przeglądarce (patrz rysunek 
            3.13). 
            Wydruk 3.13. Zagnie\d\anie list 
             
             
            Lista numerowana z podpunktami 
             
             
             
            Lista numerowana z podpunktami:
             
            > 
               
               
            1. Pierwsza pozycja listy
              2.  
               
                 
                 
              • punkt pierwszy
                •  
                 
              • punkt drugi
                •  
                 
               
               
            2. Druga pozycja listy
              3.  
               
                 
                 
              • punkt pierwszy
                •  
                 
              • punkt drugi
                •  
                 
               
               
            3. Trzecia pozycja listy
              4.  
               
                 
                 
              • punkt pierwszy
                •  
                 
              • punkt drugi
                •  
                 
               
             
             
             
            Rys. 3.13. 
            Lista 
            numerowana, 
            której ka\da 
            pozycja ma 
            podpunkty 
            Czy w obrębie listy mo\na korzystać z innych znaczników? 
            Jeśli pozycję listy stanowi długi tekst, mo\na skorzystać na przykład ze znaczników akapitu, 
             
            lub nagłówków, , aby nadać mu znośniejszą dla oka postać. Mo\na tak\e wprowadzić do 
            listy trochę wolnej przestrzeni   tu przyda się znacznik 
            , lub wydzielić punkty podstawowe 
            podkreślając je. 
            Spróbujmy tak właśnie potraktować naszą listę numerowaną z podpunktami (patrz wydruk 3.13, 
            rysunek 3.13). W obecnej postaci sprawia ona wra\enie przeładowanej i jest mało czytelna. 
            Wprowadzmy więc wolny obszar, a liniami poziomymi podkreślmy główne punkty. 
            Otwórz więc plik z wydruku 3.13 i wstaw za ka\dą z pozycji listy numerowanej znacznik 
            . 
            Aby podkreślony został sam tekst, mo\na w znaczniku 
             dodać atrybut width= wartość  
            określający długość linii poziomej (patrz tabela 3.2) oraz atrybut align= left , który 
            spowoduje dosunięcie linii do lewego marginesu. 
            Za podpunktami warto wprowadzić trochę wolnego miejsca   wówczas łatwiej będzie czytać listę. 
            Tak więc wstaw za wyra\eniem 
          1. punkt drugi
            2.  dwa znaczniki 
            . 
            Wydruk 3.14 prezentuje cały kod, a efekty wprowadzonych zmian mo\esz zobaczyć na rysunku 
            3.14. 
            Wydruk 3.14. Poprawianie czytelności listy za pomocą linii poziomych i wolnej przestrzeni 
             
             
            Lista numerowana z podpunktami 
             
             
             
            Lista numerowana z podpunktami:
             
               
               
            1. Pierwsza pozycja listy
              2.  
               
                 
                 
              • punkt pierwszy
                •  
                 
              • punkt drugi


                •  
                 
               
               
            2. Druga pozycja listy
              3.  
               
                 
                 
              • punkt pierwszy
                •  
                 
              • punkt drugi


                •  
                 
               
               
            3. Trzecia pozycja listy
              4.  
               
                 
                 
              • punkt pierwszy
                •  
                 
              • punkt drugi
                •  
                 
               
             
             
             
            Rys. 3.14. 
            Lista 
            numerowana 
            z 
            podpunktami 
              
            wprowadzono 
            trochę wolnej 
            przestrzeni i 
            podkreślono 
            główne 
            punkty 
            Najwa\niejsze informacje 
             Atrybuty opisują właściwości elementów strony WWW. Definiuje się je za pomocą par: 
            atrybut= wartość  i umieszcza zawsze w znaczniku otwierającym danego elementu 
            HTML. Wartości nale\y podawać w cudzysłowie   pojedynczym,    lub podwójnym,   . 
             Aby przekształcić tekst w nagłówek, nale\y zawrzeć go między znacznikami nagłówka, 
             , umieszczonymi w sekcji body dokumentu. 
             W języku HTML istnieje sześć poziomów nagłówka: h1, h2, h3, h4, h5 i h6. Poziom 
            wa\ności nagłówka maleje wraz ze wzrostem jego numeru. 
             Nagłówek mo\e być dowolnie długi. 
             Aby wyśrodkować nagłówek, znaczniki nagłówka mo\na zagniezdzić w obrębie 
            znacznika 
            : 
            Nagłówek
            , lub dodać w 
            znaczniku nagłówka atrybut align= center . W ten sam sposób mo\na 
            wypośrodkowywać obrazy lub tekst. 
             Akapit tekstu definiowany jest przez parę znaczników 
             
             umieszczaną w obrębie 
            znaczników  . 
             Aby zwiększyć odstęp między akapitami lub wprowadzić odstęp w samym akapicie 
            mo\na skorzystać ze znacznika 
            . 
             Aby zachować istniejący układ tekstu, w którym u\yto dodatkowych odstępów i łamań 
            wierszy, mo\na skorzystać z elementu pre: 
            Tekst Preformatowany
            . 
             Aby zastosować do tekstu formatowanie takie jak pogrubienie, kursywa, indeks dolny lub 
            górny, czy któryś ze stylów logicznych, nale\y formatowany tekst umieścić między parą 
            znaczników formatujących. Lista znaczników znajduje się w tabeli 3.1 oraz w tabeli A1 z 
            dodatku A. 
             Do tego samego fragmentu tekstu mo\na zastosować jednocześnie ró\ne style, pamiętając 
            jednak o znacznikach zamykających i poprawnej kolejności znaczników. 
             Znacznik definiujący linię poziomą to 
            . Nie ma on znacznika zamykającego. 
             Listy numerowane   to listy, których elementy są numerowane. Takie listy są objęte 
            znacznikami 
               
            , a ka\dy element listy rozpoczyna się od znacznika 
          2. . 
             Listy wypunktowane   w tych listach elementy są oznaczane znakiem wypunktowania i 
            podobnie jak poprzednio poprzedza je znacznik 
          3. . Lista wypunktowana zawiera się 
            między znacznikami 
               
            . 
             Listy definicji   to listy, w których są dwie składowe: pojęcie i definicja. Znacznik 
             
            definiuje pojęcie, a znacznik 
             definicję. Np.: 
            Kot
            Zwierzę 
            futerkowe
            . Elementy umieszczane są w obrębie pary znaczników 
             
            . 
             Listy wypunktowane i numerowane mo\na modyfikować. Atrybut type pozwala na 
            zmianę domyślnego znaku wypunktowania, a w przypadku list numerowanych, znaku 
            numerowania. 

            
   
      
            Wyszukiwarka
            

     
            

                                

                                

                               
            


     
            Podobne podstrony:
            M  Sokół    ABC języka HTML   Wstęp
            M  Sokół   ABC języka HTML
            ABC jezyka HTML
            ABC jezyka html i xhtml
            Meredith Pierce   historia napisana przeze mnie   Rozdział III
            04  Rozdział III  Od wojennego chaosu do papieża matematyka
            Rozdział III
            4 Rozdział III
            05  Rozdział III Mnisi, czyli żywa świątynia Ducha Świętego
            06 Rozdział III
            ROZDZIAŁ III  Stabilizacja punktów i zabezpieczenie zespołu
            rozdział III
            Stefen s Diaries   Rozdział III

            więcej podobnych podstron