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 wyświetlania w przeglądarce. Ćwiczenie I. Zastosowanie CSS na stronie HTML. 1. Za pomocą dowolnego edytora utwórz plik css1.html. i wpisz do niego następującą zawartość: <!DOCTYPE html> <html> <head> </head> <body> <h1>przykład CSS/HTML!</h1> <h2>tu wpisz swoje imię.</h2> <p>to jest Paragraf.</p> <a href="http://www.agh.edu.pl">to jest link</a> </body> </html> 2. Otwórz plik w przeglądarce IE/Chrome. Zanotuj co zostało w niej wyświetlone. 3. Pomiędzy znaczniki <head> i </head> wpisz następujący fragment: <style> Bodybackground-color:#d0e4fe; h1color:red;text-align:center; h2color:orange;text-align:left; pfont-family:"times New Roman";font-size:20px; afont-family:"arial";font-size:30px; </style> 4. Otwórz plik w przeglądarce. Zanotuj co zostało w niej wyświetlone.
Ćwiczenie II. Modyfikacja sposobu wyświetlania zawartości pliku XML w przeglądarce. 1. Za pomocą edytora utwórz plik katalog.xml i wpisz do niego podaną poniżej zawartość. Wstaw jeszcze dwa dodatkowe opisy cd: <?xml version="1.0" encoding="iso-8859-1"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE> Msza h-moll BWV 232</TITLE> <ARTIST> George Frideric Handel</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>DECCA</COMPANY> <PRICE>13.30</PRICE> <YEAR>1995</YEAR> </CD>... </CATALOG> 2. Zwróć uwagę na sposób wyświetlania. 3. Dopisz poniżej instrukcji sterującej kolejną: <?xml-stylesheet type="text/css" href= katalog.css"?> 4. Zwróć uwagę na sposób wyświetlania. 5. Utwórz za pomocą edytora plik katalog.css zawierający poniżej podaną zawartość: zawartością: CATALOG background-color: #ffffff; width: 100%; CD display: block; margin-bottom: 30pt; margin-left: 0;
TITLE color: #FF0000; font-size: 20pt; background-color:#e0ffff; ARTIST color: #0000FF; font-size: 20pt; COUNTRY,PRICE,YEAR,COMPANY display: block; color: #000000; margin-left: 20pt; 6. Zwróć uwagę na sposób wyświetlania. 7. Zmodyfikuj sposób wyświetlania elementu CATALOG, zmieniając po kolei następujące elementy: a. Zmień kolor tła na jakim wyświetlana jest kolekcja na: #b0c4de; b. Zmień kolor tła na jakim wyświetlana jest kolekcja na: rgb(255,0,0); c. Zmień kolor tła na jakim wyświetlana jest kolekcja na: blue; d. Zmień kolor tła na jakim wyświetlana jest kolekcja na z powrotem na biały : #ffffff; 8. Zmodyfikuj sposób wyświetlania COUNTRY,PRICE,YEAR,COMPANY wpisując dodatkowo następującą instrukcję w odpowiednim bloku sterującym: text-transform:lowercase; 9. Zmodyfikuj sposób wyświetlania elementów CATALOG wpisując dodatkowo następującą instrukcję w odpowiednim bloku sterującym: padding:10px; border:5px solid gray; margin:50px;
10. Zmodyfikuj sposób wyświetlania elementów COUNTRY,PRICE,YEAR,COMPANY wpisując dodatkowo następującą instrukcję w odpowiednim bloku sterującym: padding:10px; border:5px solid black; margin:10px; Uwagi: CSS - Cascading Style Sheets, kaskadowe arkusze stylów to język służący do opisu formy prezentacji (wyświetlania) stron WWW. Standard CSS używany jest z HTML i obsługiwany jest przez liczne narzędzia. Za jego pomocą można określić formatowanie poszczególnych elementów, stworzyć klasy stylów, definiować czcionki, wybierać kolory, a nawet określać rozmieszczenie elementów na stronie. CSS umożliwia jedynie formatowanie elementów i zmianę ich położenia. Jest to słabsze narzędzie od XSL do formatowania XML. CSS Box Model: Margin - Czyści obszar wokół granicy tekstu. Nie ma koloru tła i jest całkowicie przezroczysty. Border obszar graniczny obejmujący Padding i Content. Kolor zależy od koloru tła okna. Padding pusty obszar wokół treści. Padding ma kolor tła boxu. Content zawiera tekst lub/i obrazki. display zmienia sposób wyświetlania tekstu lub zdjęć (block/inline).
Ćwiczenie III. Walidacja zawartości pliku w oparciu o DTD 1. Za pomocą edytora utwórz plik dtd.xml i wpisz do niego podaną poniżej zawartość. <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE DOKUMENT [ <!ELEMENT DOKUMENT (POZDROWIENIA, KOMUNIKAT)> ]> <DOKUMENT> </DOKUMENT> 2. 3. Otwórz stronę http://www.xmlvalidation.com/. Skopiuj wpisany tekst do bufora i wklej do pola edycyjnego znajdującego się na stronie. Po skopiowaniu naciśnij znajdujący się na stronie przycisk Validate. Zobacz co pojawiło się w oknie. 4. Zmodyfikuj zawartość pliku dtd.xml dodając jeszcze jeden element POZDROWIENIA i KOMUNIKAT jak poniżej: <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE DOKUMENT [ <!ELEMENT DOKUMENT (POZDROWIENIA, KOMUNIKAT)> ]> <DOKUMENT> </DOKUMENT>
5. Otwórz stronę http://www.xmlvalidation.com/. Skopiuj cały tekst z pliku do bufora, a następnie wklej do pola edycyjnego znajdującego się na stronie. Po skopiowaniu naciśnij przycisk Validate. Zobacz co pojawiło się w oknie po walidacji. 6. Naciśnij na stronie link, aby powrócić do poprzedniego tekstu w oknie edycyjnym strony. 7. Zmodyfikuj linię <!ELEMENT (DOKUMENT (POZDROWIENIA, KOMUNIKAT)*> dopisując gwiazdkę (tak jak tu zaznaczono ją tu na czerwono). Naciśnij przycisk Validate. Zobacz co pojawiło się w oknie po walidacji. 8. Naciśnij na stronie link, aby powrócić do poprzedniego tekstu w oknie edycyjnym strony. 9. Zmodyfikuj linię <!ELEMENT DOKUMENT (POZDROWIENIA, KOMUNIKAT)*> do następującej postaci: <!ELEMENT DOKUMENT (POZDROWIENIA, (KOMUNIKAT TEXT))*> oraz zmieniając drugi element KOMUNIKAT na TEXT i dodając deklarację elementu TEXT <!ELEMENT TEXT (#PCDATA)> Otrzymujemy ostatecznie: <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE DOKUMENT [ <!ELEMENT DOKUMENT (POZDROWIENIA, (KOMUNIKAT TEXT))*> <!ELEMENT TEXT (#PCDATA)> ]> <DOKUMENT> <TEXT> </TEXT> </DOKUMENT> 10. Naciśnij przycisk Validate. Zobacz co pojawiło się w oknie wyniku po walidacji.
W powyższym przykładzie: - elementem głównym jest DOKUMENT <!DOCTYPE DOKUMENT... - wewnątrz elementu DOKUMENT znajdują się elementy POZDROWIENIA KOMUNIKAT <!ELEMENT DOKUMENT (POZDROWIENIA, KOMUNIKAT)> - Zawierają one jedynie tekst Uwagi DTD (Document Type Definition) dokumentu określa jego prawidłową składnię. DTD nie jest elementem XML, a deklaracje DTD nie są zapisane w XML, ale w oparciu o odrębny język. DTD mogą być przechowywane w: osobnym pliku, wtedy podajemy w dokumencie, gdzie go szukać, w samym dokumencie, w elemencie <!DOCTYPE> Składnia <!ELEMENT elementname (elementcontent)> - deklaracja element z zawartością. <!ELEMENT elementname (#PCDATA)> - element zawiera tekst. <!ELEMENT elementname (child1,child2,...)> - element zawiera inne elemety. <!ELEMENT elementname (childname)> - element childname występuje tylko raz. <!ELEMENT elementname (childname #)> - element childname występuje zero lub więcej razy (#=*), zero lub jeden raz (#=?), minimum jeden raz (#=+). <!ELEMENT elementname (NAME TEXT #PCDATA)> - jeden z elementów.