Kurs WWW. Paweł Rajba

Transkrypt

1 Kurs WWW Paweł Rajba

2 O czym to będzie? HTTP HTML/XHTML CSS JavaScript PHP Java (JSP) XML Serwery WWW ASP.NET

3 Literatura Dokumenty RFC W3 Konsorcjum HTTP RFC2616, RFC2817 protokół HTTP 1.1 RFC1738, RFC2396 URL, URI

4 Literatura c.d. HTML CSS

5 Literatura c.d. JavaScript PHP Java, JSP

6 Literatura c.d. XML ASP.NET

7 Narzędzia Macromedia Dreamweaver MX Microsoft FrontPage 2000 Microsoft Visual Studio.NET HotDog Pajączek 5 NxG

8 Narzędzia c.d. WebEdit 2002, EasyCSS ConTEXT Adobe Photoshop 6 GIMP [Win32]

9 Protokół HTTP/1.1 URI, URL, URN URI, czyli Uniform Resource Identifier URL, czyli Uniform Resource Locator URN, czyli Uniform Resource Name Spojrzenie Klasyczne (URI = [URL lub URN]) Obecne (URI = URL)

10 Protokół HTTP/1.1 c.d. Składnia URI <scheme>://<authority><path>?<query> Przykłady typowych schematów news://pl.comp.os.linux/ telnet:// /

11 Protokół HTTP/1.1 c.d. Przykład schematu http http: schemat, rodzaj protokołu //my.host.pl autoryzacja, nazwa hosta 8080 nr portu /index.php ścieżka do zasobu z1=w1&z2=w2 zapytanie

12 Protokół HTTP/1.1 c.d. Metody protokołu HTTP GET pobiera zasoby, HEAD działa tak samo jak GET, ale zwraca tylko sam nagłówek bez treści dokumentu, POST przesłanie danych do serwera DELETE- żąda, aby serwer usunął zasób, OPTIONS pozwala klientowi ustalić opcje i/lub wymagania związane z danym zasobem (np. listę dostępnych metod).

13 Protokół HTTP/1.1 c.d. Nagłówki ogólnego przeznaczenia Cache-Control: żądanie: no-cache no-store warunki buforowania odpowiedź: public private określa rodzaj cache a (wspólny, prywatny) Connection: keep-alive close typ połączenia Date: HTTP-date data utworzenia Pragma: no-cache informacje dla serwerów pośredniczących

14 Protokół HTTP/1.1 c.d. Nagłówki klienta Accept: typ/podtyp akceptowane typy danych Accept-Charset: alfabet akceptowany zestaw znaków Accept-Encoding: compress gzip deflate metoda kodowania Accept-Language: język akceptowany język Host: nazwa-hosta[:port]

15 Protokół HTTP/1.1 c.d. Nagłówki klienta c.d. If-Modified-Since: HTTP-date jeśli dokument został zmodyfikowany od data Range: bytes=początek-koniec wybieramy fragment dokumentu Referer: URI adres URL dokumentu zawierającego odwołanie do adresu żądanego dokumentu User-Agent: nazwa informacje o kliencie

16 Protokół HTTP/1.1 c.d. Nagłówki serwera Accept-Ranges: bytes none czy serwer akceptuje żądania cześci dokumentu Location: URI nowy adres zasobu Retry-After: HTTP-date delta-miliseconds informuje po jakim czasie należy ponownie pobrać zasób (razem z kodem 5xx lub 3xx) Server: product informacje o sofcie po stronie serwera

17 Protokół HTTP/1.1 c.d. Pola zawartości Allow: GET, HEAD dozwolone metody Content-Encoding: gzip rodzaj kodowania Content-Language: en - język Content-Length: liczba wielkość dokumentu Content-Range: początek-koniec/rozmiar pobrano bajty od początek do koniec, a całość ma rozmiar rozmiar

18 Protokół HTTP/1.1 c.d. Pola zawartości c.d. Content-Type: text/html; charset=iso typ zawartości dokumentu Expires: HTTP-date moment, po którym dokument jest już nieaktualny Last-Modified: HTTP-date data ostatniej modyfikacji dokumentu

19 Protokół HTTP/1.1 c.d. Kody odpowiedzi 1xx informacyjne, żądanie zostało przyjęte 2xx pomyślne, żądanie zostały poprawnie przetworzone 3xx przeadresowanie, w celu zakończenia czynności trzeba podjąć dalsze kroki 4xx błędny URL lub inny błąd występujący po stronie klienta 5xx błąd w pracy serwera

20 Protokół HTTP/1.1 c.d. Przykładowa komunikacja Żądanie: swiatowit:pawel:~> telnet 80 Trying Connected to swiatowit.ii.uni.wroc.pl. Escape character is '^]'. GET /~pawel/index.html HTTP/1.1 Host: Connection: keep-alive

