Kurs HTML - tekst










SPIS TREŚCI


Paragraf  - 
Tytuł  - 
Blok  - 
Wyśrodkowanie  - 
Koniec linii  - 
Blokada przełamania wiersza  - 
Pogrubienie  - 
Pochylonenie  - 
Podkreślonenie  - 
Przekreślenie  - 
Migotanie  - 
Wyróżnienie  - 
Indeks  - 
Czcionka  - 
Czcionka bazowa  - 
Czcionka powiększona i pomniejszona  - 
Tekst preformatowany  - 
Kod komputerowy  - 
Zmienna  - 
Dalekopis  - 
Przykład  - 
Definicja  - 
Cytat  - 
Blok cytowany  - 
Adres  - 
Zmiany  - 
Pozioma linia  - 
Obramowanie  - 
Wykaz  - 
Zagnieżdżanie wykazów  - 
Słownik  - 
Komentarz


Tekst



W tym rozdziale dowiesz się:

W jaki sposób grupować i wyróżniać tekst na ekranie, aby był przyjemniejszy w czytaniu
Jakie są podstawowe modele wyświetlania znaczników HTML
W jaki sposób wyświetlić dymek narzędziowy po wskazaniu tekstu myszką
Jak nie dopuścić do zawinięcia tekstu na ekranie przeglądarki
Jak wstawić indeks górny i dolny przy tekście
Jak kontrolować wygląd czcionki
W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem czcionki
Jakie polecenia zostały przeznaczone do wpisywania treści specjalnej (kod, zmienna, dalekopis, przykład, definicja, sytat, adres)
Jak wstawić do dokumentu poziomą linię, która może oddzielać kolejne bloki tekstu
Jak ująć tekst w ramkę
W jaki sposób zrobić listę punków i podpunktów (wykaz)
Jak napisać słownik
W jaki sposób ukryć przed użytkownikiem wybrany tekst





PARAGRAF
<P>...</P>
wyświetlanie: w bloku*

Paragraf (czyli akapit) jest to część tekstu objęta znacznikami: <P>...</P>.
Następujące bezpośrednio po sobie paragrafy są oddzielone przerwą w tekście (pustą linią).
Dzięki umieszczanu w kolejnych pagrafach treści nieco różniącej się tematycznie,
strona stanie się bardziej estetyczna oraz czytelniejsza.
Stosując paragrafy, możemy skorzystać z kilku metod wyrównywania tekstu na stronie
(czyli jego ustawienia):

Wyrównanie do lewej (domyślnie):
<P ALIGN="left">...</P>
lub
<P>...</P>
Wyrównanie do prawej:
<P ALIGN="right">...</P>
Wyśrodkowanie:
<P ALIGN="center">...</P>
Justowanie (wyrównanie do obu marginesów jednocześnie):
<P ALIGN="justify">...</P>



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

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 (ALIGN="justify")...




Przy okazji bardzo ważna uwaga o wyświetlaniu znaczników:



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


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.
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ę na stronie:
Polecenia 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ć 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 To jest zwykły tekst

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



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





TYTUŁ
<Hn>...</Hn>

(n = 1...6)

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:
<H1>...</H1>, a najniższym - szósty: <H6>...</H6>.
Tytuł wyższego rzędu jest pisany większą czcionką.

Przykład:
Tytuł pierwszego rzędu (H1)(w Internet Explorerze 32 piksele)
Tytuł drugiego rzędu (H2)(24 piksele)
Tytuł trzeciego rzędu (H3)(18 pikseli)
Tytuł czwartego rzędu (H4)(16 pikseli)
Tytuł piątego rzędu (H5)(12 pikseli)
Tytuł szóstego rzędu (H6)(10 pikseli)

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


wyrównanie do lewej (domyślnie):
<Hn ALIGN="left">...</Hn>
lub
<Hn>...</Hn>
wyrównanie do prawej:
<Hn ALIGN="right">...</Hn>
wyśrodkowanie:
<Hn ALIGN="center">...</Hn>
justowanie (wyrównanie do obu marginesów jednocześnie):
<Hn ALIGN="justify">...</Hn>



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

Przykład:
Tytuł czwartego rzędu wyrównany do lewej
Tytuł trzeciego rzędu wyrównany do prawej
Tytuł drugiego rzędu wyśrodkowany
A to z kolei jest tytuł pierwszego rzędu, który został wyjustowany




Dymek narzędziowy
Stosując polecenie: <Hn TITLE="Tu podaj opis">...</Hn>,
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: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, 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ć: &quot;

Przykład:

To jest tytuł rzędu drugiego, wskaż na niego myszką aby zobaczyć jego opis...




BLOK
<DIV>...</DIV>
wyświetlanie: w bloku

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

