Projektowanie Witryn internetowych II

Transkrypt

1 laboratorium I 2015 Projektowanie Witryn internetowych II Piotr Napieralski Laboratorium I

2 Spis treści Sylabus... 2 Warunki zaliczenia... 2 Literatura... 3 Strony internetowe... 3 Książki... 3 Kursy DVD... 3 Wprowadzenie... 4 Edytor, przeglądarka i do przodu... 5 Składnia i semantyka... 8 Sekcje w HTML Style strony Komentarze Formatowanie Listy Hiperłacza Przykład Ćwiczenie sprawdzające Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: piotr@napieralski.net

3 Termin zjazdu Godzina Temat Sylabus Zajęcia 1 45 min Test kompetencyjny 45 min Informacje wprowadzające (historia, składnia i semantyka) 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia 2 45 min Praca ze stroną w HTML5 45 min Praca ze stroną w HTML5 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia 3 45 min Projektowanie layaoutu i zawansowane techniki styli w CSS3 45 min Projektowanie layaoutu i zawansowane techniki styli w CSS3 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia 4 45 min Formularze w HTML5 45 min Formularze w HTML5 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia 5 45 min Praca z multimediami w HTML5 45 min Praca z multimediami w HTML5 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia 6 45 min Praca z elementem canvas 45 min Praca z elementem canvas 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia 7 45 min Aplikacje offline i geolokalizacja 45 min Aplikacje offline i geolokalizacja 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia 8 45 min Wykorzystanie gotowych wzorców, projekt własnej strony internetowej 45 min 45 min Konsultacje i wyznaczenie tematyki projektów końcowych Zajęcia 9 45 min JavaScript i HTML5 45 min 45 min Zadanie cząstkowe - ćwiczenie sprawdzające Zajęcia ostatnie 45 min Końcowy test weryfikacyjny 2 h Weryfikacja końcowych projektów, Warunki zaliczenia Podczas zajęć studenci będą rozwijali własny projekt strony internetowej. Dodatkowo na ostatnich zajęciach każdy ze studentów będzie pisał krótki test sprawdzający. Ocena końcowa składa się z oceny z projektu końcowego (projekt zostanie oceniony na podstawie krótkiej obrony polegającej na odpowiedzeniu na trzy pytania z zakresu projektu) oraz z oceny z testu sprawdzającego. Wpływ na ocenę końcową mają również aktywność na zajęciach, polegająca na samodzielnym rozwiązywaniu zadań cząstkowych podczas zajęć. ocena końcowa = 40% ocena z testu + 10% średnia ocena z zadań cząstkowych + 50% ocena projekt końcowy

4 Literatura Strony internetowe [1] Kurs W3C- HTML5 W3Schools: [2] Kurs HTML5 Sławomira Kokłowskiego - [3] Wyszukiwarka Google [4] Strona World Wide Web Consortium [5] Dokumentacja HTML5 World Wide Web Consortium [6] Kurs internetowy Mozzili [7] Lekcje HTML5 kurs podstawowy Książki [1] Christopher Schmitt, Kyle Simpson HTML5 Cookbook Solutions & Examples for HTML5 Developers, O'Reilly Media 2011 [2] Chuck Hudson, Tom Leadbetter HTML5 Developer's Cookbook, Addison-Wesley 2011 [3] Jennifer Niederst Robbins HTML5 Pocket Reference, 5th Edition O'Reilly Media 2013 [4] Andy Harris HTML5 For Dummies Wiley 2011 [5] Bartosz Danowski Wstęp do HTML5 i CSS3 Helion 2011 [6] Adam Freeman HTML5. Przewodnik encyklopedyczny Helion 2013 [7] Bartosz Danowski HTML5. Ćwiczenia praktyczne Helion 2012 Kursy DVD [1] Grzegorz Róg Kurs HTML5 w praktyce [2] Wydawnictwo Strefa Kursów Kurs HTML5 zaawansowany 2014 Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: piotr@napieralski.net

