Źródła: Kursy interaktywne oraz video: Materiały wprowadzające:

Transkrypt

1 Źródła: Materiały wprowadzające: Kursy interaktywne oraz video: (w szczególności: HTML5: Structure, Syntax, and Semantics) Książki: INTRODUCING HTML5 HTML5 FOR WEB DESIGNERS HTML5: Up and Running Head First HTML5 Programming: Building Web Apps with JavaScript HTML5 Multimedia Specyfikacje/referencje: 'Walidatory/outlinery': Materiały uzupełniające:

2 Seminarium wstęp do technologii sieciowych 1. Projektowanie dla sieci. 2. Współczesny model sieci: a) system DNS; b) protokoły sieciowe. 3. Transakcja klient serwer. 4. Przeglądarki internetowe, a rozwój standardów. 5. Wybrane technologie sieciowe (CSS, XML, RSS). 6. Popularne języki dedykowane m.in. do zastosowań sieciowych (JavaScript, PHP,.NET, JPS, SQL). 7. Systemy zarządzania treścią. 2

3 Wybór i instalacja edytora plików tekstowych Do budowy kodu dokumentów HTML i XHTML, podobnie jak w przypadku innych języków, potrzebny jest edytor plików tekstowych. W odróżnieniu od zaawansowanych edytorów tekstu (ang. word processor), które poza samym tekstem zapisują szereg informacji (np. na temat wyglądu, formatowania itd.) edytory plików tekstowych (ang. text editor) zapisują jedynie tekst oraz proste informacje (np. znaki końca linii). Spośród dostępnych darmowych i do tego całkiem rzetelnych edytorów dla platformy Windows należy wymienić m.in.: Notepad ++, TextPad, Notepad 2.0. Wśród edytorów dla platformy Mac godny polecenia jest darmowy TextWrangler, a dla systemów Linux całkiem dobry jest Bluefish (zrzut po prawej stronie; w środowisku tego edytora zostaną zaprezentowane dalsze treści tego kursu). 3

4 Aby przekonać się o bogactwie programów do edycji wystarczy wpisać w przeglądarkę hasło html editor lub po prostu zaglądnąć po adres: W przypadku potrzeby pracy i instalacji na platformy Windows bez uprawnień administratora: Ponieważ często konta studenckie mają ograniczone prawa ingerencji w system operacyjny, z reguły niemożliwa jest typowa instalacja. Aby rozwiązać ten problem posłużymy się wersją nie wymagającą instalacji w katalogach systemowych (tzw. wersja 'przenośna', ang. portable version). W lokalizacji, w której masz prawa zapisu (np. Moje Dokumenty) utwórz folder (np. nazywając go własnym imieniem, inicjałami itp.). Wpisz w wyszukiwarkę hasło Notepad ++ portable, wybierz odpowiedni link i zapisz program (z reguły o nazwie NotepadPlusPlusPortable...exe) do utworzonego folderu. Uruchom program i zainstaluj w tym folderze. 4

5 Tworzenie dokumentu HTML Dla tworzonych dokumentów HTML istotne jest tzw. kodowanie, czyli zestaw znaków z jakiego będziemy korzystać. Aby uczynić nasz projekt uniwersalnym i łatwym w edycji zastosujemy standard UTF-8 (ang. 8-bit UCS/Unicode Transformation Format). Upewnij się, że w wykorzystywanym edytorze jest ustawiony ten standard. Po uruchomieniu edytora z reguły jest możliwość wyboru typu dokumentu nad którym zamierzamy pracować. O ile edytor daje tę możliwość wybierz typ dokument HTML lub HTML5. Po prawej stronie przykładowy rezultat wyboru nowego dokumentu HTML5 dla Bluefish. O ile twój edytor nie wygenerował tego kodu, ew. kod wygląda inaczej, przepisz kod po prawej stronie lub odpowiednio popraw istniejący kod. Utwórz na twardym dysku folder o dowolnej nazwie, który będzie zawierał twoją przyszłą pracę, a następnie zapisz w tym folderze utworzony plik HTML5 jako index.html. 5

