Programowanie w HTML i XML

1
Programowanie w HTML i XML

• prowadzacy
• dr inz. Tomasz Wiercinski

2
Plan wykladów

1. Co to jest WWW?
2. Architektura srodowiska WWW (klient-serwer)
3. Przegladarki WWW
4. Serwery WWW
5. Uniform Resource Locators URL
6. Protokól HTTP
7. Witryny WWW
8. Jezyki znaczników
9. Wlasciwosci jezyków znakowania
10. Budowa jezyków znakowania
11. Jezyk HTML
12. Wersje jezyka HTML
13. Struktura dokumentu HTML
14. Opis znaczników HTML
15. Kodowanie znaków
16. Dynamiczny HTML
17. Arkusze styl
18. Zdarzenia
19. The Document Object Model (DOM)

3
Literatura

• 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

4
Co 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

10
Architektura statycznego srodowiska WWW

• WWW to srodowisko klient-serwer

11
Klient 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

13
Serwer 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)

14
Architektura dynamicznego srodowiska WWW

• Architektura trójwarstwowa

WWW Server
Application Server
DB Server
15
Serwer 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.

16
Serwer 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.

17
Uniform 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
19
Protokó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

20
Protokó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

21
Kody 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

22
Metoda 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
23
Metoda GET
HTTP Request
GET /index.html?loginjuliuspasswordzgadnij
HTTP/1.1 Host www.example.com User-Agent
Mozilla/4.0
24
Witryny 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

25
Struktura 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

26
Struktura liniowa

• przejscie od strony do strony odbywa sie w sposób
  liniowy (krok po kroku)

27
Struktura liniowa z alternatywa

• posiada mozliwosc odejscia od glównej sciezki
  dokumentów

28
Struktura mieszana (liniowo-hierarchiczna)
29
Struktura sieciowa

• brak ogólnej struktury dokumentów
• polaczenia miedzy stronami za pomoca hiperlaczy

30
Jezyki znaczników

• Jezyk znakowania to sposób kodowania dokumentów
  tekstowych przy pomocy znaczników.

31
Budowa 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

32
Budowa 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

33
Wlasciwosci 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

34
Jezyk 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

35
Jezyk 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

36
Historia 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

37
Historia 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

38
Historia jezyka HTML c.d.

• 1997 HTML 4.0 wprowadzono dynamiczny HTML i
  arkusze stylów

39
Struktura 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

40
Opis znaczników jezyka HTML

• Komentarz
• lt!tresc komentarza ?
• sluzy do zamieszczenia w kodzie zródlowym
  komentarza
• jest ignorowany przez przegladarke

41
Opis znaczników jezyka HTML - HEAD

• Tytul dokumentu
• lttitlegtlt/titlegt
• jest wyswietlany na pasku tytulowym okna
  przegladarki

42
Opis 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

43
Opis 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

44
Naglówki
45
Opis znaczników jezyka HTML

• Akapit
• ltpgtlt/pgt
• atrybuty
• align
• umozliwia wyróznienie fragmentu tekstu
• HTML automatycznie dodaje pusta linie przed i po
  akapicie

46
Opis znaczników jezyka HTML

• Podzial wiersza
• ltbrgt
• umozliwia podzial wiersza w dowolnym miejscu
• nie posiada znacznika koncowego (jest elementem
  liniowym)

47
Opis znaczników jezyka HTML

• Linia pozioma
• lthrgt
• atrybuty
• align
• noshade
• size - wysokosc
• width
• pozwala na podzial strony przy pomocy linii

48
Opis 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

49
Opis znaczników jezyka HTML

• Grupowanie elementów liniowych
• ltspangt
• umozliwia grupowanie elementów w celu ich
  sformatowania
• nie umieszcza znaków konca linii

50
Listy

• 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

51
Listy

• Lista numerowana (uporzadkowana) ltolgt
• atrybuty
• type A, a, I, i, 1
• start

52
Listy

• Lista definicji ltdlgt
• skladaja sie z trzech czesci listy definicji
  (dl), terminu definiowanego (dt) oraz opisu
  definicji (dd)

53
Opis 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

54
Opis 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
55
Opis znaczników jezyka HTML

• Wiersz tabeli lttrgt
• atrybuty
• align, valign
• bgcolor

56
Opis 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
57
Opis znaczników jezyka HTML

• Komórka tabeli lttdgt

58
Opis 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, ,

59
Opis 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

60
Opis znaczników jezyka HTML

• Ramka wewnetrzna (inline) ltiframegt
• atrybuty
• align
• frameborder
• width, height
• name
• scrolling
• src

61
Opis znaczników jezyka HTML

• Obrazek ltimggt
• atrybuty
• src adres URL
• alt opis obrazka
• align
• width, height

62
ltbodygt
63
Tlo

• Ustawianie koloru tla atrybut Bgcolor
• Mozliwe wartosci
• liczba hexadecymalna
• wartosc RGB
• nazwa koloru

64
Tlo
65
Tlo

• Ustawianie tapety atrybut Background
• Mozliwe wartosci
• adres URL

66
Tlo
67
ltpregt

• definiuje blok tekstu nieformatowanego

68
Metadane

• 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

69
Metadane

• name
• author
• description
• keywords

70
Metadane

• http-equiv
• content-type
• expires
• refresh
• set-cookie

71
Kodowanie znaków

• International Organization for Standardization -
  ISO-8859-2 (ISO Latin 2)
• Microsoft - WIN-1250

72
CSS
73
Co 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

74
Definicje styli

• Style moga byc zdefiniowane w
• pojedynczym elemencie HTML
• naglówku HTML
• pliku zewnetrznym CSS

75
Definiowanie stylu w pojedynczym elemencie HTML

• ltelement stylenazwa1 wartosc1 nazwa2
  wartosc2 nazwaN wartoscNgt

76
Definiowanie stylu w naglówku HTML

• ltheadgt
• ltstylegt
• element
• nazwa1 wartosc1
• nazwa2 wartosc2
• nazwaN wartoscN
• ...
• lt/stylegt
• lt/headgt

77
Definiowanie stylu w pliku zewnetrznym

• Plik CSS to plik tekstowy z rozszerzeniem CSS
• Tresc pliku CSS
• element
• nazwa1 wartosc1
• nazwa2 wartosc2
• nazwaN wartoscN
• ...

78
Dolaczenie pliku CSS do dokumentu HTML
79
Hierarchia styli

1. Domyslny styl przegladarki
2. Zewnetrzny arkusz CSS (plik CSS)
3. Wewnetrzny arkusz CSS (naglówek HTML)
4. Styl inline (pojedynczy element HTML)

80
Skladnia CSS
81
Grupowanie
82
Klasy

• Umozliwiaja definiowanie róznych styli dla
  elementów tego samego typu

83
Uzycie klas
84
Przypisanie wielu klas do elementu HTML
85
Definiowanie klas dla róznych elementów HTML
86
Uzycie
87
Definiowanie stylu dla elementów o okreslonym
atrybucie
88
Definiowanie stylu dla elementu o okreslonym id
89
CSS Background
90
Ustawianie 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

91
Ustawianie 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

92
Wielokrotne 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

93
CSS Text
94
Kolor 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

95
Kolor 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

96
Ustawianie 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

97
Wyró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

98
CSS Font
99
CSS Font
100
Ustawianie 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

101
Ustawianie 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

102
CSS Border
103
CSS Border
104
Ustawianie 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

105
Obramowanie 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

106
CSS Margin
107
Ustawianie 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

108
CSS List
109
Listy 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

110
Listy 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

111
CSS 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.

112
CSS Dimension
113
Ustawianie 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

114
CSS Classification

• The CSS classification properties allow you to
  specify how and where to display an element.

115
CSS Classification
116
CSS Classification
117
CSS Classification
118
Uzycie 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

119
CSS Positioning

• The CSS positioning properties allows you to
  position an element.

120
CSS Positioning
121
CSS Positioning
122
CSS Positioning
123
Uzycie 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

124
Uzycie wlasciwosci z-index
125
CSS Pseudo-classes

• CSS pseudo-classes are used to add special
  effects to some selectors.

126
CSS Pseudo-classes
127
CSS Pseudo-classes
128
Anchor Pseudo-classes
129
Pseudo-classes and CSS Classes
130
CSS Pseudo-elements

• CSS pseudo-elements are used to add special
  effects to some selectors.

131
CSS Pseudo-elements
132
CSS Pseudo-elements
133
Multiple Pseudo-elements
134
XML
135
Co 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

136
Róznice miedzy XML i HTML
XML HTML
opis danych wyswietlanie danych
znaczenie danych wyglad danych
brak zdefiniowanych znaczników zdefiniowany zbiór znaczników
137
Zastosowania XML

• oddzielenie danych od HTML (dokument-widok)
• wymiana danych (uniwersalny format)
• wspóldzielenie danych
• gromadzenie i przechowywanie danych

138
Skladnia 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

139
Skladnia 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

140
Przestrzenie nazw (namespaces)

• zapewniaja unikalnosc nazw elementów XML
• deklaruje sie je jako atrybut otwarcia bloku i
  obowiazuja wewnatrz calego bloku
• skladnia
• xmlnsnamespace-prefix"namespaceURI"

141
Przestrzenie nazw

• lthtable xmlnsh"http//www.w3.org/TR/html4/"gt
• lthtrgt
• lthtdgtAppleslt/htdgt lthtdgtBananaslt/htdgt
• lt/htrgt
• lt/htablegt

142
Srodowisko XML
CSS
DTD
XML
XSL
XML Schema
XSLT
XSL-FO
X-Path
143
XML i CSS

• lt?xml-stylesheet type"text/css" hrefURL"?gt

144
XML 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

145
XML 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

146
XSL

• 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

147
Co 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

148
Deklaracja pliku XSLT

• ltxslstylesheet version"1.0" xmlnsxsl"http//ww
  w.w3.org/1999/XSL/Transform"gt

149
Deklaracja 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

150
Dolaczenie pliku XSL do dokumentu XML

• lt?xml-stylesheet type"text/xsl" hrefURL"?gt

151
ltxsltemplategt

• sluzy do budowania wzorców
• atrybut match sluzy do powiazania wzorca z
  elementem XML

152
ltxsltemplategt

• 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

153
ltxslvalue-ofgt

• sluzy do pobrania wartosci elementu XML

154
ltxslvalue-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

155
ltxslfor-eachgt

• sluzy do wybierania zbioru elementów XML (petla)

156
ltxslfor-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

157
ltxslsortgt

• 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

158
ltxslifgt

• ltxslif test"expression"gt
• ...
• ...some output if the expression is true...
• ...
• lt/xslifgt

159
ltxslifgt

• 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

160
ltxslchoosegt

• ltxslchoosegt
• ltxslwhen test"expression"gt ... some output ...
• lt/xslwhengt
• ltxslotherwisegt
• ... some output ....
• lt/xslotherwisegt
• lt/xslchoosegt

161
ltxslchoosegt

• 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

162
ltxslapply-templatesgt

• ltxsltemplate match"/"gt
• lthtmlgtltbodygt
• lth2gtMy CD Collectionlt/h2gt
• ltxslapply-templates/gt
• lt/bodygtlt/htmlgt
• lt/xsltemplategt

163
ltxslapply-templatesgt

• ltxsltemplate match"cd"gt
• ltpgt
• ltxslapply-templates select"title"/gt
• ltxslapply-templates select"artist"/gt
• lt/pgt
• lt/xsltemplategt