5 Wprowadzenie Patrząc na stronę internetową w przeglądarce, widzisz na najprostszym poziomie słowa. Słowa te mają charakterystyczny styl, różnią się czcionkami, ich rozmiarem czy kolorem. W wielu przypadkach strona wyświetla również obrazy oraz filmy. Czasami na stronie znajdują się formularze gdzie możesz wprowadzić (bądź wyszukać ) informacje, oraz dopasować wygląd strony do swoich potrzeb. Często strona posiada zawartość która się poruszą bądź zmienia podczas gdy reszta strony pozostaje niezmienna. Kilka technologi (takich jak CSS, JavaScript, Flash, AJAX, JSON) może być wykorzystanych do zdefiniowania elementów strony internetowej. Jednakże na najniższym poziomie strona internetowa jest zdefiniowana za pomocą HTML (HyperText Markup Language). Bez HTML nie ma strony internetowej. HTML jest powłoką, która utrzymuje wszystko razem: międzynarodowym standardem, którego specyfikacja jest zarządzana przez World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). Konstrukcja języków HTML i CSS jest standaryzowana i określona przez odpowiednią specyfikację. Jest to konieczne w celu zachowania porządku oraz uniezależnienia języków od platform sprzętowych i rozwiązań programowych poszczególnych twórców przeglądarek. W 1980 fizyk Tim Berners-Lee, pracujący dla ośrodka naukowo-badawczego CERN, stworzył prototyp hipertekstowego systemu informacyjnego ENQUIRE. System wykorzystywano do organizowania i udostępniania dokumentów związanych z badaniami naukowymi. Rewolucyjność pomysłu polegała na tym, że użytkownik, posługując się odnośnikami, mógł z jednej lokalizacji przeglądać dokumenty fizycznie znajdujące się w innych miejscach na świecie. W 1989 Berners-Lee i inżynier oprogramowania CERN Robert Cailliau przedstawili równolegle dwie propozycje hipertekstowych systemów informacyjnych opartych na sieci Internet. Oba projekty cechowała podobna funkcjonalność. Rok później opracowali wspólną propozycję zaakceptowaną przez CERN projekt WorldWideWeb (W3). Pliki zawierające odpowiednie znaczniki HTML i CSS są dokumentami tekstowymi, a co za tym idzie, mogą być tworzone i przeglądane za pomocą dowolnego edytora tekstu, np. systemowego Notatnika. W zależności od zawartości rozszerzenie pliku może się różnić, jednak nadal mamy do czynienia z dokumentem tekstowym. Poniżej znajduje się wykaz najpopularniejszych typów plików wraz z opisem ich zawartości: Rozszerzenie htm html shtml php cgi pl js css Opis zawartości plik tekstowy zawierający kod HTML, CSS, czasami też kod JavaScript plik tekstowy zawierający kod HTML, CSS, czasami też kod JavaScript plik tekstowy zawierający kod HTML, CSS oraz instrukcje SSI pliki takie są przetwarzane przez serwer przed wysłaniem do przeglądarki pliki tekstowe zawierające kod HTML, CSS połączony ze skryptami PHP pliki tekstowe zawierające skrypty napisane w Perlu bądź Shellu często połączone z kodem HTML; pliki tekstowe zawierające skrypty napisane w Perlu często połączone z kodem HTML; pliki tekstowe zawierające skrypty napisane w języku JavaScript pliki tekstowe zawierające zewnętrzne arkusze stylów.

6 W HTML5 część znaczników została usunięta lub zastąpiona przez CSS: Znacznik <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> Użycie w HTML5 <abbr> <object> CSS CSS CSS <ul> CSS CSS CSS Edytor, przeglądarka i do przodu Odpowiedni dobór edytora kodu znacznie ułatwia i przyśpiesza pracę z językiem html oraz innymi językami programowania. Ważne jest by edytor posiadał możliwość kolorowania składni, dodatkowo bardzo pomocne jest gdy edytor umożliwia: domykanie znaczników, kodowanie polskich znaków w standardzie ISO i UTF, kreatory ułatwiające generowanie części kodu, sprawdzanie poprawności wygenerowanego kodu. Poniżej znajdują się łącza do popularnych edytorów (wybór edytora jest w gestii studenta): Nazwa Adobe Dreamweaver Ager Web Edytor Bluefish CoreEditor EdHTML HateML Pro 2 ked KompoZer Microsoft Expression Web Pajączek nvu PSPad Web Edit Notepad++ NetBeans Kate Quanta Plus getedit Geany Smultron Taco HTML Edit System operacyjny, Linux, Mac OS X Linux Linux Linux Linux Mac OS X Mac OS X Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: piotr@napieralski.net

