HTML - Podstawy
Podstawy
NajwaŜniejsze polecenia
Próbki kolorów mających nazwy
Co moŜna zrobić z tekstem
Odnośniki
Obrazki
Tabele
Wykorzystanie tabel
Formularze
Ramki
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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
1 z 7
2010-02-14 20:38
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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
2 z 7
2010-02-14 20:38
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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
3 z 7
2010-02-14 20:38
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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
4 z 7
2010-02-14 20:38
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.
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
5 z 7
2010-02-14 20:38
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
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
6 z 7
2010-02-14 20:38
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.
Grzegorz 'Ygreg' Plebański
ygreg@ygreg.com
http://www.ygreg.com
http://www.ygreg.com
YGREG.COM - HTML - Podstawy
http://www.ygreg.com/druk.php?html-podstawy
7 z 7
2010-02-14 20:38