XHTML, CSS i JavaScript.

Pierwsza pomoc
Autorzy: Maria Sok, Radosaw Sok
ISBN: 978-83-246-1071-6
Format: A5, stron: 100

Pocztki tworzenie szkieletu strony WWW i struktury dokumentu HTML

Wygld strony kodowanie znakw, krj pisma i kaskadowe arkusze stylw
Elementy witryny listy, tabele, obrazy, odnoniki
Interaktywno formularze, bazy danych, historia dziaa uytkownika
Masz wietne pomysy i chciaby pokaza je wiatu? A moe zaoye firm i chcesz
si zareklamowa? Najlepsz wspczesn wizytwk jest interesujca, funkcjonalna
strona internetowa. Jeli chcesz idealnie dopasowa j do swoich potrzeb, najlepiej
byoby zaj si ni osobicie. Jak jednak stworzy tak stron? Jak zapewni jej
dobre dziaanie, intuicyjno obsugi i waciw struktur? O co chodzi z tymi wszystkimi
znacznikami? Co to jest CSS? Jak rozmieci poszczeglne elementy i uatwi poruszanie
si po witrynie? I czy da si j poczy z baz danych? Nie martw si spieszymy
z pierwsz pomoc. Na te oraz wiele innych technicznych pyta szybko i jasno
odpowie Ci ta wanie ksika!
Projektowanie tworzenie szkieletu strony WWW i struktury dokumentu HTML
Czynnoci podstawowe uywanie znacznikw, kodowanie znakw
Formatowanie definiowanie pooenia, rozmiaru i koloru tekstu, ustawianie
koloru strony
Uywanie kaskadowych arkuszy stylw (CSS)
Dodawanie elementw listy, tabele, odnoniki zewntrzne i pocztowe
Wstawianie obrazw zmiana rozmiaru, ustawianie wzgldem tekstu,
pozycja na stronie
Rola pakietu XAMPP i umieszczanie strony na serwerze
Kontakt z uytkownikiem formularze, wprowadzanie danych, historia
odwiedzin
Bazy danych poczenie ze stron, operacje na danych, prawa dostpu
Wykorzystywanie technologii AJAX na stronach WWW
Oto recepta na szybkie stworzenie wasnej strony WWW!

XHTML, CSS i JavaScript

Spis treci
Wstp /5
1. Co to s znaczniki? /7
2. Jak utworzy podstawowy szkielet strony WWW? /10
3. Gdzie umieci tytu strony WWW? /13
4. Co to jest kodowanie znakw i jakie s jego techniki? /14
5. Gdzie ustawi kodowanie polskich znakw w kodzie HTML? /16
6. Jak korzysta z atrybutw tekstu? /19
7. Jak zdefiniowa wyrwnanie tekstu w akapicie? /21
8. Jak zdefiniowa kolor tekstu i ta akapitu? /24
9. Jak zdefiniowa krj pisma i rozmiar czcionki? /27
10. Jak ustawi marginesy akapitu tekstu? /29
11. Jak budowa struktur dokumentu HTML za pomoc
nagwkw? /31
12. Jak utworzy na stronie WWW listy wypunktowane
i numerowane? /33
13. Jak przygotowa prost stron WWW? /36
14. Jak definiowa kaskadowe arkusze stylw? /38
15. Co to jest odnonik i jak go skierowa do innej strony WWW? /43
16. Jak modyfikowa odnoniki za pomoc CSS? /47
17. Jak zdefiniowa odnonik pocztowy? /49
18. Do czego su kotwice nazwane? /50
19. Jak wstawi obraz na stron WWW? /53
20. Jak zmieni rozmiary obrazu? /56
21. Jak okreli pozycj obrazu na stronie WWW? /57
22. W jaki sposb okreli relacj obraz tekst? /58
23. Jak zapewni pynn zmian rozmiarw obrazu przy zmianie
rozmiarw okna przegldarki? /60

