Webhelp.pl / Kursy offline
MENU: Webhelp.pl Newsy Artykuły HTML zone Skrypty Download Forum Narzędzia online E-mail
Spis treści:
1. Opis języka HTML
2. Kolory
3. Formatowanie tekstu
4. Opisy komend związanych z tabelami
5. Opisy komend związanych z formularzami
6. Komendy umieszczane w nagłówku dokumentu
7. Opisy komend innych komend
Spis treści
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 .html 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.html i index.html 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:
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 prawejlub 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 .html 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.html>Tekst odnośnika</A>
Po kliknięciu napisu Tekst odnośnika zostanie załadowany dokument o nazwie strona.html.
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.html>
<A HREF=katalog/strona.html>
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.html#miejsce>
Oczywiście w pliku strona.html 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órkadruga komórkatrzecia komórka
A to już następny wierszkomó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:
czerwonebiałejasnoniebieskie
przeźroczystezieloneprzeźroczyste
różowebiał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.html>
<FRAME SRC=strona2.html>
<FRAME SRC=strona3.html>
</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
Contents copyright
© 2000-2002 by Webhelp.pl
All rights reserved.
Wyszukiwarka
Podobne podstrony:
html kurshtml kurshtml kurskurs tworzenia stron internetowych w języku htmlkurs htmlKurs HTML HTML BODY i METAkurs html(1)Kurs HTML HTML HTML dla zielonychKurs JavaScript Zdarzenia elementów HTMLKurs HTML HTML Multimediakurs htmlKurs HTML HTML OdsyĹ‚aczewięcej podobnych podstron