Skrypt Do Specjalizacji

PPrroojjeekkttoowwaanniiee aarrcchhiitteekkttuurryy iinnffoorrmmaaccjjii ssttrroonn WWWWWW

Materiały do ćwiczeń

Opracował Stanisław Skórka Instytut Informacji Naukowej i Bibliotekoznawstwa Uniwersytet Pedagogiczny w Krakowie

Rok akad. 2009/10

Spis treści

I. Wstęp ........................................................................................... 7

II. Warsztat webmastera ................................................................. 7

III. Szablon strony WWW ................................................................ 8

IV. Wybrane znaczniki ..................................................................... 9

V. Odsyłacze (linki) .......................................................................... 9

VI. Wstawianie grafiki i tła ............................................................ 10

VII. Tabele ..................................................................................... 11

VIII. Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) ... 15

IX. RAMKI....................................................................................... 17

X. Architektura informacji stron WWW ........................................ 20

DODATEK ....................................................................................... 25

Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie

2

Tylko do własnego użytku w ramach zajęć na specjalizacji Metody pracy w bibliotece: informacja naukowa.

Instytut Informacji Naukowej i Bibliotekoznawstwa

Akademia Pedagogiczna w Krakowie

Materiały edukacyjne. Egzemplarz nie jest przeznaczony na sprzedaż

Zebrał i opracował Stanisław Skórka

Kraków październik 2008

Niniejszy skrypt jest pomocą do zajęć m.in. ze specjalizacji z informacji naukowej oraz projektowania systemów informacyjnych. Powstał w oparciu o zbiór liczne publikacje z tego zagadnienia oraz na bazie doświadczeń autora, który od kilkunastu lat zajmuje się tworzeniem stron WWW. Oprócz tego wykorzystane zostały także pozycje książkowe wymienione w bibliografii.

Zagadnienia ujęte w niniejszych materiałach nie wyczerpują całości problematyki związanej z tworzeniem stron internetowych, zostały opracowane pod kątem ćwiczeń z projektowania stron o charakterze informacyjnym i edukacyjnym.

Praca składa się z rozdziałów poświęconych poszczególnym problemom projektowania stron internetowych. Na początku zamieszczony został program

zajęć dla studentów, wraz z wyszczególnieniem celów i umiejętności, jakie będą oni nabywać oraz form realizacji zajęć. Na końcu tej części znalazła się wybrana literatura oraz odnośniki do miejsc w Internecie, gdzie znajdują się wiadomości na temat projektowania.

W poszczególnych rozdziałach znalazły się wskazówki dotyczące ogólnych

wiadomości o szkielecie dokumentu html, odnośnikach, wstawianiu grafiki, tabel, ramek, arkuszy stylów. Opisano także strategię planowania architektury informacji serwisów internetowych.

Autor ma nadzieję, iż zebrane tu materiały pomogą studentom w zrozumieniu zasad tworzenia funkcjonalnych stron internetowych, jak również okażą się pomocne w zajęciach i w samodzielnej pracy.

Materiały uzupełnione są o przykłady tabel i stylów. Zawartość będzie modyfikowana i aktualizowana sukcesywnie wraz z rozwojem technologii projektowania serwisów WWW.

Wszelkie komentarze i uwagi proszę wysyłać na adres: [email protected]

Stanisław Skórka

mailto:[email protected]


3

Metody pracy w bibliotece: informacja naukowa

Projektowanie stron WWW Syllabus

PROGRAM ZAJĘĆ

1. Opis celów.

1.1. Posługiwanie się Internetem w działalności informacyjnej i

edukacyjnej.

1.2. Zastosowanie architektury informacji w planowaniu i projektowaniu

stron i serwisów internetowych.

1.3. Poznanie języka HTML (HyperText Markup Language), XHTML,

CSS znajomość podstawowych pojęć (hipertekst, hipermedia, WWW,

DHTML, JavaScript, Script, przeglądarka, edytor HTML, gif, jpeg,

odsyłacz, znacznik, znaki specjalne, itp.)

1.4. Gromadzenie, opracowywanie i udostępnianie (prezentacja) informacji

w Internecie.

1.5. Umiejętność tworzenia stron WWW (World Wide Web), według

aktualnych wymagań i standardów (tabele, ramki, style, kolorystyka).

1.6. Posługiwanie się programami komputerowymi jak np.: edytor HTML,

klient FTP, edytor tekstu i in., do projektowania strony WWW.

1.7. Wykorzystywanie grafiki z Internetu

1.8. Znajomość zasad budowy funkcjonalnych i efektywnych w użyciu

serwisów WWW

1.9. Wykonanie samodzielnie serwisu internetowego na wybrany temat

2. Opis treści

2.1. (4 godz.) Wprowadzenie do programowania. Cechy języka HTML,

XHML zasady tworzenia dokumentu hipertekstowego. Podstawowe

polecenia (znaczniki, ang. tags).

2.1.1. charakterystyka języka HTML 4.01 i jego wersji, rola W3C w

rozwoju języka.

2.1.2. podstawowe elementy strony WWW (html, head, title, body,

meta)

2.1.3. sposób kodowania polskich znaków, opis zawartości treściowej strony

(słowa kluczowe Keywords, opis Description)

2.1.4. „etykieta webmastera”, czyli zasady, jakimi powinien się kierować

projektant stron WWW.

2.1.5. zaprojektowanie prostej strony w oparciu o Pajączka 2000 – edytor stron

WWW

2.1.6. porównanie sposobu prezentacji tego samego dokumentu w

przeglądarkach Mozilla, Opera i Internet Explorer

2.2. (6 godz.) Projektowanie strony prywatnej. Użycie odsyłaczy (odnośników,

hiperłączy - ang. links). Wykazy (listy numerowane i nienumerowane). Obsługa

edytora stron WWW Pajączek 2000.

rola odsyłaczy w dokumencie hipertekstowym,

rodzaje odnośników: etykieta (kotwica), odsyłacz

konstrukcja odnośników:

<a name=”etykieta”></a>;

<a href=”adres_strony”></a>

postać odnośnika (tekst, ilustracja, animacja).

stosowanie wykazów (list uporządkowanych i nieuporządkowanych),

Zadania:

1. Wykonanie strony na wybrany temat

2. Przygotowanie projektu pracy zaliczeniowej

2.3. (15 godz.) Elementy Kaskadowego arkusza stylów, wykorzystanie skryptów

języka JavaScript na stronie WWW.

2.3.1. rodzaje stylów: a\ dołączone do zewnętrznego arkusza (plik.css)

b\ zagnieżdżone

<style type=”text/css”></style>

c\ importowane

d\ lokalne

e\ klasy i identyfikatory

class=”klasa”; ID=”identyfikator”)

f\ rozciąganie stylu, bloki

<span></span>; <div></div>


4

przykłady skryptów i ich rola w dokumencie hipertekstowym

2.4. (5 godz.) Wykorzystanie grafiki na stronie WWW. Programy

graficzne i podstawy ich obsługi. Formaty plików graficznych: .gif,

.jpg.

wady i zalety stosowania grafiki w dokumencie HTML,

wstawianie grafiki do dokumentu:

<img src=”nazwa_pliku”>

poznawanie programów graficznych, Paint Shop Pro,

Micrografx, podstawowe operacje przy obróbce ilustracji dla

strony hipertekstowej,

sposób prezentowania grafiki w sieci, formaty plików i różnice

pomiędzy nimi: gif (256 kolorów), jpeg (16 mln kolorów)

tło w doku mencie, kolor i grafika jako tło.

Zadanie:

Projektowanie strony na wybrany temat (praca zaliczeniowa)

Forma realizacji: praca indywidualna studentów

3. Materiały wytworzone przez uczestników zajęć.

Podstawowym materiałem wykonanym na ćwiczeniach będzie samodzielnie

opracowany i zaprojektowany zbiór stron składający się z kilku dokumentów

WWW połączonego hipertekstowo z zastosowaniem wyżej wymienionych

elementów języka HTML. Praca ta zostanie przygotowana na dyskietce lub na

komputerze w pracowni, a następnie oddana do zaliczenia

Ocena serwisu wykonanego przez studenta będzie średnią z trzech ocen według

kryteriów zaliczanych do architektury informacji: ocena za system organizacji

treści, za system nawigacji i za szatę graficzną (layout)

Zaprojektowane strony mogą być powiązane według czterech sposobów:

sekwencyjnie:

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

wwwwwwww

w

Eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeee

Oooooooooosss

ssssssssssooooo

ooooos,lmncfjdjd

jdjdjdjdjdididkcici

c i i i i ii i i

icidisixkxkxixicic

ickc

hierarchicznie:

jjjjjjjjjjjjjjjjddd

dddddddddddjh

hhhhhhhhhhhhhh

heeeeeeeeeeeee

eeeeeeeeeeeeee

eeeeeeeeeeeeee

eIiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhh

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeee

seryjnie:

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

yyyyyyyyyyyyy

Ggggggggggggg

ggggggggggggg

gggggggggg

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhhhhhh

Lllllllllllllllllllll

llllllllllllllllllllllllllllllll

llllllllllllllllllllllllllllllll

llllllllllllllllllllllgggg

ggggggggggggg

ggggggggggggg

ggggggggg

ssssssssssssssss

sssssssssdddddd

ddddddddddddd

ddddddddddddd

ddddddddddddd

ddddddddddddd

dddd

wirtualnie:

Ffffffffffffffffff

fffff333eeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeefffffffff

ffffffffffff333

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeeeeeeeee

eeeeeefffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

ffffffffffffff

hhhhhhhhhhhhh

hhhhhhhhhhhhh

hhhhhhhhhhfffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffffffffffff

fffffffffff

uuuuuuuuuuuuu

uuuuuuuuuuuuu

uuuuuuFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFFFFFFFF

FFFFFYYYYY

YYYYYYYY

Y

Wykonane strony będą dotyczyć konkretnej dziedziny lub zjawiska związanego z pracą

dydaktyczną i informacyjną biblioteki.

4. Umiejętności nabyte podczas zajęć.

Do podstawowych umiejętności, jakie student powinien opanować należy:

1/ Projektowanie dokumentów hipertekstowych zgodnie z aktualną specyfikacją języka

HTML.

2/ Planowanie projektu stron oraz przebiegu pracy

3/ Wykorzystywanie elementów multimedialnych (ilustracja, dźwięk, film i animacja) do

wzbogacenia treści strony.

4/ Odnajdywanie informacji w Internecie.

5/ Znajomość podstaw architektury informacji dla stron WWW

6/ Ściąganie i wysyłanie plików za pomocą klienta FTP.


5

7/ Posługiwanie się witryną WWW w zakresie gromadzenia, przechowywania i

prezentowania informacji, oraz wykorzystywanie Internetu w działalności

dydaktycznej i informacyjnej biblioteki lub ośrodka informacji.

5. Ocena kursu

51-60 pkt. – ocena dst

61-70 pkt. – ocena + dst

71-80 pkt. – ocena db

81-90 pkt. – ocena + db

91-100 pkt. – ocena bdb

6. Prace studentów

- opracowanie planu serwisu internetowego (10)

- przygotowanie projektu organizacji serwisu (15)

- przygotowanie projektu nawigacji serwisu (15)

- zaprojektowanie układu elementów na stronach (layout) (15)

- wykonanie serwisu internetowego (min. 5 stron) (30)

Na ostateczną liczbę punktów wpływa również poziom przygotowania studenta

na zajęciach oraz frekwencja.

7. Literatura zalecana

Książki:

1. S. Krug: Nie każ mi myśleć. O życiowym podejściu do funkcjonalności

stron internetowych. Gliwice 2006. Wyd. 2.

2. E. Meyer, CSS wg Ericha Meyera. Gliwice 2005

3. J. Cohen: Serwisy WWW. Projektowanie, tworzenie i zarządzanie.

Gliwice 2004.

4. J. Nielsen: Projektowanie funkcjonalnych serwisów internetowych.

Gliwice 2003.

5. L. Rosenfeld, P. Morville: Architektura informacji w serwisach

internetowych. Gliwice 2003. Wyd. 2.

6. R. Williams, Jak składać tekst? Komputer nie jest maszyną do pisania.

Gliwice 2003. Wyd. 2

7. M. Pearrow: Funkcjonalność stron internetowych. Gliwice 2002.

8. B. Danowski, Kaskadowe arkusze stylów. Ćwiczenia praktyczne. Gliwice 2001

9. Z. Płoski, Komputer, Internet. Szkolny słownik. Wrocław 2001

10. R. Płatek, Z. Okoń, Pajączek najlepszy polski edytor stron WWW. Gliwice 2000.

11. B. Danowski,, HTML 4. Ćwiczenia praktyczne. Gliwice 2000

12. M. Sokół, Tworzenie stron WWW. Ćwiczenia praktyczne. Gliwice 2000

13. D. Siegel: Tworzenie stron WWW. Bielsko-Biała 1998

14. J. Szaniawski: Duży słownik informatyczny. Warszawa 1997

15. P. Wimmer: HTML stare i nowe. Warszawa 1997

16. M. Kasperski, A. Boguska-Torbicz, Projektowanie stron WWW. Użyteczność w

praktyce. Gliwice 2008.

Każda książka opisująca metodykę tworzenia stron WWW w języku HTML 4.0,

XHTML i CSS

Czasopisma:

1. HTML i Java. Chip Special. 1997 nr 3 (kwiecień).

2. M. Pawlak: HTML po raz czwarty // W: Chip 1998 nr 2, s. 128-137

3. M. Pawlak: Internetowe DTP //W: Chip 1998 nr 3, s. 152-156.

4. Kurs języka HTML w odcinkach w miesięczniku CHIP, numery: 5/98, 6/98,

7/98, 8/98, 10/98 (5 odc.)

5. K. Grzenkowicz: Grafika dla webmastera.. W: Magazyn Internet, nr 6-12/98 i

1/99 (8 odc.)

6. Strony WWW bez tajemnic. CHIP Special nr 13 (36), grudzień 1999.

7. J. Rafa, Poradnik praktyczny. Część 5. Tworzenie stron WWW. Magazyn

Internet nr 6/2002

8. Mój serwis WWW. CHIP 2004 nr 2, s. 22-46

Strony WWW (Netgrafia):

1. CSS Templates [http://www.ssi-developer.net/main/templates/]

2. Dynamic Drive CSS Library: [http://www.dynamicdrive.com/style/]

3. Eric Meyer on CSS [http://www.ericmeyeroncss.com/dloads/]

4. Kurs języka HTML P. Wimmer: [webmaster.helion.pl]

5. WEBDESIGN w praktyce J.Stychut: [webdesign.art.pl/index.htm]


6

6. BRAMA - informacje na temat projektowania stron WWW P.

Andrusiewicz: [www.wsp.krakow.pl/~andrus/brama.shtml]

7. WEBMASTER – czasopismo online dla profesjonalnych twórców

stron WWW: [webmaster.pckurier.pl ]

8. WebReporter: [web.reporter.pl/html]

9. Test działania składni HTML: web.reporter.pl/html/testy/

10. Designing Web Navigation:

[www.webreference.com/dlab/9705/index.html]

11. Artykuł: Architektura informacji. Nowy kierunek rozwoju

informacji naukowej. [ebib.oss.wroc.pl/2002/40/skorka.php]

Opracował dr Stanisław Skórka

Notatki

http://web.reporter.pl/html

http://web.reporter.pl/html/testy/

http://www.webreference.com/dlab/9705/index.html


7

I. Wstęp Strona WWW jest plikiem tekstowym zapisanym najczęściej w formacie html

(ale może to być także php, shtml, i inne) aby zaprojektować stronę wystarczy

zwykły Notatnik z Windows, by móc oglądać jej zawartość potrzebna jest

przeglądarka stron WWW (Internet Explorer, Mozilla, Netscape).

Sieć złożona ze stron WWW wzajemnie połączonych za pomocą odsyłaczy

hipertekstowych (linków) nazywana jest World Wide Web (globalną pajęczyną)

Skrót html oznacza język projektowania: Hypertext Markup Language (język

hipertekstowego znakowania dokumentów), aby strona była widoczna w

przeglądarce trzeba ją zapisać jako plik „.html”, np.: index.html, default.html, itp.

Aby przygotować własną stronę (witrynę) przede wszystkim należy zaplanować

przebieg pracy, można to zrobić opierając się na następujących fazach:

1. Faza analityczno-projektowa

analiza wymagań

ustalenie zasad pracy

plan realizacji

projekt podziału treści i szaty graficznej

projekt nawigacji i rozmieszczenia elementów na stronie

(layout)

2. Realizacja projektu

3. Testowanie i wdrożenie

4. Promocja

5. Zarządzanie i aktualizacja

Więcej na ten temat w rozdziale X. Architektura informacji

Projektowanie w języku HTML polega na formatowaniu tekstu za pomocą

znaczników (tags), są dwa rodzaje znaczników: blokowe (występują parami,

np.: <P></P>), oraz elementowe (pojedyncze, np.: <BR>). Działanie

znacznika blokowego obejmuje tekst, który jest nim ujęty, np.:

<strong>to jest tekst pogrubiony</strong> Znaczniki <B> oznaczają pogrubienie tekstu, który znajdzie się pomiędzy nimi.

Znacznik elementowe „działają” w jednym miejscu w dokumencie, np.:

<strong>to jest tekst pogrubiony</strong >,<br> <em>a to jest kursywa</em>

<BR> - przejście do następnej linii. Znacznik <EM></EM> formatują tekst na postać

kursywy

W obrębie znaczników, zarówno blokowych, jak i elementowych znajdować się mogą

atrybuty dokładniej charakteryzujące dany element, np. ilustrację

<img src="imagi2/bmiecznik.jpg" width="239" height="265" border="0"

alt="rozmiar: 31682 bajtów">

Atrybuty:

src- nazwa pliku graficznego, np.: logo.gif width – szerokość obrazka,

height – wysokość obrazka

border – grubość ramki wokół obrazka

alt – tekst zastępczy

Więcej na ten temat w rozdziale IV. Wybrane znaczniki

Więcej na ten temat w rozdziale VI. Wstawianie grafiki i tła

Atrybuty są przydatnym narzędziem dla webmastera ze względu na możliwość

sprecyzowania wyglądu danego elementu na ekranie, przy jednoczesnym uniemożliwieniu

wstawiania wartości domyślnych przez przeglądarkę. Używanie atrybutów skraca czas

ładowania się strony w oknie przeglądarki. Najwięcej możliwości formatowania dają

jednak kaskadowe arkusze stylów.

Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów

II. Warsztat webmastera

Do projektowania stron internetowych potrzebne są programy, z których duża cześć jest

dostępna za darmo, niestety czasem nie idzie to w parze z jakością.

1. Edytor stron WWW, np.: EzHTML (darmowy), Pajączek, Tiger 98, WebPager,

Xpress (darmowy), lub edytor tekstu (Notatnik Windows),

2. Przeglądarki WWW, co najmniej dwie: Netscape Navigator/Communicator 6.x (pol.

wersja Mozilla 1.x) i MS Internet Explorer PL 6.x

3. Program do obróbki grafiki rastrowej: Paint Shop Pro 6.x – X, , Adobe Photoshop,

GIMP (freeware), PaintNET (freeware)


8

4. Jeżeli edytor stron WWW nie ma takiej opcji, to należy jeszcze zaopatrzyć

się w konwerter z Win-1250 (Latin 1) na stronę kodową ISO 8859-2 (Latin

2) – Ogonki 97

Dodatkowo:

5. Program do tworzenia gifów animownych: Jasc Animated Shop 2.02, Gif

Dispenser 1.0, Ulead Gif Animator 4.0, Gif Movie Gear 2.63

6. Galerię clipartów – zbiór adresów do grafik, ilustracji, tekstur i innych

przydatnych na stronach WWW obrazków, dostępnych w Internecie pod

adresem:

http://webmaster.helion.pl/kurshtml/zasoby/grafika.html

http://www.kathais.px.pl/AGWWW/AGWWW.html

III. Szablon strony WWW

Podstawowy szablon dokumentu HTML przedstawia Rys. nr 1. Jest to tylko

osnowa, aby dokument zawierał treść lub grafikę na ekranie, należy wstawić

odpowiednie znaczniki w sekcji <body> </body>.

Strona WWW zaczyna się i kończy znacznikiem <HTML>, wewnątrz znajdują

się dwie oddzielne sekcje <HEAD>, czyli głowa i <BODY> - ciało

dokumentu.

W sekcji HEAD umieszcza się tzw. metainformację (informację o informacji)

o stronie, znaczniki <META>, ich zadaniem jest przechowywanie informacji o

treści strony: Description, Keywords, autorze strony Author, stronie kodowej

Content-type, języku treści strony Content-language. Informacje te są

przydatne między innymi dla zindeksowania strony przez tzw. roboty

wyszukiwarek, co pozwala na ich odnalezienie za pomocą wyszukiwarek

internetowych (Google, Szukacz, itp.)

Rys. 1 Szablon dokumentu html

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Creation-date" content="2004-02-26T21:29:01Z" /> <meta http-equiv="Content-Language" content="pl" /> <meta name="Description" content="Strona na temat..." /> <meta name="Author" content="Imię nazwisko" /> <title>Strona WWW</title> </head> <body> <h1>Tytuł strony</h1> </body> </html>

Rys. 2: Budowa hierarchiczna dokumentu HTML

Hierarchia dokumentu html zawiera:

http://webmaster.helion.pl/kurshtml/zasoby/grafika.html

http://www.kathais.px.pl/AGWWW/AGWWW.html


9

Drzewo dokumentu (document tree) - hierarchiczny układ elementów

HTML zakodowanych w dokumencie; każdy element ma dokładnie

jednego rodzica, oprócz elementu najwyższego w hierarchii.

Dziecko (child) - element będący o jeden szczebel niżej w drzewie w

stosunku do danego elementu.

Potomek (descendant) - element będący o jeden lub więcej szczebli

niżej w drzewie w stosunku do danego elementu.

Rodzic (parent) - element o jeden szczebel wyżej w drzewie w

stosunku do danego elementu.

Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej

w drzewie w stosunku do danego elementu.

Brat (sibling) - element mający tego samego rodzica co inny element;

jeśli znajduje się obok niego, to jest to brat przylegający (adjacent

sibling).

IV. Wybrane znaczniki

Znaczniki blokowe

<a href=""></a>

<a name=""></a>

<body></body>

<div></div>

<em></em>

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

<strong></strong>

<ol> <li> … </li> lista numerowana

</ol>

<p></p>

<span></span>

<sup></sup>

<title></title>

<ul> <li>… </li> <li>… </li> wypunktowanie </ul>

Znaczniki elementowe

<br>

<hr>

<meta name="" content="">

<img src="">

V. Odsyłacze (linki)

Odsyłacze są podstawowym narzędziem nawigacji, dzięki któremu możliwe jest poruszanie

się pomiędzy stronami. Istnieje wiele podziałów hiperłączy, w jednym z nich wyróżnia się

odsyłacze semantyczne (OS) i organizacyjne (OO). OS kierują do tekstu lub dokumentu o

podobnej tematyce, OO umożliwiają poruszanie się po poziomach i rozdziałach w danej

hiperprzestrzeni. Z punktu widzenia webmastera odsyłacze można podzielić wg kryterium

zastosowania. I tak, wyróżnia się odsyłacze kierujące do:

a) stron WWW (zewnętrzne)

b) usług sieciowych (e-mail, ftp, CHAT)

c) etykiet (tekstu w obrębie dokumentu - wewnętrzne)

