XHTML_CSS_i_JavaScript_Pierwsza_pomoc_twowpp.pdf

(1425 KB) Pobierz
XHTML, CSS i JavaScript.
Pierwsza pomoc
Autorzy:
Maria Sokó³, Rados³aw Sokó³
ISBN: 978-83-246-1071-6
Format: A5, stron: 100
• Pocz¹tki – tworzenie szkieletu strony WWW i struktury dokumentu HTML
• Wygl¹d strony – kodowanie znaków, krój pisma i kaskadowe arkusze stylów
• Elementy witryny – listy, tabele, obrazy, odnoœniki
• Interaktywnoœæ – formularze, bazy danych, historia dzia³añ u¿ytkownika
Masz œwietne pomys³y i chcia³byœ pokazaæ je œwiatu? A mo¿e za³o¿y³eœ firmê i chcesz
siê zareklamowaæ? Najlepsz¹ wspó³czesn¹ wizytówk¹ jest interesuj¹ca, funkcjonalna
strona internetowa. Jeœli chcesz idealnie dopasowaæ j¹ do swoich potrzeb, najlepiej
by³oby zaj¹æ siê ni¹ osobiœcie. Jak jednak stworzyæ tak¹ stronê? Jak zapewniæ jej
dobre dzia³anie, intuicyjnoœæ obs³ugi i w³aœciw¹ strukturê? O co chodzi z tymi wszystkimi
znacznikami? Co to jest CSS? Jak rozmieœciæ poszczególne elementy i u³atwiæ poruszanie
siê po witrynie? I czy da siê j¹ po³¹czyæ z baz¹ danych? Nie martw siê – spieszymy
z pierwsz¹ pomoc¹. Na te oraz wiele innych technicznych pytañ szybko i jasno
odpowie Ci ta w³aœnie ksi¹¿ka!
• Projektowanie – tworzenie szkieletu strony WWW i struktury dokumentu HTML
• Czynnoœci podstawowe – u¿ywanie znaczników, kodowanie znaków
• Formatowanie – definiowanie po³o¿enia, rozmiaru i koloru tekstu, ustawianie
koloru strony
• U¿ywanie kaskadowych arkuszy stylów (CSS)
• Dodawanie elementów – listy, tabele, odnoœniki zewnêtrzne i pocztowe
• Wstawianie obrazów – zmiana rozmiaru, ustawianie wzglêdem tekstu,
pozycja na stronie
• Rola pakietu XAMPP i umieszczanie strony na serwerze
• Kontakt z u¿ytkownikiem – formularze, wprowadzanie danych, historia
odwiedzin
• Bazy danych – po³¹czenie ze stron¹, operacje na danych, prawa dostêpu
• Wykorzystywanie technologii AJAX na stronach WWW
Oto recepta na szybkie stworzenie w³asnej strony WWW!
XHTML, CSS i JavaScript
Spis treści
Wstęp  /  5
1.  Co to są znaczniki?  /  7
2.  Jak utworzyć podstawowy szkielet strony WWW?  /  10
3.  Gdzie umieścić tytuł strony WWW?  /  13
4.  Co to jest kodowanie znaków i
jakie są
jego techniki?  /  14
5.  Gdzie ustawić kodowanie polskich znaków w kodzie HTML?  /  16
6.  Jak korzystać z atrybutów tekstu?  /  19
7.  Jak zdefiniować wyrównanie tekstu w akapicie?   /  21
8.  Jak zdefiniować kolor tekstu i tła akapitu?  /  24
9.  Jak zdefiniować krój pisma i rozmiar czcionki?  /  27
10. Jak ustawić marginesy akapitu tekstu?  /  29
11. Jak budować strukturę dokumentu HTML za pomocą 
nagłówków?  /  31
12. Jak utworzyć na stronie WWW listy wypunktowane 
i
numerowane?  /  33
13. Jak przygotować prostą stronę WWW?  /  36
14. Jak definiować kaskadowe arkusze stylów?  /  38
15. Co
to jest odnośnik i jak go skierować do innej strony WWW?  /  43
16. Jak modyfikować odnośniki za pomocą CSS?  /  47
17. Jak zdefiniować odnośnik pocztowy?  /  49
18. Do
czego służą kotwice nazwane?  /  50
19. Jak wstawić obraz na stronę WWW?  /  53
20. Jak zmienić rozmiary obrazu?  /  56
21. Jak określić pozycję obrazu na stronie WWW?  /  57
22. W
jaki sposób określić relację obraz – tekst?  /  58
23. Jak zapewnić płynną zmianę rozmiarów obrazu przy zmianie 
rozmiarów okna przeglądarki?  /  60
Spis treści
XHTML, CSS i JavaScript
24. Jak zdefiniować tabelę w XHTML?  /  62
25. Jak wykorzystać tabelę do budowy strony WWW?  /  65
26. Jak stworzyć układ strony o
postaci tabeli z wykorzystaniem 
wyłącznie CSS?  /  68
27. Jak umieścić na stronie WWW formularz?  /  75
28. Jak wyświetlić na ekranie komunikat z wykorzystaniem 
JavaScript?  
/  81
29. Jak wyświetlić element w oknie pop-up za pomocą 
JavaScript?  /  85
30. Jak przygotować galerię obrazów?   /  87
31. Jak zdefiniować menu rozwijane za pomocą JavaScript?  /  90
Spis treści
XHTML, CSS i JavaScript
F
ormularze pozwalają autorowi strony zbierać dane od osób
odwiedzających jego serwis WWW i automatyzować kon-
takty. Mają postać elektronicznej ankiety, którą wypełnia się
wprost na stronie.
Formularz definiujemy za pomocą elementu
form
z odpo-
wiednimi atrybutami, w którym umieszczamy pola formu-
larza:
<form action="plik_docelowy" method="post">
zawartość formularza
</form>
27. Jak umieścić
na stronie WWW
formularz?
Pamiętaj, aby wszelkie zdania w formularzu, pola, zestawy
opcji itp. obejmować jakimiś pojemnikami, na przykład znacz-
nikami akapitu
<p>
czy bloku
<div>
.
W tym przykładzie przygotujemy formularz, który pozwoli
na wysyłanie za pomocą poczty elektronicznej wprowadzanych
przez użytkownika informacji. W związku z tym w definicji
formularza powinniśmy umieścić specjalne polecenie wysyłania
formularza na wskazany adres:
action=="mailto:autor_strony@adres.pl".
Należy również określić sposób komunikowania się prze-
glądarki użytkownika z serwerem, a więc wskazać w kodzie,
czy przesyła ona jakieś informacje, czy też je pobiera. Do wybo-
ru mamy dwie metody —
post
lub
get
— zastosujemy metodę
post
.
Aby zebrane z formularza dane były w czytelnej postaci,
powinniśmy zastosować parametr
enctype="text/plain"
. Tak
więc znacznik
<form>
ma teraz postać:
<form enctype="text/plain" action="mailto:autor_strony@adres.
pl?subject=Ankieta" method="post">
Formularz może zawierać różnego typu pola, w które będą
wprowadzane dane — na przykład takie jak imię i nazwi-
sko, nazwa produktu, informacje o użytkowniku itp. Pola te
są podzielone na kilka podstawowych grup:
Pole
input
, z dodatkowymi parametrami
type
,
name
i
value
, służy do tworzenia pól, w których czytelnik
strony może wpisać informację lub wybrać jakąś opcję.
75
XHTML, CSS i JavaScript
Oto przykład:
<input type="text" name="nazwa_pola" value="wartość początkowa"
size="rozmiar pola w znakach" maxlength="maksymalny rozmiar
pola">
lub
<p><input type="checkbox" name="wybor" value="tak"> Tak</p>
Pole
select
służy do tworzenia rozwijalnych list z opcja-
mi, spośród których czytelnik wybiera interesujące
go pozycje:
<p><strong>Wybierz produkt:</strong></p>
<div>
<select name="warzywa" size="3">
<option> Avocado
<option> Cebula
<option> Ogórek
<option> Marchew
<option> Seler
</select>
</div>
textarea
jest poleceniem pozwalającym tworzyć większe
pole tekstowe z przeznaczeniem na dłuższy 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 umieścić na stronie WWW formularz?
Zgłoś jeśli naruszono regulamin