Spis treści
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
Początek formularza
Są trzy parametry dla takiego pola - NAME, MAXLENGTH i SIZE. NAME określa nazwę pola, SIZE jego długość w znakach, MAXLENGTH maksymalną długość ciągu wprowadzonych znaków.
TYPE=PASSWORD
Parametry identyczne jak przy TYPE=TEXT, zamiast wprowadzanych liter pojawiają się gwiazdki.
TYPE=CHECKBOX
Zaznaczane pole ma parametry NAME i CHECKED. NAME zawiera nazwę pola, parametrowi checked nie nadaje się wartości, np.
<INPUT TYPE=CHECKBOX CHECKED>
wyświetli pole które będzie od razu zaznaczone.
TYPE=RADIO
Dla jednego zestawu takich pól parametr NAME podawany w każdym musi być taki sam. Można użyć parametru CHECKED, aby wybrać które z pól będzie zaznaczone na początku (zanim użytkownik to zmieni). Parametr VALUE zawiera wartość która zostanie wysłana, jeżeli właśnie to pole jest zaznaczone.
TYPE=RESET
Tworzy przycisk czyszczący zawartość formularza. Parametr VALUE zawiera napis na przycisku.
TYPE=SUBMIT
Podobnie jak przy TYPE=RESET, ale przycisk powoduje wysłanie formularza.
TYPE=BUTTON
Parametry takie jak przy TYPE=RESET, tworzy przycisk który może zostać użyty przez skrypt Java.
TEXTAREA
Polecenie TEXTAREA może zostać użyte tylko w obrębie formularza. Tworzy ono pole do wpisywania
tekstu. Ma trzy parametry NAME, ROWS, COLS. NAME to nazwa pola, ROWS to jego wysokość w linijkach, COLS to jego długość w znakach. Polecenie to trzeba koniecznie zamknąć - przedtem można wpisać tekst, który pojawi się w polu po otwarciu strony.
Dół formularza
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ł :
http://ygreg.and.pl