d) innych dokumentów, np.: txt, PDF, doc, itp.

Ad. a) hiperłącze do stron(y) WWW może mieć dwojaką postać:

- względną

<a href="strona.html" title="to jest treść dymka">etykieta odsyłacza</a>


10

- bezwzględną

<a href="http://www.ap.krakow.pl/kbin/html/szablon.html"

title="to jest treść dymka">szablon strony www</a>

HREF – skrót od hypertext reference

TITLE – opis odsyłacza, informacja, dokąd kieruje

Ad. b) odsyłacz uruchamiający klienta poczty elektronicznej

<a href="mailto:[email protected]" title="mój e-mail">[email protected]</a>

- uruchamiający sesję FTP:

<a href="ftp://sunsite.icm.edu.pl" title="ftp">serwer ftp</a>

Ad. c) Składa się z dwóch członów:

- odsyłającego (np.: jako fragment spisu treści):

<a href="#01">rozdział 1</a>

- etykiety – umieszczonej gdzieś na stronie

<a name="01">rozdział 1</a>

Najpopularniejsze zastosowanie to spisy treści i powrót na początek strony:

<a href="#top">początek strony</a>

W przeglądarce MSIE 6.x nie jest konieczne zastosowanie etykiety

<a name=”top”></a>

Ad. d) kieruje do dokumentu nie będącego stroną WWW, takich jak: txt, doc

czy pdf , np.:

<a href="teksty/referat.pdf" title="tekst referatu">referat w wersji

on-line</a>

Adresy stron WWW powinny być pisane małymi literami bez polskich znaków,

podobnie nazwy plików html.

VI. Wstawianie grafiki i tła Pliki graficzne mogą być udostępniane na stronie WWW w formacie GIF (do 256 kolorów)

i JPG (16 mln kolorów). Format GIF nadaje się do napisów, ponieważ potrafi zachować

przezroczyste tło, ale ma małą liczbę kolorów. Format JPG jest najlepszy do kolorowej

fotografii i obrazów.

1. Wstawianie grafiki do dokumentu

Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny">

IMG - skrót od słowa image (ilustracja), SRC - skrót od słowa source (źródło)

2. Warianty wyświetlania ilustracji:

* wielkość modyfikujemy atrybutami: width (szerokośc) i height (wysokość),

jednostką miary są piksele

Np. <img src="krajobraz.gif" width=”200” height=”50” alt=”Krajobraz

górski”> - atrybuty te przyspieszają ładowanie się obrazka.

obramowanie: parametr BORDER=x pozwala wyświetlić wokół obrazka

ramkę o grubości równej x pikseli:

Np. <img src="krajobraz.gif" width=120 height=160 alt=”Tekst

zamienny” style=”border: 5px solid black”> - gdy ilustracja jest odsyłaczem parametr BORDER: 0px spowoduje, że nie pojawi się

ramka wokół ilustracji.

* odstępy od tekstu: parametry VSPACE (vertical space) i HSPACE (horizontal

space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu:

Np. <img src="obrazek.gif" width=120 height=160 alt=”tekst zamienny”

hspace=”50”> - ten obrazek jest oddalony 50 pikseli od tekstu w poziomie

pozycjonowanie obrazka (CSS): specjalny zespół parametrów,

text-align:”left/right” lub float: left/right steruje pozycją obrazka w stosunku

do oblewającego go akapitu. Konstrukcja ma postać


11

Np. <IMG SRC="obrazek" style=”text-align: right;”> lub

<IMG SRC="obrazek" style=”float: right”> oblewanie tekstu z

prawej strony

Jeśli obrazek ma być na środku strony to należy ująć go pomiędzy znaczniki :

<div style=”text-align: center”> <img src=”…” …>

</div>

Duże ilustracje można pokroić na określoną liczbę kawałków, a następnie

wstawić je do tabeli, pozwoli to na szybsze ładowanie się całego obrazka.

Więcej na ten temat w rozdziale VII. Tabela pkt. 3.

Aby przyspieszyć ładowanie się grafiki można na stronie poprzedzającej

wstawić znacznik ilustracji z atrybutami szerokości i wysokości równymi 1,

np..:

<img src="obrazek.gif" width=”1” height=”1” hspace=0

vspace=”0”>

3. Tło na stronie WWW.

Definiując <BODY> możemy wstawić parametr, który zadecyduje o graficznej

postaci strony.

<body style=”background: url(adres_obrazka)”> albo kolor

Np. <body style=”background: #fff">

- wywołanie pliku .jpg z folderu „images”

dodatkowy parametr: bgproperties=”fixed” spowoduje, że w

przeglądarce IE 4.x tło będzie stało w miejscu, a tekst przesuwał.


VII. Tabele 1. Podstawy projektowania tabel. Adaptując tabele dla potrzeb WWW kierowano się głównie potrzebą prezentacji

danych tabelarycznych w postaci takiej, jaką widzimy w książkach czy

prezentacjach multimedialnych. O ile w edytorach tekstów służą one głównie do

tego właśnie celu, to w przypadku projektowania dokumentów hipertekstowych pole do

zastosowania tabel jest znacznie szersze. Ale zacznijmy od podstaw.

Aby zobaczyć jakąkolwiek tabelkę w oknie przeglądarki trzeba wpisać jej ogólne ramy bez

atrybutów.

<table border=”1”> <tr>

<td> zawartość komórki 1</td><td> zawartość komórki 2</td>

</tr> <tr>

<td> zawartość komórki 3</td><td> zawartość komórki 4</td> </tr>

</table>

Otrzymamy:

Zawartość komórki 1




Definicja tabeli musi być umieszczona między tymi dwoma znacznikami <TABLE>, które

stanowią jej ograniczniki. W ich ramach są umieszczane definicje rzędów <TR>, definicje

komórek w rzędach <TD>, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i

kolumn <TH>.

Tabela w HTML samodzielnie rozkłada kolumny na stronie, dostosowuje ich szerokość i

wysokość a także zawartość.

Ćwiczenie:

Zaprojektuj tabelkę z trzema kolumnami i pięcioma wierszami (zob. poniżej).

1

2

3

4

5


12

Aby tabela zawierała obramowanie, wystarczy rozszerzyć definicję o atrybut

BORDER=”n”, gdzie n - liczba pixeli.

Niekiedy „wyłącza się” obramowania, gdyż dodatkowe linie wpływają ujemnie

na jej czytelność. Zamiast obramowania najlepiej jest wyróżnić tekst w

komórkach: pogrubieniem, kursywą lub inną czcionką itd.. Efekt bez

obramowań osiąga się poleceniem: BORDER=”0”

2. Odstępy wewnątrz tabeli. Wyrównanie danych w komórkach

Kolejnym atrybutem pozwalającym modyfikować wygląd tabeli jest

CELLSPACING - odległość między komórkami, czyli grubość

obramowania, jeśli jest ono widoczne.

Można go użyć wówczas, gdy komórki (nie tabela) mają zawierać inne

obramowanie niż domyślne. Innym atrybutem znacznika TABLE jest

CELLPADDING - odstęp zawartości komórki od obramowania. Obydwa

atrybuty działają na wszystkich czterech ścianach komórki.

Np.:

<table border=”5” cellpadding=”8” cellspacing=”15”>

<tr>

<td> </td> </tr>

<tr> <td> </td>

</tr>

</table>

Zarówno całą tabelę, jaki i zawartość w jej komórkach (celach) można ustawiać

w poziomie i pionie. Pierwszy sposób zapewnia atrybut ALIGN, użycie go

razem ze znacznikiem TABLE powoduje wyrównanie całej tabeli, wiersza,

komórki. W pionie ustawiamy zawartość poprzez atrybut VALIGN

Np.:

<table border=”5” cellpadding=”8” cellspacing=”15”

align=”right”>

Ta tabela będzie znajdowała się przy prawym marginesie (zob. poniżej), inne

polecenia: left (lewy) i center (środek)

wiersz 1

wiersz 2

<tr><td align=”left”></td></tr> Dane w tej komórce przesuną się do lewego marginesu, to samo można zaprojektować dla

kolumny w obrębie wiersza.

Np.

<td align=”center”></td> Oprócz wyrównania poziomego dane w kolumnach możemy wyrównywać pionowo za

pomocą parametru VALIGN, który może przybierać następujące wartości: top (góra).

middle (środek), bottom (dół).

<td valign=”top”></td>

<td valign=”middle”></td> <td valign=”bottom”></td>

3. Szerokość i wysokość tabeli

Aby określić szerokość tabeli w obrębie znacznika TABLE umieszcza się atrybut WIDTH.

Wartość tego parametru można wyrazić w procentach (wielkość względna) lub pikselach

(wielkość bezwzględna) Np.

<TABLE BORDER WIDTH=”60%”> </TABLE>

lub

<TABLE BORDER WIDTH=”600”> </TABLE>

Wysokość tabeli oznacza się atrybutem HEIGHT

Wielkości bezwzględne najlepiej jest stosować, gdy w komórkach tabeli znajdują się

elementy obrazka, w przeciwnym wypadku pojawią się przerwy pomiędzy kawałkami

obrazka.

góra

środek

dół


13

Rys. nr 3

Wielkości względne dopasowują się do okna i rozdzielczości monitora, najlepiej

je stosować, gdy w tabeli znajduje się tylko tekst.

4. Atrybuty COLSPAN i ROWSPAN

COLSPAN - liczba kolumn, na które rozciąga się komórka (przykład nr 1)

ROWSPAN - liczba wierszy, na które rozciąga się komórka (przykład nr 2)

Przykład nr 1 <table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td colspan="2">kolumny połączone</td> </tr> <tr> <td width="20%">kolumna lewa</td>

<td width="80%">kolumna prawa</td> </tr> </table>

Widok:

Kolumny połączone

Kolumna lewa

Kolumna prawa

Przykład nr 2:

<table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="20%" rowspan="2">wiersze połączone</td> <td width="80%">komórka górna</td> </tr> <tr>

<td>komórka dolna</td> </tr>

Widok:

Wiersze połączone

Komórka górna

Komórka dolna

5. Tabele i arkusze stylów Tabelę można zaprojektować także za pomocą stylów, co pozwala na precyzyjniejsze jej

dostosowanie do własnych celów.

Każdemu elementowi tabeli (komórce, ramce) można nadać inną postać.

Poniżej zamieszczono cechy oraz ich wartości przydatne przy projektowaniu tabel.

border-bottom-style - styl określa wygląd dolnej ramki border-left-style - styl określa wygląd lewej ramki border-right-style - styl określa wygląd prawej ramki border-top-style - styl określa wygląd górnej ramki Wartości stylu:

none - nie ma ramki, wartość domyślna hidden - linia ukryta dotted - linia składająca się z kropek dashed - linia składająca się z kresek solid - linia tradycyjna groove - linia wklęsła przestrzenna ridge - linia wypukła przestrzenna inset - linia wklęsła outset - linia wypukła double - linia podwójna inherit - przejęcie wartości "rodzica",

border-left-width - styl określa szerokość lewej ramki -right-width -bottom-width -top-width border-bottom-color - styl określa kolor dolnej ramki -left-color - styl określa kolor lewej ramki -right-color - styl określa kolor prawej ramki -top-color - styl określa kolor górnej ramki

http://web.reporter.pl/html/?id=3014










14

Przykład 1. Tabela z zastosowaniem stylów

<table style="border-style: dotted; border-width: thin; border-color: #86708f; padding: 0px; width: 730; text-align: center; vertical-align: top"> <tr> <td>

<p>komórka lewa</p> </td> <td>

<p>komórka prawa</p> </td> </tr> </table>

Przykład 2

<table style="border-top-style: dotted; background-color: #eeeeee ; width: 70%; height: 20%"> <tr><td> <p>Pojedyncza komórka</p> </td></tr></table>

Tabelę można konstruować także za pomocą znacznika DIV:

<div style="position: absolute; left: 400px;

top: 195px; height: 160px; width: 270px;

background-color: #E2DDE8; border : 1px black solid;

border-color: #000033; padding-right: 1px; padding-left :

2px;">

<p>Komórka tabeli</p>

</div>

NOTATKI



15

VIII. Kaskadowe arkusze stylów

(CSS - Cascading Style Sheets)

Ogólne polecenie stylu ma postać: selektor { cecha: wartość } lub bardziej

rozbudowaną: selektor { cecha1: wartość1; cecha2: wartość2 }.

Gdzie selektorem jest po prostu polecenie języka, np. P, LI, TD, BODY itd.

Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla

akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki.

Przykład nr 1 P {font-family: Trebuchet MS }

Selektorem jest P, cechą - rodzina czcionek, wartością - Trebuchet MS.

Style mogą być umieszczane w dokumencie na kilka sposobów:

1. Kody formatujące są umieszczane na początku strony i oddziałują na cały

dokument.

NP.: Fragment nagłówka dokumentu z definicją znaczników BODY i P

2. Kody formatujące są umieszczane w środku tekstu (in-line style) i dotyczą

wybranego znacznika dokumentu (styl lokalny).

NP.: Właściwości ujęte w cudzysłów dotyczą tylko części dokumentu objętej

znacznikami <P></P>

<P style="font-size: 12pt; font-weight: bold; font-family: Helvetica">Treść akapitu</P>

3. Klasy, obejmują dowolny fragment dokumentu i nie są związane z wybranymi

znacznikami.

NP.: Dają dużo możliwości webmasterowi, pozwalają dowolnie manipulować akapitami

na stronie WWW. U dołu klasy dla znacznika <P>, rozpoczynają się od kropki.

<head> <style type="text/css"> p.normalny {font-family: helvetica; font-size: 10pt}

.przypisy {font-family: helvetica; font-size: 8pt} .uwagi {font-family: helvetica; font-size: 10pt; font-

weight: bold} .istotne {font-family: georgia, serif; font-size: 12pt; color: red} .ustaw {position: absolute; left: 2px; top: 3px; right: 10px; bottom: 10%}

</style> </head> <body> <p class=”istotne”>Jakiś tekst</p> </body>

W głównej części dokumentu klasa zostaje wstawiona w obrębie nawiasów „<>”

4. Kody formatujące są umieszczane na wzorcowych stronach na serwerze, a

w dokumentach wstawiamy odpowiednie odwołania do tych stron, co

powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do

tzw. stylów zewnętrznych.

NP.: Dokument o nazwie mojstyl.css zawiera zdefiniowane różne elementy, takie jak: body, p., a, h1-h3, td, li

<head> <meta http-equiv="content-type" content="text/html;

charset=iso-8859-2"> <title>Zagnieżdżanie arkusza stylów</title > <meta name="description" content="style"> <style type="text/css">

body {margin-top: 0px; background-color: #ffffff; color:

#000000; scrollbar-face-color: #d8c094;

scrollbar-highlight-color: #aab0bf;

scrollbar-3dlight-color: #271e0e;

scrollbar-darkshadow-color: #c0dcc4;

scrollbar-shadow-color: #271e0e;

scrollbar-arrow-color: #000000;

scrollbar-track-color: #425241; }

p {font-size: 10pt; font-family: “arial”, helvetica; font-weight: normal}

</style> </head>


16

body {background-image: url(folder/plik.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed;; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm}

p {font-family: "arial", verdana, helvetica; font-size: 10pt; font-weight: normal; text-indent: 3 em} a {text-decoration: none; font-weight: bold} a:link {color: #000000} a:active {color: #660000}

a:visited {color: #666600} a:hover {color: #0066ff} h1 {font-size: 16pt; font-family: verdana, arial, helvetica; font-weight: bold; color: #000000}

h1 span {font-size: 14pt; color: navy} h2 {font-size: 14pt; font-family: arial, helvetica; font- weight: bold; color: #181539} h3 {font-family: arial, helvetica; font-weight: bold; color: #181539}

table, tr, td {font-family: arial, helvetica; font-size: 10pt; font-weight: normal}

li {font-family: "arial", helvetica; font-size: 10pt; font- weight: normal} #center {text-align: center} .maly {font-size: 8pt}

.italic {font-style: italic}

Dokument ten znajduje się na serwerze pod podaną wyżej nazwą, korzystają z

niego wszystkie te strony, które w nagłówku <HEAD> mają następujący zapis:

<link rel=stylesheet href="mojstyl.css" type="text/css">

5. Kody formatujące są importowane z innej strony za pomocą polecenia

@import.

Np.: Podany jest adres bezwzględny do arkusza stylów mojstyl.css

<style>

@import url("http://www.polbox.com.pl/style/mojstyl.css"); </style>

Przyklad interaktywnego menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <title>1</title> <meta http-equiv="Content-Language" content="pl"> <meta name="Author" content="Jacek"> <style type="text/css"> #menu {margin: 0 0 0 0; width: 200px; border-right: 1px dotted; } #menu ul {list-style-type: none; margin: 0; padding: 0} #menu li a {padding: 3px 3px 3px 5px; display: block; background: #09C; border-

bottom: 1px solid #fff; height: 35px; font: 9pt 'Trebuchet MS', 'Lucida Grande', Arial, sans- serif; color: #fff; text-decoration: none; border-right: 5px solid #42D0FF}

#menu li a:visited {color: #DBE3F7} #menu li a:hover {background: #F60; color: #000; border-right: 5px solid #fff} </style> </head> <body style="margin: 0 0 0 0"> <div id="menu"> <ul> <li><a href="" title="">Okładka</a></li> <li><a href="" title="">Karty tytułowe</a></li> <li><a href="" title="">Materiały wprowadzające</a></li> <li><a href="" title="">Tekst główny</a></li> <li><a href="" title="">Materiały uzupełniające tekst główny</a></li> <li><a href="" title="">Materiały informacyjno-pomocnicze</a> </li> </ul> </div> <p><a href="05.html" title="">« poprzednia</a> <a href="01.html" title="">następna &raquo</a></p> </body> </html>


17

IX. RAMKI 1. Wstęp Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML,

pozwalają na przeglądanie wielu dokumentów równocześnie (tzw. format

metadokumentowy). Aby użyć tej nowej formy prezentacji dokumentów WWW

trzeba utworzyć zbiór ramek na stronie podstawowej *.html, na której

definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych

dokumentów w momencie uaktywnienia odsyłacza hipertekstowego. Pozostałe

strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami

podrzędnymi.

Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem

nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES

pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki

nieinterpretujące ramki. Znaczniki <BODY></BODY> mogą być umieszczane

jedynie w obrębie NOFRAMES.

2. Ramki w postaci kolumn Każdy z wydzielonych w pliku głównym obszarów jest zajmowany przez

określoną stronę. U dołu przykład strony podstawowej, objętej znacznikami

FRAMESET zamiast BODY, zawierającej podział na dwie kolumny -parametr

COLS dzieli ekran kolumny - pierwsza od lewej o szerokości 25% ekranu,

druga o rozmiarach dalszych (75%).

Znacznik FRAME i parametr SRC przypisuje określonym częściom ekranu

zawartość (czyli strony WWW), atrybut SCROLLING steruje wyświetlaniem

pasków przewijania i może zawierać wartość: „auto”, „yes”, „no”.

NAME oznacza nazwę dla określonej części ekranu.

<HTML>

<HEAD>

<TITLE>Ramki</TITLE>

</HEAD>

<FRAMESET COLS="25%,*%">

<FRAME SCROLLING="auto" NAME="lewa_część"

SRC="strona.htm">

<FRAME SCROLLING="yes" NAME="prawa_część"

SRC="strona2.htm">

</FRAMESET>

</HTML>

Ćwiczenie 1:

Przepisz przykład strony z lewej nadając mu nazwę okno.htm W miejsce nazw

„strona.htm” i „strona2.htm” wpisz nazwy dwóch stron utworzonych na poprzednich

zajęciach. Zobacz w przeglądarce jak wygląda strona okno.htm. Powinny być widoczne

dwie poprzednio wprowadzone strony

3. Ramki w postaci wierszy

Podobny schemat z wyjątkiem polecenia COLS możemy zastosować dla innego podziału

ekranu. Parametr ROWS dzieli ekran na wiersze.

Ćwiczenie 2:

Przepisz poniższy przykład strony podstawowej dla ramek i nadaj jej nazwę okno2.htm.

Dalej postępuj tak jak w ćwiczeniu nr .

<HTML>

<HEAD>

<TITLE>Ramki z wierszami</TITLE>

</HEAD>

<FRAMESET ROWS="30%,*">

<FRAME SCROLLING="auto" NAME="góra"

SRC="strona1.htm">

<FRAME SCROLLING="auto" NAME="dół"

SRC="strona2.htm">

</FRAMESET>

</HTML>

4. Ramki wielodokumentowe

Objaśnienie (do listingu poniżej)

W pierwszej linii otwieramy dokument. Konstrukcję ramek rozpoczęto od zadeklarowania

w drugiej linii liczby wierszy (trzy). W trzeciej linii od razu wstawiliśmy ramkę z

przypisaną jej stroną, gdyż wiersz nie ulega żadnemu podziałowi.


18

</HTML>

<FRAMESET ROWS=100,*,200>

<FRAME SRC=strona1.htm>

<FRAMESET COLS=35%,*,35%>




</FRAMESET>


</FRAMESET>

</FRAMESET>

</HTML>

W czwartej linii ponawiamy definicję FRAMESET (niższego rzędu), dzieląc

drugi wiersz na trzy kolumny.

W piątej, szóstej i siódmej linii wstawiamy definicje konkretnych trzech ramek

dla drugiego wiersza, przypisując im odpowiednie strony.

W ósmej linii musimy zakończyć tę "lokalną" definicję FRAMESET.

W dziewiątej linii tworzymy definicję ramki dla trzeciego wiersza, przypisując

jej odpowiednią stronę.

W dziesiątej linii kończymy "globalną" definicję FRAMESET. W jedenastej cały

dokument.

Ćwiczenie 3:

Przepisz powyższy kod dla ramki wielodokumentowej. Zamiast nazw

stronaN.htm (N - numer) wpisz nazwy stron, które zostały zaprojektowane,

zmodyfikuj wygląd tych stron, tak aby były prawidłowo wyświetlane w ramce

(formatowanie tekstu, zmniejszenie czcionki itd.)

5. Odsyłacze Co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało

odpowiednią stronę w innej ramce? Jest to podstawowa sprawa, jeśli chcemy

wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w

spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki,

a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które

nadawaliśmy poszczególnym ramkom.

Powróćmy do przykładu przedstawionego wyżej w ćwiczeniu nr 1. Strona ta składa się z

dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie

strony z opisami. Lewej nadaliśmy nazwę „lewa_część”, natomiast prawej „prawa_część”.

Należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o

nazwie „lewa_część”. Do ramki tej jest ładowana strona zawarta w pliku o nazwie -

strona.htm. Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby

kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki

o nazwie „prawa_część”. Można to uczynić za pomocą następującej konstrukcji:

<A HREF="Egipt.html" TARGET="prawa_część">EGIPT</A>

itd. Analizując poszczególne człony powyższego zapisu:

HREF="nazwa_ładowanej_strony" - dotyczy nazwy pliku, w którym jest zapisana

dana strona,

TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana

strona.

Widać tutaj rolę, jaką pełnią nazwy ramek.

Istnieją cztery zastrzeżone nazwy w przypadku atrybutu TARGET:

TARGET="_blank" - otwiera się nowe, czyste okno przeglądarki, które

pojawia się przed poprzednim

TARGET="_self" - odsyłacz ładuje się w swoim własnym okienku

TARGET="_parent - odsyłacz ładuje się w pełnym wymiarze okienka, nawet

gdy oglądamy je w innej ramce

TARGET="_top" - likwiduje wszystkie ramki i przenosi Cię pod wskazany

adres URL w czystym okienku przeglądarki,

Ćwiczenie 4:

Zmodyfikuj plik, który zastąpił w ćwiczeniu 1 plik strona.htm, wpisując odsyłacze kierujące

strony do ramki prawej nazwanej „prawa_część”,

a następnie wprowadź jeden odsyłacz kierujący wywołaną stronę do czystego okna

przeglądarki. 6. Inne parametry dla ramek Do innych atrybutów przydatnych dla ramek i stosowanych dla znacznika FRAME należą:

FRAMEBORDER - wyłączanie/włączanie obramowania

trójwymiarowego, np. FRAMEBORDER=”0” (wyłączanie),


19

MARGINHEIGHT - odstęp między górną i dolną krawędzią

ramki a jej zawartością,

MARGINWIDTH - odstęp między prawą i lewą

krawędzią a zawartością ramki,

NORESIZE - uniemożliwienie zmiany rozmiaru ramki

(normalnie można to robić)

Niektóre atrybuty w obrębie znacznika FRAMESET:

BORDER - dodatkowy odstęp pomiędzy ramkami w

pikselach,

BORDERCOLOR - kolor obramowania,

COLS - podział okna w poziomie (na kolumny),

ROWS - podział okna w pionie (na wiersze)

NOTATKI


20

X. Architektura informacji stron WWW

Projektując stronę z myślą o publikowaniu w Internecie, niezależnie od jej

przeznaczenia, należy pamiętać o tym, że będą z niej korzystać użytkownicy o

różnych umiejętnościach i wiedzy, dlatego na początku projektowania należy

wziąć pod uwagę rozmaite kryteria wpływające na jej funkcjonalność. Zespół

kryteriów uwzględnianych podczas tworzenia stron internetowych określa się

mianem architektury informacji (AI) stron WWW.

AI jest procesem organizowania, oznaczania, projektowania nawigacji i

systemów wyszukiwawczych, które pomagają użytkownikom w znajdowaniu i

zarządzaniu informacją. W Polsce ten termin nie jest jeszcze zbyt popularny, ale

w Stanach Zjednoczonych posiada już sporą literaturę i nadal się rozwija.

Przykładowy plan tworzenia architektury informacji

1. Wyznaczenie celów

2. Użytkownicy

2.1. określenie odbiorców

2.2. propozycje scenariuszy (przewidywane zachowania wyszukiwawcze

użytkowników)

3. Zawartość treściowa serwisu

3.1. grupowanie informacji

3.2. organizowanie i oznaczanie treści

4. Struktura serwisu

4.1. zaprojektowanie budowy serwisu

4.2. wykonanie szkicu serwisu

4.3. zaprojektowanie systemów nawigacji globalnej i lokalnej

5. Projektowanie szaty graficznej

5.1. rozmieszczenie elementów na stronach

5.2. szkice projektowe

5.3. wykonanie serwisu na bazie projektów

Projektowanie AI obejmuje cztery główne obszary wymienione w definicji powyżej:

1. Organizowanie informacji

2. Projektowanie systemów nawigacji

3. System oznaczeń

4. System wyszukiwawczy

1. Organizowanie informacji Pierwszym krokiem przy planowaniu serwisu internetowego jest zebranie i zorganizowanie

treści, polegające na podzieleniu całości informacji na mniejsze fragmenty, które będą ze

sobą powiązane. Jest to szczególnie ważne przy rozbudowanych serwisach tematycznych.

Podstawą organizacji treści może być przedmiot, zadanie, użytkownicy, geografia,

chronologia czy porządek alfabetyczny. Najczęstszym schematem organizowania jest

hierarchia (Rys. nr 4).

Rys. nr 4

Kryteriami, które powinien uwzględnić architekt informacji podczas tworzenia struktury

hierarchicznej dla zbioru stron, są szerokość i głębokość. Szerokość odnosi się do liczby

opcji, z których może wybierać użytkownik na danym poziomie w hierarchii, głębokość do

liczby tych poziomów w serwisie.

Wybór hierarchii powinien być uzależniony m.in. od ilości informacji, przeznaczenia

serwisu i preferencji użytkowników.

Źle zaprojektowana hierarchia sprawia, że informacje są niedostępne dla użytkowników.

Zbyt wąska i głęboka hierarchia zmusza do odwiedzani nadmiernej liczby dokumentów

podczas poszukiwań, co może stać się przyczyną zjawiska „zagubienia w hiperprzestrzeni”.

Z kolei zbyt szeroka i wąska stawia użytkownika przed wyborem jednej z bardzo wielu

opcji, zjawisko takie nazwano „przeładowaniem poznawczym”.

Dla hierarchii wąsko-głębokiej optymalnym rozwiązaniem jest podział do najwyżej pięciu

poziomów. Strona główna (powitalna) dla serwisu opartego na hierarchii szeroko-płytkiej

powinna udostępniać wybór opcji (odnośników) w liczbie ok. 7-9, nie więcej niż 10.


21

Przekroczenie tej granicy powoduje wspomniane już zjawisko „przeładowania

poznawczego”.

Rys. nr 5

Serwisy, w których planowane jest powiększanie zasobów powinny być

projektowane z zastosowaniem raczej hierarchii szeroko-płytkiej oraz

jednoznacznych oznakowań, tak, aby zminimalizować zabłądzenie w systemie.

Rys. nr 6

Oprócz hierarchicznych schematów organizacyjnych występuje także system

hipertekstowym, umożliwiający dowolne przeglądanie zasobów

Rys. nr 7

Rys. nr 7

System hipertekstowy

2. Projektowanie systemów nawigacji

System nawigacji jest podstawowym narzędziem przemieszczania się, zarówno po

niewielkich zbiorach dokumentów, jak i obszernych serwisach i katalogach stron WWW.

Jennifer Fleming scharakteryzowała potrzeby użytkownika nawigującego, które warto

wziąć pod uwagę w trakcie projektu.

1. Gdzie jestem?

2. Dokąd mogę iść (przemieścić się)?

3. Jak się tam dostać?

4. Jak wrócę do miejsca gdzie teraz jestem?

W zależności od przeznaczenia serwisu, np.: zasoby typu edukacyjnego, pojawiają się

szczegółowe potrzeby, takie jak:

Skąd powinienem zacząć?

Czy potrzebna jest mi specjalna wiedza lub narzędzie?

Jak otrzymać odpowiednią dla mnie informację?

Co zrobić, jeśli pojawią się pytania?

To tylko niektóre z potrzeb szczegółowych.

Ta sama autorka podała zasady funkcjonalnego systemu nawigacyjnego:

1. Łatwy do nauczenia

2. Konsekwentny

3. Zgodny z treścią strony (kontekstem)

4. Dostarcza informacji (interaktywny)

5. Oferuje wybór opcji

6. Używa jasnych i zrozumiałych oznaczeń

7. Zgodny z przeznaczeniem serwisu

8. Pomaga w dotarciu do celu


22

Wskazówki projektowania nawigacji dla webmasterów:

Rozmieszczaj informacje starannie, tak, aby użytkownik zawsze

wiedział w którym miejscu systemu się znajduje

Nie zmuszaj użytkownika do przerwania jego pracy przez podawanie

odsyłaczy do innych stron, aplikacji lub miejsc

Umieszczaj kontrolę nawigacji w systemie

Zabezpiecz główny kontekst poszukiwań (interakcji), aby użytkownik

nie musiał go sobie odtwarzać

Minimalizuj opóźnienia sieci poprzez czytelną i jasną nawigację i

zredukuj czas ładowania się

Typy systemów nawigacji a. hierarchiczny

b. globalny

c. lokalny d. doraźny

Ad. a/ hierarchiczny s. n. – podstawowy s.n. oparty na zasadzie nadrzędności i

podrzędności, ze strony nadrzędnej odsyłacze kierują do stron podrzędnych

(Rys. nr 8).

Więcej w rozdziale 1. Organizowanie informacji

Rys. nr 8

Ad. b/ globalny s.n. – najczęściej uzupełnia hierarchiczną organizację

informacji w serwisie. Najprostszy g.s.n. zawiera pasek nawigacyjny u dołu

każdej strony serwisu, na podstronach mogą znajdować się dodatkowo

odsyłacze powrotne kierujące do strony głównej.

Ad. c/ lokalny s.n. – stosowany w rozbudowanych serwisach WWW, uzupełnia globalny

s.n., wykorzystywany do połączenia podstron w serwisie.

Ad. d/ doraźny s.n. (ad hoc) – oparty na odsyłaczach znajdujących się w tekście,

widocznych jako wyróżniony tekst.

Inne podziały systemu nawigacji

- poprzeczna (pozioma) – obejmuje strony z tego samego poziomu, pozwala przejrzeć

treść na określonym poziomie serwisu

- pionowa (głęboka) – kieruje w głąb hierarchii, zgodna z przedmiotem poszukiwań

Narzędzia nawigacji

- paski nawigacyjne

- ramki

- menu ściągane (pull-down)

- mapy odsyłaczy

- indeksy stron

- okruchy chleba – zaznaczanie trasy nawigowania poprzez zmianę koloru

odsyłaczy kierujących do odwiedzonych stron


23

- widok „rybiego oka” – umieszczenie odsyłaczy do stron

znajdujących się najbliżej bieżącej.

3. System oznaczeń

Oznaczenia są to terminy, słowa i frazy używane w serwisie do identyfikowania

jego treści.

Są dwa rodzaje systemów oznaczeń: tekstowy i obrazkowy (ikony). Używane są

jako:

- odsyłacze do fragmentów informacji na innych stronach, jako termin

indeksowy lub jako oznaczenie (etykieta) odsyłacza.

- nagłówki służące do zidentyfikowania fragmentów informacji oraz do

rozdzielenia informacji na mniejsze „kawałki” na tej samej stronie.

Typy systemów oznaczeń (s.o.)

a) Oznaczenia w systemie nawigacji b) Oznaczenia w postaci terminów indeksowych c) Oznaczenia odsyłaczy d) S.o. w postaci ikon

Ad. a) Przyjęto stosowanie oznaczeń dla często stosowanych znaczników, np.: Strona główna, Home – kierują do strony powitalnej, organizującej dostęp do

całości zasobów

Szukaj, Wyszukaj, Site Map, Indeks stron – kierują do narzędzia

wyszukiwawczego lub uruchamiają akcję

Napisz do nas, Komunikaty, Webmaster – informacja o autorach, zespole

redakcyjnym serwisu

Help, FAQ, Pomoc – wsparcie dla odwiedzających serwis po raz pierwszy

Co nowego, News - informacja o ostatnich aktualizacjach, historia

aktualizacji

Przykład:

oznaczenia zamieszczone u dołu strony (www.gazeta.pl):

O nas | Reklama u nas | Ogłoszenia | Ochrona prywatności | Kontakt | Mapa serwisu Ad. b) Terminy indeksowe Potrzebne do odnalezienia strony przez wyszukiwarkę, umieszcza się je w sekcji <HEAD>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="reply-to" content="[email protected]"> <meta http-equiv="content-language" content="pl"> <meta name="keywords" content="hobby, konie, psy, hodowla, "> <meta name="description" content="strona na temat mojego hobby"> <meta name="author" content="imię nazwisko"> <title>moje hobby</title>

Więcej na ten temat w rozdziale III. Szablon strony WWW Ad. c) Oznaczeń i etykiet używa się również jako odsyłaczy, mają duże znaczenie, gdyż

ich lokalizacja oraz zawartość mogą decydować o ruchach użytkownika nawigującego lub

poszukującego informacji w serwisie. Odsyłacze najczęściej znajdują się poza głównym

tekstem (zewnętrzne) oraz w tekście, wyróżniane kolorem, grubością lub podkreśleniem.

Ad. d) Odsyłacz jako ikona powinien być stosowany w sytuacjach gdy jej znaczenie jest

jednoznaczne. Zastąpienie odsyłacza tekstowego ikoną może sprawić, iż użytkownik nie

skorzysta z niego gdyż nie będzie rozumiał jego znaczenia.

Przykłady niektórych ikon w roli odsyłaczy:

informacja e-mail strona główna księga gości wstecz

przykład z portalu onet.pl

http://www.gazeta.pl/


24

4. Szkic strony

Projektowanie przebiega szybciej, jeżeli wcześniej zostanie opracowany szkic

strony z rozmieszczonymi elemenatmi na ekranie. (layout). Poniżej podano dwa

przykłady szkiców.

Szkic nr 2: Strona główna czasopisma w Internecie

Szkic nr 3: Strona z tekstem artykułem, (element większej całości)

