Web.Reporter.pl Pełny kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami
autor: Dariusz Majgier • ostatnia modyfikacja: 2002.06.10 • wersja kursu: 1.1

[0-9]  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z 
[główne menu] - [elementy HTML] - [atrybuty HTML] - [style CSS] - [artykuły]
tabele • listy • formularze • multimedia • el. strukturalne • el. blokowe • el. liniowe

Moja pierwsza strona WWW

Tworzenie stron WWW jest zajęciem w miarę prostym i bardzo przyjemnym. Podstaw języka HTML można nauczyć się w kilka godzin, a dosłownie po chwili zbudować prostą witrynę. Trzeba tylko pamiętać o przestrzeganiu kilku podstawowych zasad.

Aby wprawnie posługiwać się językiem HTML niezbędna jest praktyka. Identyczną stronę można wykonać na bardzo wiele sposobów, więc tylko doświadczony webmaster będzie w stanie stworzyć ją lepiej, szybciej, tak aby dobrze prezentowała się w każdej przeglądarce. Polecam więc eksperymentowanie, testowanie, sprawdzanie efektów w różnych przeglądarkach i ciągłe podnoszenie swoich umiejętności.

Pierwsza strona

Aby tworzyć strony WWW nie musisz mieć dostępu do Internetu. Wystarczy przeglądarka stron WWW zainstalowana Twoim komputerze. Stronę musisz zapisać w zwykłym pliku tekstowym i odpowiednio go nazwać. Do pisania stron WWW nadaje się każdy, nawet najbardziej banalny edytor tekstowy - od prostego Notatnika w systemie Windows czy Pico w Unixie, aż do specjalistycznych edytorów HTML. Każdy ma swój ulubiony edytor, ale jeżeli nie możesz się zdecydować na wybór edytora, poznaj opinie innych użytkowników w rankingu edytorów HTML.

Dokument zawierający HTML powinien mieć rozszerzenie .html lub .htm - co sugeruje przeglądarce, ze to jest strona WWW. Przyjęło się, że główna strona serwisu ma zwykle nazwę index.html (czasem może się jednak nazywać inaczej). Pozostałe strony, do których można dotrzeć z index.html mogą mieć dowolne nazwy. Niech będą jednak czytelne i niezbyt długie.

W nazwach stron ważna jest wielkość liter - najlepiej stosować tylko małe litery bez polskich znaków. Strona Kontakt.html nie jest tą samą stroną co kontakt.html (zwróć uwagę na wielkość pierwszej litery K). Nie powinno się też używać polskich znaków w nazwach stron, uważaj też na znaki specjalne (np. %^&#$@). Lepiej nadać nazwę: pokarm-dla-zolwia.html niż pokarm dla żółwia.html.

Każda strona ma pewne elementy wspólne. Musisz poinformować przeglądarkę, że ma do czynienia z językiem HTML, a nie zwykłym tekstem. W dodatku napisanym z polskimi znakami w standardzie ISO8859-2. Warto też nadać stronie tytuł.

Oto szablon pojedynczej strony WWW, który można kopiować i modyfikować w zależności od dalszych potrzeb. Mając prostego "gotowca" szybko stworzymy dowolną inną stronę. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <META HTTP-EQUIV="content-type" 
    CONTENT="text/html; charset=ISO-8859-2">
  <TITLE>Tytul strony WWW</TITLE>
</HEAD>
<BODY>

  Moja pierwsza strona WWW!

</BODY>
</HTML>

Powyższy szablon to niezbędne minimum, więc powinien znajdować się w treści każdej strony WWW. Są także strony, których budowa może być inna, ale dla większości wszystkich witryn w Internecie wspomniana konstrukcja jest standardem.

!DOCTYPE określa wariant języka HTML (Transitional w wersji 4.0 jest stosowany najczęściej). Następnie informujemy przeglądarkę, że to jest dokument HTML umieszczając całą treść dokumentu w parze elementów: <HTML> i </HTML>. Każda strona ma nagłówek znajdujący się pomiędzy elementami <HEAD> i </HEAD>. Umieszczamy w nim tytuł strony w elementach <TITLE> i </TITLE> i informację o kodowaniu polskich znaków w ISO-8859-2. Po nagłówku znajduje się część, którą widzimy w oknie przeglądarki - określają ją elementy <BODY> i </BODY>. Tu znajduje się tekst, grafika, odnośniki, tabele i inne rzeczy.

Skopiuj zawartość do edytora tekstu, zapisz wszystko na dysku pod nazwą index.html i zobacz jak wygląda strona w przeglądarce. W zasadzie już masz swoją stronę...

Kilka zasad

Jak widzisz, większość elementów HTML to pary poleceń. Jest element otwierający i zamykający, np. tytuł został otoczony parą <TITLE> i </TITLE>. Dzięki temu przeglądarka wie, co ma wyświetlić na belce przeglądarki jako tytuł strony. Jeżeli w treści strony jakiś wyraz otoczysz parą elementów <B> i </B> zostanie on pogrubiony (B to skrót od angielskiego słowa Bold). Znając pary poleceń możesz z tekstem robić dowolne rzeczy. Tak na prawdę nie musisz uczyć się par - wystarczy pamiętać nazwę polecenia, bo konstrukcja jest zwykle taka sama: <POLECENIE> ... </POLECENIE>.

Polecenia mogą mieć jeszcze atrybuty. Oznacza to, że możesz zmieniać właściwości tych poleceń. Jeżeli chcesz utworzyć połączenie z inną stroną WWW wystarczy, że do polecenia A dodasz atrybut href określający adres innej strony. W praktyce wygląda to następująco: 

<A href="http://web.reporter.pl/">odnośnik do WebReportera</A>

Jeżeli dodasz jeszcze atrybut target, możesz określić okno, w którym otwarta zostanie strona WWW. Niech to będzie nowe okno przeglądarki, a więc target będzie miał wartość _blank (blank to czyste, nowe okno). 

<A href="http://reporter.pl/" target="_blank">Zobacz Reporter.pl</A>

Zobacz Reporter.pl

Polecenia i atrybuty mogą być pisane dużymi lub małymi literami, nie ma to znaczenia. Wyłącznie na potrzeby kursu stosuję duże litery dla elementów (poleceń), a małe litery dla atrybutów ponieważ taki sposób jest bardziej czytelny. Ale równie dobrze powyższy odnośnik mógłby zostać zapisany tak: 

<a HrEf="http://reporter.pl/" tarGET="_BLaNk">Zobacz Reporter.pl</a>

Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, który obrazek ma wstawić. Element IMG odpowiada za obrazki (IMG to skrót od słowa Image). Ma wiele atrybutów, a jednym z nich jest src (czyli source - źródło obrazka). Użyjmy ich więc... Niech dodatkowo obrazek będzie na środku strony (polecenie centrujące nazywa się CENTER). 

<CENTER>
  <IMG src="../p/logo.gif">
</CENTER>

I oto mamy obrazek. Pamiętaj jeszcze, że wartości atrybutów powinno się umieszczać w cudzysłowach. Dzięki temu przeglądarka może je prawidłowo zidentyfikować. Pewnie chczesz mieć "klikalny" obrazek, który jest odnośnikiem do innego serwisu? Połączmy więc dotychczasową wiedzę: 

<CENTER>
<A href="http://www.reporter.pl" target="_blank">
<IMG src="../p/logo.gif" width="120" height="60" border="0"></A>
</CENTER>

Nie jest to skomplikowane, choć pojawiły się kolejne atrybuty: width to szerokość obrazka, height określa wysokość, a border="0" powoduje, że znika ramka oznaczająca, że obrazek jest odnośnikiem. Nie chcę ramki, bo tylko szpeci obraz - dlatego prawie zawsze element IMG na stronach WWW ma wyłączoną ramkę...

Kolejna istotna zasada to kolejność otwierania i zamykania poleceń. Nie powinno się robić czegoś takiego: 

<S>kilka <B>przykładowych</S> wyrazów</B>

kilka przykładowych wyrazów

Element S definiuje przekreślenie, ale zanim został on zamknięty, otworzyłem element B (pogrubienie), a następnie zamknąłem S zamiast B. Są one założone "na krzyż". Wygląda to mało czytelnie i nie jest zgodne z regułami, pomimo tego, że przeglądarka pokazała efekt dobrze... Oto prawidłowa kolejność: 

<S>kilka</S> <B><S>przykładowych</S> wyrazów</B>

Wiem, że trzeba było użyć kilka razy S, ale opłaciło się. Przykład jest bardziej czytelny. W skomplikowanych dokumentach ma to ogromne znacznie. Dlatego podczas tworzenia strony zwracaj uwagę na jej czytelność. Nie przez przypadek wiele autorów robi charakterystyczne wcięcia w kodzie HTML. Ułatwia to odczytanie kodu po latach, gdy sam autor nie pamięta co miał na myśli robiąc stronę...

Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) rozpoczyna się od polecenia P (akurat on nie wymaga stosowania elementu zamykającego, choć warto go użyć). Te informacje wystarczają aby pokusić się o eksperymenty z Twoją pierwszą stroną WWW.

Podczas tworzenia stron WWW trafisz też na wiele niedogodności. Ponieważ istnieje kilka przeglądarek stron WWW, niektóre polecenia mogą w nich dawać odmienny efekt. Czasem strona z niezamkniętymi poleceniami lub tabelami (co jest oczywiście błędem) będzie wyglądała poprawnie pod Internet Explorerem. Zdarzy się i tak, że poprawna strona, wykorzystująca standard języka HTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez przeglądarkę Natscape. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku. O wszystkich potrzebach użytkownika musisz pomyśleć!

Jeżeli chcesz poznać wszystkie elementy i atrybuty języka HTML, wystarczy, że będziesz przeglądać kurs - wszędzie znajdziesz przykłady i omówienia - wystarczy je skopiować do szablonu aby sprawdzić jak działają. Dobrym treningiem jest też podglądanie innych witryn i sprawdzanie, jak autorzy poradzili sobie z wykonaniem różnych efektów. Ucząc się na przykładach poznasz wiele technik i metod tworzenia stron. Po jakimś czasie wypracujesz własne, najlepsze rozwiązania i wtedy inni będą mogli uczyć się od Ciebie...

Powodzenia!

• • •
Masz jakieś pytania? Podyskutuj na forum dyskusyjnym o HTML i CSS!