Kurs XHTML/HTML/CSS: Podstawy, czyli pierwsza strona WWW w 15 minut...

ZALOGUJ SIĘ

KURSY, DOKUMENTACJE

Własne:
• XHTML/CSS
• JavaScript
• ActionScript
• WML, RSS, SSI

Pozostałe:
• PHP
• MySQL
• Java API
• więcej...

Kurs XHTML: 1.1, 1.0 / HTML: 4.01, 4.0, 3.2, 3.0, 2.0 / CSS: 2.1, 2.0, 1.0 z przykładami

[Start] • [Elementy XHTML/HTML] • [Atrybuty XHTML/HTML] • [Style CSS]
[0] [A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]

Podstawy, czyli pierwsza strona WWW w 15 minut...

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

Aktualnie obowiązującym językiem służącym do tworzenia stron WWW jest język XHTML w wersji 1.1. Zastąpił on dotychczas stosowany język HTML. Oba języki są bardzo podobne do siebie, często oba określa się wciąż słowem HTML. Język XHTML to po prostu nowsza, aktualnie zalecana wersja języka HTML. Nie jest ani trudniejszy ani bardziej skomplikowany niż HTML, choć występuje między nimi kilka różnic, o których możesz przeczytać w osobnym artykule. Ideałem jest gdy zaczniesz się uczyć od razu wersji XHTML 1.1, czyli języka, który ma przyszłość.

Aby wprawnie posługiwać się językiem XHTML niezbędna jest praktyka. Dwie takie same strony można wykonać na bardzo wiele sposobów, więc tylko doświadczony webmaster będzie w stanie stworzyć je lepiej, szybciej, tak aby dobrze prezentowały się w każdej przeglądarce i były proste do modyfikowania. 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, np. Opera, FireFox, Internet Explorer lub inna. Stronę musisz zapisać w zwykłym pliku tekstowym i odpowiednio ją 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 XHTML/HTML. Każdy ma swój ulubiony edytor tekstowy, polecam rewelacyjny PSPad (dostępny bezpłatnie).

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

W nazwach stron ważna jest wielkość liter - najlepiej stosuj tylko małe litery, koniecznie 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. %^#$@). Nie stosuj też spacji (odstępów). Lepiej dać 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 XHTML, a nie zwykłym tekstem. W dodatku napisanym z polskimi znakami w standardzie ISO-8859-2. Warto też nadać stronie tytuł.

Język XHTML 1.1 używany jest w jednej, ścisłej postaci. Poprzednie wersje języka (XHTML 1.0, HTML 4.01 i HTML 4.0) były używane w trzech odmianach. Wersja Strict (ścisła) nie pozwalała na stosowanie poleceń wycofanych lub nietypowych. Wersja Transitional (przejściowa) dopuszczała stosowanie obowiązujących oraz niezalecanych poleceń. Wersja Frameset (ramkowa) dopuszczała stosowanie ramek, które w standardzie XHTML 1.1 nie występują.

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

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<title>tytuł strony</title>
</head>
<body>
 
  <p>
  Moja pierwsza strona WWW!
  </p>
 
</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 (np. wykorzystujące ramki w starszej wersji XHTML/HTML), ale dla większości wszystkich polskich witryn w Internecie wspomniana konstrukcja jest standardem.

Pierwsza linijka informuje przeglądarkę, że strona jest zgodna z językiem XML kodowanym w standardzie ISO-8859-2. !DOCTYPE określa wariant języka XHTML (XHTML 1.1 jest obecnie standardem). Następnie informujemy przeglądarkę, że jest to dokument XHTML 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 ponownie 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ą pierwszą stronę...

Kilka zasad

Większość elementów XHTML 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 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> lub ewentualnie <polecenie />, czyli forma zamknięcia elementów, które w starszym HTMLu nie miały pary, np. <br />. Omówienie wszystkich poleceń znajdziesz w kursie.

Elementy XHTML 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 elementu a dodasz atrybut href określający adres innej strony. W praktyce wygląda to następująco:

<a href="http://algorytmy.pl/">odnośnik do algorytmy.pl</a>

Polecenia i atrybuty muszą być pisane małymi literami. Wymaga tego język XHTML. W niezalecanym już języku HTML 4.01 i we wcześniejszych, wielkość znaków nie miała znaczenia. Poniższy zapis w XHTML jest błędny, choć w HTML jest poprawny.

<a HrEf="http://algorytmy.pl/">Odwiedź algorytmy.pl</a>

Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, jaki 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 ustalając od razu wymiary obrazka (atrybut width i height) oraz opis alternatywny (atrybut alt)...

<img src="/g/logo.gif" width="120" height="60" alt="logo serwisu" />

kamyczki

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 chcesz mieć "klikalny" obrazek, który jest odnośnikiem do innego serwisu? Połączmy więc dotychczasową wiedzę:

<a href="http://algorytmy.pl"><img 
src="/g/logo.gif" width="120" height="60" 
alt="algorytmy.pl" border="0" /></a>

Nie jest to skomplikowane, choć pojawił się kolejny atrybut: border="0" powoduje, że znika ramka otaczająca obrazek (oznaczająca, że obrazek jest odnośnikiem). Nie chcę ramki, bo szpeci logo - dlatego prawie zawsze element img w odnośnikach ma wyłączoną ramkę.

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

<i>kilka <b>przykładowych</i> wyrazów</b>

Element i definiuje pochylenie, ale zanim został on zamknięty, otworzyłem element b (pogrubienie), a następnie zamknąłem i 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 może pokazać efekt dobrze. Oto prawidłowa kolejność:

<i>kilka</i> <b><i>przykładowych</i> wyrazów</b>

To nic, że trzeba było użyć kilka razy i, 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 tworząc stronę.

Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) określa polecenie p. 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 kilkanaście 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 XHTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez jakąś przeglądarkę. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku, przeglądać w telefonach komórkowych. O wszystkich potrzebach użytkownika musisz pomyśleć!

Jeżeli chcesz poznać wszystkie elementy i atrybuty języka XHTML, 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 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!