HTML - fragmenty

Karol Wierzchołowski
HTML
czyli tworzenie stron
internetowych
Wydanie czwarte
Naucz się z nami tworzyć strony WWW w języku HTML
Komputerowa Oficyna Wydawnicza „HELP”
Redakcja: Piotr Gomoliński
© by Komputerowa Oficyna Wydawnicza „HELP”
Michałowice 2003, Kanie 2012
Ten kurs jest dla tych, którzy nie tylko chcą biernie czerpać informacje z sieci,
ale zapragnęli coś do niej dodać od siebie. Jest to kurs tworzenia własnych
stron internetowych. Napisanie własnej wizytówki nie jest trudne i jest w
zasięgu każdego. Nie potrzeba mieć w tym zakresie żadnego większego
doświadczenia, czy też posiadać znajomości dodatkowych języków. Nasza
nauka sprowadzi się do opanowania podstaw języka HTML. To wystarczy na
początek w zupełności do utworzenia własnych, prostych witryn WWW.
Później, jeśli zajdzie taka potrzeba, będziesz mógł sięgnąć po inne pozycje –
uzupełniające wiadomości o języku HTML, szerzej omawiające aspekty
arkuszy stylów CSS, czy też dotyczące podstaw języka JavaScript. Jeśli
będziesz chciał utworzyć rozbudowany serwis, spokojnie będziesz mógł
sięgnąć do literatury na temat języka PHP, czy też innych mu podobnych;
nauczyć się tworzenia animacji we Flashu, czy też korzystania z baz danych.
Jednak opanowanie języka HTML jest postawą, bo bez jego znajomości nie
można ruszyć ani kroku dalej. Ta książka ułatwi Ci postawienie tego
pierwszego kroku.
Kod HTML możesz pisać za pomocą dowolnego edytora. Zachęcamy jednak
do skorzystania z edytora EdHTML i jego następcy CoreEditor.
Materiał nie jest trudny, więc nie powinieneś mieć problemów z jego
opanowaniem. W książce umieściliśmy jak najwięcej rysunków, gdyż potrafią
one zastąpić całe strony tekstu i dużo łatwiej jest zrozumieć zagadnienie
oglądając je i porównując z kodem. W rozdziale zatytułowanym Zasady
webmastera umieściliśmy opis błędów najczęściej popełnianych przez
początkujących twórców stron WWW.
Wydawca:
Komputerowa Oficyna Wydawnicza „HELP”, Piotr Gomoliński
ul. Górna 3a, 05-805 Kanie (adres tylko do korespondencji)
tel./faks (0-22) 759 35 60, tel. awaryjne: 0-604 298 099, 0-602 633 452, 0-602 248 550
[email protected]
www.besthelp.pl
www.DlaDino.pl
Druk cyfrowy
ISBN 978-83-7603-056-2
Spis treści
1.
Wstęp
7
2.
Podstawy
9
2.1.
2.2.
2.3.
2.4.
HTML .............................................................................................. 9
Znaczniki .......................................................................................... 9
Szablon strony ................................................................................ 11
Pierwsza strona WWW .................................................................. 12
2.4.1. Analiza pierwszej strony ................................................ 13
2.5.
2.6.
2.7.
2.8.
Nowa linia i odstępy ...................................................................... 15
Znaki specjalne .............................................................................. 18
Proste formatowanie tekstu ............................................................ 19
Argumenty znaczników ................................................................. 23
2.8.1. Pozioma linia ................................................................. 24
2.9. Nagłówki ........................................................................................ 28
2.10. Czcionka....................................................................................... 31
3.
EdHTML (CoreEditor)
33
3.1. Instalacja i konfiguracja ................................................................. 33
3.2. Obsługa programu .......................................................................... 34
3.2.1.
3.2.2.
3.2.3.
3.2.4.
Podgląd dokumentu ....................................................... 38
Znaczniki ....................................................................... 40
Inspektor Tagów ............................................................ 42
System pomocy .............................................................. 43
3.3. Szybkie wstawianie ........................................................................ 45
3.4. Sekcje HEAD i BODY .................................................................. 46
3.4.1. Sekcja HEAD ................................................................. 46
3.4.2. Polskie znaki .................................................................. 48
3.4.3. Sekcja BODY ................................................................ 51
3.5. Formatowanie tekstu ...................................................................... 54
3.5.1. Kreator tworzenia stron WWW ..................................... 54
3
3.5.2. Proste formatowanie ...................................................... 55
3.5.3. Podgląd dynamiczny ...................................................... 56
3.5.4. Ustawienia czcionki ....................................................... 57
3.6. EdHTML to znacznie więcej ......................................................... 58
4.
Listy
4.1.
4.2.
4.3.
4.4.
5.
6.
Listy punktowane ........................................................................... 59
Listy numerowane .......................................................................... 62
Listy definicji ................................................................................. 63
Automatyczne tworzenie list .......................................................... 64
Hiperłącza
5.1.
5.2.
5.3.
5.4.
5.5.
59
65
Odnośniki do stron zewnętrznych .................................................. 65
Odnośniki do własnych dokumentów ............................................ 69
Odnośniki lokalne .......................................................................... 72
Odsyłanie do poczty elektronicznej ............................................... 74
Odsyłacze w programie EdHTML ................................................. 76
Rysunki i mapy
77
6.1. Znacznik IMG ................................................................................ 77
6.1.1. Ścieżki względne i bezwzględne ................................... 77
6.1.2. Strona z grafiką .............................................................. 78
6.2. Okno Wstaw rysunek ..................................................................... 84
6.3. Rysunki jako odnośniki .................................................................. 85
6.4. Mapy rysunków.............................................................................. 86
7.
Tabele
93
7.1. Proste tabele ................................................................................... 93
7.2. Łączenie wierszy i kolumn ............................................................ 99
8.
Ramki
103
8.1. Ramki ........................................................................................... 103
8.2. Ramki pływające .......................................................................... 112
8.3. Uwagi ........................................................................................... 115
4
HTML
9.
Zasady webmastera
117
9.1. Nazwy i ścieżki do plików ........................................................... 117
9.1.1. Nazwy plików .............................................................. 117
9.1.2. Ścieżki do plików......................................................... 118
9.2. Czcionki ....................................................................................... 119
9.3. Kolory .......................................................................................... 119
9.3.1. Kolory bezpieczne ....................................................... 120
9.3.2. Estetyka ........................................................................ 121
9.4. Rysunki ........................................................................................ 121
10.
Publikacja strony WWW
123
10.1. Serwer WWW ............................................................................ 123
10.1.1. Zakładamy konto WWW ........................................... 124
10.2. Zanim wyślemy pliki ................................................................. 125
10.3. Wysyłanie plików ...................................................................... 125
10.4. Testowanie strony ...................................................................... 126
11.
Zakończenie
Skorowidz
HTML
127
128
5
6
HTML
1. Wstęp
Internet rozwija się z niebywałą prędkością. Z dnia na dzień przybywa w sieci
tysiące nowych witryn internetowych. W dzisiejszych czasach każdy może
mieć również własną stronę, na której może publikować niemalże dowolne
informacje i to zupełnie za darmo. Internet to prawdziwa kopalnia wiedzy, z
której można się dowiedzieć czegoś na prawie każdy temat. To nowe medium
przyciąga nie tylko użytkowników domowych, ale również różne firmy,
korporacje i instytucje. Poprzez sieć można rozmawiać ze znajomymi
znajdującymi się na drugim końcu globu, dokonywać zakupów, brać udział w
różnych aukcjach i konkursach. Sieć pozwala na sprawdzenie swojego konta w
banku, dokonanie bezpiecznego i błyskawicznego przelewu, dostęp do
najświeższych informacji, zapewnia też miejsce dla rozrywki i zabawy.
Książka, którą trzymasz w rękach, przeznaczona jest dla tych wszystkich,
którzy potrafią posługiwać się przeglądarką internetową, czy też programem
pocztowym. Nie jest to więc wprowadzenie do zagadnień związanych z
obsługą Internetu. To raczej poradnik dla tych, którzy nie tylko chcą biernie
czerpać informacje z sieci, ale zapragnęli coś dodać od siebie. Czy to chcąc
wypromować swoją osobę, czy firmę lub po prostu zaoferować innym dostęp
do pewnych informacji. Podzielić się własną wiedzą i doświadczeniem. Jest to
po prostu kurs tworzenia własnych stron internetowych.
Napisanie własnej wizytówki nie jest trudne i jest w zasięgu każdego. Nie
potrzeba mieć w tym zakresie żadnego większego doświadczenia, czy też
znajomości żadnych dodatkowych języków. Niemniej projektowanie serwisów
internetowych stało się pewną sztuką. Obecnie nie korzysta się już tylko z
języka HTML (jak było to kiedyś), ale przy pisaniu serwisu wykorzystuje się
tzw. style CSS, różne dodatkowe języki, np. JavaScript, PHP, ASP, Perla, bazy
danych (np. MySQL). Często korzysta się także z kontrolek ActivX pisanych
w jeszcze innych językach, czy też apletów Javy. Niektóre strony pisane są w
całości we Flashu! Jak więc sam widzisz, chcąc poznać te wszystkie aspekty i
podejścia do tworzenia własnych stron, należałoby posiąść ogromną wiedzę.
Na pewno nie zmieściłaby się ona w tym jednym podręczniku. Ale nie jest ona
również potrzebna! Szczególnie na początku.
Nasza nauka sprowadzi się do opanowania podstaw języka HTML. To na
początek wystarczy w zupełności do utworzenia własnych, prostych witryn
WWW. Później, jeśli zajdzie taka potrzeba, będziesz mógł sięgnąć po inne
pozycje – uzupełniające wiadomości o języku HTML, omawiające szerzej
7
aspekty arkuszy stylów CSS, czy też omawiające podstawy języka JavaScript.
Jeśli będziesz chciał utworzyć rozbudowany serwis, spokojnie będziesz mógł
sięgnąć do literatury na temat języka PHP, czy też innych mu podobnych.
Nauczyć się tworzenia animacji we Flashu, czy też korzystania z baz danych.
Jednak opanowanie języka HTML jest postawą. Bez tej znajomości nie można
ruszyć ani kroku dalej. Ta książka ułatwi Ci postawienie tego pierwszego
kroku.
Materiał nie jest trudny, więc nie powinieneś mieć problemów z jego
opanowaniem. W książce starałem się umieścić jak najwięcej rysunków, gdyż
potrafią one zastąpić całe strony tekstu i dużo łatwiej jest zrozumieć
zagadnienie oglądając je i porównując z kodem. W przedostatnim rozdziale
zatytułowanym Zasady webmastera umieściłem opis najczęściej popełnianych
błędów przez początkujących twórców stron WWW. Niektóre z tematów się
wówczas powtarzają, jednak z uwagi na ich priorytet i częste błędy,
postanowiłem je powtórzyć.
Życząc wspaniałej zabawy, zapraszam do wspólnej nauki!
8
HTML
2. Podstawy
W tym rozdziale dowiemy się, czym jest język HTML i na czym polega
filozofia pisania własnych stron WWW. Poznamy strukturę każdego pliku
HTML oraz elementy z jakich się on składa. Są to wiadomości fundamentalne,
których opanowanie jest niezbędne, aby móc kontynuować naukę tego języka.
2.1.
HTML
HTML to skrót od HyperText Markup Language, czyli język znaczników
hipertekstowych. Przy jego pomocy pisze się tzw. strony internetowe, czyli
dokumenty, które następnie można przeglądać i czytać za pomocą tzw.
przeglądarki internetowej. Przeglądarka internetowa to program, który zna
język HTML (i nie tylko ten), a tym samym potrafi odpowiednio interpretować
jego słowa.
Język HTML jest prosty w nauce. Składa się z niewielkiej ilości słów (tzw.
znaczników, tagów), za pomocą których można dowolnie manipulować
tekstem i grafiką na stronie. Nie ma potrzeby uczyć się tych słów na pamięć. W
trakcie czytania tej książki, wpisywania kolejnych przykładowych fragmentów,
spostrzeżesz, że nowe polecenia same utkwiły Ci w pamięci.
2.2.
Znaczniki
Język HTML składa się z tzw. znaczników (tagów). Każdy znacznik języka ma
specyficzne i określone znaczenie. Przeglądarka internetowa po napotkaniu
takiego obiektu odpowiednio go interpretuje.
Wszystkie znaczniki objęte są nawiasami trójkątnymi. Oto jak one wyglądają:
 <html> – znacznik dokumentu HTML
 <head> – znacznik nagłówka dokumentu
 <body> – znacznik ciała dokumentu
 <b> – znacznik pogrubienia tekstu
 <p> – znacznik nowego akapitu
 <a> – znacznik hiperłącza
