R03.pdf

(607 KB) Pobierz

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:

<h1> To jest nagłówek pierwszego poziomu </h1>

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

<h3>

</h3>

. 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

<h4>

<h5>

<h6>

także są rzadko wykorzystywane, ponieważ ich rozmiar jest bliski rozmiarowi

tekstu, a w przypadku nagłówka

<h6>

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

</body>

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

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

</body>

</html>

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

<center><h2>Twój nagłówek</h2></center>

lub dodając w znaczniku nagłówka atrybut

align=”center”

<h2 align=”center”>Twój nagłówek</h2>

Jak dodać tekst?

Strona ma już tytuł i nagłówek, wprowadźmy 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

<p>

</p>

, 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

<html>

<head>

<title>Zwierzaki</title>

</head>

<body>

<p>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ć.</p>

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

</body>

</html>

Rys. 3.3.

Strona

została

zaopatrzona

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:

<p></p>

, 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

<br>

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

<html>

<head>

<title>Zwierzaki</title>

Plik z chomika:

Lauviah666

Inne pliki z tego folderu:

HTML.pdf (4235 KB)
R04.pdf (1038 KB)
DB.pdf (100 KB)
DA.pdf (264 KB)
DC.pdf (58 KB)

R03.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: