JPG - iElearning.pl

Transkrypt

JPG - iElearning.pl

WyŜsza Szkoła Handlowa w Kielcach
Zbigniew Zieliński
Tworzenie stron WWW – język HTML
Materiały do ćwiczeń laboratoryjnych z przedmiotu
Sieci KOMPUTEROWE
Kielce 1999
TWORZENIE STRON WWW – JĘZYK HTML
Wprowadzenie
Rozdział 1. Idea hipertekstu
Rozdział 2. Znaczniki
Rozdział 3. Struktura HTML’a
Rozdział 4. Atrybuty czcionki
Rozdział 5. Organizacja tekstu
Rozdział 6. Numerowanie
Rozdział 7. Grafika na stronie WWW
Rozdział 8. Odsyłacze (linki) na stronach WWW
Rozdział 9. Tabele
Rozdział 10. Ramki
Rozdział 11. Formularze
Rozdział 12. Edytory HTML
Literatura
-5-
str. 5
str. 6
str. 9
str. 12
str. 15
str. 19
str. 24
str. 27
str. 29
str. 33
str. 36
str. 38
str. 42
str. 43
Coraz popularniejszy w ostatnim czasie Internet, a w szczególności jego „graficzna”
część, znana pod potoczną nazwą World Wide Web przyciąga miliony uŜytkowników
komputerów na całym świecie.
W sieci znajdziemy juŜ kilka tysięcy serwerów, zawierających dziesiątki milionów
stron. To przeogromne bogactwo informacji, dostępnej za pośrednictwem komputera
i przeglądarki WWW, stwarza wręcz kłopot swą obfitością, dając chleb rozmaitym serwisom,
które usiłują zaprowadzić elementarny porządek w dostępie do niej (znane powszechnie
w sieci Yahoo!, AltaVista czy HotBot).
Znakomita większość uŜytkowników Internetu jest zainteresowana czytaniem stron
WWW, wymianą poczty elektronicznej czy uczestnictwem w grupach dyskusyjnych
(USENET). Coraz więcej jednak osób interesuje się takŜe bardziej aktywnym uczestnictwem
w Internecie, chcąc zaprezentować siebie samych, swoje poglądy i swoje dokonania –
zawodowe i pozazawodowe. Osoby te, chcąc umieścić w Internecie swoje własne strony
WWW, muszą jednak poznać specyficzny język HTML (HyperText Markup Language),
dzięki któremu dokument HTML jest czytelny dla innych osób.
Język HTML jest zbiorem specjalnych znaczników (ang. tag), którymi są opatrywane
poszczególne części dokumentu, a takŜe reguł ich stosowania. Znaczniki są z kolei
interpretowane przez przeglądarkę WWW. Nie jest ich zbyt wiele i moŜna je opanować
stosunkowo szybko – sprzyja temu fakt, Ŝe juŜ znajomość 20 - 30 poleceń z powodzeniem
wystarcza do konstruowania elementarnego zbioru znaczników.
Ten skrypt zawiera łatwe do zrozumienia instrukcje, zobrazowane grafiką
i przykładami, które pomogą czytelnikowi stworzyć własny serwis WWW. DuŜa część
skryptu zawiera teorię – bez której zrozumienie zasad tworzenia i pracy z HTML byłoby
niemoŜliwe. Oczywiście nie zostały w tym opracowaniu zawarte wszystkie polecenia HTML
- aby lepiej i w większym zakresie poznać ten język – odsyłam czytelnika do obszernej
literatury (spis znajduje się na końcu skryptu).
-6-
IDEA HIPERTEKSTU
Hipertekst to dane przechowywane jako sieć dokumentów połączonych odsyłaczami.
Dokumenty mogą zawierać teksty, obrazy, dźwięki, animacje, filmy wideo i inne postaci
danych. Pojęcie hipertekstu wprowadził Ted Nelson w 1965 roku. Jednak juŜ dwadzieścia lat
wcześniej Vannevar Bush przedstawił pomysł urządzenia mikrofilmowego wykorzystującego
ideę hipertekstu, które nazwał memexem. Ted Nelson od ponad 30 lat pracuje nad systemem
hipertekstowym Xanadu. Opublikował listę wymagań dla implementacji Xanadu, z których
część spełnia HyperWave, dawniej znany jako Hyper-G, wykonany na Politechnice w Grazu
(Austria).
Najbardziej popularnym systemem hipertekstowym jest WWW (World Wide Web –
Sieć Ogólnoświatowa). Powstał on w 1990 roku w Europejskim Ośrodku Badań Jądrowych
CERN połoŜonym koło Genewy (Szwajcaria). Obecnie WWW to zbiór dziesiątków tysięcy
serwerów w wielu krajach połoŜonych w wielu krajach połączonych siecią odsyłaczy.
KaŜdy serwer udostępnia wszystkim lub tylko wybranym uŜytkownikom dokumenty
zawierające róŜnorodne informacje ze swojej bazy. Z sieci WWW korzystają miliony
uŜytkowników wyposaŜonych w programy klienta WWW nazywane przeglądarkami (ang.
browser). Do najpopularniejszych przeglądarek WWW moŜemy zaliczyć Netscape
Navigatora i Microsoft Explorer.
Dokument HTML jest interpretowany przez przeglądarkę i wyświetlany na ekranie
komputera. W pojawiającym się tekście mogą występować odsyłacze (ang. link) do innych
dokumentów (lub innych miejsc w tym samym dokumencie), np.:
Polska – państwo w Europie Środkowej, stolica Warszawa, inne miasta główne to Łódź,
Kraków i Wrocław.
WyróŜnione przez podkreślenie słowa: Europa, Warszawa, Łódź, Kraków i Wrocław
to odsyłacze do danych w sieci, na tym samym lub innych serwerach WWW. Jeśli najechać
kursorem myszki na jedno z podkreślonych słów i nacisnąć lewy przycisk myszki, to na
ekranie ukaŜe się informacja na wskazany temat, np. o Wrocławiu. Odsyłacz moŜe
wskazywać nie tylko dokument w HTML, ale równieŜ np. plik w archiwum ftp, konto
dostępne dla usługi telnet lub grupę w nowościach sieciowych. KaŜdy taki dokument lub
usługa w sieci ma swój adres, tzw. URL (ang. Uniform Resource Locator – jednolity adres
zasobu) – stanowi on wygodny i coraz popularniejszy sposób wskazywania lokalizacji
zasobów Internetu. Koncepcja adresów URL powstała w ramach projektu WWW. Niektóre
z adresów zaczynają się od napisu http:// i są to strony WWW dostępne przy uŜyciu
przeglądarki np. Internet Explorer.
URL składa się z nazwy usługi, dwukropka i części specyficznej dla danej usługi. Dla
WWW uŜywa się nazwy protokołu, a więc http, inne często uŜywane usługi to: ftp, gopher,
news i telnet. Część charakterystyczna ma składnię:
//adres_serwera:numer_portu/ścieŜka
-7-
Oto przykłady adresów URL:
http://www.wsh-kielce.edu.pl
http://www.wsh-kielce.edu.pl/~kamera/index.html
ftp://ftp.wsh-kielce.edu.pl
news:pl.gazety.donosy
mailto:[email protected]
- strona tytułowa serwera WWW,
- dokument na serwerze WWW,
- kartoteka główna serwera ftp,
- grupa nowości sieciowych.
- adres poczty elektronicznej
Przeglądarki są z reguły programami uniwersalnymi, umoŜliwiającymi dostęp nie
tylko do serwerów WWW, ale takŜe do innych typów serwerów, np. gopher, ftp, nowości
sieciowe, jak równieŜ lokalnych plików uŜytkownika. UŜytkownik zamiast uczyć się
korzystania z kilku róŜnych programów, moŜe uŜywać uniwersalnego graficznego programu
klienta, np. Netscape Navigator lub MS Internet Explorer.
Rysunek 1 - Odsyłacze na stronie WWW
Odsyłacze (linki) graficzne („przyciski” zrobione
za pomocą programu graficznego)
Odsyłacze (linki) tekstowe
Hipertekst jest bardzo silną koncepcją, która rewolucjonizuje sposób poruszania się po
sieci. Do zalet Pajęczyny moŜna zaliczyć:
dostępność w formie graficznej – projektanci protokołów transportowych dla hipertekstu
przewidzieli nadejście multimedialnej rewolucji. Koncepcja WWW została w ten sposób
rozbudowana o moŜliwość operowania na danych graficznych, takich jak obrazki,
-8-
przyciski, róŜne rodzaje czcionek, przełączniki, pola kontrolne i wiele innych. JeŜeli tylko
uŜytkownik dysponuje dobrym klientem WWW, to serwis ten staje się prawdziwą ucztą
dla oka.
nieliniowość – niektóre usługi, jak np. gopher, wymagają od uŜytkownika przejścia przez
wiele poziomów menu, by dotrzeć do właściwej informacji. Podobnie serwisy FTP
udostępniają dane, ułoŜone w hierarchicznej strukturze katalogowej. Natomiast
dokumenty serwisu WWW pozwalają bezpośrednio wybrać miejsce, do którego
chcielibyśmy się przenieść.
interakcyjność – nie sprowadza się do nieustannego wybierania rozmaitych opcji z menu.
Wiele wyrafinowanych dokumentów hipertekstowych pozwala wprowadzać tekst,
wypełniać formularze, wybierać róŜne opcje, uruchamiać programy, odtwarzać dźwięki,
a nawet malować obrazki. Jest to duŜy krok naprzód w stosunku do tradycyjnych form
pracy w Internecie: znajdź-to-przegraj-to-przeczytaj-to.
www jest narzędziem bardzo uniwersalnym – połączenie hipertekstowe nie jest
ograniczone tylko do tekstu. Słowa kluczowe i frazy kluczowe w dokumentach
hipertekstowych mogą prowadzić do sesji telnetu, do sesji FTP, do gopherowych menu,
do poszukiwań w bazie Archie, do poszukiwań przy pomocy narzędzi Veronica, do grup
dyskusyjnych Usenet, telekonferencji.
Wzrost zainteresowania Internetem spowodował w roku 1996 197-procentowy wzrost
ruchu na serwerach gopherowych oraz 110-procentowy wzrost ruchu w sieci NSF-net. Są to
stosunkowo duŜe liczby, lecz prawdziwą sensacją jest to, Ŝe: w 1993 roku, ruch w WWW
zanotował wzrost o 443,931 procent! Główną przyczyną tego zjawiska jest wykorzystywane
środowisko graficzne w serwisie WWW oraz przejrzystość i intuicyjność w pracy
z Pajęczyną.
-9-
ZNACZNIKI
Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia
HTML. Wynika stąd, Ŝe dokument taki moŜna utworzyć za pomocą najprostszego edytora
tekstów, ręcznie dodając znaczniki.
Rysunek 2 - Kod źródłowy strony głównej WWW WSH
Metoda taka, choć skuteczna, byłaby jednak zbyt uciąŜliwa. Dlatego na rynku
pojawiło się juŜ wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie
dokumentu, wspomagając wprowadzanie poleceń. Są to zazwyczaj programy klasy
shareware, aczkolwiek znajdziemy teŜ sporo programów komercyjnych i całkowicie
bezpłatnych (freeware). Do takich programów moŜemy zaliczyć FrontPage Express, HotDog,
czy teŜ polskie edytory HTML – Tiger, Pajączek. BliŜej o programach ułatwiających pracę
z HTML napisane jest w rozdziale 12.
TEORIA Co to jest znacznik ?
Polecenie (znacznik) HTML jest specjalnym ciągiem znaków objętych nawiasami
ostrymi np. <H1>. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł,
moglibyśmy objąć go poleceniem:
<H1>treść tytułu</H1>
- 10 -
Wielkość liter jest obojętna – znaczniki wpisane małymi np. <h1> i wielkimi literami
np. <H1> są interpretowane w ten sam sposób.
Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika
otwierającego <H1> i zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang.
slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się
teŜ polecenia składające się ze znacznika otwierającego. Niektórych poleceń moŜna uŜywać
w obu postaciach, choć coraz powszechniejsze uŜywanie stylów wymusza ostatnio bardziej
rygorystyczne stosowanie znaczników zamykających (np. akapit).
Znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane,
tzn. pozwalają „w locie” formatować tekst.
Znacznik otwierający
objęty tekst
znacznik zamykający
<H1>Witaj na mojej stronie WWW</H1>
nawiasy trójkątne
ukośnik (ang. slash)
Rysunek 3 – Składnia znacznika HTML
Niektóre znaczniki posiadają dodatkowe atrybuty, które dokładniej określają Ŝądaną
funkcję. Atrybuty wpisywane są pomiędzy słowo kluczowe a kończący znak większości.
Często wpisuje się kilka atrybutów, pisząc je jeden po drugim oddzielając spacją.
Spacja
atrybut
<TABLE BORDER=0>
znacznik
Rysunek 4 – Atrybuty znaczników
PRZYKŁAD
Otwórz dowolny edytor tekstu (najlepiej najprostszy, nie musi być to wcale Word) np.
Notatnik, bądź WordPad (Start->Programy->Akcesoria->Notatnik), a następnie przepisz
poniŜszy kod:
<H1>Moja pierwsza strona WWW</H1>
Następnie zapisz na dysku ten kawałek kodu pod nazwą index.html (Plik->Zapisz
jako), po czym uruchom przeglądarkę WWW, np. Internet Explorer’a, bądź Netscape
Navigator’a. Gdy przeglądarka zostanie uruchomiona naleŜy następnie otworzyć plik
z napisanym kodem HTML – w tym celu naleŜy nacisnąć klawisze CTRL+O (ewentualnie
Plik->Otwórz), a następnie trzeba podać ścieŜkę dostępu do zapisanego przez nas pliku
index.html.
- 11 -
WAśNE !
PowyŜsze działania tzn. edycja pliku, następnie zapisanie pliku, po czym jego
otworzenie w przeglądarce WWW będzie czynnością kaŜdorazowo powtarzaną w kolejnych
ćwiczeniach.
Strona główna (pierwsza) serwisu WWW musi mieć nazwę index.html, gdyŜ tak
nazwane strony WWW są zawsze jako pierwsze wczytywane w systemach UNIX.
UWAGA ! W systemie Unix – rozróŜniane są DUśE i małe litery. Tak więc INDEX.HTML
to inny plik niŜ index.html.
UWAGA ! W systemie Unix nie uŜywamy polskich znaków (np. przy zapisie dokumentów
WWW).
- 12 -
STRUKTURA HTML’A
W HTML’u zdefiniowane są trzy znaczniki, które opisują ogólną strukturę strony oraz
dostarczają prawidłowych informacji nagłówkowych. Stanowią one dla przeglądarek coś
w rodzaju identyfikatora strony. Mogą zawierać istotne informacje o stronie, jak na przykład
tytuł, bądź nazwisko autora.
TEORIA Struktura HTML’a
<HTML>
Pierwszym znacznikiem struktury, znajdującym się na kaŜdej stronie jest <HTML>.
Mówi on o tym, Ŝe zawartość odczytywanego właśnie pliku to kod, napisany w HTML’u.
Cała zawartość pliku, czyli treść i znaczniki powinny znajdować się pomiędzy początkowym
i końcowym znacznikiem </HTML>, tak jak poniŜej:
<HTML>
... moja strona ...
</HTML>
<HEAD>
Para znaczników <HEAD>...</HEAD> wyznacza nagłówek strony. W obrębie
nagłówka znajduje się tylko kilka innych znaczników (najczęściej tytuł strony, strona
kodowa, autor strony). W Ŝadnym wypadku nie wolno umieszczać w tym miejscu treści
strony. Oto typowy przykład poprawnego uŜycia znacznika <HEAD>:
<HTML>
<HEAD>
Informacje o dokumencie, łącznie z tytułem
</HEAD>
...
</HTML>
<BODY>
Pozostała część strony, czyli tekst, połączenia, grafika itp. znajduje się pomiędzy
początkowym i końcowym znacznikiem <BODY>. Cały kod, łącznie ze znacznikami
<HTML> i <HEAD> przedstawia się następująco:
<HTML>
<HEAD>
Informacje o dokumencie, łącznie z tytułem
</HEAD>
<BODY>
Treść dokumentu – tekst i grafika
</BODY>
</HTML>
W powyŜszym przykładzie widać, Ŝe znaczniki HTML są zagnieŜdŜone. Obydwa
znaczniki <BODY> i </BODY> znajdują się pomiędzy początkowym i końcowym
znacznikiem <HTML>, podobnie sprawa ma się w przypadku znaczników <HEAD>.
- 13 -
TEORIA Więcej danych o <HEAD>
Definiując <HEAD> moŜna dodać kilka dalszych parametrów, które uzupełniają
informacje o stronie.
<TITLE></TITLE>
NajwaŜniejszym elementem strony jest tytuł strony, który ukazuje się w pasku tytułu
przeglądarki.
Np.: <TITLE>Strona główna mojego serwisu WWW</TITLE>
<META>
Jest to opcjonalne polecenie, które bardziej szczegółowo informuje o zawartości
dokumentu. Są to informacje potrzebne np. do celów katalogowych czy indeksowych,
wykorzystywanych przez odpowiednie programy. Zawiera ono trzy atrybuty: HTTP-EQUIV,
NAME i CONTENT w kombinacji pierwszy z trzecim, lub drugi z trzecim.
<META HTTP-EQUIV=”Refresh” CONTENT=”x”>
Polecenie to spowoduje regularne odświeŜanie strony co x sekund. MoŜe to mieć
praktyczne zastosowanie w wypadku, gdy strona zawiera bardzo często aktualizowane
informacje (wiele razy dziennie). Gdy uŜytkownik korzysta ze strony przez dłuŜszy czas,
strona będzie się sama aktualizowała.
<META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=iso-8859-2”>
Polecenie to jest deklaracją strony kodowej dokumentu. Inna wersja to
charset-windows-1250. Zaleca się uŜywanie tego polecenia przy tworzeniu stron WWW.
TEORIA Więcej danych o <BODY>
Definiując <BODY> moŜemy dodatkowo wstawić kilka parametrów, które
zadecydują o graficznej postaci strony.
<BODY BACKGROUND=”nazwa pliku graficznego”>
Parametr BACKGROUND=”nazwa pliku graficznego” pozwala wybrać obrazek,
który pokaŜe się w przeglądarce w tle dokumentu. Obrazek jest powielany na szerokość
i długość strony, co pozwala stosować niewielkie rozmiarami „tapety”, wypełniające cały
dokument.
<BODY BGCOLOR=”kolor”>
Parametr BGCOLOR=”kolor” pozwala wybrać kolor tła dokumentu w przeglądarce.
Najnowsze przeglądarki akceptują imienne nazwy barw (np. white, blue), natomiast
najbardziej uniwersalną metodą wyboru koloru jest stosowanie wartości szestnastkowych (np.
#FFFFFF dla koloru białego).
Wybrane kolory podstawowe: silver, gray, maroon, green, navy, purple, olive, teal,
white, black, red, lime, blue, magenta, yellow, cyan, aqua, fuchsia.
- 14 -
<BODY TEXT=”kolor”>
Parametr TEXT=”kolor” pozwala określić kolor tekstu w dokumencie. Wybierając go,
naleŜy mieć takŜe na uwadze kolor tła.
PRZYKŁAD
Przepisz poniŜsze ćwiczenie, a następnie zobacz wynik w przeglądarce.
<HTML>
<HEAD>
<TITLE>Moja strona domowa</TITLE>
</HEAD>
<BODY BGCOLOR=”yellow” TEXT=”blue”>
<H1> Witaj na mojej stronie domowej !</H1>
Strona ciagle się rozwija !
</BODY>
</HTML>
1. Zmień składową atrybutu BGCOLOR – wykorzystując inne składowe koloru.
Analogicznie zmień składowe TEXT.
2. Dodaj w znaczniku <BODY> atrybut BACKGROUND – jako plik graficzny wpisz
dowolny obrazek z katalogu /Windows np.
<BODY BGCOLOR=”yellow” TEXT=”blue” BACKGOUND=”las.bmp”>
- 15 -
ATRYBUTY CZCIONKI
WyróŜniamy atrybuty fizyczne i logiczne czcionki. Atrybut fizyczny – jest to wygląd
czcionki, który wiąŜe się z jej fizycznymi cechami na ekranie (np. pogrubienie). Zaś
atrybutem fizycznym jest natomiast wygląd, który wiąŜe się z jej szczegółowym
zastosowaniem (np. adres).
TEORIA Atrybuty fizyczne
UŜywając danego atrybutu, naleŜy objąć parą znaczników fragment tekstu, np. <B>Tekst
pogrubiony</B>
Czcionka pogrubiona
<B> </B>
Czcionka pochylona
<I> </I>
Czcionka podkreślona
<U> </U>
Czcionka przekreślona
<STRIKE> </STRIKE>
Indeks górny (superskrypt)
<SUP> </SUP>
Indeks dolny (subskrypt)
<SUB> </SUB>
DuŜa czcionka
<BIG> </BIG>
DuŜa czcionka pozwala zwiększyć stopień czcionki o 1 w stosunku do obowiązującej
w danym fragmencie tekstu.
Mała czcionka
<SMALL> </SMALL>
Mała czcionka pozwala zmniejszyć stopień czcionki o 1 w stosunku do obowiązującej
w danym fragmencie tekstu.
- 16 -
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=”white” TEXT=”blue”>
<H1> Atrybuty fizyczne czcionki</H1>
<B>Czcionka pogrubiona</B>
<BR>
<I>Czcionka pochylona</I>
<BR>
<U>Czcionka podkreślona</U>
<BR>
<STRIKE>Czcionka przekreslona</STRIKE>
<BR>
Czcionka z <SUB>dolnym indeksem</SUB>
<BR>
Czcionka z <SUP>gornym indeksem</SUP>
<BR>
<BIG>Czcionka duza</BIG>
<BR>
<SMALL>Czcionka mala</SMALL>
</BODY>
</HTML>
TEORIA Atrybuty logiczne
Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działań jest
analogiczny, jak w przypadku znaczników fizycznych.
Cytat
<CITE> </CITE>
Czcionka mocno wyróŜniona
<STRONG> </STRONG>
Czcionka wyróŜniona (emfaza)
<EM> </EM>
Kod (tekst programu)
<CODE> </CODE>
Czcionka wprowadzana z klawiatury
<KBD> </KBD>
- 17 -
Przykład
<SAMP> </SAMP>
Zmienna (słowo kluczowa języka)
<VAR> </VAR>
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1> Atrybuty logiczne czcionki</H1>
<CITE>Cytat</CITE>
<BR>
<STRONG>Czcionka mocno wyrozniona</STRONG>
<BR>
<EM>Czcionka wyrozniona (emfaza)</EM>
<BR>
<CODE>Kod (tekst programu)</CODE>
<BR>
<KBD>Czcionka wprowadzana z klawiatury</KBD>
<BR>
<SAMP>Przykład</SAMP>
<BR>
<VAR>Zmienna (slowo kluczowe jezyka)</VAR>
</BODY>
</HTML>
TEORIA Kolor czcionki
Czcionce moŜna nadać dowolny kolor, obejmując ją znacznikami koloru. Składnia
polecenia nadającego kolor jest następująca:
<FONT COLOR=”nazwa koloru”> </FONT>
Wybrane kolory podstawowe: silver, gray, maroon, green, navy, purple, olive, teal,
white, black, red, lime, blue, magenta, yellow, cyan, aqua, fuchsia.
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1> Kolor czcionki</H1>
<FONT COLOR=”RED”>Ta czcionka jest czerwona</FONT>
- 18 -
<BR>
<FONT COLOR=”GREEN”>A ta czcionka jest zielona</FONT>
</BODY>
</HTML>
TEORIA Wielkość czcionki
Domyślna wielkość czcionki wynosi 3 (nie mylić ze stopniem pisma), zaś pozostałe
wartości są zawarte w przedziale od 1 do 7. Składnia polecenia jest następująca:
<FONT SIZE=”+x”> </FONT> lub <FONT SIZE=”-x”> </FONT>
gdzie x=1,..., 6
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1> Kolor czcionki oraz wielkosc</H1>
<BR>
<FONT COLOR=”RED” SIZE=”+3”>Ta czcionka jest czerwona i na dodatek wieksza o 3</FONT>
</BODY>
</HTML>
TEORIA Zmiana kroju czcionki
Istnieje moŜliwość zmiany kroju czcionki (z domyślnej TIMES NEW ROMAN) na
inną np. ARIAL. Składnia polecenia jest następująca:
<FONT FACE=”nazwa kroju”> </FONT>
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1> Kolor czcionki i jej kroj</H1>
<BR>
<FONT COLOR=”RED” FACE=”arial”>Ta czcionka jest czerwona i jej kroj nazywa się ARIAL</FONT>
</BODY>
</HTML>
- 19 -
ORGANIZACJA TEKSTU
Organizacja tekstu to nic innego jak formatowanie tekstu – tytuł, akapit, bloki
cytowane itp. Wszystko to – co pozwoli utrzymać „przejrzystość” strony WWW.
TEORIA Tytuły
Istnieje 6 stopni tytułów – od 1-go stopnia (największy) do 6-go, najmniejszego.
Składnia polecenia jest następująca:
<H1> </H1>
Np. tytuł 2 stopnia ma postać: <H2> </H2>
Tytuły moŜna takŜe wyśrodkować:
<H1 ALIGN=CENTER> </H1>
lub przesunąć do prawego, bądź lewego marginesu:
<H1 ALIGN=RIGHT> </H1>
<H1 ALIGN=LEFT> </H1>
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=”white” TEXT=”black”>
<H1>Tytul pierwszego stopnia</H1>
<H2>Tytul drugiego stopnia</H2>
<H3 ALIGN=CENTER>Tytul trzeciego stopnia – wysrodkowany</H3>
<H4 ALIGN=RIGHT>Tytul czwartego stopnia – wyrownany do prawej</H4>
</BODY>
</HTML>
TEORIA Znacznik akapitu
<P> </P>
Akapit moŜna wyrównać do lewego marginesu (domyślne ustawienie),
<P ALIGN=LEFT> </P>
lub do prawego
<P ALIGN=RIGHT> </P>
bądź wyśrodkować
- 20 -
<P ALIGN=CENTER> </P>
TEORIA Znacznik końca wiersza
<BR>
Znacznik ten nie kończy akapitu, jedynie przełamuje wiersz. Tym samym odstęp między
dwoma wierszami oddzielonymi poleceniem <BR> jest mniejszy niŜ odstęp między
akapitami.
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1>Akapity i lamanie wierszy</H1>
<P>To jest akapit</P>
<P ALIGN=CENTER>Ten zas akapit jest wysrodkowany</P>
Teraz gdy napisze ten tekst i wstawie znacznik br,
<BR>
ponizszy tekst znajdzie się w nowym wierszu....
</BODY>
</HTML>
TEORIA Pozioma linia
<HR>
Linia moŜe być pozbawiona cieniowania (nie będzie „trójwymiarowa”):
<HR NOSHADE>
Linii moŜemy nadać dowolną grubość:
<HR SIZE=”5”>
Linia moŜe mieć określoną długość w pikselach:
<HR WIDTH=”300”>
lub w procencie szerokości strony:
<HR WIDTH=”50%”>
PRZYKŁAD
- 21 -
<HTML>
<HEAD>
</HEAD>
<H1>Linie</H1>
Linia
<HR>
To jest linia bez cienia
<HR NOSHADE>
Ta linia jest grubosci 5
<HR SIZE=”5”>
Ta zas ma 300 pikseli dlugosci
<HR WIDTH=”300”>
A ta linia ma 50% szerokosci strony
<HR WIDTH=”50%”>
</BODY>
</HTML>
TEORIA Bloki
Blok preformatowany – zawierający pierwotne elementy formatowania, np. tabulatory,
jest wyświetlany czcionką o stałej szerokości znaku. Pozwala on wprowadzać dodatkowe
spacje, uwzględnia takŜe punkty tabulacji i znaki końca linii i akapitu.
<PRE> </PRE>
Blok cytowany – moŜna go uŜywać np. przy powoływaniu się na jakieś źródło albo dla
uzyskania wcięcia. Cytat jest wyświetlany z uwzględnieniem tabulacji.
<BLOCKQUOTE> </BLOCKQUOTE>
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1>Bloki</H1>
<H3>Blok preformatowany</H3>
<PRE>
To jest przykład bloku preformatowanego.
Cena
ilosc
razem
12 zl
2
24 zl
1,50 zl
3
4,5 zl
10 zl
22
220 zl
</PRE>
A to jest przykład bloku cytowanego
<BLOCKQUOTE>
Język HTML jest zbiorem specjalnych znaczników (ang. tag), którymi są opatrywane poszczególne części
dokumentu, a takŜe reguł ich stosowania. Znaczniki są z kolei interpretowane przez przeglądarkę WWW.
- 22 -
</BLOCKQUOTE>
</BODY>
</HTML>
TEORIA Adres
<ADDRESS> </ADDRESS>
Polecenie jest interpretowane jako kursywa i jest często stosowane w odniesieniu do bloku
tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej.
TEORIA Środkowanie elementu
<CENTER> </CENTER>
Polecenie słuŜy do środkowania na stronie wskazanego elementu, np. tekstu lub obrazka.
TEORIA Animacja tekstu
<MARQUEE>Tekst animacji</MARQUEE>
Efektownym elementem graficznym (akceptowanym jedynie przez Internet Explorer) jest
MARQUEE – „pływający” w poprzek ekranu napis. Animacji moŜna przypisać wiele
parametrów, które urozmaicają ruch napisu.
Tekst moŜe się poruszać na trzy sposoby:
BEHAVIOR=SCROLL – powoduje, Ŝe tekst porusza się od jednego brzegu strony
w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu;
BEHAVIOR=SLIDE – powoduje, Ŝe tekst wyrusza od pierwszego brzegu, dociera do
drugiego i zatrzymuje się;
BEHAVIOR=ALTERNATE – powoduje, Ŝe tekst wyrusza od pierwszego brzegu, dociera do
drugiego i „odbija się”, powracając w kierunku pierwszego.
Parametrem BGCOLOR=”kolor” moŜna określić kolor tła obszaru po którym porusza się
tekst. Początkowy kierunek ruchu drogi jest określany za pomocą parametru
DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo.
Parametr LOOP=x pozwala określić ruch tekstu x razy.
MoŜemy takŜe zmieniać fizyczną wielkość i kolor czcionki <FONT COLOR=”kolor”
SIZE=”x”> </FONT>
PRZYKŁAD
<HTML>
<HEAD>
- 23 -
</HEAD>
<H1>Adresy, srodkowanie elementow, animacje tekstu</H1>
<ADDRESS>
Zenon Komputerowski<BR>
ul. Pecetowa 13<BR>
25-705 Komputerland<BR>
</ADDRESS>
<CENTER>
Ten tekst jest wysrodkowany
</CENTER>
<BR>
<MARQUEE BGCOLOR=”YELLOW”>A TO JEST ANIMACJA TEKSTU
</MARQUEE>
<BR><BR>
<MARQUEE BEHAVIOR=ALTERNATE BGCOLOR=”RED”><FONT COLOR=”WHITE”>Ta animacja
porusza się inaczej...
</MARQUEE>
</BODY>
</HTML>
- 24 -
NUMEROWANIE
Język HTML posiada wygodne narzędzia pozwalające na tworzenie numerowania
(wypunktowania). W HTML wyróŜniamy wykazy nienumerowane, numerowane oraz listę
definicyjną.
TEORIA Lista nienumerowana
<UL> </UL>
Polecenie to słuŜy do sporządzania listy nienumerowanej. Składnia polecenia wygląda
następująco:
<UL>
<LI> Pierwszy punkt
<LI> Drugi punkt
<LI> Trzeci punkt
</UL>
W tym numerowaniu domyślnie pojawiają się kropki jako kolejne punkty wykazu. Aby
zdefiniować inny graficzny symbol oznaczający punkt – naleŜy zmienić jego typ. SłuŜy do
tego argument:
<UL TYPE=disc> - wyświetla punkt,
<UL TYPE=circle> - wyświetla koło,
<UL TYPE=square> - wyświetla kwadrat.
Istnieje moŜliwość zagnieŜdŜania kilku poziomów listy nienumerowanej. KaŜdy, kolejny
niŜszy poziom numerowania, powinien zawierać własną definicję wykazu i powinien kończyć
się jego zamknięciem.
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1>Numerowanie – lista nienumerowana</H1>
<UL TYPE=square>
<LI> Pierwszy punkt
<LI> Drugi punkt
<UL TYPE=circle>
<LI> Pierwszy punkt – drugiego poziomu listy
<LI> Drugi punkt – drugiego poziomu listy
</UL>
</UL>
</BODY>
</HTML>
- 25 -
TEORIA Lista numerowana
<OL> </OL>
Polecenie to słuŜy do sporządzania listy numerowanej. Składnia polecenia wygląda
następująco:
<OL>
<LI> Pierwszy punkt
<LI> Drugi punkt
<LI> Trzeci punkt
</OL>
Parametr START=x pozwala rozpocząć numerowanie listy od x:
<OL START=x>
Parametr TYPE=n pozwala określić typ numerowania listy:
<OL TYPE=A> - numerowanie według wielkich liter,
<OL TYPE=a> - numerowanie według małych liter,
<OL TYPE=I> - numerowanie według wielkich liczebników rzymskich,
<OL TYPE=i> - numerowanie według małych liczebników rzymskich,
<OL TYPE=1> - numerowanie według liczebników arabskich.
Istnieje moŜliwość zagnieŜdŜania kilku poziomów listy nienumerowanej. KaŜdy, kolejny
niŜszy poziom numerowania, powinien zawierać własną definicję wykazu i powinien kończyć
się jego zamknięciem.
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1>Numerowanie – lista numerowana</H1>
<OL TYPE=1square>
<LI> Pierwszy punkt
<LI> Drugi punkt
<UL TYPE=I>
<LI> Pierwszy punkt – drugiego poziomu listy
<LI> Drugi punkt – drugiego poziomu listy
</OL>
</OL>
</BODY>
</HTML>
- 26 -
TEORIA Lista definicyjna
<DL> </DL>
Polecenie to słuŜy do sporządzania listy definicyjnej. Składnia polecenia wygląda
następująco:
<DL> Początek listy definicyjnej
<DT> Pierwszy termin
<DD> Wyjaśnienie pierwszego terminu
<DT> Drugi termin
<DD> Wyjaśnienie drugiego terminu
</DL>
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1>Numerowanie – lista definicyjna</H1>
<DL> Początek listy definicyjnej
<DT> Pierwszy termin
<DD> Wyjaśnienie pierwszego terminu
<DT> Drugi termin
<DD> Wyjaśnienie drugiego terminu
</DL>
</BODY>
</HTML>
- 27 -
GRAFIKA NA STRONIE WWW
Największą atrakcją sieci WWW są kolorowe grafiki, ilustracje, animacje. Język
HTML oddaje uŜytkownikom kilka ciekawych moŜliwości wstawiania i skalowania grafiki,
„oblewania” obrazka tekstem, uŜywania grafiki jako tła (ćwiczenie – rozdział 3).
TEORIA Wstawianie grafiki do dokumentu
Składnia wyraŜenia ma postać:
<IMG SRC=”plik graficzny”>
Pliki graficzne muszą być zapisane w odpowiednim formacie – takim, który akceptują
przeglądarki stron WWW. Do takich standardów graficznych zaliczamy GIF i JPG.
Stosowane są one głównie ze względu na znaczną kompresję i niewielkie rozmiary plików.
NaleŜy pamiętać – Ŝe im mniejszy (w KB) plik graficzny – tym szybciej się wczyta strona
WWW – i tym więcej uŜytkowników ją zechce obejrzeć.
Dodatkowe parametry:
Opis obrazka:
<IMG SRC=”plik graficzny” ALT=”To moja grafika”>
Zmiana wielkości grafiki:
<IMG SRC=”plik graficzny” WIDTH=x HEIGHT=y>
gdzie: x i y to odpowiednio szerokość i wysokość obrazka,
Ramka wokół grafiki:
<IMG SRC=”plik graficzny” BORDER=x>
gdzie x to szerokość ramki oblewającej grafikę w pikselach,
Ustalenie odległości grafiki od oblewającego go tekstu:
<IMG SRC=”plik graficzny” VSPACE=x HSPACE=y>
gdzie x i y to odpowiednio odległość w pionie i poziomie tekstu w stosunku do grafiki
Otaczanie grafiki tekstem:
<IMG SRC=”plik graficzny” ALING=x>
gdzie x moŜe przyjąć jeden z parametrów:
LEFT, RIGHT, TOP, BOTTOM, MIDDLE.
- 28 -
PRZYKŁAD
UWAGA ! Prezentowana w tym przykładzie grafika ma rozszerzenie BMP – plik las.bmp
znajduje się katalogu /windows).
<HTML>
<HEAD>
</HEAD>
<H1>Grafika na stronie WWW</H1>
<IMG SRC=”las.bmp” ALT=”Jak ci się podoba moja grafika ?”>
<BR>
Zmiana wielkosci grafiki:
<IMG SRC=”las.bmp” WIDTH=300 HEIGHT=100>
<BR>
Ustalenie odleglosci grafiki od tekstu... na 50 pikseli...
<IMG SRC=”las.bmp” HSPACE=50>
<BR>
A teraz przykład na otaczanie grafiki tekstem:
<BR>
<IMG SRC=”las.bmp” WIDTH=50 HEIGHT=50ALIGN=left>Tekst otaczany, tekst otaczany
<BR><BR>
<IMG SRC=”las.bmp” WIDTH=50 HEIGHT=50 ALIGN=right>Tekst otaczany, tekst otaczany
<BR><BR>
<IMG SRC=”las.bmp” WIDTH=50 HEIGHT=50 ALIGN=top>Tekst otaczany, tekst otaczany
<BR><BR>
<IMG SRC=”las.bmp” WIDTH=50 HEIGHT=50 ALIGN=bottom>Tekst otaczany, tekst otaczany
<BR><BR>
<IMG SRC=”las.bmp” WIDTH=50 HEIGHT=50 ALIGN=middle>Tekst otaczany, tekst otaczany
</BODY>
</HTML>
- 29 -
ODSYŁACZE (LINKI) NA STRONACH WWW
Szczególna cechą WWW są odsyłacze (ang. links), które umoŜliwiają przechodzenie
ze strony na stronę. Odsyłacze są najbardziej charakterystycznym elementem dokumentów
w sieci WWW. Bez linków nie byłoby powiązania między dokumentami na tym samym
serwerze, w tym samym mieście, kraju czy teŜ kontynencie. Odsyłacz jest niczym innym, jak
wskazaniem (odesłaniem do) jakiegoś innego miejsca. Kliknięcie na takim wskazaniu
przenosi uŜytkownika do docelowego miejsca, przy czym to moŜe być miejsce na tej samej
stronie, inna strona w ramach tego samego, złoŜonego dokumentu, bądź strona na drugim
końcu świata. Nieco szerzej o odsyłaczach jest napisane w rozdziale 1, poniŜej zaś
przedstawiony jest rysunek obrazujący ideę odsyłaczy (po kliknięciu w dokumencie WSH
STRONA GŁÓWNA na odsyłaczu graficznym „informacje ogólne” ukazał się ów dokument,
później wybrano link tekstowy „baza lokalowa”, aby na koniec uŜyć odnośnik do wysłania
poczty e-mail:
Rysunek 5 – Idea odsyłaczy na stronach WWW
- 30 -
TEORIA Tworzenie odsyłaczy
Składnia wyraŜenia ma postać:
<A HREF=”adres.html”>Tekst, na którym naleŜy kliknąć </A>
gdzie adres.html jest adresem URL docelowej strony WWW.
Gdy utworzymy odsyłacz, ciąg znaków tekst, na którym naleŜy kliknąć będzie zaznaczony
innym kolorem i podkreślony (kolor moŜna zmienić, zaś podkreślenia pozbyć się).
Dodatkowe parametry:
Odsyłacz do innej strony HTML w tym samym katalogu:
<A HREF=”nazwa strony.html”>O Autorze</A>
Odsyłacz do innej strony w katalogu podrzędnym:
<A HREF=”katalog podrzędny/nazwa strony.html”>Moje grafiki</A>
Odsyłacz do pliku tekstowego TXT:
<A HREF=”plik teksotwy.txt”>Plik tekstowy TXT</A>
analogicznie tworzymy linki do plików typu WAV, GIF, JPG,
Odsyłacze do poczty elektronicznej:
<A HREF=”mailto:imie_nazwisko@adres”>Tutaj kliknij</A>
Odsyłacz do innych usług, np.: FTP
<A HREF=”ftp://ftp.adres”>Jakiś tekst</A>
analogicznie tworzymy odnośniki do:
- Pliku na dysku lokalnym: <A HREF=”file://ścieŜka/plik”>Jakiś tekst</A>
- Telnetu: <A HREF=”telnet://...”>Jakiś tekst</A>
- Grup dyskusyjnych: <A HREF=”news://...”>Jakiś tekst</A>
Odsyłacze mogą posiadać takŜe etykietę. Jest to nic innego jak „elektroniczna
zakładka” (podobna do zakładek w ksiąŜce), która zaznacza jakieś miejsce w tekście. Gdy
etykieta zostanie stworzona, będzie moŜna się odwoływać się nie tylko do zawierającej ją
stronie ale takŜe do konkretnego miejsca na stronie. Konstrukcja etykiety jest następująca:
<A NAME=”nazwa etykiety”>Tekst</A>
JeŜeli tworzymy odsyłacz do etykiety na innej stronie – piszemy:
<A HREF=”strona.html#etykieta”>Tekst</A>
- 31 -
JeŜeli zaś odwołujemy się do etykiety na tej samej stronie – piszemy:
<A HREF=”#etykieta”>Tekst</A>
PRZYKŁAD
UWAGA ! Musisz w tym samym katalogu stworzyć dowolnym edytorem plik dane.txt
(o dowolnej zawartości).
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H1>Odsylacze</H1>
<A NAME="poczatek">Odsylaczem</A> moze byc na przyklad ten
<A HREF="2strona.html">tekst.</A> jest on wyszczegolniony
poprzez - inny kolor jak i podkreslenie.
<BR>
Oczywiscie odsylacz tez moze byc do np. jakigos pliku txt.
po kliknieciu w ten <A HREF="dane.txt">tekst</A> znajdziemy
sie na innej, uprzednio przygotowanej stronie o nazwie dane.txt.
<BR>
Odsylacz tez moze byc do pliku graficznego np.
<A HREF="las.bmp">tego.</A>
<BR>
Co wiecej odsylaczem moze byc plik graficzny - po kliknieciu
w nasz znajomy plik las.bmp
<BR><BR>
<A HREF="plik.txt"><IMG SRC="las.bmp"></A>
ukaze sie naszym oczom plik dane.txt.
<BR><BR>
Czesto chcemy zrobic odnosnik np. do poczty elektronicznej.
<BR><BR>
Mozna to zdefiniowac w nastepujacy sposob:
<BR><BR>
<ADDRESS>
Wyzsza Szkola Handlowa<BR>
ul. Peryferyjna 15B<BR>
25-562 Kielce<BR>
e-mail: <A HREF=mailto:[email protected]">[email protected]</A>
<BR>
</ADDRESS>
<HR>
Wtedy po kliknieciu w adres e-mail, uruchomi sie automatycznie klient
pocztowy.
<BR>
Analogicznie tworzymi linki do innych uslug (ftp, news, telnet).
<BR><BR>
A teraz wykorzystamy etykiete strony - by znalezc sie na jej poczatku:
<BR>
Kliknij <A HREF="#poczatek">tutaj</A> by znalezc sie na poczatku strony!
</BODY>
</HTML>
- 32 -
Plik zawierający powyŜszy kod HTML’a nazwij index.html, po czym stwórz drugą stronę
WWW o nazwie 2strona.html – wpisz do niej poniŜszy kod:
<HTML>
<HEAD>
</HEAD>
<H1>Odsylacze 2 strona</H1>
Kliknij <A HREf="index.html">tutaj</A> by wrocic na poprzednia strone!
</BODY>
</HTML>
Uruchom przeglądarkę WWW i odczytaj stronę index.html. Wypróbuj wszystkie odsyłacze.
- 33 -
TABELE
Tabele na stronach WWW słuŜą głównie do przedstawiania złoŜonych informacji –
gdzie uŜytkownik moŜe przeglądać dane w uporządkowanej formie.
TEORIA Tworzenie tabel
Definicja tabeli musi być umieszczona pomiędzy dwoma znacznikami:
<TABLE> </TABLE>
które stanowią jej ograniczniki. W ich ramach są umieszczane definicje wierszy i kolumn,
konkretne dane w komórkach, tytuł tabeli, nagłówki wierszy i kolumn.
Wiersz tabeli:
<TR> </TR>
Komórka w wierszu;
<TD> </TD>
Szerokość komórki
<TD WIDTH=x> </TD>
gdzie x to szerokość komórki w pikselach.
Obramowanie tabeli:
<TABLE BORDER=x> </TABLE>
gdzie x to szerokość obramowania w pikselach.
Kolor obramowania tabeli;
<TABLE BORDER=x BORDERCOLOR=”kolor”> </TABLE>
gdzie kolor to jeden ze zdefiniowanych kolorów (np. red)
Kolor tła tabeli:
<TABLE BGCOLOR=”kolor”> </TABLE>
gdzie kolor to jeden ze zdefiniowanych kolorów (np. red)
Tytuł tabeli:
<CAPTION ALING=x>Tytuł tabeli</CAPTION>
gdzie ALING=top (góra), bądź ALIGN=bottom (dół)
- 34 -
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1>Tabele</H1>
<TABLE BORDER=2 BORDERCOLOR="blue" BGCOLOR=”yellow”>
<CAPTION ALIGN=TOP>Ilosc studentow w latach 1996-1998
</CAPTION>
<TR>
<TD><B>Rok akademicki</B></TD>
<TD><B>Nabor studentow</B></TD>
<TD WIDTH=120><B>Absolwenci</B></TD>
</TR>
<TR>
<TD>1996</TD>
<TD>367 osob</TD>
<TD>101 osob</TD>
</TR>
<TR>
<TD>1997</TD>
<TD>557 osob</TD>
<TD>211 osob</TD>
</TR>
<TR>
<TD>1998</TD>
<TD>757 osob</TD>
<TD>311 osob</TD>
</TR>
</BODY>
</HTML>
Dane w tabeli moŜna wyrównywać. PoniŜej przedstawiono składnię poziomego wyrównania
danych w komórkach:
<TD ALIGN=center> </TD> - wyśrodkowanie danych,
<TD ALIGN=left> </TD> - wyjustowanie do lewej,
<TD ALIGN=right> </TD> - wyjustowanie do prawej.
PoniŜej przedstawiono składnię pionowego wyrównania danych w komórkach:
<TD VALIGN=”top”> </TD> - górny brzeg,
<TD VALIGN=”middle”> </TD> - środek,
<TD VALIGN=”bottom”> </TD> - dolny brzeg.
Tabele moŜemy równieŜ zagnieŜdŜać, jak i wstawiać grafiki w poszczególne komórki tabeli.
ZagnieŜdŜanie tabeli polega na utworzeniu definicji tabeli w ramach definicji
wybranej komórki tabeli nadrzędnej.
- 35 -
PRZYKŁAD
<HTML>
<HEAD>
</HEAD>
<H1>Zagniezdzanie tabeli</H1>
<TABLE BORDER=10>
<TR><TD>1</TD><TD>2</TD><TD>3
<TABLE BORDER=10>
<TR><TD>A</TD><TD>B</TD></TR>
</TABLE>
</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Wstawienie grafiki polega na wpisaniu definicji wyświetlenia pliku graficznego w komórce
tabeli, np.:
<TD><IMG SRC=”nazwa pliku”></TD>
- 36 -
RAMKI
Problem, z jakim często spotyka się twórca stron WWW jest udostępnienie
uŜytkownikowi informacji o zawartości jego serwisu. Ramki mogą stać się kluczem do
takiego zorganizowania wiadomości na stronie WWW, aby były czytelne dla kaŜdego. Ramki
słuŜą do podziału strony np. na dwie części – gdzie w jednej znajduje się spis treści, zaś
w drugiej wyświetla się wywoływany odnośnikiem dokument. Ramki moŜna łatwo
powiększać, za pomocą myszy – przez co uŜytkownik ma wpływ na ilość wyświetlanych
informacji.
TEORIA Struktura strony z ramkami
NajwaŜniejsze jest poprawne zdefiniowanie specjalnej strony, na której podajemy
liczbę, wielkość i pozycję ramek. Pozostałe strony są stronami podrzędnymi. W definicji
strony z ramkami nie uŜywamy znacznika <BODY> </BODY>.
Aby konstrukcja mogła działać konieczne jest podzielenie strony pionowe, lub poziome.
SłuŜy do tego znacznik definiujący ramkę:
<FRAMESET> </FRAMESET>
oraz jego parametr COLS=”x, y”, gdzie liczby x i y słuŜą do określenia wielkości ramek
(moŜemy podać wartości x i y w pikselach bądź w procentach). W tym przypadku stworzymy
ramki pionowe, jeŜeli natomiast chcemy stworzyć ramki poziome, piszemy parametr
ROWS=”x, y”
Zakładamy, iŜ chcemy stworzyć stronę WWW składającą się z dwóch pionowych
ramek (kolumny) o róŜnej wielkości (jedna mniejsza ze spisem treści, druga większa
z wyświetlanymi dokumentami). Znacznik definiujący naszą stronę z ramkami ma postać:
<FRAMESET COLS="12%, 88%">
Aby przypisać ramce dokument musimy podać źródło dokumentu. NaleŜy w tym celu uŜyć
konstrukcji:
<FRAME SRC=”nazwa pliku.html”> - dla pierwszego dokumentu,
<FRAME SRC=”nazwa pliku.html”> - dla drugiego dokumentu.
JeŜeli przywoływany plik nie mieści się w ramce, naleŜy uŜyć parametr, który spowoduje
wyświetlenie ramki z suwakami:
<FRAME SCROLLING=yes>
PoniewaŜ będą stosowane w ramkach odsyłacze, naleŜy nazwać ramki, tak by były one
punktami orientacyjnymi dla linków:
<FRAME NAME=”nazwa ramki”>
- 37 -
Ostatecznie definicja ramki moŜe mieć postać:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="12%, 88%">
<FRAME SCROLLING="yes" NAME="menu" SRC="menu.html">
<FRAME SCROLLING="yes" NAME="home" SRC="start.html">
</FRAMESET>
</HTML>
PRZYKŁAD
Przepisz powyŜsze ćwiczenie, a następnie zobacz wynik w przeglądarce.
UWAGA ! Aby przykład zadziałał – naleŜy stworzyć jeszcze dwa pliki: menu.html
i start.html z działającym kodem HTML (moŜna wykorzystać przykłady z innych
rozdziałów).
Po zdefiniowaniu wszystkich stron, naleŜy uruchomić jako pierwszy plik z powyŜszego
przykładu.
TEORIA Odnośniki w ramkach
Odsyłacze naleŜy tak konstruować, by po kliknięciu w jednej ramce (np. mniejszej)
wynik automatycznie ładował się w innej ramce. W naszym przypadku zdefiniujemy link
w mniejszej ramce – zaś wynik jego załadowania będzie widoczny w większej ramce.
W pliku menu.html (który wyświetla się w mniejszej ramce) dopisujemy linię:
<A HREF=”dane.txt” TARGET=”home”>dane</A>
gdzie dane.txt to plik wykorzystany w poprzednich ćwiczeniach.
Atrybut TARGET=”home” dotyczy docelowego miejsca gdzie ma być załadowana strona
(w tym przypadku ramka została nazwana home).
- 38 -
FORMULARZE
Formularze są jednymi z najbardziej uŜytecznymi funkcjami sieci. UmoŜliwiają one
„webmasterom” zbieranie informacji zwrotnej od czytelników stron WWW, czy teŜ pomagają
wypełniać ankiety, zamawiać towary i usługi.
TEORIA Tworzenie formularzy
Struktura formularza zawiera się w znaczniku:
<FORM> </FORM>
między którym umieszczane są pozostałe elementy.
Ogólne ramy formularza,
<FORM ENCTYPE="text/plain" METHOD="POST" ACTION="mailto:nazwisko@adres">
zawierają się w powyŜszej linii kody HTML. FORM ENCTYPE=”text/plain” oznacza Ŝe
dane wpisane do formularza zostaną wysłane w postaci tekstu, zaś METHOD=”POST”
ACTION=”adres e-mail”> informuję jaką metodą dane zostaną przesłane – w tym przypadku
poprzez e-mail.
Kolejną czynnością jest zdefiniowanie pól do których uŜytkownik będzie mógł wprowadzać
dane.
<INPUT> - polecenie to wraz z dodatkowymi parametrami TYPE, NAME, VALUE
słuŜy do tworzenia pól, w których uŜytkownik strony moŜe wpisać informację lub wybrać
z nich jakąś opcję. Polecenie to ma następującą składnię:
<INPUT TYPE=”typ” NAME=”nazwa” VALUE=”wartość”>
<TYPE> - parametr ten określa rodzaj pola przycisków (np. pole w postaci kwadratu,
przycisku).
<NAME> - jest nazwą pola, które je identyfikuje (np. pytając w formularzu o nazwisko –
pole NAME=”nazwisko”)
<VALUE> - wartość wyświetlana np. na przycisku
TEORIA Definiowanie pól przycisków
TYPE=”checkbox” – wyświetli pole w postaci kwadratu. Kliknięcie na nim powoduje
zaznaczenie pola, a ponowne kliknięcie usuwa zaznaczenie. Jeśli zostanie zdefiniowanych
więcej pól, czytelnik strony będzie mógł zaznaczyć część z nich lub wszystkie, zaleŜnie od
treści, np.:
<INPUT TYPE=”checkbox” NAME=”jezyk” VALUE=”angielski”>angielski
<BR>
- 39 -
<INPUT TYPE=”checkbox” NAME=”jezyk” VALUE=”francuski”>francuski
<BR>
...
NAME jest nazwą pola – w tym przypadku to język.
<TYPE>=”radio” – wyświetli pole w postaci przełącznika (przycisk radiowy). Czytelnik
będzie wybierał jedną z moŜliwych wartości. Kliknięcie na jakiejś wartości powoduje jej
zaznaczenie, ale zarazem usuwa zaznaczenie innej. Ten typ jest stosowany, gdy nie moŜna
podać kilku wartości, gdyŜ jest to nielogiczne. Na ogół trudno być na przykład jednocześnie
kobietą i męŜczyzną:
<INPUT TYPE=”radio” NAME=”plec” VALUE=”kobieta” checked>Kobieta
<BR>
<INPUT TYPE=”radio” NAME=”plec” VALUE=”mezczyzna”>Mezczyzna
<BR>
...
Nazwą pola jest pleć, VALUE przybiera dwie moŜliwe wartości, podanie przy jednej z nich
„checked” – ustawia domyślne zaznaczenie pola.
TYPE=”submit” – parametr słuŜy do wysyłania informacji do autora strony., np.:
<INPUT TYPE=”submit” VALUE=”Wyslij informacje”>
TYPE=”reset” – parametr spowoduje usunięcie wszystkich danych wpisanych do
formularza, np.:
<INPUT TYPE=”reset” VALUE=”Usun informacje”>
<SELECT> - polecenie to słuŜy do tworzenia rozwijanych menu, zawierających kilka
opcji. Czytelnik strony moŜe wybrać jedną lub część z nich. Składnia jest następująca:
<SELECT NAME=nazwa listy”><BR>
<OPTION>pierwsza pozycja<BR>
<OPTION>druga pozycja<BR>
<OPTION>trzecia pozycja<BR>
</SELECT>
np.:
<B>Wybierz komputer</B>
<SELECT NAME=”komputer”>
<OPTION>Amiga
<OPTION>Atari
<OPTION>PC
<OPTION>ZX Spectrum
</SELECT>
Istnieje moŜliwość wybrania kilku pozycji. NaleŜy podać wtedy w definicji:
<SELECT NAME=nazwa listy” MULTIPLE>
- 40 -
np.:
<B>Wybierz komputer</B>
<SELECT NAME=”komputer” MULTIPLE>
<OPTION>Amiga
<OPTION>Atari
<OPTION>PC
<OPTION>ZX Spectrum
</SELECT>
Wybranie kilku pozycji wymaga trzymania naciśniętego klawisza Ctrl.
<TEXTAREA> - jest to polecenie, które pozwala wprowadzić pole będące miejscem na
komentarz czytelnika. Jest to wygodne, gdyŜ nie zawsze autor ankiety jest w stanie
przewidzieć wszystkie moŜliwości. Składnia jest następująca:
<TEXTAREA NAME=”nazwa”> </TEXTAREA>
Polecenie to wprowadza standardowe pole o 40 kolumnach i 4 wierszach, aby miało
inną wielkość naleŜy podać dodatkowe wartości: ROWS=x, COLS=y, np.:
<TEXTAREA NAME=”komentarz” ROWS=10 COLS=50>
</TEXTAREA>
Istnieje teŜ moŜliwość interpretowania zawijania tekstu – polecenie WRAP=off
(domyślne) wyłącza zawijanie. WRAP=psyhical powoduje zawijanie tekstu w okienku
i wysyłanie takŜe tekstu zawiniętego. WRAP=virtual powoduje zawijanie tekstu w okienku,
ale wysyłanie długich linii (akapitów) bez zawijania.
PRZYKŁAD
Przepisz powyŜsze ćwiczenie, a następnie zobacz wynik w przeglądarce.
<HTML>
<HEAD>
</HEAD>
<H1>Formularz</H1>
<FORM ENCTYPE="text/plain" METHOD="POST" ACTION="mailto:[email protected]">
<B>
Podaj swoje imie:
</B>
<INPUT TYPE="text" NAME="imie" SIZE=20><BR><BR>
<B>
Podaj swoje nazwisko:
</B>
<INPUT TYPE="text" NAME="nzawisko" SIZE=50><BR><BR>
<B>
Podaj plec:
</B>
<BR>
<INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked>Kobieta
<BR>
<INPUT TYPE="radio" NAME="plec" VALUE="mezczyzna">Mezczyzna
<BR><BR>
- 41 -
<B>Wybierz swoj ulubiony napoj</B>
<SELECT NAME="napoj">
<OPTION>sok pomaranczowy
<OPTION>herbata
<OPTION>woda zrodlana
<OPTION>pepsi
</SELECT>
<BR><BR>
<B>Wybierz swoja ulubiona potrawe</B>
<SELECT NAME="potrawa" MULTIPLE>
<OPTION>pizza
<OPTION>hot-dog
<OPTION>kebab
<OPTION>hamburger
</SELECT>
<H4>Wpisz swoje uwagi o tym formularzu:</H4>
<TEXTAREA NAME="Uwagi" SIZE="1000" ROWS=5 COLS=80
WRAP=VERTICAL>
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit" VALUE="Wyslij informacje!">
<INPUT TYPE="reset" VALUE="Usun informacje!">
</FORM>
Dziekuje za wypelnienie formularza !
</BODY>
</HTML>
- 42 -
EDYTORY HTML
Dokument HTML moŜna zredagować w najprostszym edytorze tekstów, lecz wymaga
to ręcznego wprowadzania wszystkich kodów – co jest dość uciąŜliwe i na dodatek trzeba
dobrze znać HTML. Na rynku oprogramowania istnieje wiele wyspecjalizowanych
programów mających za zadanie maksymalnie uprościć korzystanie z HTML’a nawet
osobom nie znającym podstaw tego języka.
Edytory HTML moŜna podzielić na trzy klasy:
tekstowe - edytory tekstowe są programami pozwalającymi pracować bezpośrednio
z kodami HTML. Choć działają w środowisku graficznym, wyświetlają jedynie tekst
dokumentu i kody sterujące. Są to w zasadzie jedyne narzędzia, które nadają się obecnie
do zaawansowanej pracy. Za najlepsze edytory, oferujące najwięcej narzędzi, moŜna
uznać programy:
- HotDog 2.x dla Windows 9x/NT,
- WebEdit 2.x dla Windows 9x/NT,
- HomeSite 2.x dla Windows 9x/NT,
- Pajączek 2000 dla Windows 9x/NT.
graficzne – pozwalają one na stworzenie serwisu WWW, przez osoby nie znające języka
HTML. Przykładem jest edytor FrontPage firmy Microsoft, który ma juŜ obecnie spore
moŜliwości, lecz znacznie ustępuje specjalizowanym programom „tekstowym”. NaleŜy
podkreślić, Ŝe edytory pracujące w trybie graficznym, nawet te najlepsze, są generalnie
nieco słabszymi funkcjonalnie narzędziami niŜ wyspecjalizowane edytory o charakterze
tekstowym. Ich wadą jest na ogół brak dostępu do kodów sterujących i w zasadzie
niejednokrotnie naleŜałoby dokonywać dodatkowej edycji wygenerowanego za ich
pomocą dokumentu.
„klockowe” – przykładem jest komercyjny program Home Page Author, wchodzący
w skład pakietu Internet Mania firmy Corel, który pozwala wstawiać do dokumentu bloki
informacji. Ostateczny efekt przedstawiany jest w przeglądarce, uŜytkownik nie ma
natomiast bezpośrednio do czynienia z samym dokumentem HTML, który jest tworzony
automatycznie „w tle”. Jest to całkiem efektywny, łatwy i przyjemny w działaniu
program, aczkolwiek nie nadaje się on do tworzenia bardziej skomplikowanych
dokumentów.
Początkujący twórca stron WWW moŜe równieŜ skorzystać z pomocy edytora tekstu
Word z pakietu Microsoft Office 97. Stworzenie strony sprowadza się do napisania
dowolnego dokumentu, a następnie zapisania go w formacie HTML Document.
RównieŜ pełne wersje przeglądarek WWW (np. Microsoft Internet Explorer 4.x,
Netscape Communicator 4.x) posiadają własne – darmowe edytory HTML – Microsoft
FrontPage Express oraz Netscape Composer.
NaleŜy jednak pamiętać o tym, iŜ nie są to doskonałe narzędzia – często wygląd strony
WWW zrobionej przez prosty edytor graficzny potrafi gorzej wyglądać niŜ ten zrobiony za
pomocą czystego HTML’a. Dlatego warto poznać składnię oraz moŜliwości języka HTML,
które moŜna wykorzystać później przy tworzeniu serwisów WWW.
- 43 -
Ostatnio na polskim rynku pojawiło się wiele publikacji poświęconych językowi
HTML. PoniŜej znajduje się spis ksiąŜek, które ukazały się na naszym rynku w ostatnich
latach. Autor tego skryptu chciałby podziękować Pawłowi Wimmerowi (wyd. LUPUS) za
zgodę i umoŜliwienie wykorzystania kursu języka HTML on-line przy pisaniu tegoŜ skryptu.
1. Castro E. „Po prostu HTML 3.2”, Wydawnictwo HELION, Gliwice 1996
2. Jamsa K., Suleiman L., Weakley S. „Programowanie WWW”, Wydawnictwo
Mikom, Warszawa 1997
3. Lemay L. „HTML 4 – vademecum profesjonalisty”, Wydawnictwo HELION,
Gliwice 1998
4. Macewicz W. „HTML – język opisu dokumentu hipertekstowego”, Wydawnictwo
Mikom, Warszawa 1996
5. McFedries P. „Hipertekst nie tylko dla orłów”, Intersofland, Warszawa 1996
6. Romowicz W. „HTML i Java Script”, Wydawnictwo HELION, Gliwice 1998
7. Spainhour S., Quercia V. „Webmaster – podręcznik administratora”,
Wydawnictwo O’Relly, Warszawa 1997
8. Taylor D. „Tworzenie stron WWW –HTML”, Wydawnictwo Read Me, Gliwice
1995
9. Wimmer P. „HTML – stare i nowe”, Wydawnictwo Lupus, Warszawa 1997
10. www.pckurier.pl/html – internetowy kurs języka HTML P. Wimmera
- 44 -

JPG - iElearning.pl

Transkrypt

Podobne dokumenty

Wprowadzenie do języka html

i-lekcja

Tagi HTML

typografia

TWORZENIE WITRYNY INTERNETOWEJ

Tagi HTML Przykład Rozwiązaniem zadania powinien być program

Stronę WWW tworzymy tak jak zwykły plik tekstowy – po

Konspekt - Budowa i struktura dokumentu HTML

Projekty - Politechnika Wrocławska