Maria Sokół, Radosław Sokół xhtml, css i javascript. pierwsza pomoc cała książka.pdf

(45684 KB) Pobierz
748595061 UNPDF
XHTML, CSS i JavaScript.
Pierwsza pomoc
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!
748595061.010.png 748595061.011.png
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 zdeiniować wyrównanie tekstu w akapicie?   /  21
8.  Jak zdeiniować kolor tekstu i tła akapitu?  /  24
9.  Jak zdeiniować 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 deiniować kaskadowe arkusze stylów?  /  38
15. Co to jest odnośnik i jak go skierować do innej strony WWW?  /  43
16. Jak modyikować odnośniki za pomocą CSS?  /  47
17. Jak zdeiniować 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
748595061.012.png 748595061.013.png 748595061.001.png
XHTML, CSS i JavaScript
24. Jak zdeiniować 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 zdeiniować menu rozwijane za pomocą JavaScript?  /  90
Spis treści
748595061.002.png 748595061.003.png
XHTML, CSS i JavaScript
odwiedzających jego serwis WWW i automatyzować kon-
takty. Mają postać elektronicznej ankiety, którą wypełnia się
wprost na stronie.
Formularz deiniujemy za pomocą elementu form z odpo-
wiednimi atrybutami, w którym umieszczamy pola formu-
larza:
27. Jak umieścić
na stronie WWW
formularz?
<form action=" plik_docelowy " method="post">
zawartość formularza
</form>
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 deinicji
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
F ormularze pozwalają autorowi strony zbierać dane od osób
748595061.004.png 748595061.005.png 748595061.006.png 748595061.007.png
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?
748595061.008.png 748595061.009.png
Zgłoś jeśli naruszono regulamin