<<Wst�p

Powr�t do strony g��wnej poradnika

Lekcja 2>>

Lekcja 1 - niezb�dne informacje, przygotowanie warsztatu pracy.

Zanim przyst�pimy do tworzenia strony musimy zrozumie� filozofi� jej dzia�ania. Do tej pory przygotowuj�c jaki� dokument (np. formatuj�c tekst) przez ca�y czas widzieli�my jego ostateczny kszta�t. Przy tworzeniu strony sprawa wygl�da nieco inaczej. Mianowicie stron� tworzymy poprzez pisanie w pliku tekstowym jej kodu �r�d�owego. Przegl�darka Internetowa (np. Internet Explorer) odczytuje ten plik i odpowiednio interpretuje jego zawarto��, a nast�pnie wy�wietla w postaci strony. Je�li na stronie maj� wyst�pi� jakie� elementy graficzne (np. rysunek, zdj�cie) to musz� one by� do��czone w osobnych plikach i odpowiednio opisane w kodzie �r�d�owym strony. Na ten kod sk�ada si� tekst, kt�ry ma by� wy�wietlany na stronie oraz szereg znacznik�w j�zyka HTML, znaczniki te informuj� przegl�dark�, w jaki spos�b ma wy�wietla� poszczeg�lne elementy witryny. Ka�dy znacznik rozpoczyna si� nawiasem "<" a zamyka nawiasem ">". Jako �wiczenie proponujemy teraz obejrze� kod �r�d�owy aktualnie wy�wietlanej strony. Je�li dysponujemy przegl�dark� Internet Explorer, to mo�emy to zrobi� wybieraj�c z menu WIDOK-�R�D�O.

Niestety to, w jaki spos�b strona b�dzie wy�wietlana na komputerze osoby ogl�daj�cej nasz� witryn� zale�y od r�nych czynnik�w. Kilka z nich przedstawiamy poni�ej.

• Uďż˝ywane oprogramowanie - przeglďż˝darki rďż˝nych firm, lub rďż˝ne ich wersje (starsze, nowsze) mogďż˝ odmiennie interpretowaďż˝ kod ďż˝rďż˝dďż˝owy. Sztukďż˝ jest stworzyďż˝ stronďż˝ tak, aby dziaďż˝aďż˝a niezaleďż˝nie od rodzaju uďż˝ytej do jej oglďż˝dania przeglďż˝darki.
• Rozdzielczo�� monitora, rozdzielczo�� ta podawana jest w pikselach np. 800x600 lub 1024x768, moďż˝na powiedzieďż˝, ďż˝e 1 piksel to jeden punkt na monitorze. Oczywistďż˝ sprawďż˝ jest, ďż˝e strona, ktďż˝ra zajmuje ca�� powierzchniďż˝ monitora o wiďż˝kszej rozdzielczoďż˝ci moďż˝e nie byďż˝ prawidďż˝owo wyďż˝wietlana na monitorach o mniejszej rozdzielczoďż˝ci. Najprostszym rozwiďż˝zaniem tego problemu jest tworzenie strony o rozmiarze dostosowanym do rozdzielczoďż˝ci 800x600, na wiďż˝kszych monitorach pozostanie po prostu pewna powierzchnia niewykorzystana.
• Liczba kolorďż˝w, ktďż˝re jest w stanie wyďż˝wietliďż˝ monitor. W tej chwili nie jest to juďż˝ raczej problemem, poniewaďż˝ tylko bardzo stare komputery majďż˝ ograniczonďż˝ liczbďż˝ wyďż˝wietlanych kolorďż˝w.
• Wyďż˝wietlanie strony moďż˝e zaleďż˝eďż˝ takďż˝e od innych czynnikďż˝w zwiďż˝zanych z jej projektem np. od rodzaju uďż˝ywanej czcionki. Zaleca siďż˝ stosowanie czcionek co do ktďż˝rych istnieje najwiďż˝ksze prawdopodobieďż˝stwo, ďż˝e bďż˝dďż˝ zainstalowane na komputerze odbiorcy strony. Powinno wybieraďż˝ siďż˝ czcionki bezszeryfowe np. Arial lub projektowane specjalnie z myďż˝lďż˝ o wyďż˝wietlaniu na monitorze np. Verdana. Bardzo popularna w systemie Windows czcionka Times jest chyba najgorszym wyborem.

Przystďż˝pimy teraz do przygotowania warsztatu pracy. Przy pomocy np. Eksploratora Windows na dowolnie wybranym dysku tworzymy folder o nazwie Moja Strona. W folderze tym bďż˝dziemy przechowywaďż˝ wszystkie pliki, ktďż˝re bďż˝dďż˝ skďż˝adaďż˝ siďż˝ na przygotowywany przez nas projekt. ďż˝ciďż˝gniemy teraz i zapiszemy na dysku potrzebne nam pliki graficzne. Bďż˝dďż˝ to: plik z rysunkiem ksi��ek (ksiazki.gif) oraz plik bďż˝dďż˝cy biaďż˝ym prostokďż˝tem o wymiarach 1 na 1 piksel (1x1w.gif). ďż˝ciďż˝gamy je w nastďż˝pujďż˝cy sposďż˝b: klikamy prawym klawiszem myszy na pierwszym z widocznych poniďż˝ej rysunkďż˝w i z menu kontekstowego wybieramy Zapisz obraz jako..., w otwarty okienku dialogowym wskazujemy miejsce zapisu - folder Moja Strona. Te same czynnoďż˝ci powtarzamy dla drugiego rysunku.

W dalszej kolejno�ci �ci�gniemy program, kt�ry umo�liwi nam prawid�owe dla publikacji w Internecie kodowanie polskich znak�w (ISO-8859-2). B�dzie to darmowy program o nazwie Notatnik+. Dzia�a on podobnie jak Notatnik do��czony do systemu Windows, wi�c do jego obs�ugi nie b�d� potrzebne �adne dodatkowe umiej�tno�ci. Aby go �ci�gn�� post�pujemy podobnie jak w przypadku �ci�gania plik�w graficznych: klikamy prawym klawiszem myszy na linku umieszczonym poni�ej i z menu kontekstowego wybieramy: "zapisz element docelowy jako...", w otwarty okienku dialogowym wskazujemy miejsce zapisu, wybierzmy dysk C: (folder g��wny). Innym miejscem zapisu mo�e by� folder Windows, wtedy Notatnik+ mo�e (je�li zmienimy mu nazw� na notepad.exe) zast�pi� Notatnik systemowy i od tej pory nie b�dziemy musieli si� zastanawia�, kt�r� aplikacj� uruchamiamy.

Jeďż˝li aplikacjďż˝ Notatnik+ zapisaliďż˝my na dysku C:, to odnajdujemy plik notatnik.exe i uruchamiamy go poprzez dwukrotne klikniďż˝cie. Po uruchomieniu programu mamy otwarty nowy pusty plik. Plik ten zapiszmy w folderze Moja Strona nadajďż˝c mu nazwďż˝ index.html. Jest to nazwa zarezerwowana dla pliku, ktďż˝ry ma byďż˝ g��wnďż˝ stronďż˝ witryny internetowej, wďż˝aďż˝nie on bďż˝dzie otwierany jako pierwszy. Jeďż˝li nadamy mu innďż˝ nazwďż˝, strona nie bďż˝dzie dziaďż˝aďż˝. Nazwy wszystkich plikďż˝w, ktďż˝re majďż˝ byďż˝ umieszczone w Internecie bďż˝dziemy pisaďż˝ wy��cznie maďż˝ymi literami, nie moďż˝na w ich nazwach uďż˝ywaďż˝ polskich liter i spacji.

Po zako�czeniu tych czynno�ci w folderze Moja Strona powinny znajdowa� si� trzy pliki: index.html, ksiazki.gif, 1x1w.gif. Plik index.html, to ten w kt�rym b�dziemy pisa� kod �r�d�owy strony. Dwa pozosta�e, to grafiki, kt�re poprzez wpisanie odpowiednich znacznik�w w pliku index.html zostan� wy�wietlone na stronie.

Plik index b�dzie przez nas edytowany i otwierany. Czynno�ci te b�d� si� znacznie r�ni�. Otwarcie pliku np. poprzez jego dwukrotne klikni�cie spowoduje uruchomienie przegl�darki internetowej i wy�wietlenie w niej zawarto�ci strony. Edytowa� plik b�dziemy wtedy, gdy uruchomimy Notatnik i z menu wybierzemy PLIK-OTW�RZ, w okienku dialogowym b�dziemy musieli przej�� do folderu Moja Strona, a w dolnej jego cz�ci o nazwie "Pliki typu" wybra� opcj� "Wszystkie pliki", nast�pnie wska�emy nasz plik (index.html) i wci�niemy przycisk Otw�rz. Edytowanie w Notatniku pozwoli nam wpisywa� lub modyfikowa� kod �r�d�owy tworzonej strony.

Na koniec jeszcze kilka uwag.
Je�eli co� na tworzonej podczas kolejnych lekcji stronie nie b�dzie dzia�a�o, to przyczyny w pierwszej kolejno�ci powinno si� szuka� w b��dnie wpisanym kodzie, nale�y wtedy dok�adnie obejrze� �r�d�o strony i poprawi� b��dy. Zamiana jednego znaku lub literki wewn�trz znacznika mo�e spowodowa� nieprawid�owe wy�wietlanie strony. Je�li problem b�dzie polega� na nieprawid�owym wy�wietlaniu polskich znak�w, to prawdopodobnie zapomnieli�my o ich konwersji na standard ISO. Mo�emy to zrobi� wybieraj�c z menu Notatnika: EDYCJA-KONWERSJA TEKSTU-WIN-->ISO lub wciskaj�c klawisz F11. Nast�pnie zapisa� zmiany i w przegl�darce internetowej od�wie�y� widok strony.
Mo�e si� zdarzy� tak�e sytuacja odwrotna, mimo niepoprawnie wpisanego kodu lub nawet braku niekt�rych znacznik�w lub parametr�w, strona b�dzie si� wy�wietla� prawid�o. Odpowiedzialna za taki stan rzeczy jest przegl�darka, kt�ra potrafi zidentyfikowa� i poprawi� pope�nione przez nas b��dy. Namawiamy jednak usilnie, aby zawsze wpisywa� kod poprawnie i w ca�o�ci, w przeciwnym przypadku nigdy nie b�dziemy wiedzieli czy strona wy�wietla si� prawid�owo tak�e u innych u�ytkownik�w, w ko�cu mog� u�ywa� innej przegl�darki.
Mo�emy si� spotka� tak�e z tak� sytuacj�, �e strona na komputerze na kt�rym j� tworzyli�my dzia�a poprawnie, natomiast po umieszczeniu w Internecie ju� nie. Przyczyny takiego stanu rzeczy nale�y szuka� tak�e w kodzie �r�d�owym, w pierwszym rz�dzie nale�y sprawdzi� poprawno�� wpisania nazw plik�w.
Strona tworzona w tym cyklu lekcji jest napisana, tak aby wyglada�a w miar� mo�liwo�ci identycznie w nast�pujacych przegl�darkach: Internet Explorer od wersji 4, Netscape od wersji 4, Mozilla od wersji 1.0rc2, Opera od wersji 5 (z nak�adk� pl). Strona prawdopodobnie b�dzie czytelna tak�e w niekt�rych starszych wersjach tych przegl�darek.