Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Wstęp

Email Drukuj PDF

Internet stał się dobrem powszechnym. O ile kiedyś uzyskanie połączenia z globalną Siecią było celem samym w sobie, osiągalnym tylko dla nielicznych szczęśliwców, dzisiaj traktuje się to jako rzecz oczywistą. Nie istnieje już podział na użytkowników komputerów korzystających z dobrodziejstw Internetu oraz tych, którzy mogą o tym wyłącznie pomarzyć; zastąpił go podział na „odbiorców”, którzy w Internecie tylko szukają informacji i niejako „konsumują” ją, oraz na „twórców”, którzy chcą i potrafią tworzyć nowe strony WWW i przekazywać swoją wiedzę innym.

No właśnie, chcą i potrafią. Na przeszkodzie staje zazwyczaj nieznajomość języka XHTML, służącego do określania struktury i wyglądu strony. Istnieją oczywiście dziesiątki programów umożliwiających stworzenie własnej strony w sposób niewiele różniący się od tworzenia elektronicznego dokumentu za pomocą programów takich jak Microsoft Word, jednak tworzenie stron WWW za ich pomocą, przy braku znajomości choćby podstaw języka XHTML — choć możliwe — można porównać z pracą mechanika samochodowego, który potrafi jedynie wypolerować karoserię i wymienić filtr powietrza, nie mając przy tym pojęcia, po co w ogóle to robi.

Kurs, który właśnie rozpoczynasz, ma na celu zaznajomienie Cię z podstawami języków programowania XHTML i CSS. Pierwszy z nich opisuje strukturę logiczną strony i jej treść; drugi uzupełnia te informacje o opis formy graficznej tworzonej strony WWW. Do nauki nie będziesz potrzebował żadnych wymyślnych programów — wystarczy komputer osobisty pracujący pod kontrolą dowolnego systemu operacyjnego, wyposażony w nowoczesną przeglądarkę WWW. Znajomość opisanych tutaj podstaw zdecydowanie ułatwi Ci ewentualną naukę bardziej skomplikowanych programów służących do wizualnego — metodą „wskaż i kliknij” — tworzenia potężnych serwisów internetowych. Kto wie, może nawet docenisz najwyższą jakość tworzonego ręcznie kodu XHTML i pozostaniesz wierny prymitywnym i wymagającym obszernej wiedzy, lecz dającym często nieosiągalne w inny sposób rezultaty metodom?

Pisząc, starałem się używać możliwie najprostszego języka oraz dokładnie opisywać kolejne kroki, by nawet początkujący użytkownicy komputera nie bali się spróbować swoich sił w tworzeniu stron WWW. Jeśli stopień rozdrobnienia niektórych ćwiczeń na dokładnie opisane punkty wyda Ci się śmieszny, pamiętaj, że wielu użytkowników komputera nie dysponuje taką wiedzą jak Ty.

Czym jest XHTML?

Skrót XHTML pochodzi od słów Extended Hypertext Markup Language (rozszerzony język znakowania hipertekstu). Język XHTML jest podstawą każdej strony WWW niezależnie od tego, w jaki sposób powstała; określa on strukturę strony (podział na obszary, tabele i obrazy) oraz jej wygląd.

Plik zawierający kod XHTML (tak zwany plik XHTML) jest zwyczajnym plikiem tekstowym. Od innych plików tekstowych na dysku twardym różni się tylko rozszerzeniem nazwy pliku, przybierającym postać .html. Tekstowa postać pliku XHTML stanowi jego największy atut, pozwala bowiem modyfikować jego zawartość za pomocą najprostszych narzędzi — choćby takich, jak zawarty standardowo w systemie Windows Notatnik. Dopiero przeglądarka WWW dokonuje przeobrażenia tekstowego opisu wyglądu i zawartości strony WWW, zawartego w pliku XHTML, na postać graficzną.

Wskazówka
Skrót WWW (czasem też zapisywany jako W3) pochodzi od słów World Wide Web (pajęczyna o światowym zasięgu). Sieć WWW jest pojęciem abstrakcyjnym: składają się na nią strony WWW dostępne na serwerach HTTP całego świata. Skrót HTTP z kolei pochodzi od słów Hypertext Transfer Protocol (protokół transportowy hipertekstu) i oznacza język, za pomocą którego serwery przechowujące strony WWW porozumiewają się z przeglądarkami WWW zainstalowanymi na komputerach czytelników stron.

Plik XHTML zawiera szereg znaczników składających się na elementy. Znacznik to fragment tekstu zamknięty wewnątrz znaków nawiasów ostrokątnych (<) oraz (>). Znacznikami są na przykład:

<a>

<p>

<img>

<area>

Elementy języka XHTML składają się zawsze z dwóch znaczników: znacznika otwierającego oraz znacznika zamykającego. Znacznik zamykający różni się od otwierającego tym, że zaczyna się nie samym znakiem <, a parą znaków </. Znacznikami zamykającymi są na przykład:

</a>

</p>

</img>

</area>

W kodzie XHTML pojawiać się mogą wyłącznie pełne elementy, składające się z dwóch znaczników (otwierającego i zamykającego), między którymi może być zawarty tekst lub inne, zagnieżdżone elementy XHTML. Ponieważ pierwsze wersje standardu (nazywanego wtedy jeszcze wyłącznie „HTML”) nie wprowadzały takiego ograniczenia wobec wszystkich znaczników (na przykład znacznik <img> można było umieszczać bez znacznika zamykającego </img>), niektóre elementy stron zapisuje się w formie jednoznacznikowej (na przykład: <img />). Ukośnik umieszczony przed znakiem > zamykającym znacznik informuje, że znacznik ten jednocześnie otwiera i zamyka element. W ten sposób rozwiązano dwa problemy: zachowano zgodność ze starszymi przeglądarkami WWW, które mogłyby nieprawidłowo wyświetlać strony zawierające „niepotrzebne” (według starszych wersji standardu) znaczniki zamykające niektóre elementy, a zarazem narzucono jeden wspólny standard wymuszający zamykanie wszystkich bez wyjątku elementów XHTML.

Jak wygląda znacznik XHTML

Wiesz już, jak wygląda najprostszy znacznik XHTML. Znaczniki XHTML poza samą, zamkniętą między znakami nawiasów ostrokątnych, nazwą mogą zawierać jeszcze dodatkowe informacje — tak zwane atrybuty:

<nazwa atrybut1="wartość1" atrybut2="wartość2">.....</nazwa>

<nazwa atrybut1="wartość1" atrybut2="wartość2" />

Atrybuty oddzielane są od nazwy i pozostałych atrybutów znakami spacji, zaś wartość atrybutu zapisywana jest zaraz za nazwą atrybutu, jest oddzielona od niej znakiem równości i ujęta w znaki cudzysłowu:

atrybut="wartość"

Nazwy znaczników i atrybutów oraz wartości atrybutów należy zapisywać wielkimi literami. Wcześniejsze wersje standardu dopuszczały pełną dowolność w tym zakresie, a częstą praktyką było pisanie kodu HTML wielkimi literami, zaciemniającymi kod i utrudniającymi odszukanie tekstu. Norma XHTML na szczęście narzuca konieczność zapisywania kodu małymi literami.

Wskazówka
Oczywiście zapisanie kodu wielkimi literami nie uniemożliwi prawidłowego wyświetlenia strony WWW — będzie ona jednak niezgodna z normami i w efekcie nie będzie możliwe zweryfikowanie poprawności kodu. Jeśli ma się zatem już doświadczenie w tworzeniu stron WWW, warto odłożyć na bok stare przyzwyczajenia i zmusić się jednak do korzystania z poprawnego zapisu małymi literami.

Wewnątrz elementu XHTML — a więc pomiędzy znacznikiem otwierającym i zamykającym dany element — znajdować się może tekst treści tego elementu (jeśli dany element reprezentuje na przykład akapit tekstu lub komórkę tabeli) lub dowolna liczba innych elementów języka XHTML:

<p>Treść akapitu <b>pogrubiona</b> i <i>pochylona</i></p>

Bezwzględnie należy pamiętać o tym, by elementy nie przeplatały się, to znaczy, by były zamykane w kolejności odwrotnej do kolejności ich otwierania:

DOBRZE: <b><i>....</i></b>

ŹLE:    <b><i>....</b></i>

Pewne zamieszanie wprowadził do terminologii języka XHTML mechanizm kaskadowych arkuszy stylu (CSS), którego będziesz używać podczas definiowania wyglądu elementów Twoich stron WWW. Opis stylu elementu również zapisuje się jako ciąg atrybutów i odpowiadających im wartości, składnia takiego zapisu jest jednak zupełnie inna:

atrybut1: wartość1; atrybut2: wartość2;

Tego typu atrybuty będę nazywać w ramach tego kursu — dla odróżnienia — atrybutami stylu. Może Ci się to wydawać zagmatwane, jednak zaręczam, że przyzwyczaisz się do tego, a może wręcz przestaniesz zwracać uwagę na podobieństwo obu nazw i zaczniesz doskonale odróżniać oba sposoby zapisu.

Wymagane oprogramowanie i sprzęt

Olbrzymią zaletą języka XHTML jest jego oszczędność. Opracowywanie i oglądanie stron WWW nie wymaga posiadania najnowszego sprzętu i najbardziej skomplikowanego oprogramowania; nawet jeśli Twój komputer pochodzi sprzed pięciu lat, najprawdopodobniej bez trudu poradzi sobie z tymi zadaniami. Oczywiście im szybszym komputerem dysponujesz, tym wygodniejsza i wydajniejsza będzie praca.

Równie obojętne są rodzaj i wersja używanego przez Ciebie systemu operacyjnego. Wszystkie ćwiczenia składające się na poniższy kurs można wykonać na komputerach pracujących pod kontrolą systemów operacyjnych z rodziny Microsoft Windows oraz zgodnego z nimi oprogramowania, wbudowanego w sam system operacyjny lub dostępnego — za darmo — w Internecie:

  • prostego systemowego edytora tekstu Notatnik,

  • edytora kodu HTML Webber,

  • przeglądarki plików graficznych IrfanView.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15408549