Strona WWW w pół godziny

Wykupiłeś już domenę u providera? Pora więc zastanowić się nad jej wykorzystaniem - czyli umieszczeniem w niej swojej strony WWW. W poniższym artykule krok po kroku wprowadzimy Cię w arkana sztuki webmasterskiej. Nie załamuj rąk, jeśli z tworzeniem internetowych witryn miałeś dotychczas mało do czynienia - aby zbudować własny serwis, nawet nie musisz znać języka HTML.

Własną stronę internetową można stworzyć na dwa sposoby - napisać ją od zera w języku (X)HTML lub skorzystać z odpowiedniego edytora. Pierwsza z metod to technika dla zaawansowanych użytkowników, należy bowiem wykazać się znajomością składni czy znaczników języka, aby móc efektywnie dobudowywać do strony kolejne cegiełki kodu. Dla zupełnych laików w kwestii tworzenia stron pozostaje więc rozwiązanie drugie, czyli skorzystanie z tzw. aplikacji WYSIWYG (ang. "what you see is what you get"), które udostępniają użytkownikom gotowe elementy do wykorzystania, np. tabele, formularze, itp. Wystarczy wybrać odpowiednią pozycję w menu i żądany komponent trafia do dokumentu HTML). W niniejszym artykule spróbujemy stworzyć prostą stronę WWW w oparciu o narzędzie łączące w sobie obie te metody.

Wskazówka - niektórzy dostawcy usług internetowych oferują własne, webowe kreatory WWW WYSIWYG - typowym przykładem takiej aplikacji jest np. dostępny w portalu Onet.pl WebMajster.

Uwaga - niniejszy tekst jest skierowany dla początkujących webmasterów: starzy HTML-owi wyjadacze na pewno zdążyli już poznać wszystkie zawarte w nim wskazówki.

Zanim przejdziemy do tworzenia strony, musimy zastanowić się nad jej treścią (jaki "content" znajdzie się na stronie), strukturą (jak będzie wyglądać nawigacja po podstronach - powinna być dla użytkowników wygodna) i wyglądem (witryna powinna mieć jednolity wygląd). Zaplanowane działania w tej materii znacznie ułatwią późniejszą pracę (najlepiej w tym celu rozrysować sobie to wszystko na papierze).

Pozostaje jeszcze pytanie, z jakiego edytora skorzystać. Ostateczną decyzję pozostawiamy Tobie - w ostateczności, jeśli znasz już podstawy HTML, możesz korzystać ze zwykłego Notatnika Windows. Pozostałym początkującym użytkownikom polecamy program Zajączek - darmową aplikację polskiego autorstwa, wyposażoną w zestaw przydatnych narzędzi pomocnych w pracy każdego webmastera (np. funkcje tworzenia animowanych obrazów GIF czy walidator kodu HTML). Jeśli nie czujesz się mocny w projektowaniu wyglądu, z pomocą przyjdzie Ci Layout Master, który pozwala zaprojektować rozmieszczenie elementów na stronie WWW.

Zaczynamy
Język HTML to inaczej język znaczników hipertekstowych - jego kontynuacją jest XHTML (język rozszerzalnych znaczników tekstowych, używany do budowania strona na potrzeby wyświetlania ich w różnych urządzeniach, np. PDA). Różnica pomiędzy nimi jest taka, że w XHTML można używać wyłącznie małych liter.

Zainstaluj na dysku twardym program Zajączek i uruchom go. Kliknij ikonę "Nowy dokument" w lewym górnym rogu ekranu, a Twoim oczom ukaże się taki oto widok.



Wskazówka - zauważ, że w prawym panelu, pod oknem z widocznym kodem strony znajdują się cztery zakładki: Edycja kodu HTML, Przeglądanie, Diagram i Wyniki SQL. Powinny Cię teraz interesować tylko dwie pierwsze. Znajdując się na pierwszej zakładce, możesz edytować kod strony dodając do niego różne komponenty dostępne na pasku opcji, jak również ręcznie wpisywać kolejne linie. Zmiany będą widoczne - po zapisaniu pliku - właśnie w oknie Przeglądanie.

MetadaneNie przejmuj się, jeśli nie rozumiesz, do czego służą znaczniki meta http i meta name. Kliknij po prostu znaczek "Sekcja Meta" dostępny na pasku opcji, a będziesz mógł wprowadzić własne metadane do kodu strony. Uwaga - sekcja meta programu Zajączek informuje nas, że do tworzenia strony wykorzystane zostaną znaczniki języka HTML w wersji 3.2. Tymczasem najnowsza wersja tego języka oznaczona jest już numerem 4.01. Zauważ, że znaczniki pisane są wielkimi literami - dla wersji języka HTML nie ma to znaczenia, jednak gdybyś chciał tworzyć stronę nadającą się do przeglądania na urządzeniu przenośnym, musiałbyś utworzyć stronę z wymogami XHTML, czyli wszelkie znaczniki pisać małymi literami.

Pomiędzy znacznikami <head></head> znajduje się niewidoczny w przeglądarce nagłówek strony (oprócz znaczników <title></title>, pomiędzy którymi trzeba umieścić tytuł strony, widoczny na pasku nagłówkowym przeglądarki). Treść strony będziemy dodawać pomiędzy znacznikami <body></body>.

Wskazówka - dodając do strony nowe elementy możesz jednocześnie uczyć się, jak pisać kod ręcznie, co jest nieocenioną umiejętnością.