Transcript WWW
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,Nagłówki
służą do podziału tekstu na części (rola podobna jak rozdziały w książce) zdefiniowane jest 6 poziomów nagłówka, które różnią się: wielkością atrybutami czcionki (pogrubienie, podkreślenie, wielkie litery) narzędzia tworzące indeksy do przeszukiwania zasobów sieci korzystają z nagłówków, by oznaczyć najważniejsze elementy strony Postać nagłówka :
To jest nagłówek
To jest rozdział 1
To jest podrozdział 1.1
To jest podrozdział 1.2
Akapity
• służą do określenie początku i końca akapitu • znacznik końca akapitu - opcjonalny • warto używać znacznika
na początku każdego akapitu (m.in. ułatwia dosuwanie tekstu dolewej/prawej strony i jego centrowanie) •
Tekst w akapicie
Łamanie linii
•
- łamanie linii • nie wstawia dodatkowych linii, tylko zapewnia rozpoczęcie wyświetlania tekstu od nowej linii
Linie poziome
wstawia na stronie poziomą linię atrybuty znacznika
• SIZE - określa grubość linii (w pikselach), standardowa wartość (minimalna) 2 • WIDTH - określa długość linii w poziomie (w pikselach lub w procentach aktualnej szerokości ekranu) • ALIGN - określa położenie linii jeśli nie wypełnia ona całej szerokości ekranu, możliwe wartości: ALIGN=LEFT, ALIGN=RIGHT, ALIGN=CENTER
Polskie znaki
• obowiązujący w Internecie standard kodowania polskich znaków ISO-8859-2 (zwane też ISO Latin-2) • nie należy kodować stron w innych formatach (takich jak CP 1250) • aby przeglądarka wiedziała, że dana strona jest napisana w standardzie ISO-8859 umieścić) 2 należy w jej nagłówku (między znacznikami
….Listy
• Rodzaje list: • listy numerowane • listy wypunktowane • listy definicji (każda pozycja jest złożona z pojęcia i definicji, pojęcie jest wyróżnione) • listy menu • listy katalogów (listy małych elementów, które mogą być porządkowane poziomo lub pionowo)
Listy: Zasada budowy
• Charakterystyczne własności znaczników list: • cała lista jest objęta przez znaczniki początkowe i końcowe, odpowiednie dla danego rodzaju listy (np.
- i
Przykład listy
•
Trylogia Sienkiewicza składa się z następujących części
•- •
- Ogniem i mieczem
- Potop
- Pan Wołodyjowski •
Listy numerowane
• są objęte znacznikami
- …
- element 1 • •
- element 2
- element 3 •
Atrybuty list numerowanych • znaczniki list numerowanych istnieją atrybuty, które pozwalają sposobem wyświetlania listy przez przeglądarkę: • można wybrać sposób numeracji • można określić liczbę, od której numeracja ma się rozpocząć
Atrybuty list numerowanych: Atrybut TYPE •
Atrybut TYPE
domyślnie , pozwala wybrać jeden z poniższych schematów numerowania: • "1" - numeracja w formie (1,2,3 …) - przyjmowana • "a" - numeracja w formie (a,b,c …) • "A" - numeracja w formie (A,B,C…) • "i" - numeracja w formie (i,ii,iii,iv…) • "I" - numeracja w formie (I, II, III, IV…) • Schemat numeracji jest zapisywany w znaczniku
- • np.
- -- zmiana w schemacie numeracji ma miejsce poczynając od elementu listy, w którym znacznik został użyty
Atrybuty list numerowanych: Atrybut START •
Atrybut START
określa, od jakiej liczby lub litery nalezy rozpocząć numercję np.
•
- - pierwszym numerem w liście numerowanej alfabetycznie będzie c
- •
Atrybut TYPE
pozwala na zmiane formatu listy w niektórych przeglądarkach: – "disc" - kółko (wypełnione) lub kropka, wartość przyjmowana standardowo – "square" - mały kwadrat – "circle" - puste kółko • Można zmienić symbol wypunktowania poczynając od dowolneho elementu listy, używając atrybuty TYPE w znaczniku
-
Listy definicji
Każdy element listy jest złożony z: • pojęcia • Definicji Znaczniki: •
- -- oznacza pojęcie •
- -- oznacza definicję • oba powyższe znaczniki są pojedyncze i występują zazwyczaj parami
- …
- Pojęcie 1< DD> Definicja pojęcia 1
- Pojęcie 2
- Definicja pojęcia 2
- Pojęcie 3
- Definicja pojęcia 3
Listy menu
•
Menu
• listy lub krótkie akapity nie poprzedzone żadnymi znakami ani numerami • listy menu zawierają się między znacznikami
Listy katalogów
• stworzone dla elementów jeszcze krótszych, niż listy menu • powinny być przedstawiane przez przeglądarki w postaci kolumn jak np. lista zawartości katalogu w systemie DOS czy Unix • listy katalogów znajdują się w obrębie znaczników
… • każdy element listy jest poprzedzony znacznikiem• • •
Listy zagnieżdzone
jest możliwe zagnieżdzanie list w HTML aby zagnieździć listy wystarczy całą listę jako element innej listy wiele przeglądarek odróżnia listy nadrzędne i zagnieżdzone i formatuje je w różny sposób (inny symbol wypunktowania, lub inny schemat numeracji w liście zagnieżdzonej ) • • • • • • • • • • • • Przykład:
- WWW
- HTML
- Co to jest HTML
- Struktura dokumentu
- Nagłówki
- Paragrafy
- Komentarze
- Linki
Komentarze
• można wstawiać do tekstu HTML-owego komentarze (do opisu elementów strony lub jej statusu) • składnia komentarza: • nie należy wstawiać w komentarzach żadnych innych znaczników HTML, gdyż może to zmylić przeglądarkę • nie należy używać w komentarzach znaków: < > --
Połączenia
• •
Do utworzenia hiperpołączenia są potrzebne:
nazwa pliku (lub jego URL), do którego będzie prowadziło połączenie tekst, który będzie wyróżniony przez przeglądarkę i po wybraniu którego nastąpi realizacja połączenia • • •
Składnia znacznika
do tworzenia hiperpołączeń służy znacznik
atrybut HREF (ang. Hypertext REFerence) odnośnik hipertekstowy tekst pomiędzy znacznikami - wyróżniony, reprezentuje na stronie hiperpołączenie • • •
Przykład:
Powrót do Menu Głównego
• •
Połączenia do innych stron na dysku lokalnym
ścieżki względne (preferowane) ścieżki bezwzględne (problem z przenośnością stron, które je wykorzystują) •
Połączenia do innych stron w Internecie:
Połączenia i odnośniki wewnątrz strony
• • realizacja połączenia do konkretnego miejsca strony • służą do tego umieszczane w kodzie strony odnośniki - miejsca w dokumencie HTML, do których można tworzyć połączenia • odnośniki nie są widoczne na stronie połączenie tworzone na stronie wyjściowej musi zawierać nie tylko nazwę pliku, ale także nazwę odnośnika Znacznik jako odnośnik:
• • "Część czwarta" - tekst, który ukaże się na górze ekranu, po przejściu do odnośnika • Realizacja połączenia do odnośnika.
po nazwie pliku jest wstawiany znak # i nazwa odnośnika
Style logiczne - znaczniki
• … - oznacza, że tekst powinien być wyróżniony (zwykle jest to kursywa) • … - tekst powinien być wyróżniony mocniej niż przez (zwykle jest to pogrubienie) •
…
- tekst powinien być wyświetlony czcionką o stałej szerokości (np. Courier) • … - oznacza tekst przykładowy, wyśiwtlany podobnie jak• … - teskt, który powien być wpisany przez użytkownika z klawiatury • … - wskazuje nazwę obiektu (zmiennej), który powinien być zastąpiony przez inną wartość • … - znacznik definicji • … - służy do oznaczania krótkich cytatów
Style fizyczne Style fizyczne -
ściśle określają zmianę wyglądu danego fragmentu tekstu • … - pogrubienie • … - kursywa • … - czcionka maszynowa (znaki o jednakowej szerokości) • … - czcionka większa od reszty tekstu • … - czcionka mniejsza od reszty tekstu • … -indeks dolny • … - indeks górny
Tekst preformatowany
•
…
- tekst nie jest formatowany przez przeglądarkę (jak zazwyczaj, gdy np. wszystkie dodatkowe znaki spacji, tabulacji, czy nowej linii są ignorowane), ale każda spacja znajdująca się w oznaczonym tekście jest wyświetlanaAdresy/cytaty
Adresy:
•
.. - służy do umieszczenia "podpisu" na stronie WWWCytaty
•
…
zaznaczanie cytatów, dotyczy dłuższych cytatów, które nie są zagnieżdzane w akapitachZnaki specjalne
Rodzaje kodów znaków: • nazwane - zaczynają się od znaku
&
, a kończą znakiem
uwaga: ;
pomiędzy powyższymi znakami występuje nazwa znaku w przeciwieństwie do pozostałych znaczników HTML nazwy te są zależne od wielkości liter • numerowane - zaczynają się od znaku
&
, a kończą znakiem
;
zamiast nazwy zawierają znak
#
i liczbę, która odpowiada numerowi znaku w zbiorze ISO-Latin-1 (ISO-8859-1)
Kod < > & "
Kody znaków używanych w definicjach znaczników
Rezultat < > & "
Położenie tekstu na stronie
Kontrola pojedynczych elementów • aby ułożyć nagłówek lub akapit używa się atrybutu ALIGN • ALIGN może przyjmować 3 wartości: LEFT, RIGHT i CENTERED Kontrola położenia grup elementów • stosowany znacznik
…, który pozwala oznaczyć dowolny fragment kodu HTML • wraz ze znacznikiem używa się atrybutu ALIGN, który wpływa na cały kod wewnątrz• jeśli we fragmencie kodu wewnątrz znacznikówznajdzie się znacznik z atrybutem ALIGN, to dotyczy on danego znacznikaTablice
Elementy tablicy: • podpis - informuje o zawartości tabeli (opcjonalny) • nagłówki tabeli - etykiety wierszy i/lub kolumn • dane tabeli - wartości wpisane w tabele • komórki tabeli - najmniejsze elementy tabeli, mogą zawierać dane lub nagłówek Znacznik
…
• służy do tworzenia tabeli • pozwala stworzyć podpis tabeli i samą tabelę • atrybut BORDER - służy do obramowania tabeli • Znacznik… tworzy wiersz tabeli • Znacznik… tworzy komórki nagłówka • Znacznik… tworzy komórki danychPrzykład tabeli
• 1 wiersz, • 3 komórki • Nagłówek • •
•
Dane Dane •Tabele – dodatkowe możliwości
•
Atrybut BORDER znacznika TABLE –
obramowaniem.
umożliwia otaczanie tablicy •
Znacznik
- wstawiany między tagami
i
, przed definicjami wierszy • umożliwia podpisanie tabeli i nadanie jej tytułu, jest opcjonalny • opcjonalny atrybut ALIGN znacznikaokreśla sposób wyrównywania tekstu podpisu. • dostępne wartości: TOP (domyślna wartość, podpis nad tablicą) i BOTTOM (podpis pod tablicą) •
Podpisy w Internet Explorer:
• atrybut VALIGN – umożliwia umieszczenie podpisu nad lub pod tabelą • atrybut ALIGN – przyjmuje wartości LEFT, RIGH i CENTER, służy do wyrównywania tekstów w poziomie • np.
Podpis Wyrównywanie tabel i zawartości komórek.
Wyrównywanie tabel
• Domyślnie tabela jest wyrównywana do lewej krawędzi strony • Atrybut ALIGN umożliwia wyrównywanie tabel względem dowolnego marginesu oraz otaczanie ich tekstem, jak w przypadku obrazów • Rezygnacja z otaczania tekstem – podobnie jak dla obrazów – znacznik złamania wiersza z atrybutem CLEAR
Wyrównywanie zawartości komórek Wyrównanie zawartości komórki w poziomie
• Atrybut ALIGN przyjmujący wartości LEFT, CENTER i RIGHT
Wyrównanie zawartości komórki w pionie
• Atrybut VALIGN przyjmujący wartości – TOP – dosunięcie do górnego marginesu, – BOTTOM – dosunięcie do dolnego marginesu, – MIDDLE – wycentrowanie względem obu marginesów, – BASELINE – jak TOP, ale zawartość jest wyrównywana względem pierwszego wiersza każdej komórki
Znaczniki i atrybuty do przygotowania tabeli 1
Znaczniki i atrybuty do przygotowania tabeli 2
Obrazki
• znacznik
służy do umieszczenia obrazka na stronie • parametr SRC - określa nazwę pliku lub URL wstawianego obrazka • parametr ALIGN - określa wzajemne położenie tekstu i obrazu • parametr ALT - umożliwia wstawienie tekstu w miejsce obrazku w przeglądarkach, które nie mogą wyświetlać grafiki (np. Lynx) • Przykład: •
•
Zmiana kolorów i grafika w tle
• atrybuty BGCOLOR, TEXT, LINK, VLINK znacznika
umożliwiają zmiany kolorów tła, tekstu i odsyłaczy • atrybut BACKGROUND znacznika umożliwia wykorzystanie obrazków jako tła dokumentu WWW • Przykład: •Ramki
Ramki umożliwiają m.in: • umieszczanie tabel w tabelach • dodawanie nagłówków, stopek i pasków z połączaniami do stron • na jednym ekranie są wyświetlane informacje z kilku osobnych dokumentów HTML powiązanych ze sobą • Definiowanie ramek: • podstawowy z dokumentów HTML - dokument zawierający definicje ramek • znacznik
Listy wypunktowane
• w liście wypunktowanej elementy są oznaczane kropkami, lub innymi znakami • są objęte znacznikami
- …
- •
- - lista jest wyświtlona w formie (a,b,c…) • Atrybut TYPE może być także używany w znaczniku