Wyrównanie do lewej (domyślnie):
<DIV ALIGN="left">...</DIV>
lub
<DIV>...</DIV>
Wyrównanie do prawej:
<DIV ALIGN="right">...</DIV>
Wyśrodkowanie:
<DIV ALIGN="center">...</DIV>
Justowanie (wyrównanie do obu marginesów jednocześnie):
<DIV ALIGN="justify">...</DIV>



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 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
<CENTER>...</CENTER>
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>
...a tu następna.



BLOKADA PRZEŁAMANIA WIERSZA
<NOBR>...</NOBR>

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


Polecenie <WBR> działa tylko wówczas, jeżeli tekst wpisany w ramach <NOBR>...</NOBR>
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.

Przykład:

Ten tekst jest wpisany w jednej linii i nigdy nie zostanie przełamany...
Ten tekst jest wpisany w jednej linii i nigdy nie zostanie przełamany...
Ten tekst jest wpisany w jednej linii i nigdy nie zostanie przełamany... <WBR>
ale jednak został przełamany. Lecz dalej nie może zostać przełamany... nie zostanie przełamany...
nie zostanie przełamany... nie zostanie przełamany... nie zostanie przełamany...



Taki sam efekt można uzyskać zamieniając w wybranym tekście wszystkie spacje na znaki:
&nbsp; [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
<B>...</B>
wyświetlanie: w linii

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

Przykład:
Ten tekst jest pogrubiony (wytłuszczony)




POCHYLENIE
<I>...</I>
wyświetlanie: w linii

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

Przykład:
Ten tekst jest napisany pismem pochylonym, czyli kursywą




PODKREŚLENIE
<U>...</U>
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 (interpretuje IE):


<SPAN style="color: red"><U><SPAN style="color: black">To jest czarne podkreślenie czerwoną linią</SPAN></U></SPAN>


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.

To jest czarne podkreślenie czerwoną linią




PRZEKREŚLENIE
<S>...</S>
lub
<STRIKE>...</STRIKE>
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


Stosując pewną "sztuczkę", można sprawić, aby kolor linii przekreślenia różnił się od koloru tekstu (interpretuje IE):


<SPAN style="color: red"><S><SPAN style="color: black">To jest czarne przekreślenie czerwoną linią</SPAN></S></SPAN>


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.

To jest czarne przekreślenie czerwoną linią




MIGOTANIE
(tylko Netscape!)
<BLINK>...</BLINK>

Wprowadza tekst migający. Niestety polecenie to interpretuje tylko Netscape!


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:
Ten tekst powinien być migający (tylko Netscape)



WYRÓŻNIENIE

Zwykłe (emfaza):
<EM>...</EM>
Mocne (mocna emfaza):
<STRONG>...</STRONG>

wyświetlanie: w linii

Pozwala wyróżnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie.
Pierwsze polecenie zwykle wyświetla tekst napisany kursywą,
natomiast drugie - pogrubiony.

Przykład:
To jest tekst wyróżniony
To jest tekst mocno wyróżniony




INDEKS

Indeks górny:
<SUP>...</SUP>
Indeks dolny:
<SUB>...</SUB>

wyświetlanie: w linii

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

Przykład:
indeksgórny
indeksdolny



CZCIONKA
<FONT>...</FONT>
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.
Są to:

Wielkość czcionki:

Wartość bezwzględna:
<FONT SIZE="n">...</FONT>

gdzie "n" oznacza wielkość pisma (1-najmniejsza, 7-największa, 3-domyślna)

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)
Wartość względna:
<FONT SIZE="+n">...</FONT>
lub
<FONT SIZE="-n">...</FONT>

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

Przykład:
Czcionka o rozmiarze 3 (domyślna)
Czcionka o rozmiarze +1 (3+1=4)
Czcionka o rozmiarze +2 (3+2=5)
Czcionka o rozmiarze +3 (3+3=6)
Czcionka o rozmiarze +4 (3+4=7) - największa możliwa
Czcionka o rozmiarze -1 (3-1=2)
Czcionka o rozmiarze -2 (3-2=1) - najmniejsza możliwa



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



Kolor tekstu:
<FONT COLOR="kolor">...</FONT>

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.

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:
<FONT FACE="rodzaj">...</FONT>
lub
<FONT FACE="rodzaj1, rodzaj2, rodzaj3...">...</FONT>

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
(w standardzie ISO). 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





CZCIONKA BAZOWA
<BASEFONT SIZE="rozmiar" COLOR="kolor" FACE="rodzaj">

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

Czcionka powiększona:
<BIG>...</BIG>
Czcionka pomniejszona:
<SMALL>...</SMALL>

wyświetlanie: w linii

Wprowadza tekst napisany powiększoną czcionką (BIG) lub pomniejszoną (SMALL).
Wpisując powyższe znaczniki (tego samego rodzaju) jednen wewnątrz drugiego (np.: <BIG><BIG>...</BIG></BIG>),
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
<PRE>...</PRE>
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 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: &lt; i &gt;).

Przykład:

Ten tekst jest preformatowny
dlatego możemy używać
tabulatora,
dodatkowych spacji
oraz znaków końca linii.




KOD KOMPUTEROWY
<CODE>...</CODE>
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:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var data = new Date();
document.write(data);
//-->
</SCRIPT>




ZMIENNA
<VAR>...</VAR>
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




DALEKOPIS
<TT>...</TT>
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
<SAMP>...</SAMP>
wyświetlanie: w linii

Pozwala wprowadzić do dokumentu tekst, będący czegoś przykładem.
Zwykle działa analogicznie jak CODE.

Przykład:
<SAMP>To jest przykład użycia znacznika SAMP</SAMP>




DEFINICJA
<DFN>...</DFN>
wyświetlanie: w linii

Wprowadza definicję jakiegoś terminu, która zwykle jest napisana kursywą.
(zobacz także: Słownik).

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




CYTAT
<CITE>...</CITE>
wyświetlanie: w linii

Wprowadza do dokumentu krótki cytat, który jest zwykle napisany kursywą.
Tekst taki nie powinien raczej ciągnąć się przez wiele linijek.
(zobacz także: Blok cytowany).

Przykład:
To jest krótki cytat




BLOK CYTOWANY
<BLOCKQUOTE>...</BLOCKQUOTE>
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).

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.




ADRES
<ADDRESS>...</ADDRESS>
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

Treść wstawiona:
<INS>opis</INS>
Treść usunięta:
<DEL>opis</DEL>


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 ;-)




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.


Zwykła (domyślnie):
<HR>
Przykład:



Pozbawiona cieniowania:
<HR NOSHADE>

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

Przykład:



O określonej grubości:
<HR SIZE="y">

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


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

Przykład:
SIZE="20"



O określonej długości:
<HR WIDTH="x">
lub
<HR WIDTH="x%">

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.

Przykład:
WIDTH="300"



O określonym kolorze (Internet Explorer):
<HR COLOR="kolor">

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


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

Przykład:
COLOR="red"



O określonym ustawieniu:
<HR ALIGN="rodzaj">

gdzie jako "rodzaj" należy wpisać:

"center" - wyśrodkowanie,
"left" - ustawienie po lewej
lub "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.

Przykład:
WIDTH="50%" ALIGN="center"


WIDTH="50%" ALIGN="left"


WIDTH="50%" ALIGN="right"







OBRAMOWANIE
<FIELDSET>...</FIELDSET>

Wprowadza obramowanie wokół wybranego fragmentu tekstu.


Prawdziwe zastosowanie znacznika FIELDSET,
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ę

Polecenie to często stosuje się wraz z: <LEGEND>...</LEGEND>,
co pozwala podać tytuł ramki:

Po wpisaniu:

<FIELDSET>
<LEGEND>opis</LEGEND>
Jakiś tekst
</FIELDSET>

otrzymamy:

opis
Jakiś tekst



UWAGA! Znacznik LEGEND (tytuł ramki) musi znajdować się bezpośrednio po
znaczniku otwierającym <FIELDSET>




WYKAZ
(lista wyliczeniowa)
wyświetlanie: w bloku


Wypunktowanie (podstawowy) - lista nieuporządkowana:

<UL>
<LI>Punkt pierwszy
<LI>Punkt drugi
<LI>Punkt trzeci
</UL>

Przykład:

Punkt pierwszy
Punkt drugi
Punkt trzeci



Wypunktowanie - różne typy:

<UL TYPE="rodzaj">
<LI>Punkt pierwszy
<LI>Punkt drugi
<LI>Punkt trzeci
</UL>


gdzie jako "rodzaj" należy podać:

"disc" (domyślny) - koło,
"circle" - okrąg
lub "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:

<OL>
<LI>Punkt pierwszy
<LI>Punkt drugi
<LI>Punkt trzeci
</OL>

Przykład:

Punkt pierwszy
Punkt drugi
Punkt trzeci


Wykaz numerowany - różne typy:

<OL TYPE="rodzaj numeracji">
<LI>Punkt pierwszy
<LI>Punkt drugi
<LI>Punkt trzeci
</OL>


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

"1" (domyślny) - numeracja według liczb arabskich,
"I" - według dużych liczb rzymskich,
"i" - według małych liczb rzymskich,
"a" - według małych liter
lub "A" - według dużych liter.



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

Przykład:
TYPE="1" (domyślny)
Punkt pierwszy
Punkt drugi
Punkt trzeci

TYPE="I"
Punkt pierwszy
Punkt drugi
Punkt trzeci

TYPE="i"
Punkt pierwszy
Punkt drugi
Punkt trzeci

TYPE="A"
Punkt pierwszy
Punkt drugi
Punkt trzeci

TYPE="a"
Punkt pierwszy
Punkt drugi
Punkt trzeci


Wykaz numerowany z podaniem początkowego numeru:

<OL START="n">
<LI>Punkt pierwszy
<LI>Punkt drugi
<LI>Punkt trzeci
</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.

Przykład:
TYPE="1" START="3"
Punkt pierwszy
Punkt drugi
Punkt trzeci

TYPE="A" START="3"
Punkt pierwszy
Punkt drugi
Punkt trzeci


Zmiana numerowania "w trakcie":

<OL>
<LI>Punkt pierwszy
<LI VALUE="n">Punkt drugi
<LI>Punkt trzeci
</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.


Przykład:
TYPE="1"
Punkt pierwszy
VALUE="3"
Punkt następny

TYPE="A"
Punkt pierwszy
VALUE="3"
Punkt następny





Edytory 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 (obsługuje Internet Explorer, Netscape 7 i Opera 7, ale nie Netscape 6 i Opera 6):


<UL>
<FONT COLOR="red">
<LI><FONT COLOR="black">Punkt pierwszy</FONT>
<LI><FONT COLOR="black">Punkt drugi</FONT>
<LI><FONT COLOR="black">Punkt trzeci</FONT>
</FONT>
</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>
<FONT COLOR="red"><LI><FONT COLOR="black">Punkt pierwszy</FONT></FONT>
<FONT COLOR="green"><LI><FONT COLOR="black">Punkt drugi</FONT></FONT>
<FONT COLOR="blue"><LI><FONT COLOR="black">Punkt trzeci</FONT></FONT>
</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. Nie jest to błąd, lecz 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> (który zresztą nie jest wcale wymagany).

Przykład:
Po wpisaniu:

<P ALIGN="center">
Tu rozpoczyna się paragraf...
<UL>
<LI>Punkt pierwszy wykazu
<LI>Punkt drugi wykazu...
</UL>
...tu powinien skończyć się paragraf.
</P>

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

Wypunktowanie (podstawowy):

<UL>
<LI>Punkt pierwszy
<UL>
<LI>Punkt 1.1
<UL>
<LI>Punkt 1.1.1
<LI>Punkt 1.1.2
</UL>
<LI>Punkt 1.2
</UL>
<LI>Punkt drugi
</UL>


Wykaz numerowany:

<OL>
<LI>Punkt pierwszy
<OL>
<LI>Punkt 1.1
<OL>
<LI>Punkt 1.1.1
<LI>Punkt 1.1.2
</OL>
<LI>Punkt 1.2
</OL>
<LI>Punkt drugi
</OL>


Wykaz mieszany - połączenie obu powyższych.





We wszystkich przypadkach kolorem czerwonym zaznaczono wykaz nadrzędny (główny),
żółtym - wykaz pierwszego stopnia zagnieżdżenia (podrzędny), natomiast
zielonym - 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 oraz OL
(większość edytorów HTML i tak robi to automatycznie), a dopiero potem
wpisywać do nich punkty LI - dzięki temu unikniemy błędnego wyświetlania, spowodowanego
zapomnieniem zamknięcia znacznika.

Przykład:
Wypunktowanie:
Punkt pierwszy

Punkt 1.1

Punkt 1.1.1
Punkt 1.1.2

Punkt 1.2

Punkt drugi



Numerowanie:
Punkt pierwszy

Punkt 1.1

Punkt 1.1.1
Punkt 1.1.2

Punkt 1.2

Punkt drugi



Wykaz mieszany :
Punkt pierwszy

Punkt I.1

Punkt I.1.a

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

Punkt I.1.b

Punkt I.2

Punkt drugi



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


<OL TYPE="I">
<LI>Punkt pierwszy
<OL TYPE="1">
<LI>Punkt I.1
<OL TYPE="a">
<LI>Punkt I.1.a
<UL TYPE="disc">
<LI>Punkt I.1.a.(1)
<LI>Punkt I.1.a.(2)
</UL>
<LI>Punkt I.1.b
</OL>
<LI>Punkt I.2
</OL>
<LI>Punkt drugi
</OL>





SŁOWNIK

<DL>
<DT>Pierwszy termin
<DD>Definicja pierwszego terminu
<DT>Drugi termin
<DD>Definicja drugiego terminu
</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ę bardzie czytelna. (zobacz także: Definicja).


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.


Edytory HTML posiadają często specjalny generator list definicyjnych, który może ułatwić pracę.

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.




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,
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ż pomimo, ż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>...
<!-- Ten komentarz jest niedozwolony -->
Ciąg dalszy...
</P>-->