6 Ciekawostka: Jeżeli plik o nazwie index.html umieścimy na serwerze to zostanie wyświetlona treść tego pliku w postaci strony internetowej. Jeżeli jednak w katalogu na serwerze zabraknie index.html to zostanie wyświetlona lista wszystkich plików co spowoduje rezultat jak poniżej. Zauważ, że jest to listing serwera www (tutaj rozumianego jako program), który nazywa się Apache ( Jest to najbardziej popularny darmowy serwer www. Nazwa index.html jest pewną umową, a serwer www można skonfigurować tak, aby rozpoczynał od innej nazwy i rozszerzenia. Są również inne serwery www ( 6

7 Składnia i struktura dokumentu HTML HTML (ang. HyperText Markup Language) to język służący do tworzenia stron internetowych. Rozwój języka doprowadził do powstania kilku wersji, z których ostatnia - HTML 4.01 została opublikowana w 1999, a w 2001 dodano erratę. Od HTML 4.01 rozwinęły się dwie drogi dalszej pracy nad językiem: XHTML (wersje 1.0, 1.1, 2.0) oraz HTML 5.0. XHTML to rewizja 'starego' HTML w oparciu o język XML (ang. Extensible Markup Language). Obecnie wspierany jest projekt HTML 5.0. Prace nad językiem (pierwotnie jako Web Applications 1.0) zainicjowała organizacja WHATWG ( a obecny rozwój odbywa się we współpracy z konsorcjum W3 (ang. World Wide Web Consortium) ( Podstawowym elementem składni HTML jest znacznik (ang. tag). Znacznik to wyrażenie zamknięte w nawiasach ostrych <>. W HTML liczba znaczników jest ograniczona tzn. nie można tworzyć własnych znaczników. Możemy natomiast korzystać z około 90 podstawowych znaczników ( Przeanalizujmy jeszcze raz wcześniej wskazaną składnię: Dokument HTML rozpoczyna się 'prologiem': <!DOCTYPE html> lub <!doctype html> Można uprościć, że prolog definiuje język oraz jego wersję, w tym wypadku chodzi o wersję 5 (więcej na temat składni, roli i historii prologu podczas seminarium). Dalsza część składni jest osadzona w znacznikach, z których pierwszym jest znacznik: <html> Zauważ, iż otwarcia i zamknięcia powodują budowę klamrową: klamra znaczników <html> </html> obejmuje cały dokument, a w niej zawarte są inne klamry jakie? 7

8 Dokument HTML można podzielić na dwie części: nagłówek czyli head wyrażany jest poprzez znacznik <head> (przechowuje m.in. informacje o dokumencie) Uzupełnij dowolną treścią część body, zapisz zmodyfikowany plik, a następnie otwórz go za pomocą dowolnej przeglądarki internetowej. oraz treść czyli body, znacznik <body> (zawartość tej części zobaczy właśnie odbiorca) W powyższym przykładzie część head zawiera dodatkowo dwa znaczniki (więcej na ich temat na seminarium): <meta charset="utf-8" /> <title></title> A oto rezultat: Gratulacje, oto pierwsza strona! 8

9 Większość nawet prostych edytorów numeruje wiersze (tak aby np. łatwiej eliminować błędy) i rozpoznaje składnię: podświetla wyrażenia w kolorach oraz porządkuje znaczniki w klamry/ węzły, które można zwijać / rozwijać (np. za pomocą ikon umieszczonych po lewej stronie i oznaczonych znakiem oraz znakiem + ). Aby kod był przejrzysty warto posłużyć się klawiszem tabulacji i wyszczególnić 'wewnętrzne' klamry. W przypadku większości edytorów są dostępne również ikony Indent / Uindent (czyli wcięć tabulacji dla zaznaczonych regionów). Zapisz rezultat swojej pracy w pliku. 9

10 Walidacja dokumentów HTML Walidacja to proces sprawdzania poprawności wygenerowanego kodu (niektóre edytory, np. komercyjny Dreamweaver ma tę opcję wbudowaną, tzw. debuger). Wg. Statystyk konsorcjum W3 ponad 99% serwisów funkcjonujących w sieci zawiera przynajmniej jedną błędną stronę! Dlatego też tak ważne jest kontrolowanie kodu, szczególnie w przypadku projektów komercyjnych. Sprawdźmy czy nasz dokument spełnia kryteria poprawnego kodu wg konsorcjum W3. Pod adresem znajduje się walidator, który pomoże poprawić ewentualne błędy. Program zawiera opcje: Validate by URI tu można wpisać adres strony, które jest zamieszczona w sieci; Validate by File Upload tu można podać ścieżkę lokalnego pliku aby go wgrać na serwer W3; Validate by Direct Input wybrałem tę metodę, która umożliwia wklejenie kodu mojego projektu. Pozostaje zatem wcisnąć Check aby rozpocząć analizę... 10

11 W pracy z walidatorem życzę Wszystkim 'koloru zielonego': Otrzymałem informację, że mój dokument jest rozpatrywany jako HTML 5.0 i zawiera 1 błąd. Ponadto walidator ma dwie uwagi, co do mojej pracy. Ach... Na temat uwag oraz usuwania błędów więcej podczas seminarium. W procesie usuwania błędów pomocy zawsze można szukać na oficjalnej stronie samouczka HTML konsorcjum W3 ( a także na stronie innych kursów. Jedynym polskim kursem rekomendowanym przez konsorcjum W3 jest kurs autorstwa Pawła Wimmera ( Gorąco zachęcam do korzystania przynajmniej z obu tych źródeł. Podpowiedź walidatora w tym wypadku jasno wskazuje, że znacznik <title> powinien zawierać treść, czyli określać tytuł strony. Popraw swój kod w edytorze i zapisz plik. Przeładuj stronę (to będzie rutyna odświeżanie przeglądanej strony przy wprowadzaniu zmian w kodzie). Czy są jakieś zmiany? Zastąp istniejący w okienku walidatora kod nową wersją i ponownie sprawdź kod, poprzez klawisz 11

12 Część head i znacznik meta Cześć head może zawierać szereg informacji, które opisują stronę internetową. Aby te informacje zadeklarować będzie potrzebny znacznik meta. meta może być użyty w części head wielokrotnie i może mieć wiele atrybutów. Zauważ, że znacznik meta nie ma typowego zamknięcia, tzn. nie można zastosować poniższej składni: <meta> </meta> Zadanie 1 W oparciu o przytoczone wyżej źródła określ w swoim projekcie: opis strony; słowa kluczowe; autora dokumentu i edytor w jakim został stworzony; datę utworzenia i datę ważności. Poeksperymentuj również z przeładowywaniem strony i automatycznym przekierowaniem. Pamiętaj aby tworzony kod przechodził poprawnie test walidatora. Takie znaczniki jak meta nazywane są singletonami, a ich poprawne otwarcie i zamknięcie wygląda następująco: <meta odpowiednia treść dla tego znacznika /> lub w składni mniej 'ścisłej', dozwolonej dla HTML5: <meta odpowiednia treść dla tego znacznika > Szczegółowy opis zastosowania tego znacznika oraz jego zawartości znajduje się pod adresami Uwaga: Wszystkie przedstawione w tym kursie zadania powinny zostać wykonane i zapisane w formie plików. Nazwy tych plików powinny odpowiadać poszczególnym zadaniom, np. dla Zadanie 1 plik o nazwie zadanie_1.html. W niektórych wypadkach pliki mogą mieć inne rozszerzenia (np. png, psd itd.). Zadania kontrolne realizowane są tylko na zajęciach. 12

13 Semantyka kodu Kodowanie w HTML można uprościć do budowania dokumentu, którego poszczególne części zawierają znaczenie (dlatego też opatrzone są odpowiednimi znacznikami). Wiele osób na początku nie zwraca na to uwagi i koncentruje się na obserwowanych w przeglądarce internetowej rezultatach (jest to tzw. warstwa prezentacji). O ile taka praktyka może być podyktowana chęcią osiągnięcia szybkiej satysfakcji, w dłuższej perspektywie jest niewystarczająca. Kod powinien mieć zdefiniowane znacznie, ponieważ coraz szersze spektrum urządzeń i programów ma dostęp do sieci i interpretuje treść serwisów internetowych (więcej na ten temat na seminarium). Dlatego też w kontekście aktualnego kodu powinniśmy zadeklarować znacznie obecnej treści (ew. przy większej ilość treści powinniśmy nadawać jej strukturę). Wprowadzona przez mnie fraza to jest treść dokumentu będzie w tym wypadku akapitem (wydzielonym fragmentem tekstu, który w praktyce powinien zawierać skończony wątek / myśl). Znacznik akapitu (ang. paragraph) to <p>. Znajdź na stronach konsorcjum W3 ( sposób stosowania tego znacznika, a następnie użyj dla własnej treści. 13

14 Seminarium wstęp do HTML5 1. Historia języka. 2. Rola konsorcjum W3, grupy WASP, WATWAG. 3. Rozwój dokumentacji, technologie towarzyszące HTML5. 4. Składnia. 5. Współczesne podejścia projektowe: responsive design vs adaptive design. 14

15 Separatory, białe znaki A może 'mocniej'? Zanim zaczniemy kodować warto wiedzieć w jaki sposób interpretowane są przez przeglądarki separatory. Wniosek: przeglądarki ignorują białe znaki (w tym także deklarowane przez nas znaki końca wiersza za pomocą klawisza enter/return). Poeksperymentujmy z powyższym kodem, np. wprowadzając dodatkowe spacje i/lub tabulatory: Zapisz zmiany i przeładuj w przeglądarce dokument. Jaki jest efekt? 15

16 Znaczniki, ich atrybuty i wartości Pierwszym znacznikiem, o którym już co nieco wiesz jest znacznik akapitu, czyli <p>. Ten znacznik nie jest singletonem więc stosuje się go tak: <p>to jest treść dokumentu</p>. Utwórz drugi akapit, który będzie zawierał dłuższy tekst (zamiast wprowadzać ciąg znaków możesz skorzystać z dowolnego serwisu internetowego, który generuje 'testowy' tekst, np. A oto efekt: Zauważ, iż akapity oddzielone są od siebie. Drugi akapit jest na tyle długi, iż przeglądarka podzieliła go na wiersze. Poeksperymentuj z szerokością okna przeglądarki. Ja zachowuje się akapit? Akapit może mieć atrybuty, a atrybuty mogą mieć wartości. <p align="right"> W tym wypadku atrybutem jest wyrażenie align. Wartość atrybutu to left. Zauważ, iż wartość występuje po znaku = i jest otoczona znakami cudzysłowu ". Pamiętaj aby wartości zawsze były w ten sposób zapisywane. Aby sprawdzić jakie atrybuty i wartości można przypisać poszczególnym znacznikom, konsorcjum W3 publikuje wykaz znaczników, ich charakterystykę, atrybuty i wartości przewidziane dla nich. 16

17 Przyjrzyjmy się jeszcze raz specyfikacji dla znacznika <p> ( A oto i spektakularny rezultat: Exemple to część, w której poza podany przykładem zastosowania można eksperymentować poprzez naciśnięcie klawisza Try it yourself >>. Po zatwierdzeniu wyboru Try it yourself >> otworzy się nowe okno/zakładka przeglądarki internetowej i będzie można eksperymentować. Zamknij zakładkę/okno z edytorem i przejdź z powrotem do sekcji opisującej znacznik <p>. Wprowadź dowolny tekst i kliknij Edit and Click Me >> Browser Support jak wskazuje nazwa, to wykaz przeglądarek, które obecnie oferują wsparcie dla określonego znacznika. W tym wypadku wszystkie 'popularne' przeglądarki, których frekwencja i statystyki notuje konsorcjum W3: 17

18 Sekcję statystyk warto przyglądnąć się nie tylko z powodu realizowania uniwersalnego kodu, ale też z perspektywy trendów i pozycji poszczególnych producentów. Warto podkreślić, że te globalne statystyki nie są wiążące, a często dla konkretnych grup docelowych wprost niereprezentatywne. Global Attributes zawiera odnośnik do wykazu atrybutów ogólnych, które można przypisać do danego znacznika. Event Attributes zawiera odnośnik do wykazu atrybutów, które są wykorzystywane do obsługi zdarzeń (np. kliknięcie kursorem myszy). Na początek zastosujmy atrybut align, tak aby pierwszy akapit był justowany do prawej strony. Definition and Usage to część, która podaje znaczenie i zastosowanie znaczników. Differences Between HTML 4.01 and HTML5 tu znajdują się informacje o różnicach w stosowaniu znacznika dla ostatniej i najnowszej wersji języka. W tym przykładzie mamy informacje, że atrybut align był kwalifikowany jako 'przestarzały/dezaprobowany' dla wersji 4.01 podczas gdy w HTML5 nie jest wspierany. Attributes jest tabelą zawierającą przewidziane dla danego znacznika atrybuty oraz ich wartości. 18

19 Jednak o CSS nieco później. Na koniec powstaje pytanie, dlaczego przeglądarka w sposób tak 'wyrozumiały' wygenerowała stronę, tzn. akapit jest 'poprawnie' justowany do prawej? Na ten temat więcej podczas seminarium. Podsumujmy: zastosowaliśmy atrybut, który nie jest wspierany, ale na powyższym zrzucie ekranu przynosi pożądany rezultat. Co na to walidator? Zadanie 2 Jeżeli znasz już przyczynę powyższego błędu, zaproponuj jego rozwiązanie. Jak widać konsekwentnie jest to traktowane jako błąd: Walidator wskazał nr wiersza, w którym jest błąd, a także opisał przyczynę. Osoby uważne nie powinny być zaskoczone tym błędem, ponieważ zapowiedź tego błędu pojawiła się już (gdzie?). Co więcej, walidator nawet zaproponował rozwiązanie, czyli użycie do formatowania języka CSS. 19

20 Seminarium studium przypadku 1. Rola serwisu. 2. Strategia komunikacyjna. 3. Dobór narzędzi. 4. Analiza sytuacji zastanej. 5. Architektura informacji. 6. Identyfikacja problemów projektowych. 7. Etapy: szkicowanie, szkieletowanie, projektowanie makiet. 8. 'Semantyzacja' makiet. 9. Wdrożenie. 20

21 Struktura treści, nadawanie znaczeń Ze względu na nacisk na semantyzację, w HTML5 włączono nowe znaczniki, które pozwalają w prosty, intuicyjny sposób strukturyzować i przypisywać znacznie dla treści ( Nie martw się jeżeli te znaczniki nie będą tak proste i intuicyjne w toku kursu wystąpi wiele przykładów ich zastosowania. article opisuje taką treść, która zawiera w sobie całościową / wyczerpującą informację, przez co może być dystrybuowana niezależnie (np. poprzez kanał RSS). Może więc tu trafić treść, która jest wpisem artykułem prasowym w wersji elektronicznej, wpisem na blogu, postem na forum, komentarzem itd. section może posłużyć do nadania struktury dla całego dokumentu (dzieląc go rzecz jasna na sekcje). Innymi słowy section może mieścić w sobie artykuły. Jednak ten podział może przebiec odwrotnie i to artykuł można podzielić na sekcje. header konsekwentnie może mieścić informacje wprowadzające, 'spis treści', nawigację. nav to 'pojemnik' dla podstawowej nawigacji. Są też inne typy nawigacji (np. kontekstowa lub zawarta w stopce), dla których mamy przewidziane dedykowane znaczniki. aside jest przeznaczony na treści, które mogą być związane bezpośrednio / pośrednio z główną treścią ('na boku'). aside może zawierać informacje /nawigacje kontekstową, ale też może być powierzchnią reklamową. footer to nie tylko stopka dla całego dokumentu. W dokumencie footer może wystąpić wielokrotnie, w charakterze stopki dla każdej z sekcji, a do tego nie zawsze musi być na dole. W przypadku rozbudowanych stopek tzw. 'expansive footer', które są czasami quasi-mapą stron nie stoi nic na przeszkodzie aby footer zawierał np. sekcje lub inne elementy. header to znacznik, który służy jako nagłówek dla treści całego dokumentu lub dla poszczególnych części treści dokumentu (nie mylić z head, który służy jako część informacji o dokumencie por. str. 12). 21

22 Aby konstruktywnie wykorzystać zdobyta wiedzę potrzebujemy jeszcze jednego znacznika, mianowicie znacznika tytułów / nagłówków (ang. headline), który może przyjmować mieć postać: h1, h2, h3, h4, h5, h6, gdzie cyfra 1 oznacza największy priorytet, a cyfra 6 oznacza najniższy priorytet. Aby mieć szerszy wgląd w zastosowanie omawianych wyżej znaczników korzystaj z pomocy stron konsorcjum W3 ( Zadanie 3 Dla dwóch akapitów (np. źródło zaproponowane na str ) dodaj tytuły, tak aby całość wyglądała jak po prawej stronie. 22

23 Omówione wcześniej znaczniki strukturyzują dokument. Aby sprawdzić w jaki sposób jest odczytywany twój dokument odwiedź stronę: Wykorzystując pierwsza lub trzecią możliwość sprawdź w jaki sposób twój kod z Zadania 3 jest interpretowany, jaką ma strukturę. Ja otrzymałem rezultat: Nic nie stoi na przeszkodzie, aby zobaczyć za pomocą tego narzędzia strukturę innych serwisów, w tym wypadku proponuje przyglądnąć się serwisowi: To narzędzie (tzw. outline algorithm) pozwala na ładowanie kodu z lokalnego nośnika (Browse), przeglądanie treści online (URL) jak i wklejenie własnego kodu (HTML oraz pole tekstowe poniżej). 23

24 Zadanie 4 kontrolne Zadanie 5 kontrolne Zadanie 6 kontrolne 24

25 Zadanie 7 kontrolne 25

26 Przeglądarki, inspekcja kodu W przypadku produkcji prostszych projektów, wybór adekwatnej metodologi (np. progressive enhancement, responsive design), dowolny edytor, który podświetla składnię HTML, praca z walidatorem oraz testowanie na możliwie szerokim spektrum przeglądarek / urządzeń (uzasadnionym np. badaniem frekwencji odwiedzin grupy docelowej) może być wystarczającym warsztatem wdrożenia. Warto dodać, że wymienione wyżej narzędzia są darmowe, więc jedyną inwestycją jest czas i trud po naszej stronie potrzebny do zdobycia wiedzy i doświadczenia oraz samego wykonania projektu. Obecnie dzięki znakomitym narzędziom dla webdeveloper'ów dostępnych z poziomu popularniejszych przeglądarek w prosty sposób można analizować kod stron internetowych. Przeglądarki służą więc nie tylko 'biernie' w fazie testów, ale również 'czynnie', podczas rozwoju. dostępu do narzędzi webdeveloper'skich dla poszczególnych przeglądarek (w kolejności alfabetycznej). Chrome W nowszych wersjach nie wymaga instalacji dodatkowych składników, jest oparty na silniku WebKit ( i podobnie jak w przypadku Safari, czy Opera te narzędzia są wbudowane i dostępne. Aby uruchomić panel inspekcji kodu (tzw. Developer Tools) użyj skrótu klawiszowego Ctrl + Shift + I (dla użytkowników platformy Mac klawisz Ctrl zastąp Cmd). Alternatywnie możesz wybrać Tools > Developer Tools. W przypadku nowszych wersji przeglądarek Chrome, Firefox, Safari, Opera, aby uruchomić panel narzędzi developerskich, należy otworzyć wybraną stronę, uruchomić menu kontekstowe (z reguły prawy klawisz myszy) i wybrać Inspect element / Zbadaj element. O ile w twojej przeglądarce jest dostępna ta funkcja możesz opuścić tą część instrukcji i od razu przejść do Ćwiczenia 1. Poniżej zostaną omówione możliwości 26

27 Firefox Aby go uruchomić wciśnij F12 lub z menu wybierz: Tools > Firebug. W nowszych wersjach dostępny jest wbudowany panel Developer Tools, który można uruchomić przy pomocy menu Tools > Toggle tools. Ponadto dla Firefox dedykowany jest znakomity (i do tego jeden z pierwszych na tym polu) dodatek, mianowicie FireBug ( O ile masz uprawnienia, możesz zainstalować ten dodatek. IE 8 + Wymaga instalacji Developer Toolbar ( który można uruchomić poprzez klawisz F12 lub poprzez menu Tools > Developer tools. 27

28 Opera Dysponuje standardowym dla WebKit dodatkiem o nazwie Dragonfly, który można uruchomić przy pomocy Ctrl/Cmd + Shift + I lub poprzez menu: Tools > Advances > Opera Dragonfly. Następnie z menu należy wybrać opcję Customize toolbar i przeciągnąć do górnego paska ikonę Web Inspector. Obrazy ze źródła: Safari Włączenie w Safari tej funkcjonalności wymaga w pierwszej kolejności wybrać z menu Preferences > Advanced i zaznaczyć opcję Show Developer. 28

29 Ćwiczenie 1 Sprawdź czy twoja przeglądarka posiada funkcjonalność inspekcji kodu, ew. w oparciu o powyższe informacje zainstaluj odpowiedni składnik, aby taką funkcjonalność uzyskać. Włącz panel inspekcji kodu dla strony i przeglądnij zawartość części head. 29

30 Semantyczny kod To taki kod, który zawiera adekwatnie przypisane znacznie dla poszczególnych części dokumentu. To od każdego z nas zależy jak ustrukturyzujemy kod, jakie wykorzystamy znaczniki i gdzie je usytuujemy. Co więcej, każdy wykona to trochę, a czasami zupełnie inaczej i nic w tym złego, to urok działań twórczych (jak się okazuje również na poziomie kodu). Innym sposobem na wyłączenie CSS jest skorzystanie z omawianego panelu Developer Tools. W niniejszym przykładzie posłużę się Chrome (zakładka Elements). Interesuje mnie usunięcie dwóch wierszy rozpoczynających się od: <link rel= stylesheet W pierwszej kolejności przeanalizujemy kod pierwszej części strony Problem w tym, że serwowana publicznie strona zawiera kilka komponentów, na których w tej chwili nie potrzebujemy. Wśród tych komponentów należy wymienić język CSS, który służy do formatowania HTML, innymi słowy do budowy warstwy prezentacji, w więc m.in. konstruowania layout, kolorów, prostych interakcji itd. Wyłączmy zatem CSS: Ćwiczenie 2 Przy pomocy frazy 'How to disable CSS in Firefox' znajdź sposób na wyłączenie CSS (oczywiście o ile nie używasz Firefox, zmień tą nazwę na właściwą dla twojej przeglądarki). Możesz też skorzystać z podpowiedzi: html 30

31 Nieco bardziej 'eleganckim' sposobem jest zakomentowanie (czyli użycie komentarza), co spowoduje zignorowanie przez przeglądarkę wybranej części kodu. W tym celu przeładuję jeszcze raz stronę, lecz zamiast Delete Node wybieram Edit as HTML i modyfikuję oba wiersze dodając na początku znacznik <!-- a na końcu znacznik -->, tak aby kod wyglądał jak poniżej: Oczywiście nie stoi nic na przeszkodzie, aby w dowolnym momencie przywrócić pierwotny kod i poprzez usunąć znaczniki komentarza (to jest właśnie 'eleganckie'). Warto dodać, że zmiany wykonywane na takim kodzie są tylko lokalne (wewnątrz pamięci cache przeglądarki), więc nie przynoszą trwałych rezultatów (w tym wypadku nie mamy uprawnień zapisu na dysku serwera). Niezależnie od sposobu w jaki wyłączyliśmy CSS powinniśmy otrzymać rezultat podobny zamieszczonego po prawej stronie. 31

32 To naprawdę dobra wiadomość w końcu znamy już na tyle HTML, że sporą część tej strony można zrekonstruować! Zanim jednak to zrobimy warto przeanalizować, co czyni ten kod 'semantycznym'. Dla przykładu nawigacja ma postać wykazu (czyli wypunktowanej listy) odsyłaczy (tzw. linków, czyli elementów, które kierują nas w odpowiednie miejsce). Ponadto są tytuły dla poszczególnych sekcji lub artykułów (to się nieco później okaże). Dodatkowo, te tytuły też są odsyłaczami. W sumie nic nadzwyczajnego i właśnie o to chodzi taki kod ma być możliwie prosty, aby mógł zostać poprawnie zinterpretowany przez różne programy (np. program pocztowy, przeglądarkę tekstową, screen reader, generator kodu Braille'a, RSS, przeglądarki mobilne, boty indeksujące treści, np. googlebot, itd.). Aby podjąć próbę własnej rekonstrukcji tej części strony uzupełnijmy potrzebną wiedzę na temat wykazów oraz odsyłaczy. 32

33 Wykazy / listy Umożliwiają przedstawienie treści w postaci punktów/podpunktów w osobnych wierszach. Można zastosować trzy rodzaje wykazów/list: nieuporządkowane; uporządkowane; definicje. Wykazy/listy nieuporządkowane (tzw. unordered list) stosowane są w przypadku danych, których prezentacja nie wymaga numeracji. Wykazy / listy nieuporządkowane bardzo często stosowane w menu, 'zbierając' elementy nawigacyjne. Zastosowanie: <ul> <li>pierwsza pozycja wykazu</li> <li>druga pozycja wykazu</li> </ul> Nieco ciekawsze jest zagnieżdżanie wykazów, wewnątrz innych wykazów. Zadanie 8 Odwiedź stronę konsorcjum W3 i odnajdź sekcję poświęconą zagnieżdżaniu wykazów (tzw. nested lists). Na podstawie zdobytej wiedzy i testów (np. poprzez edytor online, tzw. funkcja Try it yourself >>) zbuduj strukturę składającą się z 2 poziomów (jeden wykaz zagnieżdżony w drugim): Nic nadzwyczajnego: 33

34 oraz z 3 poziomów: Wykazy/listy definicji (tzw. description list) pozwalają na tworzenie definicji poszczególnych terminów, co np. może znaleźć zastosowanie w pracy z walidatorem, kod był poprawny. Zadbaj o to, aby na podstawie Zastosowanie: <dl> <dt>pierwszy termin wykazu</dt> <dd>definicja pierwszego terminu</dd> <dt>drugi termin wykazu</dt> <dd>definicja drugiego terminu</dd> </dl> Zadanie 9 Na postawie powyższych przykładów, a także odpowiedniej sekcji na stronach konsorcjum W3 skonstruuj wykaz uporządkowany oraz definicji. Wykazy/listy uporządkowane (tzw. ordered list) pozwalają na automatyczna numeracje zawartych treści. Zastosowanie: <ol> <li>pierwsza pozycja wykazu</li> <li>druga pozycja wykazu</li> </ol> 34

35 Odsyłacze/hiperłącza Pod terminami odsyłacze/hiperłącza (ang. link) kryje się koncepcja tworzonego z końcem lat 80-tych HTML. Odsyłacz/hiperłącze to element, który przechowuje informacje o lokalizacji, a jego wybranie (np. kliknięcie) spowoduje przeniesie odbiorcy do tej właśnie lokalizacji. Odsyłacze/hiperłącza są mechanizmem, który umożliwia budowanie nawigacji w obrębie serwisu internetowego. Odsyłacze/hiperłącza tworzą również sieć połączeń między różnymi serwisami. Ćwiczenie 3 Na podstawie powyższego przykładu stwórz odsyłacz do dowolnego serwisu internetowego. Wynik Ćwiczenia 3 to tzw. odsyłacz zewnętrzny (kieruje do zewnętrznych zasobów), ale większość serwisów internetowych obsługuje odsyłaczami wewnętrzne zasoby (kieruje do własnych treści). Zadanie 10 Zmodyfikuj źródło aktualnej strony aby otrzymać rezultat jak niżej. Odsyłacze/hiperłącza określane są poprzez znacznik <a> (ang. anchor) i stosowane są następująco: <a href="dowolny_adres_url">jestem odsyłaczem</a> href="dowolny_adres_url", adres URL (ang. Uniform Resource Locator) ma np. postać jestem odsyłaczem to zupełnie dowolny tekst, który zobaczy odbiorca i który można wybrać/kliknąć Zadbaj o to, aby na podstawie pracy z walidatorem, kod był poprawny. 35

36 Zadanie 11 Zapisz aktualny plik (czyli index.html) jako studia.html, a następnie zmodyfikuj jego źródło aktualnej strony aby otrzymać rezultat jak niżej*. Ćwiczenie 4 Skoro mamy już dwa pliki (śmiało możemy to nazwać naszymi zasobami wewnętrznymi, w końcu oferujemy różne treści w przypadku każdej ze stron) warto połączyć je ze sobą za pomocą odsyłaczy. W pierwszej kolejności wykonajmy następujące 'połączenie': Edytując plik index.html składnia dla takiego odsyłacza wyglądałaby następująco: Zadbaj o to, aby na podstawie pracy z walidatorem, kod był poprawny. * w rezultacie w tej samej lokalizacji powinniśmy mieć dwa pliki: Umieść powyższą składnię w obecnym źródle index.html, tak aby osiągnąć poniższy rezultat: 36

37 Sprawdź czy stworzony odsyłacz działa, tzn. czy przekierowuje ze strony index.html na stronę studia.html. Ćwiczenie 5 Zmodyfikuj źródło pliku index.html tak aby osiągnąć poniższy rezultat: Przeanalizujmy jeszcze raz utworzony w Ćwiczeniu 4 odsyłacz. Przy strukturze plików: Zauważ, że tym razem kolor odsyłacza zmienił się. Ten kolor oznacza, że już wcześniej ta lokalizacja (ten adres) był przeze mnie odwiedzany. Sprawdź czy zmodyfikowany odsyłacz również działa. Zastosowaliśmy składnie: Wartość atrybutu href, czyli "studia.html" musi być dokładnie taka sama jak nazwa pliku. Jednak to, co z poziomu przeglądarki widzi odbiorca, czyli nazwa studia może być dowolna. 37