380 likes | 523 Views
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
E N D
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 • Hosting plików
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.
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)
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
Warsztat pracy • Przeglądarki WWW - które zainstalować? • Testowanie stron WWW. • Edycja kodu HTML/XHTML
Instalacja przeglądarek – najnowsze wersje • Firefox • Chrome • MSIE • WebKit Mobile • Opera • Safari
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
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”
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
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
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
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
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
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" />
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
XHTML • Istnieją tagi, które nie mają tagów końcowych np. <br>, <hr>, <img>, <meta> • koniecznie trzeba je domknąć: < br />
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>
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 - ->
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
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
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>
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>
Struktura strony • ramy dokumentu wyznaczają znaczniki <html> i </html> • przed nimi i za nimi nie może się nic znaleźć (za wyjątkiem <!DOCTYPE>)
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...)
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 ...
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
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ł).
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>.
Listy nieuporządkowane: <ul> <p>Kupić:</p> <ul> <li>cukier puder,</li> <li>taśmę klejącą,</li> <li>wykałaczki.</li> </ul>
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>
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>
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
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>