Spis treci 

XHTML, CSS i JavaScript

24. Jak zdefiniowa tabel w XHTML? /62

25. Jak wykorzysta tabel do budowy strony WWW? /65
26. Jak stworzy ukad strony o postaci tabeli z wykorzystaniem
wycznie CSS? /68
27. Jak umieci na stronie WWW formularz? /75
28. Jak wywietli na ekranie komunikat z wykorzystaniem
JavaScript? /81
29. Jak wywietli element w oknie pop-up za pomoc
JavaScript? /85
30. Jak przygotowa galeri obrazw? /87
31. Jak zdefiniowa menu rozwijane za pomoc JavaScript? /90

 Spis treci

XHTML, CSS i JavaScript

ormularze pozwalaj autorowi strony zbiera dane od osb

odwiedzajcych jego serwis WWW i automatyzowa kontakty. Maj posta elektronicznej ankiety, ktr wypenia si
wprost na stronie.
Formularz definiujemy za pomoc elementu form z odpowiednimi atrybutami, w ktrym umieszczamy pola formularza:

27. Jak umieci

na stronie WWW
formularz?

<form action="plik_docelowy" method="post">

zawarto formularza
</form>

Pamitaj, aby wszelkie zdania w formularzu, pola, zestawy

opcji itp. obejmowa jakimi pojemnikami, na przykad znacznikami akapitu <p> czy bloku <div>.
W tym przykadzie przygotujemy formularz, ktry pozwoli
na wysyanie za pomoc poczty elektronicznej wprowadzanych
przez uytkownika informacji. W zwizku z tym w definicji
formularza powinnimy umieci specjalne polecenie wysyania
formularza na wskazany adres:
action=="mailto:autor_strony@adres.pl".

Naley rwnie okreli sposb komunikowania si przegldarki uytkownika z serwerem, a wic wskaza w kodzie,
czy przesya ona jakie informacje, czy te je pobiera. Do wyboru mamy dwie metody post lub get zastosujemy metod
post.
Aby zebrane z formularza dane byy w czytelnej postaci,
powinnimy zastosowa parametr enctype="text/plain". Tak
wic znacznik <form> ma teraz posta:
<form enctype="text/plain" action="mailto:autor_strony@adres.
pl?subject=Ankieta" method="post">

Formularz moe zawiera rnego typu pola, w ktre bd

wprowadzane dane na przykad takie jak imi i nazwisko, nazwa produktu, informacje o uytkowniku itp. Pola te
s podzielone na kilka podstawowych grup:

 Pole

input, z dodatkowymi parametrami type, name

i value, suy do tworzenia pl, w ktrych czytelnik
strony moe wpisa informacj lub wybra jak opcj.

75

XHTML, CSS i JavaScript

Oto przykad:
<input type="text" name="nazwa_pola" value="warto pocztkowa"
size="rozmiar pola w znakach" maxlength="maksymalny rozmiar
pola">

lub
<p><input type="checkbox" name="wybor" value="tak"> Tak</p>

 Pole select suy do tworzenia rozwijalnych list z opcja-

mi, spord ktrych czytelnik wybiera interesujce

go pozycje:

<p><strong>Wybierz produkt:</strong></p>
<div>
<select name="warzywa" size="3">
<option> Avocado
<option> Cebula
<option> Ogrek
<option> Marchew
<option> Seler
</select>
</div>

textarea jest poleceniem pozwalajcym tworzy wiksze

pole tekstowe z przeznaczeniem na duszy komentarz

czytelnika:

<form action="mailto:autor_strony@adres.pl">
<p><b>Wpisz swoje uwagi:</b></p>
<p><textarea name="Uwagi" rows="5" cols="55"></textarea></p>
</form>

76 27. Jak umieci na stronie WWW formularz?

XHTML, CSS i JavaScript

Dodatkowo moemy wydzieli okrelone pola poprzez
zastosowanie do nich grupujcego obramowania. Suy do tego
element fieldset:
<form>
<fieldset>
zawarto
</fieldset>
<fieldset>
zawarto
</fieldset>
</form>

Przydatny bdzie take opis grupy pl wprowadza go element legend, na przykad:

<legend>Formularz - stosowane przegldarki</legend>

Do formularza trzeba jeszcze doda przycisk, ktry pozwoli

wysa informacje podane przez czytelnika strony do jej autora.
Suy do tego polecenie input z atrybutem type="submit". Gdy
uytkownik kliknie ten przycisk, wszystkie podane przez niego
informacje (cigle zakadamy, e posugujemy si tu funkcj
poczty elektronicznej), jak zaznaczone opcje, wypenione pola
tekstowe czy wybrane pozycje na licie, zostan przesane
w licie do autora:
<input type="submit" value="Wylij do nas informacje">

Teraz czas na zastosowanie podanych tu informacji w praktyce.

27. Jak umieci na stronie WWW formularz? 77

XHTML, CSS i JavaScript

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:
lang="pl" lang="pl">
<head>
Aby umieci na stronie
WWW formularz:
1. Otwrz w Notatniku podstawowy szablon strony
WWW.
2. Umie w kodzie strony WWW element form,
a w nim zdefiniuj cztery obramowania fieldset wydzielajce zestawy
danych okrelonego typu:

Pierwszy zestaw zawiera pola tekstowe,

w ktre uytkownik
bdzie wpisywa swoje
dane personalne.

Zestaw drugi zawiera przyciski radiowe

pozwalajce wybra
pe.

Zestaw trzeci to lista

przewijana, na ktrej uytkownik bdzie
wskazywa swj wybr.

Czwarty zestaw to pola

wyboru.

3. Na kocu formularza
umie kod definiujcy
przycisk wysyania formularza na wskazany adres.
4. Peny kod formularza
zosta przedstawiony
na listingu 27.1.

<title>FORMULARZ</title>
<meta http-equiv="Content-Type" content="text/
html; charset=utf-8" />
</head>
<body>
<form enctype="text/plain" action="mailto:mary@
mary.gliwice.pl?subject=Formularz" method="post">
<fieldset>
<legend>Formularz - stosowane przegldarki</
legend>
<p><strong>Imi</strong>: <input type="text"
name="Imie" value="Jan" size="30" maxlength="40"
style="position:absolute; left:150px; backgroundcolor:cornsilk; font-style: italic; color:gray "
/></p>
<p><strong>Nazwisko</strong>: <input type="text"
name="Nazwisko" value="Kowalski" size="30"
maxlength="40" style="position:absolute;
left:150px; background-color:cornsilk; fontstyle: italic; color:gray " /></p>
<p><strong>Zawd</strong>: <input type="text"
name="Zawod" value="student" size="30"
maxlength="40" style="position:absolute;
left:150px; background-color:cornsilk; fontstyle: italic; color:gray " /></p>
</fieldset>
<fieldset>
<p><b>Podaj swoj pe</b></p>
<p><input type="radio" name="Plec" value="kobieta"
checked="checked" /> <strong>Kobieta</strong
><br />

78 27. Jak umieci na stronie WWW formularz?

Listing 27.1. Formularz

XHTML, CSS i JavaScript

<input type="radio" name="Plec" value="mczyzna"
/> <strong>Mczyzna</strong></p>
</fieldset>
<fieldset>
<p><b>Jakiej przegldarki WWW uywasz?</b></p>
<div><select name="Przegladarka" size="3">
<option>Firefox</option>
<option>Microsoft Internet Explorer</option>
<option>Opera</option>
<option>Safari</option>
<option>Innej</option>
</select></div>
</fieldset>
<fieldset>
<p><b>Z jakiej wersji jzykowej korzystasz?</b></
p>
<div><input type="checkbox" name="Jezyk"
value="angielski" /> <strong>angielskiej</
strong><br />
<input type="checkbox" name="Jezyk" value="polski"
/> <strong>polskiej</strong><br />
<input type="checkbox" name="Jezyk"
value="chiski" /> <strong>chiskiej</strong><br
/>
</fieldset>
<br/>
<input type="submit" value="Wylij do mnie
wiadomo" />
</form>
</body>
</html>

27. Jak umieci na stronie WWW formularz? 79

XHTML, CSS i JavaScript

Rysunek 27.1. Oto formularz, ktry

wygeneruje wiadomo e-mail
i umieci w jej treci dane podane
w polach formularza

5. Przeanalizuj kod z listingu

27.1. Zapisz plik zawierajcy formularz pod now
nazw i wywietl w przegldarce (rysunek 27.1).
6. Przetestuj funkcjonalno formularza. Wypenij
jego pola i kliknij przycisk
wysyania danych. Otworzy si okno wiadomoci
e-mail, w ktrym pole treci bdzie zawiera rekordy danych (rysunek 27.2).

80 27. Jak umieci na stronie WWW formularz?

Rysunek 27.2. Formularz

wygenerowa rekordy danych
zostan one przesane na adres
autora strony WWW

XHTML, CSS i JavaScript

avaScript to jzyk programowania, ktry pozwala rozbudowywa funkcjonalno stron WWW. Moesz w tym
jzyku zaprogramowa kalkulator lub prost gr, ale take
cakiem powane aplikacje, ktre kontroluj typ przegldarki
czy ciasteczka.
Zanim zabierzemy si do pracy kilka praktycznych uwag.
Poniewa JavaScript to nie XHTML, konieczne jest poinformowanie przegldarki, e w kodzie strony WWW zawarty
jest program JavaScript. Suy do tego element script. Element script moe by umieszczony rwnie dobrze w sekcji
head, jak i w sekcji body, ale raczej zdecyduj si na t pierwsz
opcj. W nim wpiszemy polecenia kodu JavaScript. Oto podstawowe zasady obowizujce w obszarze tego elementu:

28. Jak
wywietli
na ekranie
komunikat
z wykorzystaniem
JavaScript?

 Kady wiersz kodu Javascript koczy si rednikiem.

Natrafiajc na rednik, przegldarka wie, e wykonaa
wiersz kodu i e moe przej do kolejnego.

 Tekst jest umieszczany ZAWSZE w cudzysowach " " .

Jeli zapomnisz cudzysoww, tekst zostanie potraktowany jako zmienna.

 Wielkie litery i mae litery nie s identyczne. Jeli wic

zdefiniujesz zmienn ZMIENNA, to nie bdzie ona tosama

ze zmienn o nazwie zmienna. Pamitaj o tej zasadzie
jako o moliwym rdle bdw.

Zacznijmy od umieszczenia w kodzie strony WWW polecenia JavaScript otwierajcego okno komunikatu. W rzeczywistoci s trzy typy takich okien otwieranych instrukcjami alert,
prompt i confirm wykorzystamy je wszystkie do stworzenia
prostego systemu komunikacji z uytkownikiem. Oto podstawowa skadnia:

alert ("Dowolny tekst."); instrukcja wywietla okno

confirm ("Dowolny tekst?"); instrukcja wywietla okno dialogowe z dwoma przyciskami, OK i Cancel.
Pierwszy przycisk odpowiada wartoci TRUE (prawda),
drugi wartoci FALSE (fasz).

dialogowe zawierajce tekst, ktry umiecisz midzy znakami cudzysowu, oraz przycisk OK.

prompt ("Dowolny tekst ?",""); ta instrukcja pobie-

ra dane od uytkownika. W wywietlonym oknie dialogowym pojawi si pole tekstowe, w ktre uytkownik
wprowadzi dane.
81

XHTML, CSS i JavaScript

<script type="text/javascript">
<!-Aby za pomoc kodu JavaScript wywietli na ekranie
okno komunikatu:

var imie = prompt ("Jak masz na imi?","");

1. Otwrz w Notatniku plik

zawierajcy podstawowy szablon dokumentu
HTML.

if (jak_masz)

2. W sekcji head dokumentu

HTML (lub w sekcji body)
umie element script
o nastpujcej postaci:

alert ("Oj, to niedobrze :( ");

alert ("Cze, " + imie);

var jak_masz = confirm ("Jak si masz?");
alert ("Super! Ja take.");
else
// -->
</script>

Znaczniki <script> i </

script> informuj przegldark, gdzie jest pocztek
i koniec kodu JavaScript.
Aby zabezpieczy si przed
potraktowaniem kodu JavaScript jako zwykego tekstu,
wszystkie polecenia
umieszczone w obrbie elementu script zostay zawarte
midzy znacznikami komentarza <!--, // -->.
var definiuje zmienn
pierwszej nadajemy nazw
imie (moesz zdefiniowa
dowoln nazw, ale nie uywaj polskich znakw diakrytycznych; nie zaczynaj te
nazwy od cyfry). Zmienna
ta bdzie przechowywa tymczasowo warto odpowiadajc odpowiedzi uytkownika. W przykadowym kodzie
wartoci zmiennej jest tekst
wprowadzony przez uytkownika w oknie dialogowym
wywoanym instrukcj prompt
("Jak masz na imi?","")
(rysunek 28.1).

Rysunek 28.1. Okno wywoane

instrukcj prompt. Jeli naciniesz
OK, wprowadzony tekst zostanie
wykorzystany przez skrypt
w kolejnym oknie

82 28. Jak wywietli na ekranie komunikat z wykorzystaniem JavaScript?

XHTML, CSS i JavaScript

Rysunek 28.2. Okno wywoane

instrukcj alert. Za pomoc tej
instrukcji moesz wywietla
dowolny komunikat przeznaczony
dla uytkownika

Rysunek 28.3. Okno wywoane

instrukcj confirm. Odpowied
programu zaley od tego, ktry
z przyciskw zostanie nacinity
przez uytkownika to instrukcja
warunkowa if wybierze waciw
odpowied

Wprowadzony tekst zostanie

wykorzystany w oknie komunikatu. Jest to moliwe dziki
zastosowaniu operatora
dodawania +, za ktrego
pomoc do tekstu komunikatu okna alert zostanie dodana warto zmiennej imie:
alert ("Cze, " + imie);.
Efekt pokazano na rysunku 28.2.
W kolejnym wierszu kodu
definiowana jest zmienna jak_masz, ktra ma przechowywa warto odpowiedzi uytkownika wprowadzonej w oknie confirm: var
jak_masz = confirm ("Jak
si masz?");. Jeli uytkownik nacinie przycisk OK,
zmienna zyska warto TRUE,
jeli nacinie przycisk Cancel,
zmienna bdzie miaa warto FALSE skorzystamy
wic z instrukcji warunkowej
if...else, aby zareagowa
na poczynania uytkownika
(rysunek 28.3).
Instrukcja warunkowa if
else kieruje reakcj na poczynania uytkownika. Jeli kliknie on przycisk OK, zmienna
jak_masz przyjmuje warto
TRUE i wywietlane jest okno
z komunikatem okrelonym
w instrukcji alert ("Super!
Ja take.");

28. Jak wywietli na ekranie komunikat z wykorzystaniem JavaScript? 83

XHTML, CSS i JavaScript

Rysunek 28.4. To okno komunikatu

jest efektem realizacji czci else
instrukcji warunkowej if

Jeli uytkownik kliknie przycisk Cancel, zmienna jak_masz przyjmie warto FALSE i realizowana bdzie cz
else instrukcji warunkowej instrukcja alert wywietli komunikat Oj,
to niedobrze :( (rysunek 28.4).

Rysunek 28.5. Efekt dziaania

instrukcji dokument.write ( )
pozwala ona wywietla dowolny
tekst bezporednio na ekranie.
Spord rnorodnych zastosowa
metody document.write warto
wyrni moliwo dopisywania
kodu HTML do strony WWW

3. Jeli chcesz wywietli na ekranie warto ktrej ze zmiennych,

na przykad warto zmiennej
imie, skorzystaj z metody
document.write (nazwa_
zmiennej).
document.write ( ) to metoda JavaScript informujca przegldark, e powinna ona wywietli na ekranie monitora wszelk
zawarto okrelon w nawiasach
moe to by take dowolny
tekst. Jeli wic chcesz wywietli taki tekst, umie go w cudzysowach, na przykad: document.
write ("Jak si macie?");
(rysunek 28.5).

84 28. Jak wywietli na ekranie komunikat z wykorzystaniem JavaScript?

XHTML, CSS i JavaScript

zasem trzeba otworzy mae okienko o okrelonej wielkoci z krtk informacj, zdjciem czy ankiet. W takiej
sytuacji mona skorzysta ze zdarze JavaScript. Zdarzenia
umoliwiaj uruchomienie dowolnego fragmentu skryptu
JavaScript, gdy wystpi wskazane zdarzenie, na przykad
przycisk zostanie kliknity.
Oto przykady zdarze oraz opis sytuacji, w ktrych zachodz:








onblur przy przeczeniu do innego elementu.

onclick przy klikniciu elementu.

29. Jak
wywietli
element
w oknie
pop-up
za pomoc
JavaScript?

onchange przy zmianie zawartoci pola.

onfocus przy uaktywnieniu danego elementu.

onmouseover przy umieszczeniu nad elementem

wskanika myszy.

onunload przy opuszczeniu strony WWW.

Skorzystamy ze zdarzenia onclick, aby wywietli okno popup, a w nim now zawarto. Moe to by zawarto serwisu,
na przykad zdjcie, lub zawarto innej strony WWW.
<body>
<a href="#" onclick="window.open('http://helion.
pl', 'Okno_01', 'height=350, width=300');">Otwrz
stron WWW w maym okienku</a>
<br />
<a href="#" onclick="window.open('obrazy/
pimpek1.jpg', 'Okno_02', 'height=250,
width=200');">Wywietl zdjcie w okienku</a></
body>
</body>

Listing 29.1. Zastosowanie zdarzenia

onclick do otwierania okna pop-up

Aby wywietli okno pop-up:

1. Umie w sekcji body dokumentu elementy a
s to elementy definiujce poczenia do zewntrznej strony WWW
i do pliku JPG serwisu
WWW. Oto posta sekcji
body (listing 29.1):

85

XHTML, CSS i JavaScript

2. W wyniku kliknicia
pierwszego poczenia
mysz, a wic wystpienia zdarzenia onclick,
zostanie otworzona strona o adresie podanym
jako pierwszy argument
metody window.open().
Drugim argumentem
jest nazwa okienka popup, a kolejne argumenty podaj jego wysoko
i szeroko. Parametrw
moe by wicej mona na przykad wczy
przewijanie lub okreli miejsce wywietlenia
okienka na ekranie. Kliknicie drugiego poczenia spowoduje wywietlenie obrazu w oknie przegldarki. Rysunek 29.1
pokazuje efekty
dziaania kodu.

Rysunek 29.1. Poczenia do strony

WWW i pliku serwisu funkcjonuj
dziki zdarzeniu onclick w wyniku
kliknicia mysz, a wic wystpienia
zdarzenia onclick, w oknie pop-up
zostanie otworzona zawarto
o adresie podanym jako pierwszy
argument metody open()

86 29. Jak wywietli element w oknie pop-up za pomoc JavaScript?