kurs.HTML. - PODSTAWY TWORZENIA STRON WWW.pdf - ◄Programy do stron www - drezdenko-kubas

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 źle skomponowana treść

• Niewygodne narzędzia nawigacyjne.

• Łą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

SZKOŁY

STRONA

GŁÓWNA

SZKOŁA ZAWODOWA

WYCH.KOMUNIKACYJNE

KALENDARZ IMPREZ

PUBLIKACJE

NAUCZYCIELI

KONTAKT

ZESPOŁY EDUKACYJNO -

TERAPEUTYCZNE

GALERIA

AKTUALNOŚCI

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.

• Łącza muszą dokładnie wskazywać, do jakich treści się odnoszą.

• Łą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 znaleźć.

• 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 sprawdźmy dokładnie, czy

różnica między nimi podczas oglądania strony w przeglądarce jest wyraź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ąć.

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

- 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ądź (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 - Znajdź. 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 <HEAD> możemy wstawić kilka dalszych parametrów, które uzupełniają informacje o stronie i są

to między innymi:

parametr <META>, polecamy w szczególności: strona kodowa, opis strony, wyrazy kluczowe, autor strony.

STRONA KODOWA

<META HTTP-EQUIV=" content-type " CONTENT="text/html;

charset= iso-8859-2 ">

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

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

SŁ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 .

<!doctype html public " //W3C//DTD HTML 4.0 Transitional//EN ">

<html>

<head>

niepełnosprawne, specjalne, szkoły, nauczyciele, warsztaty, terapia zajęciowa, terapia, publikacje ">

<title> ZESPÓŁ SZKÓŁ SPECJALNYCH W LESZNIE </title>

</head>

Definiując <BODY> 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

<BODY BACKGROUND="szkoła.gif">, 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 <BODY BGCOLOR="yellow">, 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

kurs.HTML. - PODSTAWY TWORZENIA STRON WWW.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: