Podstawy WWW

Jarosław Koźlak KI AGH, 2003/2004

Organizacja

Prowadzący:

dr inż. Jarosław Koźlak C2, 3 piętro, p 306 [email protected]

http://galaxy.uci.agh.edu.pl/~kozlak • • • • • • • • • • • •

Plan wykładu

Prezentacja WWW HTML (struktura dokumentu, podstawowe tagi, polskie znaki, listy, odsyłacze, obrazki, mapy odsyłaczy, multimedia, style, rozszerszenia) Kaskadowe arkusze stylów Protokół HTTP (struktura, przykłady interakcji) CGI Formularze PHP Cookies JavaScript Serwery HTTP (najpopularniejsze realizacje, podstawowe parametry) Przeglądarki WWW XML

Podstawowa bibliografia

• Laura Lemay, "HTML 4", Vademecum profesjonalisty, Wydawnictwo Helion, 1998 (Macmillan Computer Publishing, 1998) • Maria Sokół, "Tworzenie stron WWW. Ćwiczenia praktyczne", Helion 2000 • Bartosz Czyżkowski. „Ćwiczenia z tworzenia stron WWW”, MIKOM 2001 • Stephen Spainhour, Valerie Quercia, "Webmaster. Podręcznik administratora", RM,1997 (O'Reilly 1996) • Rafe Colburn, "CGI", Helion 1998 (Macmillan Computer Publishing, 1998) • Eugene Eric Kim, ”Programowanie CGI. Przewodnik”, LT & P, 1996 • Jason Cranford Teague, "DHTML. Dynamic HTML", Helion 1999 • "Professional Java Server Programming", WOX Press, 1999 • Julie C. Meloni „PHP. Podręcznik tworzenia stron WWW“, Wydawnictwo MIKOM, 2001, • Jerry Bradenbaugh, „JavaScript Receptury. Programowanie aplikacji sieciowych w języku JavaScript”, Helion 2001 (O’Reilly 1999)

Ogólna prezentacja WWW (World Wide Web) Co to jest WWW:

• "globalny, interaktywny, dynamiczny, wieloplatformowy, rozproszony, graficzny, hipertekstowy system informacyjny działający na bazie Internetu„ • • •

Hipertekstowy system informacyjny

Hipertekst umożliwia czytanie i poruszanie się po tekście lub innej informacji wizualnej w sposób nieliniowy, w sposób nieliniowy, zależny od tego, do jakich informacji użytkownik chce uzyskać dostęp w dalszej kolejności Przykłady hipertekstu:

kontekstowe systemy pomocy (np. Help w Micosoft Windows)

Ogólna prezentacja WWW 2

Realizacja:

• występują hiperpołączenia, odwołując się do których można dostać się do innych części danego dokumentu, lub też innych dokumentów

System graficzny

• istnieje możliwość wyświetlenia na jednej stronie tekstu i grafiki (jak również dzwięku i sekwencji wideo)

Ogólna prezentacja WWW 3

• • •

Sieć wieloplatformowa

można uzyskać dostęp do WWW używając różnego rodzaju sprzętu ograniczenia spowodowane używaniem elementów charakterystycznych tylko dla danej architektury (np. plug ins w przeglądarce, polecenia interpretowane tylko przez niektóre przeglądarki itd.) dane zlokalizowane na serwerach internetowych o różnych architekurach • •

Sieć rozproszona

informacje zlokalizowane na serwerach rozmieszczonych na całym świecie (identyfikowanych przez adres WWW) z punktu widzenia użytkownika - lokalizacja nie decyduje(generalnie) o dostępności informacji (w praktyce: przepustowość, możliwość ograniczenia dostępu do informacji tylko dla poszczególnych domen) • •

Sieć dynamiczna

dane zlokalizowane na serwerach mogą być w każdej chwili zmodyfikowane sieć podlega ciągłym zmianom

Ogólna prezentacja WWW 4

• • •

Sieć interakcyjna

interakcja wymiana informacji między użytkownikiem i serwerem WWW wybieranie połączenia i przechodzenie do innej strony możliwość komunikacji z osobami publikującymi strony i innymi odbiorcami ich (np. poprzez formularze, które strony mogą zawierać) • • • • • •

Przeglądarki sieciowe

programy, które służą do oglądania i poruszania się po stronach WWW czynności przeglądarki; uzyskuje dostęp do informacji na podstawie adresu URL obsługa protokołów (http i innych) - przeglądarki potrafią odczytywać nie tylko WWW (protokół HTTP), ale takze gopher, ftp, mailto, usenet formatowanie i wyświetlanie dokumentów HTML, oraz innych (grafika, dzwięk, wideo) najpopularniejsze przeglądarki: Netscape, Micosoft Internet Explorer, Lynx • •

Serwery WWW

służą do publikowanai dokumentów w sieci WWW odpowiada na żądanie przeglądarki i wysyła jej odpowiednie informacje

URL (ang. uniform resource locator)

URL uniwersalny identyfikator zasobów • adres określający lokalizację porcji informacji w Internecie Części składowe URL: http://www.agh.edu.pl/info.html

protokół | nazwa serwera | ścieżka dostępu i nazwa pliku •

Protokół

• http • ftp • gopher metoda dostępu do strony, określa, jak przeglądarka pobiera plik z sieci • przykłady protokołów

URL (ang. uniform resource locator) 2

•

Nazwa serwera

- identyfikuje system w sieci Internet,na którym są zlokalizowane informacje • numer portu - może występować w nazwie serwera, informuje, że połączenie powinno zostać utworzone przy użyciu portu o podanym numerze innym niż domyślny port dla danego protokołu •

Katalog i nazwa pliku

systemie) określa położenie pliku na serwerze (może być rzeczywistą nazwą pliku, albo określać w inny sposób położenie danych w

HTML

(ang. Hyper Text Markup Language)

HTML

powstał w oparciu o dokumentów

SGML

(ang. Standard Generalized Markup Language), który jest rozbudowanym językiem do tworzenia SGML • język opisu struktury strony, a nie jej konkretnych elementów - podstawowa różnica w porównaniu z edytorami WYSIWIG (ang. What You See Is What You Get), • tę właściwość ma również HTML

HTML 2

HTML język opisu struktury strony ma zdefiniowany zestaw stylów, które są używane w dokumentach: – nagłówki, – akapity, – listy, – tabele, – pewne elementy formatowania znaków (pogrubienia, tekst pochyły)

Znaczniki w HTML

• pisanie w HTML obejmuje: • napisanie tekstu • dodanie do tekstu odpowiednich znaczników, które określają różne elementy strony i wpływają na jej sposób prezentacji w przeglądarce •

Znaczniki:

• postać większości znaczników : <

NazwaZnacznika

> text

NazwaZnacznika

> znacznik początkowy znacznik końcowy • znaczniki formatują zagnieżdzone między nimi partie tekstu • różne przeglądarki interpretują zbiory znaczników, które mogą się w pewnym stopniu różnić od siebie

Atrybuty

• specjalne elementy znaczników, które zawierają dodatkow opcje lub informacj o znacznikach • przeglądarki WWW ignorują atrybuty, których znaczenia nie rozumieją

Rozwój języka HTML

• HTML 2.0 - podstawowy zestaw znaczników • HTML 3.2 (1996) - dodano możliwość wyświetlania ramek, tła dokumentu, rozszerzoną obsługę formularzy, nowe opcje formatowania akapitów, kontrolę czcionek • HTML 4.0 (lipiec 1997) - dodano m.in. kaskadowe arkusze stylów, możliwość określenia bezwzględnej pozycji obiektu na stronie, ramki i skrypty po stronie klienta

Struktura dokumentu

• • • • • • • • •

Przykład dokumentu:

To jest dokument HTML

• • • •

Podstawowe znaczniki struktury dokumentu

, < /HTML> znacznik określający, że zawartość danego pliku jest kodem w HTML-u cała zawartość pliku powinna znajdować się pomiędzy początkowym i końcowym znacznikiem • • • …. tekst strony …..

• • • • • • •

Znaczniki struktury dokumentu

, oznacza nagłówek strony w obrębie nagłówka może się znaleźć tylko kilka specjalnych znaczników jak tytuł strony, … • • , pomiędzy tymi znacznikami znajduje się tekst strony • • • • • • • nadaje stronie tytuł z tytułu korzystają przeglądarki i programy katalogujące strony WWW w wielu przeglądarkach pojawia się na paski tytułowego okna programu tytuł określa temat strony i opisuje stronę na listach stron i wykazach ostatnio odwiedzanych/ulubionych miejsc znacznik Tekst wyświetlany w przeglądarce nie obsługującej ramek

Kaskadowe arkusze stylów

Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) :jest to zalecana przez W3C metoda stosowania stylów arkusze stylów dają twórcy strony ścisłą kontrolę nad jej wyglądem i pozwalają oddzielić zawartość od elementów konstrukcyjnych (co ułatwia późniejsze zmiany) przed wprowadzeniem arkuszy, wygląd strony był uzależniony od przeglądarki, która decydowała o sposobie rozmieszczenia zawartości dokumentu

kaskadowy -

można łączyć informacje o stylach z wielu źródeł - styl ogólny z pliku zewnętrznego może zostać połączony ze stylami specyficznymi dla danego elementu, zdefiniowanymi za pomocą atrybutu STYLE tego elementu

definicje stylu zawarte w arkuszu obowiązują kaskadowo - te zawarte w ostatnich arkuszach dominują nad definicjami wcześniejszymi

• • arkusze CSS są obsługiwane przez przeglądarki : Microsoft Internet Explorer wersja 4 i późniejsze (IE3 obsługuje pewne elementy CSS) Netscape Navigator, wersja 4 i późniejsze

Przeglądarki obsługujące kaskadowe arkusze stylów

arkusze CSS są obsługiwane przez przeglądarki : • Microsoft Internet Explorer wersja 4 i późniejsze (IE3 obsługuje pewne elementy CSS) • Netscape Navigator, wersja 4 i późniejsze

Kaskadowe arkusze stylów 2

wszystkie osadzone arkusze stylów mają tę samą postać definicji i są umieszczane w sekcji stron WWW

Ogólna postać arkusza CSS:

• • • lista znaczników HTML z właściwościami arkusza, które je definiują właściwości muszą być umieszczone w nawiasach klamrowych ({}) oraz oddzielone średnikami (;) przeglądarki, które nie potrafią obsługiwać arkuszy stylów potraktują kod jak komentarz

Przykład definicji stylu Przykład definicji: tekst w tej sekcji będzie pisany odpowiednią czcionką Definicja kroju pisma, który zostanie zastosowany do tekstu strony w sekcji BODY, tekst pisany czcionką Verdana, jeśli nie zostanie ona znaleziona – wówczas Arial lub Helvetica. Powyższa definicja nie obejmuje tekstu występującego w komórkach tabeli

1.

Łączenie deklaracji stylu z dokumentem HTML

Opis stylów w oddzielnym dokumencie. Zastosowanie znacznika

...

2. Włączenie deklaracji stylów do dokumenty HTML. Znacznik

Łączenie deklaracji stylu z dokumentem HTML 2 • 3. Umieszczenie poleceń stylów w kodzie dokumentu HTML, bezpośrednio po znaczniku, którego dotyczą Przykłady:

Nagłówek pierwszego stopnia

To jest tekst akapitu

• •

Kaskadowe arkusze stylów. Klasy

z definicji arkusza stylów wynika, że np. przypisanie nagłówkowi H2 koloru niebieskiego sprawi, że wszystkie nagłówki tego rzędu będą tej barwy jeśli chce się tylko kilku z nich nadać ten kolor -> można to uzyskąc przy pomocy klas

• po wstawieniu powyższego arkusza stylów do dokumentu HTML, nagłówki H1 nie staną się niebieskie - trzeba wskazać nagłówek, który ma być wyświetlony w tym kolorze, poprzez użycie atrybutu CLASS:

Ten nagłówek JEST niebieski

Kaskadowe arkusze stylów. Klasy 2

• klasa blue jest stowarzyszona tylko ze znacznikiem H1, nie będzie działać, ze znacznikiem H2, jeśli ma się ona odnosić do dowolnego znacznika, należy napisać: •

Kaskadowe arkusze stylów. Przykładowa definicja arkusza stylów

Kaskadowe arkusze stylów. Przykładowa definicja arkusza stylów - objaśnienie

• • • • • • • W tym arkuszu: Podstawowy krój pisma: Times New Roman (drugorzędna czcionka: standardowa szeryfowa) Zdefiniowano kolor: czarny Nagłówki H1 i H2 są pisane czcionką Verdana (lub Arial, ewentualnie standardową czcionką bezszeryfową) w kolorze kasztanowym Rozmiar czcionek nagłówka H1 wynosi 140% rozmiaru tekstu podstawowego, a w nagłówka H2 - 110% rozmiaru tekstu podstawowego Tabele umieszczone na stronie mają obramowanie o szerokości 3 pikseli, a odległość między obramowaniem i tekstem wynosi 2 piksele Komórki nagłówka tabeli mają tło w kolorze jasnożółtym (#FFFFCC) oraz tekst w kolorze czarnym Zdefiniowano klasę verdana (bez znacznika), a więc można ją zastosować wszędzie, gdzie ma się pojawić czcionka o takim kroju Całą definicję umieszczono w obrębie znacznika komentarza, aby była ignorowana przez przeglądarki, które nie obsługują arkuszy CSS

CSS: ID • Zastosowanie ID zmienia właściwości znacznika, któremu jest przypisany odpowiedni ID Przykład:

#zielony { color: green;}

Wywołanie ID:

Ten tekst będzie zielony

CSS. Przykład: Modyfikacja wyglądu odnośników Kaskadowe arkusze stylów posiadają zdefiniowane standardowe klasy – pseudoklasy Pseudoklasy odpowiedzialne za określanie wyglądu odnośników: A:LINK, A:VISITED i A:HOVER

A:link /*standardowy odnośnik*/ { font-size: 12pt; color: navy; } A:link /*odnośnik odwiedzony*/ { font-size: 12pt; color: blue; } A:link /*odnośnik po najechaniu na niego myszką*/ { font-size: 12pt; color: red; }

CSS:Właściwości czcionek

CSS:Właściwości tekstu

CSS:Kolor i tło dokumentu

CSS:Marginesy

CSS:Listy

Przydatne adresy WWW

• • • www.w3.org

-

strona główna W3C http://www.ournet.pl/kurshtml/ - kurs tworzenia stron WWW (w języku polskim) www.agh.edu.pl/ogonki - informacje dotyczące stosowania polskich znaków na stronach WWW i zbiór programów służących do konwersji między różnymi formatami zapisu polskich znaków