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

     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

Tutaj mo┐na pisaµ

     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.

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

<HTML> <HEAD>  to komentarz Tutaj ustawia siΩ pare wa┐nych rzeczy - zobacz sekcjΩ Nag│≤wek tego kursu --> </HEAD> <BODY> Moja pierwsza strona </BODY> </HTML>

H3

H4

H5

H6

Parametry takie jak przy TYPE=RESET, tworzy przycisk kt≤ry mo┐e zostaµ u┐yty przez skrypt Java. TEXTAREA Tutaj mo┐na pisaµ Polecenie TEXTAREA mo┐e zostaµ u┐yte tylko w obrΩbie formularza. Tworzy ono pole do wpisywania

Contents copyright © 2000 - 2001, Krzysztof Dziewo±ski. All rights reserved.

Parametry takie jak przy TYPE=RESET, tworzy przycisk kt≤ry mo┐e zostaµ u┐yty przez skrypt Java.

TEXTAREA

Tutaj mo┐na pisaµ

Polecenie TEXTAREA mo┐e zostaµ u┐yte tylko w obrΩbie formularza. Tworzy ono pole do wpisywania