1
Usługa WWW
(World Wide Web)
Dostep do informacji w postaci stron WWW
Informacja prezentowana w sposób nieliniowy
(hipertekst)
Prezentacja rónych typów informacji
Przegladarka - sposób dostepu do informacji
Protokół HTTP (Hypertext Transfer Protocol)
Identyfikacja zródeł informacji
URL (Uniform Resource Locator) - uniwersalny
sposób lokalizacji zasobów
Struktura URL:
usługa://adres_serwera
usługa://adres_serwera/katalog
usługa://adres _serwera/katalog/dokument
http://www.mechatronika.edu.pl/images/mapka.jpg
ftp://ftp.onet.pl/
usługa:uytkownik@adres_serwera
mailto:info@mechatronika.edu.pl
2
Wyszukiwanie informacji
Dostep bezposredni do zródła:
znajomosc adresu serwera WWW
nawigacja miedzy stronami WWW w obrebie
danego serwera
Dostep posredni:
polskie portale (Onet, Wirtualna Polska, Interia,
...)
wyszukiwarki sieciowe (Google, Altavista, Yahoo,
Infoseek, Lycos, ...)
Telefonia Internetowa
VoIP (ang. Voice over Internet Protocol) -
technologia umoliwiajaca przesyłanie
dzwieków mowy za pomoca łaczy
internetowych lub dedykowanych sieci
wykorzystujacych protokół IP
3
Jezyk HTML (hipertekstowy
jezyk znaczników )
Znaczniki w jezyku HTML
Struktura dokumentu HTML
Definicja ciała dokumentu
Formatowanie tekstu
Grafika
Definiowanie odnosników
Ramki
Formularze
Style
Jezyk HTML
Znaczniki (tagi) - definicja wygladu i zawartosci
strony
Format znacznika:
<znacznik ...> .... </znacznik>
Rodzaje znaczników:
parzyste (otwierajace, zamykajace) - np. <B>...</B>
nieparzyste (otwierajace) - np. <HR>, <BR>, <P>
Parametry znacznika - modyfikacja sposobu działania
znacznika:
<znacznik P1 = war1 P2 = war2 ...>
4
Struktura dokumentu
Definicja strony w jezyku HTML:
<HTML> ... </HTML>
Podstawowe informacje o dokumencie:
<HEAD>... </HEAD>
Ciało dokumentu (tresc własciwa):
<BODY>... </BODY>
<HTML>
<HEAD>
<Podstawowe informacje o dokumencie>
</HEAD>
<BODY>
<!--Tutaj wpisz zawartosc Twojej strony-->
</BODY>
</HTML>
Ciało dokumentu
Definicja tresci strony:
tekst
grafika
odsyłacze do innych stron
Definicja wygladu strony:
czcionka
akapity
listy numerowane i wyliczeniowe
style
tabelki
ramki
formularze
5
DHTML
Dynamiczny HTML (Dynamic HyperText Markup
Language)
dynamiczna zmiany tresci, wygladu, zachowania
dokumentu
interakcja z uytkownikiem i stosowanie efektów
wizualnych.
W skład DHTML wchodza technologie:
HTML
DOM (Document Object Model)
CSS (Cascading Style Sheets)
SVG (Scalable Vector Graphics)
JavaScript
Technologie generowania
dynamicznych stron WWW
CGI (Common Gateway Interface )
ASP (Active Server Pages)
PHP (Personal Home Pages)
Przegladarka internetowa wysyła zapytanie do serwera
HTTP z poleceniem przetworzenia konkretnego pliku (plik
PHP, ASP, itp.).
Serwer uruchamia moduł interpretera, który przetwarza
polecenia zawarte w skrypcie i generuje strone WWW
oparta wyłacznie na znacznikach HTML.
Wygenerowana strona przesyłana jest do przegladarki
6
CMS - system zarzadzania
trescia
Content Management System – CMS
zestaw aplikacji internetowych
łatwe tworzenie oraz aktualizacja i rozbudowa
serwisu WWW
kształtowanie tresci i sposobu ich prezentacji w
serwisie za pomoca prostych w obsłudze interfejsów
uytkownika.
Systemy oparte na bazach danych oraz
specjalistycznym oprogramowaniu po stronie
serwera.
Mambo CMS: Widok witryny
7
Mambo CMS:
Panel administratora
Parametry ciała dokumentu
HTML
BACKGROUND - tło strony (plik *.gif)
BGCOLOR - kolor tła
TEXT - kolor tekstu na stronie
LINK - poczatkowy kolor odnosników
ALINK - kolor odnosników aktywnych
VLINK - kolor odnosników wykorzystanych
LEFTMARGIN - lewy margines (tylko MS IE)
TOPMARGIN - górny margines (tylko MS IE)
8
Przykłady definicji ciała
dokumentu
<BODY BACKGROUND = "A:\Obrazy\backgrnd.gif">
<BODY BGCOLOR="#FF8080">
<BODY BGCOLOR="#FF8080" TEXT="#000080">
<BODY LINK="blue" ALINK="red" VLINK="yellow">
<BODY LEFTMARGIN="200" >
<BODY TOPMARGIN="300" >
<BODY LEFTMARGIN="200" TOPMARGIN="300" >
Tresc dokumentu
Sformatowany tekst umieszczony w kodzie strony
Ignorowanie w tresci znaków Enter oraz
wielokrotnych spacji
Akapity naley definiowac uywajac znaczników:
<P> - nowy akapit oraz pusty wiersz
<BR> - przeniesienie tekstu do nastepnego wiersza
Wielokrotne spacje:
9
Czcionka
Pogrubiona <B>...</B>
Kursywa <I>...</I>
Podkreslona <U>...</U>
Mrugajaca
<BLINK>...</BLINK>
Krój maszynowy
<TT>...</TT>
Przekreslona
<STRIKE>...</STRIKE>
Indeks górny
<SUP>...</SUP>
Indeks dolny
<SUB>...</SUB>
Wyróniona:
<STRONG>...</STRONG>
<EM>...</EM>
Atrybuty czcionki
Rozmiar:
<FONT SIZE="+2">Powiekszony o +2. </FONT>
Kolor:
<FONT COLOR = "red">Czerwony</FONT>
Rodzaj:
<FONT FACE="Arial">Krój Arial </FONT>
Definicja czcionki bazowej:
<BASEFONT SIZE="3" FACE = "Arial" COLOR =
"green">
10
Znaczniki nagłówka
Predefiniowane znaczniki <H1> do <H6>
Znaczniki parzyste
Formatowanie czcionki niezalene od innych
definicji tekstu
Wykorzystanie bazowej definicji czcionki
Moliwosc jawnej redefinicji sposobu
wyrównania tekstu
Sposoby wyrównania tekstu
Srodkowanie tekstu:
<CENTER>...</CENTER>
Parametr ALIGN:
ALIGN = "RIGHT"
ALIGN = "LEFT"
ALIGN = "CENTER"
Miejsce umieszczenia parametru:
znacznik <P> np. <P ALIGN="RIGHT">
znacznik <H#> np. <H1 ALIGN = "CENTER">
11
Listy wyliczane
Znacznik parzysty: <UL>
Elementy listy: znacznik <LI>
Zastosowanie wielu znaczników <UL>
(kolejne poziomy wyliczania)
Modyfikacja wygladu listy: (parametry TYPE,
COMPACT znacznika <UL>)
Listy definicyjne
Znacznik parzysty: <DL>
Elementy listy: znacznik <DT>
Opis elementu listy: znacznik <DD>
Zastosowanie wielu znaczników <DL>
(kolejne poziomy listy)
12
Listy numerowane
Znacznik parzysty: <OL>
Elementy listy: znacznik <LI>
Zastosowanie wielu znaczników <OL>
(kolejne poziomy listy numerowanej)
Modyfikacja sposobu numerowania
(parametry TYPE, START znacznika <OL>)
Dodatkowe elementy formatu
strony
Pozioma linia: znacznik <HR>
Parametry znacznika <HR>:
NOSHADE - linia bez cienia
SIZE - grubosc linii
WIDTH - długosc linii (piksele, % szerokosci strony)
ALIGN - wyrównanie linii w poziomie
COLOR - kolor linii
Koniec wiersza: znacznik <BR>
Parametr znacznika <BR>: CLEAR (CLEAR =
LEFT, CLEAR = RIGHT, CLEAR = ALL)
13
Grafika
Wstawianie grafiki:
<IMG SRC="plik.gif">
Parametry:
BORDER - obramowanie obrazka
ALIGN - pozycja obrazu wzgledem tekstu
HEIGHT - wysokosc (w pikselach)
WIDTH - szerokosc (w pikselach)
VSPACE - odległosc od tekstu (w pikselach)
HSPACE - odległosc od tekstu (w pikselach)
ALT - etykieta obrazu
Grafika i prosta animacja
Wstawianie prostej animacji:
<MARQUEE> ... </MARQUEE>
Parametry:
ALLIGN - sposób wyrównania tekstu sasiadujacego
BEHAVIOR - sposób poruszania sie tekstu (SCROLL,
SLIDE, ALTERNATE)
DIRECTION - kierunek ruchu (LEFT, RIGHT)
HIGH, WIDTH - wysokosc, szerokosc obszaru
LOOP - ilosc powtórzen ruchu tekstu
HSPACE, VSPACE - odległosc od innego tekstu
SCROLLAMOUNT - wielkosc skoku tekstu
SCROLLDELAY - opóznienie skoku
14
Odsyłacze
Rodzaje odsyłaczy:
wewnetrzne (strony w obrebie tego samego serwisu,
etykiety na stronie <A NAME = "etykieta"> </A>)
zewnetrzne (strony innych serwisów, usługi sieciowe)
Elementy w roli odnosników:
tekst
elementy graficzne (np. przyciski)
obrazy
Sposób definiowania:
<A HREF="cel"> Tekst lub obraz </A>
Przykłady odsyłaczy
wewnetrznych
<A HREF="#etykieta"> Tekst lub obraz </A>
<A HREF="naglow.htm">Nagłówki.</A>
<A HREF="/IMG/obrazki.htm"> Grafika.</A>
<A HREF="../IMG/obrazki.htm"> Grafika.</A>
<A HREF="naglow.htm#e1">Nagłówki.</A>
15
Przykłady odsyłaczy
zewnetrznych
<A HREF="www.wspa.lublin.pl">WSPA</A>
<A HREF="www.wspa.lublin.pl/ninf/">
Narzedzia informatyki </A>
<A HREF="mailto:piotrm@pluton.pol.lublin.pl">
Napisz do mnie </A>
<A HREF="www.wspa.lublin.pl#e1"> WSPA -
adres </A>
Obrazy jako odsyłacze
Cały obraz jako odnosnik:
<A HREF="http://pluton.pol.lublin.pl"> <IMG
SRC="../obrazy/herbpl.gif" HEIGHT="201"
WIDTH="205" BORDER="3"> </A>
Fragmenty obrazu jako odnosniki do innych stron
(mapy odnosników)
Mapa odnosników - nałoenie na obraz siatki
współrzednych
Rodzaje map:
mapa po stronie serwera
mapa po stronie klienta
16
Mapa odnosników po stronie
klienta
Definicja mapy:
przypisanie nazwy do mapy
okreslenie kształtu obszarów
okreslenie współrzednych obszarów
przypisanie stron WWW do poszczególnych
obszarów
Wczytanie obrazu
Nałoenie mapy na obraz
Mapa odnosników - przykład
<IMG SRC="..\obrazy\aircraft.gif " BORDER = 0
USEMAP="#mapa">
<MAP NAME ="mapa">
<AREA SHAPE=RECT COORDS=" 220, 125, 300, 190"
HREF="mapa_k.html”>
<AREA SHAPE=RECT COORDS=" 65, 200, 90, 225"
HREF="mapa_k.html”>
<AREA SHAPE=RECT COORDS=" 440, 200, 460, 230"
HREF="mapa_l.html">
</MAP>
17
Tabele
Definicja tabeli:
<TABLE> ... </TABLE>
Definicja wiersza tabeli:
<TR> ... </TR>
Definicja komórki tabeli:
<TD> ... </TD>
Dodatkowe opcje:
podpis tabeli: <CAPTION> ... </CAPTION>
nagłówek tabeli: <TH> ... </TH>
Tabele - charakterystyka
wygladu
Obramowanie tabeli i komórek (kolor, rodzaj)
Szerokosc (wysokosc) tabeli i komórek
Wyrównanie tabeli i zawartosci komórek
Tło komórek i tabeli
Łaczenie komórek
Zagniedanie tabel
18
Tabele - definicja wygladu
Obramowanie tabeli (rodzaj, kolor):
parametr tabeli: BORDER = 3
parametr tabeli: BORDERCOLOR = "Purple"
Obramowanie komórek (kolor):
parametry wiersza: BORDERCOLORDARK = "RED"
BORDERCOLORLIGHT= "GREEN"
Szerokosc tabeli i komórek:
parametr tabeli: WIDTH = 800 lub WIDTH = 75%
parametr komórki: WIDTH = 800 lub WIDTH =
75%
Tabele - definicja wygladu (2)
Odstepy miedzy komórkami:
parametr tabeli: CELLSPACING = 3
Odstep zawartosci komórki od jej krawedzi:
parametr tabeli: CELLPADDING = 20
Wysokosc tabeli i komórek:
parametr tabeli: HEIGHT = 800 lub HEIGHT = 75%
parametr komórki: HEIGHT = 800 lub HEIGHT =
75%
19
Tabele - definicja wygladu (3)
Wyrównanie tabeli:
parametr tabeli: ALIGN ("RIGHT", "LEFT")
Wyrównanie zawartosci komórek (parametr
wiersza lub komórki):
w poziomie - ALIGN ("RIGHT", "LEFT", "CENTER")
w pionie - VALIGN ("TOP", "BOTTOM", "MIDDLE")
Tło tabeli:
parametr tabeli: BGCOLOR
parametr tabeli: BACKGROUND = "plik.gif"
Tabele - definicja wygladu (4)
Łaczenie komórek (parametry komórek):
łaczenie w poziomie: COLSPAN = n
łaczenie w pionie: ROWSPAN = m
Zagniedanie tabel:
definicja tabeli jako zawartosci komórki
dowolna liczba zagnieden
Podpis tabeli (CAPTION):
połoenie w pionie - VALIGN (TOP, BOTTOM)
połoenie w poziomie - ALIGN (LEFT, CENTER,
RIGHT)
20
Tabele - uwagi
Szerokosc kolumny zaley od szerokosci
najszerszej komórki (o ile nie uyto WIDTH)
Decydujace znaczenie dla szerokosc tabeli
ma parametr WIDTH na poziomie tabeli
Wiele parametrów moe byc definiowanych
na poziomie wiersza lub bezposrednio na
poziomie komórki
Dodatkowe moliwosci obramowania tabeli
stwarza parametr FRAME i RULES
(rozszerzenia standardu HTML)
Ramki - cel stosowania
Atrakcyjny sposób prezentowania informacji
(przejrzystosc, czytelnosc, estetyka)
Zwiekszenie ilosci informacji umieszczanych
na ekranie monitora
Zrónicowanie prezentowanych informacji
Łatwosc nawigowania w serwisie WWW
Zwielokrotnienie funkcji realizowanych przez
serwis WWW
21
Ramki - charakterystyka
Kada ramka zawiera pojedyncza strone WWW
Rozmiary ramek moga byc zmieniane przez klienta
(o ile nie zablokowano połoenia ich krawedzi)
Ramki moga byc formatowane niezalenie od siebie
(marginesy, paski przewijania, krawedzie)
Sterowanie zawartoscia ramek moe odbywac sie z
ramki bieacej lub innej wyswietlanej na ekranie
Zalecenia dot. definiowania
ramek
Uwzglednij fakt, i nie wszystkie przegladarki obsługuja
ramki (znacznik parzysty <NOFRAMES>)
Na stronie głównej nie umieszczaj znacznika <BODY>
Utwórz wszystkie strony WWW, które beda wyswietlane
w ramkach
Nie umieszczaj zbyt wiele grafiki (długi czas ładowania
strony)
Ramki "czytane sa" i zapełniane od lewej do prawej
Nie przesadzaj z iloscia ramek
22
Struktura dokumentu i ramki
Definicja konstrukcji ramki na stronie:
<FRAMESET> ... </FRAMESET>
Definicja podziału ramki:
parametr COLS = "10%, 90%"
parametr ROWS = "100, 100, *"
Definicja zawartosci i funkcjonalnosci ramki:
<FRAME>
dodatkowe parametry (SRC, NAME,
SCROLLING, NORESIZE)
Zawartosc i funkcjonalnosc
ramek
Definiowane przez parametry umieszczone
w znaczniku <FRAME>:
SRC - strona wyswietlana w danej ramce
np. SRC = "strona.htm"
NAME - przypisanie nazwy do ramki
np. NAME = "Ramka_1"
SCROLLING - zastosowanie suwaka w ramce
np. SCROLLING = yes
NORESIZE - zablokowanie modyfikacji rozmiaru
ramki
23
Zarzadzanie stronami w
ramkach
Okreslenie sposobu zachowania sie w
momencie klikniecia na odsyłaczu
Domyslny sposób działania - zmiana
zawartosci bieacej ramki
Zmiana zawartosci we wskazanej ramce
(konieczne posługiwanie sie nazwa ramki i
parametr TARGET)
Otwarcie nowego okna przegladarki ze
strona (zastosowanie wartosci _Top dla
parametru TARGET)
Zaawansowane operacje w
ramkach
Parametry znacznika <FRAMESET>:
Definicja grubosci krawedzi ramki
BORDER np. BORDER = 10
Definicja odstepu miedzy ramkami:
FRAMESPACING np. FRAMESPACING = 100
Definicja marginesów ramek:
MARGINHEIGHT np. MARGINHEIGHT = 5
MARGINWIDTH np. MARGINWIDTH = 5
Ukrycie krawedzi ramki: FRAMEBORDER = 0
Kolor krawedzi ramki: BORDERCOLOR = Blue
24
Uwagi dot. definiowania ramek
Podział dokument HTML na dwie czesci:
czesc zawierajaca znacznik <FRAMESET>
czesc zawierajaca znacznik <NOFRAMES>
Odrebna definicja stron dla przegladarek nie
akceptujacych ramek:
znacznik <BODY> umieszczony po znaczniku
<NOFRAMES>
definicja pojedynczych stron i odsyłaczy do innych
miejsc
Formularze - charakterystyka
Zaawansowana technika projektowania stron
WWW
Interaktywny sposób kontaktowania sie z
klientem
Moliwosc prezentowania i wprowadzania
informacji w postaci graficznej
Łatwosc wprowadzania informacji po stronie
klienta
25
Formularze - definiowanie
Okreslenie ram formularza:
<FORM> ... </FORM>
Definicja kierunku przesyłania informacji:
POST - kierunek klient - serwer
GET - kierunek serwer - klient
LINK - utworzenie odnosnika
Definicja rodzaju akcji podejmowanej w
ramach formularza: ACTION = "URL"
Okreslenie rodzaju elementów formularza
Definiowanie elementów
graficznych
Rodzaje elementów graficznych:
pole tekstowe (TEXT)
pole wyboru (CHECKBOX)
przycisk radiowy (RADIO)
lista wyboru (SELECT)
obraz (IMAGE)
okno tekstowe (TEXTAREA)
Sposób definiowania:
znacznik <INPUT TYPE = ...>
znacznik <SELECT> ... </SELECT>
znacznik <TEXTAREA> ... </TEXTAREA>
26
Elementy specjalne
Przycisk Wyslij (Submit):
rozpoczecie wykonywania akcji zdefiniowanej
w parametrze ACTION
Przycisk Czysc (Reset):
usuniecie wszystkich danych wprowadzonych
w formularzu
Style - charakterystyka
Zbiór definicji okreslajacych wyglad strony:
czcionki
kolor i tło
własnosci akapitu
marginesy strony
sposobu obramowania akapitu
sposobu wyswietlania tekstu
pozycja elementów na stronie
Zakres zastosowania:
cały dokument HTML
wybrany fragment dokumentu HTML
wybrany znacznik
wiele dokumentów HTML
27
Style - zalety stosowania
Ułatwienie formatowania dokumentu HTML
Zwiekszenie szybkosci aktualizacji wygladu
pojedynczej strony
Standaryzacja wygladu serwisu WWW
Dua szybkosc aktualizacji wygladu całego
serwisu WWW
Style - rodzaje
Styl lokalny:
definicja wybranego znacznika
definicja dowolnego fragmentu strony
Styl wbudowany w dokument:
definicja umieszczona na poczatku dokumentu HTML
miedzy znacznikami <HEAD>...</HEAD>
koniecznosc ujecia definicji w nawiasy typu <!-- -->
Styl zewnetrzny:
definicja umieszczona w pliku tekstowym *.css
plik zawiera wyłacznie definicje elementów okreslajacych
wyglad strony
28
Style - sposób definiowania
Styl lokalny:
<znacznik STYLE = "definicja_stylu"> ...
</znacznik>
<DIV STYLE = "definicja_stylu"> ... </DIV>
Styl wbudowany w dokument:
<STYLE TYPE = "text/css">
<!-- definicja elementów stylu --> </STYLE>
Styl zewnetrzny:
<HTML>
<STYLE TYPE = "text/css">
<!-- definicja elementów stylu --> </STYLE>
</HTML>
Wybrane definicje elementów
stylu
Czcionka (font-style, font-variant, font-weight, font-size, fontfamily)
Kolor i tło (color, background-color, background-image,
background-repeat, background-attachment, backgroundposition,
Własnosci akapitu (word-spacing, letter-spacing, textdecoration,
text-align, vertical-align, text-indent, line-height)
Listy (list-style-type, list-style-image, list-style-position)
Marginesy (margin-left, margin-right, margin-top, marginbottom)
29
Zastosowanie stylu zewnetrznego
Koniecznosc umieszczenia na stronie
odsyłacza do pliku stylów
Odsyłacz musi byc zdefiniowany miedzy
znacznikami <HEAD> ... </HEAD>
Postac odsyłacza:
<LINK REL = STYLESHEET HREF="plik.css"
TYPE = "text/css">
Polecenia typu META
Dostarczaja istotne informacje typu:
słowa kluczowe dla wyszukiwarek - keywords
nazwa programu budowy stron - generator
opis zawartosci stron - description
prawa autorskie - author
definiowane przy uyciu słowa NAME, nadanie wartosci
przy pomocy CONTENT
Zawieraja dodatkowe informacje okreslajace
funkcjonalnosc stron:
HTTP-EQUIV = "REFRESH" CONTENT = 5
HTTP-EQUIV = "REFRESH" CONTENT = 5; URL =
http://www.wp.pl