Programowanie w HTML i XML prowadzący: dr inż. Tomasz Wierciński
Plan wykładów Język XML Język XSL Język JavaScript Co to jest WWW? Architektura środowiska WWW (klient-serwer) Przeglądarki WWW Serwery WWW Uniform Resource Locators – URL Protokół HTTP Witryny WWW Języki znaczników Właściwości języków znakowania Budowa języków znakowania Język HTML Wersje języka HTML Struktura dokumentu HTML Opis znaczników HTML Kodowanie znaków Dynamiczny HTML Arkusze styl Zdarzenia The Document Object Model (DOM) Język XML Język XSL Język JavaScript
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
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
WWW jest systemem graficznym integruje ze sobą tekst z grafiką, dźwiękiem i sekwencjami wideo oraz wbudowane aplikacje
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
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
WWW jest siecią dynamiczną dane zmodyfikowane na stronach www są automatycznie widoczne przez wszystkich użytkowników
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
Architektura statycznego środowiska WWW WWW to środowisko klient-serwer
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)
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 Obecnie najpopularniejszymi przeglądarkami w sieci WWW są Microsoft Internet Explorer, Mozilla Firefox, Opera
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)
Architektura dynamicznego środowiska WWW Architektura trójwarstwowa WWW Server Application Server DB Server
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.
Serwer bazy danych 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.
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
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
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:
Protokół HTTP Initial request line Initial Response Line (Status 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
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
Metoda POST Nagłówek Treść HTTP Request HTTP Response 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 Response HTTP/1.0 200 OK. Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/plain Content-Length: 1354 status=ok
Metoda GET HTTP Request GET /index.html?login=julius&password=zgadnij HTTP/1.1 Host: www.example.com User-Agent: Mozilla/4.0
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
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
Struktura liniowa przejście od strony do strony odbywa się w sposób liniowy (krok po kroku)
Struktura liniowa z alternatywą posiada możliwość odejścia od głównej ścieżki dokumentów
Struktura mieszana (liniowo-hierarchiczna)
Struktura sieciowa brak ogólnej struktury dokumentów połączenia między stronami za pomocą hiperłączy
Języki znaczników Język znakowania to sposób kodowania dokumentów tekstowych przy pomocy znaczników.
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
Budowa dokumentu <znacznik_otwierający lista_atrybutów> zawartość </znacznik_zamykający> np. <div width=”100%”></div> 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. <BR>
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
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
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
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;
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;
Historia języka HTML c.d. 1997 HTML 4.0 – wprowadzono dynamiczny HTML i arkusze stylów;
Struktura HTML w HTML-u zdefiniowane są trzy znaczniki, które opisują ogólną strukturę strony oraz dostarczają podstawowych informacji nagłówkowych: <HTML> <HEAD> <!—informacje nagłówkowe </HEAD> <BODY> <!—treść strony </BODY> </HTML>
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ę Source Output <!--This text is a comment--> <p>This is a regular paragraph</p> This is a regular paragraph
Opis znaczników języka HTML - HEAD Tytuł dokumentu <title></title> jest wyświetlany na pasku tytułowym okna przeglądarki <html> <head> <title>Moja strona WWW</title> </head> <body> Treść dokumentu </body> </html>
Opis znaczników języka HTML - HEAD <link> 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 <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
Opis znaczników języka HTML Nagłówki <h1></h1> ... <h6></h6> 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, podkreślenie, wielkie litery) HTML automatycznie dodaje pustą linię przed i po nagłówku
Nagłówki This is header 1 This is header 2 This is header 3 Source Output <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6> This is header 1 This is header 2 This is header 3 This is header 4 This is header 5 This is header 6
Opis znaczników języka HTML Akapit <p></p> atrybuty: align umożliwia wyróżnienie fragmentu tekstu HTML automatycznie dodaje pustą linię przed i po akapicie Source Output This is <p>some text in a very short paragraph</p> This is some text in a very short paragraph
Opis znaczników języka HTML Podział wiersza <br> umożliwia podział wiersza w dowolnym miejscu nie posiada znacznika końcowego (jest elementem liniowym) Source Output This text contains<br />a line break This text contains a line break
Opis znaczników języka HTML Linia pozioma <hr> atrybuty: align noshade size - wysokość width pozwala na podział strony przy pomocy linii Source Output This is some text <hr /> This is some text This is some text
Opis znaczników języka HTML Grupowanie elementów <div> 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 Source Output This is some text <div style="color:#FF0000;"> <h4>This is a header in a div section</h4> <p>This is a paragraph in a div section</p> </div> This is some text This is a header in a div section This is a paragraph in a div section
Opis znaczników języka HTML Grupowanie elementów liniowych <span> umożliwia grupowanie elementów w celu ich sformatowania nie umieszcza znaków końca linii Source Output <p>This is a paragraph <span style="color:#0000FF;">This is a paragraph</span> This is a paragraph</p> <p> <span style="color:#00DD45;"> This is another paragraph </span> </p> This is a paragraph This is a paragraph This is a paragraph This is another paragraph
Listy Lista wypunktowana (nieuporządkowana) <ul> 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 Source Output <ul> <li>Coffee</li> <li>Tea</li> </ul> Coffee Tea
Listy Lista numerowana (uporządkowana) <ol> atrybuty type: A, a, I, i, 1 start Source Output <ol> <li>Coffee</li> <li>Tea</li> </ol> Coffee Tea
Listy Lista definicji <dl> składają się z trzech części: listy definicji (dl), terminu definiowanego (dt) oraz opisu definicji (dd) Source Output <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Coffee Black hot drink Milk White cold drink
Opis znaczników języka HTML Hiperłącze <a> 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
Opis znaczników języka HTML Tabela <table> atrybuty: align bgcolor border cellpadding cellspacing width, height definiuje tabele wewnątrz tabeli można zdefiniować nagłówek, wiersz, komórkę oraz inną tabelę Source Output <table border = "1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> Cell A Cell B
Opis znaczników języka HTML Wiersz tabeli <tr> atrybuty: align, valign bgcolor
Opis znaczników języka HTML Nagłówek tabeli <th> atrybuty: align, valign bgcolor colspan rowspan width, height nowrap Source Output <table border = "1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> Header 1 Header 2 Cell A Cell B
Opis znaczników języka HTML Komórka tabeli <td>
Opis znaczników języka HTML Zbiór ramek <frameset> dzieli okno na ramki, z których każda zawiera odrębny dokument dokument nie może zawierać elementu <body> atrybuty: cols: pixels, %, * rows: pixels, %, * <html> <frameset cols = "25%, 25%,*"> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /> </frameset> </html>
Opis znaczników języka HTML Ramka <frame> atrybuty: frameborder: 0, 1 name src – adres URL noresize – bez możliwości zmiany wymiarów scrolling – czy ramka jest skrolowana
Opis znaczników języka HTML Ramka wewnętrzna (inline) <iframe> atrybuty align frameborder width, height name scrolling src <html> <body> <iframe src ="/default.asp" width="100%"></iframe> </body> </html>
Opis znaczników języka HTML Obrazek <img> atrybuty src – adres URL alt – opis obrazka align width, height Source Output <img src="angry.gif" alt="Angry" />
<body> Attribute Value Description alink DTD alink rgb(x,x,x) #xxxxxx colorname Specifies the color of the active links in the document. Deprecated. Use styles instead. TF background file_name An image to use as the background. Deprecated. Use styles instead. bgcolor The background color of the document. Deprecated. Use styles instead. link Specifies the color of all the links in the document. Deprecated. Use styles instead. text Specifies the color of the text in the document. Deprecated. Use styles instead. vlink Specifies the color of the visited links in the document. Deprecated. Use styles instead.
Tło Ustawianie koloru tła – atrybut Bgcolor Możliwe wartości: liczba hexadecymalna wartość RGB nazwa koloru
Tło <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
Tło Ustawianie tapety – atrybut Background Możliwe wartości: adres URL
Tło <body background="clouds.gif">
<pre> definiuje blok tekstu nieformatowanego This text is Attribute Value Description DTD width number Defines the maximum number of characters per line (usually 40, 80, or 132) Source Output <pre> This text is in a fixed-pitch font, and it preserves both spaces and line breaks </pre> This text is in a fixed-pitch font, and it preserves both spaces and line breaks
Metadane Element Meta <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
name: Metadane author description keywords <meta name=”author” content="Tomasz Wierciński" /> <meta name="description" content="Programowanie stron WWW" /> <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />
http-equiv Metadane content-type expires refresh set-cookie <meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-2"/> <meta http-equiv="expire" content="Mon, 23 Mar 2006 20:00:00 EST" /> <meta http-equiv="refresh" content="10, http://www.mojafirma.com/home.html" /> <meta http-equiv="Set-Cookie" content="feedme=1;expires=Wednesday, 08-Aug-00 23:59:59 GMT; path=/">
Kodowanie znaków International Organization for Standardization - ISO-8859-2 (ISO Latin 2) Microsoft - WIN-1250 <meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-2"/> <meta http-equiv="Content-Type" content="text/html: charset=WIN-1250"/>
CSS
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
Definicje styli Style mogą być zdefiniowane w: pojedynczym elemencie HTML nagłówku HTML pliku zewnętrznym CSS
Definiowanie stylu w pojedynczym elemencie HTML <element style=”nazwa1: wartosc1; nazwa2: wartosc2; nazwaN: wartoscN;”>
Definiowanie stylu w nagłówku HTML <head> <style> element { nazwa1: wartosc1; nazwa2: wartosc2; nazwaN: wartoscN; } ... </style> </head>
Definiowanie stylu w pliku zewnętrznym Plik CSS to plik tekstowy z rozszerzeniem CSS Treść pliku CSS: element { nazwa1: wartosc1; nazwa2: wartosc2; nazwaN: wartoscN; } ...
Dołączenie pliku CSS do dokumentu HTML <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
Hierarchia styli Domyślny styl przegladarki Zewnętrzny arkusz CSS (plik CSS) Wewnętrzny arkusz CSS (nagłówek HTML) Styl „inline” (pojedynczy element HTML)
Składnia CSS selector {property: value} body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red}
Grupowanie selector1, selector1, selectorN {property: value} h1,h2,h3,h4,h5,h6 { color: green }
Klasy Umożliwiają definiowanie różnych styli dla elementów tego samego typu selector1.class {property: value} p.right {text-align: right} p.center {text-align: center}
Użycie klas <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
Przypisanie wielu klas do elementu HTML <p class="center bold"> This is a paragraph. </p>
Definiowanie klas dla różnych elementów HTML .class {property: value} .center {text-align: center}
Użycie <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
Definiowanie stylu dla elementów o określonym atrybucie selector[attribute=value] {property: value} input[type="text"] {background-color: blue}
Definiowanie stylu dla elementu o określonym id p#para1 { text-align: center; color: red } #green {color: green}