7 Fraise Mac OS X Ja wybrałem edytor Bluefish edytor, gdyż stanowi wolne oprogramowanie. Działa na większości systemów operacyjnych zgodnych z normą POSIX, m.in. na GNU/Linuksie, FreeBSD,Mac OS X i. Bluefish jest bogatym w funkcje, a jednocześnie szybkim edytorem HTML i CSS, oferuje kolorowanie składni HTML, PHP, C, Javy, JavaScriptu, JSP, SQL, XML, Pythona, Perla, CSS, ColdFusion, Pascala, R i Octave/Matlab (możliwe jest tworzenie własnych reguł kolorowania składni), a także automatyczne zamykanie znaczników HTML I XML. Pozwala na otwarcie ponad 500 dokumentów w jednym oknie programu. Umożliwia łatwe dostosowanie interfejsu użytkownika m.in. poprzez tworzenie własnych pasków narzędzi. Jedną z funkcji Bluefisha jest też automatyczne generowanie galerii obrazków. Rysunek 1 Okno edytora Bluefish Adres z którego można go pobrać: Ostatnim ważnym elementem niezbędnym podczas tworzenia stron WWW jest przeglądarka. Przeglądarki internetowe komunikują się z serwerem zazwyczaj za pomocą protokołu HTTP, aczkolwiek w obsłudze są również inne, np. HTTPS, FTP, Gopher. Często wraz z przeglądarką dostarczane są komponenty, które umożliwiają korzystanie z serwerów grup dyskusyjnych (protokół NNTP), poczty elektronicznej (protokoły POP3, IMAP i SMTP) oraz serwerów plików (protokół FTP). Trwająca na rynku wojna przeglądarek powoduje, że oprogramowanie do przeglądania stron WWW cały czas ewoluuje w stronę większej ergonomii, użyteczności i wygody użytkownika. Czołówka najpopularniejszych przeglądarek na świecie przedstawia się następująco (dane z grudnia 2011 według serwisu StatCounter): Internet Explorer 38,64% Google Chrome 27,27% Mozilla Firefox 25,29% Safari 6,08% Opera 1,98%

8 Użycie przeglądarek w Europie (dane z grudnia 2011 według serwisu StatCounter): Mozilla Firefox 32,46% Internet Explorer 31,28% Google Chrome 25,54% Safari 5,84% Opera 4,13% Należy mieć świadomość, że nie wszystkie przeglądarki (nawet w najnowszych wersjach) wspierają robocze wersje specyfikacji HTML5 i CSS3. Poniżej znajduje się wykaz przeglądarek wspierających HTML5: Rysunek 2 Wykaz przeglądarek wspierających HTML5 Aktualny stan obsługi języków HTML5 i CSS3 przez przeglądarki z rozbiciem na konkretne wersje można sprawdzić na stronie: Jedną z najważniejszych metod tworzenia stron działających poprawnie niezależnie od przeglądarki jest ścisłe trzymanie się specyfikacji oraz jej zaleceń. Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: piotr@napieralski.net

