Kurs HTML - HTML

Strona 1

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Tekst

W tym rozdziale dowiesz się...

Jakie są podstawowe modele wyświetlania znaczników HTML?
W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst?
Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po
wskazaniu tekstu myszką
Jak zgrupować elementy w blok i ustawić po lewej, po prawej lub wyśrodkować (wycentrować)?
W jaki sposób ustawić tekst i inne elementy na środku ekranu (wyśrodkowanie, centrowanie)?
W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?
Jak nie dopuścić do zawinięcia tekstu na ekranie przeglądarki, czyli sprawić aby cały tekst znajdował się w
jednej linijce?
W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?
W jaki sposób pochylić tekst na stronie WWW (kursywa)?
W jaki sposób podkreślić tekst na stronie WWW?
W jaki sposób przekreślić tekst na stronie WWW?
Jak wstawić migający tekst (migotanie)?
Jak wyróŜnić tekst na ekranie (emfaza)?
Jak wstawić indeks górny i dolny przy tekście?
Jak kontrolować wygląd czcionki (tekstu): wielkość (rozmiar) czcionki, kolor tekstu, rodzaj czcionki (krój
czcionki)? W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem
czcionki?
Jak ustalić czcionkę na całego tekstu na stronie WWW?
Jak pomniejszyć lub powiększyć tekst?
Jak wprowadzić tekst preformatowany, czyli taki, który wygląda identycznie jak w edytorze tekstowym?
Jak oznaczyć kod komputerowy?
Jak oznaczyć tekst, który uŜytkownik powinien wprowadzić z klawiatury?
Jak wprowadzić efekt dalekopisu?
Jak oznaczyć tekst, będący przykładem działania programu lub skryptu?
Jak oznaczyć zmienną lub argument programu?
Jak powinno się wprowadzać cytaty i odniesienia do źródła?
Jak wprowadzić dłuŜszy cytat?
Jak umieścić na stronie WWW adres?
Jak poinformować uŜytkownika o wprowadzonych zmianach na stronie WWW: elementy wstawione i
usunięte?
Jak powinno się oznaczać skróty i akronimy?
Jak oznaczyć definicję terminu?
Jak wprowadzić na stronę WWW słownik (listę definicyjną)?
Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista
uporządkowana)?
W jaki sposób zrobić listę punków i podpunktów (wykaz)?
Jak umieścić poziomą linię, oddzielającą sąsiednie akapity?
Jak obramować tekst?
W jaki sposób ukryć przed uŜytkownikiem wybrany tekst?

Strona 2

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Co to znaczy, Ŝe kod (X)HTML jest poprawny semantycznie i dlaczego jest to takie waŜne?

Wyświetlanie

Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników:

1. w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki

przerwy) przed oraz po takim bloku tak, Ŝe kaŜdy taki element jest wyświetlany w nowej linii. Generalnie
element blokowy moŜe zawierać wewnątrz siebie zwykły tekst, jak równieŜ inne elementy blokowe. Został
on pomyślany do tworzenia obszerniejszych struktur niŜ elementy wyświetlane w linii.

2. w linii - elementy takie są wyświetlane normalnie, tzn. bez dodawania dodatkowych interlinii przed i po (tak

jak zwykły tekst). Dwa takie elementy mogą znajdować się w jednej linii - obok siebie. Generalnie nie
powinny one zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst.
Jeśli jednak umieścimy wewnątrz nich jakiś element blokowy, moŜe to spowodować (choć nie musi), Ŝe
przeglądarka zignoruje taki znacznik (w większości przypadków tak się nie dzieje).

O tym, w jaki sposób wyświetlany jest dany znacznik, moŜesz dowiedzieć się w rozdziale: HTML 4.01.
Najczęściej moŜna jednak odgadnąć to intuicyjnie, np. wydaje się logiczne, Ŝe tekst pogrubiony musi być
wyświetlany w linii, poniewaŜ gdyby tak nie było, nie moŜna by pogrubić za jednym razem dwóch oddzielnych
wyrazów, znajdujących się w tym samym wierszu tekstu.

Przykład:

To jest zwykły tekst
To jest blok
To jest zwykły tekst

To jest zwykły tekst

To jest paragraf (blok z interlinią - podobnie jak tytuł)

To jest zwykły tekst

To jest zwykły tekst To jest element wyświetlany w linii To jest zwykły tekst

Akapit

wyświetlanie

: w bloku

Akapit jest to część tekstu objęta znacznikami:

. Następujące bezpośrednio po sobie akapity są

oddzielone przerwą w tekście (pustą linią). Dzięki umieszczaniu w kolejnych akapitach treści nieco róŜniącej się
tematycznie, strona stanie się bardziej estetyczna oraz czytelniejsza. JeŜeli przed akapitem lub serią akapitów
postawimy znak paragrafu

(w kodzie źródłowym reprezentowany przez znak specjalny

) z ewentualnym

Strona 3

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

numerem porządkowym, to taki fragment tekstu nosi nazwę paragraf. Zwykle odnosi się on do przepisów
prawnych.

Stosując akapity moŜemy skorzystać z kilku metod wyrównywania tekstu na stronie (czyli jego ustawienia):

1. Wyrównanie do lewej (domyślnie)

lub

2. Wyrównanie do prawej

3. Wyśrodkowanie

4. Justowanie (wyrównanie do obu marginesów jednocześnie)

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Akapit (paragraf) jest znacznikiem specyficznym - jest wyświetlany w bloku, ale nie moŜe zawierać innych

elementów blokowych (włączając w to inne paragrafy). MoŜe natomiast zawierać zwykły tekst oraz elementy
wyświetlane w linii.

Przykład:

align="left",
wyrównanie do lewej,
wyrównanie do lewej (align="left"),
(align="left")...

align="right",

wyrównanie do prawej,

wyrównanie do prawej (align="right"),

(align="right")...

align="center",
wyśrodkowanie,

wyśrodkowanie (align="center"),

(align="center")...

justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do
obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie

Strona 4

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

