Tworzymy pierwszą stronę WWW

Wszyscy chcący tworzyć strony www powinni poznać język HTML. Specyfikacja HTML definiuje ponad sto poleceń języka, dlatego też poznanie, zapamiętanie i używanie większości z nich wymaga dużego nakładu pracy, aby uzyskać pożądany efekt. Także "wpisywanie" całego kodu strony należy do bardzo żmudnych czynności. Dlatego też powstały specjalne edytory stron HTML. Jednak większość amatorów stawiających pierwsze kroki bez żadnej nauki tego dość trudnego języka chciałaby szybko i bezboleśnie stworzyć swoją pierwszą stronę www. Możemy taką stronę wykonać, zapoznając się z podstawami wykorzystania dobrego (bezpłatnego) graficznego edytora html, FrontPage Express. Program ten wchodzi w skład pakietu Internet Explorer a także jest dostępny w Internecie.

Jest to narzędzie, które pozwala nam szybko zbudować przyzwoitą pojedynczą stronę www lub witrynę (zespół stron połączonych hiperłączami). Korzystając z rozbudowanych funkcji programu mamy możliwość pełnego formatowania strony zgodnie z zasadami HTML. Aby stworzyć, nawet dość rozbudowaną, stronę nie musimy wnikać w zawiłą strukturę poleceń HTML. W momencie gdy taką stronę stworzymy zacznie ona funkcjonować poprawnie, możemy zaznajomić się z językiem i z czasem wykorzystać wybrany, tekstowy edytor HTML, co pozwoli na lepszą kontrolę nad kodem naszych stron oraz zapobiegnie kłopotom z interpretowaniem naszej strony przez różne serwery www na których ją umieścimy.

Aby strona utworzona za pomocą FrontPage Express była poprawna, warto poznać kilka istotnych szczegółów - uchroni nas to przed błędami, które początkujący bardzo często popełniają.

Przeglądając różne strony www w Internecie można zaobserwować ich wielką różnorodność pod względem budowy i zawartości. Różne strony zawierają teksty, rysunki, tabele, filmy, dźwięki, hiperłącza, reklamy oraz różne wstawki urozmaicające.

Rozpoczynając pracę nad tworzeniem strony załóżmy nowy folder w wybranym miejscu na dysku, w którym będą gromadzone wszystkie składniki strony (witryny): grafika, zdjęcia, pliki html, animacje, filmy, itp. Przygotowujemy potrzebne do strony rysunki, grafikę, zdjęcia zapisując w formacie jpg lub gif w utworzonym folderze.

Utworzenie pustej strony WWW oraz jej zapisanie
Uruchamiamy program Front Page Express zapisując na samym początku otwartą, nową i pustą stronę w swoim folderze poprzez wykonanie następujących poleceń:
- Wybieramy z menu Plik/Zapisz jako i w polu Tytuł strony wpisujemy jej tytuł i naciskamy przycisk Jako plik.
- W oknie Zapisz jako plik, w polu Zapisz w wyszukujemy swój folder utworzony wcześniej, a w polu Nazwa pliku wpisujemy index.html i naciskamy Zapisz.

Zapisanie pliku /pustej strony/ na dysku, umożliwi stosowanie adresów względnych dla różnych plików, a przez to uniknięcie wielu pomyłek.

Na dysku mamy zapisaną pierwszą stronę, ale jest ona pusta i należy wypełnić ją odpowiednią treścią zawierającą np.: tekst, rysunki (zdjęcia) i hiperłącza.. Należy też wykonać kilka czynności, których efekty przydadzą się, gdy strona znajdzie się na serwerze i będzie widoczna dla wielu użytkowników Internetu.

Ustawienia parametrów strony
Musimy określić podstawowe parametry dotyczące wyglądu strony. Ważny jest dobór kodowania polskich znaków diakrytycznych na stronie. W Internecie obowiązuje kodowanie polskich znaków według standardu ISO-8859-2, który jest polską normą, zgodną ze światowymi standardami. Pierwszymi czynnościami jakie trzeba wykonać jest określenie tytułu strony i ustawienie kodowania polskich znaków na przyjęty w Internecie standard. W tym celu należy:
- Wybrać z menu Plik, a następnie Właściwości strony.
- Na zakładce Ogólne wpisujemy nazwę strony w polu Tytuł.
- W sekcji Kodowanie HTML wybieramy Środkowoeuropejski (ISO 8859-2) w polach Do wyświetlania strony i Do zapisywania tej strony.

{PRIVATE "TYPE=PICT;ALT=" } W ten sposób strona będzie automatycznie zapisywana w obowiązującym standardzie ISO. Każda nowa strona musi być tak określona i wystarczy wykonać tę czynność tylko raz.

W oknie Właściwości strony określamy parametry tła strony. Tłem może być jednobarwna powierzchnia dowolnego koloru lub rysunek graficzny wyświetlany sąsiadująco tzn. powielony na całą stronę. Dobierajmy kolor strony do tonacji obrazka.
Aby określić tło strony:
- W oknie Właściwości strony wybieramy zakładkę Tło.
- Gdy w tło chcemy wstawić obrazek to należy zaznaczyć pole Obraz tła i korzystając z przycisku Przeglądaj podać lokalizację wybranego obrazka. W oknie Wybierz obraz tła należy kliknąć na Przeglądaj a następnie odszukać wybrany rysunek na dysku. Tłu można dać właściwość tzw. Znak wodny co oznacza, iż podczas przewijania strony tło zostanie nieruchome, a przewijana będzie tylko zawartość strony.
- Tłu nadajemy kolor wybierając z listy Tło odpowiedni kolor standardowy lub z opcji Niestandardowy i z okna Kolor wybieramy dowolny.
- W oknie Właściwości strony na zakładce Tło określamy także domyślny kolor tekstu. Z listy Tekst zaznaczamy standardowy kolor lub opcję Niestandardowy i zdefiniować dowolny kolor.

Dobrze jest dodać kilka istotnych informacji, które będą lepiej identyfikować stronę w Sieci. Informacje te należą do nagłówka dokumentu i są istotne dla wyszukiwarek, takich jak Infoseek, AltaVista, i wiele innych. Dodajemy je na wszystkich swoich stronach, gdyż ułatwia to dotarcie do strony WWW:
- W oknie Właściwości strony wybieramy zakładkę Niestandardowe. Widzimy, że strona zawiera już dwie informacje - w zmiennych systemowych znajduje się informacja o stronie kodowej dokumentu, a w zmiennych użytkownika jest automatycznie wstawiona informacja o generatorze strony, czyli, w naszym przypadku, Microsoft FrontPage Express
- Naciskamy przycisk Dodaj w bloku Zmienne użytkownika. Na ekranie pojawi się okienko dialogowe Meta zmienne użytkownika i w polu Nazwa wpisz author, a w polu Wartość - swoje imię i nazwisko. Zatwierdź wpis OK. {PRIVATE "TYPE=PICT;ALT=" }
- Ponownie naciśnij na Dodaj. Wpisz w Nazwa wyraz keywords, a w Wartość wyrazy kluczowe, które będą indeksowane przez wyszukiwarki. Przygotowują stronę poświęconą jakiemuś zagadnieniowi podajemy wyrazy kluczowe oddzielane od siebie przecinkami np. sport, narciarstwo, Małysz.
- Kolejna informacja to opis strony. Wpisz w odpowiednich polach Description np. Strona poświęcona narciarstwu, szczególnie Małyszowi.

Ułatwi to użytkownikom Internetu znalezienie potrzebnych informacji. Tytuł, wyrazy kluczowe i opis strony wysuną twoją stronę do przodu na liście znalezionych adresów.

Wstawianie grafiki

Grafika umieszczona na stronach podnosi ich atrakcyjność. Wszystkie pliki graficzne wcześniej przygotowane powinny być zapisane w utworzonym na samym początku folderze w którym znajduje się plik index.html. Wstawiamy je na stronę w następujący sposób:
- Z menu Wstaw należy wybrać opcję Obraz.
- Na karcie Inna lokalizacja w sekcji Z pliku wskazujemy odpowiedni rysunek/zdjęcie, które chcemy wstawić do dokumentu.
- Aby odnaleźć określony plik na dysku korzystamy z opcji Przeglądaj i przechodzimy do folderu z grafikami przygotowanymi wcześniej, wybieramy plik który chcemy umieścić i klikamy na Otwórz.

Odsyłacz do grafiki jest wstawiany w postaci względnej, dzięki zapisaniu dokumentu na samym początku, a więc np.: grafika/obrazek.gif. Gdyby dokument nie był zapisany, pojawi się adres bezwzględny pokazujący dokładne położenie grafiki na dysku twardym /ze ścieżką dostępu/. Wówczas grafika nie byłaby widoczna w Sieci.

Każdy rysunek wstawiony do dokumentu pojawia się w miejscu w którym ustawiony jest kursor tekstowy. Można opisać go parametrami definiującymi rozmiar obrazka, obramowanie, hiperłącze.

Aby zdefiniować właściwości obrazka:
- Wybieramy obrazek przez kliknięcie na nim.
- Następnie z menu Edycja opcję Właściwości obrazu.
- Na zakładce Ogólne w sekcji Hiperłącze domyślne i polu Lokalizacja definiujemy hiperłącze.
- Na zakładce Wygląd w sekcji Układ określamy położenie tekstu wokół obrazka przez wybranie odpowiedniego ustawienia w polu Wyrównanie, ustawiamy Grubość obramowania, Odstępy obrazka od otaczających go elementów w pionie i poziomie.
- W sekcji Rozmiar podajemy rozmiar obrazka w procentach lub pikselach.
- Po ustawieniach klikamy na OK.

Edycja tekstu

Tekst na stronie WWW jest łamany automatycznie w zależności od wielkości okna podczas przeglądania strony i wybranej wielkości znaków w przeglądarce. HTML zawiera pewne konstrukcje umożliwiające kontrolowanie tego procesu. Gdy podczas edytowania strony wciśniemy Enter to przejdziemy do nowego akapitu, między akapitami będzie linia przerwy. Jeżeli chcemy przejść do nowej linii (nie tworząc nowego akapitu) używamy kombinacji klawiszy Shift+Enter.

Redagując tekst, między wyrazami możemy wstawić jedynie jedną spację gdyż w standardzie HTML przyjęto, że między wyrazami może występować jedynie jeden znak. Jest sposób na wprowadzenie tekstu z zachowaniem oryginalnego sposobu łamania linii oraz ciągów spacji, tekst ten nie będzie automatycznie łamany. W tym celu ustawiamy typ akapitu na Sformatowany.

Aby wybrać typ akapitu:
- Z menu Format wybieramy opcję Akapit.
- W oknie Właściwości akapitu wybieramy jeden z formatów.
- Kliknąć na OK.
Podczas definiowania właściwości akapitu mamy możliwość określenia jego formatu:
- Adres - akapit wyświetlany jako kursywa
- Nagłówek 1-6 - określa wielkość znaków w akapicie, gdzie 6 to najmniejszy rozmiar znaków, a 1 największy
- Zwykły

W sekcji Wyrównanie akapitu możemy określić sposób wyrównywania akapitu:
Do lewej/Wyśrodkowanie/Do prawej/Domyślne.

Określenie formatu czcionki
Program FrontPage Express zawiera w pasku narzędziowym formatowania listę czcionek. Podczas wyboru rodzaju czcionki należy być ostrożnym i nie używać czcionek egzotycznych, których większość oglądających nasze strony może nie posiadać i strona nie będzie wyświetlana poprawnie. Domyślnie czcionka ekranowa jest wyświetlana jako Times New Roman. Najbezpieczniej jest stosować czcionki, które standardowo zainstalowane powinny być na wszystkich komputerach, a są to: Times New Roman CE i Arial CE, Tahoma i Verdana.