9 Składnia i semantyka HTML trudno zakwalifikować do języków programowania. Jest to raczej język do oznaczania składni (markup), który pozwala klasyfikować zawartość dokumentu z rozszerzeniem.html lub.htm zgodnie z zasadami strukturalnymi. Pojedynczy element HTML określamy jako Tag lub znacznik. Dowolny znacznik może zawierać skojarzone z nim atrybuty. Poniżej znajduje się przykład atrybutów znacznika: W składni występuje kilka charakterystycznych elementów, są to: Znacznik otwierający - konstrukcja znaczników opiera się na ostrych nawiasach Atrybut, którego wartość ujęta jest w cudzysłowie po znaku równości Treść, która składa się na zawartość znacznika Znacznik domykający - kończy daną konstrukcję Znacznik określa akapit tekstu i dodatkowo posiada atrybut klasy class. W kodzie HTML występują też znaczniki, które domykane są w sposób uproszczony i nie zawierają treści, np. znacznik <img> lub znacznik <br>. Aby jednocześnie otworzyć i domknąć znacznik, korzystamy z zapisu <br/>, czyli dodajemy ukośnik przed zakończeniem znacznika. Każdy dokument HTML ma ściśle określony szkielet, który nie zmienia się w zależności od zawartości strony. Oczywiście szkielet dla strony zbudowanej na podstawie HTML5 różni się od tego wykorzystywanego w stronach bazujących na wcześniejszych wersjach języka HTML czy XHTML. Pierwszym wspólnym i obowiązkowym elementem szkieletu strony jest wpis określający rodzaj języka użytego do jej stworzenia. W przypadku strony wykorzystującej język HTML5 jest znacznik <!DOCTYPE html>. Kolejnym obowiązkowym elementem w strukturze dokumentu jest znacznik <html></html>, który odpowiada za określenie ram tworzonego dokumentu. Wszystkie elementy umieszczone pomiędzy <html></html> to właściwa zawartość strony WWW. Następnym w kolejności znacznikiem tworzącym strukturę dokumentu jest <head></head>. Jest on odpowiedzialny za określenie podstawowych właściwości strony, takich jak strona kodowa, tytuł, informacje o autorze oraz słowa kluczowe i opis strony. Dokładne informacje na temat zawartości znajdziesz w dalszej części niniejszego rozdziału. Bezpośrednio po znaczniku zamykającym </head> znajduje się <body> </body>, we wnętrzu którego zamieszczamy całą widoczną treść strony. Mówiąc jeszcze prościej, tylko to, co jest umieszczone pomiędzy znacznikami <body></body>, jest wyświetlane w oknie przeglądarki.

10 Pozostałe elementy to polecenia wpływające na zachowanie przeglądarki (np. strona kodowa) lub pełniące funkcje czysto informacyjne. Poniżej znajduje się podstawowy szkielet strony HTML5: Sekcje w HTML5 Twórcy piątej specyfikacji języka HTML dokonali analizy struktury witryny i wyróżnili w niej kilka dodatkowych sekcji, a następnie przypisali do nich nowe znaczniki, za pomocą których będziemy mogli precyzyjniej kontrolować finalny wygląd strony. Nowe znaczniki nie wpływają bezpośrednio na wygląd zawartych w nich danych, ale pozwalają zgrupować szereg innych elementów i łatwiej nimi zarządzać. Lista nowych znaczników wraz z wyjaśnieniami znajduje się poniżej. <header></header> pomiędzy znacznikami powinna być zamieszczona część strony, która ma charakter nagłówka i rozpoczyna Twoją stronę. <nav></nav> pomiędzy znacznikami powinny być zamieszczone elementy odpowiedzialne za główne menu nawigacyjne witryny. <article></article> pomiędzy znacznikami zamieszczamy zestaw elementów tworzących spójny artykuł (np. nagłówek i blok tekstu). <section></section> pomiędzy znacznikami zamieszczamy wybraną zawartość części witryny tworzącą spójną sekcję, np. tytuł i wstęp artykułu widoczny na stronie głównej. <aside></aside> pomiędzy znacznikami powinna być zamieszczona część strony, która jest elementem uzupełniającym główną strukturę strony. <footer></footer> pomiędzy znacznikami powinna być zamieszczona część strony, która ma charakter stopki i zamyka Twoją stronę. Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: piotr@napieralski.net

11 Rysunek 3 Schemat układu strony z wykorzystaniem nowych znaczników

