Title: Programowanie w HTML i XML
1Programowanie w HTML i XML
- prowadzacy
- dr inz. Tomasz Wiercinski
2Plan wykladów
- Co to jest WWW?
- Architektura srodowiska WWW (klient-serwer)
- Przegladarki WWW
- Serwery WWW
- Uniform Resource Locators URL
- Protokól HTTP
- Witryny WWW
- Jezyki znaczników
- Wlasciwosci jezyków znakowania
- Budowa jezyków znakowania
- Jezyk HTML
- Wersje jezyka HTML
- Struktura dokumentu HTML
- Opis znaczników HTML
- Kodowanie znaków
- Dynamiczny HTML
- Arkusze styl
- Zdarzenia
- The Document Object Model (DOM)
3Literatura
- www.w3.org/MarkUp/
- www.w3schools.com
- Bryan Pfaffenberger, Bill Karow, HTML 4. Biblia,
Helion, 2000 - Laura Lemay, HTML 4. Vademecum profesjonalisty,
Helion, 1998 - Benoit Marchal, XML w przykladach, Wydawnictwo
MIKOM, 2001 - Bryan Pfaffenberger, Steven M. Schafer, Chuck
White, Bill Karow, HTML, XHTML i CSS. Biblia,
Helion, 2005 - Wojciech Romowicz, HTML i JavaScript, Helion,
1998 - Steve Holzner, XSLT. Vademecum profesjonalisty,
Helion, 2002 - David Crowder, Rhoda Crowder, Tworzenie stron
WWW. Biblia, Helion, 2002 - Danny Goodman, JavaScript. Biblia, Helion, 2002
4Co to jest WWW?
- Siec WWW jest hipertekstowym systemem
informacyjnym - idea hipertekstu polega na tym, ze zamiast czytac
tekst po kolei, linia po linii (tak jak ksiazke),
mozna przechodzic od punktu do punktu w sposób
nieliniowy
5- WWW jest systemem graficznym
- integruje ze soba tekst z grafika, dzwiekiem i
sekwencjami wideo oraz wbudowane aplikacje
6- WWW jest siecia wieloplatformowa
- dostep do WWW mozliwy jest przy uzyciu dowolnego
sprzetu, dowolnego systemu operacyjnego i
dowolnego typu ekranu - ograniczenia wynikaja z uzycia niestandardowych
rozszerzen wprowadzanych przez producentów
oprogramowania
7- WWW jest siecia rozproszona
- dane rozproszone sa po calym swiecie w tysiacach
witryn na tysiacach serwerów - kazda witryna, kazda strona ma swój unikalny
adres URL (ang. Uniform Resource Locator) bedacy
uniwersalnym identyfikatorem zasobów, np.
http//www.google.pl
8- WWW jest siecia dynamiczna
- dane zmodyfikowane na stronach www sa
automatycznie widoczne przez wszystkich
uzytkowników
9- Siec WWW jest interakcyjna
- mozliwosc reakcji na zdarzenia wywolane przez
uzytkownika, np. klikniecie myszka - mozliwosc wymiany informacji pomiedzy
uzytkownikiem a serwerem WWW za pomoca formularzy
10Architektura statycznego srodowiska WWW
- WWW to srodowisko klient-serwer
11Klient WWW
- Klientem WWW jest przegladarka
- Przegladarka jest programem, który sluzy do
ogladania i poruszania sie po stronach WWW - Potrafi odczytywac pliki róznych (oprócz HTTP)
serwisów internetowych takich jak FTP, Gopher,
grupy dyskusyjne Usenet, bazy danych WAIS,
Telnet, poczta elektroniczna (e-mail)
12- Chcac wykorzystac przegladarke do odczytywania
róznych typów informacji w Internecie, nalezy
skorzystac z róznych rodzajów adresów URL, np.
ftp//nazwa_serwera/katalog/plik - Obecnie najpopularniejszymi przegladarkami w
sieci WWW sa Microsoft Internet Explorer, Mozilla
Firefox, Opera
13Serwer WWW
- Serwer WWW to program dzialajacy na komputerze w
sieci Internet, który odpowiada na zadania
przegladarki i wysyla do niej odpowiednie pliki
(np. Apache)
14Architektura dynamicznego srodowiska WWW
- Architektura trójwarstwowa
WWW Server
Application Server
DB Server
15Serwer Aplikacyjny
- Serwer w sieci komputerowej, przeznaczony do
zdalnego uruchamiania i uzytkowania aplikacji - Zestaw oprogramowania (platforma) wspierajaca
programiste/developera przy tworzeniu aplikacji.
Umozliwia oddzielenie logiki biznesowej od uslug
dostarczanych przez producenta platformy
(bezpieczenstwo, zarzadzanie transakcjami,
skalowalnosc, czy tez dostep do baz danych). Do
serwerów aplikacji naleza m.in. JBoss, BEA
WebLogic, IBM WebSphere oraz platforma .NET
Microsoft-u.
16Serwer bazy danych
- Oprogramowanie badz system informatyczny sluzacy
do zarzadzania komputerowymi bazami danych - Posiada mechanizmy
- srodki do gromadzenia, utrzymywania i
administrowania trwalymi i masowymi zbiorami
danych, - srodki zapewniajace spójnosc i bezpieczenstwo
danych, - sprawny dostep do danych (zwykle poprzez jezyk
zapytan, np. SQL), - srodki programistyczne sluzace do
aktualizacji/przetwarzania danych (API dla
popularnych jezyków programowania), - jednoczesny dostep do danych dla wielu
uzytkowników (z reguly realizowany poprzez
transakcje), - srodki pozwalajace na regulacje dostepu do danych
(autoryzacje), - srodki pozwalajace na odtworzenie zawartosci bazy
danych po awarii, - srodki optymalizujace zajetosc pamieci oraz czas
dostepu (np. indeksy), - srodki do pracy lub wspóldzialania w srodowiskach
rozproszonych.
17Uniform Resource Locators
- Oznacza zunifikowany format odnosników do zasobów
- Jest podzbiorem URI (Uniform Resource Identifier
- zunifikowany identyfikator zasobów) - Jest uzywany do adresowania dokumentów lub innych
danych w sieci WWW. Moze to byc dokument WWW,
plik na serwerze FTP, wiadomosc na serwerze grup
dyskusyjnych lub adres poczty elektronicznej
18- Pelen adres URL ma nastepujaca postac
syntaktyczna scheme//hostport/path/filename?que
ry - scheme - typ serwisu (nazwa protokolu), np HTTP,
FTP - host - nazwa hostu (komputera w sieci WWW)
- port - numer portu na którym nasluchuje dany
serwer ( domyslnym numerem portu jest 80) - path - sciezka podkatalogów na serwerze
(domyslnie katalog glówny root) - filename - nazwa dokumentu (domyslnie index.html)
- query - tresc zapytania postaci nazwawartosc
http//www.w3schools.com/html/lastpage.htm
19Protokól HTTP (Hypertext Transfer Protocol)
- za pomoca protokolu HTTP przesyla sie informacje
w sieci WWW - udostepnia on znormalizowany sposób komunikowania
sie komputerów ze soba - okresla on forme zadan klienta dotyczacych danych
oraz forme odpowiedzi serwera na te zadania
(protokól request/response) - metody
- GET
- parametry zapytania przekazane w zapytaniu (query
string) - POST
- posiada blok danych umieszczony za naglówkiem
- posiada dodatkowe pola naglówka Content-Type,
Content-Length
20Protokól HTTP
- Initial request line
- posiada trzy czesci nazwe metody, sciezke
lokalna zasobu i uzywana wersje HTTP - GET /path/to/file/index.html HTTP/1.0
- Initial Response Line (Status Line)
- posiada trzy czesci wersje HTTP, kod statusu
odpowiedzi i opis przyczyny - HTTP/1.0 200 OK lub HTTP/1.0 404 Not Found
21Kody statusu odpowiedzi
- 2xx sukces, np. 200 OK
- 3xx przekierowanie, np. 302 Moved Temporarily
- 4xx blad klienta, np. 404 Not Found
- 5xx blad serwera, np. 500 Internal Server
Error
22Metoda POST
HTTP Request
POST /login.jsp HTTP/1.1 Host www.mysite.com
User-Agent Mozilla/4.0 Content-Length 29
Content-Type application/x-www-form-urlencoded
loginjuliuspasswordzgadnij
Naglówek
Tresc
HTTP Response
HTTP/1.0 200 OK. Date Fri, 31 Dec 1999 235959
GMT Content-Type text/plain Content-Length
1354 statusok
23Metoda GET
HTTP Request
GET /index.html?loginjuliuspasswordzgadnij
HTTP/1.1 Host www.example.com User-Agent
Mozilla/4.0
24Witryny WWW
- Witryna to zbiór skladajacy sie z jednej lub
kilku stron WWW powiazanych ze soba w sposób,
który odzwierciedla istote zawartych w niej
informacji i tworzy spójna calosc - Struktury witryn
25Struktura hierarchiczna
- posiada wiele poziomów
- strona glówna zawiera ogólny przeglad opisywanych
tresci oraz polaczenia do stron, które znajduja
sie na nizszych poziomach hierarchii
26Struktura liniowa
- przejscie od strony do strony odbywa sie w sposób
liniowy (krok po kroku)
27Struktura liniowa z alternatywa
- posiada mozliwosc odejscia od glównej sciezki
dokumentów
28Struktura mieszana (liniowo-hierarchiczna)
29Struktura sieciowa
- brak ogólnej struktury dokumentów
- polaczenia miedzy stronami za pomoca hiperlaczy
30Jezyki znaczników
- Jezyk znakowania to sposób kodowania dokumentów
tekstowych przy pomocy znaczników.
31Budowa dokumentu
- dokument opisany przy uzyciu jezyka znakowania
zawiera - wlasciwy tekst
- znaczniki, okreslajace elementy dokumentu, jego
strukture, sposoby formatowania i hiperpolaczenia
do innych stron lub informacji innego rodzaju - wiekszosc elementów (elementy blokowe) sklada sie
z trzech czesci znacznika otwierajacego,
zawartosci i znacznika zamykajacego
32Budowa dokumentu
- ltznacznik_otwierajacy lista_atrybutówgt zawartosc
lt/znacznik_zamykajacygt - np. ltdiv width100gtlt/divgt
- znacznik otwierajacy moze zawierac liste
atrybutów formatujacych - atrybuty wystepuja w parach postaci
nazwawartosc, np. aligncenter,
width100px - niektóre elementy (liniowe) nie wymagaja
znacznika zamykajacego, np. ltBRgt
33Wlasciwosci jezyków znakowania
- opis dokumentu w pliku tekstowym
- przenoszalnosc i kompatybilnosc poprzez
wykorzystanie jedynie znaków ASCII - oddzielenie struktury dokumentu od jego wygladu
(podzial dokument-widok) - opis struktury strony a nie wygladu konkretnych
jej elementów - odwrotnie niz w edytorach
graficznych typu WYSIWYG (ang. What You See Is
What You Get) - praca w srodowisku wieloplatformowym (rózne
komputery, systemy operacyjne i przegladarki) - hierarchiczna struktura znaczników
34Jezyk SGML (Standard Generalized Markup Language)
- 1986 stal sie standardem wedlug organizacji ISO
- nie ma okreslonego zbioru znaczników i regul ich
uzytkowania - jest nadrzednym jezykiem sluzacym do definiowania
dowolnych znaczników i ustalania zasad ich
poprawnego uzytkowania - umozliwia definiowanie poszczególnych jezyków
znacznikowych
35Jezyk HTML (HyperText Markup Language)
- HTML wywodzi sie z jezyka SGML
- HTML jest jezykiem opisu strony a nie wygladu
poszczególnych jej elementów - posiada zdefiniowany zbiór elementów i
atrybutów, np. HEAD, BODY, TABLE, align, width
36Historia jezyka HTML
- standardem HTML zajmuje sie konsorcjum W3C (World
Wide Web Consortium) - 1989 HTML 1.0 - opracowana przez Tima
Berners-Lee zawiera kilkanascie znaczników wraz z
odsylaczami
37Historia jezyka HTML c.d.
- 1995 HTML 2.0 - podstawowy zestaw znaczników,
obslugiwany przez wszystkie przegladarki - 1996 HTML 3.2 - wprowadzono przede wszystkim
obsluge tabel, apletów oraz otaczanie obrazów
tekstem. Mozna bylo okreslac kolor i grafike tla.
Pojawily sie formularze. Jezyk ten byl w pelni
zgodny z wczesniejszym standardem HTML 2.0
38Historia jezyka HTML c.d.
- 1997 HTML 4.0 wprowadzono dynamiczny HTML i
arkusze stylów
39Struktura HTML
- w HTML-u zdefiniowane sa trzy znaczniki, które
opisuja ogólna strukture strony oraz dostarczaja
podstawowych informacji naglówkowych - ltHTMLgt
- ltHEADgt
- lt!informacje naglówkowe ?
- lt/HEADgt
- ltBODYgt
- lt!tresc strony ?
- lt/BODYgt
- lt/HTMLgt
40Opis znaczników jezyka HTML
- Komentarz
- lt!tresc komentarza ?
- sluzy do zamieszczenia w kodzie zródlowym
komentarza - jest ignorowany przez przegladarke
41Opis znaczników jezyka HTML - HEAD
- Tytul dokumentu
- lttitlegtlt/titlegt
- jest wyswietlany na pasku tytulowym okna
przegladarki
42Opis znaczników jezyka HTML - HEAD
- ltlinkgt
- definiuje zwiazek pomiedzy dwoma dokumentami
- atrybuty
- href adres URL
- rel relacja miedzy dokumentami
- type definiuje MIME type, np.
- text/css
- text/javascript
- image/gif
43Opis znaczników jezyka HTML
- Naglówki
- lth1gtlt/h1gt
- ...
- lth6gtlt/h6gt
- atrybuty
- align
- umozliwiaja podzial strony na czesci
- maja 6 poziomów rózniacych sie miedzy soba
wielkoscia i atrybutami czcionki (pogrubienie,
podkreslenie, wielkie litery) - HTML automatycznie dodaje pusta linie przed i po
naglówku
44Naglówki
45Opis znaczników jezyka HTML
- Akapit
- ltpgtlt/pgt
- atrybuty
- align
- umozliwia wyróznienie fragmentu tekstu
- HTML automatycznie dodaje pusta linie przed i po
akapicie
46Opis znaczników jezyka HTML
- Podzial wiersza
- ltbrgt
- umozliwia podzial wiersza w dowolnym miejscu
- nie posiada znacznika koncowego (jest elementem
liniowym)
47Opis znaczników jezyka HTML
- Linia pozioma
- lthrgt
- atrybuty
- align
- noshade
- size - wysokosc
- width
- pozwala na podzial strony przy pomocy linii
48Opis znaczników jezyka HTML
- Grupowanie elementów
- ltdivgt
- atrybuty
- align
- umozliwia utworzenie obszaru skladajacego sie z
wielu elementów blokowych - pozwala na formatowanie grupy elementów
- automatycznie umieszcza znaki konca linii przed i
po bloku div
49Opis znaczników jezyka HTML
- Grupowanie elementów liniowych
- ltspangt
- umozliwia grupowanie elementów w celu ich
sformatowania - nie umieszcza znaków konca linii
50Listy
- Lista wypunktowana (nieuporzadkowana) ltulgt
- atrybuty
- type disc, square, circle
- zawiera pozycje tworzone za pomoca elementu li
- element li w specyfikacji 3.2 byl elementem
liniowym - od wersji 4.01 li jest elementem blokowym
- atrybut type disc, square, circle
51Listy
- Lista numerowana (uporzadkowana) ltolgt
- atrybuty
- type A, a, I, i, 1
- start
52Listy
- Lista definicji ltdlgt
- skladaja sie z trzech czesci listy definicji
(dl), terminu definiowanego (dt) oraz opisu
definicji (dd)
53Opis znaczników jezyka HTML
- Hiperlacze ltagt
- tworzy lacze do innego dokumentu lub miejsca w
dokumencie - atrybuty
- href URL docelowy adres URL
- target gdzie otworzyc docelowa strone
- _blank w nowym oknie
- _self w tej samej ramce
- _parent w ramce nadrzednej
- _top w oknie glównym
54Opis znaczników jezyka HTML
- Tabela lttablegt
- atrybuty
- align
- bgcolor
- border
- cellpadding
- cellspacing
- width, height
- definiuje tabele
- wewnatrz tabeli mozna zdefiniowac naglówek,
wiersz, komórke oraz inna tabele
Cell A Cell B
55Opis znaczników jezyka HTML
- Wiersz tabeli lttrgt
- atrybuty
- align, valign
- bgcolor
56Opis znaczników jezyka HTML
- Naglówek tabeli ltthgt
- atrybuty
- align, valign
- bgcolor
- colspan
- rowspan
- width, height
- nowrap
Header 1 Header 2
Cell A Cell B
57Opis znaczników jezyka HTML
58Opis znaczników jezyka HTML
- Zbiór ramek ltframesetgt
- dzieli okno na ramki, z których kazda zawiera
odrebny dokument - dokument nie moze zawierac elementu ltbodygt
- atrybuty
- cols pixels, ,
- rows pixels, ,
59Opis znaczników jezyka HTML
- Ramka ltframegt
- atrybuty
- frameborder 0, 1
- name
- src adres URL
- noresize bez mozliwosci zmiany wymiarów
- scrolling czy ramka jest skrolowana
60Opis znaczników jezyka HTML
- Ramka wewnetrzna (inline) ltiframegt
- atrybuty
- align
- frameborder
- width, height
- name
- scrolling
- src
61Opis znaczników jezyka HTML
- Obrazek ltimggt
- atrybuty
- src adres URL
- alt opis obrazka
- align
- width, height
62ltbodygt
63Tlo
- Ustawianie koloru tla atrybut Bgcolor
- Mozliwe wartosci
- liczba hexadecymalna
- wartosc RGB
- nazwa koloru
64Tlo
65Tlo
- Ustawianie tapety atrybut Background
- Mozliwe wartosci
- adres URL
66Tlo
67ltpregt
- definiuje blok tekstu nieformatowanego
68Metadane
- Element Meta
- ltmetagt
- zawiera informacje o danej stronie
- atrybuty
- name nazwa metainformacji
- content wartosc skojarzona z nazwa lub
http-equiv - http-equiv nazwa naglówka HTTP
- scheme format zawartosci
69Metadane
- name
- author
- description
- keywords
70Metadane
- http-equiv
- content-type
- expires
- refresh
- set-cookie
71Kodowanie znaków
- International Organization for Standardization -
ISO-8859-2 (ISO Latin 2) - Microsoft - WIN-1250
72CSS
73Co to jest CSS?
- CSS to kaskadowe arkusze styli (Cascading Style
Sheets) - Style definiuja w jaki sposób wyswietlac
(formatowac) elementy HTML - Style sa przechowywane w tzw. arkuszach styli
(CSS files) - Style sa uporzadkowane kaskadowo
- Style zostaly dodane do wersji HTML 4.0
74Definicje styli
- Style moga byc zdefiniowane w
- pojedynczym elemencie HTML
- naglówku HTML
- pliku zewnetrznym CSS
75Definiowanie stylu w pojedynczym elemencie HTML
- ltelement stylenazwa1 wartosc1 nazwa2
wartosc2 nazwaN wartoscNgt
76Definiowanie stylu w naglówku HTML
- ltheadgt
- ltstylegt
- element
- nazwa1 wartosc1
- nazwa2 wartosc2
- nazwaN wartoscN
-
- ...
- lt/stylegt
- lt/headgt
77Definiowanie stylu w pliku zewnetrznym
- Plik CSS to plik tekstowy z rozszerzeniem CSS
- Tresc pliku CSS
- element
- nazwa1 wartosc1
- nazwa2 wartosc2
- nazwaN wartoscN
-
- ...
78Dolaczenie pliku CSS do dokumentu HTML
79Hierarchia styli
- Domyslny styl przegladarki
- Zewnetrzny arkusz CSS (plik CSS)
- Wewnetrzny arkusz CSS (naglówek HTML)
- Styl inline (pojedynczy element HTML)
80Skladnia CSS
81Grupowanie
82Klasy
- Umozliwiaja definiowanie róznych styli dla
elementów tego samego typu
83Uzycie klas
84Przypisanie wielu klas do elementu HTML
85Definiowanie klas dla róznych elementów HTML
86Uzycie
87Definiowanie stylu dla elementów o okreslonym
atrybucie
88Definiowanie stylu dla elementu o okreslonym id
89CSS Background
90Ustawianie tla
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- body background-color yellow
- h1 background-color 00ff00
- h2 background-color transparent
- p background-color rgb(250,0,255)
- lt/stylegt
- lt/headgt
- ltbodygt
- lth1gtThis is header 1lt/h1gt
- lth2gtThis is header 2lt/h2gt
- ltpgtThis is a paragraphlt/pgt
- lt/bodygt
- lt/htmlgt
91Ustawianie obrazka jako tlo
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- body
- background-image
- url('bgdesert.jpg')
-
- lt/stylegt
- lt/headgt
- ltbodygt
- lt/bodygt
- lt/htmlgt
92Wielokrotne powtórzenie obrazka
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- body
- background-image
- url('bgdesert.jpg')
- background-repeat repeat
-
- lt/stylegt
- lt/headgt
- ltbodygt
- lt/bodygt
- lt/htmlgt
93CSS Text
94Kolor tekstu
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- h1 color 00ff00
- h2 color dda0dd
- p color rgb(0,0,255)
- lt/stylegt
- lt/headgt
- ltbodygt
- lth1gtThis is header 1lt/h1gt
- lth2gtThis is header 2lt/h2gt
- ltpgtThis is a paragraphlt/pgt
- lt/bodygt
- lt/htmlgt
95Kolor tla tekstu
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- span.highlight
- background-coloryellow
-
- lt/stylegt
- lt/headgt
- ltbodygt
- ltpgt
- ltspan class"highlight"gtThis is a text.lt/spangt
This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text.
This is a text. This is a text. ltspan
class"highlight"gtThis is a text.lt/spangt - lt/pgt
- lt/bodygt
- lt/htmlgt
96Ustawianie odstepu miedzy znakami
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- h1 letter-spacing -3px
- h4 letter-spacing 0.5cm
- lt/stylegt
- lt/headgt
- ltbodygt
- lth1gtThis is header 1lt/h1gt
- lth4gtThis is header 4lt/h4gt
- lt/bodygt
- lt/htmlgt
97Wyrównanie tekstu
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- h1 text-align center
- h2 text-align left
- h3 text-align right
- lt/stylegt
- lt/headgt
- ltbodygt
- lth1gtThis is header 1lt/h1gt
- lth2gtThis is header 2lt/h2gt
- lth3gtThis is header 3lt/h3gt
- lt/bodygt
- lt/htmlgt
98CSS Font
99CSS Font
100Ustawianie czcionki tekstu
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- h3 font-family times
- p font-family courier
- p.sansserif font-family sans-serif
- lt/stylegt
- lt/headgt
- ltbodygt
- lth3gtThis is header 3lt/h3gt
- ltpgtThis is a paragraphlt/pgt
- ltp class"sansserif"gtThis is a paragraphlt/pgt
- lt/bodygt
- lt/htmlgt
101Ustawianie wielkosci czcionki
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- h1 font-size 150
- h2 font-size 130
- p font-size 100
- lt/stylegt
- lt/headgt
- ltbodygt
- lth1gtThis is header 1lt/h1gt
- lth2gtThis is header 2lt/h2gt
- ltpgtThis is a paragraphlt/pgt
- lt/bodygt
- lt/htmlgt
102CSS Border
103CSS Border
104Ustawianie obramowania
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- p
- border medium double rgb(250,0,255)
-
- lt/stylegt
- lt/headgt
- ltbodygt
- ltpgtSome textlt/pgt
- lt/bodygt
- lt/htmlgt
105Obramowanie z kazdej strony rózne
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- p.soliddouble border-style solid double
- p.doublesolid border-style double solid
- p.groovedouble border-style groove double
- p.three border-style solid double groove
- lt/stylegt
- lt/headgt
- ltbodygt
- ltp class"soliddouble"gtSome textlt/pgt
- ltp class"doublesolid"gtSome textlt/pgt
- ltp class"groovedouble"gtSome textlt/pgt
- ltp class"three"gtSome textlt/pgt
- lt/bodygt
- lt/htmlgt
106CSS Margin
107Ustawianie marginesów
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- p.margin margin 2cm 4cm 3cm 4cm
- lt/stylegt
- lt/headgt
- ltbodygt
- ltpgtThis is a paragraph with no specified
marginslt/pgt - ltp class"margin"gtThis is a paragraph with
specified marginslt/pgt - ltpgtThis is a paragraph with no specified
marginslt/pgt - lt/bodygt
- lt/htmlgt
108CSS List
109Listy nieuporzadkowane
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- ul.disc list-style-type disc
- ul.circle list-style-type circle
- ul.square list-style-type square
- ul.none list-style-type none
- lt/stylegt
- lt/headgt
- ltbodygt
- ltul class"disc"gt
- ltligtCoffeelt/ligt
- ltligtTealt/ligt
- ltligtCoca Colalt/ligt
- lt/ulgt
- ltul class"circle"gt
- ltligtCoffeelt/ligt
- ltligtTealt/ligt
- ltligtCoca Colalt/ligt
110Listy uporzadkowane
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- ol.decimal list-style-type decimal
- ol.lroman list-style-type lower-roman
- ol.uroman list-style-type upper-roman
- ol.lalpha list-style-type lower-alpha
- ol.ualpha list-style-type upper-alpha
- lt/stylegt
- lt/headgt
- ltbodygt
- ltol class"decimal"gt
- ltligtCoffeelt/ligt
- ltligtTealt/ligt
- ltligtCoca Colalt/ligt
- lt/olgt
- ltol class"lroman"gt
- ltligtCoffeelt/ligt
- ltligtTealt/ligt
111CSS Dimension
- The CSS dimension properties allow you to control
the height and width of an element. It also
allows you to increase the space between two
lines.
112CSS Dimension
113Ustawianie wysokosci obrazka
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- img.normal height auto
- img.big height 160px
- img.small height 30px
- lt/stylegt
- lt/headgt
- ltbodygt
- ltimg class"normal" src"logocss.gif" width"95"
height"84" /gt - ltbr /gt
- ltimg class"big" src"logocss.gif" width"95"
height"84" /gt - ltbr /gt
- ltimg class"small" src"logocss.gif" width"95"
height"84" /gt - lt/bodygt
- lt/htmlgt
114CSS Classification
- The CSS classification properties allow you to
specify how and where to display an element.
115CSS Classification
116CSS Classification
117CSS Classification
118Uzycie wlasciwosci float
- span
- floatleft
- width0.7em
- font-size400
- font-familyalgerian,courier
- line-height80
-
- ltpgt
- ltspangtTlt/spangthis is some text.
- This is some text. This is some text.
- This is some text. This is some text. This is
some text. - This is some text. This is some text. This is
some text. - This is some text. This is some text. This is
some text. - This is some text. This is some text. This is
some text. - This is some text. This is some text. This is
some text. - This is some text. This is some text. This is
some text. - lt/pgt
119CSS Positioning
- The CSS positioning properties allows you to
position an element.
120CSS Positioning
121CSS Positioning
122CSS Positioning
123Uzycie wlasciwosci z-index
- lthtmlgt
- ltheadgt
- ltstyle type"text/css"gt
- img.x
- positionabsolute
- left0px
- top0px
- z-index-1
-
- lt/stylegt
- lt/headgt
- ltbodygt
- lth1gtThis is a Headinglt/h1gt
- ltimg class"x" src"bulbon.gif" width"100"
height"180"gt - ltpgtDefault z-index is 0. Z-index -1 has lower
priority.lt/pgt - lt/bodygt
- lt/htmlgt
124Uzycie wlasciwosci z-index
125CSS Pseudo-classes
- CSS pseudo-classes are used to add special
effects to some selectors.
126CSS Pseudo-classes
127CSS Pseudo-classes
128Anchor Pseudo-classes
129Pseudo-classes and CSS Classes
130CSS Pseudo-elements
- CSS pseudo-elements are used to add special
effects to some selectors.
131CSS Pseudo-elements
132CSS Pseudo-elements
133Multiple Pseudo-elements
134XML
135Co to jest XML?
- XML to EXtensible Markup Language
- XML to jezyk znacznikówpodobnie jak HTML
- XML sluzy do opisu danych
- XML nie posiada zdefiniowanego zbioru znaczników
136Róznice miedzy XML i HTML
XML HTML
opis danych wyswietlanie danych
znaczenie danych wyglad danych
brak zdefiniowanych znaczników zdefiniowany zbiór znaczników
137Zastosowania XML
- oddzielenie danych od HTML (dokument-widok)
- wymiana danych (uniwersalny format)
- wspóldzielenie danych
- gromadzenie i przechowywanie danych
138Skladnia XML
- dokument XML musi miec element glówny (root)
- elementy XML musza miec znacznik zamykajacy
- XML jest czuly na wielkosc liter
- elementy XML musza byc prawidlowo zagniezdzone
- wartosci atrybutów XML musza byc wziete w
cudzyslów
139Skladnia XML
- lt?xml version"1.0" encoding"ISO-8859-1"?gt
- ltroot_elementgt
- ltparent_elementgt
- ltchild_elementgt
- ...
- lt/child_elementgt
- ...
- lt/parent_elementgt
- ...
- lt/root_elementgt
140Przestrzenie nazw (namespaces)
- zapewniaja unikalnosc nazw elementów XML
- deklaruje sie je jako atrybut otwarcia bloku i
obowiazuja wewnatrz calego bloku - skladnia
- xmlnsnamespace-prefix"namespaceURI"
141Przestrzenie nazw
- lthtable xmlnsh"http//www.w3.org/TR/html4/"gt
- lthtrgt
- lthtdgtAppleslt/htdgt lthtdgtBananaslt/htdgt
- lt/htrgt
- lt/htablegt
142Srodowisko XML
CSS
DTD
XML
XSL
XML Schema
XSLT
XSL-FO
X-Path
143XML i CSS
- lt?xml-stylesheet type"text/css" hrefURL"?gt
144XML i CSS
- lt?xml version"1.0" encoding"ISO-8859-1"?gt
- lt?xml-stylesheet type"text/css"
href"cd_catalog.css"?gt - ltCATALOGgt
- ltCDgt
- ltTITLEgtEmpire Burlesquelt/TITLEgt
- ltARTISTgtBob Dylanlt/ARTISTgt
- ltCOUNTRYgtUSAlt/COUNTRYgt
- ltCOMPANYgtColumbialt/COMPANYgt
- ltYEARgt1985lt/YEARgt
- lt/CDgt
- lt/CATALOGgt
145XML i CSS
- CATALOG background-color ffffff width 100
- CD display block margin-bottom 30pt
margin-left 0 - TITLE color FF0000 font-size 20pt
- ARTIST color 0000FF font-size 20pt
- COUNTRY,PRICE,YEAR,COMPANY display block
color 000000 margin-left 20pt
146XSL
- XSL XML Style Sheets
- sklada sie z trzech czesci
- XSLT jezyk transformacji dokumentów XML
- X-Path jezyk nawigacji w dokumentach XML
- XSL-FO jezyk do formatowania dokumentów XML
147Co to jest XSLT?
- XSLT to XSL Transformations
- XSLT jest najwazniejsza czescia XSL
- XSLT transformuje dokument XML na inny dokument
XML - XSLT korzysta z XPath do nawigacji w dokumencie
XML - XSLT to standard W3C
148Deklaracja pliku XSLT
- ltxslstylesheet version"1.0" xmlnsxsl"http//ww
w.w3.org/1999/XSL/Transform"gt
149Deklaracja pliku XSLT
- lt?xml version"1.0" encoding"ISO-8859-1"?gt
- ltxslstylesheet version"1.0" xmlnsxsl"http//ww
w.w3.org/1999/XSL/Transform"gt - lt!- Instrukcje -?
- lt/xslstylesheetgt
150Dolaczenie pliku XSL do dokumentu XML
- lt?xml-stylesheet type"text/xsl" hrefURL"?gt
151ltxsltemplategt
- sluzy do budowania wzorców
- atrybut match sluzy do powiazania wzorca z
elementem XML
152ltxsltemplategt
- lt?xml version"1.0" encoding"ISO-8859-1"?gt
- ltxslstylesheet version"1.0" xmlnsxsl"http//ww
w.w3.org/1999/XSL/Transform"gt - ltxsltemplate match"/"gt
- lthtmlgt
- ltbodygt
- lth2gtMy CD Collectionlt/h2gt
- lt/bodygt
- lt/htmlgt
- lt/xsltemplategtlt/xslstylesheetgt
153ltxslvalue-ofgt
- sluzy do pobrania wartosci elementu XML
154ltxslvalue-ofgt
- ltxsltemplate match"/"gt
- lthtmlgt ltbodygt
- lth2gtMy CD Collectionlt/h2gt
- lttable border"1"gt
- lttr bgcolor"9acd32"gt
- ltthgtTitlelt/thgt ltthgtArtistlt/thgt
- lt/trgt
- lttrgtlttdgt
- ltxslvalue-of select"catalog/cd/title"/gtlt/tdgt
- lttdgtltxslvalue-of select"catalog/cd/artist"/gtlt
/tdgt - lt/trgtlt/tablegtlt/bodygtlt/htmlgt
- lt/xsltemplategt
155ltxslfor-eachgt
- sluzy do wybierania zbioru elementów XML (petla)
156ltxslfor-eachgt
- ltxslfor-each select"catalog/cd"gt
- lttrgtlttdgt
- ltxslvalue-of select"title"/gt
- lt/tdgt
- lttdgt
- ltxslvalue-of select"artist"/gt
- lt/tdgtlt/trgt
- lt/xslfor-eachgt
157ltxslsortgt
- ltxslfor-each select"catalog/cd"gt
- ltxslsort select"artist"/gt
- lttrgtlttdgt
- ltxslvalue-of select"title"/gt
- lt/tdgtlttdgt
- ltxslvalue-of select"artist"/gt
- lt/tdgtlt/trgt
- lt/xslfor-eachgt
158ltxslifgt
- ltxslif test"expression"gt
- ...
- ...some output if the expression is true...
- ...
- lt/xslifgt
159ltxslifgt
- ltxslif test"price gt 10"gt
- lttrgtlttdgt
- ltxslvalue-of select"title"/gt
- lt/tdgt
- lttdgt
- ltxslvalue-of select"artist"/gt
- lt/tdgtlt/trgt
- lt/xslifgt
160ltxslchoosegt
- ltxslchoosegt
- ltxslwhen test"expression"gt ... some output ...
- lt/xslwhengt
- ltxslotherwisegt
- ... some output ....
- lt/xslotherwisegt
- lt/xslchoosegt
161ltxslchoosegt
- ltxslchoosegt
- ltxslwhen test"price gt 10"gt
- lttd bgcolor"ff00ff"gt
- ltxslvalue-of select"artist"/gt
- lt/tdgt
- lt/xslwhengt
- ltxslotherwisegt
- lttdgt
- ltxslvalue-of select"artist"/gt
- lt/tdgt
- lt/xslotherwisegt
- lt/xslchoosegt
162ltxslapply-templatesgt
- ltxsltemplate match"/"gt
- lthtmlgtltbodygt
- lth2gtMy CD Collectionlt/h2gt
- ltxslapply-templates/gt
- lt/bodygtlt/htmlgt
- lt/xsltemplategt
163ltxslapply-templatesgt
- ltxsltemplate match"cd"gt
- ltpgt
- ltxslapply-templates select"title"/gt
- ltxslapply-templates select"artist"/gt
- lt/pgt
- lt/xsltemplategt