21 Protokół HTTP/1.1 c.d. Przykładowa komunikacja c.d. I odpowiedź: HTTP/ OK Date: Sat, 21 Feb :34:11 GMT Server: Apache/ (Unix) mod_ssl/ OpenSSL/0.9.6h PHP/4.3.4 Last-Modified: Tue, 08 Oct :48:55 GMT ETag: "bc6b-339-3da30c77" Accept-Ranges: bytes Content-Length: 825 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: text/html

22 Typy dokumentów HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

23 Struktura dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <! - Nagłówek dokumentu --> </HEAD> <BODY>  </BODY> </HTML>

24 Nagłówek, czyli znacznik HEAD TITLE tytuł dokumentu wyświetlany w pasku przyglądarki META metainformacje LINK wzajemne relacje między dokumentami BASE adres bazowy dla relatywnych odwołań ze strony

25 Nagłówek, META name, content atrybuty zawierające dodatkowe informacje o dokumencie http-equiv, content atrybuty zawierające nagłówki serwera protokołu HTTP lang określa język wartości atrybutu content scheme określa dodatkowy kontekst, który ułatwia interpretację zawartości content

26 Nagłówek, META, przykłady <META name="author" content="paweł Rajba"> <META name="keywords" content="rajba,paweł,java,jsp"> <META name="description" content="strona domowa"> <META name="generator" content="dreamweaver MX 2004"> <META name="revisit-after" content="14 days"> <META name="robots" content=""> Ogólna składnia content dla Robots content = "ALL" "NONE" directives directives = directive ["," directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW

27 Nagłówek, META, BASE, przykłady <META http-equiv="content-type" content="text/html; charset=iso "> <META http-equiv="expires" content="wed, 26 Apr :21:57 GMT"> <META http-equiv="refresh" content="10"> <META http-equiv="refresh content="10; URL= <META http-equiv="pragma" content="no-cache"> <BASE href=" target="main_frame">

28 Nagłówek, LINK, atrybuty: charset kodowanie wskazywanego zasobu href adres zasobu type typ zawartości rel typ dokumentu wskazywanego rev typ dokumentu, z którego jest odwołanie do bieżącego dokumentu

29 Nagłówek, LINK, typy dokumentów (rel) Alternate alternatywna wersja dokumentu, często stosowana z atrybutem lang StyleSheet zewnętrzny arkusz styli Start strona startowa w kolekcji dokumentów Next następna strona w kolekcji Prev strona poprzednia w kolekcji Index index kolekcji dokumentów

30 Nagłówek, LINK, typy dokumentów (rel) c.d. Contents spis treści (ang. Table of Contents) dokumentów w kolekcji Glosssary słownik pojęć Copyright prawa autorskie dla dokumentu Appendix appendix dla kolecji dokumentów Help plik z dodatkową pomocą, informacjami linkami itp.

31 Nagłówek, LINK, przykłady <LINK href="style.css" type="text/css" rel="stylesheet"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <TITLE>Chapter 2</TITLE> <LINK rel="index" href="../index.html"> <LINK rel="next" href="chapter3.html"> <LINK rel="prev" href="chapter1.html"> </HEAD>...reszta dokumentu...

32 Przykładowy nagłówek: <HEAD> <TITLE>Strona domowa Pawła Rajby</TITLE> <META name="author" content="paweł Rajba, <META name="copyright" content=" 2004 Paweł Rajba"> <META name="keywords" lang="pl" content="rajba,java,jsp,php,algorytmy,sieci"> <META name="keywords" lang="en" content="rajba,java,jsp,php,algorithms,networks"> <META name="description" content="strona domowa Pawła Rajby">

33 Przykładowy nagłówek c.d.: <META scheme="month-day-year" name="date" content=" "> <META name="revisit-after" content="7 Days"> <META name="robots" content="index,follow"> <META http-equiv="content-type" content="text/html; charset=iso "> <META http-equiv="content-language" content="pl"> <LINK href="contents.html" type="text/html" rel="contents" title="spis treści"> <LINK href="style.css" type="text/css" rel="stylesheet"> <BASE href=" target="main_frame"> </HEAD>

34 Podstawowy zestaw atrybutów id identyfikator elementu w dokumencie; w ramach dokumenty identyfikatory muszą być różne class określa zestaw klas elementu style definiuje styl elementu

35 BODY, czyli treść dokumentu bgcolor="kolor" kolor tła background="uri" obrazek tła text="kolor" kolor tekstu link="kolor" kolor linków vlink="kolor" kolor odwiedzonych linków alink="kolor" kolor aktywnych linków Wszystkie powyższe atrybuty mają status Deprecated. W ich miejsce należy używać styli.

36 Grupowanie elementów DIV elementu typu block SPAN element typu inline Atrybut: align, lang

37 Formatowanie tekstu EM wyróżnienie STRONG mocne wyróżnienie DFN definicja CODE fragment kodu programu SAMP wynik działania programu, skryptu, VAR zmienna, argument programu ABBR skróty (np. WWW, HTTP, URI, )

38 Formatowanie tekstu c.d. TT czcionka stałej szerokości I pochylenie B pogrubienie BIG "duży" font SMALL mały font STRIKE lub S przekreślenie (Deprecated) U podkreślenie (Deprecated)

39 Formatowanie tekstu c.d. FONT ustawia czcionkę size rozmiar, liczba od 1 do 7 lub relatywnie np. +1, -3 color face lista nazw czcionek Przykład: <FONT face="arial, Helvetica, sans-serif" size="+2" color="navy">

40 Cytowania BLOCKQUOTE typu block Q typu inline Atrybut: cite="url" Indeksy SUB dolny SUP górny

41 Elementy blokowe H1-H6 nagłówki tekstu ADRESS adres P akapit tekstu PRE preformatowany fragment tekstu BR złamanie linii Atrybut: clear="left" "right" "both" HR linia pozioma Atrybuty: align, noshade, size, width

42 Elementy blokowe c.d. INS, DEL elementy mające za zadanie zaznaczać fragmenty tekstu, które zmieniły się w kolejnej wersji dokumentu Atrybuty cite="url" dodatkowa informacja, która ma pomóc wyjaśnić, dlaczego dokument został zmieniony datetime="datetime" data zmiany dokumentu

43 Listy UL nienumerowane (Unordered Lists) type="disc" "circle" "square" compact większy stopień upakowania OL nienumerowane (Ordered Lists) type="1" "A" "a" "i" "I" compact większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated.

44 Listy c.d. LI element listy (List Item) type=odpowiednio do UL lub OL value="30" numer elementu listy compact większy stopień upakowania Wszystkie powyższe atrybuty są Deprecated.

45 Listy przykład Kod: <OL start="5" type="a"> <LI>Pierwszy punkt</li> <LI value="30">drugi punkt</li> <LI type="1">trzeci punkt i tutaj value jest 31</LI> </OL> Da wynik: E. Pierwszy punkt AD. Drugi punkt 31. Trzeci punkt i tutaj value jest 31

46 Listy przykład zagnieżdżania <UL> <LI>Dzień pierwszy</li> <LI> <OL><LI>Jedzenie</LI> <LI>Spanie</LI></OL> </LI> <LI>Wszystkie pozostałe dni</li> <LI> <OL><LI>Jedzenie</LI> <LI>Spanie</LI></OL> </LI> </UL>

47 Lista definicji DL definition list DT definition type DD definition data

48 Lista definicji - przykład Kod: <DL> <DT>Kura</DT> <DD>Zwierzątko małorolne</dd> <DT>Łasica</DT> <DD>Zwierzątko zupełnie nierolne</dd> </DL> Wynik: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne

49 Tabele znaczniki TABLE, TR, TH, TD Mały przykład na początek: <table> <tr><th>nr indeksu</th><th>ocena</th></tr> <tr><td>91044</td><td>5.0</td> <tr><td>91057</td><td>5.0</td> <tr><td>91088</td><td>5.0</td> <tr><td>91092</td><td>5.0</td> </table>

50 Tabele, TABLE summary="tekst" opis tabeli width="50%" "500" szerokość tabeli border="2" cellpadding="4" cellspacing="1"

51 Tabele, TR wiersz w tabeli align="left" "center" "right" "justify" valign="top" "middle" "bottom" Tabele, TH, TD komórka w tabeli align, valign - wyrównywanie nowrap blokuje automatyczne zawijanie wierszy width="40" szerokość kolumny height="20" wysokość kolumny Powyższe atrybuty dla TH i TD są Deprecated.

52 Tabele TH, TD c.d. headers="a1 a2" id komórek, którą są nagłówkiem dla bieżącej komórki scope="row" "col" "rowgroup" "colgroup" określa, jaki jest zakres komórki nagłówka rowspan="4" łączy wiersze colspan="2" łączy kolumny CAPTION tytuł tabeli

53 Tabela, kolejny przykład <table cellspacing="2" cellpadding="4" border="1" bgcolor="aqua" width="80%" summary="oceny studentów z kursu WWW"> <tr><th id="n1" scope="col">indeks</th> <th id="n2" scope="col">ocena</th> <th id="n3" scope="col">grupa</th></tr> <tr><td headers="n1">91044</td> <td headers="n2">5.0</td> <td headers="n3" rowspan="2">gr. 1</td></tr> <tr><td headers="n1">91055</td> <td headers="n2">5.0</td></tr> <tr><td headers="n1 n2 n3" colspan="3">razem</td></tr> </table>

54 Tabela, kolejny przykład c.d.