12 Style strony Chcąc zdefiniować formatowanie dokumentu należy zdefiniować styl. Element style pozwala na definiowanie stylów CSS w dokumencie HTML inline zamiast używania elementu link, który umożliwia importowanie stylów z zewnętrznego arkusza stylów. Element style możesz zamieszczać w różnych miejscach dokumentu HTML, a dokument może zawierać wiele elementów style. Nie musisz zatem definiować wszystkich stylów w sekcji head. Przydaje się to, kiedy tworzysz strony przy użyciu szablonów, gdyż możesz dzięki temu uzupełniać style podane w szablonie o style właściwe dla określonej strony. Element style działa w większości popularnych przeglądarek; Atrybuty elementu style zestawione zostały w poniższej tabeli: Atrybut Wartość Opis media media_query Atrybut media pozwala określić, kiedy styl ma być zastosowany do dokumentu. scoped scoped Jeżeli w elemencie style znajduje się atrybut scoped, to styl nadawany jest jedynie rodzicowi i dzieciom elementu. Kiedy ten atrybut nie występuje, styl zdefiniowany w dowolnym miejscu dokumentu HTML odnosi się do wszystkich elementów tego dokumentu. type text/css Atrybut type pozwala wskazać przeglądarce rodzaj definiowanego stylu. Tymczasem przeglądarki obsługują jedynie style CSS, więc atrybut ten zawsze ma wartość text/css. Więcej tagów dotyczących definiowania styli poznamy podczas nauki CSS. lepiej, kiedy zapoznasz się z przedstawionymi w tym rozdziale przykładami. Specyfikacja HTML5 jasno mówi, że z elementów należy korzystać wyłącznie z powodu ich wartości semantycznej. Dla ułatwienia życia specyfikacja jednocześnie stwierdza, że obstylowanie kojarzone z tymi elementami składa się częściowo na znaczenie semantyczne niektórych z nich. To wymijające podejście, ale jednocześnie ułatwia zachowanie kompatybilności ze starszymi wersjami HTML. Niektóre z tych elementów mają bardzo konkretne znaczenie. Przykładowo, element cite służy wyłącznie do cytowania tytułów innych źródeł, np. książek bądź filmów. Tymczasem inne elementy często służą mniej konkretnym celom i wbrew założeniom standardu HTML5 mają wyraźne znaczenie prezentacyjne. Zalecam przyjąć pragmatyczne podejście. Po pierwsze, używaj elementów służących do konkretnych zadań, o ile takowe są dostępne. Po drugie, unikaj używania elementów, które dawniej służyły wyłącznie celom prezentacyjnym i którym wstecznie przypisano znaczenie semantyczne (np. elementu b), a prezentacją zarządzaj przy użyciu CSS. Wreszcie, niezależnie od ostatecznego doboru elementów, używaj ich spójnie w całym kodzie. Komentarze W trakcie pracy nad dużymi dokumentami stosuj komentarze. Są bardzo przydatne, zwłaszcza gdy nad jedną stroną pracuje kilku projektantów. Pozwoli to uniknąć zbędnego zamieszania. Komentarze bardzo ułatwiają poruszanie się po samym kodzie. Do umieszczenia komentarza służy: <!--Tu znajduje się komentarz do naszej strony--> Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: piotr@napieralski.net

