Programowanie w HTML i XML - PowerPoint PPT Presentation

1 / 163
About This Presentation
Title:

Programowanie w HTML i XML

Description:

Programowanie w HTML i XML prowadz cy: dr in . Tomasz Wierci ski Plan wyk ad w Co to jest WWW? Architektura rodowiska WWW (klient-serwer) Przegl darki WWW ... – PowerPoint PPT presentation

Number of Views:265
Avg rating:3.0/5.0
Slides: 164
Provided by: Wierc
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com