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
Wprowadzenie str. 5 Rozdział 1. Idea hipertekstu str. 6 Rozdział 2. Znaczniki str. 9 Rozdział 3. Struktura HTML a str. 12 Rozdział 4. Atrybuty czcionki str. 15 Rozdział 5. Organizacja tekstu str. 19 Rozdział 6. Numerowanie str. 24 Rozdział 7. Grafika na stronie WWW str. 27 Rozdział 8. Odsyłacze (linki) na stronach WWW str. 29 Rozdział 9. Tabele str. 33 Rozdział 10. Ramki str. 36 Rozdział 11. Formularze str. 38 Rozdział 12. Edytory HTML str. 42 Literatura str. 43-5 -
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 - strona tytułowa serwera WWW, http://www.wsh-kielce.edu.pl/~kamera/index.html - dokument na serwerze WWW, ftp://ftp.wsh-kielce.edu.pl - kartoteka główna serwera ftp, news:pl.gazety.donosy - grupa nowości sieciowych. mailto:zbylu@wsh-kielce.edu.pl - 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 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 Pierwszym znacznikiem struktury, znajdującym się na kaŝdej stronie jest. 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, tak jak poniŝej:... moja strona... Para znaczników... 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 : Informacje o dokumencie, łącznie z tytułem... <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 i przedstawia się następująco: Informacje o dokumencie, łącznie z tytułem <BODY> Treść dokumentu tekst i grafika W powyŝszym przykładzie widać, Ŝe znaczniki HTML są zagnieŝdŝone. Obydwa znaczniki <BODY> i znajdują się pomiędzy początkowym i końcowym znacznikiem, podobnie sprawa ma się w przypadku znaczników. - 13 -
TEORIA Więcej danych o Definiując 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. Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= yellow TEXT= blue > <H1> Witaj na mojej stronie domowej!</h1> Strona ciagle się rozwija! 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 -
Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= blue > <H1> Atrybuty fizyczne czcionki</h1> <B>Czcionka pogrubiona</b> <I>Czcionka pochylona</i> <U>Czcionka podkreślona</u> <STRIKE>Czcionka przekreslona</strike> Czcionka z <SUB>dolnym indeksem</sub> Czcionka z <SUP>gornym indeksem</sup> <BIG>Czcionka duza</big> <SMALL>Czcionka mala</small> 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> Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= blue > <H1> Atrybuty logiczne czcionki</h1> <CITE>Cytat</CITE> <STRONG>Czcionka mocno wyrozniona</strong> <EM>Czcionka wyrozniona (emfaza)</em> <CODE>Kod (tekst programu)</code> <KBD>Czcionka wprowadzana z klawiatury</kbd> <SAMP>Przykład</SAMP> <VAR>Zmienna (slowo kluczowe jezyka)</var> 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. Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= blue > <H1> Kolor czcionki</h1> <FONT COLOR= RED >Ta czcionka jest czerwona</font> - 18 -
<FONT COLOR= GREEN >A ta czcionka jest zielona</font> 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 Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= blue > <H1> Kolor czcionki oraz wielkosc</h1> <FONT COLOR= RED >Ta czcionka jest czerwona</font> <FONT COLOR= RED SIZE= +3 >Ta czcionka jest czerwona i na dodatek wieksza o 3</FONT> 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> Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= blue > <H1> Kolor czcionki i jej kroj</h1> <FONT COLOR= RED >Ta czcionka jest czerwona</font> <FONT COLOR= RED FACE= arial >Ta czcionka jest czerwona i jej kroj nazywa się ARIAL</FONT> - 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> Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <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> 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 Znacznik ten nie kończy akapitu, jedynie przełamuje wiersz. Tym samym odstęp między dwoma wierszami oddzielonymi poleceniem jest mniejszy niŝ odstęp między akapitami. Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= black > <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, ponizszy tekst znajdzie się w nowym wierszu... 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% > - 21 -
Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= black > <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% > 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> Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= black > <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> 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> Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. - 23 -
<BODY BGCOLOR= white TEXT= black > <H1>Adresy, srodkowanie elementow, animacje tekstu</h1> <ADDRESS> Zenon Komputerowski ul. Pecetowa 13 25-705 Komputerland </ADDRESS> <CENTER> Ten tekst jest wysrodkowany </CENTER> <MARQUEE BGCOLOR= YELLOW >A TO JEST ANIMACJA TEKSTU </MARQUEE> <MARQUEE BEHAVIOR=ALTERNATE BGCOLOR= RED ><FONT COLOR= WHITE >Ta animacja porusza się inaczej... </MARQUEE> - 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. Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= black > <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> - 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. Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= black > <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> - 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> Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR= white TEXT= black > <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> - 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 -
Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. UWAGA! Prezentowana w tym przykładzie grafika ma rozszerzenie BMP plik las.bmp znajduje się katalogu /windows). <BODY BGCOLOR= white TEXT= black > <H1>Grafika na stronie WWW</H1> <IMG SRC= las.bmp ALT= Jak ci się podoba moja grafika? > Zmiana wielkosci grafiki: <IMG SRC= las.bmp WIDTH=300 HEIGHT=100> Ustalenie odleglosci grafiki od tekstu... na 50 pikseli... <IMG SRC= las.bmp HSPACE=50> A teraz przykład na otaczanie grafiki tekstem: <IMG SRC= las.bmp WIDTH=50 HEIGHT=50ALIGN=left>Tekst otaczany, tekst otaczany <IMG SRC= las.bmp WIDTH=50 HEIGHT=50 ALIGN=right>Tekst otaczany, tekst otaczany <IMG SRC= las.bmp WIDTH=50 HEIGHT=50 ALIGN=top>Tekst otaczany, tekst otaczany <IMG SRC= las.bmp WIDTH=50 HEIGHT=50 ALIGN=bottom>Tekst otaczany, tekst otaczany <IMG SRC= las.bmp WIDTH=50 HEIGHT=50 ALIGN=middle>Tekst otaczany, tekst otaczany - 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> Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. UWAGA! Musisz w tym samym katalogu stworzyć dowolnym edytorem plik dane.txt (o dowolnej zawartości). <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. 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. Odsylacz tez moze byc do pliku graficznego np. <A HREF="las.bmp">tego.</A> Co wiecej odsylaczem moze byc plik graficzny - po kliknieciu w nasz znajomy plik las.bmp <A HREF="plik.txt"><IMG SRC="las.bmp"></A> ukaze sie naszym oczom plik dane.txt. Czesto chcemy zrobic odnosnik np. do poczty elektronicznej. Mozna to zdefiniowac w nastepujacy sposob: <ADDRESS> Wyzsza Szkola Handlowa ul. Peryferyjna 15B 25-562 Kielce e-mail: <A HREF=mailto:info@wsh-kielce.edu.pl">info@wsh-kielce.edu.pl</A> </ADDRESS> <HR> Wtedy po kliknieciu w adres e-mail, uruchomi sie automatycznie klient pocztowy. Analogicznie tworzymi linki do innych uslug (ftp, news, telnet). A teraz wykorzystamy etykiete strony - by znalezc sie na jej poczatku: Kliknij <A HREF="#poczatek">tutaj</A> by znalezc sie na poczatku strony! - 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: <BODY BGCOLOR="white" TEXT="black"> <H1>Odsylacze 2 strona</h1> Kliknij <A HREf="index.html">tutaj</A> by wrocic na poprzednia strone! 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 -
Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR="white" TEXT="black"> <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> 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 -
Przepisz poniŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <BODY BGCOLOR="white" TEXT="black"> <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> 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>. 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ć: <FRAMESET COLS="12%, 88%"> <FRAME SCROLLING="yes" NAME="menu" SRC="menu.html"> <FRAME SCROLLING="yes" NAME="home" SRC="start.html"> </FRAMESET> 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 - 39 -
<INPUT TYPE= checkbox NAME= jezyk VALUE= francuski >francuski... 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 <INPUT TYPE= radio NAME= plec VALUE= mezczyzna >Mezczyzna... 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: np.: <SELECT NAME=nazwa listy > <OPTION>pierwsza pozycja <OPTION>druga pozycja <OPTION>trzecia pozycja </SELECT> <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. Przepisz powyŝsze ćwiczenie, a następnie zobacz wynik w przeglądarce. <H1>Formularz</H1> <FORM ENCTYPE="text/plain" METHOD="POST" ACTION="mailto:info@wsh-kielce.edu.pl"> <B> Podaj swoje imie: </B> <INPUT TYPE="text" NAME="imie" SIZE=20> <B> Podaj swoje nazwisko: </B> <INPUT TYPE="text" NAME="nzawisko" SIZE=50> <B> Podaj plec: </B> <INPUT TYPE="radio" NAME="plec" VALUE="kobieta" checked>kobieta <INPUT TYPE="radio" NAME="plec" VALUE="mezczyzna">Mezczyzna - 41 -
<B>Wybierz swoj ulubiony napoj</b> <SELECT NAME="napoj"> <OPTION>sok pomaranczowy <OPTION>herbata <OPTION>woda zrodlana <OPTION>pepsi </SELECT> <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> <INPUT TYPE="submit" VALUE="Wyslij informacje!"> <INPUT TYPE="reset" VALUE="Usun informacje!"> </FORM> Dziekuje za wypelnienie formularza! - 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 -