HTML - Podstawy.pdf - Projektowanie stron - sudij

YGREG.COM HTML Podstawy

http://www.ygreg.com/druk.php?htmlpodstawy

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

1 z 7

20100214 20:38

YGREG.COM HTML Podstawy

http://www.ygreg.com/druk.php?htmlpodstawy

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:

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:

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.:

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

2 z 7

20100214 20:38

YGREG.COM HTML Podstawy

http://www.ygreg.com/druk.php?htmlpodstawy

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:

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:

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

3 z 7

20100214 20:38

YGREG.COM HTML Podstawy

http://www.ygreg.com/druk.php?htmlpodstawy

HREF moŜe teŜ zawierać pełny adres strony, lub lokalizację strony względem strony bieŜącej, np.:

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.:

Aby teraz stworzyć odnośnik przenoszący do tego miejsca trzeba wpisać:

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:

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:

<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 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

4 z 7

20100214 20:38

YGREG.COM HTML Podstawy

http://www.ygreg.com/druk.php?htmlpodstawy

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:

<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 emailem 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.

5 z 7

20100214 20:38

HTML - Podstawy.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: