Technologie internetowe Serwis WWW język HTML http://www.ftj.agh.edu.pl/~antek
INTERNET kilka dat Rok 1968 - sieć ARPANET (Advanced Research Project Network), Uniwersytet Kalifornijski w Los Angeles, Instytut Badawczy Stanforda, filia Uniwersytetu Kalifornijskiego w Santa Barbara, Uniwersytet Stanu Utah - protokół sterowania siecią NCP (Network Control Protocol) - zdalne logowanie, drukowanie i przesyłanie plików Rok 1973 - protokół sterowania transmisją TCP (Transmision Control Protocol) Narodowa Fundacja Nauki NFS (National Science Foundaction) - powstanie sieci NFSnet łączącej ośrodki uniwersyteckie i rządowe - początkowo prędkość transmisji 56 kb/s, następnie łącza T-1 (1,544 Mb/s) aż po łącza T- 3 (43 Mb/s) Początek lat 80-tych - protokół TCP/IP Rok 1990 - zmiana nazwy sieci ARPANET na Internet Rok 1995 - rozwiązanie NFS-net, pierwsi dostawcy usług internetowych ISP (Internet Service Provider)
Narodziny serwisu WWW 1991 Tim Berners-Lee (CERN) nowy protokół internetowy, HTTP (Hypertext Transfer Protocol), określający dialog serwer-klient na temat dostępności określonego zasobu. nowy sposób identyfikowania zasobów, czyli URL (Universal Resource Locator), łączący identyfikację serwera, sposobu dostępu do zasobu w ramach serwera oraz protokół internetowy, za pomocą którego zasób jest osiągalny. nowy typ dokumentów (język HTML) dostępnych przez HTTP i wykorzystujących URL do realizacji hipertekstu - systemu odsyłaczy między takimi dokumentami. Tim Berners-Lee dyrektor Konsorcjum World Wide Web http://www.zakon.org/robert/internet/timeline/
Protokół HTTP 2 http://newton.ftj.agh.edu.pl/~antek/test.html 1 Serwer WWW test.html 2 Plik: test.html Protokół używany do przesyłania danych pomiędzy klientem a serwerem w sieci WWW Oparty na protokole TCP, używa standardowo portu 80 Wersja 1.0 zdefiniowana w dokumencie RFC 1945 a wersja 1.1 w dokumencie RFC 2616 Protokół transportowy TCP Klient inicjuje połączenie TCP do serwera, port 80 Serwer akceptuje połączenie z klientem Następuje wymiana informacji HTTP pomiędzy klientem a serwerem Serwer zamyka połączenie TCP Protokół HTTP jest bezstanowy Serwer nie posiada informacji o kliencie po zamknięciu połączenia TCP
Wzrost liczby serwerów w sieci Internet http://www.zakon.org/robert/internet/timeline/
Konsorcjum W3C Rok powstania - 1994 Założyciel - Tim Berners-Lee Lokalizacja - MIT Zakres działalności: standaryzacja rozwiązań wspierających organizację dostępu do zasobów Internetu. Zrzesza około 450 organizacji. Finansowane głównie przez członków, w mniejszej części ze środków publicznych. Specyfikacje W3C noszą nazwę rekomendacji (recommendations) i są publicznie dostępne. Główne zasady projektowe dla technologii Web'u: współdziałanie (interoperatibility); zapewnienie możliwości ewolucji: modularność, prostota, rozszerzalność; decentralizacja.
Konsorcjum W3C Working Draft: Praca w toku; publikację WD zatwierdza kierownictwo konsorcjum, ale zawartość może być dopiero podstawą dla dalszych dyskusji, tj. fakt opublikowania nie oznacza pełnej zgody co do treści ani stabilności rozwiązania. Last Call Working Draft: Specyfikacja spełnia wszystkie sformułowane wymogi, albo ewentualnie dokumentuje niezrealizowane zagadnienia. Formalnie odnosi się do wszystkich zgłoszonych wcześniej uwag i problemów. Stanowi publiczny raport techniczny, mogący być podstawą dalszych konsultacji. Candidate Recommendation: Ustalone współzależności z innymi specyfikacjami. Oczekiwanie na doświadczenia implementacyjne spoza grupy roboczej. Proposed Recommendation: Istnieją doświadczenia z implementacją specyfikacji. Jest przedmiotem przeglądu przez komitet doradczy. W3C Recommendation: Postać finalna. Raport techniczny spełniający wymagania, będący wynikiem uzgodnień. Uznany za nadający się do szerokiego zastosowania i realizujący misję W3C.
Przykłady specyfikacji W3C HTML 4.01 Specification status Rekomendacji 24 grudzień 1999 http://www.w3.org/tr/html4/ XHTML 1.1 - Module-based XHTML status Rekomendacji 31 maj 2001 http://www.w3.org/tr/xhtml11/ Standard CSS Level 2 - status Rekomendacji w maju 1998 http://www.w3.org/tr/rec-css2/ Standard CSS Level 1 status Rekomendacji w 1996 http://www.w3.org/tr/rec-css1-961217.html
Kilka dat związanych z rozwojem języka HTML 1991 idea stworzenia języka HTML 1994 powstanie konsorcjum W3C 1995 HTML 2.0 i CSS 1.0 (pierwsze standardy) 1998 język XML 1999 HTML 4.1 zamknięcie prac nad rozwojem języka HTML 2001 XHTML 1.1, projekt nowego języka hipertekstowego XHTML 2.0 2004 powstanie grupy: Web Hypertext Application Technology Working Group 2007 W3C otwiera projekt HTML 5.0 (XHTML 5.0) 2009 XHTML 2.0 - zarzucenie prac nad standardem 2010 HTML 5 - Working Draft 18 February 2010 (zakończenie prac koniec 2022) 2014 W3C Recommendation 28 October 2014
Standardy języka HTML wersje 2-4.1 Język umożliwiający tworzenie stron internetowych. Pozwala opisać strukturę informacji zawartej w dokumencie nadając znaczenie poszczególnym fragmentom tekstu (formułuje linki, nagłówki, listy, itd.) Początkowy brak dokumentów standaryzujących język doprowadził do rozbieżności pomiędzy zestawami elementów dostarczanymi przez różnych dostawców przeglądarek, w szczególności umożliwiło pojawienie się elementów opisujących oprócz struktury dokumentu również jego końcową formę graficzną. Dokumenty HTML nie są walidowane przez przeglądarki co skutkuje różną interpretacją dokumentów w momencie pojawienia się w nich błędów, brak jest standardów opisujących reakcje przeglądarek na pojawiające się błędy. Wersja HTML 4.0 jest pierwszym międzynarodowym standardem zarekomendowanym przez organizację W3C w roku 2000, rok później pojawiła się wersja 4.01. Specyfikacja 4.01 definiuje następujące deklaracje dokumentów HTML: strict.dtd, loose.dtd, frameset.dtd.
Arkusze styli CSS CSS (Cascading Style Sheets) język opisu formy prezentacji opracowany w roku 1996, w roku 1998 opracowano wersję CSS 2. Obecnie trwają prace nad wersją 3. CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS umożliwia renderowaniu strony WWW w zależności od obsługiwanego medium - ekran, palmtop, dokument w druku czy czytnik ekranowy. Początkowe problemy z implementacyjną styli w przeglądarkach spowodowały znaczne opóźnienie powszechnego przyjęcia tego standardu jako opisu formy graficznej dokumentów WWW. Różna interpretacja arkuszy CSS przez przeglądarki powoduje konieczność tworzenia przez programistów często kilku wersji dla jednego dokumentu HTML. CSS oparty jest o reguły według których tworzona jest forma prezentacyjna dokumentu. Reguły CSS można dostarczyć w arkuszu zewnętrznym, wewnętrznym lub na poziomie elementów HTML. Priorytet stylów ustalany jest hierarchicznie. Pierwszeństwo mają reguły zdefiniowane bliżej formatowanego elementu.
Język XML Technologia XML (1998) - przemyślana adaptacja języka SGML dla potrzeb uniwersalnego opisu danych (także WWW): XML będzie wspierać różne aplikacje, XML będzie kompatybilny z SGML, pisanie programów do przetwarzania dokumentów XML będzie proste, liczba cech opcjonalnych będzie zredukowana do minimum. Dokument XML Parser Program przetwarzający dokument XML Dokument poprawny składniowo Dalsze przetwarzanie Dokument niepoprawny składniowo 1. Dokument XML musi być poprawny składniowo (ang. well-formed). 2. Dokument XML może być poprawny strukturalnie (ang. valid XML Schema ). 3. Treść dokumentu XML jest oddzielona od jego sposobu prezentacji (XSLT).
Nowy standard język HTML 5.0 Dlaczego nie XHTML? Wolny rozwój HTML (XHTML 1.0 i HTML 4.01 to ten sam język) Niekompatybilność XHTML 2.0 Brak standardu na teraz XHTML się nie przyjął Ewolucja, a nie rewolucja Co znajdziemy w HTML 5? Ustandaryzowana obsługa błędów w kodzie Modyfikacje w celu ułatwienia pisania Nowe znaczniki i atrybuty Usunięcie niektórych elementów Przywrócenie niektórych atrybutów Zgodność w tył
Serwis WWW Serwis WWW od strony informatycznej zbiór informacji udostępniony poprzez sieć Internet informacja przygotowana w dokumentach statycznych HTML aplikacje uruchomiane po stronie klienta JavaScript czy Flash aplikacje uruchamiane przy pomocy technologii RIA Co oczekujemy od dzisiejszych serwisów WWW? udostępniania dokumentów tekstowych prezentacji grafiki rastrowej czy wektorowej, animacji dostarczania treści multimedialnej możliwości uruchamiania aplikacji 1991 1995 1996 2001 2005 2010 WWW JavaScript Flash RIA AJAX HTML 5
Rozwój serwisu WWW Czas Strony statyczne Strony dynamiczne Strukturalne serwisy WWW Serwisy czasu rzeczywistego
Rodzaje dokumentów publikowanych w serwisie WWW Dokumenty statyczne - zawartość dokumentu określona jest w momencie tworzenia przez autora. Dokumenty dynamiczne - brak predefiniowanej statycznej postaci, dokument jest generowany na nowo w odpowiedzi na każde wezwanie. Dokumenty aktywne - dokumenty zawierają w sobie kopię programu uruchamialnego lokalnie w środowisku przeglądarki.
Statyczne dokumenty WWW Zalety (+) i wady (-): + prostota, łatwość implementacji; słaba elastyczność. Wyświetlany dokument jest napisany w HTML, XHTML lub XML.
Dynamiczne dokumenty WWW Zalety (+) i wady (-): + możliwość prezentowania aktualizowanej często informacji; + zapewnienie interakcyjności bez dodatkowych wymogów dla oprogramowania przeglądarki (z punktu widzenia jej mechanizmów strony statyczne nieodróżnialne od dynamicznych); po pobraniu takiej strony ulec ona może dezaktualizacji; większe wymagania dla wydajności łącza i serwera; większy narzut czasowy (konieczne generowanie strony); wyższe koszty opracowania i przetestowania. Wyświetlany dokument tworzony jest w PHP, JSP lub ASP.
Aktywne dokumenty WWW Zalety (+) i wady (-): + może sięgać do źródeł na serwerach celem bieżącego aktualizowania informacji; potencjalne luki w bezpieczeństwie; dodatkowe koszty tworzenia i działania; wymaga bardziej zaawansowanego, zgodnego oprogramowania przeglądarki i odpowiednich zasobów po stronie klienta. Wyświetlany dokument wykorzystuje elementy języka JavaScript.
Interaktywność w serwisie WWW strony aktywne Interaktywność uruchamiana jest po stronie przeglądarki. JavaScript - jest językiem interpretowanym. Oznacza to, że przeglądarka każdorazowo pobiera i wykonuje polecenia napisane w tym języku wraz z kodami HTML strony. JavaScript umożliwia wykonanie pewnej instrukcji w odpowiedzi na określoną reakcję użytkownika. Aplety Javy - krótkie programy napisane w języku Java. Aplety Java znajdują się w dokumentach HTML i są w stosownym momencie uruchamiane w oknie przeglądarki internetowej. Jednak, aby mogły właściwie funkcjonować, przeglądarka musi włączoną obsługę wirtualnej maszyny Javy (JVM Java Virtual Machine).
Interaktywność w serwisie WWW strony dynamiczne Interaktywność uruchamiana jest po stronie serwera. Protokół CGI (Common Gateway Interface) - definiuje standard komunikacji między serwerem WWW a zewnętrznymi programami. Programy napisane w dowolnym języku (np. C) wykorzystujące protokół CGI nazywamy programami CGI, natomiast w języku interpretowanym (np. Perl, Visual Basic) - skryptami CGI. ASP (Active Serwer Pages) - technologia opracowana przez firmę Microsoft. PHP (Personal Home Page) - nowoczesny skryptowy język programowania, wykonywany po stronie serwera umożliwiający tworzenie dynamicznym witryn WWW.
Struktura dokumentu HTML <!doctype html > Typ dokumentu <html> <head> Nagłówek dokumentu (tu zawartość nagłówka HTML) </head> <body> Zawartość dokumentu (tu zawartość dokumentu właściwego) </body> </html>
Kontrola poprawności dokumentu HTML http://validator.w3.org/
Wymagane elementy w dokumencie HTML <!DOCTYPE HTML > <html> <head> <title>przykład dokumentu HTML</title> </head> <body> <p>pierwszy paragraf</p> </body> </html>
Budowa elementu w dokumencie HTML Element Znacznik otwierający Znacznik zamykający <h1 align= left > Przykład </h1> Nazwa elementu Atrybut: nazwa i wartość Tekst wyświetlany
Element w dokumencie HTML Każdy element powinien zawierać znacznik otwierający i zamykający Element pusty ( nie zawierający tekstu wewnętrznego ) zamykamy wewnątrz lub dodajemy element zamykający <br> - nowa linia <br /> lub <br></br> Elementy nie mogą się krzyżować zagnieżdżenie elementów Element otwarty wewnątrz innego elementu należy najpierw zamknąć a dopiero później zamykamy element nadrzędny. Poprawnie <a> <b> </b> </a> Niepoprawnie <a> <b> </a> </b>
Znaki specjalne w dokumentach WWW Predefiniowane encje ogólne < zastępuje znak < > zastępuje znak > & zastępuje znak & ' zastępuje znak apostrofu ' " zastepuje znak cudzysłowu "
Encje i referencje do znaków Wstawianie niestandardowych znaków: Używamy & do rozpoczęcia opisu znaku a kończymy znakiem ;. Pomiędzy znakami umieszczamy nazwę znaku lub jego kod. Przykłady : ( ) daje symbol ( ) daje pusty znak http://www.w3.org/markup/articles XHTML Character References
Język HTML 5.0 <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <!-- HTML 5 --> "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>przykładowy dokument</title> </head> <body> <h1>prosta strona</h1> <p>to jest <a href="demo.html">demo</a> przykład.</p> </body> </html> <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- XHTML 5 --> <head> <?xml version="1.0" encoding="iso-8859-2"?> <title>przykładowy dokument</title> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" </head> <body> "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <p>przykładowy paragraf</p> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" > </body> </html>
Znaczniki semantyczne w HTML 5 HEADER ARTICLE SECTION NAV ASIDE <header /> <nav /> <article /> <section /> <aside /> <footer /> FOOTER
Grafika w dokumencie HTML 5 Element <canvas> jest nowym elementem języka HTML, który może być zastosowany do rysowania grafiki przy użyciu skryptów (zazwyczaj JavaScript). Przykładem zastosowania elementu <canvas> może być jego użycie do rysowania wykresów, tworzenia kompozycji fotografii lub do tworzenia animacji. WebGL eksperymentalne API udostępniające interfejs grafiki 3D. Bazuje na OpenGL ES 2.0. Korzysta z elementu <canvas>. <html> <head> <script type="application/x-javascript"> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); } </script> </head> <body onload="draw();"> <div><canvas id="canvas" width="150" height="150"></canvas></div> </body> </html>
Video w dokumencie HTML 5 Wiele formatów Łączenie z innymi elementami Akceleracja sprzętowa (dekodowanie GPU) 9 6.0.1 13.0.782.218 11.50 5.1 H.264 TAK NIE TAK NIE TAK VP8 (WebM) TAK TAK TAK TAK NIE
Audio w dokumencie HTML 5 Wsparcie standardów rynkowych MP3 ACC Atrybuty ( src, autoplay, controls, preload ) 9 5 12 11.50 5 MP3 TAK NIE TAK NIE NIE ACC TAK NIE TAK NIE NIE WAV NIE TAK TAK TAK TAK
HTML 5 geolocation if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; map.setcenter(new GLatLng(lat, lng), 13); map.addoverlay(new GMarker(new GLatLng(lat, lng))); }); } GPS Geolocation Google, Gears API, Geolocation API. W3C, Geolocation API Specification, Editor's Draft 10 February 2010. Mozilla, Using geolocation. Mozilla, Monitoring WiFi access points.
Kaskadowe arkusze styli CSS Interpretacja wizualna dokumentów HTML opiera się na osobnym zestawie danych, zwanych arkuszem stylów, które przypisują elementom strukturalnym cechy typograficzne. Specyfikacja HTML określa tylko ogólny sens typograficzny elementów (np. tabela, wyliczenie, tytuł), natomiast każda przeglądarka ma "wbudowany" arkusz stylów precyzujący wartości typograficzne elementów: położenie, marginesy, odstępy, kolory, ramki, podkreślenia itd. stosownie do znaczenia danego elementu i jego atrybutów. Jest on wbudowany w tym sensie, że zwykle nie jest dostępny w formie dokumentu z definicjami.
Kaskadowe arkusze styli w nagłówku <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Przyklad 1</TITLE> <STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD> <BODY> <H1>Przyklad 1</H1> <P>To jest tekst na naszej stronie.</p> </BODY> </HTML>
Kaskadowe arkusze styli w pliku <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Strona testowa</title> <LINK rel="stylesheet" href="test.css" type="text/css" media=screen> </HEAD> <BODY> <H1>Przyklad 1</H1> <P>To jest tekst na naszej stronie.</p> </BODY> </HTML>
Kaskadowe arkusze styli przy elemencie formatowanym <!DOCTYPE HTML > <HTML> <HEAD> <TITLE>Strona testowa</title> <link rel="stylesheet" href="test.css" type="text/css" media="screen" > </HEAD> <BODY> <H1>Przyklad 1</H1> <P style="color:red; font-size:16px;" > To jest tekst na naszej stronie. </P> </BODY> </HTML>
Kontrola poprawności kaskadowych arkuszy styli CSS http://jigsaw.w3.org/css-validator/
Składnia reguły CSS selektor { właściwość1 : wartość1 ; } właściwość2 : wartość2 ;
Zbiór zasad styli CSS Zbiór reguł składa się z: selektora wszystko do wystąpienia nawiasu { h1, h2 { color: blue } jeśli jest błąd w selektorze, reszta jest ignorowana bloku deklaracji {... } który zawiera listę zero lub więcej deklaracji po średnikach h1, h2 { color: blue; font-style: 12pt }
Selektory - elementy * dopasowuje każdy element bez wyjątku E dopasowuje element E h1 { font-family: sans-serif } lista E, F, G dopasowuje każdy element z listy h1, h2, div { display-type: block; font-family: sans-serif }
Selektory - atrybuty E[foo] dopasowuje element E który posiada atrybut foo, bez względu na jego wartość planeta[title] { color: blue; } <planeta title="ziemia"> E[foo="war"] wybiera element E który posiada atrybut foo o wartości war planeta[title="ziemia"]{color:blue;} <planeta title="ziemia">
Selektory wybór kontekstowy E > F wybiera F który jest dzieckiem E body > p { line-height: 1.3 } ksiazka > tytul { font-size: 24 pt; } rozdzial > tytul { font-size: 20 pt; } tytul { font-size: 18 pt; } E F wybiera element F który jest potomkiem E h1 em { color: blue }
Selektory pozycja E + F wybiera element F który występuje od razu po danym ( elementy siostrzane ) div + p { text-indent: 0 } Pseudoelementy E:first-child wybiera element E który jest pierwszym dzieckiem swojego rodzica div > p:first-child { text-indent: 0 } Inne elementy selektorów pseudoelementy :first-line, :first-letter, :before, :after
Składowe wartości Każda własność oddzielnie opisuje składnię wartości. Typowe składowe wartości: liczby całkowite i rzeczywiste (własności zazwyczaj ograniczają dozwolony zakres liczb). h1 { margin: 0.5em } p { font-size: 12px } procenty, zawsze odnoszą się do innej wartości p { font-size: 10pt } p { line-height: 120% } /* 120% 'font-size' */
Składowe wartości Wielkości względne: em rozmiar bieżącego fontu ex wysokość litery x bieżącego fontu px punkty, dla urządzenia wyświetlającego Wielkości bezwzględne: in (cale), cm (centymetry), mm (milimetry), pt (punkty, 1/72in), pc (pice, 12pt) h1 { margin: 0.5em } /* em */ h1 { margin: 1ex } /* ex */ p { font-size: 12px } /* px */ h3 { word-spacing: 4mm } /* milimeters */ h4 { font-size: 12pt } /* points */
Składowe wartości kolory: słowo kluczowe albo numeryczna specyfikacja RGB (#FF = 100% = 255) body {color: black; background: white } em { color: #ff0000 } em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) } ciągi znaków: "oto ciąg". Zmiana linii to \A.
Elementy blokowe i liniowe Trzy rodzaje elementów: blokowy - zaczynający nowy akapit liniowy - włączany do bieżącego wiersza niewidoczny - element nie jest wyświetlany nazwa {display: block} obrazek {display: inline} plik {display: none} W XML domyślnie elementy wyświetla się liniowo.
Margines lewy Margines prawy Model ramkowe CSS Ramka ograniczająca Obramowanie Margines górny Tu jest tekst Wypełnienie Margines dolny
Umiejscowienie względne Zmiana pozycji elementu względem jego naturalnego położenia, nie względem innych elementów. opis { } display: block; position: relative; left: 10px; right: 20px; bottom: 15px; top: 25px Wartości miary opisują przesunięcie elementu względem jego położenia domyślnego.
Umiejscowienie bezwzględne Dokładne określenie położenia elementu względem elementu rodzica. opis { } display: block; position: absolute; left: 10px; right: 20px; bottom: 15px; top: 25px Porządek naturalny - wyznaczony przez dokument XML - zostaje zmieniony. Elementy mogą zachodzić na siebie.
Szerokość i wysokość elementu Określanie szerokości i wysokości elementu, jako wartość bezwzględna, lub procent wielkości rodzica. opis { } display: block; position: relative; width: 200%; height: 250px; left: 10px; right: 20px Procenty odwołują się do rozmiarów rodzica, nie oryginalnych rozmiarów elementu.
Porządek kaskadowy Waga Znajdź wszystkie reguły które stosują się do danego elementu i własności - wybierz regułę według wagi. Pochodzenie W przeciwnym razie według pochodzenia - reguły autora - reguły użytkownika - domyślne reguły procesora CSS. Szczegółowość W przeciwnym razie wybierz regułę o większej mierze szczegółowości. Kolejność W przeciwnym razie, wybierz tą regułę która występuje w dokumencie CSS później. Uznaje się że reguły w arkuszach importowanych znajdują się przed regułami w arkuszu bieżącym.
Własności dziedziczone przez elementy artykuł sekcja par display-type: block; font-family: sens-serif; font-size: 14 pt; background-image: stripes.jpg; color: blue; display-type: block; margin-top: 5mm; margin-bottom: 5mm; font-size: 12pt; display-type: block; margin-top: 2mm; margin-bottom: 2mm; DZIEDZICZONE DZIEDZICZONE
Dziękuję za uwagę. Dziękuję za uwagę.