<<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.