Kurs WWW Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/
O czym to będzie? HTTP HTML/XHTML CSS JavaScript PHP Java (JSP) XML Serwery WWW ASP.NET
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
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/
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/
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/
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/
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/ [Win32]
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)
Protokół HTTP/1.1 c.d. Składnia URI <scheme>://<authority><path>?<query> 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/
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
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).
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
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]
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
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
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
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
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
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
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 <!-- Treść dokumentu -->
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">
Struktura dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <! - Nagłówek dokumentu --> </HEAD> <BODY> <!-- Treść dokumentu --> </BODY> </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
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
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
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"> <META http-equiv="refresh content="10; URL=http://www.onet.pl/"> <META http-equiv="pragma" content="no-cache"> <BASE href="http://www.ii.uni.wroc.pl/" target="main_frame">
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
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
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.
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"> <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...
Przykładowy nagłówek: <HEAD> <TITLE>Strona domowa Pawła Rajby</TITLE> <META name="author" content="paweł Rajba, 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"> <META name="description" content="strona domowa Pawła Rajby">
Przykładowy nagłówek c.d.: <META scheme="month-day-year" name="date" content="10-10-98"> <META name="revisit-after" content="7 Days"> <META name="robots" content="index,follow"> <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> <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="http://www.ii.uni.wroc.pl/" target="main_frame"> </HEAD>
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
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.
Grupowanie elementów DIV elementu typu block SPAN element typu inline Atrybut: align, lang
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, )
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)
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">
Cytowania BLOCKQUOTE typu block Q typu inline Atrybut: cite="url" Indeksy SUB dolny SUP górny
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
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
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.
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.
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
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>
Lista definicji DL definition list DT definition type DD definition data
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
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>
Tabele, TABLE summary="tekst" opis tabeli width="50%" "500" szerokość tabeli border="2" cellpadding="4" cellspacing="1"
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.
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
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>
Tabela, kolejny przykład c.d.