Źródła - pk.uni.wroc.plpk.uni.wroc.pl/wp-content/uploads/2015/04/km_html5_instrukcje.pdfDlatego...

krzysztof moszczyński http://grafika.swps.pl/

http://pk.uni.wroc.pl/

Źródła:

Materiały wprowadzające:

http://diveintohtml5.info/

http://www.w3schools.com/html/default.asp/

http://webmaster.helion.pl/kurshtml/

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:

http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html/

http://reference.sitepoint.com/html/

Kursy interaktywne oraz video:

http://www.codecademy.com/

http://www.lynda.com/HTML-training-tutorials/224-0.html/

(w szczególności: HTML5: Structure, Syntax, and Semantics)

https://www.khanacademy.org/

https://www.udacity.com/

'Walidatory/outlinery':

http://validator.w3.org/

http://gsnedders.html5.org/outliner/

Materiały uzupełniające:

http://www.smashingmagazine.com/

http://www.alistapart.com/

http://www.webstandards.org/

1



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



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



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:

http://en.wikipedia.org/wiki/List_of_HTML_editors

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



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



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 (http://www.apache.org). 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

(http://en.wikipedia.org/wiki/Web_server).

6



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

(http://whatwg.org), a obecny rozwój odbywa się we współpracy z

konsorcjum W3 (ang. World Wide Web Consortium) (http://www.w3.org/).

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 (http://www.w3schools.com/tags/ref_byfunc.asp).

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



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)

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>

Uzupełnij dowolną treścią część body, zapisz zmodyfikowany plik, a

następnie otwórz go za pomocą dowolnej przeglądarki internetowej.

A oto rezultat:

Gratulacje, oto

pierwsza strona!

8



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



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 http://validator.w3.org/ 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



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.

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

W pracy z walidatorem życzę Wszystkim 'koloru zielonego':

W procesie usuwania błędów pomocy zawsze można szukać na oficjalnej

stronie samouczka HTML konsorcjum W3

(http://www.w3schools.com/html/default.asp), a także na stronie innych

kursów. Jedynym polskim kursem rekomendowanym przez konsorcjum W3

jest kurs autorstwa Pawła Wimmera (http://webmaster.helion.pl/). Gorąco

zachęcam do korzystania przynajmniej z obu tych źródeł.

11



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>

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

http://webmaster.helion.pl/index.php/struktura-dokumentu#HEAD

http://www.w3schools.com/tags/tag_meta.asp

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.

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



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

(http://www.w3schools.com/tags/) sposób stosowania tego znacznika, a

następnie użyj dla własnej treści.

13



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



Separatory, białe znaki

Zanim zaczniemy kodować warto wiedzieć w jaki sposób interpretowane

są przez przeglądarki separatory.

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?

A może 'mocniej'?

Wniosek: przeglądarki ignorują białe znaki (w tym także deklarowane przez

nas znaki końca wiersza za pomocą klawisza enter/return).

15



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. http://www.lipsum.com/).

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



Przyjrzyjmy się jeszcze raz specyfikacji dla znacznika <p>

(http://www.w3schools.com/tags/tag_p.asp):

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ć.

Wprowadź dowolny tekst i kliknij Edit and Click Me >>

A oto i spektakularny rezultat:

Zamknij zakładkę/okno z edytorem i przejdź z powrotem do sekcji

opisującej znacznik <p>.

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: http://www.w3schools.com/browsers/browsers_stats.asp.

17



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.

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.

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.

18



Podsumujmy: zastosowaliśmy atrybut, który nie jest wspierany, ale na

powyższym zrzucie ekranu przynosi pożądany rezultat. Co na to walidator?

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.

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.

Zadanie 2

Jeżeli znasz już przyczynę powyższego błędu, zaproponuj jego

rozwiązanie.

19



Seminarium – studium przypadku

http://communication-design.pl

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



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 (http://diveintohtml5.info/semantics.html).

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 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).

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.

21



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 (http://www.w3schools.com/).

Zadanie 3

Dla dwóch akapitów (np. źródło zaproponowane na str. 15-16) dodaj tytuły,

tak aby całość wyglądała jak po prawej stronie.

22



Omówione wcześniej znaczniki strukturyzują dokument. Aby sprawdzić w

jaki sposób jest odczytywany twój dokument odwiedź stronę:

http://gsnedders.html5.org/outliner/.

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).

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:

http://communication-design.pl

23



Zadanie 4 kontrolne

Zadanie 5 kontrolne

Zadanie 6 kontrolne

24



Zadanie 7 kontrolne

25



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.

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

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 (http://en.wikipedia.org/wiki/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.

26



Firefox

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

(http://getfirebug.com/). O ile masz uprawnienia, możesz zainstalować ten

dodatek.

Aby go uruchomić wciśnij F12 lub z menu wybierz: Tools > Firebug.

IE 8 +

Wymaga instalacji Developer Toolbar (http://www.microsoft.com/en-

us/download/details.aspx?id=18359), który można uruchomić poprzez

klawisz F12 lub poprzez menu Tools > Developer tools.

27



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.

Safari

Włączenie w Safari tej funkcjonalności wymaga w pierwszej kolejności

wybrać z menu Preferences > Advanced i zaznaczyć opcję Show

Developer.

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: http://www.jonhartmann.com/

28



Ć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

http://communication-design.pl i przeglądnij zawartość części head.

29



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).

W pierwszej kolejności przeanalizujemy kod pierwszej części strony

http://communication-design.pl. 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:

http://developer.yahoo.com/blogs/ydn/temporarily-disable-css-testing-

53538.html

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”

30



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 , 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



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



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>

Nic nadzwyczajnego:

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):

33

http://grafika.swps.pl/




oraz z 3 poziomów:

Zadbaj o to,

aby na

podstawie

pracy z walidatorem, kod był poprawny.

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>

Wykazy/listy definicji (tzw. description list) pozwalają na tworzenie

definicji poszczególnych terminów, co np. może znaleźć zastosowanie w

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.

34





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.

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ć http://www.dowolna.domena

jestem odsyłaczem to zupełnie dowolny tekst, który zobaczy odbiorca i

który można wybrać/kliknąć

Ć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.

Zadbaj o to, aby na podstawie pracy z walidatorem, kod był poprawny.

35





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*.

Zadbaj o to, aby na podstawie pracy z walidatorem, kod był poprawny.

* w rezultacie w tej samej lokalizacji powinniśmy mieć dwa pliki:

Ć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:

Umieść powyższą składnię w obecnym źródle index.html, tak aby

osiągnąć poniższy rezultat:

36





Sprawdź czy stworzony odsyłacz działa, tzn. czy przekierowuje ze strony

index.html na stronę studia.html.

Przeanalizujmy jeszcze raz utworzony w Ćwiczeniu 4 odsyłacz. Przy

strukturze plików:

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.

Ćwiczenie 5

Zmodyfikuj źródło pliku index.html tak aby osiągnąć poniższy rezultat:

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.

37





Odsyłacze względne/relatywne

Powstaje jeszcze jedno pytanie: jak stosując tak prostą składnie

udało się skonstruować funkcjonujący odsyłacz? Przecież na nośniku

pamięci na którym obecnie pracuję (np. twardy dysk, karta SD, USB, itp.)

mogę mieć dużo plików o nazwie studia.html. Otóż odpowiedzi na to

pytanie dostarcza struktura plików:

Pliki index.html i studia.html muszą być w tej samej lokalizacji. Zatem w

powyższej składni nie chodzi o jakikolwiek plik studia.html, lecz o taki,

który jest dostępny z tego samego poziomu co plik index.html.

Podsumowując: zastosowana składnia jest typowa dla odsyłacza

względnego/relatywnego. Jeżeli w pliku index.html umieszczam taki

względny odsyłacz, to ten plik jest odniesieniem, względem niego

rozpatruję lokalizację pozostałych plików.

Zadanie 12

Zmodyfikuj tak źródło pliku studia.html, aby stosując odsyłacz względny

zapewnić połączenie obu plików jak na poniżej:

Odsyłacze absolutne

Można być bardziej precyzyjnym i odnaleźć dokładną lokalizację

omawianych wyżej plików. Pracuję na systemie operacyjnym Ubuntu, a

lokalizacja tych plików to:

/media/data/utils/praca/instrukcje/html5/samples/.

Uwzględniając powyższą ścieżkę składnia odsyłacza dla pliku studia.html

wyglądałaby następująco:

Taki odsyłacz nazywamy absolutnym, ponieważ podaje całościową

ścieżkę. Jest zdecydowanie dłuższy (łatwiej się pomylić, czyni rozmiar

pliku większym) i nie wszędzie sprawdzi się.

38





Jednak Ubuntu to dla większości użytkowników raczej egzotyka, a na

lokalnych dyskach każdego z nas, ścieżka dostępu do tych plików będzie

inna. Aby sprawę jeszcze bardziej skomplikować, używamy różnych

systemów operacyjnych, ścieżka absolutna może zaczynać się:

– dla Windows od C:\Documents and Settings\Users\Student\

– dla OS X od /Users/Student/

– dla serwera produkcyjnego, którym finalnie będzie funkcjonował

serwis – tego w ogóle jeszcze nie wiemy, ale z dużym

prawdopodobieństwem można założyć, że nie ma tam użytkownika

Student.

Żadnego kompromisu! Zatem odsyłacze absolutne nie sprawdzą się, przy

przenoszeniu zasobów między platformami.

Jednak odsyłacze absolutne znakomicie nadają się do obsługi

zewnętrznych zasobów, np. odsyłacz do czasopisma 'communication

design magazine' miałby postać:

Zadanie 13

Na podstawie inspekcji kodu (instrukcja: Przeglądarki, inspekcja kodu)

sprawdź jakie odsyłacze absolutne znajdują się na stronie

http://communication-design.pl/ w sekcji studia. Zmodyfikuj źródło

własnego pliku studia.html, tak aby włączyć te odsyłacze absolutne i

otrzymać rezultat jak niżej:

39


http://communication-design.pl/




Odsyłacze względne/relatywne – struktura katalogów/plików

Budując serwisy internetowe organizujemy informacje w postaci plików,

które z kolei umieszczamy w

odpowiednich katalogach. Takie

struktury pozwalają łatwo odnaleźć

pożądane informacje i umożliwiają rozwój.

Ćwiczenie 6

Dla porządku utwórzmy katalog sub_pages i

przenieśmy do tego katalogu plik studia.html:

Jak w przypadku takiej struktury będą wyglądały odsyłacze względne?

Dla pliku index.html sytuacja wydaje się prosta: musimy w pierwszej

kolejności wskazać katalog sub_pages,

a następnie wskazać plik studia.html.

W celu takiej 'podróży w dół' zmodyfikuj źródło pliku index.html jak

poniżej:

Po takiej modyfikacji odsyłacz powinien już działać – sprawdź to.

Z pewnością jednak w przypadku pliku studia.html odsyłacz jest

nieaktualny. Tu musimy odbyć 'podróż w górę', tzn. wskazać jeden poziom

wyżej za pomocą wyrażenia '../'. W tym celu zmodyfikuj źródło pliku

studia.html jak poniżej:

i sprawdź czy modyfikacja przyniosła zamierzony efekt.

40





Podsumowując te rozważania, warto zapamiętać 'względny/relatywny'

sposób 'podróżowania w dół i w górę' struktury katalogów. Będzie to

przydatne dla powoływania się na inne lokalizacje (np. dla plików

graficznych, skryptów, itd.).

Zadanie 14 kontrolne

Odsyłacze – etykiety

Rezultat Zadania 14 jest przykładem strukturyzacji wielu prostych

serwisów internetowych, a uwzględniona nawigacja pozwala na łatwy

dostęp do wszystkich sekcji serwisu (nie jest to zbyt trudne, bo w tym

przypadku przewidziana architektura informacji jest jednopoziomowa i

zawiera zaledwie 5 sekcji).

Jednak obecnie funkcjonująca wersja serwisu http://communication-

design.pl/ jest w organizacji jeszcze prostsza – jest jednym plikiem html,

który zawiera wszystkie sekcje! W sposobie działania, nawigacja nie różni

się w niczym od tej użytej w przypadku takich serwisów jak Wikipedia (w

przykładzie po prawej stronie schemat nawigacji: wybranej odsyłacza

Historia powoduje przewinięcie zawartości strony do odpowiedniej sekcji.

41







Do obsługi powyższej funkcjonalności służą właśnie odsyłacze-etykiety.

Oto składnia konstrukcji odsyłacza – etykiety:

<a href="#wstep">Wstęp</a>

Znak '#' (ang. hash/pound) informuje, że odniesienie dotyczy bieżącego

dokumentu.

Natomiast składnia, która definiuje miejsce/lokalizację może wyglądać jak

niżej:

<a name="wstep"></a>

<h1>Rozdział 1. Wstęp </h1>

Zauważ, że nie jest istotna treść odsyłacza, którą widzi użytkownik. Istotne

jest natomiast jego odniesienie i lokalizacja (zaznaczone tym samym

kolorem).

Zadanie 15 kontrolne

42

Date post:	09-Jul-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times