Aby określić format czcionki:
- Zaznaczamy blok którego właściwości chcemy określić (słowo lub cały zwrot).
- Z menu Format wybieramy opcję Czcionka.
- Na zakładce Czcionka ustalamy jej rodzaj, styl, rozmiar wybieramy efekty i określamy kolor.
W HTML-u położono nacisk na listy (Format/Punktowanie i numerowanie), których jest pięć, ale najczęściej korzysta się z dwóch. Listy nie uporządkowanej, czyli prostego wypunktowania, oraz listy uporządkowanej (numerowanej).

Tabele
Wykorzystanie tabel może pomóc w formatowaniu strony. W komórki tabel oprócz tekstu można wstawiać rysunki, definiować listy, określać tło komórek. Aby wstawić tabelę:
- Z menu Tabela wybieramy opcję Wstaw tabelę.
- W otwartym oknie w sekcji Rozmiar podajemy liczbę kolumn i wierszy.
- W sekcji Układ określamy sposób wyrównania tabeli i rozmiar obramowania.
- W sekcji Szerokość podajemy szerokość w procentach lub pikselach.

Podczas budowy tabeli mamy możliwość korzystania z funkcji znajdujących się w menu Tabela, takich jak: Wstaw wiersze lub kolumny, Wstaw komórkę, Wstaw tytuł. Możemy określić właściwości tytułu, poszczególnych komórek lub tabeli. Aby z tego skorzystać wybieramy jedną z opcji w menu Tabela, która służy do zaznaczania elementu (Zaznacz tytuł, Zaznacz komórkę, Zaznacz tabelę) a następnie określić właściwości.

Odsyłacze do stron

HTML przeznaczony jest do tworzenia dokumentów hipertekstowych w których określone fragmenty zawierają odnośniki do innych. Mogą być one w obrębie jednej strony, pomiędzy różnymi dokumentami, znajdującymi się w różnych miejscach. Uniwersalny Identyfikator Zasobów (URL - Universal Resorce Identifier), używany w odnośnikach, pozwala na dostęp do dokumentów, grafiki i innych zasobów udostępnianych na różne sposoby. Gdy robimy na stronie odsyłacz do innej strony otwieramy ją wcześniej, a jeśli jej jeszcze nie ma, wówczas musimy utworzyć i zapisać na dysku, a następnie otworzyć. Jest to po prostu najwygodniejsza metoda.

Aby na stronie wstawić hiperłącze:
- Należy zaznaczyć fragment tekstu, który ma zostać hiperłączem (odsyłaczem).
- Z menu Wstaw - Hiperłącze /lub Ctrl-k lub przycisk Hiperłącze/.
- Jeżeli tworzymy odsyłacz do strony w Internecie wybieramy zakładkę Sieć Web wskazujemy typ łącza http i w polu URL wpisujemy adres, np.: www.men.waw.pl
- Gdy tworzymy adres poczty elektronicznej, wybieramy typ mailto (odwołanie do adresu e-mail) i podajemy adres pocztowy, np.: [e-mail]
- W okienku dialogowym Utwórz hiperłącze, w części Otwarte strony, zobaczysz listę otwartych w edytorze plików. Wskaż jeden z nich i zatwierdź przyciskiem OK.

Kliknij na Tak.

Edytor pozwala utworzyć odsyłacz do nie istniejącej jeszcze strony w twojej witrynie - Nowa strona. Wpisz tytuł i nazwę pliku, a w okienku Nowa strona wybierz pozycję Strona, czyli pusty szablon. Następnie zapisz od razu pustą stronę. Musisz użyć polecenia Plik/Zapisz jako i w okienku Zapisz jako wybrać Jako plik.

Wstawianie plików

Do redagowanego dokumentu możemy wstawiać gotowe pliki dokumentów z zewnątrz - Wstaw/Plik. Najbezpieczniej jest wstawiać pliki HTML oraz pliki tekstowe /zazwyczaj TXT/. Kłopoty mogą się pojawić wtedy, gdy będziemy chcieli wstawić na przykład dokument Worda 9X czy Works. Front Page Express uparcie wstawia tutaj plik typu RTF. W takiej sytuacji należy wcześniej zamienić takie pliki na postać tekstową.

Opracowanie: Jolanta Dziuba Małecka

---