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ę koloru
podają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:
FONT
CLASS="bighead"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.
Kurs udostępnił : Grzegorz Plebański |
