Transcript Kurs WWW – czyli opowieści niesamoWWWite

Kurs WWW
Paweł Rajba
[email protected]
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:[email protected]:21/dokument.txt
 mailto:[email protected]
 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 -->
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">
HTML
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>
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
 <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
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">
<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">
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"
"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...
HTML
Przykładowy nagłówek:
<HEAD>
<TITLE>Strona domowa Pawła Rajby</TITLE>
<META name="Author" content="Paweł Rajba,
[email protected]">
<META name="Copyright" content="&copy;
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">
HTML
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>
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:
<FONT face="Arial, Helvetica, sans-serif" size="+2"
color="navy">
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:
 <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
HTML
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>
HTML
Lista definicji
 DL – definition list
 DT – definition type
 DD – definition data
HTML
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
HTML
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>
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">
<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>
HTML
Tabela, kolejny przykład c.d.