|
HTML - Podstawy
PODSTAWY
W
tym kursie omawiać będę tworzenie stron WWW za pomocą dowolnego
edytora tekstów.
Nie będe się zajmował programami tworzącymi
takie strony.
Do tworzenia stron wystarczy edytor tekstów,
program graficzny zapisujący
w formatach GIF i JPG (polecam Paint
Shop Pro), no i oczywiście jakaś przeglądarka WWW (LYNX odpada).
Strona
WWW jest zwykłym plikiem tekstowym. Ale pod przeglądarką WWW wygląda
na zupełnie co innego.
Działa to tak: w tym pliku oprócz tego,
co widzi oglądający stronę jest jeszcze kupa poleceń dla
przeglądarki
WWW. Polecenia te są ograniczone znakami < i >. Ponieważ odnosi
się to do każdego
polecenia, dam sobie spokój z wypisywaniem
tych znaczków za każdym razem. Zamiast <BODY> będe więc
pisał
BODY, itd. Duża część poleceń odnosi się tylko do fragmentu
strony. Na przykład
komenda B, która pogrubia tekst:
Tekst zwykły
<B>
tekst pogrubiony
</B>
tekst zwykły
Jak
widać na powyższym przykładzie, komenda B została zakończona
przez komendę </B>.
Tak jest ze wszystkimi komendami.
Teraz
jeszcze kilka słów wyjaśnienia do przykładów. Zwykle polecenia
objęte znakami < i > nie są
widozne. W przykładach znak < zastąpiłem
ciągiem znaków & lt;, powodujących tylko jego wyświetlenie.
No
i chyba ostatnia sprawa: pliki zawierające strony powinny mieć
rozszerzenie .htm lub .html, należy też pamiętać,
że większość
serwerów rozróżnia małe i duże litery w nazwach plików, więc
INDEX.HTM, Index.htm i index.htm to 3 różne
pliki.
NAJWAŻNIEJSZE POLECENIA
Niewątpliwie
najważniejszym poleceniem jest polecenie HTML. Musi ono rozpoczynać
każdy dokument,
i musi być zamknięte jako ostatnie. Następną
co do ważności jest komenda BODY. Po zamknięciu BODY
można już
tylko zamknąć polecenie HTML. Cały tekst objęty komendą BODY
z wyjątkiem innych komend
zostanie wyświetlony. To wystarczy już
do napisania najprostszej strony WWW:
<HTML>
<HEAD>
<!--
Tekst objęty znacznikami
<!--
i --> to komentarz
Tutaj ustawia się pare
ważnych rzeczy - zobacz
sekcję Nagłówek
tego kursu
-->
</HEAD>
<BODY>
Moja pierwsza strona
</BODY>
</HTML>
Większość
komend można wywoływać z parametrami. Tak jest np. przy ustawianiu
koloru tła dla strony:
<BODY BGCOLOR=RED>
Kolory
można określać na dwa sposoby:
wpisując nazwę kolorupodając
jego numer
Pierwszy sposób jest zdecydowanie łatwiejszy. Możesz
obejrzeć tabelę zawierającą próbki kolorów
mających
nazwy, ale na razie omówię jeszcze drugi sposób. Wygląda to na
przykład tak:
<BODY
BGCOLOR=#12A24B>
Kolejne
dwucyfrowe liczby tego numeru w systemie szesnastkowym oznaczają
ilość składnika czerwonego,
zielonego i niebieskiego. W ten sposób
trudniej jest ustawić kolor, ale można ich uzyskać znacznie
więcej.
Polecenie
BODY ma wiele parametrów. Poznany wcześniej BGCOLOR zmienia kolor
tła. TEXT zmienia
kolor liter, LINK zmienia kolor odnośników,
VLINK zmienia kolor odnośników które były już odwiedzane.
Parametry
LINK i VLINK mają domyślnie wartości:
LNIK=BLUE
VLINK=PURPLE
Parametr
BACKGROUND pozwala ustawić obrazek jako tło, np.:
<BODY
BACKGROUND=TŁO.GIF>
Obrazek musi
być w formacie GIF lub JPG. Należy zwrócić uwagę na wielkość
liter - windows nie
jest na nią wrażliwy, ale w systemie UNIX
(system operacyjny pod którym pracuje większość serwerów internetowych)
Obrazek.gif
i obrazek.gif to dwa różne pliki.
Obrazek
który ma być użyty jako tło nie może mieć wielu kolorów (tekst
będzie nieczytelny).
Ciekawy efekt daje użycie długiego (koło
1700 pixeli długości) i niewysokiego paska, na przykład
takiego
jak na moich stronach. Ponieważ jest on bezustannie powtarzany,
wygląda jakby był tu wysoki
pionowy pasek po lewej stronie.
CO MOŻNA ZROBIĆ Z TEKSTEM
Gdyby
tekst był pisany cały czas taką samą czcionką, nie byłobo szans
na napisanie przejrzystej strony
dłuższej niż 10 linijek. Jest
więc wiele komend wpływających na wygląd tekstu. Oto one:
- B
- pogrubia tekst
- I - pochyla tekst
- U - podkreśla
tekst
- STRIKE -
przekreśla tekst
- BIG -
powiększa tekst
- SMALL - pomniejsza
tekst
- SUB - tekst pisany niżej
- SUP - tekst
pisany wyżej
Teraz
trochę o wielkości tekstu. Do jej ustawiania można użyć komend
H1, H2, H3, H4, H5, H6.
Ich działanie widać poniżej:
H1
H2
H3
H4
H5
H6
Zdecydowanie
lepiej jest jednak użyć do tego celu komendy FONT. Pozwala ona
na zmianę koloru, wielkości
i czcionki jaką tekst jest pisany.
Do zmiany koloru służy parametr COLR. Parametr SIZE określa
wielkość
czcionki. Parametr FACE pozwala wybrać czcionkę. Można podać
w nim kilka nazw czcionek
oddzielonych przecinkami - zostanie wtedy
użyta pierwsza z nich, która zostanie znaleziona na
komputerze
oglądającego stronę. Przykład:
<FONT
SIZE=5 COLOR=RED>
będzie wyglądał tak
Tekst
we wszystkich przeglądarkach jest domyślnie wyrównany do lewej.
Jednak może być też
wyrównany do prawej lub wyśrodkowany.
Do
uzyskania tych efektów używana jest komenda DIV z parametrem ALIGN.
Może on mieć 3
wartości:
LEFT - tekst wyrównany do lewej
RIGHT
- tekst wyrównany do prawej
CENTER - tekst wyśrodkownay
Nietrudno
zauważyć, że znaki końca lini w pliku .htm są przez przeglądarkę
ignorowane. W każdej
lini wyświetlane jest tyle tekstu ile się
zmieści. Jeżeli jednak zechcemy koniecznie zacząć
coś od nowej
lini, lub uzyskać odstęp między dwoma fragmentami tekstu, trzeba
użyć komendy BR.
Nie ma ona żadnych parametrów. Po prostu kończy
linię i przechodzi do następnej.
ODNOŚNIKI
WWW
nie było by tym czym jest bez odnośników. Trzeba więc wiedzieć,
jak umieszczać je w swoich
stronach. Służy do tego komenda A
z parametrem HREF. Zawiera on adres strony, do której ma
odsyłać,
np.:
<A HREF=strona.htm>Tekst odnośnika</A>
Po
kliknięciu napisu Tekst odnośnika zostanie załadowany dokument
o nazwie strona.htm.
Parametr HREF może też zawierać pełny
adres strony, lub lokalizację strony względem strony bieżącej,
np.:
<A
HREF=www.nic.pl/strona.htm>
<A HREF=katalog/strona.htm>
Odnośniki
mogą też przenosić między różnymi miejscami na tej samej stronie.
Jest to trochę bardziej
skomplikowane. Najpierw poleceniem A z
parametrem NAME należy oznaczyć miejsce, do którego
ma przenosić
taki odnośnik, np.:
<A NAME=nazwa>
Aby teraz
stworzyć odnośnik przenoszący do tego miejsca trzeba wpisać:
<A
HREF=#nazwa>
gdzie nazwa to nazwa miejsca podana w parametrze
NAME.
Te dwie funkcje odnośników
można też połączyć, tworząc odnośnik przenoszący do wybranego
miejsca
innej strony. Wygląda to tak:
<A HREF=strona.htm#miejsce>
Oczywiście
w pliku strona.htm musi do tego zostać zdefiniowany punkt o nazwie
miejsce.
OBRAZKI
Jak
powszechnie wiadomo do stron WWW można wstawiać obrazki. Używa
się do tego polecenia
IMG. Ma ono obowiązkowy parametr SRC zawierający
nazwę lub adres i nazwę obrazka (koniecznie
w formacie GIF lub
JPG) który ma zostać umieszczony w stronie.
Obrazki nie mogą
być zbyt duże, ze względu na małą szybkość modemów.
Obrazki
w formacie GIF mogą mieć przeźroczyste tło. W formacie GIF można
też zapisać animację. Służą do tego osobne programy takie jak
Gif
Construction Set (gifcon), lub Animation Shop
Oczywiście
na położenie obrazków wpływa komenda DIV. Położenie tekstu
względem obrazka ustawia
się parametrem ALIGN. Może on mieć
następujące wartości: left, right, top, center, bottom, middle.
Może
się zdarzyć, że obrazek ma inną wielkość niż potrzeba na stronie.
Wtedy używa się
parametrów HEIGHT i WIDTH, w których podaje
się żądaną wysokość i szerokość w pikselach lub
procentach
wielkości okna.
TABELE
Często
używanym elementem języka HTML są tabele. Używa się ich nie
tylko do tworzenia tabel
jako takich, ale także do układania
elementów strony.
Każda tabela
jest rozpoczynana poleceniem TABLE. Ma ono ważny parametr BORDER
określający
grubość ramki tej tabeli. Jeżeli parametrowi BORDER
nie zostanie nadana wartość, tabela nie ma ramek.
Gdy
już rozpocznie się tabelę można używać poleceń TD i TR.
Pierwsze
z nich przechodzi do następnej komórki, drugie do następnego wiersza
komórek. Przykład:
<TABLE
BORDER=5>
<TD>pierwsza
komórka<TD>druga komórka<td>trzecia komórka
<TR><TD>A
to już następny wiersz<TD>komórka po prawej jest pusta --->
</TABLE>
A
tak to wygląda w praktyce:
| pierwsza
komórka | druga komórka | trzecia komórka
| | A to
już następny wiersz | komórka po prawej jest pusta --->
|
Jeżeli
na jakimś tle tabela jest kiepsko widoczna można użyć parametrów
BORDERCOLORLIGHT i BORDERCOLORDARK,
za pomocą których można zmienić
kolory ramek (jasny i ciemny).
WYKORZYSTANIE TABEL
Tabele
są bardzo często używane do ułożenia tekstu i obrazków na stronie.
Tabela może też mieć inne tło
niż pozostała część strony.
Do jego ustawiania służą parametry BGCOLOR i BACKGROUND podawane
w poleceniu TD
(w zależności, czy tło ma mieć jednolity kolor,
czy też tłem ma być obrazek). Polecenia TABLE i TD mają też
parametr
WIDTH określający szerokość danej komórki w przypadku
polecenia TD lub tabeli w przypadku polecenia TABLE.
Teraz przykład
łączący to wszystko:
<TABLE
width=60%>
<TR>
<TD
WIDTH=23% BGCOLOR=RED>czerwone
<TD
WIDTH=* BGCOLOR=WHITE>białe
<TD
BGCOLOR=LIGHTBLUE WIDTH=23%>jasnoniebieskie
<TR>
<TD
WIDTH=23%>przeźroczyste
<TD
WIDTH=* BGCOLOR=GREEN>zielone
<TD
WIDTH=23%>przeźroczyste
<TR>
<TD
WIDTH=23% BGCOLOR=PINK>różowe
<TD
WIDTH=* BGCOLOR=WHITE>białe
<TD
BGCOLOR=YELLOW WIDTH=23%>żółte
</TABLE>
Teraz
to samo w praktyce:
| czerwone | białe | jasnoniebieskie |
| przeźroczyste | zielone | przeźroczyste |
| różowe | białe | żółte |
W powyższym przykładzie parametrowi WIDTH nadałem
kilkakrotnie wartość *. Oznacza to, że dana komórka lub inny
element
zajmie całe pozostawione mu miejsce.
FORMULARZE
Formularze
są bardzo ważnym elementem języka HTML, gdyż umożliwiają czytającemu
stronę wprowadzanie
danych, które mogą być wykorzystane przez
autora strony. Obsługą danych z formularzy zajmują się
zwykle
skrypty CGI. Są to krótkie programy napisane np. w PERLU, uruchamiane
na serwerze. Mogą
one przykładowo wysłać zawartość formularza
e-mailem do autora strony, wyświetlając
jednocześnie stronę
z podziękowaniami. Jeżeli potrzebujesz skryptu do obsługi formularza,
zajrzyj do działu CGI_PL.
Każdy
formularz rozpoczyna się poleceniem FORM. Ma ono dwa ważne parametry
- METHOD i ACTION.
Pierwszy z nich może mieć dwie wartości: GET
i POST. Której użyć zależy od skryptu obsługującego
formularz.
Drugi z nich - ACTION - powinien zawierać adres skryptu obsługującego
formularz.
Formularz może też
zostać użyty przez skrypt Javy, ale wtedy dane nie wydostaną się
poza
komputer użytkownika. Jest to przydatne przy pisanych w Javie
kalkulatorach i podobnych
dodatkach do stron. Wtedy należy podać
jeszcze parametr NAME zawierający nazwę formularza, przez
którą
będzie się do niego odwoływał skrypt.
W
obrębie formularza można używać poleceń INPUT, TEXTAREA, SELECT.
INPUT
Polecenie
INPUT pozwala tworzyć podstawowe elementy formularza. Ma ono parametr
TYPE, od którego
zależy istnienie innych parametrów. Określa
on rodzaj pola formularza.
TYPE=TEXT
RAMKI
Ramki
pozwalają na wyświetlenie na jednej stronie wielu dokumentów,
dzięki czemu są nadzwyczaj
przydatne. Aby z nich skorzystać
trzeba stworzyć nowy dokument, nie zawierający znaczników BODY
(HEAD
jest dozwolony). Następnie zamiast sekcji BODY rozpoczynamy komendę
FRAMESET. Ma ona jeden
parametr - ROWS lub COLS, zależnie czy ramka
ma być pozioma czy pionowa. Następnie należy
użyć polecenia
FRAME z parametrem SRC, zawierającym nazwę strony do wstawienia.
Jeżeli
podamy parametr NORESIZE, użytkownik nie będzie mógł
zmienić wielkości ramki. FRAMEBOREDER=NO
spowoduje, że cieniowana
kreska nie zostanie wyświetlona. Name określa nazwę ramki. Jeżeli
nie
chcemy pasków do przewijania zawartości wpisujemy parametr SCROLLING=NO.
Komendy
FRAME należy użyć dla każdej z ramek. Przykład:
<FRAMESET
COLS=20%,*,30%>
<FRAME
SRC=strona1.htm>
<FRAME
SRC=strona2.htm>
<FRAME
SRC=strona3.htm>
</FRAMESET>
ODNOŚNIKI W RAMKACH
Standardowy
odnośnik po kliknięciu załaduje stronę do ramki w której był
poprzednio. Aby to zmienić
można zastosować parametr TARGET,
w którym należy podać nazwę ramki do której ma zostać załadowany
dokument.
Może on mieć też wartości _top i _blank - pierwsza z nich powoduje
zlikwidowanie ramek
i załadowanie strony na cały ekran, druga
powoduje załadowanie strony do nowego okna.
Zakończenie
Dziękuję
za czas poświęcony na czytanie mojego kursu. Więcej informacji
możesz znaleźć w spisie wybranych poleceń HTMLa - opisałem tam
dokładnie wszystkie moim zdaniem najważniejsze polecenia, wraz
z parametrami. Życzę wielu sukcesów w pisaniu stron WWW.
|
|
