DDG: Tworzenie stron WWW

MARZENNA DONAJSKI I JULIUSZ DONAJSKI

Sztuka tworzenia multimedialnych dokumentow

Article
published in
MACWORLD
Polish Edition
(November '95). Avaliable
only in
polish "asci"
language.
Sorry!

Artykul
opublikowany
w MACWORLD
Polska Edycja
(Listopad 95). Dostepny
tylko w
wersji "asci".
Sorry!

World Wide Web to ogolnoswiatowa siec komputerow pracujacych w sieci Internet. Idea WWW powstala w Europejskim Laboratorium Fizyki Czasteczek (CERN) w Szwajcarii i w ciagu kilku lat opanowala wiekszosc zasobow i transmisji danych w Internecie stajac sie rzeczywistym poczatkiem ogolnoswiatowej infostrady.

Dostep do informacji w World Wide Web jest mozliwy dzieki aplikacjom do przegladania i transferowania dokumentow hipertekstowych. Aplikacje te to przegladarki (browsers), wsrod ktorych do najpopularniejszych naleza Netscape i NCSA Mosaic.

Jadrem WWW jest calkowicie niezalezny od platformy sprzetowej Jezyk Znacznikow Hipertekstowych (HiperText Markup Language). HTML pozwala na tworzenie dokumentow WWW poprzez opisanie tekstu, grafiki, dzwieku a nawet sekwencji video odpowiednimi znacznikami, ktore wyznaczaja tytuly i podtytuly, pogrubienia tekstu, miejsce i sposob wyswietlania grafiki na stronie oraz hipertekstowe polaczenia (links) do innych miejsc tego samego dokumentu lub tez do innych dokumentow Sieci, nawet jezeli fizycznie znajduja sie one na innym kontynencie.

Chcac tworzyc wlasne dokumenty WWW trzeba jedynie poznac i zrozumiec nowy jezyk: HTML. Jest to o tyle proste, ze po pierwsze sklada sie on jedynie ze standardowych znakow ASCII, a po drugie istnieje bardzo duzo informacjii i wrecz podrecznikow dostepnych on-line dla uzytkownikow Internetu. Istniejace strony WWW sa rowniez "zywymi" przykladami mogacymi pomoc w poznaniu HTML. Wystarczy kazac przegladarce wyswietlic kod zrodlowy ogladanej wlasnie strony WWW i juz mamy gotowy material do poznawania jezyka HTML.

Najlatwiejszy wstep do HTML maja osoby pracujace wczesniej na maszynach UNIXowych poniewaz sposob opisania informacji znacznikami HTML jest bardzo zblizony do sposobow formatowania tekstu w UNIXie. Znaczniki HTML znajdujace sie w pliku tekstowym HTML informuja przegladarki o sposobach wyswietlania zawartych w nich danych. Znaczniki te znajduja sie miedzy nawiasami katowymi <znacznik> i maja stala forme:

<znacznik> - znacznik poczatkowy

</znacznik> - znacznik koncowy

Lista najczesciej wykorzystywanych znaczników znajduje sie w tabeli:

NAJCZESCIEJ WYSTEPUJACE ZNACZNIKI HTML

.	Naglowki:
<h1> ... </h1>	najwiekszy naglowek
<h2> ... </h2>	mniejszy naglowek
<h3> ... </h3>	jeszcze mniejszy naglowek
<h4> ... </h4>	jeszcze mnieszy naglowek
<h5> ... </h5>	jeszcze mniejszy naglowek
<h6> ... </h6>	najmniejszy naglowek
.	Znaki formatujace:
<title> ... </title>	wyswietla tytul dokumentu
<p>	rozpoczecie nowego akapitu - nie wymaga znacznika konca
<br>	zakonczenie linii - nie wymaga znacznika konca
<hr>	wyswietlenie linii poziomej - nie wymaga znacznika konca
.	Style fizyczne tekstu:
<b> ... </b>	wyswietla zaznaczony tekst pogrubiony
<i> ... </i>	wyswietla zaznaczony tekst kursywa
<u> ... </u>	wyswietla zaznaczony tekst podkreslony
<tt> ... </tt>	wyswietla zaznaczony tekst czcionka maszyny do pisania
.	Style logiczne tekstu:
<em> ... </em>	uwydatnienie tekstu - najczesciej kursywa
<strong> ... </strong>	uwydatnienie tekstu - najczesciej pogrubienie
.	Listy:
<ul> ... </ul>	wyswietla liste nieuporzadkowana
<ol> ... </ol>	wyswietla liste uporzadkowana
<dir> ... </dir>	wyswietla liste katalogu
<li> ... </li>	wyswietla element listy/katalogu
<dl> ... </dl>	wyswietla liste definicji
<dt>	wyswietla termin definicji - nie wymaga znacznika konca
<dd>	wyswietla definicje terminu- nie wymaga znacznika konca
.	Hiperpolaczenia:
<a href="URL">...</a>	hiperpolaczenie do innego pliku, gdzie "..." jest wyswietlanym tytulem polaczenia
<a href="#cel">...</a>	hiperpolaczenie do tego samego pliku, gdzie "..." jest wyswietlanym tutylem polaczenia
<a name="cel">...</a>	okreslenie celu hiperpolaczenia w tym samym pliku, gdzie "..." jest tutylem polaczenia
.	Grafika:
<img src=nazwa pliku>	wyswietla plik graficzny w formacie gif lub jpeg
.	Inne znaczniki:
<!...>	umozliwia umieszczenie komentarza w tekscie zrodlowym HTML, krorego przegladarki nie wyswietlaja

Tworzac wlasne strony WWW nalezy tez pamietac, ze wiele znacznikow daje sie ze soba laczyc. Przegladarka odczytujac znacznik modyfikuje teksty, ktore nastepuja po nim az do odczytania znacznika koncowego. Niektore znaczniki nie maja pary zamykajacej poniewaz, tak jak np. znacznik wymusza zakonczenie linii i nie wplywa juz na nic wiecej.

Tyle chyba jezeli chodzi o teorie. Przejdzmy do praktyki. Pokazemy teraz kilka rzeczywistych stron WWW i na ich przykladzie omowimy zastosowanie oraz dzialanie najpopularnirjszych znacznikow HTML. Mamy nadzieje, ze przyklady te pokaza czym jest rzeczywiste WWW: wspaniale interaktywne srodowisko pozwalajace na prezentacje najrozniejszej informacji w sposob atrakcyjny i kompleksowy.

Proponujemy wiec link do Strony Wywolawczej wirtualnej Galerii prowadzonej przez autorow niniejszego tekstu lub tez link do strony ze zrzutem ekranowym (screenshot) Strony Wywolawczej Galerii, a nastepnie rzut oka na jej kod zrodlowy, ktory znajduje sie ponizej.

STRONA WYWOLAWCZA GALERII

SCREENSHOT STRONY WYWOLAWCZEJ GALERII

KOD ZRODLOWY STRONY WYWOLAWCZEJ:

<html>
<head><title>Donajski's Digital Gallery</title></head>
<body bgcolor="#000000" text="#FFFF90" link="#FF0000" alink="#E47833" vlink="#FFFFFF">
<center>

<a href ="ddg-about-0.html">
<img border=0 src="logo-ddg-lscp.gif" alt="[Donajski's Digital Gallery Logo]"></a>
</center>
 
<center>

<a href="entrance.gif.map">
<img border=0 src="entrance.gif" ismap></a>
</center>
 
<hr>
<center>

<a href="new.html">NEW</a> -
<a href="exhibits.html">EXHIBITS</a> -
<a href="projects.html">PROJECTS</a>
<a href="studio.html">STUDIO</a> -
<a href="warsaw.html">WARSAW</a> -
<a href="about.html">ABOUT</a> -
<a href="links.html">LINKS</a>
</center>
<hr>
</body>
</html>

Pierwszy krok w projektowaniu tej strony nie roznil sie niczym od pierwszych krokow przy projektowaniu ksiazki czy tez folderu. Stworzylismy dwa pliki graficzne: logo.gif i entrance.gif. Narzedzie, ktore nam do tego posluzlo to znany wszystkim Photoshop. Rezultaty pracy w Photoshopie zostaly zapisane w formacie GIF poniewaz jest to jeden z formatow graficznych (drugi to JPEG) prawidlowo interpretowanych i wyswietlanych przez przegladarki WWW. Nastepnie przekonwertowalismy te pliki do formatu znanego jako interleaved GIF przy pomocy shareware'owego programu GIFConverter autorstwa Kevina M. Mitchella. Format ten pozwala nowszym przegladarkom WWW wyswietlic uproszczona wersje grafiki bardzo szybko, a gdy projekt i tekst calej strony jest juz na ekranie, dodawac brakujace pixele. Nawigujac po WWW szybko odkryjesz roznice miedzy jednym a drugim GIF-em. Dwa inne programy graficzne, ktorych uzywamy to Transparency autorstwa Aarona Gilesa oraz WebMap autorstwa Rowlanda Smith'a. Pierwszy przypomina w pewnym stopniu przejrzystosc tla w Photoshopie 3,0 i pozwala na "zamiane" jednego z kolorow grafiki na przejrzystosc, a drugi umozliwia mapowanie grafiki czyli zdefiniowanie akcji serwera WWW tak aby klikniecie mysza na wyznaczonych przez nas obszarach pliku graficznego wywolywalo np. hipertekstowe polaczenie z inna strona WWW. Plik entrance.gif jest taka mapowana grafika. X Jeszcze jeden program, bez ktorego trudno przystapic do tworzenia wlasnych stron WWW to edytor tekstowy. Moze to byc prosty edytor Macintosha, notatnik z Windows lub tez ktorys ze specjalizowanych edytorow HTML. My uzywany najczesciej edytora HTML Editor Ricka Gillesa. Zaleta dedykowanego edytora HTML (zwlaszcza dla poczatkujacych) jest latwosc wstawiania gotowych znacznikow zamiast wpisywania ich z klawiatury oraz mozliwosc podgladu strony w jej wersji WWW.

Jak widzisz zaczelismy od wstawienia znacznika <html>, ktory jest znacznikiem parzystym i ktorego para zamykajaca </html> znajduje sie na samym koncu dokumentu. Znacznik ten nakazuje przegladarce interpretacje i wyswietlanie wszystkiego co sie w nim zawiera jako informacje hipertekstowa. Nastepne to rowniez parzyste znaczniki <head> i <title>. Tekst znajdujacy sie miedzy nimi bedzie wyswietlany jako tytul strony w belce statusu przegladarki. Kolejny znacznik <body> wyznacza zawartosc naszej strony WWW i opcjonalnie instruuje przegladarke w jakich kolorach ma wyswietlac pewne elementy dokumentu:

bgcolor="#RRGGBB" - opisuje kolor tla

text="#RRGGBB" - opisuje kolor tekstu

link="#RRGGBB" - opisuje kolor polaczenia

alink="#RRGGBB" - opisuje kolor aktywnego polaczenia

vlink="#RRGGBB" - opisuje kolor zrealizowanego polaczenia

Wartosci kolorow skladowych RGB zapisane sa w systemie heksadecymalnie. Kolejny element strony to logo galerii, ktore przegladarka potrafi wyswietlic dzieki znacznikowi:

<img border=0 src="logo.gif" alt="Gallery Logo">

gdzie wystepuja elementy opcjonalne:

border=0 - nakazuje zlikwidowanie obrysu grafiki

alt - opisuje tekst, ktory bedzie wyswietlony gdy nie uda sie wyswietlic grafiki.

Logo to uczynilismy polaczeniem hipertekstowym umieszczajac je wewnatrz znacznika zwanego kotwica (anchor):

Znacznik ten okresla hipertekstowe polaczenie do pliku about.html, ktory jest krotka informacja o galerii. To jeszcze ujete jest w pare znacznika <center> ... </center>, ktory nakazuje przegladarce centrowac logo na srodku strony.

Przy znaczniku kotwicy musimy powidziec kilka slow o Lokatorze Jednolitego Zasobu (Uniform Resource Locator). W tym wypadku URL-em jest plik "logo.gif", ktory znajduje sie w tym samym katalogu co omawiana strona i dlatego nie musi miec wyspecyfikowanej sciezki dostepu. Nalezy jednak wiedziec, ze URL potrafi wskazac dowolny plik istniejacy w zasobach Internetu. Dla przykladu pelny URL dla pliku about.html wyglada nastepujaco:

http://www.atm.com.pl/COM/Art-Gallery/Art-Gallery.html

gdzie: http oznacza protokol transmisji hipertekstowej, :// jest - cytujac Dava Taylora z jego ksiazki "Tworzac fascynujace strony WWW z HTML"* - magicznym znakiem, www oznacza serwis WWW, sun.com.pl jest nazwa serwera, COM/Art-Gallery jest sciezka dostepu a about.html plikiem HTML.

Dzieki URL mozemy specyfikowac nie tylko polaczenia z dowolnym miejscem na swiecie ale tez z roznymi serwisami Internetu, takimi jak: Telnet, Gopher czy FTP. URL moze wskazywac inny plik HTML, plik graficzny, dswiekowy czy tez sekwencje video. W przypadku wyspecyfikowania na poczatku FTP zamiast HTTP stworzymy polaczenie, ktore spowoduje sprowadzenie pliku do naszego komputera zamiast jego wyswietlenia. Z kolei kotwica z URL-em w postaci:

"mailto:donajmd@ikp.atm.com.pl"

wywola na Twoim komputerze program poczty elektronicznej i pozwoli Ci wyslac e-mail do nas bez potrzeby oddzielnego startowania programu poczty elektronicznej. Opisane wczesniej mapowanie grafiki jest rowniez przykladem wykorzystania i przeciazania URL-a.

Kolejne znaczniki to dwa razy znacznik nie posiadajacy "pary" zamykajacej czyli dwie puste linie na stronie dzieki ktorym mozemy regulowac odstep od jednej grafiki do drugiej. Kolejna grafika jest wyswietlana dzieki tym samym znacznikowm co logo. Elementy dodatkowe, ktore sie pojawily w tym znaczniku opisuja sposob reakcji serwera WWW na akcje uzytkownika. Element ismap informuje przegladarke, ze ma do czynienia z grafika mapowana, o ktorej wspominalismy juz wczesniej. Po duzym odstepie pojawia sie w przegladarce pozioma linia wyswietlona dzieki znacznikowi <hr> oraz kotwice polaczen hipertekstowych do roznych stron WWW, np:

<a href="/~donajski/projects.html">PROJECTS</a>

gdzie klikniecie na slowie PROJECTS wywoluje polaczenie ze plikiem projects.html, ktory jest kolejna strona WWW, ktora widzimy na Rysunku 2. Strona ta jest strona wywolawcza projektu nad ktorym pracujemy razem z Muzeum Sztuki w Lodzi. Projekt ten ma na celu udostepnienie informacji i zbiorow Muzeum poprzez WWW. Kod zrodlowy tej strony wyglada nastepujaco:

STRONA WYWOLAWCZA MUZEUM SZTUKI

SCREENSHOT STRONY WYWOLAWCZEJ MUZEUM SZTUKI

KOD ZRODLOWY STRONY MUZEUM SZTUKI:

<html>
<head><title>Museum of Art Lodz</title></head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<center>

<a href ="ddg-about-0.html">
<img border=0 src="nazwa-w.gif" alt="Museum of Art Lodz"></a>
</center>
 
<center>

<a href="msl-1.html">
<img border=0 src="logo-1.gif"></a>
</center>
 
<hr>
<center>

<a href="msl-intro.html">INTRODUCTION</a> -
<a href="msl-info.html">INFO</a> -
<a href="tour-0.html">TOUR</a>
<a href="collection-0.html">COLLECTION</a> -
<a href="events-0.html">EVENTS</a> -
<a href="artists-0.html">ARTISTS</a> -
<a href="exhibits-0.html">EXHIBITS</a>
</center>
<hr>
</body>
</html>

W pliku tym wystepuje wiekszosc znanych nam juz znacznikow HTML. Chcielibysmy pokazac dzialanie znacznikow formatujacych tekst. Juz pierwsze kroki przy formatowaniu tekstu dla potrzeb WWW odkrywaja pewna niespodziewana zasade. Sztuka typografii WWW jest ograniczona do jednokolumnowego tekstu**. Mozemy tekst lamac w dowolnym miejscu, mozemy tworzyc akapity, naglowki, tytuly i srodtytuly, mozemy uwypuklac tekst lub jego fragmenty pogrubieniem lub kursywa. Znacznikiem pozwalajacym wyrozniac tytuly i srodtytuly jest znacznik <hx> ... </hx> gdzie x moze przybrac wartosc od 1 do 6. Tabela znacznikow opisuje go dokladniej. Netscape pozwala nam tez na uzycie znacznika ... gdzie x jest wartoscia od 1 do 6. Znacznik ten - pozwalajacy wyspecyfikowac wielkosc czcionki w sposob podobny jak znacznik <hx> jest dzisiaj prawidlowo interpretowany chyba tylko przez przegladarke Netscape. Wiekszosc pozostalych ignoruje go a tylko niektore ze starszych przegladarek wyswietlaja go tak jak inny tekst wprowadzajac spore utrudnienie w czytaniu.

Tworzac strone WWW nie mozemy nakazac wyswietlenia tekstu okreslonym krojem pisma i wielkoscia czcionki. Znacznik <wyswietl czcionke Helvetica Bold 14 pkt> ... </zakoncz wyswietlanie czcionki Helvetica Bold 14 pkt> nie istnieje. Myslac o wilekosciach czcionki musimy przyjac rozmiar (size) 3 jako bazowy. Znacznik z wartoscia 4, 5 lub 6 wyswietli nam czcionke proporcjonalnie wieksza do czcionki i rozmiaru ustawionego roznie w preferencjach roznych przegladarek. Odpowiednio wartosci 2 i 1 spowoduja wyswietlenie czcionki w rozmiarze odpowiednio mniejszym w stosunku w wartosci bazowej 3. Uzywajac znacznika nakazujacego wyswietlenie wskazanego tekstu kursywa pamietaj, ze dopiero najnowsze przegladarki WWW uwzgledniaja fakt, ze pochylenie kursywy wymaga dodatkowej spacji po ostatnim pochylonym znaku i w zwiazku z tym czesto obserwujemy wizualny brak spacji miedzy slowem jeszcze wyswietlanym kursywa a slowem juz wyswietlanym czcionka regularna.

Wszystkich majacych dostep do Internetu chcielibysmy zaprosic w jeszcze jedno miejsce. Miejscem tym jest Macworld On-line pod adresem:

STRONA WYWOLAWCZA MACWORLDA

SCREENSHOT STRONY WYWOLAWCZEJ MACWORLDA

W zakonczeniu chcielibysmy wspomniec o technicznych uwarunkowaniach, ktorym podlega transmisja danych w Internecie i ich zwiazku z tworzeniem graficznie atrakcyjnych stron WWW. Otoz wieksza czesc informacji jest przekazywana w Sieci za pomoca modemow, ktore dzisiaj dzialaja z predkoscia pomiedzy14.400 a 28.800 bitow. Oznacza to realny transfer nie wiecej niz 1800 - 3600 bajtow na sekunde. Tak wiec jezeli Twoje strony beda przeladowane grafika, ktora w dodatku nie bedzie miala specjalnego uzasadnienia spora czesc gosci na Twoich stronach WWW bedzie z nich wychodzila zanim jeszcze sie one zaladuja.

Created by Donajski's Digital Gallery