Program wykładów. Aplikacje internetowe. Podstawy usługi WWW. Architektury aplikacji intrai internetowych. dr inż. Marek Wojciechowski
|
|
- Gabriela Dziedzic
- 8 lat temu
- Przeglądów:
Transkrypt
1 Program wykładów 2 Aplikacje internetowe dr inż. Marek Wojciechowski Kontakt: marek@cs.put.poznan.pl Architektury aplikacji intra- i internetowych WWW, HTTP, HTTPS, WAP, cookies Technologie prezentacji danych w sieci Internet HTML, CSS, XML, XSL, VRML, WML, JavaScript Technologie skryptowe do tworzenia aplikacji internetowych Interfejs CGI, Perl, SSI, ASP, PHP Tworzenie aplikacji internetowych w języku Java Platforma Java EE (Enterprise Edition) Serwlety Java JavaServer Pages (JSP), biblioteki znaczników, biblioteka JSTL JDBC - dostęp aplikacji Java do baz danych Enterprise JavaBeans (EJB) Odwzorowanie obiektowo-relacyjne (O/RM), Hibernate Przegląd innych technologii do tworzenia aplikacji internetowych CORBA, Web Services, Microsoft.NET Zagrożenia bezpieczeństwa aplikacji internetowych Podstawy usługi WWW 4 Architektury aplikacji intrai internetowych użytkownik przeglądarka żądanie HTTP HTML w HTTP serwer WWW HTML HTML program zewnętrzny system plików Użytkownik korzysta z programu przeglądarki (klienta HTTP) aby przyłączyć się do serwera WWW (serwera HTTP), podając URL opisujący żądany dokument HTML. Serwer WWW pobiera dokument i przesyła do użytkownika. Serwer WWW może też uruchomić zewnętrzny program, który wygeneruje dokument HTML dla użytkownika.
2 Protokół HTTP 5 Komunikacja poprzez HTTP 6 HTTP: Hypertext Transfer Protocol Protokół poziomu aplikacji dla rozproszonych systemów hipermedialnych Podstawa dla World Wide Web i aplikacji internetowych Komunikacja HTTP zazwyczaj na TCP/IP (domyślny port 80) Protokół bezstanowy Śledzenie sesji użytkownika i pamiętanie stanu przerzucone na aplikację Aktualna wersja: HTTP/1.1 Specyfikacja protokołu obejmuje m.in.: Metody Nagłówki Kody statusu Protokół HTTP specyfikuje komunikację w trybie żądanie/odpowiedź (request/response) Zawartość żądania klienta: Metoda żądania (np. GET, POST) Identyfikator żądanego zasobu (URI) Wersja protokołu HTTP Wiadomość MIME zawierająca: Modyfikatory żądania Informacje o kliencie Opcjonalnie: zawartość (body content) Zawartość odpowiedzi serwera: Linia statusu (wersja protokołu + kod sukcesu/błędu) Wiadomość MIME zawierająca: Informacje o serwerze Metadane na temat przesyłanej zawartości Opcjonalnie: zawartość (entity body-content) Protokół HTTP Schemat komunikacji 7 Łańcuch żądań HTTP (1/2) 8 Przeglądarka Nawiązanie połączenia TCP/IP Połączenie otwarte Serwer WWW W większości przypadków komunikacja HTTP jest inicjowana przez przeglądarkę i obejmuje żądanie odnoszące się do zasobu na jakimś serwerze źródłowym Żądanie: GET /index.html HTTP/1.0 HTTP/ OK Date: Wed, 13 Feb :18:59 GMT Server: Apache/1.0.0 Nagłówek HTTP: Content-type: text/html Content-length: 1579 Last-modified: Mon, 12 Feb :23:34 GMT User agent HTTP request HTTP response HTTP server Zawartość dokumentu HTML Zamknięcie połączenia TCP/IP
3 Łańcuch żądań HTTP (2/2) 9 Metody HTTP 10 W łańcuchu żądań/odpowiedzi mogą pojawić się węzły pośrednie Proxy: agent przekazujący dalej otrzymane żądanie, dokonujący modyfikacji wiadomości związanej z żądaniem User agent HTTP request HTTP response proxy HTTP request HTTP response Gateway: agent odbierający żądania, stanowiący warstwę ponad serwerem źródłowym, mogący tłumaczyć żądania na protokół rozumiany przez dany serwer User agent HTTP request HTTP response gateway request response Tunnel: nie modyfikuje przekazywanych wiadomości, używany np. w celu przejścia przez firewall HTTP server HTTP server OPTIONS zapytanie o opcje komunikacji związane z danym zasobem GET pobranie informacji (zasobu), potencjalnie możliwe cache owanie żądania HEAD jak GET, ale bez pobrania ciała wiadomości POST żądanie aby wskazany zasób przejął przekazane dane, domyślnie nie może być cache owane, traktowane jako przesyłanie danych na serwer (podlega stosownym regułom bezpieczeństwa) PUT żądanie umieszczenia danych pod wskazanym URI DELETE żądanie usunięcia zasobu wskazanego przez URI TRACE umożliwia śledzenie łańcucha żądań przez klienta CONNECT zarezerwowane na potrzeby tunelowania przez proxy User agent HTTP request HTTP response tunnel HTTP server Kody statusu HTTP (1/2) 3-cyfrowe liczby reprezentujące efekt próby zrozumienia i realizacji żądania przez serwer Podzielone na 5 kategorii wyznaczanych przez pierwszą cyfrę kodu: 1xx: Informational żądanie otrzymane, przetwarzanie w toku 2xx: Success akcja zrozumiana i pomyślnie wykonana 3xx: Redirection dalsze działanie wymagane do realizacji żądania 4xx: Client Error błąd w żądaniu klienta 5xx: Server Error błąd po stronie serwera, a serwer nie znalazł błędu w żądaniu klienta 11 Kody statusu HTTP (2/2) Continue Switching Protocols OK Created Accepted Non-Authoritative Information No Content Reset Content Partial Content Multiple Choices Moved Permanently Found See Other Not Modified Use Proxy Temporary Redirect Internal Server Error Not Implemented Bad Gateway Service Unavailable Gateway Time-out HTTP Version not supported Bad Request Unauthorized Payment Required Forbidden Not Found Method Not Allowed Not Acceptable Proxy Authentication Required Request Time-out Conflict Gone Length Required Precondition Failed Request Entity Too Large Request-URI Too Large Unsupported Media Type Requested range not satisfiable Expectation Failed 12
4 Nagłówki HTTP 13 Przesyłanie różnych typów danych poprzez HTTP 14 Ogólne, np. Date, Via Nagłówki żądania, np. Accept, Accept-Charset, Accept-Encoding, Accept-Language, Referer, User-Agent Nagłówki odpowiedzi, np. Location, WWW-Authenticate Nagłówki zawartości, np. Content-Type, Content-Length, Content-Language, Expires, Last-Modified Protokół HTTP może być wykorzystany do przesyłania dokumentów HTML, jak i danych innych typów, np. obrazów GIF, dokumentów XML, plików wideo AVI, itp. W nagłówku HTTP znajduje się pole Content-type, informujące przeglądarkę o formacie przesyłanego obiektu (opis zgodnie ze specyfikacją MIME) Content-type text/html application/postscript application/zip audio/x-wav Format Dokument HTML Plik PostScript Skompresowany plik ZIP Plik dźwiękowy WAV image/gif image/jpeg Obraz graficzny GIF Obraz graficzny JPEG text/plain Plik tekstowy video/x-msvideo Plik wideo AVI Identyfikatory zasobów URI 15 Adresy URL 16 Uniform Resource Identifier (URI) odpowiedni sformatowany łańcuch znaków identyfikujący zasób: Uniform: jednolity format dla różnych typów zasobów, ten sam format identyfikatorów używany w różnych kontekstach Resource: zasobem może być wszystko co posiada tożsamość np. dokument, usługa Identifier: referencja do czegoś posiadającego tożsamość URI identyfikuje zasób poprzez jego nazwę, lokalizację lub nazwę i lokalizację Uniform Resource Locator (URL) Uniform Resource Name (URN) Najpopularniejsze URI mają postać URL Uniform Resource Locator (URL) jest wskaźnikiem do zasobu w sieci Internet, odwołującym się do jego lokalizacji, np.: URL można rozbić na następujące części: <protocol>://<user>:<password>@<host>:<port>/<path> <protocol> - wykorzystywany protokół (np. HTTP, HTTPS, itd.) <user> - opcjonalna nazwa użytkownika (np. dla FTP) <password> - opcjonalne hasło dla użytkownika <host> - nazwa domenowa lub adres IP serwera <port> - numer portu IP (jeśli nie zostanie podany, przyjęta będzie watość domyślna dla protokołu) <path> - katalog/nazwa pliku
5 Katalogi logiczne a katalogi fizyczne 17 Katalogi logiczne a katalogi fizyczne Przykład 18 Ścieżki dostępu umieszczane w adresach URL nazywane są katalogami logicznymi (wirtualnymi); ich nazewnictwo nie musi być powiązane z nazewnictwem stosowanym w systemie plików serwera WWW W celu znalezienia żądanego pliku, serwer WWW odwzorowuje otrzymany katalog logiczny w faktyczną ścieżkę dostępu w systemie plików (katalog fizyczny) Odwzorowanie katalogów odbywa się w oparciu o pliki konfiguracyjne serwera WWW przeglądarka /home/htdocs/cameras/canond30.html serwer Alias /products/ "/home/htdocs/"... Zmienne Cookies (Ciasteczka) 19 Własności zmiennych Cookies 20 Serwer WWW może w nagłówku HTTP odpowiedzi umieścić dane znakowe (zmienne cookies), które przeglądarka zapisze w swojej pamięci (i ewentualnie na dysku) Zapis na dysku w pliku tekstowym, nazwa pliku nie jest wysyłana! Przy ponownych odwołaniach przeglądarki do tego samego serwera WWW, w nagłówkach HTTP żądań będą każdorazowo odsyłane zapisane wcześniej zmienne cookies Przeglądarka zapis zmiennej na dysku... Set-Cookie: LASTNAME=Kowalski;path=/hr; Serwer WWW expires=wednesday, 15-Feb-02 23:12:40 GMT Cookie: LASTNAME=Kowalski GET /hr/showpr HTTP/1.0 Nazwa i wartość (Name & Value) nazwa i wartość zmiennej cookie; są to jedyne obowiązkowe elementy Serwer może ustawić null jako wartość cookie, aby skasować dotychczasową wartość (np. par=) Data ważności (Expires) zmienne cookies mogą być automatycznie usuwane przez przeglądarkę po upływie określonego czasu Domyślnie do końca sesji z przeglądarką Domena (Domain) przeglądarka umieszcza w nagłówku żądania HTTP tylko te zmienne cookies, których adres domenowy pokrywa się z końcówką adresu domenowego w URL żądania Domyślnie domena dokumentu, który utworzył cookie Aby ustawić daną domenę dla cookie, serwer musi należeć do tej domeny Ścieżka (Path) przeglądarka umieszcza w nagłówku żądania HTTP tylko te zmienne cookies, których ścieżka stanowi prefiks ścieżki URL danego żądania Domyślnie URL dokumentu, który utworzył cookie Czy wymaga bezpiecznej transmisji? (Secure)
6 Zastosowania Cookies 21 Uwagi o stosowaniu Cookies 22 Cookies są podstawową metodą zachowywania stanu aplikacji internetowej Protokół HTTP jest bezstanowy Traktuje każde kolejne żądanie do serwera jako oddzielne, nowe żądanie Cookies to rozwiązanie nie wchodzące w skład specyfikacji HTTP, ale powszechnie wykorzystywane Cookies zachowują stan po stronie klienta Zastosowania cookies w zależności od czasu życia: Cookie o czasie życia sesji do implementacji sesji po stronie serwera Cookie o czasie życia dłuższym niż sesja do śledzenia kolejnych odwiedzin użytkownika w serwisie Przykładowe informacje zapisywane w cookies: Identyfikator sesji Koszyk zakupów, itp. Dla usunięcia cookie przez aplikację zalecane jest wykonanie obu poniższych operacji: Ustawienie wartości cookie na null Ustawienie daty ważności na datę z przeszłości Data ta będzie brana pod uwagę dopiero przy zamykaniu przeglądarki! Problemy z cookies: Użytkownik może usunąć cookie Użytkownik może skonfigurować przeglądarkę tak, aby nie akceptowała cookies Postępowanie w przypadku braku akceptacji cookies: Zaszywanie identyfikatora sesji w adresie URL (jeśli cookie służy do śledzenia sesji) Wymaganie od użytkownika akceptacji cookies, jeśli chce korzystać z serwisu Limity dla cookies (specyfikacja podaje minimalne wartości, które musi wspierać klient; serwer nie powinien liczyć na więcej ): Całkowita liczba cookies: 300 Rozmiar cookie: 4 kilobajty Liczba cookies z jednego serwera/domeny: 20 Architektura WAP 23 Telefon komórkowy zgodny z WAP protokół WAP WAP Gateway HTTP Internet Bezpieczeństwo transmisji WAP Gateway pobiera dokumenty WML, kompresuje je i wysyła do telefonu komórkowego dokument WML WAP (Wireless Application Protocol) to standard dostępu telefonów komórkowych do Internetu; WAP pozwala urządzeniom mobilnym na korzystanie z rozmaitych źródeł informacyjnych (głównie WWW) Do tworzenia dokumentów przesyłanych przez WAP opracowano język WML (1.x, 2.0), obecnie zastępowany przez XHTML
7 Szyfrowanie symetryczne 25 Szyfrowanie asymetryczne 26 Ten sam klucz musi być w posiadaniu nadawcy i odbiorcy wiadomości Rodzaje algorytmów szyfrujących: blokowe - otrzymuje blok danych źródłowych, szyfruje go i zwraca jako wynik działania strumieniowe - szyfruje pojedyncze bity danych źródłowych Przykłady algorytmów: DES, IDEA, RC2, RC4 Stosowane dwa typy kluczy: klucz publiczny jest publicznie znany i wykorzystywany przez nadawców wiadomości adresowanych do właściciela klucza klucz prywatny jest znany tylko właścicielowi i służy do odczytywania zaszyfrowanych wiadomości Oba klucze mogą być zamienione miejscami, co stanowi podstawę algorytmów podpisu cyfrowego Przykłady algorytmów: RSA, PKCS, DSS Private key Private key Recipient s public key Recipient s private key Plain text Encryption algorithm Cipher text Decryption algorithm Plain text Plain text Encryption algorithm Cipher text Decryption algorithm Plain text Algorytmy kryptograficznych sum kontrolnych (Message Digest) 27 Podpisy cyfrowe 28 Algorytmy kryptograficznych sum kontrolnych stanową, wraz z szyfrowaniem asymetrycznym, podstawę dla implementacji podpisów cyfrowych Algorytm kryptograficznych sum kontrolnych implementuje funkcję haszową, która dla danych wejściowych zwraca ciąg znakowy o stałej długości; użyta funkcja jest nieodwracalna Algorytmy MD2, MD4 i MD5 generują wartości 128- bitowe; MD2 jest najwolniejszy, MD4 - najszybszy SHA (Secure Hash Algorithm) generuje wartości 160- bitowe; przyjęty przez rząd USA; mniej bezpieczny niż MD4 Plain text Message digest algorithm Message digest Digital signature Encryption algorithm Sender s private key Sender s public key Digital signature Decryption algorithm Message digest Plain text Message digest algorithm Message digest Sender Recipient Identical?
8 Praktyczne zastosowania algorytmów kryptograficznych Zwykle zarówno szyfrowanie symetryczne, jak i asymetryczne są wykorzystywane współbieżnie Szyfrowanie asymetryczne jest dużo wolniejsze, aniżeli symetryczne, w związku z czym w praktyce generuje się klucze symetryczne i wymienia się je przez bezpieczny kanał bazujący na szyfrowaniu asymetrycznym Standardy bezpiecznej komunikacji klient-serwer: SSL (Secure Sockets Layer): wykorzystuje RSA, RC2, RC4, IDEA, DES, Triple-DES, MD5 PCT (Private Communications Technology): wykorzystuje RSA, DES, Triple-DES, RC2, RC4, DSA TLS (Transport Layer Security): bazuje na SSLv3 Protokół HTTPS (HyperText Transfer Protocol Secure) to HTTP szyfrowany przez SSL 29 Techniki prezentacji danych w sieci Internet Formaty dokumentów WWW 31 Język HTML 32 Dokument, jaki otrzymuje przeglądarka od serwera WWW może być zapisany w różnych formatach (językach) Język HTML służy do definiowania treści i układu graficznego dokumentów udostępnianych przez serwery WWW Język CSS służy do definiowania układu graficznego dla dokumentów HTML (również XML) Język XML służy do definiowania treści dokumentów udostępnianych przez serwery WWW w sposób umożliwiający ich przetwarzanie automatyczne Język XSL służy do definiowania układu graficznego dla dokumentów XML Język VRML służy do definiowania trójwymiarowych scen graficznych Język WML służy do definiowania treści i układu graficznego dokumentów udostępnianych przez protokół WAP Język XHTML to HTML sformułowany w postaci XML Język HTML służy do definiowania treści i układu graficznego dokumentów udostępnianych przez serwery WWW Dokument HTML to dokument tekstowy, w którym umieszczone są rozkazy dla przeglądarki, dotyczące sposobu wyświetlenia danego fragmentu tekstu; rozkazy te nazywane są znacznikami (tags) Większość znaczników HTML występuje w parach; każda para posiada element otwierający i zamykający; znacznik otwierający jest otoczony < i >, a zamykający - </ i > ; niektóre znaczniki są pojedyncze Znaczniki mogą posiadać dodatkowe atrybuty sterujące, umieszczane wewnątrz < i > w formacie atrybut= wartość Komentarze umieszcza się w <!-- i -->
9 Struktura dokumentu HTML 33 Najważniejsze znaczniki HTML (1) 34 <HTML> <HEAD> <TITLE> <!-- tytuł dokumentu --> </TITLE> <!-- pozostałe informacje nagłówkowe ---> </HEAD> <BODY> <!-- treść dokumentu --> </BODY> </HTML> <Hy> Tekst nagłówka </Hy> <P> Tekst paragrafu </P> <BR> <HR> <B> <I> <A HREF= URL > Tekst łącznika </A> <IMG SRC= URL > Tekst nagłówka; sześć poziomów, (y=1..6); 1 - największy; nagłówki wyświetlane są pogrubioną i powiększoną czcionką Paragraf blok tekstu zakończony przejściem do nowego wiersza; znaki ENTER są w HTML nieznaczące Wymusza przejście do nowego wiersza bez wprowadzania odstępu pionowego (<P> dodaje odstęp) Znacznik tworzy poziomą linię o szerokości okna przeglądarki; wykorzystywany do rozdzielania sekcji dokumentu Tekst wytłuszczony Tekst pochylony Umieszczenie łącznika do innego dokumentu; URL do adres wskazywanego dokumentu, Tekst łącznika jest wyświetlany na ekranie Umieszczenie obrazu graficznego (XBM, GIF lub JPEG), znajdującego się pod podanym adresem URL Najważniejsze znaczniki HTML (2) 35 Najczęściej stosowane atrybuty znaczników (1) 36 <TABLE></TABLE> <TR></TR> <TD>zawartość</TD> Definicja tabelki HTML; liczba kolumn i wierszy będzie wynikać z liczebności definicji wewnątrz <TABLE></TABLE> Definicja jednego wiersza tabelki HTML; zagnieżdżone w <TABLE></TABLE> Definicja jednej komórki w wierszu tabelki HTML; w komórce wyświetlona zostanie zawartość Ponadto powszechnie wykorzystywane są znaczniki wykorzystywane do tworzenia formularzy wywołujących skrypty CGI, serwlety, JSP i inne aplikacje dynamicznie generujące strony WWW: FORM, INPUT, SELECT, OPTION, TEXTAREA width np.<hr WIDTH= 10% > align np.<p ALIGN= CENTER > valign np.<td VALIGN= TOP > style np.<p STYLE= {color: red > colspan np.<td COLSPAN= 3 > rowspan np.<tr ROWSPAN= 2 > border np.<table BORDER= 1 > bgcolor np.<table BGCOLOR= red > Szerokość elementu w pikslach lub procentach szerokości elementu otaczającego (okna przeglądarki, komórki tabeli) Wyrównanie poziome elementów wewnątrz znacznika; LEFT, RIGHT lub CENTER Wyrównanie pionowe elementów wewnątrz znacznika; TOP, BOTTOM lub CENTER Definicja stylu graficznego w formacie CSS Stosowane w tabelach; komórka tabeli ma powstać ze złączenia kilku kolumn Stosowane w tabelach; komórka tabeli ma powstać ze złączenia kilku wierszy Określa grubość obramowania elementu; BORDER=0 oznacza brak obramowania Kolor tła elementu
10 Najczęściej stosowane atrybuty znaczników (2) class np.<p CLASS= NICE_PAR > cellspacing np.<table CELLSPACING= 4 > cellpadding np.<table CELLPADDING= 10 > cellpadding abcdefghij abcdefghij cellspacing abcdefghij abcdefghij abcdefghij abcdefghij Stosowane przy współpracy z CSS; określa nazwę klasy wizualnej, do której należy znacznik Stosowane w tabelach; wyrażony w pikslach prześwit pomiędzy komórkami tabeli; wartość 0 oznacza brak prześwitu Stosowane w tabelach; wyrażony w pikslach margines, o jaki komórka jest większa od swojej zawartości Uwaga: Wiele atrybutów (np. bgcolor czy align) oraz znaczników (np. FONT) dotyczących formatowania ma od HTML 4 status deprecated. Formatowanie powinno być specyfikowane w arkuszach stylów (CSS). 37 Tabelki HTML Tabelki HTML umożliwiają organizację danych w postaci wierszy i kolumn komórek Pojedyncza komórka może zajmować wiele wierszy i/lub komórek Tabelki mogą zawierać tekst, obrazy, formularze, inne tabelki, itd. <table border=1> <tr> <th>rok</th> <th>kwota</th> <tr> <td>2001</td> <td>189, </td> <tr> <td>2002</td> <td>250, </td> </table> Tabelki HTML są również wykorzystywane do wymuszenia konkretnego układu elementów na stronie Nie jest to zalecane wg specyfikacji HTML 4 (do tego celu służy CSS!) 38 Zarządzanie układem w oparciu o tabelki HTML (1/3) 39 Zarządzanie układem w oparciu o tabelki HTML (2/3) 40 Tabela o jednym wierszu i jednej komórce; niebieski kolor tła Komórka z VALIGN=TOP -obraz GIF Komórka -tekst Tabela; CELLSPACING=0 Wiersz z komórką o COLSPAN=2; bez koloru tła -tekst Wiersz o zielonym kolorze tła <table class=table_border width=80%> <tr> <td> <table cellspacing=0 cellpadding=10 width=100%> <tr> <td colspan=2 align=center>'pulp Fiction </td> <tr class=row_odd> <td valign=top align=center> <img width=100 src='cw2img?id=46' border=1> </td> <td valign=top> <i>kategoria:</i>... </td> </table> </td> </table>
11 Zarządzanie układem w oparciu o tabelki HTML (3/3) 41 Formularze HTML 42 Tabela; niebieski kolor tła Komórka; VALIGN=TOP Tabela; wiersze w różnych kolorach tła Komórka Formularze HTML stanowią interfejs umożliwiający przekazanie parametrów wywołania programom dynamicznie generującym strony HTML: skryptom CGI, serwletom, aplikacjom JSP, ASP, itp. Formularz zawiera różne typy pól umożliwiających wprowadzanie lub wybór wartości parametrów (pola tekstowe, przyciski wyboru, listy rozwijane itd.) Wartości wprowadzone przez użytkownika do pól formularza stają się parametrami wywołania programu uruchamianego na serwerze aplikacji Nazwy wysyłanych parametrów wywołania programu są takie same jak nazwy pól formularza Tabela o jednym wierszu; brak koloru tła Przykład formularza do wprowadzania wartości parametrów <HTML> <HEAD> <TITLE>Wyszukiwanie pracowników</title> </HEAD> <BODY> <FORM ACTION="/servlet/MyServlet1" METHOD=GET> Nazwisko szukanego pracownika: <INPUT TYPE="text" NAME="name" SIZE=8> <INPUT TYPE="submit" VALUE="Szukaj"> </FORM> </BODY> </HTML> 43 Znaczniki HTML służące do tworzenia formularzy (1) <FORM ACTION=url METHOD=m></FORM> Początek/koniec definicji formularza; po zatwierdzeniu formularza przez użytkownika zostanie wywołana aplikacja url, a parametry wywołania będą przekazane metodą m (GET lub POST); znaczniki te muszą otaczać wszystkie pozostałe znaczniki formularza <INPUT TYPE='text' NAME=n VALUE=v SIZE=s> Pole tekstowe o nazwie n, wartości domyślnej v i rozmiarze s znaków <INPUT TYPE='password' NAME=n VALUE=v SIZE=s> Jak wyżej, lecz zawartość wprowadzana do pola nie jest ujawniana na ekranie <INPUT TYPE='radio' NAME=n VALUE=v CHECKED> Przycisk radiowy należący do grupy przycisków radiowych o nazwie n; włączonemu przyciskowi odpowiada wartość v; jeżeli pojawia się CHECKED, to przycisk ten będzie domyślnie włączony 44
12 Znaczniki HTML służące do tworzenia formularzy (2) 45 Znaczniki HTML służące do tworzenia formularzy (3) 46 <INPUT TYPE='checkbox' NAME=n VALUE=v CHECKED> Przycisk wyboru o nazwie n; włączonemu przyciskowi odpowiada wartość v; jeżeli pojawia się CHECKED, to przycisk ten będzie domyślnie włączony <INPUT TYPE='hidden' NAME=n VALUE=v> Pole tekstowe ukryte o nazwie n i wartości v; nie wyświetlane na ekranie, jego wartość musi być umieszczona wewnątrz znacznika <INPUT TYPE='submit' NAME=n VALUE=v> Przycisk zatwierdzający formularz; jego naciśnięcie powoduje wysłanie przez przeglądarkę żądania uruchomienia aplikacji o adresie URL podanym w znaczniku FORM; aplikacji tej zostaną przesłane parametry wywołania oparte o wartości wszystkich elementów formularza (pól tekstowych, przycisków wyboru, itd.); v opisuje etykietę przycisku <INPUT TYPE='image' SRC=url> Obraz graficzny pełniący funkcję przycisku zatwierdzającego formularz; url określa lokalizację pliku obrazu <INPUT TYPE='reset' VALUE=v> Przycisk przywracający wszystkim elementom formularza wartości początkowe; v opisuje etykietę przycisku <SELECT NAME=n SIZE=s MULTIPLE></SELECT> Początek/koniec definicji listy/listy rozwijanej; element otrzyma nazwę n, będzie jednocześnie wyświetlać s pozycji; jeżeli pojawia się MULTIPLE, to użytkownik ma możliwość wyboru wielu pozycji jednocześnie; wewnątrz tego znacznika znajdują się znaczniki <OPTION> Znaczniki HTML służące do tworzenia formularzy (4) 47 Przykład złożonego formularza 48 <OPTION VALUE=v SELECTED></OPTION> Początek/koniec definicji pojedynczej pozycji listy; wartość v będzie wysłana przez formularz, jeżeli pozycja ta zostanie wybrana; jeżeli pojawia się SELECTED, to pozycja ta jest zaznaczona domyślnie; wewnątrz znacznika znajduje się wyświetlany tekst <TEXTAREA NAME=n ROWS=r COLS=c><TEXTAREA> Obszar tekstowy (wielowierszowe pole tekstowe) o nazwie n, c kolumnach i r wierszach; wewnątrz znacznika znajduje się tekst domyślny <form action= /mv/srch ><table class=table_border width=100%> <tr><td><table cellspacing=0 cellpadding=4 width=100%> <tr><td colspan=2 align=center>wyszukaj film</td> <tr><td>tytuł</td> <td><input type='text' name=tytul></td> <tr><td>reżyseria</td> <td><input type='text' name=director></td> <tr><td>obsada</td> <td><input type='text' name=cast></td> <tr><td>gatunek</td> <td><select name=category> <option>dowolny</option> <option>action</option> <option>comedy</option> <option>sci-fi</option> </select></td> <tr><td>zwiastun</td> <td><input type='checkbox' name=istrailer></td> <tr><td colspan=2 align=right><br> <input type='submit' value='szukaj'></td> </table></td></table></form>
13 Przykład złożonego formularza 49 CSS Arkusze reguł stylistycznych CSS Arkusz reguł stylistycznych stylu (ang. style sheet) jest kolekcją reguł formatujących, które mogą odnosić się do wielu dokumentów HTML; spełnia on funkcję wzorca, pozwalając na zapewnienie takiego samego wyglądu wszystkich wystąpień danego elementu Powszechnie zaakceptowanym i ustandaryzowanym mechanizmem specyfikacji stylów dla HTML jest CSS (standardy CSS1 i nowszy CSS2 - będący rozszerzeniem CSS1) CSS umożliwia znacznie dokładniejszą kontrolę sposobu wyświetlania elementów, aniżeli sam HTML Nie wszystkie mechanizmy CSS1/CSS2 są zaimplementowane w dostępnych obecnie przeglądarkach Finalizowane prace nad CSS2.1 okrojoną wersją CSS2, pozbawioną opcji niezaimplementowanych w aktualnych przeglądarkach Np. dźwiękowej interpretacji dokumentów (jest w powstającym CSS3) 51 CSS w HTML - Przykład <HTML> <HEAD> <TITLE>CSS homepage</title> <STYLE type="text/css"> H1 { color: blue BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em </STYLE> </HEAD> <BODY> <H1>Cascading Style Sheets</H1> <H2>Preface</H2> <P> A CSS rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). </P> </BODY> </HTML> 52
14 Dołączanie reguł do dokumentu HTML 53 Reguły stylistyczne CSS 54 Reguły stylistyczne w oddzielnym pliku, wskazanym znacznikiem <LINK REL= stylesheet > Reguły stylistyczne zagnieżdżone w dokumencie za pomocą znacznika <STYLE> w sekcji HEAD Atrybut STYLE elementów w sekcji BODY, np. <P STYLE='{color: blue'> Reguła CSS zawiera dwie części: selektor (np. 'H1') i deklarację (np. 'color: blue'); deklaracja ma dwie części: właściwość (np. 'color') i wartość (np. 'blue') Selektor składa się z jednego lub więcej prostych selektorów połączonych łącznikami; łącznikami są: odstępy, "> i "+ Gdy wszystkie warunki selektora są spełnione dla danego elementu, mówimy, że element spełnia selektor Formaty selektorów reguł CSS 55 Przykład wykorzystania reguł CSS (1) 56 * E E F E > F E + F A:link A:visited E:active E:hover E[atr="val"] E.val spełniony przez każdy element spełniony przez każdy element <E> (np. BODY) spełniony przez każdy element F zagnieżdżony wewnątrz elementu E (np. P I) spełniony przez każdy element F zagnieżdżony bezpośrednio wewnątrz elementu E (np. P I) spełniony przez każdy element F, który następuje bezpośrednio za elementem E spełniony przez każdy link <A>, który nie został jeszcze odwiedzony spełniony przez każdy link <A>, który został już odwiedzony spełniony przez każdy element E, który jest właśnie naciskany myszką spełniony przez każdy element E, nad którym właśnie przesuwa się wskaźnik myszki spełniony przez te elementy E, które posiadają atrybut atr o wartości val spełniony przez te elementy E, które posiadają atrybut CLASS o wartości val body {background-color: orange * {font-family: Sans-serif *.row_even {background-color: lightblue *.row_odd {background-color: lightgreen *.row_caption {background-color: darkblue; color: white; font-weight: bold *.table_border {background-color: darkblue *.button_even {background-color: lightblue; border-color: lightblue *.button_odd {background-color: lightgreen; border-color: lightgreen *.result_title {color: darkblue; font-weight: bold *.result_story {font-size: smaller *.page_header {font-family: "Tahoma",Sans-serif; font-weight:800; letter-spacing: 8; color: white a.active_link {color: green; font-weight: bold; text-decoration: none a:hover {color: red
15 Przykład wykorzystania reguł CSS (2) 57 Deskryptory CSS: marginesy 58 <table class=table_border width=100%> <tr><td><table cellspacing=0 cellpadding=4 width=100%> <tr class=row_caption> <td colspan=2 align=center>wyszukaj film</td> <tr class=row_odd> <td>tytuł</td><td><input type='text' name=p_title></td> <tr class=row_even> <td>reżyseria</td><td><input type='text' name=p_dir></td> <tr class=row_odd> <td>obsada</td><td><input type='text' name=p_cast></td> <tr class=row_even> <td>gatunek</td><td><select name=p_category> <option>action</option> <option SELECTED >COMEDY</option> <option>family</option> <option>sci-fi</option> </select></td> <tr class=row_odd> <td colspan=2 align=right><br> <input type='submit' value='szukaj' class=button_even></td> </table> </td> </table> Właściwości marginesów (obszaru pomiędzy obramowaniem elementu a elementem zewnętrznym): margin-top, margin-right, margin-bottom, marginleft, margin; np.: BODY { margin: 2em /* all margins set to 2em */ BODY { margin: 1em 2em /* top & bottom = 1em, right & left = 2em */ BODY { margin: 1em 2em 3em /* top=1em, right=2em, bottom=3em, left=2em */ ostatnia z powyższych reguł jest równoważna poniższej: BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; Uwaga: 1em = rozmiar używanej czcionki Deskryptory CSS: wypełnienie 59 Deskryptory CSS: obramowanie 60 Własności wypełnienia (obszaru pomiędzy treścią elementu a ewentualnym obramowaniem) - właściwości: paddingtop, padding-right, padding-bottom, padding-left i padding; np.: Szerokość krawędzi: border-top-width, border-rightwidth, border-bottom-width, border-left-width i border-width; wartości: thin, medium, thick, lub podane jawnie; np. H1 {border-width: thin Kolor krawędzi: border-top-color, border-right-color, border-bottom-color, border-left-color i bordercolor; np. H1 {border-color: red Styl krawędzi: border-top-style, border-right-style, border-bottom-style, border-left-style, and borderstyle; wartości: none, dotted, dashed, solid, double, groove, ridge, inset, outset; np. H1 {border-style: solid dotted H1 { background: white; padding: 1em 2em; Powyższy przykład specyfikuje margines wewnętrzny w pionie na '1em' (padding-top and padding-bottom) oraz margines wewnętrzny w poziomie na '2em' (padding-right and padding-left)
16 Deskryptory CSS: specyfikacja czcionki 61 Deskryptory CSS: właściwości tekstu 62 Właściwość font-family; wartości: serif, sans-serif, cursive, fantasy, monospace, i inne Właściwość font-style; wartości : normal, italic, oblique Właściwość font-variant; wartości : normal, small-caps Właściwość font-weight; wartości : normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 Właściwość font-stretch; wartości :ultra-condensed, extracondensed, condensed, semi-condensed, normal, semiexpanded, expanded, extra-expanded, ultra-expanded Właściwość font-size; wartości : xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, bezwzględny rozmiar czcionki, względny rozmiar czcionki (wyrażony procentowo) Wcięcie: text-indent; np. P {text-indent: 3em Wyrównanie: text-align; wartości: left, right, center, justify; np. P {text-align: center Dekoracja: text-decoration; wartości: none, underline, overline, line-through, blink; np. P {text-decoration: linethrough Cień: text-shadow; np. H1 {text-shadow: 0.2em 0.2em Odstępy: letter-spacing i word-spacing; np. H1 {letterspacing: 0.1em; word-spacing: 1em Wielkość liter: text-transform; wartości: capitalize, uppercase, lowercase, none Deskryptory CSS: kolory i tło 63 CSS: dziedziczenie 64 Kolor pierwszego planu: color; np.: EM { color: red /* predefined color name */ EM { color: rgb(255,0,0) /* RGB range */ Tło: background-color, background-image, background-repeat, background-attachment, background-position, background; np.: H1 { background-color: #F00 BODY { background-image: url("marble.gif") BODY { background: white url("pendant.gif"); backgroundrepeat: repeat-y; background-position: center; BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; Niektóre wartości są dziedziczone przez elementy dzieci w drzewie dokumentu Definicja każdej właściwości w specyfikacji CSS zawiera informacje o tym czy jej wartość jest dziedziczona czy nie Przykład dziedziczenia: <H1>Wstęp <EM>wzbroniony</EM>!!!</H1> Jeśli elementowi H1 przypisano kolor czerwony, a elementowi EM nie przypisano koloru, to zostanie on również zaprezentowany na czerwono w efekcie dziedziczenia wartości koloru Istnieje możliwość zażądania odziedziczenia wartości właściwości domyślnie nie podlegającej dziedziczeniu przez podanie wartości inherit
17 CSS: kaskada 65 CSS: ważne reguły 66 W CSS więcej niż jeden arkusz stylów może wpływać na prezentację: Modularność: dołączanie arkuszy z innych url( Arkusze autora, czytelnika (user) i domyślny arkusz przeglądarki Czytelnik specyfikuje swój arkusz w sposób zależny od przeglądarki np. Firefox/Mozilla: usercontent.css w katalogu profilu Internet Explorer: Opcje Internetowe -> Dostępność Ogólne idee kaskady stylów: Reg. autora > Reg. czytelnika > Reg. przeglądarki Reguły z arkusza > Reguły z importowanych arkuszy W przypadkach spornych decyduje specyficzność reguły i następnie kolejność wystąpienia Autorzy i czytelnicy mogą jawnie podnosić wagę swoich reguł wskazując je jako ważne (important) H1 { color: black! important; background: white! important P { font-size: 12pt! important; font-style: italic Reguły ważne przesłaniają reguły normalne z tego samego źródła (autor, czytelnik) Od CSS2 ważna reguła czytelnika przesłania ważną regułę autora Uwaga: W CSS1 ważna reguła autora przesłaniała ważną regułę czytelnika! CSS: specyficzność reguł 67 CSS: algorytm kaskady 68 Współczynnik wyznaczany dla selektora reguły Współczynnik specifity uwzględnia: (a) liczbę atrybutów ID w selektorze (b) liczbę atrybutów class w selektorze (c) liczbę nazw znaczników w selektorze Współczynnik ma postać liczby (a)(b)(c) w systemie o odpowiednio dużej podstawie LI {... /* a=0 b=0 c=1 -> specificity = 1 */ UL LI {... /* a=0 b=0 c=2 -> specificity = 2 */ UL OL LI {... /* a=0 b=0 c=3 -> specificity = 3 */ LI.red {... /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red {... /* a=0 b=1 c=3 -> specificity = 13 */ #x34y {... /* a=1 b=0 c=0 -> specificity = 100 */ 1) Znajdź wszystkie deklaracje odnoszące się do elementu (gdy takich nie ma uwzględnij odziedziczone) 2) Sortuj wg oznaczenia ważności (important) i pochodzenia 3) Sortuj wg specyficzności (malejąco) 4) Sortuj wg kolejności wystąpienia Późniejsze reguły "wygrywają" Reguły zaimportowane poprzedzają zdefiniowane w arkuszu! Uwaga: deklaracje w atrybucie STYLE elementu mają taką samą wagę jak deklaracje z ID na końcu arkusza stylów
18 Format XML 70 XML Formalnie, XML stanowi podzbiór języka Standard Generalized Markup Language (SGML) (ISO 8879:1986) XML jest formatem służącym do opisywania strukturalnych lub semi-strukturalnych danych, np. przeznaczonych do upowszechniania w sieci Internet Dokumenty XML posługują się znacznikami, zapisywanymi podobnie jak w HTML; jednak wszystkie znaczniki XML są definiowane przez programistę Dokumenty XML są łatwe w przetwarzaniu maszynowym; istnieje wiele bibliotek tzw. parserów XML, z których mogą korzystać programiści (Java, JavaScript, C++, itd.) Przykładowy prosty dokument XML 71 Wybrane zastosowania XML 72 <company> <department> <dname>marketing</dname> <employees> <employee>jones</employee> <employee>smith</employee> </employees> </department> <department> <dname>production</dname> <employees> <employee>mitchell</employee> <employee>barker</employee> </employees> </department> </company> Format przechowywania danych Aplikacja Format sieciowej wymiany danych XML Aplikacja XML Aplikacja Źródłowy format danych do prezentacji na różnych platformach HTML Aplikacja XML WML TXT
19 Struktura dokumentu XML 73 Zewnętrzny DTD - Przykład 74 Ciało dokumentu może być poprzedzone następującymi, opcjonalnymi konstrukcjami: Instrukcja przetwarzania określająca: wersję XML, opcjonalnie kodowanie znaków, opcjonalnie informacje o tym czy dok. zawiera zewnętrzne deklaracje znaczników, np. <?xml version= "1.0" encoding="iso " standalone="yes"?> Document Type Declaration (DTD), opisująca użyte znaczniki oraz ich gramatykę; DTD może znajdować się wewnątrz dokumentu lub w oddzielnym pliku (lokalnym lub zdalnym), np. <!DOCTYPE company SYSTEM " Instrukcja przetwarzania wskazująca arkusz stylów, zgodnie z którym ma być sformatowany dokument, np. <?xml-stylesheet type="text/xsl" href="company.xsl"?> company.xml <?xml version="1.0" encoding="iso "?> <!DOCTYPE company SYSTEM "company.dtd"> <company> <department symbol="m"> <dname>marketing</dname> <employees> <employee>jones</employee> <employee>smith</employee> </employees> </department> <department symbol="s">... </department>... </company> może wystąpić jeden lub wiele razy (+), zero lub wiele (*), zero lub jeden (?) company.dtd <!ELEMENT company (department)+> <!ELEMENT department (dname, employees)> <!ELEMENT dname (#PCDATA)> <!ELEMENT employees (employee)+> <!ELEMENT employee (#PCDATA)> <!ATTLIST department symbol CDATA #REQUIRED> Wewnętrzny DTD - Przykład 75 Elementy składni DTD (1/2) 76 company.xml <?xml version="1.0" encoding="iso "?> <!DOCTYPE company [ <!ELEMENT company (department)+> <!ELEMENT department (dname, employees)> <!ELEMENT dname (#PCDATA)> <!ELEMENT employees (employee)+> <!ELEMENT employee (#PCDATA)> <!ATTLIST department symbol CDATA #REQUIRED> ]> <company> <department symbol="m"> <dname>marketing</dname> <employees> <employee>jones</employee> <employee>smith</employee> </employees> </department> <department symbol="s">... </department>... </company> Definicje elementów Definiują nazwy elementów Określają zawieranie i następstwo:? element opcjonalny + * powtórzenia (obowiązkowe, opcjonalne) alternatywa Określają zawartość elementu: #PCDATA tekstowa (Parsed Character Data) EMPTY pusta (tylko znacznik i atrybuty) ANY dowolna
20 Elementy składni DTD (2/2) 77 Dokumenty poprawne i dobrze sformułowane 78 Definicje atrybutów Definiują nazwy atrybutów Określają typ atrybutu: CDATA tekstowy (Character Data) ID identyfikator (unikalny w ramach dokumentu) IDREF referencja Określają obowiązkowość atrybutów: #REQUIRED obowiązkowy #IMPLIED opcjonalny bez wartości domyślnej #FIXED ustalony (niezmienny) Podają wartości domyślne atrybutów opcjonalnych listy dopuszczalnych wartości (typy wyliczeniowe) Definicje encji (zewnętrznych/wewnętrznych, ogólnych/parametrycznych), definicje notacji Jeśli z instancją dokumentu związany jest DTD i dokument jest zgodny z regułami zdefiniowanymi w DTD mówimy, że dokument jest poprawny (valid) Jeśli dostępna jest tylko instancja dokumentu, procesor XML może jedynie sprawdzić, czy dokument jest dobrze sformułowany (wellformed) Znaczniki zamknięte <P>...</P> Dla elementów pustych dopuszczalny specjalny zapis: <BR/> Elementy prawidłowo zagnieżdżone np. <B> one <I> two </B> three </I> jest niepoprawne Nazwy znaczników wrażliwe na wielkość liter np. <B><i> one </I></B> jest niepoprawne Wartości atrybutów w apostrofach/cudzysłowach np. <IMG SRC= icon.gif WIDTH= 10 HEIGHT= 20 > Dokument zawiera jeden główny element (niezawarty w innym elemencie) Przestrzenie nazw (XML Namespaces) 79 Przestrzenie nazw - Przykład 80 Motywacje: Powstaje wiele słowników dziedzinowych Autorzy dokumentów powinni móc korzystać z wielu słowników i dodawać własne Powstaje ryzyko konfliktów nazw znaczników Rozwiązanie problemu: przestrzenie nazw (XML Namespaces) Nazwy elementów lub atrybutów poprzedzane prefiksem przestrzeni nazw Jedna przestrzeń nazw może być domyślna bez prefiksu Definiowanie przestrzeni nazw: Przez podanie specjalnego atrybutu xmlns:prefiks_przestrzeni Wartością atrybutu jest URI przestrzeni nazw (nazwa przestrzeni) Przestrzeń zdefiniowana w elemencie nadrzędnym może być wykorzystywana w podrzędnych <html xmlns=" xmlns:emp=" <head><title>employees</title></head> <body> <emp:list> <emp:header>employees</emp:header> <table> <tr><td>name</td><td>salary</td></tr> <tr><td><emp:lastname>scott</emp:lastname></td> <td><emp:salary>2300</emp:salary></td></tr> <tr><td><emp:lastname>brown</emp:lastname></td> <td><emp:salary>4100</emp:salary></td></tr> </table> </emp:list> </body> </html> Domyślna przestrzeń, bez prefiksu
21 Schematy XML (XML Schema) W wielu zastosowaniach możliwości DTD nie są wystarczające do definiowania struktury dokumentów XML DTD odpowiedni dla dokumentów tekstowych DTD nie pozwala na specyfikowanie typów danych i ich weryfikację Brak wsparcia dla przestrzeni nazw Brak konstrukcji specyfikującej wystąpienie zbioru elementów w dowolnej kolejności (tylko sekwencja i alternatywa) Składnia nie-xml Rozwiązanie: XML Schema Standard do opisu struktury dokumentów XML w postaci dokumentu XML Bogactwo typów danych prostych i złożonych, możliwość definicji własnych typów Wsparcie dla przestrzeni nazw Eliminacja wad DTD, ale bardziej skomplikowana składnia 81 Schematy XML - Przykład <?xml version='1.0' encoding='windows-1250'?> <employees xmlns:xsi=" xsi:nonamespaceschemalocation="empschema.xsd"> <employee> <last_name>scott</last_name> <salary>2300</salary> </employee> <employee> <?xml version="1.0" encoding="windows-1250"?> <last_name>brown</last_name> <xsd:schema xmlns:xsd=" <salary>4100</salary> <xsd:element name="employees"> </employee> </employees> empschema.xsd employees.xml <xsd:complextype> <xsd:sequence> <xsd:element name="employee" maxoccurs="unbounded"> <xsd:complextype> <xsd:sequence> <xsd:element name="last_name" type="xsd:string"/> <xsd:element name="salary" type="xsd:int"/> </xsd:sequence> </xsd:complextype> </xsd:element> </xsd:sequence> </xsd:complextype> </xsd:element> </xsd:schema> 82 Formatowanie dokumentów XML 84 XSL: Transformacja i formatowanie dokumentów XML Język XML opisuje strukturę i semantykę, nie opisuje formatowania Nie ma w XML znaczników opisujących formatowanie Ze znacznikami XML nie jest związany domyślny sposób prezentacji Sposób prezentacji dokumentu XML (formatowanie) dodaje się poprzez dołączenie arkuszu stylów CSS Cascading Style Sheets (Level 1 i Level 2) Opracowany z myślą o HTML XSL Extensible Stylesheet Language Opracowany dla dokumentów XML Bardziej złożony, oferujący więcej możliwości niż CSS
22 Formatowanie XML za pomocą CSS 85 XSL Extensible Stylesheet Language 86 produkty.xml produkty.css <?xml version="1.0" encoding="windows-1250"?> <?xml-stylesheet type="text/css" href="produkty.css"?> <cennik> <produkt kod=" "> <nazwa>antena dachowa</nazwa> <symbol> </symbol> <cena>85</cena> </produkt> <produkt kod=" "> <nazwa>radioodtwarzacz CAR 2001</nazwa> <symbol> </symbol> <cena>525</cena> </produkt> <produkt kod=" "> <nazwa>zestaw głośnomówiący LOUD 2</nazwa> <symbol> </symbol> <cena>330</cena> </produkt> </cennik> produkt {display: block nazwa {display: inline; font-weight: bold symbol {display: none cena {display: inline; font-style: italic CSS umożliwia formatowanie elementów, ale nie pozwala na modyfikację struktury drzewa dokumentu Język do definiowania arkuszy stylów Obejmuje 2 części: XSL Transformations (XSLT) język przekształceń Wykorzystuje XPath XSL Formatting Objects (XSL-FO) język opisu formatu W porównaniu z CSS: XSL oferuje bardziej rozbudowane mechanizmy formatowania Umożliwia transformację struktury drzewa dokumentu (!) Arkusze XSL są dokumentami XML (!) XSLT może być wykorzystywany w połączeniu z XSL-FO do formatowania dokumentów XML, ale może również być wykorzystywany niezależnie jako uniwersalny język transformacji dokumentów XML XSLT Język przekształceń 87 Transformacja XSLT 88 Zawiera elementy służące do definiowania reguł opisujących sposób przekształcania jednego dokumentu XML na inny dokument Wykorzystuje język wyrażeń XPath do wyboru przetwarzanych elementów Przekształcony dokument może mieć znaczniki (i DTD) dokumentu oryginalnego lub używać innego zestawu znaczników Przykłady typów konwersji dokumentów XML: Konwersja do dokumentu XML zawierającego obiekty formatujące XSL Konwersja do dokumentu HTML (np. korzystającego z arkusza stylów CSS) Dokument XML Arkusz stylistyczny XSL XSLT Dokument XML (lub HTML, WML, itp.) Automatyczna konwersja dokumentu XML do formatu HTML, WML, itp. lub innego dokumentu XML
23 Przykład transformacji XSLT produkty.xml <?xml version="1.0" encoding="windows-1250"?> <?xml-stylesheet type="text/xsl" href="produkty.xsl"?> <cennik> <produkt kod=" "> <nazwa>antena dachowa</nazwa> <symbol> </symbol> <cena>85</cena> </produkt> <produkt kod=" "> <nazwa>radioodtwarzacz CAR 2001</nazwa> <symbol> </symbol> <cena>525</cena> </produkt> <produkt kod=" "> <nazwa>zestaw głośnomówiący LOUD 2 </nazwa> <symbol> </symbol> <cena>330</cena> </produkt> </cennik> produkty.xsl <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl=" version="1.0"> <xsl:template match="cennik"> <HTML><BODY><H1>Cennik akcesoriów</h1> <xsl:for-each select="produkt"> <B><xsl:value-of select="nazwa"/></b> - <I><xsl:value-of select="cena"/></i> PLN <BR/> </xsl:for-each> </BODY></HTML> </xsl:template> </xsl:stylesheet> Wyrażenia XPath wybierające przetwarzane elementy 89 Metody transformacji XSLT Programista przygotowuje arkusz stylistyczny XSL, opisujący sposób transformacji oryginalnego dokumentu XML Transformacja może być opisana w sposób rekurencyjny, proceduralny lub mieszany Za transformację dokumentu XML odpowiada procesor XSLT Procesory XSLT mogą być dostępne w postaci: Samodzielnych produktów Modułów wchodzących w skład większych produktów Przeglądarek internetowych (np. Microsoft Internet Explorer) Serwerów WWW Modułów bibliotecznych np. bibliotek Java 90 Efekt transformacji do HTML wykonanej po stronie przeglądarki Co widzi procesor XSLT? 91 Domyślne reguły transformacji 92 Procesor XSLT widzi drzewo dokumentu XML XSLT zakłada, że drzewo składa się z 7 rodzajów węzłów: Korzeń Elementy Tekst Atrybuty Przestrzenie nazw Instrukcje przetwarzania Komentarze DTD i deklaracja typu dokumentu nie są włączane do drzewa (ale mogą powodować dodanie do niektórych elementów atrybutów domyślnych i stałych) XSL zawiera definicje kilku domyślnych reguł niejawnie dołączonych do wszystkich arkuszy stylów Domyślna reguła elementów Zapewnia, że wszystkie węzły będą przetworzone gdy nie ma jawnych reguł Domyślna reguła węzłów tekstowych i atrybutów Kopiuje tekst i atrybuty na wyjście Domyślna reguła instrukcji przetwarzania i komentarzy Pomija instrukcje przetwarzania i komentarze Domyślne reguły mają niższy priorytet niż wyspecyfikowane jawnie (tzn. obowiązują jeśli nie zostaną przesłonięte) Dzięki powyższym regułom "pusty" arkusz stylów spowoduje przekopiowanie danych tekstowych na wyjście <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl=" version="1.0"> </xsl:stylesheet>
24 Transformacja rekurencyjna (1/2) Przykład: Reguły transformacji 93 Transformacja rekurencyjna (2/2) Przykład: Arkusz stylistyczny XSL 94 1) Każde wystąpienie znacznika <cennik>*</cennik> zamień na: <HTML><BODY><H1>Cennik akcesoriów</h1>*</body></html> <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl=" version="1.0"> <xsl:template match="cennik"> a następnie spróbuj dopasować reguły do zawartości znacznika 2) Każde wystąpienie znacznika <produkt>*</produkt> zamień na: *<BR/> a następnie spróbuj dopasować reguły do zawartości znacznika 3) Każde wystąpienie znacznika <nazwa>*</nazwa> zamień na: <B>*</B> - <HTML><BODY><H1>Cennik akcesoriów</h1><xsl:apply-templates/></body></html> </xsl:template> <xsl:template match="produkt"> <xsl:apply-templates/><br/> </xsl:template> <xsl:template match="nazwa"> <B><xsl:value-of select="text()"/></b> - </xsl:template> <xsl:template match="symbol"> 4) Każde wystąpienie znacznika <cena>*</cena> zamień na: <I>*</I> PLN 5) Pomiń znacznik <symbol>*</symbol> </xsl:template> <xsl:template match="cena"> <I><xsl:value-of select="text()"/></i> PLN </xsl:template> </xsl:stylesheet> Wybiera węzeł tekstowy Transformacja proceduralna (1/2) Przykład: Pseudokod transformacji 95 Transformacja proceduralna (2/2) Przykład: Arkusz stylistyczny XSL 96 wyświetl "<HTML><BODY><H1>Cennik akcesoriów</h1>"; dla każdego znacznika <produkt> { <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl=" version="1.0"> wyświetl "<B>"; <xsl:template match="cennik"> wyświetl zawartość znacznika <nazwa>; wyświetl "</B> -"; wyświetl "<I>"; wyświetl zawartość znacznika <cena>; wyświetl "</I> PLN<BR/>"; <HTML><BODY><H1>Cennik akcesoriów</h1> <xsl:for-each select="produkt"> <B><xsl:value-of select="nazwa"/></b> - <I><xsl:value-of select="cena"/></i> PLN <BR/> </xsl:for-each> </BODY></HTML> wyświetl "</BODY></HTML>"; </xsl:template> </xsl:stylesheet>
25 Dostęp do atrybutów, dodawanie atrybutów <?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl=" version="1.0"> <xsl:template match="/"> <HTML> <HEAD><TITLE>Cennik</TITLE></HEAD> <BODY> <H1>Cennik akcesoriów</h1> <TABLE> <xsl:attribute name="border">4</xsl:attribute> <TR> <TH>Kod</TH><TH>Symbol</TH> <TH>Nazwa</TH><TH>Cena</TH> </TR> <xsl:for-each select="cennik/produkt"> <TR> <TH><xsl:value-of <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet> Dodanie atrybutu BORDER z wartością 4 do elementu<table> (<TABLE BORDER="4"> też OK.) Dostęp do atrybutu KOD elementu cennik/produkt 97 Transformacja warunkowa w XSLT <xsl:for-each select="cennik/produkt"> <xsl:if test="symbol=' '"> <TR> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:if> </xsl:for-each> <xsl:for-each select="cennik/produkt"> <TR> <xsl:attribute name="bgcolor"> <xsl:choose> <xsl:when test="symbol=' '">green</xsl:when> <xsl:when test="symbol=' '">yellow</xsl:when> <xsl:otherwise>red</xsl:otherwise> </xsl:choose> </xsl:attribute> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> 98 Sortowanie w XSLT 99 Automatyczne numerowanie w XSLT 100 <xsl:for-each select="cennik/produkt"> <xsl:sort select="cena" data-type="number" order="descending"/> <TR> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> <xsl:for-each select="cennik/produkt"> <TR> <TD><xsl:number/></TD> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> <xsl:for-each select="cennik/produkt"> <xsl:sort select="nazwa" lang="pl" data-type="text" order="ascending"/> <xsl:sort select="symbol" data-type="number" order="ascending"/> <TR> <TD><xsl:value-of select="symbol"/></td> <TD><xsl:value-of select="nazwa"/></td> <TD><xsl:value-of select="cena"/></td> </TR> </xsl:for-each> Domyślnie xsl:number zlicza sąsiadujące węzły węzła źródłowego Możliwości zmiany domyślnego zachowania: <xsl:number value="4"/>: wartość wyrażenia <xsl:number level="any"/>: numeracja elementów danego typu w dokumencie <xsl:number... format="i"/>: I-rzymskie, i-rzymskie małe, a/a - litery...
Wprowadzenie do arkuszy stylistycznych XSL i transformacji XSLT
Wprowadzenie do arkuszy stylistycznych XSL i transformacji XSLT Marek Wojciechowski marek@cs.put.poznan.pl http://www.cs.put.poznan.pl/~marek/ Formatowanie dokumentów XML Język XML opisuje strukturę i
Bardziej szczegółowoCSS pozwala przypisać poszczególnym elementom na. grubość, rozmiar czcionki, kolor tła, odległości między
Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania,
Bardziej szczegółowoProgramowanie w Internecie
mariusz@math.uwb.edu.pl http://math.uwb.edu.pl/~mariusz Uniwersytet w Białymstoku 2018/2019 Co to jest Internet? Warunki zaliczenia Zaliczenie na podstawie opracowanej samodzielnie aplikacji WWW Zastosowane
Bardziej szczegółowoDzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Bardziej szczegółowoTechnologie internetowe
Protokół HTTP Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Spis treści Protokół HTTP Adresy zasobów Jak korzystać z telnet? Metody protokołu HTTP Kody odpowiedzi Pola nagłówka HTTP - 2 - Adresy
Bardziej szczegółowoLABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT
LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT 1. Wstęp XML (Extensible Markup Language Rozszerzalny Język Znaczników) to język formalny przeznaczony do reprezentowania danych
Bardziej szczegółowoAplikacje internetowe. Interfejs użytkownika
Aplikacje internetowe Interfejs użytkownika Plan wykładu Formatowanie HTML za pomocą arkuszy stylów CSS Język XML ogólna struktura dokumentów opis struktury za pomocą DTD przestrzenie nazw Język XHTML
Bardziej szczegółowoLABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image
Bardziej szczegółowoHTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych
HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce
Bardziej szczegółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
Bardziej szczegółowoKrótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Bardziej szczegółowoKaskadowe arkusze stylów cz. 2
Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości
Bardziej szczegółowoSystemy internetowe. Wykład 5 Architektura WWW. West Pomeranian University of Technology, Szczecin; Faculty of Computer Science
Systemy internetowe Wykład 5 Architektura WWW Architektura WWW Serwer to program, który: Obsługuje repozytorium dokumentów Udostępnia dokumenty klientom Komunikacja: protokół HTTP Warstwa klienta HTTP
Bardziej szczegółowoŹródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.
Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/
Bardziej szczegółowoza pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
Bardziej szczegółowoBox model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
Bardziej szczegółowokaskadowe arkusze stylów
Autor: Marek Buła bulkas@poczta.onet.pl CSS kaskadowe arkusze stylów CASCADING STYLE SHEETS Validator (X)HTML Validator CSS CSS CSS level 1 (1996, 1999) contains properties for fonts, margins, colors,
Bardziej szczegółowoWprowadzenie do Internetu zajęcia 3
Wprowadzenie do Internetu zajęcia 3 Zakres tematyczny zajęć CSS arkusz stylów. Formatowanie tekstu CSS w przykładach. CSS arkusz stylów Wprowadzenie Język HTML, XHTML został wzbogacony o potężne narzędzie
Bardziej szczegółowoModel blokowy. Model blokowy w CSS
Model blokowy Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania
Bardziej szczegółowoCSS - 2. Właściwości tekstu, czcionek
CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»
Bardziej szczegółowoHTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Bardziej szczegółowoBezbolesny wstęp do CSS
CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i
Bardziej szczegółowoCSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Bardziej szczegółowoSTRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
Bardziej szczegółowoTworzenie stylów w HTML
Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron
Bardziej szczegółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 4 CSS mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie konceptu stylów tworzenie różnych typów reguł stylów Style służą do zmiany wyglądu elementów
Bardziej szczegółowoJęzyki programowania wysokiego poziomu WWW
Języki programowania wysokiego poziomu WWW Zawartość Protokół HTTP Języki HTML i XHTML Struktura dokumentu html: DTD i rodzaje html; xhtml Nagłówek html - kodowanie znaków, język Ciało html Sposób formatowania
Bardziej szczegółowoYoung Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Bardziej szczegółowop { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Bardziej szczegółowoHTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Bardziej szczegółowoTabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Bardziej szczegółowoFormat HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Bardziej szczegółowoWybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
Bardziej szczegółowoDanuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Bardziej szczegółowoInterfejs użytkownika I
Interfejs użytkownika I Wykład prowadzi: Marek Wojciechowski Interfejs użytkownika I 1 Plan wykładu Formatowanie HTML za pomocą arkuszy stylów CSS Język XML ogólna struktura dokumentów opis struktury za
Bardziej szczegółowoZnaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
Bardziej szczegółowoPrezentacja dokumentów XML
Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Arkusze stylu Rozdzielenie treści od wygladu Przypisanie stylu do dokumentu CSS
Bardziej szczegółowoProjektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Bardziej szczegółowoPrezentacja dokumentów XML
Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Patryk Czarnik (MIMUW) 06 Prezentacja XML 2007/08 1 / 33 Plan 1 Arkusze stylu
Bardziej szczegółowoTworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
Bardziej szczegółowoPrezentacja i transformacja
Prezentacja i transformacja Bartłomiej Świercz Katedra Mikroelektroniki i Technik Informatycznych Łódź, 21 października 2005 roku 1 Prezentacja Przykładowa aplikacja CSS- Cascading Style Sheets CSS2aXML
Bardziej szczegółowoHyper Text Markup Language
Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na
Bardziej szczegółowoTworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 3 Formularze Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML
Bardziej szczegółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoZdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
Bardziej szczegółowoSpis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...
Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...
Bardziej szczegółowopawel.rajba@gmail.com, http://itcourses.eu/ Adresy zasobów Rodzaje zawartości Negocjacja treści Komunikacja Buforowanie HTTP Request/Response Nagłówki Bezstanowość Cookies Narzędzia URL, http://www.ietf.org/rfc/rfc3986.txt
Bardziej szczegółowoĆwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
Bardziej szczegółowoProtokół HTTP 1.1 *) Wprowadzenie. Jarek Durak. rfc2616 źródło www.w3.org 1999
Protokół HTTP 1.1 *) Wprowadzenie Jarek Durak * rfc2616 źródło www.w3.org 1999 HTTP Hypertext Transfer Protocol Protokół transmisji hipertekstu został zaprojektowany do komunikacji serwera WW z klientem
Bardziej szczegółowoTworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)
Tworzenie witryn internetowych PHP/Java (mgr inż. Marek Downar) Rodzaje zawartości Zawartość statyczna Treść statyczna (np. nagłówek, stopka) Layout, pliki multimedialne, obrazki, elementy typograficzne,
Bardziej szczegółowoPSI Protokół HTTP + wstęp do przedmiotu. Kraków, 10 październik 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ
PSI Protokół HTTP + wstęp do przedmiotu Kraków, 10 październik 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ Co będzie na zajęciach Całość ćwiczeń podzielona została na trzy główne bloki: Blok
Bardziej szczegółowoJęzyki programowania wysokiego poziomu. HTML cz.2.
Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)
Bardziej szczegółowoElementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Bardziej szczegółowoWykład 2 CSS. Michał Drabik
Wykład 2 CSS Michał Drabik XHTML CSS Struktura strony internetowej Prezentacja strony internetowej CSS = Cascading Style Sheets Kaskadowe arkusze stylów style umieszczone są według hierarchi, ustalającej
Bardziej szczegółowoProtokół HTTP. 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX.
Protokół HTTP 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX. 1 Usługi WWW WWW (World Wide Web) jest najpopularniejszym sposobem udostępniania
Bardziej szczegółowoI. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Bardziej szczegółowoProgramowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Bardziej szczegółowoTworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)
Tworzenie witryn internetowych PHP/Java (mgr inż. Marek Downar) Hypertext Xanadu Project (Ted Nelson) propozycja prezentacji dokumentów pozwalającej czytelnikowi dokonywać wyboru Otwarte, płynne oraz ewoluujące
Bardziej szczegółowoWprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
Bardziej szczegółowoKASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)
Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego
Bardziej szczegółowoCzcionki. Rodzina czcionki [font-family]
Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana
Bardziej szczegółowoJęzyk XSLT. UEK w Krakowie Janusz Stal & Grażyna Paliwoda-Pękosz. UEK w Krakowie Janusz Stal & Grażyna Paliwoda-Pękosz
Język XSLT Po zrealizowaniu materiału student będzie w stanie Dokonać przekształcenia zawartości dokumentu XML do formatu HTML oraz TXT Realizować przetwarzanie warunkowe dokumentu XML Formatować wartości
Bardziej szczegółowoPodstawy (X)HTML i CSS
Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z
Bardziej szczegółowoABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Bardziej szczegółowoAplikacje WWW Wprowadzenie
Aplikacje WWW Wprowadzenie Beata Pańczyk na podstawie http://www.e-informatyka.edu.pl/ http://wazniak.mimuw.edu.pl/index.php?title=aplikacje_www Plan wykładu Składniki architektury WWW: klient HTTP, serwer
Bardziej szczegółowoCSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Bardziej szczegółowoTworzenie Stron Internetowych. odcinek 6
Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą
Bardziej szczegółowoDokumentacja smsapi wersja 1.4
Dokumentacja smsapi wersja 1.4 1. Wprowadzenie Platforma smsapi została skierowana do użytkowników chcących rozbudować swoje aplikacje o system wysyłania smsów. Aplikacja ta w prosty sposób umożliwia integrację
Bardziej szczegółowoReferat z przedmiotu Technologie Internetowe SPIS TREŚCI
SPIS TREŚCI 1.Dwie metody przekazu danych do serwera 2 2.Metoda GET przykład 3 3.Metoda POST przykład 4 4.Kiedy GET a kiedy POST 5 5.Szablony po co je stosować 7 6.Realizacja szablonu własną funkcją 8
Bardziej szczegółowoWprowadzenie do technologii XML
Katedra Mikroelektroniki i Technik Informatycznych Łódź, 6 października 2005 roku 1 Informacje organizacyjne Omówienie przedmiotu 2 vs HTML Struktura 3 Struktura Informacje o przedmiocie Informacje organizacyjne
Bardziej szczegółowoAplikacje internetowe
Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.
Bardziej szczegółowoWybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej Dr inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki 2017 Globalna sieć Internet Koncepcja sieci globalnej Usługi w sieci Internet
Bardziej szczegółowoKaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
Bardziej szczegółowoURL: http://www.ecdl.pl
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo
Bardziej szczegółowoECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0
ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie
Bardziej szczegółowoPlan dzisiejszego wykładu. Narzędzia informatyczne w językoznawstwie. XML - Definicja. Zalety XML
Plan dzisiejszego wykładu Narzędzia informatyczne w językoznawstwie Perl - Wprowadzenie do XML Marcin Junczys-Dowmunt junczys@amu.edu.pl Zakład Logiki Stosowanej http://www.logic.amu.edu.pl 16. kwietnia
Bardziej szczegółowowww.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Bardziej szczegółowoPrzedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
Bardziej szczegółowosystemów intra- i internetowych Platformy softwarowe dla rozwoju Architektura Internetu (2) Plan prezentacji: Architektura Internetu (1)
Maciej Zakrzewicz Platformy softwarowe dla rozwoju systemów intra- i internetowych Architektura Internetu (1) Internet jest zbiorem komputerów podłączonych do wspólnej, ogólnoświatowej sieci komputerowej
Bardziej szczegółowoXHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.
XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).
Bardziej szczegółowoArkusze stylów CSS Cascading Style Sheets
Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację
Bardziej szczegółowoWidżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Bardziej szczegółowoMinisterstwo Finansów
Ministerstwo Finansów Departament Informatyzacji Specyfikacja Wejścia-Wyjścia Wersja 1.0 Warszawa, 16.02.2017 r. Copyright (c) 2017 Ministerstwo Finansów MINISTERSTWO FINANSÓW, DEPARTAMENT INFORMATYZACJI
Bardziej szczegółowoPrezentacja dokumentów XML
Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2011/12 Patryk Czarnik 06 Prezentacja XML 2011/12 1 / 64 1 Arkusze stylu Rozdzielenie
Bardziej szczegółowoXML extensible Markup Language 3
XML extensible Markup Language 3 XSL transformations (XSLT) XSLT (ang. extensible Stylesheet Language Transformations) jest opartym na XML językiem transformacji dokumentów XML XSLT umożliwia przetłumaczenie
Bardziej szczegółowoProgramowanie w Internecie
Programowanie w Internecie Paweł Kasprowski pawel@kasprowski.pl Aplikacja internetowa Definicja: Aplikacja uruchamiana na serwerze WWW komunikująca się z użytkownikiem za pomocą przeglądarki internetowej
Bardziej szczegółowoXML materiały dydaktyczne - Kurs Podstawowy XSL - wprowadzenie. XSL warstwa przekształcania (XSLT) oraz prezentacji informacji (XSL FO).
XSL (XSLT) Transformacja dokumentów XML. XML warstwa przechowująca informacje XSL warstwa przekształcania (XSLT) oraz prezentacji informacji (XSL FO). Transformacja XSLT utworzenie nowego dokumentu wynikowego
Bardziej szczegółowoSpecyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
Bardziej szczegółowoOczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
Bardziej szczegółowoLaboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
Bardziej szczegółowoHosting WWW Bezpieczeństwo hostingu WWW. Dr Michał Tanaś (http://www.amu.edu.pl/~mtanas)
Hosting WWW Bezpieczeństwo hostingu WWW Dr Michał Tanaś (http://www.amu.edu.pl/~mtanas) Protokoły WWW Protokoły transportowe HTTP HyperText Transfer Protocol HTTPS HTTP Secured Format adresów WWW URI Uniform
Bardziej szczegółowoTechnologie internetowe
Technologie internetowe Cascading Style Sheets Paweł Rajba pawel@ii.uni.wroc.pl http://www.kursy24.eu/ Zawartość modułu Wprowadzenie Wstawienie arkusza CSS, Reguły CSS Drzewo dokumentu Grupowanie, jednostki
Bardziej szczegółowoPROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści
Bardziej szczegółowoĆw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość
Bardziej szczegółowoProgramowanie internetowe
Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML
Bardziej szczegółowoOdsyłacze. Style nagłówkowe
Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami
Bardziej szczegółowoobecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) faktycznie wymagają
Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się
Bardziej szczegółowo