1
Roman Dunaj
Nauczyciel Zespołu Szkół Specjalnych
w Lesznie
PODSTAWY TWORZENIA STRON WWW.
1. Planowanie wykonania strony WWW.
Kto spędził w sieci WWW wiele czasu, ten z pewnością widział witryny, na które nigdy więcej nie
zajrzy, gdyż ich strony powitalne obciążone są co najmniej jedną przypadłością spośród następujących:
" Czas wczytywania jest zbyt długi.
" Brak określonego celu utworzenia witryny.
" Zły układ graficzny lub z
le skomponowana treść
" Niewygodne narzędzia nawigacyjne.
" A
ącza do innych stron nie funkcjonują.
" Brak użytecznych informacji.
My oczywiście chcemy uniknąć takich problemów, lecz jak to osiągnąć? Najprostszym rozwiązaniem
jest wczucie się w rolę gościa witryny i przyjęcie jego sposobu myślenia. Każdy autor, czy to publikacji
drukowanych, multimedialnych, czy wreszcie stron w sieci WWW musi tak postąpić, gdyż w przeciwnym
przypadku ryzykuje niepowodzenie.
Aby zilustrować to o czym mówię, posłużmy się własnym przykładem. O czym myślimy, kiedy
otwieramy nową książkę, czasopismo czy też zaglądamy na nieznaną dotąd witrynę w sieci WWW? Pojawia się
wówczas, choć może nie zdajemy sobie z tego sprawy, myśl:  Czy znajdę tu coś dla siebie?" Czegoś przecież
szukamy: informacji, rozrywki doznań artystycznych lub strawy intelektualnej, w zależności od gustu i potrzeb
w danej chwili. Jeśli w ciągu pierwszej minuty lub dwóch nie poczujemy, że otrzymamy to czego szukamy,
przenosimy się w inne miejsce - tak samo uczyni każdy gość naszej witryny jeśli jego odczucia będą podobne do
opisanych.
2. Organizacja i struktura stron
Planując strukturę witryny należy ułatwić użytkownikowi korzystanie z produktu który mu
przedstawiamy. Jeśli będzie to proste, użytkownicy będą często stronę odwiedzać. Jeśli będzie trudne  uciekną
i nie wrócą tak szybko. Strony powinny być pogrupowane według pewnych kategorii logicznych, co pozwoli na
skuteczniejsze wyszukiwanie informacji: dojście do pojedynczej strony wymaga, co najwyżej trzech kliknięć.
Przykładowy schemat struktury spełniającej te wymagania.
WST
P
HISTORIA
SZKOA
Y
SZKOA
A ZAWODOWA
STRONA
GA
ÓWNA
WYCH.KOMUNIKACYJNE
KALENDARZ IMPREZ
PUBLIKACJE
NAUCZYCIELI
KONTAKT
ZESPOA
Y EDUKACYJNO -
TERAPEUTYCZNE
GALERIA
AKTUALNOŚCI
 2
3. Oczekiwania odbiorcy strony WWW.
Kiedy będziemy próbowali określić, co w naszej witrynie jest najlepszym magnesem przyciągającym
odbiorców, spróbujmy odpowiedzieć sobie na następujące pytanie;  Czego oczekuje odbiorca i w jaki sposób
bezzwłocznie pokazać mu, że znajdzie tutaj?" Odwracając znaczenie punktów zamieszczonej wcześniej listy
błędów, otrzymamy takie oto zalecenia:
" Pierwsza strona musi wczytywać się szybko.
" Przeznaczenie witryny musi być natychmiast i jasno określone.
" Strona powinna mieć przejrzysty układ, a tekst powinien być dobrze napisany.
" A
ącza muszą dokładnie wskazywać, do jakich treści się odnoszą.
" A
ącza muszą funkcjonować zgodnie z oczekiwaniami odbiorcy.
" Zawartość strony musi spełniać oczekiwania gościa lub prowadzić bezpośrednio do zasadniczej treści.
Przestrzeganie powyższych zasad pozwoli nam tworzyć witryny przyciągające
i utrzymujące uwagę gości. Stosować je należy podczas tworzenia zarówno pojedynczych stron i całych witryn,
dzięki czemu będą one przyjemne w odbiorze, a zarazem użyteczne. Mówiąc krótko, kluczem do sukcesu jest
zachowanie równowagi między formą i treścią.
4. Porady ułatwiające tworzenie stron WWW
Oto kilka fundamentalnych zasad dotyczących rozmieszczania tekstu i hiperłączy na stronie:
" Jeśli tekstu jest dużo, należy stosować liczne odstępy.
" Należy unikać tworzenia długich stron wymagających nie kończącego się przewija
" Każdej stronie należy nadać tytuł, dzięki któremu gość łatwo zorientuje się, co może na niej znalez
ć.
" Piszmy zrozumiale, dbając o poprawność gramatyczną i ortograficzną. Nic tak nie burzy autorytetu strony jak
błędy pisowni i zagmatwany język. Nawet takie błędy jak zwykłe  literówki" świadczą o braku dbałości autora o
poprawność treści.
" Kiedy wybieramy kolory dla oznaczenia łączy odwiedzonych i nie odwiedzonych sprawdz
my dokładnie, czy
różnica między nimi podczas oglądania strony w przeglądarce jest wyraz
na. Jeśli nie, zdajmy się na kolory
domyślne.
" Utrzymujmy jednolity wygląd kontrolek nawigacyjnych; na przykład przycisk prowadzący na stronę główną
powinien wyglądać tak samo na każdej stronie witryny.
5. Korzyści stosowania grafiki
Elementy graficzne czynią strony bardziej interesującymi, podkreślają znaczenie tekstu, dzielą treść na
łatwiejsze w obsłudze fragmenty i (bardzo ważne) nadają charakter witrynie. Jest to rodzaj zasobów, bez których
żaden autor stron w sieci WWW nie obejdzie się. Jednak uzyskanie korzyści z użytej grafiki wymaga nieco
przemyśleń. Kto ma  żyłkę" artystyczną temu przyjdzie to łatwo. Jej brak nie oznacza jednak, że autor strony
jest skazany na porażkę. Przystępując do umieszczania grafiki na stronie, każdy powinien odpowiedzieć sobie na
kilka pytań:
- Jakie zadania ma spełniać użyta grafika?
- Jakiej treści obrazów należy użyć, by zadanie to zostało spełnione?
- Jak duże będą te obrazy (to znaczy, jak długo będą pobierane)?
- Ile obrazów należy użyć?
- Na ile wybrane obrazy będą korespondowały ze sobą i tekstem?
- W którym miejscu strony będą prezentowały się najlepiej?
Odpowiedzi na powyższe pytania pomogą nam uniknąć sytuacji, w której zaprojektowana strona będzie
zlepkiem niepowiązanych elementów.
Kiedy już podejmiemy decyzję jakich obrazów użyjemy, przystępując do ich tworzenia lub
selekcjonowania musimy trzymać się następujących wskazówek:
" Nie twórzmy tła z obrazów, które mogą utrudnić oglądanie innych obrazków i czytanie tekstu.
" Nie używajmy olbrzymich obrazów, które będą pobierane nieskończenie długo. Chcąc udostępnić taki obraz,
umieśćmy na stronie jego miniaturkę z łączem do oryginału Nie powinniśmy używać obrazów o wielkości
przekraczającej 25 kilobajtów, jeżeli nie istnieje ważny powód, by przekroczyć tę granicę. Ogólną objętość
całej grafiki stronie należy ograniczyć do 30 kB lub mniej.
" pamiętajmy również, aby zachować ostrożność podczas przygotowywania szczególnie szerokich obrazów.
Jeśli odwiedzający będzie używał przeglądarki nie pracującej na pełnym ekranie lub sprzętu pozwalającego
osiągnąć jedynie rozdzielczość VGA (640x480), okno przeglądarki może zasłaniać część obrazu
- W związku z tym, wybierajmy obrazy o szerokości co najwyżej 12 do 15 centymetrów, sprawdzając
rezultaty.
- Tworząc mapy obrazów upewnijmy się, że obszary klikania są jasno zdefiniowane
- Nie nadużywajmy efektów specjalnych, takich jak migający czy zanikający tekst Wielu odwiedzających
będą denerwowały błyskające, migoczące i udziwnione strony, gdy ich początkowy zachwyt minie. Jeśli
chcemy utrzymać uwagę odbiorcy na tekście, nie umieszczajmy w pobliżu niczego, co mogłoby tę uwagę
odciągnąć.
 3
6. Dobór formatu obrazu.
Obrazy umieszczane na stronach w sieci WWW zwane są obrazami liniowymi. Dwoma najpopularniejszymi
formatami obrazów w publikacjach sieciowych są GIF oraz JPEG. Wszystkie przeglądarki obsługujące
funkcje graficzne wyświetlają obrazki
w tych formatach bez jakichkolwiek trudności.
Którego formatu zatem użyć: GIF czy JPEG? Obydwa mają swoje mocne strony. Na korzyść formatu GIF
przemawia to, że jest chlebem i solą grafiki w Internecie i to od długiego czasu. Obrazki GIF są szybko
dekompresowane przez przeglądarki, dzięki czemu czas oczekiwania na ich wyświetlenie jest krótki. Format ten
jest odpowiedni dla rysunków kreskowych, to znaczy obrazów bez przejść tonalnych między kolorami, na
przykład fotografii
Obrazy GIF mogą składać się z najwyżej 256 kolorów, większa liczba jest osiągalna jedynie drogą
ditheringu (rozrzucania). Nie musimy jednak korzystać z pełnej palety a wręcz przeciwnie. Charakterystyka
formatu GIF pozwala na kompresję obrazów przez edytory graficzne, która polega na redukcji liczby kolorów,
co z kolei wpływa na wielkość plików. W ten sposób możemy za pomocą edytora graficznego zmniejszyć
objętość obrazu. Taką samą możliwość możemy wykorzystać również w przypadku obrazów JPEG. Pliki
obrazów GIF są z reguły większe niż ich odpowiedniki JPEG, a zatem to co zyskujemy na szybkiej dekompresji
GIF, tracimy w wyniku zwiększenia objętości plików tworzących witrynę. Z drugiej jednak strony pliki JPEG,
mimo iż są mniejsze niż GIF, dekompresują się wolniej. Swoją przewagę nad obrazami GIF zawdzięczają
możliwości zapisywania obrazów o liczbie kolorów równej 16.7 miliona, dzięki czemu obrazy tonalne mają
znacznie lepszą jakość.
Prawdą jest, że technologia ta jest obecnie bardziej rozpowszechniona, jednak większość internautów
woli obrazy w 256 kolorach a zatem najwyższa jakość jest zbędna. Obrazy JPEG pozwalają określać stopień
kompresji danych celem redukcji rozmiarów pliku.
Jeśli zdecydujemy się korzystać z tej możliwości, sprawdzajmy uzyskane efekty, gdyż im wyższy jest
stopień kompresji, tym niższa jest jakość obrazu. Musimy zatem znalez
ć rozsądny kompromis między
rozmiarem pliku a jakością obrazu.
7. Wprowadzenie do programu ezhtml
Program ezhtml jest wersją freewer.
Co widzisz?
- U samej góry znajduje się menu, w którym zawarte są funkcje programu.
- Poniżej menu widać pasek przycisków, dzięki któremu masz szybki dostęp do najczęściej stosowanych
operacji. Prawa część paska zajęta jest przez zakładki ze znacznikami języka HTML.
 4
- Na samym dole ekranu znajdziesz listwę statusu, na której wyświetlane są podpowiedzi (wystarczy
najechać kursorem myszy na interesujący Cię obiekt w oknie programu, a zobaczysz objaśnienie). Program
pokazuje też tam położenie kursora tekstowego w okienku edycyjnym, o którym za chwilę, oraz stronę
kodową, w której tworzony jest dokument.
- Właściwa część robocza programu podzielona jest na dwie części (ich wielkość
można zmieniać myszką):
- Lewą, pomocniczą:
Tu najważniejsza jest zakładka pliki, dzięki której w wygodny sposób można
ładować pliki (dokumenty) do edytora;
- Prawą, w której znajduje się właściwy edytor.
Posługiwanie się edytorem nie jest skomplikowane - zakładki na dole reprezentują otwarte pliki (klikając na
odpowiedniej zakładce przełączamy na interesujący nas plik). Pliki można otwierać za pomocą wspomnianej już
zakładki Pliki w lewej części, bądz
(klasycznie) poprzez Pliki - Otwórz. Otwarte pliki edytujemy w okienku
edycyjnym, w którym dostępne są wszystkie podstawowe czynności edycyjne (wycinanie do schowka,
kopiowanie, wklejanie, etc.). Edytor koloruje znaczniki języka HTML, co ułatwia edycję.
Za edytorem znajduje się zakładka Podgląd (przełączamy używając zakładek pomiędzy panelem plików a
edytorem), na której widzimy efekty naszej pracy w oknie MS Internet Explorera (MSIE musi być
zainstalowany w systemie, aby to działało) lub Netscape.
Jak przebiega typowa praca z Edytorem znaczników HTML?
Po włączeniu edytor zawiera jedną zakładkę: bez nazwy. Jeśli chcemy stworzyć nowy dokument HTML, to
pracujemy właśnie z tym domyślnym plikiem (nową nazwę nadamy mu przy zapisywaniu). Jeśli chcemy jednak
załadować plik z dysku, to poza standardowym użyciem Pliki - Otwórz mamy do dyspozycji jeszcze zakładkę
Pliki po lewej stronie obszaru roboczego. Aby otworzyć plik postępujemy następująco:
1. Wybieramy dysk używając rozwijanej listy na samej górze zakładki;
2. Drzewo poniżej obrazuje strukturę folderów na dysku, który wybraliśmy; wybieramy odpowiedni folder&
3. & i dostajemy listę plików w tym folderze w okienku plików (na dole). Teraz wystarczy wybrać żądany plik i
kliknąć na nim dwukrotnie aby jego zawartość pokazała się w okienku edycyjnym.
Mając otwarty plik możemy używać klasycznych narzędzi edycyjnych, zawartych w menu Edycja. Możemy
także dodawać znaczniki języka HTML, używając zakładek HTML na pasku przycisków. Dwukrotne kliknięcie
dowolnego znacznika w tekście w edytorze umożliwi edycję jego parametrów w zakładce Tagi (po lewej).
Efektywne przeszukiwanie dokumentu umożliwia polecenie Tekst - Znajdz
. Możemy też podejrzeć efekt naszej
pracy w domyślnej przeglądarce WWW (HTML - Podgląd). Na koniec zapisujemy efekt naszej pracy na dysku
(Pliki - Zapisz, Pliki - Zapisz jako& ).
8. Tworzenie witryny www
8.1 Przygotowanie strony głównej
a) uruchamiamy program Ezhtml, otwieramy menu  Pliki , wybieramy opcję  Nowa ,
b) następnie otwiera się obszar roboczy,
c) zapisujemy plik do odpowiedniego katalogu o rozszerzeniu *.html lub *.htm,  Zapisz jako... .
8.2 Podstawowe elementy dokumentu
Dokument HTML, aby odpowiadał przyjętemu standardowi, powinien zawierać co najmniej trzy elementy i są
to:

Jest to otwierający i zamykający znacznik dokumentu, a między nimi jest umieszczana cała treść. Znacznik
nie jest bezpośrednio widoczny w przeglądarce.

Znacznik jest umieszczany wewnątrz znaczników HTML i sam zawiera podstawowe informacje o
dokumencie, w pierwszym rzędzie tytuł strony. W ramach tego znacznika jest umieszczana tzw. część
nagłówkowa.

Jest to znacznik umieszczany wewnątrz znaczników HTML, za znacznikami HEAD. Zawiera konkretną treść
dokumentu.
Definiując możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie i są
to między innymi:
parametr , polecamy w szczególności: strona kodowa, opis strony, wyrazy kluczowe, autor strony.
STRONA KODOWA

Polecenie jest deklaracją strony kodowej dokumentu. Inna postać to charset=windows-1250. Nowe
przeglądarki (Navigator/Communicator, Internet Explorer) potrafią się automatycznie przestawić na właściwą
stronę kodową, zgodnie z podaną deklaracją. Nie jest potrzebna interwencja użytkownika, który nie musi
nawet wiedzieć, z jakim standardem kodowania polskich znaków ma do czynienia. Polecenie to jest
 5
bezwzględnie zalecane przy tworzeniu stron WWW. Jego brak jest, niestety, powszechnym błędem na
stronach HTML-owych nowicjuszy.
OPIS STRONY

Polecenie to opisuje zawartość strony. Zalecam stosowanie go, gdyż dzięki niemu ułatwiamy pracę osobom
korzystającym z wyszukiwarki. . To, co umieściliśmy w ramach TITLE, zostanie wyświetlone jako tytuł
znalezionej strony. Z kolei zawartość Description zostanie wyświetlona niżej, jako opis naszej strony.
Gdybyśmy nie użyli Description, wyszukiwarka wyświetli kilka pierwszych wierszy naszego dokumentu,
które mogą być zupełnie przypadkowe. Uważnie i świadomie zredagowana zawartość Description da
natychmiast orientację co do zawartości strony. Zaleca się nieprzekraczanie 150-200 znaków - w niektórych
specjalistycznych serwisach spotyka się zalecenie "co najwyżej 20-25 wyrazów".
SA
OWO KLUCZOWE

Polecenie informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość Keywords: HTML,
Szkoła, Leszno,
Warto stosować wyrazy kluczowe, gdyż ułatwia to pracę sieciowym programom indeksująco -
wyszukiwawczym i zwiększa szansę znalezienia strony przez innych użytkowników. To my właśnie
decydujemy tutaj, jakie są istotne elementy strony. Jeśli nasza strona zawiera opis jakiegoś produktu,
moglibyśmy podać wyrazy kluczowe "marmolada śliwkowa, przemysł, spółdzielnia Lepsze Jutro, żywność".
Poszczególne wyrazy kluczowe są oddzielane przecinkami. Dla scharakteryzowania strony zazwyczaj
wystarcza kilka, rzadziej kilkanaście wyrazów. Kilkadziesiąt to już absolutny wyjątek. Generalnie, nie
powinno się przekraczać 1000 znaków.
OKREŚLENIE J
ZYKA

Polecenie informuje o języku strony. Niektóre przeglądarki korzystają z niego przy precyzowaniu zapytań.
Dla języka angielskiego użyjemy en, dla amerykańskiego angielskiego en-us, dla niemieckiego de, dla
francuskiego fr, dla rosyjskiego "ru" itd.
AUTOR STRONY

Polecenie informuje o autorze strony.
NAZWA EDYTORA

Polecenie informuje o użytym narzędziu do tworzenia stron HTML, np. Ezhtml  2, Homesite, Pajączek,
Tiger98.
A oto przykład użycia powyższych parametrów .









Definiując możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci
strony.

Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w
przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu co strona HTML) Jeśli np. będzie to
, w przeglądarce zobaczymy dokument w takiej postaci:

Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w
przeglądarce. Gdyby był to , zobaczymy:

Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także
na uwadze kolor tła.

Możemy również określić kolory odsyłaczy. LINK="kolor" określa standardowy kolor odsyłacza.
VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty (zauważmy
związek z ustawieniem przeglądarki u odbiorcy, który może na ogół swobodnie definiować czas "wygasania"
informacji o wizytowaniu jakiegoś miejsca w Internecie). ALINK="kolor" (active link) określa kolor
aktywnego odsyłacza Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu.
Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego
dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy
 6
powrócimy do tej samej strony, zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą
VLINK="kolor", jako już co najmniej raz wizytowany.
A oto przykład użycia powyższych parametrów .

8.3 Podgląd edytowanej strony WWW
a) z menu  HTML wybieramy  Podgląd (F11)
8.4 Formatowanie nagłówków
a) wpisujemy treść nagłówka,
b) wybieramy wielkość nagłówka, klikając na pasek zadań wybieramy zakładkę  Czcionki
(H1......H7),
c) aby wybrać kolor oraz rodzaj czcionki oraz efekty klikamy na przycisk wybierz  Czcionkę ,
d) następnie możemy ustalić rozmieszczenie nagłówka na naszej stronie, poprzez wybranie przycisku z
paska zadań  Format i naciśnięcie odpowiedniej ikonki.
Przykład .

Zespół Szkół Specjalnych w Lesznie
im. Janusza Korczaka w Lesznie

8.5 Wstawianie grafiki
a) z paska zadań wybieramy zakładkę  Podstawowe i klikamy przycisk  Wstawianie obrazka do
dokumentu ,
b) w oknie dialogowym określamy ścieżkę dostępu oraz rozmiar i rozmieszczenie obrazka,
Przykład :

8.6 Tworzenie listy
a) z paska zadań wybieramy zakładkę  Listy , a następnie klikamy rodzaj wypunktowania listy,
b) żeby przejść do następnego wiersza wciskamy Enter
Przykład:

• Wstęp
  
• Historia szkoły
  
• Publikacje
  

8.7 Tworzenie odnośników lokalnych
a) zaznaczamy tekst odnośnika,
b) z paska zadań wybieramy zakładkę  Podstawowe i klikamy przycisk  Odnośnik lokalny ,
c) w oknie dialogowym odnajdujemy plik z którym ma być połączony i klikamy  Otwórz
Przykład:

Wstęp

Historia szkoły

Publikacje
8.8 Wykorzystanie tabel do lepszej organizacji strony
a) z paska zadań wybieramy zakładkę  Tabele ,
b) klikamy przycisk  Tabele ,
c) w zakładce  Tagi określamy parametry tabeli
Przykład:

Zespł Szkół Specjalnych Im. Janusza Korczaka w Lesznie

 7

Wstęp Historia szkoły Zespół Szkół Specjalnych Warsztaty Terapii Zajęciowej Galeria Kalendarz imprez Publikacje nauczycieli Kontakt

9. Wysyłanie plików na serwer za pomocą programu Windows Commander
W menu głównym wybierz Polecenia - FTP Połączenie.
W wyświetlonym okienku Połącz z serwerem FTP wskaż polecenie Nowe połączenie.
W polu Sesja wpisz jakąkolwiek przyjazną nazwę połączenia, która będzie się kojarzyć z Twoim usługodawcą.
W polu Nazwa hosta wpisz podany przez usługodawcę adres serwera FTP, np. ftp://ftp.republika.pl/.
W polu Użytkownik wpisz swój login do serwisu, uzyskany w trakcie zakładania konta pocztowego.
W polu Hasło wpisz hasło.
Pozostaw zaznaczenie pola Użyj trybu pasywnego do transferu.
Zatwierdz
definicję przyciskiem OK.
Aby się połączyć, wybierz w menu Polecenia - FTP Połączenie, na liście połączeń wskaż podaną właśnie
definicję i kliknij Połącz.
 8
Aby wysłać pliki, zaznacz pliki lub katalog i naciśnij F5
BIBLIOGRAFIA
1. Jim Heid  Sekrety HTML i publikacji WWW
2. Bryan Pfafenberger, Bill Karow  HTML 4
3. Neil Randal, Dennis Jones  Poznaj Front Page 2000