Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00493 006700 13590128 na godz. na dobę w sumie
XHTML, CSS i JavaScript. Pierwsza pomoc - książka
XHTML, CSS i JavaScript. Pierwsza pomoc - książka
Autor: , Liczba stron: 96
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1071-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

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

Recepta na szybkie stworzenie własnej strony WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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 /  7 /  5 /  13 /  10 Wstęp  1.  Co to są znaczniki?  2.  Jak utworzyć podstawowy szkielet strony WWW?  3.  Gdzie umieścić tytuł strony WWW?  4.  Co to jest kodowanie znaków i jakie są jego techniki?  /  14 5.  Gdzie ustawić kodowanie polskich znaków w kodzie HTML?  6.  Jak korzystać z atrybutów tekstu?  7.  Jak zdefiniować wyrównanie tekstu w akapicie?   8.  Jak zdefiniować kolor tekstu i tła akapitu?  /  24 9.  Jak zdefiniować krój pisma i rozmiar czcionki?  10. Jak ustawić marginesy akapitu tekstu?  11. Jak budować strukturę dokumentu HTML za pomocą  /  21 /  19 /  29 /  27 nagłówków?  /  31 12. Jak utworzyć na stronie WWW listy wypunktowane  i numerowane?  /  33 /  36 /  38 13. Jak przygotować prostą stronę WWW?  14. Jak definiować kaskadowe arkusze stylów?  15. Co to jest odnośnik i jak go skierować do innej strony WWW?  16. Jak modyfikować odnośniki za pomocą CSS?  17. Jak zdefiniować odnośnik pocztowy?  18. Do czego służą kotwice nazwane?  19. Jak wstawić obraz na stronę WWW?  20. Jak zmienić rozmiary obrazu?  21. Jak określić pozycję obrazu na stronie WWW?  22. W jaki sposób określić relację obraz – tekst?  23. Jak zapewnić płynną zmianę rozmiarów obrazu przy zmianie  /  47 /  58 /  50 /  56 /  49 /  53 /  57 /  16 /  43 rozmiarów okna przeglądarki?  /  60 Spis treści  XHTML, CSS i JavaScript 24. Jak zdefiniować tabelę w XHTML?  25. Jak wykorzystać tabelę do budowy strony WWW?  26. Jak stworzyć układ strony o postaci tabeli z wykorzystaniem  /  65 /  62 wyłącznie CSS?  /  68 27. Jak umieścić na stronie WWW formularz?  28. Jak wyświetlić na ekranie komunikat z wykorzystaniem  /  75 JavaScript?   /  81 29. Jak wyświetlić element w oknie pop-up za pomocą  JavaScript?  /  85 30. Jak przygotować galerię obrazów?   31. Jak zdefiniować menu rozwijane za pomocą JavaScript?  /  87 /  90   Spis treści XHTML, CSS i JavaScript 27. Jak umieścić na stronie WWW formularz? Formularze 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 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? XHTML, CSS i JavaScript Dodatkowo możemy wydzielić określone pola poprzez zastosowanie do nich grupującego obramowania. Służy do tego element fieldset: form fieldset zawartość /fieldset fieldset zawartość /fieldset /form Przydatny będzie także opis grupy pól — wprowadza go ele- ment legend, na przykład: legend Formularz - stosowane przeglądarki /legend Do formularza trzeba jeszcze dodać przycisk, który pozwoli wysłać informacje podane przez czytelnika strony do jej autora. Służy do tego polecenie input z atrybutem type= submit . Gdy użytkownik kliknie ten przycisk, wszystkie podane przez niego informacje (ciągle zakładamy, że posługujemy się tu funkcją poczty elektronicznej), jak zaznaczone opcje, wypełnione pola tekstowe czy wybrane pozycje na liście, zostaną przesłane w liście do autora: input type= submit value= Wyślij do nas informacje Teraz czas na zastosowanie podanych tu informacji w prak- tyce. 27. Jak umieścić 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 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 przeglądarki / legend p strong Imię /strong : input type= text name= Imie value= Jan size= 30 maxlength= 40 style= position:absolute; left:150px; background- color: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; font- style: italic; color:gray / /p p strong Zawód /strong : input type= text name= Zawod value= student size= 30 maxlength= 40 style= position:absolute; left:150px; background-color:cornsilk; font- style: italic; color:gray / /p /fieldset fieldset p b Podaj swoją płeć /b /p p input type= radio name= Plec value= kobieta checked= checked / strong Kobieta /strong br / Listing 27.1. Formularz Aby umieścić na stronie WWW formularz: 1. Otwórz w Notatniku pod- stawowy szablon strony WWW. 2. Umieść w kodzie stro- ny WWW element form, a w nim zdefiniuj czte- ry obramowania field- set wydzielające zestawy danych określonego typu:  Pierwszy zestaw zawie- ra pola tekstowe, w które użytkownik będzie wpisywał swoje dane personalne.    Zestaw drugi zawie- ra przyciski radiowe pozwalające wybrać płeć. Zestaw trzeci to lista przewijana, na któ- rej użytkownik będzie wskazywał swój wybór. Czwarty zestaw to pola wyboru. 3. Na końcu formularza umieść kod definiujący przycisk wysyłania formu- larza na wskazany adres. 4. Pełny kod formularza został przedstawiony na listingu 27.1. 78  27. Jak umieścić na stronie WWW formularz? XHTML, CSS i JavaScript input type= radio name= Plec value= mężczyzna / strong Mężczyzna /strong /p /fieldset fieldset p b Jakiej przeglądarki WWW używasz? /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 językowej 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= chiński / strong chińskiej /strong br / /fieldset br/ input type= submit value= Wyślij do mnie wiadomość / /form /body /html 27. Jak umieścić na stronie WWW formularz? 79 XHTML, CSS i JavaScript Rysunek 27.1. Oto formularz, który wygeneruje wiadomość e-mail i umieści w jej treści dane podane w polach formularza Rysunek 27.2. Formularz wygenerował rekordy danych — zostaną one przesłane na adres autora strony WWW 5. Przeanalizuj kod z listingu 27.1. Zapisz plik zawiera- jący formularz pod nową nazwą i wyświetl w prze- glądarce (rysunek 27.1). 6. Przetestuj funkcjonal- ność formularza. Wypełnij jego pola i kliknij przycisk wysyłania danych. Otwo- rzy się okno wiadomości e-mail, w którym pole tre- ści będzie zawierać rekor- dy danych (rysunek 27.2). 80  27. Jak umieścić na stronie WWW formularz? XHTML, CSS i JavaScript JavaScript to język programowania, który pozwala rozbu- dowywać funkcjonalność stron WWW. Możesz w tym języku zaprogramować kalkulator lub prostą grę, ale także całkiem poważne aplikacje, które kontrolują typ przeglądarki czy ciasteczka. Zanim zabierzemy się do pracy — kilka praktycznych uwag. Ponieważ JavaScript to nie XHTML, konieczne jest poinfor- mowanie przeglądarki, że w kodzie strony WWW zawarty jest program JavaScript. Służy do tego element script. Ele- ment script może być umieszczony równie dobrze w sekcji head, jak i w sekcji body, ale raczej zdecyduj się na tę pierwszą opcję. W nim wpiszemy polecenia kodu JavaScript. Oto pod- stawowe zasady obowiązujące w obszarze tego elementu:    Każdy wiersz kodu Javascript kończy się średnikiem. Natrafiając na średnik, przeglądarka wie, że wykonała wiersz kodu i że może przejść do kolejnego. Tekst jest umieszczany ZAWSZE w cudzysłowach . Jeśli zapomnisz cudzysłowów, tekst zostanie potrakto- wany jako zmienna. Wielkie litery i małe litery nie są identyczne. Jeśli więc zdefiniujesz zmienną ZMIENNA, to nie będzie ona tożsama ze zmienną o nazwie zmienna. Pamiętaj o tej zasadzie jako o możliwym źródle błędów. Zacznijmy od umieszczenia w kodzie strony WWW pole- cenia JavaScript otwierającego okno komunikatu. W rzeczywi- stości są trzy typy takich okien otwieranych instrukcjami alert, prompt i confirm — wykorzystamy je wszystkie do stworzenia prostego systemu komunikacji z użytkownikiem. Oto pod- stawowa składnia:    alert ( Dowolny tekst. ); — instrukcja wyświetla okno dialogowe zawierające tekst, który umieścisz między zna- kami cudzysłowu, oraz przycisk OK. confirm ( Dowolny tekst? ); — instrukcja wyświet- la okno dialogowe z dwoma przyciskami, OK i Cancel. Pierwszy przycisk odpowiada wartości TRUE (prawda), drugi wartości FALSE (fałsz). prompt ( Dowolny tekst ? , ); — ta instrukcja pobie- ra dane od użytkownika. W wyświetlonym oknie dia- logowym pojawi się pole tekstowe, w które użytkownik wprowadzi dane. 28. Jak wyświetlić na ekranie komunikat z wykorzy- staniem JavaScript? 81 script type= text/javascript !-- var imie = prompt ( Jak masz na imię? , ); alert ( Cześć, + imie); var jak_masz = confi rm ( Jak się masz? ); if (jak_masz) alert ( Super! Ja także. ); else alert ( Oj, to niedobrze :( ); // -- /script Rysunek 28.1. Okno wywołane instrukcją prompt. Jeśli naciśniesz OK, wprowadzony tekst zostanie wykorzystany przez skrypt w kolejnym oknie XHTML, CSS i JavaScript Aby za pomocą kodu Java- Script wyświetlić na ekranie okno komunikatu: 1. Otwórz w Notatniku plik zawierający podstawo- wy szablon dokumentu HTML. 2. W sekcji head dokumentu HTML (lub w sekcji body) umieść element script o następującej postaci: Znaczniki script i / script informują przeglą- darkę, gdzie jest początek i koniec kodu JavaScript. Aby zabezpieczyć się przed potraktowaniem kodu Java- Script jako zwykłego tekstu, wszystkie polecenia umieszczone w obrębie ele- mentu script zostały zawarte między znacznikami komen- tarza !--, // -- . var defi niuje zmienną — pierwszej nadajemy nazwę imie (możesz zdefi niować dowolną nazwę, ale nie uży- waj polskich znaków diakry- tycznych; nie zaczynaj też nazwy od cyfry). Zmienna ta będzie przechowywać tym- czasowo wartość odpowiada- jącą odpowiedzi użytkowni- ka. W przykładowym kodzie wartością zmiennej jest tekst wprowadzony przez użyt- kownika w oknie dialogowym wywołanym instrukcją prompt ( Jak masz na imię? , ) (rysunek 28.1). 82  28. Jak wyświetlić na ekranie komunikat z wykorzystaniem JavaScript? XHTML, CSS i JavaScript Wprowadzony tekst zostanie wykorzystany w oknie komu- nikatu. Jest to możliwe dzięki zastosowaniu operatora dodawania +, za którego pomocą do tekstu komunika- tu okna alert zostanie doda- na wartość zmiennej imie: alert ( Cześć, + imie);. Efekt pokazano na rysun- ku 28.2. W kolejnym wierszu kodu defi niowana jest zmien- na jak_masz, która ma prze- chowywać wartość odpowie- dzi użytkownika wprowa- dzonej w oknie confi rm: var jak_masz = confi rm ( Jak się masz? );. Jeśli użyt- kownik naciśnie przycisk OK, zmienna zyska wartość TRUE, jeśli naciśnie przycisk Cancel, zmienna będzie miała war- tość FALSE — skorzystamy więc z instrukcji warunkowej if...else, aby zareagować na poczynania użytkownika (rysunek 28.3). Instrukcja warunkowa if … else kieruje reakcją na poczy- nania użytkownika. Jeśli klik- nie on przycisk OK, zmienna jak_masz przyjmuje wartość TRUE i wyświetlane jest okno z komunikatem określonym w instrukcji alert ( Super! Ja także. ); Rysunek 28.2. Okno wywołane instrukcją alert. Za pomocą tej instrukcji możesz wyświetlać dowolny komunikat przeznaczony dla użytkownika Rysunek 28.3. Okno wywołane instrukcją confi rm. Odpowiedź programu zależy od tego, który z przycisków zostanie naciśnięty przez użytkownika — to instrukcja warunkowa if wybierze właściwą odpowiedź 28. Jak wyświetlić na ekranie komunikat z wykorzystaniem JavaScript? 83 Rysunek 28.4. To okno komunikatu jest efektem realizacji części else instrukcji warunkowej if Rysunek 28.5. Efekt działania instrukcji dokument.write ( ) — pozwala ona wyświetlać dowolny tekst bezpośrednio na ekranie. Spośród różnorodnych zastosowań metody document.write warto wyróżnić możliwość dopisywania kodu HTML do strony WWW XHTML, CSS i JavaScript Jeśli użytkownik kliknie przycisk Can- cel, zmienna jak_masz przyjmie war- tość FALSE i realizowana będzie część else instrukcji warunkowej — instruk- cja alert wyświetli komunikat Oj, to niedobrze :( (rysunek 28.4). 3. Jeśli chcesz wyświetlić na ekra- nie wartość którejś ze zmiennych, na przykład wartość zmiennej imie, skorzystaj z metody document.write (nazwa_ zmiennej). document.write ( ) to meto- da JavaScript informująca przeglą- darkę, że powinna ona wyświet- lić na ekranie monitora wszelką zawartość określoną w nawiasach — może to być także dowolny tekst. Jeśli więc chcesz wyświet- lić taki tekst, umieść go w cudzy- słowach, na przykład: document. write ( Jak się macie? ); (rysunek 28.5). 84  28. Jak wyświetlić na ekranie komunikat z wykorzystaniem JavaScript? XHTML, CSS i JavaScript Czasem trzeba otworzyć małe okienko o określonej wiel- kości z krótką informacją, zdjęciem czy ankietą. W takiej sytuacji można skorzystać ze zdarzeń JavaScript. Zdarzenia umożliwiają uruchomienie dowolnego fragmentu skryptu JavaScript, gdy wystąpi wskazane zdarzenie, na przykład przycisk zostanie kliknięty. Oto przykłady zdarzeń oraz opis sytuacji, w których zacho- dzą:      onblur — przy przełączeniu do innego elementu. onclick — przy kliknięciu elementu. onchange — przy zmianie zawartości pola. onfocus — przy uaktywnieniu danego elementu. onmouseover — przy umieszczeniu nad elementem wskaźnika myszy. onunload — przy opuszczeniu strony WWW.  Skorzystamy ze zdarzenia onclick, aby wyświetlić okno pop- up, a w nim nową zawartość. Może to być zawartość serwisu, na przykład zdjęcie, lub zawartość innej strony WWW. body a href= # onclick= window.open( http://helion. pl , Okno_01 , height=350, width=300 ); Otwórz stronę WWW w małym okienku /a br / a href= # onclick= window.open( obrazy/ pimpek1.jpg , Okno_02 , height=250, width=200 ); Wyświetl zdjęcie w okienku /a / body /body Listing 29.1. Zastosowanie zdarzenia onclick do otwierania okna pop-up 29. Jak wyświetlić element w oknie pop-up za pomocą JavaScript? Aby wyświetlić okno pop-up: 1. Umieść w sekcji body do- kumentu elementy a — są to elementy defi- niujące połączenia do ze- wnętrznej strony WWW i do pliku JPG serwisu WWW. Oto postać sekcji body (listing 29.1): 85 XHTML, CSS i JavaScript 2. W wyniku kliknięcia pierwszego połączenia myszą, a więc wystąpie- nia zdarzenia onclick, zostanie otworzona stro- na o adresie podanym jako pierwszy argument metody window.open(). Drugim argumentem jest nazwa okienka pop- up, a kolejne argumen- ty podają jego wysokość i szerokość. Parametrów może być więcej — moż- na na przykład włączyć przewijanie lub okre- ślić miejsce wyświetlenia okienka na ekranie. Klik- nięcie drugiego połącze- nia spowoduje wyświetle- nie obrazu w oknie prze- glądarki. Rysunek 29.1 pokazuje efekty działania kodu. Rysunek 29.1. Połączenia do strony WWW i pliku serwisu funkcjonują dzięki zdarzeniu onclick — w wyniku kliknięcia myszą, a więc wystąpienia zdarzenia onclick, w oknie pop-up zostanie otworzona zawartość o adresie podanym jako pierwszy argument metody open() 86  29. Jak wyświetlić element w oknie pop-up za pomocą JavaScript?
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

XHTML, CSS i JavaScript. Pierwsza pomoc
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: