Programowanie w HTML i XML prowadzący: dr inż. Tomasz Wierciński.

Prezentacja na temat: "Programowanie w HTML i XML prowadzący: dr inż. Tomasz Wierciński."— Zapis prezentacji:

1 Programowanie w HTML i XML prowadzący: dr inż. Tomasz Wierciński

2 Plan wykładów 1. Co to jest WWW? 1. Architektura środowiska WWW (klient-serwer) 1. Przeglądarki WWW 2. Serwery WWW 2. Uniform Resource Locators – URL 3. Protokół HTTP 4. Witryny WWW 2. Języki znaczników 1. Właściwości języków znakowania 2. Budowa języków znakowania 3. Język HTML 1. Wersje języka HTML 2. Struktura dokumentu HTML 3. Opis znaczników HTML 4. Kodowanie znaków 5. Dynamiczny HTML 1. Arkusze styl 2. Zdarzenia 3. The Document Object Model (DOM) 4. Język XML 1. Język XSL 5. Język JavaScript

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 przykładach, 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? Sieć WWW jest hipertekstowym systemem informacyjnym idea hipertekstu polega na tym, że zamiast czytać tekst po kolei, linia po linii (tak jak książkę), można przechodzić od punktu do punktu w sposób nieliniowy

5 WWW jest systemem graficznym integruje ze sobą tekst z grafiką, dźwiękiem i sekwencjami wideo oraz wbudowane aplikacje

6 WWW jest siecią wieloplatformową dostęp do WWW możliwy jest przy użyciu dowolnego sprzętu, dowolnego systemu operacyjnego i dowolnego typu ekranu ograniczenia wynikają z użycia niestandardowych rozszerzeń wprowadzanych przez producentów oprogramowania

7 WWW jest siecią rozproszoną dane rozproszone są po całym świecie w tysiącach witryn na tysiącach serwerów każda witryna, każda strona ma swój unikalny adres URL (ang. Uniform Resource Locator) będący uniwersalnym identyfikatorem zasobów, np. http://www.google.pl

8 WWW jest siecią dynamiczną dane zmodyfikowane na stronach www są automatycznie widoczne przez wszystkich użytkowników

9 Sieć WWW jest interakcyjna możliwość reakcji na zdarzenia wywołane przez użytkownika, np. kliknięcie myszką możliwość wymiany informacji pomiędzy użytkownikiem a serwerem WWW za pomocą formularzy

10 Architektura statycznego środowiska WWW WWW to środowisko klient-serwer

11 Klient WWW Klientem WWW jest przeglądarka Przeglądarka jest programem, który służy do oglądania i poruszania się po stronach WWW Potrafi odczytywać pliki różnych (oprócz HTTP) serwisów internetowych takich jak FTP, Gopher, grupy dyskusyjne Usenet, bazy danych WAIS, Telnet, poczta elektroniczna (e-mail)

12 Chcąc wykorzystać przeglądarkę do odczytywania różnych typów informacji w Internecie, należy skorzystać z różnych rodzajów adresów URL, np. ftp://nazwa_serwera/katalog/plik ftp://nazwa_serwera/katalog/plik Obecnie najpopularniejszymi przeglądarkami w sieci WWW są Microsoft Internet Explorer, Mozilla Firefox, Opera

13 Serwer WWW Serwer WWW to program działający na komputerze w sieci Internet, który odpowiada na żądania przeglądarki i wysyła do niej odpowiednie pliki (np. Apache)

14 Architektura dynamicznego środowiska WWW Architektura trójwarstwowa WWW Server Application Server DB Server

15 Serwer Aplikacyjny Serwer w sieci komputerowej, przeznaczony do zdalnego uruchamiania i użytkowania aplikacji Zestaw oprogramowania (platforma) wspierająca programistę/developera przy tworzeniu aplikacji. Umożliwia oddzielenie logiki biznesowej od usług dostarczanych przez producenta platformy (bezpieczeństwo, zarządzanie transakcjami, skalowalność, czy też dostęp do baz danych). Do serwerów aplikacji należą m.in.: JBoss, BEA WebLogic, IBM WebSphere oraz platforma.NET Microsoft-u.

16 Oprogramowanie bądź system informatyczny służący do zarządzania komputerowymi bazami danych Posiada mechanizmy: środki do gromadzenia, utrzymywania i administrowania trwałymi i masowymi zbiorami danych, środki zapewniające spójność i bezpieczeństwo danych, sprawny dostęp do danych (zwykle poprzez język zapytań, np. SQL), środki programistyczne służące do aktualizacji/przetwarzania danych (API dla popularnych języków programowania), jednoczesny dostęp do danych dla wielu użytkowników (z reguły realizowany poprzez transakcje), środki pozwalające na regulację dostępu do danych (autoryzację), środki pozwalające na odtworzenie zawartości bazy danych po awarii, środki optymalizujące zajętość pamięci oraz czas dostępu (np. indeksy), środki do pracy lub współdziałania w środowiskach rozproszonych. Serwer bazy danych

17 Uniform Resource Locators Oznacza zunifikowany format odnośników do zasobów Jest podzbiorem URI (Uniform Resource Identifier - zunifikowany identyfikator zasobów) Jest używany do adresowania dokumentów lub innych danych w sieci WWW. Może to być dokument WWW, plik na serwerze FTP, wiadomość na serwerze grup dyskusyjnych lub adres poczty elektronicznej

18 Pełen adres URL ma następującą postać syntaktyczną: scheme :// host : port / path / filename?query scheme - typ serwisu (nazwa protokołu), np HTTP, FTP; host - nazwa hostu (komputera w sieci WWW) port - numer portu na którym nasłuchuje dany serwer ( domyślnym numerem portu jest 80); path - ścieżka podkatalogów na serwerze (domyślnie katalog główny – root); filename - nazwa dokumentu (domyślnie index.html) query - treść zapytania postaci nazwa=wartość http://www.w3schools.com/html/lastpage.htm

19 Protokół HTTP (Hypertext Transfer Protocol) za pomocą protokołu HTTP przesyła się informacje w sieci WWW udostępnia on znormalizowany sposób komunikowania się komputerów ze sobą określa on formę żądań klienta dotyczących danych oraz formę odpowiedzi serwera na te żądania (protokół request/response) metody GET parametry zapytania przekazane w zapytaniu (query string) POST posiada blok danych umieszczony za nagłówkiem; posiada dodatkowe pola nagłówka: Content-Type:, Content- Length:

20 Protokół HTTP Initial request line posiada trzy części: nazwę metody, ścieżkę lokalną zasobu i używaną wersję HTTP GET /path/to/file/index.html HTTP/1.0 Initial Response Line (Status Line) posiada trzy części: wersję 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 – błąd klienta, np. 404: Not Found 5xx – błąd serwera, np. 500: Internal Server Error

22 Metoda POST 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 login=julius&password=zgadnij Nagłówek Treść HTTP Request HTTP Response HTTP/1.0 200 OK. Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/plain Content-Length: 1354 status=ok

23 Metoda GET GET /index.html?login=julius&password=zgadnij HTTP/1.1 Host: www.example.com User-Agent: Mozilla/4.0 HTTP Request

24 Witryny WWW Witryna to zbiór składający się z jednej lub kilku stron WWW powiązanych ze sobą w sposób, który odzwierciedla istotę zawartych w niej informacji i tworzy spójną całość Struktury witryn

25 Struktura hierarchiczna posiada wiele poziomów strona główna zawiera ogólny przegląd opisywanych treści oraz połączenia do stron, które znajdują się na niższych poziomach hierarchii

26 Struktura liniowa przejście od strony do strony odbywa się w sposób liniowy (krok po kroku)

27 Struktura liniowa z alternatywą posiada możliwość odejścia od głównej ścieżki dokumentów

28 Struktura mieszana (liniowo- hierarchiczna)

29 Struktura sieciowa brak ogólnej struktury dokumentów połączenia między stronami za pomocą hiperłączy

30 Języki znaczników Język znakowania to sposób kodowania dokumentów tekstowych przy pomocy znaczników.

31 Budowa dokumentu dokument opisany przy użyciu języka znakowania zawiera: właściwy tekst znaczniki, określające elementy dokumentu, jego strukturę, sposoby formatowania i hiperpołączenia do innych stron lub informacji innego rodzaju większość elementów (elementy blokowe) składa się z trzech części: znacznika otwierającego, zawartości i znacznika zamykającego

32 Budowa dokumentu zawartość np. znacznik otwierający może zawierać listę atrybutów formatujących atrybuty występują w parach postaci: nazwa=wartość, np. align=center, width=100px niektóre elementy (liniowe) nie wymagają znacznika zamykającego, np.

33 Właściwości języków znakowania opis dokumentu w pliku tekstowym przenoszalność i kompatybilność poprzez wykorzystanie jedynie znaków ASCII oddzielenie struktury dokumentu od jego wyglądu (podział dokument-widok) opis struktury strony a nie wyglądu konkretnych jej elementów - odwrotnie niż w edytorach graficznych typu WYSIWYG (ang. What You See Is What You Get) praca w środowisku wieloplatformowym (różne komputery, systemy operacyjne i przeglądarki) hierarchiczna struktura znaczników

34 Język SGML (Standard Generalized Markup Language) 1986 – stał się standardem według organizacji ISO nie ma określonego zbioru znaczników i reguł ich użytkowania jest nadrzędnym językiem służącym do definiowania dowolnych znaczników i ustalania zasad ich poprawnego użytkowania umożliwia definiowanie poszczególnych języków znacznikowych

35 Język HTML (HyperText Markup Language) HTML wywodzi się z języka SGML HTML jest językiem opisu strony a nie wyglądu poszczególnych jej elementów posiada zdefiniowany zbiór elementów i atrybutów, np. HEAD, BODY, TABLE, align, width

36 Historia języka HTML standardem HTML zajmuje się konsorcjum W3C (World Wide Web Consortium) 1989 – HTML 1.0 - opracowana przez Tima Berners-Lee zawiera kilkanaście znaczników wraz z odsyłaczami; Tima Berners-Lee

37 Historia języka HTML c.d. 1995 HTML 2.0 - podstawowy zestaw znaczników, obsługiwany przez wszystkie przeglądarki; 1996 HTML 3.2 - wprowadzono przede wszystkim obsługę: tabel, apletów oraz otaczanie obrazów tekstem. Można było określać kolor i grafikę tła. Pojawiły się formularze. Język ten był w pełni zgodny z wcześniejszym standardem HTML 2.0;

38 Historia języka HTML c.d. 1997 HTML 4.0 – wprowadzono dynamiczny HTML i arkusze stylów;

39 Struktura HTML w HTML-u zdefiniowane są trzy znaczniki, które opisują ogólną strukturę strony oraz dostarczają podstawowych informacji nagłówkowych: <!informacje nagłówkowe <!treść strony

40 Opis znaczników języka HTML Komentarz <!treść komentarza służy do zamieszczenia w kodzie źródłowym komentarza; jest ignorowany przez przeglądarkę SourceOutput This is a regular paragraph

41 Opis znaczników języka HTML - HEAD Tytuł dokumentu jest wyświetlany na pasku tytułowym okna przeglądarki Moja strona WWW Treść dokumentu

42 Opis znaczników języka HTML - HEAD definiuje związek pomiędzy dwoma dokumentami atrybuty: href – adres URL rel – relacja między dokumentami type – definiuje MIME type, np. text/css text/javascript image/gif

43 Opis znaczników języka HTML Nagłówki... atrybuty align umożliwiają podział strony na części mają 6 poziomów różniących się między sobą wielkością i atrybutami czcionki (pogrubienie, pod­ kreślenie, wielkie litery) HTML automatycznie dodaje pustą linię przed i po nagłówku

44 Nagłówki SourceOutput This is header 1 This is header 2 This is header 3 This is header 4 This is header 5 This is header 6 This is header 1 This is header 2 This is header 3 This is header 4 This is header 5 This is header 6

45 Opis znaczników języka HTML Akapit atrybuty: align umożliwia wyróżnienie fragmentu tekstu HTML automatycznie dodaje pustą linię przed i po akapicie SourceOutput This is some text in a very short paragraph This is some text in a very short paragraph

46 Opis znaczników języka HTML Podział wiersza umożliwia podział wiersza w dowolnym miejscu nie posiada znacznika końcowego (jest elementem liniowym) SourceOutput This text contains a line break

47 Opis znaczników języka HTML Linia pozioma atrybuty: align noshade size - wysokość width pozwala na podział strony przy pomocy linii SourceOutput This is some text This is some text

48 Opis znaczników języka HTML Grupowanie elementów atrybuty align umożliwia utworzenie obszaru składającego się z wielu elementów blokowych pozwala na formatowanie grupy elementów automatycznie umieszcza znaki końca linii przed i po bloku div SourceOutput This is some text This is a header in a div section This is a paragraph in a div section This is some text This is a header in a div section This is a paragraph in a div section

49 Opis znaczników języka HTML Grupowanie elementów liniowych umożliwia grupowanie elementów w celu ich sformatowania nie umieszcza znaków końca linii SourceOutput This is a paragraph This is a paragraph This is a paragraph This is another paragraph This is a paragraph This is a paragraph This is a paragraph This is another paragraph

50 Listy Lista wypunktowana (nieuporządkowana) atrybuty: type: disc, square, circle zawiera pozycje tworzone za pomocą elementu li element li w specyfikacji 3.2 był elementem liniowym od wersji 4.01 li jest elementem blokowym atrybut type: disc, square, circle SourceOutput Coffee Tea Coffee Tea

51 Listy Lista numerowana (uporządkowana) atrybuty type: A, a, I, i, 1 start SourceOutput Coffee Tea 1.Coffee 2.Tea

52 Listy Lista definicji składają się z trzech części: listy definicji (dl), terminu definiowanego (dt) oraz opisu definicji (dd) SourceOutput Coffee Black hot drink Milk White cold drink Coffee Black hot drink Milk White cold drink

53 Opis znaczników języka HTML Hiperłącze tworzy łącze do innego dokumentu lub miejsca w dokumencie atrybuty: href URL – docelowy adres URL target – gdzie otworzyć docelową stronę _blank – w nowym oknie _self – w tej samej ramce _parent – w ramce nadrzędnej _top – w oknie głównym

54 Opis znaczników języka HTML Tabela atrybuty: align bgcolor border cellpadding cellspacing width, height definiuje tabele wewnątrz tabeli można zdefiniować nagłówek, wiersz, komórkę oraz inną tabelę SourceOutput Cell A Cell B Cell ACell B

55 Opis znaczników języka HTML Wiersz tabeli atrybuty: align, valign bgcolor

56 SourceOutput Header 1 Header 2 Cell A Cell B Opis znaczników języka HTML Nagłówek tabeli atrybuty: align, valign bgcolor colspan rowspan width, height nowrap Header 1Header 2 Cell ACell B

57 Opis znaczników języka HTML Komórka tabeli

58 Opis znaczników języka HTML Zbiór ramek dzieli okno na ramki, z których każda zawiera odrębny dokument dokument nie może zawierać elementu atrybuty: cols: pixels, %, * rows: pixels, %, *

59 Opis znaczników języka HTML Ramka atrybuty: frameborder: 0, 1 name src – adres URL noresize – bez możliwości zmiany wymiarów scrolling – czy ramka jest skrolowana

60 Opis znaczników języka HTML Ramka wewnętrzna (inline) atrybuty align frameborder width, height name scrolling src

61 Opis znaczników języka HTML Obrazek atrybuty src – adres URL alt – opis obrazka align width, height SourceOutput

62 AttributeValueDescription DTD alinkrgb(x,x,x) #xxxxxx colorname Specifies the color of the active links in the document. Deprecated. Use styles instead. TF backgroundfile_nameAn image to use as the background. Deprecated. Use styles instead.TF bgcolorrgb(x,x,x) #xxxxxx colorname The background color of the document. Deprecated. Use styles instead.TF linkrgb(x,x,x) #xxxxxx colorname Specifies the color of all the links in the document. Deprecated. Use styles instead. TF textrgb(x,x,x) #xxxxxx colorname Specifies the color of the text in the document. Deprecated. Use styles instead.TF vlinkrgb(x,x,x) #xxxxxx colorname Specifies the color of the visited links in the document. Deprecated. Use styles instead. TF

63 Tło Ustawianie koloru tła – atrybut Bgcolor Możliwe wartości: liczba hexadecymalna wartość RGB nazwa koloru

64 Tło

65 Tło Ustawianie tapety – atrybut Background Możliwe wartości: adres URL

66 Tło

67 SourceOutput This text is in a fixed-pitch font, and it preserves both spaces and line breaks This text is in a fixed-pitch font, and it preserves both spaces and line breaks AttributeValueDescriptionDT D widthnumberDefines the maximum number of characters per line (usually 40, 80, or 132) definiuje blok tekstu nieformatowanego

68 Metadane Element Meta zawiera informacje o danej stronie atrybuty: name – nazwa metainformacji content – wartość skojarzona z nazwą lub http- equiv http-equiv – nazwa nagłówka HTTP scheme – format zawartości

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 definiują w jaki sposób wyświetlać (formatować) elementy HTML Style są przechowywane w tzw. arkuszach styli (CSS files) Style są uporządkowane kaskadowo Style zostały dodane do wersji HTML 4.0

74 Definicje styli Style mogą być zdefiniowane w: pojedynczym elemencie HTML nagłówku HTML pliku zewnętrznym CSS

75 Definiowanie stylu w pojedynczym elemencie HTML

76 Definiowanie stylu w nagłówku HTML element { nazwa1: wartosc1; nazwa2: wartosc2; nazwaN: wartoscN; }...

77 Definiowanie stylu w pliku zewnętrznym Plik CSS to plik tekstowy z rozszerzeniem CSS Treść pliku CSS: element { nazwa1: wartosc1; nazwa2: wartosc2; nazwaN: wartoscN; }...

78 Dołączenie pliku CSS do dokumentu HTML

79 Hierarchia styli 1. Domyślny styl przegladarki 2. Zewnętrzny arkusz CSS (plik CSS) 3. Wewnętrzny arkusz CSS (nagłówek HTML) 4. Styl inline (pojedynczy element HTML)

80 Składnia CSS selector {property: value}body {color: black} p {font-family: "sans serif"}p {text-align:center;color:red}

81 Grupowanie h1,h2,h3,h4,h5,h6 { color: green } selector1, selector1, selectorN {property: value}

82 Klasy Umożliwiają definiowanie różnych styli dla elementów tego samego typu p.right {text-align: right} p.center {text-align: center} selector1.class {property: value}

83 Użycie klas This paragraph will be right- aligned. This paragraph will be center- aligned.

84 Przypisanie wielu klas do elementu HTML This is a paragraph.

85 Definiowanie klas dla różnych elementów HTML.center {text-align: center}.class {property: value}

86 Użycie This heading will be center- aligned This paragraph will also be center- aligned.

87 Definiowanie stylu dla elementów o określonym atrybucie input[type="text"] {background-color: blue}selector[attribute=value] {property: value}

88 Definiowanie stylu dla elementu o określonym id #green {color: green} p#para1 { text-align: center; color: red }

89 CSS Background WłaściwośćOpisWartości IEFNW3C background A shorthand property for setting all background properties in one declaration background-color background-image background-repeat background- attachment background-position 4161 background- attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll fixed 4161 background-color Sets the background color of an element color-rgb color-hex color-name transparent 4141 background-image Sets an image as the backgroundurl(URL) none 4141 background- position Sets the starting position of a background image top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos 4161 background- repeat Sets if/how a background image will be repeated repeat repeat-x repeat-y no-repeat 4141

90 Ustawianie tła body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} This is header 1 This is header 2 This is a paragraph

91 Ustawianie obrazka jako tło body { background-image: url('bgdesert.jpg') }

92 Wielokrotne powtórzenie obrazka body { background-image: url('bgdesert.jpg'); background-repeat: repeat }

93 CSS Text PropertyDescriptionValuesIEFNW3C colorSets the color of a textcolor3141 directionSets the text directionltr rtl 6162 line-heightSets the distance between linesnormal number length % 4141 letter-spacingIncrease or decrease the space between charactersnormal length 4161 text-alignAligns the text in an elementleft right center justify 4141 text-decorationAdds decoration to textnone underline overline line-through blink 4141 text-indentIndents the first line of text in an elementlength % 4141 text-shadownone color length text-transformControls the letters in an elementnone capitalize uppercase lowercase 4141 unicode-bidinormal embed bidi-override 52 white-spaceSets how white space inside an element is handlednormal pre nowrap 5141 word-spacingIncrease or decrease the space between wordsnormal length 6161

94 Kolor tekstu h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} This is header 1 This is header 2 This is a paragraph

95 Kolor tła tekstu span.highlight { background-color:yellow } 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. This is a text. This is a text.

96 Ustawianie odstępu między znakami h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} This is header 1 This is header 4

97 Wyrównanie tekstu h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} This is header 1 This is header 2 This is header 3

98 CSS Font fon t A shorthand property for setting all of the properties for a font in one declarationfont-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar 4141font- family A prioritized list of font family names and/or generic family names for an elementfamily-name generic-family 3141font-sizeSets the size of a fontxx-small x-small small medium large x-large xx-large smaller larger length % 3141font-styleSets the style of the fontnormal italic oblique 4141

99 CSS Font font-weightSets the weight of a fontnormal bold bolder lighter 100 200 300 400 500 600 700 800 900 4141

100 Ustawianie czcionki tekstu h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans- serif} This is header 3 This is a paragraph

101 Ustawianie wielkości czcionki h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} This is header 1 This is header 2 This is a paragraph

102 CSS Border borderA shorthand property for setting all of the properties for the four borders in one declaration border-width border-style border-color 4141 border-bottomA shorthand property for setting all of the properties for the bottom border in one declaration border-bottom- width border-style border-color 4161 border-bottom- color Sets the color of the bottom borderborder-color4162 border-bottom- style Sets the style of the bottom borderborder-style4162 border-bottom- width Sets the width of the bottom borderthin medium thick length 4141 border-colorSets the color of the four borders, can have from one to four colorscolor4161 border-leftA shorthand property for setting all of the properties for the left border in one declaration border-left-width border-style border-color 4161 border-left-colorSets the color of the left borderborder-color4162 border-left-styleSets the style of the left borderborder-style4162 border-left-widthSets the width of the left borderthin medium thick length 4141 border-rightA shorthand property for setting all of the properties for the right border in one declaration border-right- width border-style border-color 4161 border-right-colorSets the color of the right borderborder-color4162 border-right-styleSets the style of the right borderborder-style4162

103 CSS Border border-right- width Sets the width of the right borderthin medium thick length 4141 border-styleSets the style of the four borders, can have from one to four stylesnone hidden dotted dashed solid double groove ridge inset outset 4161 border-topA shorthand property for setting all of the properties for the top border in one declarationborder-top- width border-style border-color 4161 border-top- color Sets the color of the top borderborder-color4162 border-top- style Sets the style of the top borderborder-style4162 border-top- width Sets the width of the top borderthin medium thick length 4141 border-widthA shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin medium thick length 4141

104 Ustawianie obramowania p { border: medium double rgb(250,0,255) } Some text

105 Obramowanie z każdej strony różne 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} Some text

106 CSS Margin margi n A shorthand property for setting the margin properties in one declarationmargin-top margin-right margin-bottom margin-left 4141 margin-bottomSets the bottom margin of an elementauto length % 4141 margin-leftSets the left margin of an elementauto length % 3141 margin-rightSets the right margin of an elementauto length % 3141 margin- top Sets the top margin of an elementauto length % 3141

107 Ustawianie marginesów p.margin {margin: 2cm 4cm 3cm 4cm} This is a paragraph with no specified margins This is a paragraph with specified margins This is a paragraph with no specified margins

108 CSS List PropertyDescriptionValuesIEFNW3C list-styleA shorthand property for setting all of the properties for a list in one declaration list-style-type list-style-position list-style-image 4161 list-style-imageSets an image as the list-item markernone url 4161 list-style-positionSets where the list-item marker is placed in the listinside outside 4161 list-style-typeSets the type of the list-item markernone disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha 4141 marker-offsetauto length 172

109 Listy nieuporządkowane ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} Coffee Tea Coca Cola Coffee Tea Coca Cola

110 Listy uporządkowane 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} Coffee Tea Coca Cola Coffee Tea Coca Cola

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 PropertyDescriptionValuesIEFNW3C heightSets the height of an elementauto length % 4161 line-heightSets the distance between linesnormal number length % 4141 max-heightSets the maximum height of an element none length % -162 max-widthSets the maximum width of an element none length % -162 min-heightSets the minimum height of an element length % -162 min-widthSets the minimum width of an element length % -162 widthSets the width of an elementauto % length 4141

113 Ustawianie wysokości obrazka img.normal {height: auto} img.big {height: 160px} img.small {height: 30px}

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

115 CSS Classification PropertyDescriptionValuesIEFNW3C clearSets the sides of an element where other floating elements are not allowed left right both none 4141 cursorSpecifies the type of cursor to be displayedurl auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 4162

116 CSS Classification displaySets how/if an element is displayednone inline block list-item run-in compact marker table inline-table table-row-group table-header- group table-footer-group table-row table-column- group table-column table-cell table-caption 4141 floatSets where an image or a text will appear in another element left right none 4141

117 CSS Classification positionPlaces an element in a static, relative, absolute or fixed position static relative absolute fixed 4142 visibilitySets if an element should be visible or invisiblevisible hidden collapse 4162

118 Użycie właściwości float span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } T his is some text. This is some text. This is some text. This is some text.

119 CSS Positioning The CSS positioning properties allows you to position an element.

120 CSS Positioning PropertyDescriptionValuesIEFNW3 C bottomSets how far the bottom edge of an element is above/below the bottom edge of the parent element auto % length 5162 clipSets the shape of an element. The element is clipped into this shape, and displayed shape auto 4162 leftSets how far the left edge of an element is to the right/left of the left edge of the parent element auto % length 4142

121 CSS Positioning overf low Sets what happens if the content of an element overflow its areavisibl e hidde n scroll auto 4162 positio n Places an element in a static, relative, absolute or fixed positionstatic relati ve absol ute fixed 4142 rightSets how far the right edge of an element is to the left/right of the right edge of the parent element auto % lengt h 5162 topSets how far the top edge of an element is above/below the top edge of the parent element auto % lengt h 4142

122 CSS Positioning vertical-alignSets the vertical alignment of an elementbaseline sub super top text-top middle bottom text-bottom length % 4141 z-indexSets the stack order of an elementauto number 4162

123 Użycie właściwości z-index img.x { position:absolute; left:0px; top:0px; z-index:-1 } This is a Heading Default z-index is 0. Z-index -1 has lower priority.

124 Użycie właściwości z-index

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

126 CSS Pseudo-classes selector:pseudo-class {property: value} selector.class:pseudo-class {property: value}

127 CSS Pseudo-classes Pseudo-classPurposeIEFNW3 C :activeAdds special style to an activated element4181 :focusAdds special style to an element while the element has focus -1. 5 82 :hoverAdds special style to an element when you mouse over it 4171 :linkAdds special style to an unvisited link3141 :visitedAdds special style to a visited link3141 :first-childAdds special style to an element that is the first child of some other element 7172 :langAllows the author to specify a language to use in a specified element -182

128 Anchor Pseudo-classes a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */

129 Pseudo-classes and CSS Classes a.red:visited {color: #FF0000} CSS Syntax

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

131 CSS Pseudo-elements selector:pseudo-element {property: value} selector.class:pseudo-element {property: value}

132 CSS Pseudo-elements Pseudo-elementPurposeIEFNW3C :first-letterAdds special style to the first letter of a text5181 :first-lineAdds special style to the first line of a text5181 :beforeInserts some content before an element1.582 :afterInserts some content after an element1.582

133 Multiple Pseudo-elements p:first-letter {color:#ff0000;font-size:xx-large} p:first-line {color:#0000ff} The first words of an article...

134 XML

135 Co to jest XML? XML to EXtensible Markup Language XML to język znacznikówpodobnie jak HTML XML służy do opisu danych XML nie posiada zdefiniowanego zbioru znaczników

136 Różnice między XML i HTML XMLHTML opis danychwyświetlanie danych znaczenie danychwygląd danych brak zdefiniowanych znaczników zdefiniowany zbiór znaczników

137 Zastosowania XML oddzielenie danych od HTML (dokument-widok) wymiana danych (uniwersalny format) współdzielenie danych gromadzenie i przechowywanie danych

138 Składnia XML dokument XML musi mieć element główny (root) elementy XML muszą mieć znacznik zamykający XML jest czuły na wielkość liter elementy XML muszą być prawidłowo zagnieżdżone wartości atrybutów XML muszą być wzięte w cudzysłów

139 Składnia XML.........

140 Przestrzenie nazw (namespaces) zapewniają unikalność nazw elementów XML deklaruje się je jako atrybut otwarcia bloku i obowiązują wewnątrz całego bloku składnia: xmlns:namespace-prefix="namespaceURI"

141 Przestrzenie nazw Apples Bananas

142 Środowisko XML XML XSL CSS DTD XML Schema XSLT XSL-FO X-Path

143 XML i CSS

144 XML i CSS Empire Burlesque Bob Dylan USA Columbia 1985

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 składa się z trzech części: XSLT – język transformacji dokumentów XML X-Path – język nawigacji w dokumentach XML XSL-FO – język do formatowania dokumentów XML

147 Co to jest XSLT? XSLT to XSL Transformations XSLT jest najważniejszą częścią 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

149 Deklaracja pliku XSLT <!- Instrukcje -

150 Dołączenie pliku XSL do dokumentu XML Belgian Waffles $5.95 two of our famous Belgian Waffles 650

151 służy do budowania wzorców atrybut match służy do powiązania wzorca z elementem XML

152 My CD Collection

153 służy do pobrania wartości elementu XML

154 My CD Collection Title Artist

155 służy do wybierania zbioru elementów XML (pętla)

156

157

158 ......some output if the expression is true......

159

160 ... some output...... some output....

161

162 My CD Collection

163