Kurs WWW Paweł Rajba
O czym to będzie? HTTP HTML/XHTML CSS JavaScript PHP Java (JSP) XML Serwery WWW ASP.NET
Literatura Dokumenty RFC W3 Konsorcjum HTTP RFC2616, RFC2817 – protokół HTTP 1.1 RFC1738, RFC2396 – URL, URI
Literatura c.d. HTML CSS
Literatura c.d. JavaScript PHP Java, JSP
Literatura c.d. XML ASP.NET
Narzędzia Macromedia Dreamweaver MX Microsoft FrontPage 2000 Microsoft Visual Studio.NET HotDog Pajączek 5 NxG
Narzędzia c.d. WebEdit 2002, EasyCSS ConTEXT Adobe Photoshop 6 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 :// ? Przykłady typowych schematów news://pl.comp.os.linux/ telnet:// /
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
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 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
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 – 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 80 Trying Connected to swiatowit.ii.uni.wroc.pl. Escape character is '^]'. GET /~pawel/index.html HTTP/1.1 Host: Connection: keep-alive
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
HTML 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" "
HTML Struktura dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
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
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
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
HTML 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; URL= <BASE href=" target="main_frame">
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
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
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.
HTML Nagłówek, LINK, przykłady <LINK href="style.css" type="text/css" rel="StyleSheet"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Chapter 2...reszta dokumentu...
HTML Przykładowy nagłówek: Strona domowa Pawła Rajby <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">
HTML Przykładowy nagłówek c.d.:
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
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.
HTML Grupowanie elementów DIV – elementu typu block SPAN – element typu inline Atrybut: align, lang
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, …)
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)
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:
HTML Cytowania BLOCKQUOTE – typu block Q – typu inline Atrybut: cite="URL" Indeksy SUB – dolny SUP – górny
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
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
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.
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.
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
HTML Listy – przykład zagnieżdżania Dzień pierwszy Jedzenie Spanie Wszystkie pozostałe dni Jedzenie Spanie
HTML Lista definicji DL – definition list DT – definition type DD – definition data
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
HTML Tabele – znaczniki TABLE, TR, TH, TD Mały przykład na początek: Nr indeksu Ocena
HTML Tabele, TABLE summary="tekst" – opis tabeli width="50%" | "500" – szerokość tabeli border="2" cellpadding="4" cellspacing="1"
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.
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
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 Gr Razem
HTML Tabela, kolejny przykład c.d.