projektowanie stron www n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Projektowanie Stron WWW PowerPoint Presentation
Download Presentation
Projektowanie Stron WWW

Loading in 2 Seconds...

  share
play fullscreen
1 / 37
eugene

Projektowanie Stron WWW - PowerPoint PPT Presentation

133 Views
Download Presentation
Projektowanie Stron WWW
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Projektowanie Stron WWW dr inż. Marta Pelczar

  2. Przegląd usług internetowych • www • e-mail • FTP • Telnet, ssh • DNS • USENET • IRC, ICQ, GG, Talk • P2P • Real Audio, Real Video... • X, rdesktop, vnc • Radio i telewizja internetowa • bankowość internetowa • gry online • aukcje internetowe • Hosting plików

  3. Usługa WWW (WorldWide Web) • Pozwala na przeglądanie danych z dokumentów zawierających: tekst, grafikę, dźwięk lub nagrania wideo. • Jest mylnie uważana za sieć Internetu, a to tylko jedna z usług. • WWW pobiera informacje za pomocą łączy hipertekstowych, które łączą komputery. Aby otrzymać tak zdobytą informację, trzeba użyć przeglądarki internetowej. Do najpopularniejszych przeglądarek należą: MSIE (ang. Microsoft Internet Explorer), Firefox, Opera, Safari, Chrome, Mozilla, Google Chrome.

  4. Przeglądarki WWW • komunikują się z serwerem za pomocą protokołu HTTP, jak również HTTPS, FTP, Gopher. • wraz z przeglądarką dostarczane mogą być komponenty, które umożliwiają korzystanie z: • serwerów grup dyskusyjnych (protokół NNTP) • poczty elektronicznej (protokoły POP3, IMAP i SMTP) • serwerów plików (protokół FTP)

  5. Przeglądarki WWW - wymagania • obsługa technologii: • HTTP i HTTPS • HTML, XML i XHTML • grafika w formatach: GIF, JPEG, PNG z obsługą półprzezroczystości oraz SVG • kaskadowe arkusze stylów (CSS) • JavaScript (w tym DHTML) • obiektowy model dokumentu (DOM) • ciasteczka • AdobeFlash

  6. Warsztat pracy • Przeglądarki WWW - które zainstalować? • Testowanie stron WWW. • Edycja kodu HTML/XHTML

  7. http://ranking.pl/pl/ranking/web-browsers.html

  8. http://ranking.pl/pl/ranking/web-browsers.html

  9. Instalacja przeglądarek – najnowsze wersje • Firefox • Chrome • MSIE • WebKit Mobile • Opera • Safari

  10. Testowanie stron www • Poprawność składniowa XHTML i CSS • Wygląd w najbardziej popularnych przeglądarkach • Wpływ rozdzielczości monitora na wygląd witryny • Wygląd przy wyłączonych stylach CSS

  11. Edycja kodu XHTML

  12. XHTML • (eXtensibleHyperTekstMarkupLanguage) (rozszerzony język hipertekstowy znaczników). Łączy cechy HTML 4.01 i XML) • Specyfikacja dostępna http://www.w3.org/TR/xhtml1/ • Dokument HTML jest zwykłym plikiem tekstowym, zawierającym znaczniki „tagi”

  13. XHTML • XHTML Jest nośnikiem dla całego tekstu obecnego na stronie • Pozwala nadać strukturę tekstowi przez określenie nagłówków, podzielenie go na akapity, listy, dodanie odnośników, itp. • Określa, jakie inne pliki są potrzebne do wyświetlenia strony, jak np. obrazki, arkusze stylów i skrypty JavaScript

  14. XHTML a CSS • XHTML nie odpowiada za wygląd dokumentu • Cała strona (witryna) składa się z bardzo wielu oddzielnych dokumentów i zapisanie wyglądu za pomocą XHTML wymagało by powtarzania informacji o wyglądzie w każdym dokumencie • Zamiast tego XHTML zawiera jedynie treść, a wygląd opisuje się w osobnym, wspólnym arkuszu stylów

  15. Wymagania odnośnie kodu XHTML • elementy XHTML muszą być poprawnie zagnieżdżone • dokumenty muszą mieć poprawną formę • nazwy znaczników pisane małymi literami • wszystkie elementy XHTML muszą być domknięte

  16. Kodowanie polskich znaków • Programy komputerowe nie zinterpretują poprawnie tekstu, jeśli nie znają metody jego kodowania. • Kodowanie ustawia się w edytorze tekstu i w kodzie strony WWW. Jeśli ustawienia nie będą się zgadzać, to tekst zostanie wyświetlony nieprawidłowo

  17. UNICODE • Unicode jest uniwersalnym zbiorem znaków obejmującym praktycznie wszystkie używane rodzaje pisma i symbole. • Istnieje kilka sposobów zapisu znaków Unicode (dostosowanych dla pism europejskich lub azjatyckich). • Dla języka polskiego, najodpowiedniejsza jest wersja UTF-8

  18. kodowanie • iso-8859-2 • windows-1250 • utf-8 • znaki specjalne (encje) <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  19. XHTML • Dokument XHTML składa się z elementów • Element składa się z tagu (znacznika) otwierającego, atrybutów, zawartości i tagu zamykającego: <nazwa_elementu atrybuty> - tag otwierający zawartość - treść </nazwa_elementu> - tag zamykający

  20. XHTML • Istnieją tagi, które nie mają tagów końcowych np. <br>, <hr>, <img>, <meta> • koniecznie trzeba je domknąć: < br />

  21. XHTML • Litery w znacznikach mogą być pisane wyłącznie z małych. Niepoprawne są wyrażenia: <hEad> <HEAD> <HeAd> • Pomiędzy znakami < i / i nazwa elementu nie może być odstępu. Niepoprawne są wyrażenia: < html> </ html>

  22. XHTML • Przejrzysty kod strony: wcięcia i komentarze. Ułatwi to modyfikację strony • Komentarze są znacznikiem pozwalającym na umieszczanie treści, która nie będzie wyświetlana. W przypadku skryptów JavaScript stosuje się komentarze aby przeglądarki nie interpretowały skryptów, których nie obsługują <!- - komentarz - ->

  23. Poprawne elementy XHTML 1.0 funkcja elementy • html, head, title, body, adress • meta • div, span • h1, h2, h3, h4, h5, h6 • p, br, pre, q, blockquote, sub, sup, em, strong, dfn, code • ins, del • ul, ol, li, dl, dt, dd • definicja struktury dokumentu • dodatkowe dane o dokumencie • elementy ogólne • nagłówki • tekst • zmiany w dokumencie • listy

  24. Poprawne elementy XHTML 1.0 funkcja elementy • table, tr, td, th, caption, thead, tfoot, tbody, col, colgroup • a, link, base • img, object, param, map, area • style • form, imput, button, select, option, optgroup, textarea • script, noscript • hr, bdo • tabele • hiperłącza • obrazy i obiekty • style • formularze • skrypty • inne

  25. Struktura dokumentu XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <title> [tytuł strony] </title> </head> <body> </body> </html>

  26. Struktura strony <!DOCTYPE> • Każdy dokument powinien zawierać deklarację Structured General MarkupLanguage (Uogólniony język znaczników) i definicję typu dokumentu (DTD), wstawianą przed znacznikiem otwarcia dokumentu <html>

  27. Struktura strony • ramy dokumentu wyznaczają znaczniki <html> i </html> • przed nimi i za nimi nie może się nic znaleźć (za wyjątkiem <!DOCTYPE>)

  28. Struktura strony • pomiędzy znacznikami <html></html> znajduje się część nagłówkowa: <head> <title>tytuł dokumentu</title> </head> • W części nagłówkowej znajdują się elementy nie wyświetlane bezpośrednio na stronie (kodowanie strony, tytuł dokumentu, opis strony, słowa kluczowe...)

  29. Struktura strony • Tytuł dokumentu jest obowiązkowy. Jest wyświetlany na zakładce przeglądarki oraz w pasku tytułowym. • Pozostałe elementy znajdują się w znacznikach meta i stanowią informacje dla robotów indeksujących i przeglądarek nt. kodowania, autora strony, słów kluczowych... • w tej części znajdują się również skrypty, style ...

  30. Struktura strony • poniżej sekcji <head> znajduje się sekcja <body></body> • inaczej ciało dokumentu • w niej umieszczona jest treść strony, wszystkie obrazki, linki itp. Wszystkie elementy, które mają znaleźć się na stronie

  31. Nagłówki • Nagłówki dzielą dokument na logiczne fragmenty. Można nagłówki rozumieć jako tytuły rozdziałów, sekcji, podsekcji. Występują w sześciu „stopniach”, od <h1> (najsilniejszy podział) do <h6> (najdrobniejszy podział).

  32. Akapity <p> i łamanie linii <br /> • Akapit oznacza element <p> (paragraph). Tekst jest automatycznie łamany (zawijany) do szerokości akapitu, dlatego nie powinno się wymuszać przejść do nowej linii z wyjątkiem wierszy, linii dialogów i miejsc gdzie jest to nieuniknione, np. w adresach pocztowych wewnątrz elementu <address>.

  33. Listy nieuporządkowane: <ul> <p>Kupić:</p> <ul> <li>cukier puder,</li> <li>taśmę klejącą,</li> <li>wykałaczki.</li> </ul>

  34. Listy uporządkowane: <ol> <h1>Spis treści</h1> <ol> <li>Idą</li> <li>Walczą</li> <li>Idą</li> <li>Wrzucają pierścień</li> <li>Odpływają łódką</li> </ol>

  35. Oddzielanie elementów: <hr /> • Czasem nie da się właściwie podzielić dokumentu za pomocą nagłówków i wtedy z pomocą przychodzi (pusty) element <hr />. Wstawia poziomą linię oznaczającą podział. <p>Treść dokumentu</p> <hr /> <p>Stopka z informacją o prawie autorskim</p>

  36. Dowolny zakres: <span> <div> • Gdy do zastosowania CSS potrzeba dodatkowych elementów w dokumencie, można zastosować element nic nie znaczący — <span> lub <div>. • <span> liniowy • <div> blokowy

  37. Odnośniki: <a> • Hipertekst, czyli łączenie dokumentów ze sobą poprzez odnośniki (linki, hiperłącza, ang. anchor — kotwice). • Wstawia odnośnik do innego dokumentu lub innego miejsca w tym samym dokumencie. Atrybut href zawiera adres dokumentu. Wnętrze elementu jest widocznym tekstem odnośnika i warto dla niego dobrać odpowiednią treść. • Odnośnik do strony www: <a href="http://browsehappy.pl">Surfuj bez obaw!</a>