1 / 37

Projektowanie Stron WWW

Projektowanie Stron WWW. dr inż. Marta Pelczar. 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

eugene
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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>

More Related