Szkic nr 3 Rozplanowanie zawartości strony z projektem kolorystyki

Szkic nr 4 Rozplanowanie zawartości strony


25

DODATEK

A. Słowniczek

Najważniejsze definicje związane z projektowaniem stron

internetowych.

ActiveX – Obiektowa technologia rozszerzająca możliwości języka HTML

opracowana przez Microsoft, umożliwia współużytkowanie informacji przez

różne aplikacje oraz dostęp do funkcji systemowych

Analiza konkurencji (competitive analysis) – dokument wykazujący różnice

pomiędzy stroną nad którą pracuje grupa a konkurencyjnymi stronami.

Wykazane różnice i strony porównawcze zależą od celów analizy. Typ

dokumentacji strategicznej.

Apache – bezpłatny, udostępniany na zasadach Open Source, zestaw

oprogramowania dla serwerów HTTP. Apache powstał na bazie serwera NCSA

httpd 1.3. i początkowo przeznaczony był wyłącznie dla systemów UNIX-

owych (Linux, Solaris, AIX). Obecnie, w wersji 2 dostępny jest także dla

systemów Windows 9x/NT/2000/XP, AmigaOS, BeOS.

Architektura informacji – sztuka i nauka organizowania informacji pomocnej

użytkownikom w zaspokojeniu ich potrzeb informacyjnych. AI obejmuje

badanie, analizę, projektowanie i wdrażanie.

Diagramy przepływu (flow charts) – wizualzacja jakiegoś procesu, zazwyczaj

skupiającego się na konkretnym zadaniu lub funkcji. Dla procesu opartych na

serwisach internetowych diagram przepływu reprezentuje z reguły serię

ekranów gromadzących i wyświetlających informacje użytkownikom. Inne

nazwy: przepływy, przepływy użytkownika, diagramy przebiegu. Rodzaj

dokumentu projektowego

Dokumentacja dostarczana (deliverables) – dokument (zbiór dokumentów)

tworzony podczas opracowywania projektu serwisu WWW w celu ułatwienia

komunikacji, ujęcia decyzji i zachęcania do innowacji. Należą tu: dokumentacja

potrzeb użytkownika (user needs documentation), dokumentacja strategiczna

(strategy documentation), dokumentacja projektowa (design documentation).

Druciana ramka, model w postaci szkieletu (wireframe) – uproszczony widok zawartości

każdego ekranu, jaki pojawi się w produkcie finalnym, pozbawiony koloru, stylów

typograficznych i ilustracji. Inne nazwy: schemat, plan, prototyp, projekt. Rodzaj


Dziedziczenie polega na tym, że elementy niższe w hierarchii drzewa dokumentu (Rys. nr

2) dziedziczą formatowanie elementów leżących wyżej w hierarchii, chyba, że wyraźnie

nadamy im inne formatowanie. Przykładowo, jeśli ustalimy, że tekst w jakiejś tabeli ma być

przedstawiony za pomocą pogrubionej czcionki Arial, to wszystkie komórki tabeli będą w

ten sposób formatowane, gdyż komórka <TD> leży niżej w hierarchii (drzewie dokumentu)

niż tabela <TABLE>. Jeśli natomiast nadamy odrębne formatowanie wybranej komórce

(utworzymy wyjątek), to oczywiście wygląd czcionki w tej komórce zmieni się, gdyż

bezpośrednie zdefiniowanie czcionki w wybranym miejscu ma pierwszeństwo przed

ogólniejszym formatowaniem tabeli (na wyższym szczeblu). Jeśli wyraźnie nie

zdefiniujemy formatowania dla jakiegoś elementu, dziedziczy on własności po swoich

„przodkach”, czyli elementach wyższych w hierarchii.

CSS (Cascading style sheets)– Kaskadowe arkusze stylów

Cache - specjalny katalog w przeglądarce WWW, gromadzący grafikę wczytywaną w

trakcie przeglądania zasobów sieci. Gdy po raz kolejny sięgamy do tej samej strony,

przeglądarka wczytuje na ekran grafikę z cache'a, a nie z Internetu, co znacznie przyspiesza

wczytanie całej strony i oszczędza czas. Im większy cache, tym większa możliwość

magazynowania grafiki. Optymalna wielkość powinna sięgać 10-15 megabajtów.

Cookie – (ang. ciasteczko) mechanizm przechowywania stanu klienta przy kolejnych

zadaniach kierowanych do serwera. Pozwala zapamiętywać informacje o użytkownikach

korzystających z usług internetowych.

DHTML (Dynamic HTML) – termin określający język HTML wraz z jego

rozszerzeniami umożliwiającymi tworzenie interaktywnych i animowanych stron WWW.

Flash - technologia firmy Macromedia (wprowadzona w 1997 r.) pozwalająca tworzyć

interaktywne, multimedialne, bazujące na grafice wektorowej elementy stron WWW. Do

tworzenia prezentacji flash służy program Flash. Wprowadza on własny format plików

(.swf), do odczytania którego niezbędne jest wyposażenie przeglądarki we wtyczkę Flash

Player (standardowo jest ona obecna w Internet Explorerze i Netscape Navigatorze w

wersjach 4.0 i wyższych).

Formularz - dokument internetowy, który pozwala czytelnikowi strony w interakcyjny

sposób pobierać lub przesyłać informacje. Przykładem formularza może być ankieta

prowadzona przez autora strony, który zbiera od czytelników informacje pewnego typu (np.


26

wiek, płeć, wykonywany zawód, posiadany sprzęt itp.). Formularzem jest strona

Ankieta w niniejszym kursie, która zawiera pola wyboru i pola tekstowe.

Edytor HTML - program służący do tworzenia dokumentów internetowych w

standardzie HTML. Chociaż jest możliwe zbudowanie dokumentu

internetowego za pomocą każdego, nawet najprostszego edytora tekstów,

edytory HTML są tworzone, aby przyspieszać i automatyzować proces

konstruowania stron WWW, uwalniając użytkownika od ręcznego

wprowadzania poleceń HTML. Więkoszść edytorów pracuje w trybie

"tekstowym", wyświetlając wszystkie znaki sterujące (polecenia) HTML,

niektóre pozwalają tworzyć dokumenty w trybie "graficznym", masując kody

języka, a stosowane są też edytory pozwalające wprowadzać poszczególne

elementy w sposób całkowicie zautomatyzowany, za pomocą zestawiania

"klocków".

Element - kod, znacznik HTML

GIF (Graphic Interchange Format) – format zapisu plików posiadający dużą

możliwość kompresowania, maksymalna liczna kolorów 256, posiada

właściwość zachowywania koloru przezroczystego. Najczęściej

wykorzystywany w kolorowych napisach i banerach

HTML – HyperText Markup Language – język hipertekstowego znakowania

dokumentu, obecnie stosowana wersja nosi numer 4.0

Heksadecymalny – oparty na systemie szesnastkowym; operujący na 16

wartościach: 0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Hiperłącze (odsyłacz, odnośnik, link) składnik systemu hipertekstowego -

element dokumentu elektronicznego kierujący do innego fragmentu tego samego

dokumentu lub do dokumentu znajdującego się w zupełnie innej lokalizacji

Hipermedia – system hipertekstowy zawierający elementy multimedialne

(tekst, grafika, film, dźwięk)

Hipertekst (system hipertekstowym) – rodzaj bazy danych posiadającej

aktywne odsyłacze pozwalające użytkownikowi „skoczyć” do innych części tej

bazy. H. pozwala na niesekwencyjne przeglądanie zasobów. Elementami

składowymi h. są węzły (strony WWW) i odsyłacze (hiperłącza). Wyróżnia się

dwa rodzaje s.h.: skupiony – znajdujący się w jednym miejscu (nośniku) i

rozproszony – węzły znajdują się na rożnych, oddalonych od siebie

komputerach (WWW).

Hit – trafienie, adres strony WWW wyświetlony przez wyszukiwarkę w odpowiedzi na

hasło wyszukiwawcze.

Internet – sieć komputerowa rozległa (WAN) o zasięgu globalnym, ogólnoświatowy zbiór

wzajemnie połączonych sieci komputerowych lokalnych (LAN) i rozległych. Umozliwia

publikowanie informacji oraz komunikowanie się, najpopularniejsze usługi internetowe to:

e-mail, World Wide Web, CHAT, FTP i Usenet

JPG, JPEG (joint Photographic Export Group)

Format graficzny stosowany w Internecie, najlepszy do kolorowych fotografii I obrazów,

zachowuje do 16 mln. Kolorów.

Java – zorientowany obiektowo język programowania niezależny od platformy sprzętowej

i systemowej, opracowany przez Sun Microsystem

JavaScript – język skryptowy interpretowany bezpośrednio przez przeglądarkę WWW,

używany do tworzenia krótkich programów dołączanych do kodu HTML.

Kaskadowość - polega na ustaleniu hierarchii źródeł stylów. Pierwszeństwo mają style

zdefiniowane "bliżej" konkretnego elementu. Przeglądarka sprawdza, więc najpierw, czy

istnieją jakieś arkusze zewnętrzne i stosownie do ich definicji formatuje stronę. Następnie

sprawdza, jakie są definicje stylów w nagłówku strony i modyfikuje wygląd zgodnie z ich

ustaleniami. Następnie sprawdza style w samym dokumencie i ponownie modyfikuje

fizyczną postać strony.

Mapa strony (site map) – wizualna reprezentacja struktury serwisu WWW. Inne nazwy:

model strukturalny, taksonomia, hierarchia, model nawigacji, struktura serwisu. Rodzaj

dokumentu projektowego.

Metainformacja – (informacja o informacji) informacja o elementach układu

informacyjnego lub procesach informacyjnych

Model pojęciowy (concept model) – wykres prezentujący związki pomiędzy różnorodnymi

abstrakcyjnymi pojęciami. Można stosować technikę modelowania pojęciowego w różnych

sytuacjach (warunkach) do wyjaśnieni a odmiennych aspektów strony internetowej. Inne

nazwy: mapa pojęć, diagram podobieństw. Typ dokumentacji strategicznej

Nawigowanie – metoda poszukiwania informacji w hiperprzestrzeni polegająca na

poruszaniu się pomiędzy dokumentami za pomocą hiperłączy

Nawigacja – system architektury informacji serwisu internetowego zaprojektowany w celu

połączenia ze sobą poszczególne dokumenty w hiperprzestrzeni


27

PHP - Hypertext Preprocesor. Język skryptowy służący do tworzenia

programów oraz interpreter wykonujący je po stronie serwera (server-side

scripting). Bloki kodu PHP umieszczane są bezpośrednio w dokumencie HTML.

Przed wysłaniem do przeglądarki serwer przekazuje dokument HTML

ťinterpreterowi PHP, który tłumaczy komendy PHP oraz wykonuje

odpowiadające im operacje.

Persony (personas) – Sumaryczna reprezentacja docelowych użytkowników

systemu, często opisywani jako realni ludzie. W każdym projekcie można mieć

jedną lub więcej person, każda reprezentować może odmienny typ odbiorców

systemu. Inne nazwy: profil użytkownika, definicje ról użytkownika, profile

odbiorców. Należy do dokumentacji potrzeb użytkownika

Plan testu użyteczności (usability test plan) – opis celów, metod i podejścia do

testu użyteczności. PTU obejmuje kilka różnych elementów, od profili

uczestników testów do zarysu dyskusji z użytkownikami. Może składać się z:

test obiektów, test logistyki, profile użytkownika i scenariusz. Typ dokumentacji

potrzeb użytkownika.

Podstrona (angielskie subpage), strona WWW dostępna ze strony bieżącej za

pomocą łącznika hipertekstowego.

Portal – rodzaj wielotematycznego serwisu internetowego poprzez, który

użytkownicy sieci mają dostęp do najnowszych informacji z różnych dziedzin.

P. wyposażone są w mechanizm wyszukiwania plików (stron WWW)

w Internecie oraz katalog stron WWW. Za pomocą portalu można otrzymać

najnowsze informacje z różnych dziedzin. Największe światowe portale to

Yahoo, Altavista czy Lycos, zaś w Polsce Onet i Wirtualna Polska.

Projekty ekranu (screen designs) – zbiór ilustracji w elektronicznym formacie

graficznym prezentujących finalny wygląd stron internetowych. Inne nazwy:

kompleksowe ekrany, makieta, projekt strony, projekt wizualny, projekt

graficzny, projekt interfejsu, projekt koncepcji, ładne obrazki. Rodzaj


Przeglądarka – wyspecjalizowany program komputerowy służący do

wyszukiwania i przeglądania danych określonego typu, zwł. udostępnianych w

rozległych sieciach komputerowych; np. przeglądarki WWW. Najpopularniejsze

obecnie p. to Microsoft Internet Explorer i Netscape Navigator.

Raport użyteczności (usability report) – należy do dokumentacji potrzeb

użytkownika. Wynik testu użyteczności, z którego rezultaty dają się przełożyć

na działanie. Typ dokumentacji strategicznej

Serwis WWW – zbiór stron WWW na określony temat, z wyróżnioną stroną główną

(powitalną) oraz podstronami (ang. web site).

Spis zawartości (content inventory) – lista wszystkich informacji zawartych na stronie

WWW, łącznie z danymi opisującymi informacje z wielu punktów widzenia, jak odbiorcy

docelowi lub położenie. Inne nazwy: analiza treści, audyt treści. Typ dokumentacji

strategicznej

Strona WWW, witryna (angielskie WWW page), dokument hipertekstowy (hipermedialny) opracowany w języku HTML, udostępniony na

widok publiczny w sieci Internet za pomocą usługi WWW w celach informacyjnych,

handlowych, propagandowych itp.; sieciowa wizytówka firm i poszczególnych osób (liczba

stron WWW przekroczyła już miliard).

Strona prywatna (angielskie home page), dokumenty opracowane w języku HTML,

będące wizytówką osoby lub instytucji w sieci usług hipertekstowych WWW;

Strona startowa – strona WWW, która pojawia się na ekranie wraz z uruchomieniem

przeglądarki. W opcjach każdej przegladarki można zmieniać adres strony startowej

W3C (World Wide Web Consortium) – Międzynarodowe forum firm i organizacji

zajmujące się rozwojem i promocją sieci World Wide Web (rok. zał. 1994), kształtuje obraz

Sieci poprzez tworzenie nowych standardów internetowych, np.: języka HTML, CSS, XML

i protokołu http. Dyrektorem jest Tim Berners-Lee - twórca WWW. Srona WWW:

www.w3c.org

Webmaster osoba projektująca strony i serwisy internetowe.

Wortal – rodzaj portalu poświęcony jednej branży (dziedzinie życia), np.: „Wirtualna

historia książki i bibliotek”

WYSIWYG – (What You See Is What You Get), widzisz to, co otrzymasz – tryb pracy

programu, w którym postać materiałów przygotowywanych zbliżona jest do efektu, jaki

można uzyskać po ich wydrukowaniu.

http://wiem.onet.pl/wiem/00858f.html

http://wiem.onet.pl/wiem/0028a0.html

http://www.w3c.org/


28

B. Kolory

Nazwy kolorów wraz z zapisem szesnastkowym

(heksadecymalnym).

Kolor w zapisie szesnastkowym musi być poprzedzony

znakiem”#”,

np.: color: ”#FFFFFF”

antiquewhite FAEBD7 agua 00FFFF

aquamarine 7FFFD4 azure F0FFFF

beige F5F5DC bisque FFE4DC black 000000 blanchedalmond FFEBCD blue 0000FF blueviolet 8A2BE2 brown A52A2A

cornsilk FFF8DC crimson DC143C

cyan 00FFFF darkblue 00008B darkcyan 008B8B darkgoldenrod B8860B darkgreen 006400

floralwhite FFFAF0 ghostwithe F8F8FF gold FFD700 honeydew F0FFF0 ivory FFFFF0 khaki F0E68C

levender E6E6FA levenderblush FFF0F5 lightyellow FFFFE0 linen FAF0E6 magenta FF00FF maroon 800000 mediumblue 0000CD

mediumorchid BA55D3 mediumvioletred CD1585 mistyrose FFE4E1

moccasin FFE4B5 navy 000080

oldlace FDF5E6 olive 808000 olivedrab 6B8E23 orange FFA500 papayawhip FFEFD5 peachpuff FFDAB9

purple 800080 red FF0000 seagreen 2E8B57 seashell FFF5EE tomato FF6347

turquoise 40E0D0

violet EE82EE wheat F5DEB3 white FFFFFF whitesmoke F5F5F5 yellow FFFF00 yellowgreen 9ACD32


29

NOTATKI

Documents

Skrypt Do Specjalizacji