Kurs WWW Paweł Rajba

Prezentacja na temat: "Kurs WWW Paweł Rajba"— Zapis prezentacji:

1 Kurs WWW Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/

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

3 Literatura Dokumenty RFC http://www.ietf.org/rfc/ http://rfc.sunsite.dk/ W3 Konsorcjum http://www.w3.org/ HTTP RFC2616, RFC2817 – protokół HTTP 1.1 RFC1738, RFC2396 – URL, URI

4 Literatura c.d. HTML 4 http://www.w3.org/TR/html4/ http://validator.w3.org/ http://webmaster.helion.pl/kurshtml/ CSS http://www.w3.org/Style/CSS/ http://www.w3.org/TR/CSS2/ http://jigsaw.w3.org/css-validator/

5 Literatura c.d. JavaScript http://devedge.netscape.com/central/javascript/ PHP http://www.php.net/ Java, JSP http://java.sun.com/ http://java.sun.com/products/jsp/

6 Literatura c.d. XML http://www.w3.org/XML/ http://www.w3.org/TR/xmlbase/ http://www.w3.org/Style/XSL/ http://www.w3.org/TR/2004/REC-xml-20040204/ ASP.NET http://www.microsoft.com/ http://msdn.microsoft.com/

7 Narzędzia Macromedia Dreamweaver MX 2004 http://www.macromedia.com/ Microsoft FrontPage 2000 Microsoft Visual Studio.NET http://www.microsoft.com/ HotDog 7.03 http://www.sausage.com/ Pajączek 5 NxG http://www.creamsoft.com.pl/

8 Narzędzia c.d. WebEdit 2002, EasyCSS 2003 http://www.harman2k.co.uk/ ConTEXT http://fixedsys.com/context/ Adobe Photoshop 6 http://www.adobe.com/ GIMP 1.3 http://www.gimp.org/ http://www2.arnes.si/~sopjsimo/gimp/http://www2.arnes.si/~sopjsimo/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 :// ? Przykłady typowych schematów http://localhost:80/index.php?z1=w1&z2=w2 ftp://user:pass@serwer.pl:21/dokument.txt mailto:pawel@ii.uni.wroc.pl news://pl.comp.os.linux/ telnet://156.17.4.4/

11 Protokół HTTP/1.1 c.d. Przykład schematu http http://my.host.pl:8080/index.php?z1=w1&z2=w2 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 cachea (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-8859-2 – 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 www.ii.uni.wroc.pl 80 Trying 156.17.4.1... Connected to swiatowit.ii.uni.wroc.pl. Escape character is '^]'. GET /~pawel/index.html HTTP/1.1 Host: www.ii.uni.wroc.pl Connection: keep-alive

21 Protokół HTTP/1.1 c.d. Przykładowa komunikacja c.d. I odpowiedź: HTTP/1.1 200 OK Date: Sat, 21 Feb 2004 19:34:11 GMT Server: Apache/1.3.28 (Unix) mod_ssl/2.8.15 OpenSSL/0.9.6h PHP/4.3.4 Last-Modified: Tue, 08 Oct 2002 16: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 HTML Typy dokumentów HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

23 HTML Struktura dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

24 HTML 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 HTML 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 HTML Nagłówek, META, przykłady Ogólna składnia content dla Robots content = "ALL" | "NONE" | directives directives = directive ["," directives] direcitve = INDEX,NOINDEX,FOLLOW,NOFOLLOW

27 HTML Nagłówek, META, BASE, przykłady <META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <META http-equiv="Expires" content="Wed, 26 Apr 2001 08:21:57 GMT"> <META http-equiv="Refresh content="10; URL=http://www.onet.pl/"> <BASE href="http://www.ii.uni.wroc.pl/" target="main_frame">

28 HTML 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 HTML 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 HTML 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 HTML Nagłówek, LINK, przykłady <LINK href="style.css" type="text/css" rel="StyleSheet"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Chapter 2...reszta dokumentu...

32 HTML Przykładowy nagłówek: Strona domowa Pawła Rajby pawel@ii.uni.wroc.pl <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">

33 HTML Przykładowy nagłówek c.d.:

34 HTML 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 HTML 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 HTML Grupowanie elementów DIV – elementu typu block SPAN – element typu inline Atrybut: align, lang

37 HTML 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 HTML 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 HTML 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:

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

41 HTML 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 HTML 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 HTML 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 HTML 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 HTML Listy – przykład Kod: Pierwszy punkt Drugi punkt Trzeci punkt i tutaj value jest 31 Da wynik: E. Pierwszy punkt AD. Drugi punkt 31. Trzeci punkt i tutaj value jest 31

46 HTML Listy – przykład zagnieżdżania Dzień pierwszy Jedzenie Spanie Wszystkie pozostałe dni Jedzenie Spanie

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

48 HTML Lista definicji - przykład Kod: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne Wynik: Kura Zwierzątko małorolne Łasica Zwierzątko zupełnie nierolne

49 HTML Tabele – znaczniki TABLE, TR, TH, TD Mały przykład na początek: Nr indeksu Ocena 91044 5.0 91057 5.0 91088 5.0 91092 5.0

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

51 HTML 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 HTML 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 HTML Tabela, kolejny przykład <table cellspacing="2" cellpadding="4" border="1" bgcolor="aqua" width="80%" summary="Oceny studentów z kursu WWW"> Indeks Ocena Grupa 91044 5.0 Gr. 1 91055 5.0 Razem

54 HTML Tabela, kolejny przykład c.d.