(align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie,
czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu
marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie
(align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie,
czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu
marginesów jednocześnie (align="justify")...

Tytuł

(n =

...

)

wyświetlanie

: w bloku

Aby nadać tytuł (nagłówek) jakiejś części tekstu (rozdziałowi), moŜesz uŜyć tej komendy. Istnieje sześć rzędów
tytułów. NajwyŜszym rzędem jest rząd pierwszy:

, a najniŜszym - szósty:

Tytuł wyŜszego rzędu jest pisany większą czcionką.

Tworząc tytuły moŜesz uŜyć tych samych sposobów wyrównywania tekstu co w przypadku paragrafów, tzn.:

1. Wyrównanie do lewej (domyślnie)

lub

2. Wyrównanie do prawej

3. Wyśrodkowanie

4. Justowanie (wyrównanie do obu marginesów jednocześnie)

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Prawidłowa kolejność tytułów

NaleŜy dąŜyć do tego, aby tytuły na stronie były poukładane w odpowiedniej kolejności, odzwierciadlającej podział
na działy, rozdziały, podrozdziały, punkty, podpunkty itd. Oznacza to, Ŝe kaŜdy element

powinien być

poprzedzony przynajmniej przez jeden element

- przez

W innym przypadku mielibyśmy do czynienia z sytuacją podobną do wykazu numerowanego np. od 1.1 zamiast od

Strona 5

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

1 albo z brakującymi podpunktami, tzn. jak gdyby nastąpiło "przeskoczenie" z punktu nr 1 od razu do 1.1.1
pomijając 1.1.

Przykład:

<h1>1. Dział</h1>

(...)

<h2>1.1. Rozdział</h2>

(...)

<h2>1.2. Rozdział</h2>

(...)

<h3>1.2.1. Podrozdział</h3>

(...)

<h1>2. Dział</h1>

(...)

Dymek narzędziowy

Stosując polecenie:

, moŜemy wprowadzić opis, który będzie się

pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (

title="..."

) moŜna stosować

praktycznie w stosunku do wszystkich znaczników HTML (oprócz:

<head>

<html>

<title>

UWAGA!
W treści atrybutu

title="..."

nie naleŜy uŜywać znaków cudzysłowu. Jeśli musimy to zrobić, naleŜy

zamiast nich wpisywać:

Blok

wyświetlanie

: w bloku

Polecenie to wydziela większy blok tekstu, przez co moŜemy nadać mu jakiś rodzaj formatowania:

1. Wyrównanie do lewej (domyślnie)

lub

2. Wyrównanie do prawej

3. Wyśrodkowanie

Strona 6

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

4. Justowanie (wyrównanie do obu marginesów jednocześnie)

W odróŜnieniu od paragrafu, blok moŜe zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne
bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, naleŜy np.
zastosować znacznik <br />).

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Ten blok tekstu został wydzielony poleceniem: <div align="center">...</div> i dlatego tekst został wyśrodkowany.

Wyśrodkowanie

wyświetlanie

: w bloku

Polecenie to pozwala wyśrodkować (czyli ustawić na środku ekranu) dowolny element - nie tylko tekst, ale równieŜ
np. obrazek. Jednym takim znacznikiem moŜna objąć równocześnie kilka elementów. Jego działanie jest
analogiczne jak <div align="center">.

Znacznik CENTER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Ten tekst jest wyśrodkowany, podobnie jak ten obrazek:

Koniec linii

<br />

Jest to bardzo przydatny znacznik. UŜywamy go, gdy chcemy natychmiast zakończyć linię i przejść do następnej
(wszystkie normalne znaki końca liniii są ignorowane przez przeglądarkę).

Przykład:

Tu jest pierwsza linia

<br />

Tu jest druga linia...

<br /><br /><br />

Strona 7

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

...a tu następna.

Blokada przełamania wiersza

To polecenie wykorzystujemy, gdy zaleŜy nam na zablokowaniu przełamania wiersza, tzn. chcemy aby cały tekst
był pisany w jednej linii, niezaleŜnie od jego długości (przeglądarka automatycznie zawija wiersze, które nie
mieszczą się na ekranie). Jeśli chcemy odwołać ten efekt przed zamknięciem znacznika (czyli przed pojawieniem
się

</nobr>

), musimy uŜyć polecenia:

<wbr />

(tylko Internet Explorer). Po jego uŜyciu wiersz zostanie

przełamany, chociaŜ wszystko dzieje się nadal w obrębie znacznika

Polecenie

<wbr />

działa tylko wówczas, jeŜeli tekst wpisany w ramach

nie mieści się

na ekranie. Natomiast jeśli chcemy natychmiastowo zakończyć linię, naleŜy uŜyć <br />.

Podczas drukowania strony, tekst który nie został zawinięty, najprawdopodobniej będzie "ucięty"!

Znaczniki NOBR oraz WBR nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Taki sam efekt moŜna uzyskać zamieniając w wybranym tekście wszystkie spacje na znaki:

[zobacz:

Znaki specjalne]. Nie dotyczy to jednak tekstu, w którym znajdują się: "%" (procent) lub "-" (myślnik) - wtedy linia
moŜe zostać przełamana po tych znakach, nawet jeśli nie występuje po nich spacja.

Pogrubienie

wyświetlanie

: w linii

Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold").

Przykład:

Ten tekst jest pogrubiony (wytłuszczony)

Pochylenie

wyświetlanie

: w linii

Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic").

Strona 8

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Przykład:

Ten tekst jest napisany pismem pochylonym, czyli kursywą

Podkreślenie

wyświetlanie

: w linii

Pozwala podkreślić fragment tekstu (ang. "underline").

Znacznik U jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Ten tekst jest podkreślony

Stosując pewną "sztuczkę", moŜna sprawić, aby kolor linii podkreślenia róŜnił się od koloru tekstu (nie obsługuje
MSIE 5.0):

<u style="color: red"><span style="color: black">To jest czarne podkre

lenie czerwon

lini

</span></u>

gdzie w miejsce wyróŜnionych wyrazów naleŜy wpisać definicje kolorów; przy czym "red" oznacza kolor, jaki ma
przyjąć linia podkreślenia, natomiast "black" - kolor tekstu.

Przykład:

To jest czarne podkreślenie czerwoną linią

Przekreślenie

lub

wyświetlanie

: w linii

Pozwala przekreślić część tekstu.

Znaczniki S oraz STRIKE są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Ten tekst jest przekreślony

Strona 9

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Stosując pewną "sztuczkę", moŜna sprawić, aby kolor linii przekreślenia róŜnił się od koloru tekstu (nie obsługuje
MSIE 5.0):

<s style="color: red"><span style="color: black">To jest czarne przekre

lenie czerwon

lini

</span></s>

gdzie w miejsce wyróŜnionych wyrazów naleŜy wpisać definicje kolorów; przy czym "red" oznacza kolor, jaki ma
przyjąć linia przekreślenia, natomiast "black" - kolor tekstu.

Przykład:

To jest czarne przekreślenie czerwoną linią

Migotanie

(tylko Netscape/Mozilla/Firefox i Opera 7.2!)

Wprowadza na ekran migający tekst.

Znacznik BLINK nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Aby wstawić migający tekst, który działa równieŜ w innych przeglądarkach, moŜesz uŜyć odpowiedniego skryptu.

Przykład:

WyróŜnienie

wyświetlanie

: w linii

1. Zwykłe (emfaza)

2. Mocne (mocna emfaza)

Pozwala wyróŜnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie. Pierwsze polecenie zwykle
wyświetla tekst napisany kursywą, natomiast drugie - pogrubiony. RóŜnią się one jednak od zwykłego
wytłuszczenia i kursywy tym, Ŝe dodatkowo niosą ze sobą pewne informacje, co do waŜności tekstu. W sytuacjach
kiedy szczególnie zaleŜy nam na zwróceniu uwagi czytelnika na jakieś informacje, a nie jedynie na określonym
sformatowaniu czcionki, powinniśmy uŜyć właśnie przedstawionych powyŜej znaczników.

Strona 10

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Przykład:

<em>

To jest tekst wyróŜniony

</em>

<strong>

To jest tekst mocno wyróŜniony

</strong>

Indeks

wyświetlanie

: w linii

1. Indeks górny

2. Indeks dolny

UmoŜliwia wprowadzenie indeksów (górnych lub dolnych) przy cyfrach i literach.

Przykład:

indeks

<sup>

górny

</sup>

indeks

<sub>

dolny

</sub>

Czcionka

wyświetlanie

: w linii

Znacznik FONT jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Dzięki temu poleceniu, moŜesz określić wiele parametrów dotyczących pisanego tekstu. PoniŜej zostanie
przedstawiona ich lista.

Wielkość czcionki

1. Wartość bezwzględna

gdzie "n" oznacza wielkość pisma (

- najmniejsza,

- największa, 3 - domyślna)

Strona 11

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Przykład:

Czcionka o rozmiarze 1 (w Internet Explorerze 10 pikseli)

Czcionka o rozmiarze 2 (12 pikseli)

Czcionka o rozmiarze 3 - domyślna (16 pikseli)

Czcionka o rozmiarze 4 (18 pikseli)

Czcionka o rozmiarze 5 (24 piksele)

Czcionka o rozmiarze 6 (32 piksele)

Czcionka o rozmiarze 7 (48 pikseli)

2. Wartość względna

lub

gdzie "+n" oznacza czcionkę o "n" większą od aktualnej. Natomiast "-n" oznacza czcionkę o "n" mniejszą od
bieŜącej.

Przykład:

To jest czcionka o rozmiarze domyślnym

Czcionka o rozmiarze +1 (3+1=4)

Czcionka o rozmiarze -1 (3-1=2)

Atrybut SIZE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Kolor tekstu

gdzie "kolor" oznacza kolor jaki chcemy nadać tekstowi (np.: "

#130dc5

" lub "black" itd.) [zobacz podstronę o

kolorach: Kolory].

Atrybut COLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Strona 12

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Przykład:

Czcionka koloru "black" Czcionka koloru "silver"

Czcionka koloru "gray"

Czcionka koloru "white"

Czcionka

koloru "maroon"

Czcionka koloru "red"

Czcionka koloru "purple"

Czcionka koloru "fuchsia"

Czcionka koloru "green"

Czcionka koloru "lime"

Czcionka koloru "olive"

Czcionka koloru "yellow"

Czcionka koloru "navy"

Czcionka koloru "blue"

Czcionka koloru "teal"

Czcionka koloru "aqua"

Czcionka koloru "#800af0"

Rodzaj czcionki

lub

gdzie zamiast "rodzaj, rodzaj1, rodzaj2, rodzaj3..." naleŜy wpisać rodzaj czcionki (np.:

Arial,

'Courier New', 'Times New Roman', Verdana

i inne). JeŜeli nazwa czcionki składa się z kilku

wyrazów, to w przypadku drugiego polecenia naleŜy ją objąć w znaki apostrofu (np.:

<font face="Verdana,

'Times New Roman', Arial">...</font>

Uwaga! NaleŜy być ostroŜnym z uŜywaniem tego polecenia, poniewaŜ jeśli uŜytkownik oglądający Twoją stronę,
nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną
(w Internet Explorerze będzie to najprawdopodobniej

'Times New Roman'

, chociaŜ to teŜ nie jest pewne).

Poza tym nie kaŜda czcionka potrafi zapisać poprawnie polskie znaki. Koniecznie sprawdź rezultat w praktyce!

W przypadku drugiego polecenia zostanie uŜyta taka czcionka, którą pierwszą w kolejności podawania będzie
posiadał uŜytkownik. Jest to lepszy sposób, gdyŜ pozwala się ubezpieczyć na wypadek nieposiadania jednego
rodzaju czcionki przez uŜytkownika.

W systemie Windows standardowo dostępne powinny być czcionki:

'Times New Roman', Arial,

'Courier New'

. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są:

Verdana, Tahoma,

'Trebuchet MS', Georgia

. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a

takŜe takie które domyślnie występują w innych systemach operacyjnych (np.:

Helvetica

- podobna do

Arial

Istnieje technologia, pozwalająca wczytać plik czcionki bezpośrednio z Internetu. Dzięki temu tekst teoretycznie
zawsze będzie wyświetlony za pomocą wybranej przez nas czcionki, nawet jeśli uŜytkownik nie zainstalował jej na
własnym komputerze. Niestety technologia ta nie została ujednolicona, a dodatkowo nie wszystkie przeglądarki ją
obsługują :-( Aby dowiedzieć się więcej, zobacz: Czcionki osadzone.

Atrybut FACE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Czcionka Arial

Czcionka 'Courier New'

Czcionka 'Times New Roman'
Czcionka Verdana

Strona 13

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Czcionka bazowa

Polecenie to pozwala określić parametry czcionki bazowej (domyślnej). Wszystkie atrybuty (

size="..."

color="..."

face="..."

) mają takie same znaczenie jak w przypadku zwykłych czcionek. PoniewaŜ

element ten nie ma znacznika zamykającego (!), zmienia parametry całego tekstu, znajdującego się poniŜej niego,
aŜ do pojawienie się następnego znacznika

. Zwykle polecenie to umieszcza się na stronie tylko

jeden raz - w treści nagłówkowej dokumentu, czyli pomiędzy

<head>

oraz

</head>

[zobacz: Ramy dokumentu]

UWAGA!
W poleceniu tym nie naleŜy raczej uŜywać względnych miar wielkości czcionki

size="+/-n"

Znacznik BASEFONT jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Czcionka powiększona i pomniejszona

1. Czcionka powiększona

2. Czcionka pomniejszona

wyświetlanie

: w linii

Wprowadza tekst napisany powiększoną czcionką (

<big>

) lub pomniejszoną (

<small>

). Wpisując powyŜsze

znaczniki (tego samego rodzaju) jeden wewnątrz drugiego (np.:

), moŜna

zwiększyć lub zmniejszyć rozmiar tekstu o kilka wielkości.

Przykład:

To jest zwykły tekst...

a ten tekst jest napisany czcionką powiększoną (big)

To jest zwykły tekst...

a ten tekst jest napisany czcionką pomniejszoną (small)

Tekst preformatowany

wyświetlanie

: w bloku

Wprowadza tekst preformatowany, czyli napisany czcionką monotypiczną (o stałej szerokości znaku), który
uwzględnia dodatkowe spacje, tabulację i znaki końca linii (nie trzeba stosować znaczników <br />) oraz nie jest
automatycznie zawijany. Dzięki niemu moŜesz np. wkleić na stronę WWW tekst, wprost ze zwykłego edytora, bez

Strona 14

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

stosowania dodatkowych znaczników (niestety informacje dotyczące formatowania zostaną pominięte). NaleŜy
jednak przy tym pamiętać, aby tekst nie zawierał znaków: "

" oraz "

" (w zamian uŜywaj:

Przykład:

Ten tekst jest preformatowny
dlatego mo

emy u

ywa

tabulatora,

dodatkowych spacji
oraz znaków ko

ca linii.

Kod komputerowy

wyświetlanie

: w linii

Pozwala wprowadzić fragment kodu komputerowego ("wyciąg" z programu lub źródła dokumentu), który jest
napisany czcionką monotypiczną (tak jak w przypadku tekstu preformatowanego). Nie uwzględnia on jednak
dodatkowych spacji, tabulacji ani znaków końca linii (trzeba uŜywać <br />) oraz jest automatycznie zawijany.

PoniewaŜ powyŜszy znacznik nie uznaje znaków końca linii, dodatkowych spacji, a takŜe nie blokuje zawijania
tekstu na ekranie, zamiast niego często uŜywa się tekstu preformatowanego.

Przykład:

// <![CDATA[

var data = new Date();

document.write(data);

// ]]>

</script>

Klawiatura

wyświetlanie

: w linii

Wprowadza na ekran tekst, wskazując, Ŝe uŜytkownik powinien wprowadzić go z klawiatury. Zwykle
formatowanie tego elementu jest identyczne jak w przypadku kodu komputerowego.

Przykład:

Dla strony głównej serwisu internetowego naleŜy utworzyć plik i nadać mu nazwę:

<kbd>index.html</kbd>

Dalekopis

Strona 15

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

wyświetlanie

: w linii

Pozwala wprowadzić do dokumentu tekst, napisany czcionką monotypiczną, czyli o stałej szerokości znaku (efekt
dalekopisu). Zwykle działa analogicznie jak <code>.

Przykład:

To jest tekst o stałej szeroko

ci znaku (dalekopis).

Przykład

wyświetlanie

: w linii

Pozwala wprowadzić do dokumentu tekst, będący przykładem wyniku wygenerowanego przez program, skrypt itp.
Zwykle działa analogicznie jak <code>.

Przykład:

<samp>To jest przykład u

ycia znacznika "samp"</samp>

Zmienna

wyświetlanie

: w linii

Wprowadza na ekran zmienną (matematyczną lub języka programowania), która zostaje wyróŜniona, najczęściej
poprzez pochylenie tekstu.

Przykład:

zmienna = a + 2b + 3

Cytat

wyświetlanie

: w linii

1. Odniesienie do źródła

Zwykle jest napisany kursywą. MoŜna w nim umieścić np. imię i nazwisko autora, którego cytujemy (ale nie
sam cytat!) albo tytuł ksiąŜki, do której się odnosimy.

Strona 16

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

2. Krótki cytat

Przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu (Internet Explorer 7.0
ani wcześniejsze wersje tego nie robią!), dlatego nie naleŜy wstawiać dodatkowych cudzysłowów ręcznie.
Umieszcza się w nim treść krótkich cytatów, które nie zawierają Ŝadnych akapitów. Jeśli chcemy zacytować
dłuŜszy fragment tekstu z kilkoma paragrafami, powinniśmy wykorzystać znacznik <blockquote>...</
blockquote>.

Przykład:

<cite>Albert Einstein</cite> powiedział:

<q>Dwie rzeczy nie maj

granic: wszech

wiat i ludzka głupota.</q>

Albert Einstein powiedział: "Dwie rzeczy nie mają granic: wszechświat i ludzka głupota."

cej informacji znajduje si

w opracowaniu

<cite>[HTML 4.01 Specification]</cite>

Więcej informacji znajduje się w opracowaniu [HTML 4.01 Specification]

Blok cytowany

wyświetlanie

: w bloku

Wprowadza blok cytowany, którego moŜemy uŜyć np. gdy powołujemy się na jakieś źródła. KaŜdy wiersz w bloku
cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). MoŜna go uŜywać do zacytowania jakiegoś większego
fragmentu, który ciągnie się przez wiele linijek. (zobacz takŜe: Cytat).

UWAGA!
W Strict DTD tekst zawarty w bloku cytowanym, powinien być objęty równieŜ innym znacznikiem blokowym,
jak np. paragrafem (

Przykład:

To jest blok cytowany.
UŜywamy go gdy powołujemy się na jakieś źródła, cytujemy czyjąś wypowiedź...
Wszystkie wiersze w tym bloku rozpoczynają się tabulatorem.

Korzystając z atrybutu

cite="..."

, moŜna podać adres źródła, które cytujemy:

<p>The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines,

software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce,

communication, and collective understanding.</p>

</blockquote>

Strona 17

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Adres

wyświetlanie

: w bloku

Wprowadza blok adresu, którego moŜemy uŜyć gdy podajemy na stronie swój własny lub jakiś inny adres. Blok
taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest
automatycznie napisany czcionką pochyłą.

Przykład:

Jan Kowalski
ul. Krakowska 9/99
99-999 Warszawa
Polska

Zmiany

1. Treść wstawiona

2. Treść usunięta

Pozwala podać informację o wprowadzonych na stronie zmianach. Jeśli ostatnio dodane zostały jakieś nowe
rozdziały, aby o tym zakomunikować, opis tych zmian moŜna wpisać do znacznika

<ins>

(taki tekst moŜe zostać

automatycznie podkreślony). Natomiast do znacznika

<del>

wpisujemy opis usuniętych rozdziałów, które nie są

juŜ dostępne (zwykle tekst przekreślony).

Przykład:

W tym tygodniu został dodany rozdział, dotyczący obliczania przybliŜonych rozwiązań równań róŜniczkowych
metodą Runge-Kutty drugiego rzędu ;-)

Rozdział o trójwymiarowych całkach krzywoliniowych, nie jest juŜ dostępny ;-)

Skrót

wyświetlanie

: w linii

1. Zwykły skrót

Strona 18

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

2. Akronim

Znacznik

<abbr>

pozwala oznaczyć wpisaną formę skróconą jak np.: "inŜ.", "prof.". Natomiast

wskazuje na akronim, czyli wyraz utworzony z pierwszych liter lub pierwszych zgłosek kilku wyrazów będących
zwykle jakąś nazwą, np.: "WWW" (World Wide Web).

Dla obu tych znaczników zaleca się podać równieŜ pełną formę skrótu przy uŜyciu atrybutu

title="..."

Dodatkowo, jeŜeli jest to nazwa obcojęzyczna, dobrze jest to oznaczyć, za pomocą atrybutu

lang="..."

[zobacz: Języki]. Przeglądarki takie jak Opera czy Firefox wyświetlą tego typu skróty podkreślone linią przerywaną,
wskazując, Ŝe po wskazaniu ich myszką, pojawi się dymek z ich pełnym rozwinięciem (MSIE 7.0 ani wcześniejsze
wersje niestety tego nie robią, a ponadto do wersji 6.0 - włącznie - dla znacznika

<abbr>

w ogóle nie wyświetla

dymku z opisem).

Przykład:

prof. WWW

Definicja

wyświetlanie

: w linii

Wprowadza definicję jakiegoś terminu, która zwykle jest napisana kursywą. (zobacz takŜe: Słownik). Znacznikiem
tym powinien być objęty tylko definiowany termin, a nie cała treść definicji.

Przykład:

<dfn>Atrybut</dfn> to wartość powiązana z elementem, składająca się z nazwy i związanej wartości (tekstowej).

Słownik

<dl>
<dt>Pierwszy termin</dt><dd>Definicja pierwszego terminu</dd>
<dt>Drugi termin</dt><dd>Definicja drugiego terminu</dd>
<dt>Trzeci termin</dt><dd>Definicja trzeciego terminu</dd>
</dl>

wyświetlanie

: w bloku

Polecenie tworzy tzw. listę definicyjną, która jest przydatna, gdy piszemy słownik, w którym znajdują się pewne
wyrazy i ich objaśnienia. Objaśnienia są zwykle przesunięte bardziej w prawo, dzięki czemu lista staje się
czytelniejsza. (Zobacz takŜe: Definicja).

Strona 19

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Innym zastosowaniem listy definicyjnej moŜe być zapisywanie dialogów (rozmowy): do znacznika

<dt>

wpisujemy imię osoby mówiącej, a do

<dd>

słowa które mówi.

Zwracam uwagę, Ŝe w obrębie słwonika tekst i inne elementy moŜna wstawiać tylko wewnątrz znaczników
terminów i definicji, a nie poza nimi! Zatem poniŜszy kod będzie nieprawidłowy:

<dl>

Słownik...

<dt>Termin</dt>

<br />

<dd>Definicja</dd>

<br />

</dl>

Przykład:

Atrybut

Wartość powiązana z elementem, składająca się z nazwy i związanej wartości (tekstowej).

HTML (Hypertext Markup Language)

Język znacznikowy słuŜący do tworzenia stron WWW.

Zawartość

Treść związana z elementem w dokumencie źródłowym.

MoŜliwe jest równieŜ tworzenie słownika, w którym pojedyncze pojęcia mają kilka znaczeń albo kilka pojęć
oznacza to samo:

Zamek

Urządzenie do zamykania drzwi za pomocą klucza.
Zapięcie wszywane do odzieŜy.
Warowna budowla mieszkalna.

Auto
Samochód

Dwuśladowy pojazd mechaniczny napędzany silnikiem.

<dl>

<dt>Zamek</dt>

<dd>Urz

dzenie do zamykania drzwi za pomoc

klucza.</dd>

<dd>Zapi

cie wszywane do odzie

y.</dd>

<dd>Warowna budowla mieszkalna.</dd>

<dt>Samochód</dt>

<dd>Dwu

ladowy pojazd mechaniczny nap

dzany silnikiem.</dd>

</dl>

Wykaz

(lista wyliczeniowa)

wyświetlanie

: w bloku

Strona 20

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Wypunktowanie (podstawowy) - lista nieuporządkowana

<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

Zwracam uwagę, Ŝe w obrębie wykazu tekst i inne elementy moŜna wstawiać tylko wewnątrz znaczników punktów
wykazu, a nie poza nimi! Zatem poniŜszy kod będzie nieprawidłowy:

<ul>

Wykaz...

<li>Punkt pierwszy</li>

<br />

<li>Punkt drugi</li>

<br />

</ul>

Przykład:

Punkt pierwszy
Punkt drugi
Punkt trzeci

Wypunktowanie - róŜne typy

<ul type="rodzaj">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

gdzie jako "rodzaj" naleŜy podać:

disc

" - (domyślny) - koło

circle

" - okrąg

square

" - wypełniony kwadrat

Atrybut TYPE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

disk (domyślny)

circle

square

Wykaz numerowany (podstawowy) - lista uporządkowana

Strona 21

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

Przykład:

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Wykaz numerowany - róŜne typy

<ol type="rodzaj numeracji">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

gdzie jako "rodzaj numeracji" naleŜy podać:

" (domyślny) - numeracja według liczb arabskich

" - według duŜych liczb rzymskich

" - według małych liczb rzymskich

" - według małych liter

" - według duŜych liter

Atrybut TYPE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

<ol type="1"> (domyślny)

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

I. Punkt pierwszy

II. Punkt drugi

III. Punkt trzeci

i. Punkt pierwszy

ii. Punkt drugi

iii. Punkt trzeci

Strona 22

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

A. Punkt pierwszy

B. Punkt drugi
C. Punkt trzeci

a. Punkt pierwszy

b. Punkt drugi

c. Punkt trzeci

Wykaz numerowany z podaniem początkowego numeru

<ol start="n">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

gdzie jako "n" naleŜy podać liczbę, od której ma się rozpocząć numerowanie.

Wartość atrybutu START zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!

Atrybut START jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Zmiana numerowania "w trakcie"

<ol>
<li>Punkt pierwszy</li>
<li value="n">Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

gdzie jako "n" naleŜy podać zmieniony numer punktu (następne punkty będą numerowane według zmienionej
kolejności).

Wartość atrybutu VALUE zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!

Atrybut VALUE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Edytory (X)HTML posiadają często specjalny generator wykazów, który moŜe ułatwić pracę.

Stosując pewną "sztuczkę", moŜna uzyskać wykaz, którego wyróŜniki (markery) będą miały inny kolor niŜ reszta
tekstu:

<li><span style="color: black">Punkt pierwszy</span></li>

<li><span style="color: black">Punkt drugi</span></li>

Strona 23

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

<li><span style="color: black">Punkt trzeci</span></li>

</ul>

gdzie w miejsce wyróŜnionych wyrazów naleŜy wpisać definicje kolorów, przy czym "red" oznacza kolor, jaki mają
przyjąć wyrózniki, natomiast "black" - kolor tekstu.

Punkt pierwszy
Punkt drugi
Punkt trzeci

Dotyczy to wszystkich typów wykazu:

Punkt pierwszy

Punkt drugi

Punkt trzeci

Punkt pierwszy

Punkt drugi

Punkt trzeci

MoŜliwe jest równieŜ określenie innego koloru dla kaŜdego punktu wykazu:

<ul>

<li style="color: red"><span style="color: black">Punkt pierwszy</span></li>

<li style="color: green"><span style="color: black">Punkt drugi</span></li>

<li style="color: blue"><span style="color: black">Punkt trzeci</span></li>

</ul>

Punkt pierwszy
Punkt drugi
Punkt trzeci

Na koniec waŜna wskazówka. Często moŜe się zdarzyć tak, Ŝe chcemy umieścić wykaz wewnątrz paragrafu. Efekt
będzie prawdopodobnie inny niŜ oczekiwaliśmy. Paragraf nie jest zwykłym elementem blokowym, poniewaŜ nie
moŜe zawierać innych elementów blokowych (m.in. wykazów). Zakończy się on po napotkaniu pierwszego
elementu blokowego, nawet przed znacznikiem zamykającym

</p>

. W języku HTML nie jest to błąd, natomiast

w XHTML juŜ tak.

Przykład:

Po wpisaniu:

<p align="center">

Tu rozpoczyna si

paragraf...

<ul>

<li>Punkt pierwszy wykazu</li>

<li>Punkt drugi wykazu...</li>

</ul>

...tu powinien sko

czy

paragraf.

</p>

Strona 24

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

otrzymamy:

Tu rozpoczyna się paragraf...

Punkt pierwszy wykazu
Punkt drugi wykazu...

...tu powinien skończyć się paragraf.

Jak widać paragraf zakończył się przed wykazem, poniewaŜ ostatnia linijka nie została ustawiona na środku (tak
jak pierwsza). Aby to zmienić, naleŜy rozpocząć nowy paragraf tuŜ za wykazem i określić dla niego odpowiednie
atrybuty lub ewentualnie zamiast paragrafu uŜyć bloku.

ZagnieŜdŜanie wykazów

1. Wypunktowanie (podstawowy)

<ul>
<li>Punkt pierwszy

<ul>
<li>Punkt 1.1

<ul>
<li>Punkt 1.1.1</li>
<li>Punkt 1.1.2</li>
</ul>

</li>
<li>Punkt 1.2</li>
</ul>

</li>
<li>Punkt drugi</li>
</ul>

2. Numerowanie

<ol>
<li>Punkt pierwszy

<ol>
<li>Punkt 1.1

<ol>
<li>Punkt 1.1.1</li>
<li>Punkt 1.1.2</li>
</ol>

</li>
<li>Punkt 1.2</li>
</ol>

</li>
<li>Punkt drugi</li>
</ol>

Strona 25

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

3. Wykaz mieszany - połączenie obu powyŜszych

We wszystkich przypadkach kolorem

czerwonym

zaznaczono wykaz nadrzędny (główny),

zielonym

- wykaz

pierwszego stopnia zagnieŜdŜenia (podrzędny), natomiast

niebieskim

- drugiego stopnia zagnieŜdŜenia (najbardziej

podrzędny).
MoŜliwe jest oczywiście dalsze zagnieŜdŜanie oraz mieszanie typów wykazów(wykaz mieszany).

Dzięki moŜliwości zagnieŜdŜania wykazów, moŜna stworzyć listę punktów wraz z podpunktami. Podpunkty będą
przesunięte bardziej w prawo w stosunku do punktów nadrzędnych, dzięki czemu wykaz będzie wyglądał bardziej
czytelnie i estetycznie.

ZauwaŜ, Ŝe w składni powyŜszych poleceń, wykazy bardziej zagnieŜdŜone są przesunięte w prawo - im bardziej
podrzędny wykaz, tym większe jest wcięcie. Nie jest to konieczne, ale bardzo ułatwia zorientowanie się, na którym
stopniu zagnieŜdŜenia aktualnie jesteśmy. Dlatego polecam uŜywanie takiego sposobu wpisywania. Dobrze jest
równieŜ na samym początku zamykać wszystkie znaczniki

<ul>

<ol>

oraz

<li>

(większość edytorów (X)

HTML i tak robi to automatycznie), a dopiero potem wpisywać do nich wykazy podrzędne. Dzięki temu unikniemy
błędnego wyświetlania, spowodowanego zapomnieniem zamknięcia znacznika.

Kod wykazów podrzędnych wpisuje się wewnątrz znacznika

wybranego punku wykazu

nadrzędnego. Pomiędzy dwoma punktami wykazu, tzn. między znacznikami

</li>

<li>

nie moŜna się

znaleźć Ŝaden kod ani tekst, poniewaŜ jest to błędem!

Przykład:

Wypunktowanie:

Punkt pierwszy

Punkt 1.1

Punkt 1.1.1
Punkt 1.1.2

Punkt 1.2

Punkt drugi

Numerowanie:

1. Punkt pierwszy

1. Punkt 1.1

1. Punkt 1.1.1
2. Punkt 1.1.2

2. Punkt 1.2

2. Punkt drugi

Wykaz mieszany:

I. Punkt pierwszy

1. Punkt I.1

a. Punkt I.1.a

Punkt I.1.a.(1)
Punkt I.1.a.(2)

Strona 26

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

b. Punkt I.1.b

2. Punkt I.2

II. Punkt drugi

A oto co naleŜy wpisać, aby otrzymać ostatni wykaz:

type="I">

>Punkt pierwszy

type="1">

>Punkt I.1

type="a">

>Punkt I.1.a

type="disc">

>Punkt I.1.a.(1)</

>Punkt I.1.a.(2)</

>Punkt I.1.b</

>Punkt I.2</

>Punkt drugi</

Pozioma linia

<hr />

Polecenie to pozwala narysować na ekranie poziomą linię. MoŜe ona np. rozdzielać kolejne rozdziały, które róŜnią
się tematycznie, przez co strona staje się bardziej czytelna i przejrzysta.

Wygląd poziomej linii moŜe się róŜnić w zaleŜności od przeglądarki.

1. Zwykła (domyślnie)

<hr />

2. Pozbawiona cieniowania

Atrybut NOSHADE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

3. O określonej grubości

gdzie "y" oznacza grubość linii (w pikselach).

Atrybut SIZE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Strona 27

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

4. O określonej długości

lub

gdzie "x" oznacza długość linii w pikselach, natomiast "x%" oznacza długość linii w procentach ekranu.

Atrybut WIDTH jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

5. O określonym kolorze (Internet Explorer)

gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

Atrybut COLOR nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

6. O określonym ustawieniu

gdzie jako "rodzaj" naleŜy wpisać:

center

" - wyśrodkowanie

left

" - ustawienie po lewej

right

" - ustawienie po prawej

Określenie ustawienie ma sens tylko wtedy, gdy jednocześnie podamy długość linii - atrybut

width="..."

(mniejszy od 100%).

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Obramowanie

Wprowadza obramowanie wokół wybranego fragmentu tekstu.

Prawdziwe zastosowanie znacznika

to grupowanie pól formularza.

Wygląd obramowania moŜe się róŜnić w zaleŜności od przeglądarki.

Przykład:

Ten tekst jest ujęty w ramkę

Strona 28

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

Polecenie to często stosuje się wraz z:

, co pozwala podać tytuł ramki. Po wpisaniu:

<legend>Opis</legend>

Jaki

tekst

</fieldset>

otrzymamy:

Opis

Jakiś tekst

UWAGA! Znacznik

(tytuł ramki) musi znajdować się bezpośrednio po znaczniku

otwierającym

Komentarz

<!-- Tre

ść

komentarza -->

Często zdarza się, Ŝe autor dla swojej wygody chciałby umieścić na stronie pewien tekst, który nie będzie widoczny
dla normalnych uŜytkowników. Dzięki temu mógłby zaznaczyć waŜne elementy strony lub wprowadzić inne
informacje, które nie muszą być wyświetlane na ekranie, poniewaŜ mogłyby spowodować zaciemnienie właściwej
treści.

Do wprowadzenia tekstu, który jest niewidoczny na ekranie, ale istnieje w źródle dokumentu, słuŜy właśnie
komentarz. Cały tekst który zostanie do niego wpisany będzie zignorowany przez przeglądarkę, ale moŜe
przechowywać waŜne informacje dla autora strony (np. prawa autorskie). Oczywiście wewnątrz komentarza zwykłe
znaczniki nie są interpretowane (chociaŜ moŜna je tam wpisać). Komentarz moŜe być wieloliniowy tzn., Ŝe moŜe
ciągnąć się przez wiele linijek, np.:

<!-- Ten tekst

zostanie zignorowany

przez przegl

dark

-->

Komentarzy nie moŜna zagnieŜdŜać (umieszczać jeden wewnątrz drugiego), tzn. niedozwolona jest konstrukcja:

<!-- zewn

trzny <!-- komentarz wewn

trzny --> zewn

trzny -->

nawet jeśli komentarze znajdują się w wielu linijkach.

Częstym zastosowaniem komentarza jest równieŜ objęcie nim bloku kodu (razem ze znacznikami), który
zdecydowaliśmy się chwilowo usunąć ze strony, ale zamierzamy go jeszcze kiedyś (niedługo) wykorzystać. Zaletą
takiego sposobu, w stosunku do zwyczajnego usunięcia tekstu z kodu źródłowego strony, jest to, Ŝe za jakiś czas
moŜemy ponownie wstawić taki fragment, usuwając tylko znaki komentarza - nie musimy wtedy wpisywać całego
kodu od początku:

<!--<p>

Ten fragment pokazuje przykład,

Strona 29

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

w jaki sposób mo

na u

ywa

<b>komentarz HTML</b>...

</p>-->

NaleŜy jednak pamiętać, aby nie obejmować w ten sposób przesadnie długich fragmentów strony, poniewaŜ
niezaleŜnie od tego, Ŝe nie są one widoczne na ekranie, to nadal figurują w kodzie źródłowym i spowalniają
wczytywanie. Nie są natomiast wczytywane obrazki i inne osadzone pliki. Ponadto trzeba uwaŜać, aby wybrany
fragment nie zawierał wstawionych wcześniej komentarzy, poniewaŜ spowodowałoby to zagnieŜdŜenie, co jest
niedozwolone:

<!--<p>

Ten fragment pokazuje przykład,

w jaki sposób nie mo

na u

ywa

<b>komentarza HTML</b>...

g dalszy...

</p>-->

Kod poprawny semantycznie

Patrząc na liczbę znaczników, słuŜących do formatowania tekstu na ekranie przeglądarki internetowej, moŜna się
zastanawiać: po co jest ich aŜ tyle? Jaki był sens wprowadzania znacznika <strong>...</strong> (mocne
wyróŜnienie), skoro właściwie zwykle jest on wyświetlany tak samo jak <b>...</b> (pogrubienie)? Czy nie lepiej
tworzyć akapity za pomocą podwójnych znaczników <br /> zamiast <p>...</p>? Czy to aby nie jest pomyłka
organizacji W3C, Ŝe wprowadzono znacznik <h1>...</h1> (tytuł rozdziału), skoro ten sam efekt moŜna uzyskać
dobierając odpowiednią czcionkę za pomocą znacznika <font>...</font>?

OtóŜ na pewno nie jest to pomyłka. W języku (X)HTML wyróŜniamy dwa podstawowe typy elementów
określających atrybuty tekstu:

1. Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez

adnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER (wyśrodkowanie), B (pogrubienie), I

(pochylenie), U (podkreślenie), S i STRIKE (przekreślenie), FONT (czcionka), BASEFONT (czcionka
bazowa), BIG (czcionka powiększona) SMALL (czcionka pomniejszona). UŜycie tych znaczników
gwarantuje, Ŝe w kaŜdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o
charakterze tego tekstu. Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, Ŝe zawiera waŜny
termin, który powinien się wyróŜniać, czy moŜe dlatego, Ŝe autor strony chciał w tym miejscu po prostu
wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony.

2. Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą

równieŜ odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: Hn (tytuł), STRONG (mocne
wyróŜnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR
(zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres),
INS i DEL (zmiany), ABBR (skrót), ACRONYM (akronim), DFN (definicja). Nie ma Ŝadnej pewności, w
jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik

<strong>...</

strong>

jest pogrubiony, ale nic nie stoi na przeszkodzie, aby jakaś specjalna przeglądarka wyświetliła go

normalnie, a jedynie ze zmienionym na czerwono kolorem.

W przypadku znaczników semantycznych to nie sposób formatowania jest najwaŜniejszy, ale informacje jakie ze
sobą niosą. Element

wskazuje, Ŝe objęty nimi tekst jest bardzo waŜny.

daje do zrozumienia, Ŝe jest to fragment kodu komputerowego - np. jakiegoś programu.

Strona 30

Kurs HTML - HTML - Tekst

2008-02-07 18:44:03

http://www.kurshtml.boo.pl/html/tekst.print.html

to wspólnie z

<cite>...</

cite>

jedne z najbardziej "niedocenianych" znaczników. Tymczasem niosą ze sobą niezwykle waŜne informacje.

Komu to jest potrzebne?

Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe przeglądarki internetowe, wyróŜniając je
w specjalny, właściwy sobie sposób.

Znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy, czyli specjalnych przeglądarek, które
odczytują treść stron WWW na głos. UŜywane są najczęściej przez osoby niewidome. Taka osoba nie zobaczy
koloru czcionki i nie będzie wiedzieć, Ŝe gdzieś tekst został wytłuszczony w tradycyjny sposób. Natomiast uŜywany
syntezator mowy, kiedy natrafi na znacznik

, moŜe specjalnie podkreślić tonem

głosu zawarty w nim tekst. Wprost nieocenioną pomocą dla syntezatorów mowy są znaczniki akronimów i
skrótów. Aplikacje takie mają zwykle wbudowaną bazę najpopularniejszych skrótów i akronimów, a więc kiedy na
nie natrafią, mogą odczytać ich pełną nazwę, a nie literować. Oczywiście najpierw trzeba poinformować syntezator,
Ŝ

e dany wyraz jest skrótem lub akronimem, a nie jakąś specjalną nazwą, którą uŜywasz w swoim tekście. JeŜeli

uŜywasz skrótów lub akronimów, które są dość mało znane, zalecane jest dodanie atrybutu

title="..."

, w

którym moŜna umieścić pełne rozwinięcie nazwy. Wyeliminuje to konieczność domyślania się rozwinięcia przez
syntezator i ewentualnych pomyłek (jeden akronim moŜe mieć zupełnie róŜne rozwinięcia w róŜnych dziedzinach
wiedzy).

JeŜeli nie sądzisz, aby Twoja strona mogła być kiedykolwiek odwiedzona przez osobę niewidomą (nigdy tego nie
zakładaj, bo moŜesz się bardzo zdziwić!), na pewno nie moŜesz zlekcewaŜyć, Ŝe właściwe oznaczanie tekstu za
pomocą znaczników semantycznych ma niebagatelne znaczenie dla robotów wyszukiwarek sieciowych. Są to
aplikacje, które przez cały czas szukają nowych stron w Internecie i sprawdzają, czy stare się nie zmieniły. Za
pomocą specjalnego algorytmu informatycznego przetwarzającego treść odwiedzanych stron, zapisują linki do nich
w bazie danych przyporządkowując je do odpowiednich słów kluczowych (haseł). Z tej bazy danych korzystają
następnie wyszukiwarki sieciowe, takie jak Google, kiedy uŜytkownicy przeszukują Internet za ich pośrednictwem.
Aby serwis WWW mógł być popularny, konieczne jest takie zbudowanie treści, aby była ona przyjazna dla
robotów wyszukiwarek, poniewaŜ inaczej trudno go będzie komukolwiek odszukać. MoŜe to zabrzmi dziwnie, ale
moŜna powiedzieć, Ŝe roboty wyszukiwarek są "niewidome"! Dlatego na pewno docenią, Ŝe chcesz im pomóc w
prawidłowym zaindeksowaniu (zapisaniu informacji o stronie w bazie danych) swojej strony. Mogą się
odwdzięczyć oczywiście wyŜszą pozycją na liście wyszukiwania, co bezpośrednio wpłynie na popularność serwisu
WWW.

Dla robotów wyszukiwarek sieciowych nie jest obojętne, czy do oznaczania tytułów rozdziałów uŜyjesz
znaczników

, czy moŜe

<font size="7">...</font> -

. Nikt rozsądny nie wpisuje w znacznikach tytułu tekstu, który nie ma nic

wspólnego z zawartością rozdziału, co moŜe mieć miejsce dla elementu FONT. Tak na marginesie: wiele osób
próbuje oszukać wyszukiwarki, umieszczając na stronie tytuły w taki sposób:

<h1><font size="1">...</

font></h1>

. Powoduje to wstawienie tytułu pierwszego rzędu (czyli najwaŜniejszego dla wyszukiwarek)

miniaturową czcionką. W tym przypadku efekt jednak moŜe być odwrotny, poniewaŜ wyszukiwarki juŜ dawno
uodporniły się na takie sztuczki. W skrajnym przypadku taka strona moŜe zostać zupełnie usunięta z wyszukiwarki!

Podsumowanie

Zrozumienie istoty poprawności semantycznej kodu (X)HTML jest niezwykle waŜne. Niejednokrotnie moŜna w
ten sposób odróŜnić osobę doświadczoną od nowicjusza. Stosuj znaczniki formatujące tylko wtedy, gdy