9
 <br> – znacznik przejścia do nowej linii
 itd.
Większość znaczników otwiera się i zamyka, a więc jakby obejmują one jakąś
partię tekstu. Zamknięcie znacznika polega na umieszczeniu przed jego nazwą
(ale po otwierającym nawiasie trójkątnym) slasha. Oto przykład:
 </html> – znacznik zamykający dokument HTML
 </head> – znacznik zamykający nagłówek dokumentu
 </body> – znacznik zamykający ciało dokumentu
 </b> – znacznik kończący blok pogrubionego tekstu
 </p> -–znacznik kończący akapit
 itp.
Np.:
<b>Ten tekst będzie pogrubiony.</b> Ten już nie.
Jednak nie wszystkie znaczniki się zamyka (np. znacznik <br>), a niektóre
można zamykać, ale nie trzeba (np. <p>).
Znaczniki można w sobie zagnieżdżać, tzn. tekst objęty jedną parą znaczników
(otwierającym i zamykającym) objąć jeszcze inną parą lub w jego wnętrzu
wykorzystać znaczniki, których się nie zamyka. Oto przykład:
<b>To jest pogrubione, <u>a to jest jeszcze
podkreślone</u></b>
lub
<p>Pierwsza linia <br>Druga linia</p>
10
HTML
2.3.
Szablon strony
Każda strona napisana w języku HTML posiada pewien szablon. Oto jego
najprostsza forma:
<html>
<head>
... nagłówek ...
</head>
<body>
... ciało ...
</body>
</html>
Widzimy, że cały dokument HTML jest objęty znacznikami <html> i
</html>. Składa się on z dwóch części. Części nagłówkowej (umieszczonej
pomiędzy <head> i </head>) i z części głównej dokumentu (tzw. ciała),
czyli <body>…</body>.
W części nagłówkowej umieszcza się informacje, które nie są wyświetlane w
treści strony. Znajdują się tam takie dane jak: tytuł witryny, autor, krótki opis
wyświetlany przez wyszukiwarki, słowa kluczowe, na które zwracają uwagę
wyszukiwarki podczas poszukiwań itp. W części głównej strony (w jej ciele)
umieszcza się natomiast treść właściwą dokumentu, a więc tę, która
wyświetlana jest przez przeglądarkę.
W języku HTML nie ma znaczenia czy znacznik napisany jest
małymi literami, czy też wielkimi. Dlatego możesz wpisywać w
taki sposób, w jaki Ci wygodniej. Może to więc być znacznik
<html>, <HTML>, a nawet <Html>. Polecam jednak pisanie
znaczników tylko małymi literami.
HTML
11
2.4.
Pierwsza strona WWW
Utwórzmy teraz pierwszą stronę internetową. W tym celu uruchom systemowy
Notatnik i wpisz do niego następującą treść:
<html>
<head>
<title>Pierwsza strona WWW</title>
</head>
<body>
To jest nasza pierwsza strona internetowa.
</body>
</html>
Zapisz plik pod nazwą index.htm i kliknij na nim dwukrotnie lewym
przyciskiem myszy. Kiedy tego dokonasz uruchomi się domyślna przeglądarka
internetowa (np. Internet Explorer), która wyświetli stronę, jaką przed chwilą
napisaliśmy.
Rysunek 2.1. Pierwsza strona WWW
12
HTML
2.4.1. Analiza pierwszej strony
Treść strony internetowej jest zwykłym tekstem, dlatego do jej napisania nie
potrzebujemy żadnych dodatkowych narzędzi. By tworzyć własne witryny
wystarczy systemowy Notatnik, czy też dowolny inny edytor ASCII.
Oczywiście istnieją specjalne programy, które ten proces znacznie ułatwiają i
w przyszłości do nich również sięgniemy. Jednak w tym momencie, poznając
fundamentalne podstawy języka, będziemy posługiwać się Notatnikiem, aby
być bliżej języka i dokładniej go zrozumieć.
Pliki ze stronami internetowymi zapisujemy z rozszerzeniem htm lub html.
Plik główny (pierwszy) nazywamy zazwyczaj index, a więc pełna jego
nazwa to index.htm lub index.html. Tak też nazwaliśmy plik
naszej witryny.
Kiedy wpisujesz adres jakiejś strony internetowej w swojej
przeglądarce, zazwyczaj nie podajesz pliku, który chcesz z
danej witryny wyświetlić.
Przykładowo: http://www.binboy.org/. W takich
przypadkach serwer, na którym umieszczona jest dana strona
poszukuje plików o nazwie index.htm, index.html itd.
(co jest zależne od konfiguracji). Dlatego na Twojej stronie,
dokument główny również powinien mieć taką nazwę. Dzięki
temu, jak w przyszłości wyślemy go na zdalny serwer, nie
będzie problemu z wyświetlaniem dokumentu.
Wszystkie strony internetowe, jakie utworzymy, zapisujemy u siebie na dysku.
Jednak w przyszłości będziemy je wysyłali na zdalny serwer w Internecie.
Ponieważ większość serwerów pracuje pod systemami Unix, dla których
wielkość liter w nazwach plików ma duże znaczenie, musimy konsekwentnie
używać jednego stylu nazywania zbiorów. Najlepszym sposobem jest
nazywanie plików za pomocą samych małych liter (i bez specyficznych
polskich znaków tj. ą, ę, ś itd.).
Kiedy mamy już utworzony plik (jak w przykładzie powyżej) i nakazujemy
przeglądarce, aby go wyświetliła, następuje odpowiednie przetworzenie
wskazanego dokumentu. Przeglądarka internetowa analizuje plik od lewej
strony do prawej i od góry do dołu. Dlatego nie ma dla niej znaczenia, czy cała
strona umieszczona będzie w jednej linijce, czy też każde słowo będzie w
kolejnej linii.
HTML
13
Podczas analizy przeglądarka „wyłapuje” każdy znacznik (tzn. blok pomiędzy
nawiasami trójkątnymi) i nie wyświetla go na stronie. Zamiast tego sprawdza,
jakie dany znacznik ma znaczenie i odpowiednio konfiguruje sposób
wyświetlania danych. Przykładowo, po napotkaniu znacznika <b> nie
wyświetla go na stronie, tylko zapamiętuje, że cały tekst, który dalej nastąpi,
ma być pogrubiony. Następnie w dokumencie znajdzie się zapewne ten tekst i
w taki też sposób zostanie on pokazany. Po nim przeglądarka odnajdzie
znacznik </b>, czyli znacznik zamykający. W tym momencie wyłączy
pogrubienie, które wcześniej zostało ustawione.
Przeanalizujmy teraz dokładnie naszą pierwszą witrynę. Przeglądarka
odnajdzie w niej znacznik <html>, co jej komunikuje, że właśnie rozpoczął
się dokument napisany w języku HTML. Kolejny znacznik to <head>.
Przeglądarka wie już, że zaczyna się blok nagłówkowy dokumentu. Odnajduje
znacznik <title>. Oznacza on, że od tego momentu w dokumencie będzie
zapisany tytuł strony. Dlatego zapamiętuje go (nie wyświetlając) aż napotka
koniec tytułu, czyli znacznik </title>. Wówczas zna cały tytuł i
wyświetla go w pasku tytułowym programu (porównaj z Rysunek 2.1.).
Następnie przetwarza plik dalej. Odnajduje znacznik </head>, a zatem blok
nagłówkowy się skończył. Teraz występuje znacznik <body>, czyli
rozpoczyna się ciało główne dokumentu, a więc tekst, który ma zostać
wyświetlony. Tak też się staje. Na koniec odnajduje znacznik </body>,
czyli koniec ciała i </html> koniec dokumentu HTML.
Ponieważ każdy dokument HTML ma tę samą składnię i szablon, to
prawie zawsze po znaczniku </head> występuje znacznik <body>.
Dlatego użycie tego pierwszego nie jest konieczne. Kiedy
przeglądarka analizując nagłówek napotka znacznik <body>
„domyśli się”, że rozpoczyna się ciało dokumentu, a zatem jest to
koniec nagłówka. Podobnie jest z innymi znacznikami, np. <li> służący do wypunktowania. Jego także nie trzeba zamykać. Jednak
aby nasze pierwsze strony były dla nas bardziej czytelne, będziemy
zamykać wszystkie znaczniki wymagające lub dopuszczające
zamykanie.
14
HTML
2.5.
Nowa linia i odstępy
Utwórz taki dokument i wyświetl go w przeglądarce:
<html>
<head>
<title>Nowa linia</title>
</head>
<body>
To
jest
przykładowy
tekst,
który
będzie
wyświetlony
na
stronie.
</body>
</html>
Rysunek 2.2. Nowa linia
Celowo w dokumencie umieściliśmy wiele spacji pomiędzy wyrazami i
rozbiliśmy go na kilka linii. W przeglądarce wygląda jednak zupełnie inaczej.
Jakby tych spacji i tych przejść do nowej linii w ogóle nie było, prawda? Tak
HTML
15
będzie zawsze, gdyż domyślnie przeglądarka jest w takim trybie, w którym
wielokrotne spacje i przejścia do nowych linii są ignorowane. Więc jak sobie
poradzić? Wystarczy użyć znacznika <br>, który tworzy przejście do nowej
linii (tego znacznika nie zamykamy) i specjalnej sekwencji &nbsp; która
tworzy tzw. twardą spację. Oto przykład:
<html>
<head>
<title>Nowa linia 2</title>
</head>
<body>
To jest &nbsp;&nbsp;&nbsp; przykładowy<br>tekst.
</body>
</html>
Język HTML posiada znacznik <pre>…</pre>. Tekst, który
zostanie nim objęty będzie wyświetlony czcionką o stałej
szerokości znaków i będą w nim interpretowane wszystkie
zwykłe spacje i przejścia do nowej linii. Sprawdź to samemu
obejmując tekst z przykładu poprzedniego owymi znacznikami.
Tym razem, pomimo iż cały tekst umieściliśmy w jednej linii, na stronie wyraz
„tekst” jest w wierszu następnym. To dlatego, gdyż przed tym wyrazem
umieściliśmy znacznik <br> co oznacza przejście do nowej linii (tego
znacznika nie zamykamy). Pomiędzy wyrazami „jest” i „przykładowy”
znajduje się więcej spacji. To z kolei zasługa twardej spacji.
Bardzo często korzysta się ze znacznika <p>. Jest to tzw. akapit (paragraf).
Kolejne partie tekstu objęte tymi znacznikami oddzielane są od siebie
dodatkową linią pustą. Spójrz na przykład:
<html>
<head>
<title>Akapit</title>
</head>
<body>
16
HTML
<p>To jest pierwszy akapit. Cały ten tekst jest
stosunkowo długi, dlatego zostanie zawinięty przez
przeglądarkę i tym samym cały będzie widoczny.
Będzie
jednak umieszczony w kilku liniach (zależnie od
szerokości okna przeglądarki).</p>
<p>A to jest już drugi akapit. Można zauważyć, że
w stosunku do poprzedniego, oddzielony jest od
niego
dodatkowym odstępem. To właśnie charakteryzuje
poznany znacznik.</p>
</body>
</html>
Rysunek 2.3. Nowy akapit
HTML
17
2.6.
Znaki specjalne
Ponieważ każdy znacznik objęty jest nawiasami trójkątnymi, mógłbyś zadać
pytanie – w jaki sposób wyświetlić na stronie sam taki znak? Przykładowo,
chcielibyśmy wyświetlić na naszej stronie zadanie matematyczne postaci:
x+2<5. Jak tego dokonać? Zapis:
<p>
x+2<5
</p>
Nie jest poprawny. Interpreter języka HTML (przeglądarka) po napotkaniu
znaku mniejszości w tej nierówności, może potraktować go jako początek
nowego znacznika HTML i przez to nie wyświetli na stronie liczby 5.
Podobnie ma się sprawa w przypadku jeszcze wielu innych znaków, których
nie wolno wyświetlać w tradycyjny sposób. Z tego też względu wprowadzono
w języku HTML sekwencje specjalne, wstawiające specyficzne znaki. Jedną
taką sekwencję już poznaliśmy, mianowicie twardą spację. W tabeli poniżej
znajduje się wykaz najczęściej wykorzystywanych sekwencji.
Tabela 2.1. Znaki specjalne
Znak
Kod HTML
Opis
&nbsp;
twarda spacja
&
&amp;
ampersand
<
&lt;
mniejsze niż
>
&gt;
większe niż
©
&copy;
symbol praw autorskich
"
&quot;
cudzysłów
£
&pound;
funt szterling
§
&sect;
paragraf
®
&reg;
zarejestrowany znak towarowy
º
&deg;
stopień
±
&plusmn; plus/minus
²
&sup2;
18
dwójka w indeksie
HTML
³
&sup3;
trójka w indeksie
·
&middot; kropka w środku wiersza
½
&frac12; ułamek 1/2
¼
&frac14; ułamek 1/4
¾
&frac34; Ułamek ¾
β
&beta;
Beta
Zgodnie z powyższą tabelą, nierówność z przykładu poprzedniego powinniśmy
zapisać:
<p>
x+2 &lt; 5
</p>
Jak widzimy, każda sekwencja specjalna rozpoczyna się znakiem & i kończy
średnikiem. Oto kolejny przykład:
<p>(2&sup2; + &frac12;)&sup3; &middot; &beta; &lt;
&plusmn; 3&sup3;</p>
Powyższy kod wyświetli napis:
(2² + ½)³ · β < ± 3³
2.7.
Proste formatowanie tekstu
Za pośrednictwem stron internetowych można prezentować zarówno grafikę
jak i muzykę. Jednak głównym celem jest przekazanie pewnych treści – tekstu.
Stąd też szczególnie rozbudowane w języku HTML zostały znaczniki
umożliwiające formatowanie napisów.
Niezwykle często wykorzystywanymi znacznikami są:
 <b> – pogrubienie
 <u> – podkreślenie
 <i> – pochylenie
 <strike> – przekreślenie
HTML
19
 <sup> – indeks górny
 <sub> – indeks dolny
 <big> – czcionka powiększona
 <small> – czcionka pomniejszona
Każdy z tych znaczników rozpoczyna blok formatowany w dany sposób, a jego
zamknięcie taki blok kończy. Oczywiście można zagnieżdżać znaczniki, a więc
w pewnym bloku objętym jednym znacznikiem użyć innego. Znaczników
<small> i <big> można użyć także kilkukrotnie, aby dany fragment
jeszcze bardziej zmniejszyć lub zwiększyć. Oto przykład:
<html>
<head>
<title>Wiersz</title>
</head>
<body>
<big><b>Słowo</b></big> <br><br>
Słowo tworzy słowo.<br>
<b>Czyż nie słowo tworzy wiedzę?</b><br>
<u>Może wiedza tworzy słowo?</u><br>
<i>Czyż nie wiedza tworzy wiedzę?</i><br><br>
<b>Czym <u>jest słowo bez</b> tej
wiedzy?</u><br>
<i>Czym <strike>jest <u>wiedza</strike> bez
tych</i> słów?</u><br>
...<br>
&nbsp;&nbsp;&nbsp;<i>Karol W.</i>
</body>
</html>
20
HTML