13 Formatowanie Język HTML5 wykorzystuje kilka znaczników, które służą do określenia i wstępnego formatowania większych partii treści witryny. Do elementów blokowych możemy zaliczyć akapity, nagłówki, cytaty, poziome linie, listy, znaczniki <div></div>, <figcaption> </figcaption>, <pre></pre> oraz <figure></figure>. Cechą charakterystyczną każdego ze znaczników blokowych jest to, że tworzy on zupełnie nowy element, który jest oddzielony od pozostałych wyraźną przerwą. Dalej przyjrzymy się konstrukcji każdego z tych elementów. Pamiętaj, że wszystkie one muszą się znajdować wewnątrz znacznika <body> </body>. Specyfikacja języka HTML przewiduje możliwość utworzenia nagłówków. Element ten jest wykorzystywany m.in. do wygodnego dzielenia większej partii tekstu na mniejsze części. Podczas tworzenia strony do dyspozycji mamy sześć zróżnicowanych rozmiarów nagłówków. Oto ogólny przepis na nagłówek: <hx>nagłówek stopnia X</hx> Za pomocą litery x oznaczyłem stopień nagłówka. W praktyce w to miejsce wstawiamy cyfry z przedziału od 1 do 6. Wbrew pozorom znacznik <h1></h1> jest największym nagłówkiem, a <h6></h6> najmniejszym. Kolejnym sposobem prezentacji tekstu jest jego grupowanie w bloki tekstu, zwane akapitami. Tekst znajdujący się w akapicie automatycznie dopasowuje się do szerokości okna przeglądarki lub jak kto woli do rozdzielczości. Dlatego na jednym komputerze akapit może mieć trzy wiersze tekstu, a na innym wiersze mogą być zaledwie dwa. Jest to rzecz jak najzupełniej normalna i niestety bardzo często przy źle zaprojektowanej stronie może prowadzić do powstawania problemu popularnego rozjeżdżania się zawartości okna przeglądarki. Za definicję akapitu odpowiada znacznik <p></p>, który zawsze występuje z elementem domykającym. koniecznością opublikowania na niej fragmentu tekstu pochodzącego z innej strony bądź książki lub gazety. Sytuację taką przewidziano podczas tworzenia specyfikacji języka HTML i dodano do niej znacznik <blockquote></blockquote>, który służy do oznaczania większego bloku tekstu będącego cytatem. Listy Następnym elementem, z jakim możesz się spotkać przy tworzeniu stron WWW, są listy. Specyfikacja określa trzy rodzaje list. Są to: listy punktowane, numerowane oraz definicji. Można się jeszcze spotkać z podziałem na listy uporządkowane (numerowane) oraz nieuporządkowane (wypunktowane), ale to już kwestia interpretacji. Do stworzenia prostej listy wypunktowanej będziemy potrzebowali kombinacji dwóch znaczników: <ul></ul> oraz <li></li>. Znacznik <ul></ul> określa ramy listy, natomiast <li></li> to każdy jej podpunkt. Drugim typem listy jest lista numerowana, której konstrukcja składa się ze znaczników <ol></ol> oraz <li></li>. Zasada jest dokładnie taka sama jak w przypadku list wypunktowanych. Trzecim i ostatnim typem listy jest lista definicji. W przypadku tego rodzaju list musimy skorzystać z większej liczby znaczników. Po pierwsze, za pomocą znaczników <dl></dl> określamy główne ramy listy. Następnie przy użyciu znaczników <dt></dt> oznaczamy słowo lub fragment tekstu, który chcemy szerzej opisać. Na koniec, używając <dd></dd>, dodajemy opis. Przeglądarka sama decyduje, kiedy złamać daną linię. Działanie takie jest przydatne, ale czasami może utrudnić pracę twórcy witryny zawierającej większą ilość tekstu. Na szczęście w specyfikacji języka HTML znajdziemy przydatny znacznik, którego celem jest bezwzględne wymuszenie złamania linii. Mam tutaj na myśli znacznik <br/>.

14 Hiperłacza Hiperłącza są podstawą funkcjonowania stron WWW i całej sieci. Bez hiperłączy przeglądanie stron byłoby bardzo utrudnione i wymagałoby od odwiedzającego znajomości budowy danego serwisu WWW oraz ręcznego wpisywania odpowiednich adresów. Na szczęście mamy hiperłącza i w dość prosty sposób możemy z nich korzystać. Jak na pewno zauważyłeś, hiperłącza odnoszą się nie tylko do danego serwisu. Bardzo często prowadzą do innych serwisów, oddalonych od przeglądanej witryny o tysiące kilometrów, często umieszczonych na serwerach na innym kontynencie. Użycie hiperłączy daje wręcz nieograniczone możliwości, które poznamy w dalszej części. Budowa hiperłącza jest stosunkowo prosta i wygląda tak: <a href="strona.html">kliknij tu, by dowiedzeć się czegoś więcej o mnie.</a> Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: piotr@napieralski.net

15 Przykład Poniżej znajduje się przykładowy szkielet ze zdefiniowanym układem strony i podstawową treścią.

16 Ćwiczenie sprawdzające Należy stworzyć stronę tak by była wyglądała jak ta zaprezentowana na poniższym zrzucie ekranowym. Ostatnia aktualizacja 2015 przez Piotr Napieralski kontakt: