Katowice 2006/2007

Podstawy tworzenia stron WWW

Wiadomości podstawowe z zakresu

budowy języka HTML

Źródło: http://www.staff.amu.edu.pl/~psi/informatyka/kluczew/I2_Spreadsheet.htm#Formaty%20danych

Katowice 2006/2007

Podstawy tworzenia stron WWW

Budowa podstawowe zasady

Wielkość liter w poleceniach HTML jest obojętna.

W nazwach plików HTML, zaleca się stosowanie małych liter

a więc

, a nie

Plik.html

czy

PLIK.HTML

Związane jest to z faktem, iż o ile takie systemy operacyjne jak

DOS

czy

WINDOWS

nie różnicują dużych i małych liter o tyle w systemach

UNIX'owych

takie zjawisko zachodzi.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Standardowy dokument

HTML

powinien zawierać co

najmniej trzy elementy.

Są to:

Znaczniki otwierający i zamykający dokument HTML -między nimi jest umieszczana

cała treść dokumentu. Sam znacznik nie jest bezpośrednio widoczny w przeglądarce.

Znacznik części nagłówkowej umieszczany wewnątrz znaczników

HTML

. Jest to sekcja

zawierająca podstawowe informacje o dokumencie, w pierwszym rzędzie tytuł strony,

informacje o treści strony, autorze, systemie kodowania znaków w dokumencie itd.

Jest to znacznik umieszczany wewnątrz znaczników

HTML

, za znacznikami

HEAD

Ta część zawiera konkretną treść dokumentu.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Standardowy dokument

HTML

powinien zawierać co

najmniej trzy elementy

W praktyce wygląda to następująco:

<HTML>

<HEAD>

Ta część zawiera podstawowe informacje o dokumencie

</HEAD>

<BODY>

Ta część zawiera treść dokumentu:

• tekst

• linia pozioma

• wykazy

• odsyłacze –hiperłącza

• grafika

•

tabele

</BODY>

</HTML>

Katowice 2006/2007

Podstawy tworzenia stron WWW

Ta część zawiera podstawowe informacje o dokumencie

<HEAD>

Najważniejszy element - tytuł strony, ukazujący się na belce tytułowej przeglądarki

<TITLE>

Treść tytułu strony

</TITLE>

Wpis jest deklaracją polskiej strony kodowej dokumentu w systemie iso-8859-2. Inny system kodowania

polskich znaków to windows-1250 ostatni człon wtedy ma zapis: charset=windows-1250. Polecenie to jest

bezwzględnie zalecane przy tworzeniu stron WWW. Jego brak jest, niestety, powszechnym błędem na

stronach HTML-owych nowicjuszy. Polskie edytory wstawiają domyślnie deklarację ISO.

Wpis opisuje zawartość strony. To, co umieściliśmy w ramach Description zostanie wyświetlone, jako opis

naszej strony w przypadku zakwalifikowania jej jako jednego z elementów wyszukiwania programów

indeksująco-wyszukiwawczych. Zaleca się nieprzekraczalnie 150-200 znaków.

Wpis informuje o wyrazach kluczowych dokumentu, zwracając przykładową wartość Keywords: HTML,

WWW,. Wyrazy kluczowe, umożliwiają programom indeksująco-wyszukiwawczym znaleźnie naszej strony

przez innych użytkowników.

Wpis informuje o autorze strony.

</HEAD>

Katowice 2006/2007

Podstawy tworzenia stron WWW

Dodatkowe parametry sekcji

BODY

Spis zagadnień:

•

Parametr BACKGROUND.

•

Parametr BGCOLOR.

•

Parametr TEXT.

•

Parametry odsyłacza.

•

Parametry marginesów.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Definiując sekcję

<BODY>

można zdefiniować kilka parametrów,

które określą podstawowe parametry

graficznej postaci strony.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Parametr

BACKGROUND

Parametr BACKGROUND pozwala wybrać obrazek, który pokaże

się w tle dokumentu w przeglądarce. Umieszczamy go

wewnątrz głównego znacznika body.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Parametr

BACKGROUND

Zamiast obrazka jako tło strony można zdefiniować konkretny kolor za

pomocą parametru

BGCOLOR

. Znacznik

<BODY>

przyjmie wtedy

postać:

UWAGA:

Choć na pierwszy rzut oka wydaje się nielogicznym umieszczanie jednocześnie

parametrów

BACKGROUND

BGCOLOR

to w praktyce warto deklarować kolor

tła strony, gdyż wiele osób wyłącza grafikę, w przeglądarce - wtedy

widoczny jest jedynie kolor tła strony. Dlatego nawet gdy używamy pliku

graficznego jako tła, dobrze jest także podawać jako alternatywny kolor tła

strony.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Parametr

BODY TEXT, LINK, VLINK, ALINK

Parametr TEXT pozwala określić kolor tekstu w dokumencie:

W znaczniku BODY Możemy również określić kolory odsyłaczy:

standardowy kolor odsyłacza:

LINK="kolor"

kolor odsyłacza, który został co najmniej raz użyty:

VLINK="kolor

kolor aktywnego odsyłacza (Odsyłacz aktywny to odsyłacz w trakcie

ładowania dowiązanego do niego dokumentu):

ALINK="kolor"

Katowice 2006/2007

Podstawy tworzenia stron WWW

Parametr marginesów strony

Z sobie tylko znanych powodów zarówno EXPLORER jak i NETSCAPE rożnie określają

marginesy strony. Z tego powodu dla każdego z nich musimy oddzielnie określić

marginesy strony.

•

Dla

EXPLORER'a

są to parametry:

lewy margines:

LEFTMARGIN="0"

prawy margines:

RIGHTMARGIN="0"

górny margines:

TOPMARGIN="0"

dolny margines:

BOTTOMMARGIN="0"

•

Dla

NETSCAPE

są to parametry:

marginesy boczne:

MARGINWIDTH="0"

marginesy górne i dolne:

MARGINHEIGHT="0"

BODY

LEFTMARGIN="0"

RIGHTMARGIN="0"

TOPMARGIN="0"

BODY

LEFTMARGIN="0"

RIGHTMARGIN="0"

TOPMARGIN="0"

BOTTOMMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

Katowice 2006/2007

Podstawy tworzenia stron WWW

Parametr marginesów strony

Oczywiście wszystkie te parametry możemy stosować razem

przy czym ich kolejność w znaczniku

BODY

jest dowolna:

<BODY BACKGROUND="index/notel.gif" BGCOLOR="#FFFFFF"

TEXT="#000000" LINK="#0000FF" ALINK="#FF0000"

VLINK="#000080" LEFTMARGIN="0" RIGHTMARGIN="0"

TOPMARGIN="0" BOTTOMMARGIN="0" MARGINWIDTH="0"

MARGINHEIGHT="0">

Katowice 2006/2007

Podstawy tworzenia stron WWW

Tekst

Spis zagadnień:

Znacznik akapitu.

Znacznik końca wiersza.

Atrybuty czcionki.

Formatowanie bloków.

Pogrubienie.

Pochylenie.

Podkreślenie.

Stała szerokość znaku.

Przekreślenie.

10.

Indeks górny.

11.

Indeks dolny.

12.

Czcionka duża.

13.

Czcionka mała.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Znaczniki akapitu i jego parametry

Znacznik akapitu

<P> treść akapitu </P>

Akapit to podstawowy blok tekstu w dokumencie HTML podobnie jak w edytorze tekstu MS WORD. Poszczególne akapity są

oddzielone od siebie dodatkową przestrzenią, dzięki czemu są wyraźnie widoczne na stronie

HTML

. Przy redagowaniu

tekstu należy pamiętać, że nie jest ważne "fizyczne" ułożenie tekstu w edytorze

HTML

, a zastosowane znaczniki. Jeśli

wpiszemy jakiś wiersz tekstu, a potem zaczniemy następny niżej, przeglądarka i tak złączy oba wiersze, jeżeli nie

umieścimy między nimi żadnego znacznika. Dopiero znacznik akapitu lub końca wiersza spowoduje taki efekt.

UWAGA:

Swoisty wyjątek stanowi tu znacznik bloku przeformatowanego:

który służy do wyświetlania tekstu tak, jak

zostanie on zredagowany "fizycznie„ w edytorze HTML.

<PRE> tekst przedzielony dodatkowymi spacjami</PRE>

Przykład:

tekst przedzielony dodatkowymi spacjami przykład kodu dwóch oddzielnych akapitów

<P> Akapit pierwszy </P>

<P> Akapit drugi </P>

wygląd na stronie:

Akapit pierwszy

Akapit drugi

Akapit może dodatkowo przyjmować atrybut wyrównania: do lewej (

left

), do prawej (

right

), do środka (

center

), wyjustowany

(

justify

<P ALIGN="center">treść akapitu</P>

przykład:

Akapit który został wycentrowany

Katowice 2006/2007

Podstawy tworzenia stron WWW

Znacznik końca wiersza

Znacznik końca wiersza

<BR>

W przykładzie powyżej widać wyraźną przerwę między dwoma akapitami.

Czasami jednak potrzebujemy zakończyć wiersz w konkretnym miejscu, ale

tak by nie występowała w tym miejscu dodatkowa przerwa. W sytuacji

takiej stosujemy znacznik końca wiersza

<BR>

Przykład kodu akapitu podzielonego znacznikiem

<BR>

<P>

Część pierwsza akapitu

<BR>

Część druga akapitu

</P>

wygląd na stronie:

Część pierwsza akapitu

Część druga akapitu

Katowice 2006/2007

Podstawy tworzenia stron WWW

Znaczniki fizyczne formatowania tekstu

Pogrubienie:

<B> czcionka pogrubiona (bold)</B>

Przykład:

czcionka pogrubiona (bold)

Pochylenie:

<I> Czcionka pochylona (Italie)</I>

Przykład:

Czcionka pochylona (Italie)

Podkreślenie:

<U> Czcionka podkreślona (underlined)</U>

Przykład:

Czcionka podkreślona (underlined)

Czcionka o stałej szerokości znaku:

<TT>Czcionka o stałej szerokości znaku</TT>

Przykład: Czcionka o stałej szerokości znaku (monotypiczna - teletype)

Czcionka przekreślona:

<STRIKE>Czcionka przekreślona (strike)</STRIKE>

Przykład: Czcionka przekreślona (strike)

Katowice 2006/2007

Podstawy tworzenia stron WWW

Znaczniki fizyczne formatowania tekstu

Indeks górny:

<SUP> Superskrypt (indeks górny)</SUP>

Przykład: Tekst normalnej wielkości

Superskrypt

(indeks górny)

Indeks dolny:

<SUB> Subskrypt (indeks dolny)</SUB>

Przykład: Tekst normalnej wielkości

Subskrypt

(indeks dolny)

Duża czcionka

(+1 punkt w stosunku do bazowej):

<BIG> Duża czcionka </BIG>

Przykład:

Duża czcionka

Mała czcionka

(-1 punkt w stosunku do bazowej):

<SMALL> Mała czcionka</SMALL>

Przykład:

Mała czcionka

Oczywiście możliwa jest różna kombinacja tych znaczników np.:

<B><I><U> To jest tekst pogrubiony, pochylony, podkreślony</B></I></U>

To jest tekst pogrubiony, pochylony, podkreślony

Katowice 2006/2007

Podstawy tworzenia stron WWW

Atrybuty czcionki

Kolor czcionki:

<FONT COLOR="kolor">tekst</FONT>

Przykład:

tekst

Wielkość czcionki:

<FONT size="+x">tekst</FONT>

Przykład:

to jest czcionka o wielkości 1

to jest czcionka o wielkości 2

to jest czcionka o wielkości 3

to jest czcionka o wielkości 4

To jest tekst normalny,

który teraz powiększamy o 1,

a następnie zwiększamy

jeszcze o 1,

po czym powracamy do standardowej wielkości.

Zarówno rozmiar jak i kolor czcionki możemy łączyć ze sobą:

<FONT SIZE=+2 COLOR="#FF6600">To jest tekst o rozmiarze +2 i kolorze

czerwonym</FONT>

Przykład:

To jest tekst o rozmiarze +2 i kolorze czerwonym

Katowice 2006/2007

Podstawy tworzenia stron WWW

Formatowanie bloków

Jeśli ktoś używał styli przy formatowaniu tekstu w edytorach tekstu (np.

WORD

STAROFFICE

AMIPRO

WORD

PERFECT

) tu poczuje się jak

w domu. W

HTML'u

istnieje sześć stopni nagłówków (

hedding

Przykład:

Nagłówek stopnia 1

Nagłówek stopnia 2

Nagłówek stopnia 3

Nagłówek stopnia 4

Nagłówek stopnia 5

Nagłówek stopnia 6

Katowice 2006/2007

Podstawy tworzenia stron WWW

Linia pozioma

Spis zagadnień:

Znacznik linii poziomej.

Cień linii.

Grubość linii.

Długość linii.

Kolor linii.

Wyrównanie linii.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Linia pozioma

Znacznik linia pozioma:

<HR>

dodatkowe argumenty: Linia może być pozbawiona cieniowania

Przykład: Linii możemy nadać dowolną grubość

Przykład: Linia może mieć określoną długość w pikselach:

lub w procencie szerokości strony

Przykład: Linii możemy nadać kolor (tylko w przeglądarce MS EXPLOREL):

Przykład: Linia może być umieszczona na środku (domyślnie), równana do lewej lub

prawej strony

Przykład: Oczywiście wymienione argumenty możemy łączyć:

Przykład:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Wykazy – listy

Na stronach WWW podobnie jak w edytorach tekstu powszechnie stosuje

się wykazy. Są to wypunktowania oraz wyliczenia jakichś punktów,

które w skondensowany sposób prezentują jakąś myśl. Użytkownicy

edytorów tekstów spotykają się z tym elementem w edytorze MS Word

w postaci list numerowanych i list wypunktowanych.

Wykaz wypunktowany

<UL>

<LI> punkt pierwszy</LI>

<LI> punkt drugi</LI>

<LI> punkt trzeci</LI>

</UL>

Przykład:

Przykład:
•

punkt pierwszy

•

punkt drugi

•

punkt trzeci

Katowice 2006/2007

Podstawy tworzenia stron WWW

Wykazy - listy

Lista numerowana

<OL>

<LI>punkt pierwszy</LI>

<LI>punkt drugi</LI>

<LI>punkt trzeci</LI>

</OL>

Przykład:

punkt pierwszy

punkt drugi

punkt trzeci

Parametry dodatkowe znacznika

(tylko w EXPLORERZE)

Jeśli użyjemy polecenia

to zamiast kółeczek pojawią się

kwadraciki. Przykład:



punkt pierwszy



punkt drugi



punkt trzeci

Katowice 2006/2007

Podstawy tworzenia stron WWW

Odsyłacze – hiperłącza

Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki) są niczym innym, jak

wskazaniem jakiegoś innego miejsca w dokumencie lub zupełnie innego odrębnego

dokumentu. Kliknięcie na nim przenosi użytkownika do docelowego miejsca

w postaci: innego miejsca na tej samej stronie, innej strony w ramach tego samego

serwisu, strony w innym serwisie. Hipertekstowe odsyłacze w

World Wide Web

można porównać ze spisem treści czy odsyłaczami w książce. Elektroniczne

odsyłacze są znacznie wygodniejsze w obsłudze, gdyż automatycznie po kliknięciu

na nich wykonują skok do wskazanego miejsca.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Odsyłacze – hiperłącza

Ze względu na funkcje odsyłacze możemy podzielić na:

•

Odsyłacze do innych stron WWW

Tekst który będzie widoczny na stronie</A>

•

Odsyłacze do zakładek na stronach WWW

Na stronach WWW można umieszczać zakładki, które pozwalają odwołać się nie tylko do

konkretnej strony ale do konkretnego miejsca na stronie. Zakładkę tworzy się przez

umieszczenie w określonym miejscu strony znacznika w postaci:

•

Odwołanie do tej zakładki będzie miało postać:

Tekst który będzie widoczny na

stronie</A>

•

Odsyłacze uruchamiające pocztę, elektroniczną

<A HREF="mailto:adres@mail"> Tekst na stronie</A>

Katowice 2006/2007

Podstawy tworzenia stron WWW

Adresy względne i bezwzględne

Możliwe rodzaje odwołań w serwisie

internetowym:

1. adres

bezwzględny

serwisu

zewnętrznego;

2. adres względny do strony znajdującej

się w tym samym katalogu;

3. adres względny do strony znajdującej

się w katalogu niższym w hierarchii;

4. adres względny do strony znajdującej

się w katalogu nadrzędnym w hierarchii;

5. adres względny do strony znajdującej

się

katalogu

równorzędnym

w hierarchii.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Adresy względne i bezwzględne

Adresy bezwzględne

Adres typu: http://www.onet.pl jest tzw. adresem bezwzględnym (zawierającym pełną ścieżkę, łącznie

z nazwą protokołu http://). Jest on stosowany w zasadzie tylko wtedy, gdy odwołujemy się do stron
na innych serwerach (strzałka nr 1)

Przykładowy odsyłacz:

<A HREF="http://www.onet.pl"> Tekst który będzie widoczny na stronie</A>

Adresy względne

Jeśli tworzymy odsyłacze do stron we własnym serwisie, praktycznym jest stosowanie adresowania

względnego, podając tylko fragment ścieżki. Strony w tym samym katalogu

Tworząc odsyłacz do strony znajdującej się w tym samym katalogu będzie on miał postać:

<A HREF="inna_strona.html"> Tekst który będzie widoczny na stronie</A>

Obrazuje to sytuacja zaznaczona strzałką nr 2. odsyłacz na stronie "index.htm" będzie wtedy wyglądał

następująco:

<A HREF="index1.htm"> odsyłacz do strony index1.htm</A>

Katowice 2006/2007

Podstawy tworzenia stron WWW

Adresy względne i bezwzględne

Katalog podrzędny

Gdy "inna_strona.html" znajduje się w katalogu niższym w hierarchii w stosunku do katalogu w którym

znajduje się dana strona, należy podać dodatkowo nazwę tego katalogu, np.:

<A HREF="niższy_katalog/inna_strona.html"> Inna strona</A>

Obrazuje to sytuacja zaznaczona strzałką nr 3. Odsyłacz na stronie "index.htm" będzie wtedy wyglądał

następująco:

<A HREF="katalog1/strona1.htm"> strona 1</A>

W analogiczny sposób podajemy adresy stron zagnieżdżonych jeszcze głębiej.

Katalog nadrzędny

Jeśli "inna_strona.html" znajduje się w katalogu nadrzędnym w stosunku do katalogu, w którym znajduje się

dana strona, polecenie przyjmie postać:

<A HREF="../inna_strona.html"> Inna strona</A>

Obrazuje to sytuacja zaznaczona strzałką nr 4. Odsyłacz na stronie "strona2.htm" będzie wtedy wyglądał

następująco:

<A HREF="../index.htm">index</A>

Katowice 2006/2007

Podstawy tworzenia stron WWW

Adresy względne i bezwzględne

Katalog równorzędny

Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii:

<A HREF="../katalog_rówmorzędny/nazwa_strony.html">strona2</A>

Obrazuje to sytuacja zaznaczona strzałką nr 5. Odsyłacz na stronie

"strona1.htm" będzie wtedy wyglądał następująco:

<A HREF="../katalog2/strona2.htm">strona2</A>

Dwie kropki w adresie nakazują przeglądarce "zajrzeć wyżej" w hierarchii

katalogów, "zejść" do nowego katalogu i przywołać żądaną stronę.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Grafika

Strony WWW zdecydowanie urozmaicają elementy graficzne. Mimo, iż ich

wczytanie z serwera wydłuża załadowanie strony przez przeglądarkę, to

jednak trudno sobie wyobrazić ich całkowity brak. Z tego też powodu

w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF

i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie

niewielkimi rozmiarami plików graficznych. Należy jednak unikać

nadmiernego nasycania stron grafikami.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Grafika

Grafika na stronie WWW

Podstawowa konstrukcja ma następującą postać:

IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (źródło).
Jeśli pliki graficzne trzymamy w odrębnym katalogu, analogicznie jak w przypadku

odsyłaczy

znacznik osadzenia grafiki musi uwzględniać ten fakt, np.

Grafika jako odsyłacz

Element graficzny możemy również użyć jako osyłacza. Całość będzie miała wtedy

postać:

<A HREF="adres_do_innej_stony_lub_innego_serwisu_WWW"><IMG

SRC="plik_graficzny" ></A>

Przykład:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Tabele

Tabele na stronach WWW są bardzo ważnym elementem.

Mogą one służyć jako podstawa do budowy stron o bardzo

skomplikowanym układzie. Można w nich stosować wiele

zaawansowanych

opcji,

które

trudno

przedstawiać

początkującym, ale warto przynajmniej znać podstawy.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Ogólne ramy tabeli

Między tymi dwoma znacznikami, umieszczane są definicje wierszy, definicje komórek w rzędach,

konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

Wiersz tabeli

Tabela jest zbudowana z wierszy. Każdy wiersz oznaczony jest znacznikami:

Komórki tabeli

Z kolei wiersz tabeli jest zbudowany z komórek. Komorkę opisujemy znacznikiem: <TD> </TD>

Całość konstrukcji przykładowej tabeli składającej się z trzech wierszy z których każdy zawiera dwie

komórki będzie miała postać:

<TABLE>

</TABLE>

W praktyce na stronie kod przyjmie postać:

1 2 3

4 5 6

7 8 9

Katowice 2006/2007

Podstawy tworzenia stron WWW

Obramowanie tabeli

Aby tabela zawierała obramowanie, należy rozszerzyć definicję znacznika

tabele o parametr

BORDER

. jeśli nie podamy szerokości obramowania,

przyjmowana jest jej domyślna wartość: <TABLE BORDER>

Możemy jednak zdefiniować szerokość obramowania:

Całość tabeli o kodzie:

</TABLE>

Na stronie będzie wyglądać:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Kolor tła tabeli

Dla tabeli możema zdefiniować kolor tła tabeli. W tym celu należy w definicji

tabeli dodać parametr

BGCOLOR="barwa"

, np.:

Całość tabeli o kodzie:

</TABLE>

Na stronie będzie wyglądać:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Grafika jako tło tabeli

Dla tabeli możemy zdefiniować tło w postaci grafiki (podobnie jak dla całej

strony WWW). W tym celu należy w definicji tabeli dodać parametr

BACKGROUND="nazwa_pliku"

, np.

Całość tabeli o kodzie:

</TABLE>

Na stronie będzie wyglądać:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Szerokość tabeli

Parametr

WIDTH

daje nam możliwość samodzielnego zdefiniowania szerokości

tabeli:

Całość tabeli o kodzie:

</TABLE>

Na stronie będzie wyglądać:

Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np.:

pół szerokości ekranu przeglądarki. Kod będzie miał wtedy postać:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Szerokość tabeli

Wyrównanie tabeli na stronie

Tabele możemy ustawić na stronie za pomocą

ALIGN

Parametr ALIGN może przyjmować wartości "

LEFT

", "

CENTER

RIGHT

Całość tabeli o kodzie:

<TABLE BORDER=1 WIDTH=600 ALIGN=" RIGHT

</TABLE>

Na stronie

będzie

wyglądać:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Parametry znacznika komórki

Szerokość

tabel

Podobnie jak w przypadku znacznika tabeli, parametry takie jak :

BGCOLOR

BACKGROUND

WIDTH

ALIGN

możemy użyć jako dodatkowe parametry

komórki. W takiej sytuacji podane parametry nie będą odnosiły się globalnie

do całości tabeli, a tylko do komórki w znaczniku której zostały podane:

<TD

BGCOLOR="red" ALIGN="CENTER">

Całość tabeli o kodzie:

<TR><TD BGCOLOR="red" ALIGN="CENTER"> 1</TD><TD>2 </TD>3

</TR>

</TABLE>

Na stronie

będzie

wyglądać:

Katowice 2006/2007

Podstawy tworzenia stron WWW

Animacje i dźwięk na

stronach WWW

Katowice 2006/2007

Podstawy tworzenia stron WWW

Animacje i dźwięk na stronach

WWW

Otwarciu strony

WWW

może towarzyszyć tło dźwiękowe. Omówiony poniżej

element

BGSOUND

jest popularny, ale nie tylko nie jest zalecany przez

specyfikację

HTML

, ale wręcz jest w niej nieobecny! Jest to typowy przykład

znacznika typu "

browser specific

", czyli znacznika właściwego tylko dla jednej

przeglądarki. W tym wypadku chodzi o przeglądarkę

MS Internet Explorer

Przykład:

Znaczenie atrybutów:

src=

ścieżka dostępu do pliku dźwiękowego. Internet Explorer akceptuje jako tło

dźwiękowe popularne pliki typu MID, WAV, AU czy MP3;

loop=

liczba powtórzeń. Wartość "-1" powoduje zapętlenie odtwarzanego

dźwięku;

balance=

balans między prawym i lewym głośnikiem. "Wychylenie" ustawia się

w przedziale od "-10000" do "10000";

volume=

siła głosu. Aktualna siła zależy od ustawień sprzętu użytkownika,

a parametr umożliwia "ściszenie" w przedziale od "-10000" do "0".

Katowice 2006/2007

Podstawy tworzenia stron WWW

Animacje i dźwięk na stronach

WWW

Element EMBED

Zastosowanie tego elementu otwiera drogę do uruchomienia plików multimedialnych

w przeglądarkach

Netscape

czy

Opera

. Jednak i ten element języka HTML nie jest

zalecany przez specyfikację

HTML.

Efekt działania znacznika

EMBED

zależy od

zainstalowanych w systemie użytkownika tzw. plugin'ów obsługujących dany typ pliku

multimedialnego.

EMBED

w zastosowaniu jest niemal identyczny jak element

IMG

, czyli

używa tych samych co

IMG

parametrów oraz posiada kilka charakterystycznych.

Przykład:

loop="true"> </embed>

Znaczenie wybranych atrybutów:

src=

ścieżka dostępu do pliku dźwiękowego;

loop=

powtarzanie dźwięku (

true

- tak /

false

- nie);

autostart=

automatyczne uruchomienie (

true

- tak /

false

- nie);

hidden=

ukrycie panelu sterującego (

true

- tak /

false

- nie);

controls=

"smallconsole"

- zminimalizowany panel sterujący;

pluginspage=

adres URL do miejsca, skąd pobrać można odpowiednią wtyczkę do obsługi

danego typu pliku. Adres ten powinien być zgodny ze wskazaniami producenta wtyczki.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Animacje i dźwięk na stronach

WWW

Elementy multimedialne wymagają poprawnie zainstalowanych „wtyczek” do

przeglądarek internetowych (ang.

plug-in

). W zależności od przeglądarki

i w zależności od zainstalowanej „wtyczki” użytkownik może zobaczyć nieco inny

wygląd poszczególnych kontrolek obsługujących dany typ pliku. Większość plików,

które można osadzać na stronach WWW, jest obsługiwanych domyślnie przez

przeglądarki zainstalowane w pełnych wersjach instalacyjnych, jeśli jednak

przeglądarka „nie chce” wyświetlić zawartości multimedialnej, wystarczy

zainstalować w swoim systemie następujące oprogramowanie, aby nie mieć

problemów z odtwarzaniem multimediów:

Producent adres WWW:

QuickTime Player –

http://www.apple.com/quicktime/download/

Macromedia Flash Player –

http://www.macromedia.com/downloads/

Windows Media Player –

http://

windowsmedia.com

download

Katowice 2006/2007

Podstawy tworzenia stron WWW

Animacje i dźwięk na stronach

WWW

Element OBJECT

Użycie znacznika

OBJECT

jest zalecaną metodą umieszczania na stronie

WWW

plików multimedialnych dowolnego typu. Dzięki temu elementowi można na

stronie umieścić zarówno plik dźwiękowy, film czy animację typu

Flash

Osadzanie animacji Flash

Użytkownicy programu

Macromedia Flash

lub innych programów - klonów

tworzących pliki typu

SWF

, mogą się posłużyć wbudowaną funkcją eksportu

gotowego filmu do dokumentu

HTML

Katowice 2006/2007

Podstawy tworzenia stron WWW

Animacje i dźwięk na stronach

WWW

Element OBJECT

Jeżeli jednak dysponujemy gotową animacją, którą chcemy wstawić do strony, należy zastosować następujący "szablon" (tu podajemy niezbędne minimum

potrzebnych parametrów i atrybutów):

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub

/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

WIDTH="400"

HEIGHT="400">

<EMBED src="nazwa.swf"

quality="high"

bgcolor="#FFFFFF"

width="400"

height="400"

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer">

</EMBED>

</OBJECT>

Katowice 2006/2007

Podstawy tworzenia stron WWW

Animacje i dźwięk na stronach

WWW

Atrybuty

OBJECT

jakie należy dostosować do swoich potrzeb to:

WIDTH

= oraz

HEIGHT

= szerokość i wysokość

PARAM

= definiujące zestaw właściwości obiektu, w tym najważniejszy –

nazwa pliku wraz z ewentualną ścieżką dostępu.

EMBED

= obecny wewnątrz

OBJECT

, jest obsługiwany przez przeglądarki

Netscape

Mozillę

itp.

Parametry

EMBED

"powtarzają" wartości poszczególnych atrybutów elementu

OBJECT

oraz

poszczególnych atrybutów elementów

PARAM

Katowice 2006/2007

Podstawy tworzenia stron WWW

Co to jest JavaScript

JavaScript

to nazwa skryptowego języka programowania opartego na

standardzie

ECMAScript

opracowanego

pierwotnie

przez

firmy

Sun

Microsystems

Netscape

. Umożliwia on umieszczanie na stronach WWW

aktywnych elementów, takich jak przyciski zmieniające wygląd, gdy przesunie

się nad nimi myszką, kaskadowe menu, otwieranie nowych okien

o dostosowanym wyglądzie i położeniu, czy sprawdzanie wartości pól formularza

przed wysłaniem. To są wybrane, popularne zastosowania, ale można też

tworzyć bardziej skomplikowane i pożyteczniejsze skrypty. Możliwości

zastosowań są bardzo różnorodne. Swoją prawdziwą użyteczność

JavaScript

ujawnia we współpracy z innymi technologiami internetowymi takimi jak HTML,

CSS, DOM, niejako wprowadzając je w ruch. Stąd nazwa "DHTML" (Dynamiczny

HTML).

Katowice 2006/2007

Podstawy tworzenia stron WWW

Co to jest ten

JavaScript ?

JavaScript

jest dobrze obsługiwany praktycznie przez wszystkie obecnie

liczące się przeglądarki internetowe. Różnice w obsłudze, choć coraz
rzadziej spotykane, dotyczą nie bezpośrednio

JavaScript

lecz

środowiska obiektowego przeglądarek WWW, w którym działa

JavaScript

(tak zwanego

DOM

Język

JavaScript

(języki oparte na

ECMAScript

) jest także stosowany do

innych celów, nie związanych bezpośrednio z przeglądarką

WWW

- w

można pisać ASP, można go wykorzystać przy automatyzacji zadań w
różnych aplikacjach (np. MS Office, Star Office, czy sam Windows), jest
on wreszcie wykorzystywany przy budowaniu programów (vide projekt

Mozilla

JavaScript

występuje w wielu odmianach, posiadających

dodatkowe możliwości np.

JScript

firmy Microsoft.

Katowice 2006/2007

Podstawy tworzenia stron WWW

A dlaczego „skrypt”?

, jak sama nazwa wskazuje, jest

skryptowym językiem programowania

Oznacza to w sporym uproszczeniu (choć tu zapewne poprawią mnie zawodowi
informatycy), że w przeciwieństwie do tradycyjnych programów, te tworzone
w

, działają w środowisku innego programu (w przeglądarce internetowej)

i przy ich pomocy można kontrolować jedynie to środowisko. Nie są też
kompilowane przez autora. Kod (skrypt) umieszcza się bezpośrednio
w dokumencie

HTML

(choć są wyjątki) i jest on kompilowany (albo raczej

interpretowany) dopiero przez przeglądarkę użytkownika. Dzięki temu

podobnie jak

Java

, jest uniwersalny i może być wykorzystywany we wszystkich

systemach operacyjnych, jeśli tylko przeglądarka WWW na to pozwala.
Oprócz tego

JavaScript

posiada mniejsze możliwości niż często mylona z nim

Java

(czyli pełnowartościowy, wieloplatformowy język programowania), bo i do

zupełnie innych celów niż

Java

został stworzony. Nie można tu przykładowo

zapisywać i odczytywać żadnych plików (wyjątkiem jest

JScript

) albo uruchamiać

innych aplikacji (jeszcze raz wyjątek jak wyżej). Jest to także spowodowane
względami bezpieczeństwa - dzięki temu

nie może stanowić prawie żadnego

zagrożenia (ale i tu są wyjątki).

Katowice 2006/2007

Podstawy tworzenia stron WWW

Czy trzeba znać JS aby stosować

skrypty na swojej stronie?

Bynajmniej! Wystarczy wkleić odpowiedni kod do swojego dokumentu

HTML

i wszystko gra. Ponieważ skrypty są bez żadnego kodowania

umieszczane w

HTML-u

można skopiować skrypty z odwiedzanych

stron. Oczywiście może to być naruszeniem praw autorskich, więc
lepiej skorzystać z serwisów oferujących skrypty za darmo do
wykorzystania. Nie jest jednak naruszeniem praw autorskich
analizowanie ciekawych rozwiązań i zdobywanie wiedzy na przykładach
- to jest wręcz godne polecenia.
Jednak tutaj mała, acz ważna, uwaga: bezmyślne kopiowanie skryptów
nie pozwala w pełni docenić możliwości tego języka. Dodatkowo, bez
znajomości chociaż podstaw nie będziecie mogli znaleźć i poprawić
błędów, ani dostosować skryptów do własnych potrzeb. Dlatego
szczerze polecam zapoznanie się z kursem podstaw

i dalsze

pogłębianie wiedzy. Analizowanie znalezionych w sieci skryptów jest na
to doskonałym sposobem.

Katowice 2006/2007

Podstawy tworzenia stron WWW

Testowanie witryny

Po utworzeniu witryny sieci Web warto sprawdzić jej funkcjonowanie. Dla odwiedzających witrynę bardzo
frustrujące mogą okazać się komunikaty o błędach protokołu Hypertext Transfer Protocol (HTTP), pojawiające
się po kliknięciu łącza, oraz brak grafiki w witrynie. Najlepszym sposobem zminimalizowania liczby błędów
jest drobiazgowe sprawdzenie witryny w prawidłowo zaplanowanym procesie testowania.

Przygotowanie listy elementów do przetestowania

Opracowanie prostego planu testów należy rozpocząć od sporządzenia listy elementów do przetestowania.
Powinny zostać uwzględnione wszystkie elementy witryny sieci Web, w tym łącza do innych stron, obrazy,
łącza poczty e-mail, panele i paski nawigacyjne oraz menu. Poniżej podano podstawową listę elementów,
które może zawierać witryna:
•Łącza do innych stron i innych witryn
•Grafika
•Animacje
•Znaki specjalne (znane również jako znaki rozszerzone, takie jak symbol ÷)
•Menu
•Paski i panele nawigacyjne
•Przyciski i łącza Poprzednia/Następna
•Tabele
•Transparenty
•Czcionki wielokrotne
•Dynamiczny język HTML (DHTML)
•Liczniki odwiedzin
•Aparaty wyszukiwania

Katowice 2006/2007

Podstawy tworzenia stron WWW

Testowanie witryny

Dokładne określenie celu testów

Po utworzeniu listy elementów przeznaczonych do testowania należy dokładnie określić

przedmiot testów. Na przykład, jeśli w witrynie sieci Web znajduje się grafika, należy

sprawdzić, czy jest ona wyświetlana. Jeśli grafika zwiera tekst zastępczy („alt”), to czy jest

on wyświetlany? Jeśli grafika opatrzona jest podpisami, to czy są one wyświetlane

prawidłowo? Poniżej przedstawiono przykładową listę testów. (Przedstawiona lista jest tylko

przykładem. Testy, które należy przeprowadzić, będą różnić się w zależności od zawartości

witryny sieci Web).

Katowice 2006/2007

Podstawy tworzenia stron WWW

Testowanie witryny

Element

Test

Nie

Uwa

Wygląd ogólny

Czy nie występują błędy pisowni?

Czy tabele wyglądają prawidłowo?

Czy wszystkie czcionki są poprawne?

Łącza do innych stron i

innych witryn

Czy łącza przenoszą do właściwych stron?

Czy łącza zmieniają kolor po kliknięciu?

Grafika

Czy są widoczne wszystkie elementy?

Czy dla każdego elementu pojawia się tekst

zastępczy?

Czy podpisy są wyświetlane prawidłowo?

Animacje

Czy animacje działają?

Czy każdy element menu przenosi do właściwej

strony?

Czy łącza menu przenoszą do właściwej zakładki?

Paski i panele

nawigacyjne

Czy każdy element nawigacji przenosi do właściwej

strony?

Czy grafika (o ile jej użyto) jest wyświetlana

poprawnie?

Poniżej przedstawiono przykładową listę testów

Katowice 2006/2007

Podstawy tworzenia stron WWW

Testowanie witryny

Dobrym zwyczajem jest również testowanie witryny w różnych przeglądarkach
sieci Web. Zależnie od docelowej lokalizacji witryny — w Internecie bądź
w intranecie — warto przetestować nawet różne wersje przeglądarek. Niektóre
starsze wersje przeglądarek nie obsługują tabel, natomiast inne przeglądarki
nie obsługują znaków specjalnych (rozszerzonych). Przetestowanie witryny przy
użyciu różnych przeglądarek pozwala określić minimalne wymagania wobec
przeglądarki pozwalające wyświetlić tę witrynę. Po określeniu wymagań
odnośnie przeglądarki należy umieścić tę informację na stronie głównej.

Witryny umieszczane w intranecie

Należy określić, które wersje danej przeglądarki są używane w firmie.
W większości firm jest wykorzystywany jeden rodzaj przeglądarki sieci Web.
Firma może jednak dokonywać aktualizacji do nowszej wersji, więc w użyciu
mogą być dwie różne wersje.

Witryny umieszczane w Internecie

Należy przetestować różne rodzaje przeglądarek i różne ich wersje.