XHTML, CSS i JavaScript. Pierwsza pomoc.pdf

(1453 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!

945879263.130.png

945879263.141.png

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

945879263.163.png

945879263.001.png

945879263.012.png

945879263.022.png

945879263.029.png

945879263.035.png

945879263.041.png

945879263.056.png

945879263.067.png

945879263.078.png

945879263.089.png

945879263.110.png

945879263.112.png

945879263.113.png

945879263.114.png

945879263.115.png

945879263.116.png

945879263.117.png

945879263.118.png

945879263.119.png

945879263.120.png

945879263.121.png

945879263.122.png

945879263.123.png

945879263.124.png

945879263.125.png

945879263.126.png

945879263.127.png

945879263.128.png

945879263.129.png

945879263.131.png

945879263.132.png

945879263.133.png

945879263.134.png

945879263.135.png

945879263.136.png

945879263.137.png

945879263.138.png

945879263.139.png

945879263.140.png

945879263.142.png

945879263.143.png

945879263.144.png

945879263.145.png

945879263.146.png

945879263.147.png

945879263.148.png

945879263.149.png

945879263.150.png

945879263.151.png

945879263.153.png

945879263.154.png

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

945879263.156.png

945879263.157.png

945879263.158.png

945879263.159.png

945879263.160.png

945879263.161.png

945879263.162.png

945879263.164.png

945879263.165.png

945879263.166.png

945879263.167.png

945879263.168.png

945879263.169.png

945879263.170.png

945879263.171.png

945879263.172.png

945879263.173.png

945879263.002.png

945879263.003.png

945879263.004.png

945879263.005.png

945879263.006.png

945879263.007.png

945879263.008.png

945879263.009.png

945879263.010.png

945879263.011.png

XHTML, CSS i JavaScript

F ormularze pozwalają autorowi strony zbierać dane od osób

27. Jak umieścić

na stronie WWW

formularz?

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:

<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

945879263.013.png

945879263.014.png

945879263.015.png

945879263.016.png

945879263.017.png

945879263.018.png

945879263.019.png

945879263.020.png

945879263.021.png

945879263.023.png

945879263.024.png

945879263.025.png

945879263.026.png

945879263.027.png

945879263.028.png

945879263.030.png

945879263.031.png

945879263.032.png

945879263.033.png

945879263.034.png

945879263.036.png

945879263.037.png

945879263.038.png

945879263.039.png

945879263.040.png

945879263.042.png

945879263.043.png

945879263.044.png

945879263.045.png

945879263.046.png

945879263.047.png

945879263.048.png

945879263.049.png

945879263.050.png

945879263.051.png

945879263.052.png

945879263.053.png

945879263.054.png

945879263.055.png

945879263.057.png

945879263.058.png

945879263.059.png

945879263.060.png

945879263.061.png

945879263.062.png

945879263.063.png

945879263.064.png

945879263.065.png

945879263.066.png

945879263.068.png

945879263.069.png

945879263.070.png

945879263.071.png

945879263.072.png

945879263.073.png

945879263.074.png

945879263.075.png

945879263.076.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?

945879263.077.png

945879263.079.png

945879263.080.png

945879263.081.png

945879263.082.png

945879263.083.png

945879263.084.png

945879263.085.png

945879263.086.png

945879263.087.png

945879263.088.png

945879263.090.png

945879263.091.png

945879263.092.png

945879263.093.png

945879263.094.png

945879263.095.png

945879263.096.png

945879263.097.png

945879263.098.png

945879263.099.png

945879263.100.png

945879263.101.png

945879263.102.png

945879263.103.png

945879263.104.png

945879263.105.png

945879263.106.png

945879263.107.png

945879263.108.png

945879263.109.png

945879263.111.png

Plik z chomika:

Inne pliki z tego folderu:

Podrecznik freelancera Tajniki sukcesu niezaleznego projektanta stron WWW Smashing Magazine.pdf (678 KB)
Programowanie uslug WCF Wydanie III.pdf (1103 KB)
Programowanie w jezyku Clojure.pdf (704 KB)
Projektowanie witryn internetowych User eXperience Smashing Magazine.pdf (946 KB)
Projektowanie WWW Ksiega pomyslow 2.pdf (3377 KB)

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin