Jeśli wiesz już co to jest HTML i znasz jego podstawy, zapewne nie będziesz czytał wstępu, ale zapewniam Cię, że lepiej go przeczytać. Mam też prośbę dla wszystkich znających HTML–a, a czytających ten kurs. Jeśli zauważycie jakieś błędy lub nieścisłości (nawet literówki i orty), napiszcie do mnie. Mój adres jest tutaj albo tu. Postaram się poprawić błędy. Należy również pamiętać, że kursy programowania przekazują tylko koncepcję języka, jego słowa kluczowe i przykłady zastosowań. Aby opanować język do perfekcji należy, ćwiczyć, ćwiczyć i jeszcze raz ćwiczyć. Wprawdzie HTML jest bardzo prosty, ale dotyczy to również jego (w końcu to też jest język programowania :) Ten kurs dokładnie opisuje tworzenie stron przy pomocy czystego HTML–a i prostego edytora tekstu.

Posiadanie strony WWW to dobry sposób na wyrażenie własnych poglądów, rozwój zainteresowań czy poznanie ciekawych ludzi. Do stworzenia własnej witryny nie potrzeba specjalnego oprogramowania, nakładów finansowych lub potężnego komputera. Wystarczy znać polecenia języka HTML, których nauczysz się czytając ten kurs oraz posiadać choćby najprostszy edytor tekstu, jakim jest Notatnik dołączany do sytemu Windows. Stworzenie własnej strony na pewno będzie źródłem osobistej satysfakcji lub sposobem zarabiania pieniędzy. Możliwe, że ktoś znając HTML-a będzie zarabiał, tworząc strony WWW lub komercyjny portal. Na pewno nie należy się zrażać pierwszymi niepowodzeniami, następnym razem na pewno się uda :)

Co to jest HTML?

HTML, to skrót od Hyper Text Markup Language. Jest to uniwersalny język opisu dokumentów, służący do przetwarzania informacji, którą chcemy przekazać, na to, co przeglądarka potrafi odczytać. Pozwala on na formatowanie tekstu, dołączanie grafiki, dźwięków lub klipów wideo oraz nadaje dokumentowi logiczną całość. Ponadto dokumenty HTML mogą zawierać odnośniki (links) do dokumentów WWW lub innych plików. Opracowanie tego języka umożliwiło wymianę informacji pomiędzy komputerami i systemami operacyjnymi różnych typów. W porównaniu z innymi językami programowania, HTML jest bardzo prosty. Nie zawiera skomplikowanych struktur czy instrukcji, więc powinieneś szybko opanować ten język i tworzyć wspaniałe strony. Jeśli po przeczytaniu tego kursu chciałbyś opublikować swoją stronę w Internecie, to napisz do mnie lub do mnie, gdyby poprzednie konto nie działało :) Zobaczymy czego Cię nauczyłem :) Oczywiście w każdej chwili możesz napisać jeśli czegoś nie rozumiesz.

Historia HTML-a

Pierwsze prace nad systemem prezentowania i organizowania dużych ilości danych rozpoczęła firma IBM w końcu lat 60. Efektem ich pracy był pierwszy język umożliwiający formatowanie i wyszukiwanie danych w dużych ilościach zbiorów tekstowych. Nazwano go GML (General Markup Language). W 1978 roku na podstawie GML stworzono SGML (Standard Generalized Markup Language). Pozwalał on na tworzenie uniwersalnych zestawów symboli opisujących dokumenty, więc okazał się bardziej przydatny. SGML to metajęzyk, czyli język za pomocą, którego definiowane są nowe języki podrzędne. Dopiero takie języki przeznaczone są do otworzenia dokumentów. Na podstawie SGML zespół laboratoriów badawczych w CERN, w Szwajcarii opracował HTML–a na potrzeby publikowania materiałów w World Wide Web (WWW). Z upływem czasu dynamika rozwoju HTML–a spowodowała powołanie do życia międzynarodowego forum, sprawującego nadzór nad rozwojem Sieci. W 1994 roku powstało W3C (World Wide Web Consortium) – założone i finansowane przez czołowych producentów branży informatycznej i telekomunikacyjnej, którego głównym zadaniem stało się kształtowanie obrazu Internetu poprzez tworzenie i standaryzowanie najnowszych rozwiązań technicznych. W rzeczywistości W3C nie jest jedynie organem opiniotwórczym, ale zajmuje się także rozwijaniem dotychczasowych i tworzeniem nowych standardów dla WWW.

Rozszerzenia HTML-a

Jak już mówiłem HTML jest bardzo prosty, więc posiada wiele "rozszerzeń", takich jak DHTML i XHTML. Ten pierwszy to dynamiczny HTML – jest to po prostu zestaw nowych poleceń podobnych do tych z HTML–a. XHTML (Extensible HTML) powstał w wyniku zaimplementowania poleceń HTML–a do XML–a (Extensible Markup Language) – dającego znacznie większe możliwości przetwarzania i prezentowania danych. Nowy standard umożliwi większą swobodę w wykorzystywaniu danych dostępu do Sieci z telefonów komórkowych. Jest również akceptowany przez istniejące przeglądarki HTML–a. Kolejnym językiem jest Java Script – język ten służy do pisania skryptów wewnątrz strony, przypomina bardziej złożone języki programowania, np. C, Pascal. Trochę innym językiem jest Java – przy pomocy tego języka można stworzyć aplety, czyli programy wywoływane z poziomu strony. Istnieją także skrypty CSS – Kaskadowe Arkusze Stylów oraz skrypty CGI i PHP oraz ASP. Szczegółowo omówię te języki w osobnym kursie. Dużo kursów znajdziesz również w Sieci. Wystarczy podać wyszukiwarce nazwę jakiegoś języka, a otrzymasz mnóstwo odnośników do stron zawierających kursy programowania.

Znaczniki

W tym momencie zaczyna się teoria, więc jeżeli czegoś nie rozumiesz, to powstrzymaj się z pytaniami, aż dojdziesz do działu z ćwiczeniami praktycznymi. Jeśli po przeczytaniu poszczególnych działów nadal coś będzie niezrozumiałe, to możesz do mnie napisać.

Każda strona WWW zawsze będzie plikiem tekstowym zapisanym w formacie ASCII, gdziekolwiek byśmy jej nie otworzyli, w edytorze tekstu, przeglądarce, itd. Polecenia języka HTML to "znaczniki" (tags), definiujące sposób wyświetlania informacji przez przeglądarkę i nadające mu pewne cechy lub właściwości. Znaczniki to inaczej słowa kluczowe. Tagi są umieszczane pomiędzy nawiasami ostrymi "<" i ">". Znaczniki występują zazwyczaj parami, znacznik otwierający i znacznik zamykający charakteryzuje to samo słowo, z tym że przed słowem kluczowym znacznika zamykającego, ale po nawiasie ostrym znajduje się ukośnik "/", slash z angielskiego (np. <TITLE> i </TITLE>). Istnieją też znaczniki występujące pojedynczo (np. <BR>).

Atrybuty i ich wartości

Większość znaczników może (powinna!) być wzbogacana o określone dla danego znacznika, atrybuty. Atrybuty umożliwiają precyzyjne definiowanie sposobów wyświetlania elementów przez przeglądarkę. Są to rozszerzenia znaczników, wpisywane wewnątrz nawiasów, po słowie kluczowym. Wewnątrz jednego znacznika może wystąpić kilka atrybutów. Oddzielamy je od siebie pojedynczą spacją. Prawie do każdego atrybutu można (czytaj: należy!) przypisać wartości, jakie ma przyjmować dany atrybut (np. w skład znacznika <FONT> wchodzi atrybut "size", któremu można przypisać wartość np. 2 lub 5). Niektóre wartości można wybrać spośród ściśle określonej grupy, inne będą ignorowane (np. atrybut ALIGN posiada tylko cztery wartości: "left", "right", "center" i "justify"). Innym atrybutom można przypisać bardziej obszerny zbiór wartości, ale zamknięty w ramach jednego typu (np. liczba całkowita). Wartości przypisujemy do atrybutu, stawiając po nim znak równości "=" i wartość ujętą w cudzysłów. W przypadku, gdy wartość posiada jeden człon (jedno słowo lub jedna cyfra) nie ma różnicy czy wartość ujmiemy w cudzysłów czy nie. Jednak, chociażby dla zasady lepiej to zrobić.

Zagnieżdżanie znaczników

Często te same fragmenty tekstu są modyfikowane przy użyciu większej liczby znaczników. Na przykład, gdy zależy nam na pogrubieniu jednego słowa, znajdującego się w tekście, który został już wcześniej wyróżniony np. kursywą można wprowadzać znaczniki dodatkowe. Będzie to wyglądało tak:

<I>tekst tekst tekst <B>słowo</B> tekst tekst tekst</I>

W tym przypadku wyrazy "tekst" zostały wyróżnione tylko kursywą (znacznik <I>), a wyraz "słowo" został dodatkowo wyróżniony pogrubieniem (znacznik <B>). Należy wówczas przestrzegać zasady zagnieżdżania znaczników, polegającej na zamykaniu ich w odwrotnej kolejności, niż były one otwierane. Przykład powyżej jest napisany prawidłowo, ponieważ znacznik <I> został otworzony jako pierwszy i zamknięty jako ostatni. Poniższy fragment kodu jest nieprawidłowy i może spowodować błędy w wyświetlaniu:

<I>tekst tekst tekst <B>słowo tekst tekst tekst</I></B>

Czytelny i przejrzysty kod

Oprócz znajomości poleceń HTML–a, należy się jeszcze nauczyć przestrzegania zasad dotyczących czytelnści kodu. Każdy programista piszący w jakimkolwiek języku stara się, aby kod strony czy programu był przejrzysty i czytelny nawet dla osoby widzącej pierwszy raz ten kod.

Dla HTML-a znalazłem dwie zasady:

Pierwsza: zaleca się stosowanie dużych liter w przypadku znaczników, a dla atrybutów i wartości - małych liter. Praktycznie nie istnieje różnica jak będziemy pisać – małymi czy dużymi literami. I tak, i tak przeglądarka zinterpretuje je poprawnie.

Druga zasada: w sumie kod można napisać w jednej linijce bez znaku powrotu karetki (czyli bez naciskania klawisza Enter), ale wtedy kod będzie mało przejrzysty. Należy więc stosując spacje, tabulatory i znaki powrotu karetki, zrobić odstępy poszczególnymi znacznikami.

Dzięki tym dwóm zasadom kod źródłowy strony stanie się czytelny i przejrzysty. Jak je stosować, nauczysz się czytając ten poradnik. Możesz też przejrzeć kod tej strony wybierając polecenie "Źródło" z menu "Widok".

Edytory HTML

Istnieją specjalne programy mogące przyśpieszyć i zautomatyzować proces tworzenia stron, ale posiadają również wady. Omówię tutaj sposoby tworzenia stron przy pomocy edytorów HTML–a i przedstawię najpopularniejsze z nich. Wiesz już, że strony można przygotować nawet przy pomocy Notatnika, ale przy dużej licznie stron o skomplikowanej budowie może to być kłopotliwe i czasochłonne.

Pierwszym typem edytorów, to edytory tekstowe HTML. Używając takowych edytorów, trzeba znać HTML–a, ale praca jest już przyjemniejsza i szybsza. Programy takie potrafią wyróżniać kolorem i uzupełniać fragmenty kodu, często posiadają kreatory tabel lub ramek oraz gotowe zestawy skryptów lub szablonów stron do wykorzystania. Niektóre edytory sprawdzają także poprawność kodu oraz poprawność tekstów pod względem gramatyki i ortografii. Pozwalają również obejrzeć stronę we wbudowanej w program lub zainstalowanej w systemie przeglądarce.

Drugim rodzajem edytorów są programy WYSIWYG (What You See Is What You Get, czyli Otrzymujesz To Co Widzisz, jest to oprogramowanie zapewniające zgodność podglądu dokumentu w trybie edycji z wersją docelową np. wydrukiem lub stroną oglądaną w przeglądarce). Tworzenie stron w edytorach wizualnych zabiera mało czasu i sprowadza się do metody przeciągnij–i–upuść, tekst formatujemy podobnie jak w popularnym Wordzie. Korzystając z takich edytorów nie trzeba znać HTML–a. Niektóre wyposażone są również w edytory kodu, dzięki którym można dokonywać indywidualnych poprawek. Oczywiście zawierają wszystkie udogodnienia, takie jak sprawdzanie pisowni, kreatory ramek, tabel, itp. Edytory wizualne są dobre dla początkujących lub tych, którzy chcą zrobić dobrą stronę przy minimalnym wysiłku. Jednak należy pamiętać, że takie programy dodają do kodu strony dużo zbędnych rzeczy, a pisząc w edytorze tekstowym mamy pełną kontrolę nad kodem. Zbędne polecenia wydłużają czas pobierania stron z Sieci, poza tym porządne edytory WYSIWYG mają stosunkowo duże wymagania sprzętowe.

Do najlepszych polskich edytorów zaliczany jest "Pajączek 2000". Umożliwia on tworzenie stron w trybie tekstowym, jak i wizualnym ("Pajączek Light"). Posiada przejrzysty interfejs i wiele opcji wspomagających tworzenie stron. Między innymi są to: obsługa polskiego standardu kodowania znaków ISO (omówię go później), sprawdzanie pisowni, automatyczne uzupełnianie i kolorowanie kodu. Zawiera również kreatory tabel, ramek i formularzy. Aplikację można zamówić na stronie www.creamsoft.com.pl w cenie 85 złotych. Inne dobre, polskie edytory to: bezpłatna "Kicia" oraz "Tiger" w cenie 55 PLN. Oprócz tego istnieją także inne dobre i polskie edytory:

Hedit

HTMLowiec

WebPager Xpress

Xsite

MS FrontPage Express – dołączany do przeglądarki "Internet Explorer"

Sylaba Kompozytor – dołączony do przeglądarki "Sylab Komunikator".

Zagraniczne:

EasyHTML – 2,21 MB do pobrania stąd – polecam!

Web-O-Rama – 3,47 MB do ściągnięcia stąd

Arachnophilia 4.0

HotDog

Na rynku dostępnych jest także kilka pakietów przeznaczonych dla profesjonalnych projektantów serwisów i przygotowanych przez czołowych producentów oprogramowania. Łączą w sobie możliwości oferowane przez edytory tekstowe i wizualne. Wyposażone są również w opcje pozwalające zarządzać całością serwisu. Do najpopularniejszych należą:

Adobe GoLive 5.0

Macromedia Dreamweaver 3

Microsoft FrontPage 2000

Ogromną biblioteką narzędzi do tworzenia witryn WWW jest Internet. Wystarczy w odpowiedni polu wyszukiwarki wpisać "HTML editors" lub "Web tools", a otrzymamy setki odsyłaczy do stron oferujących aplikacje do edycji stron WWW.

Do nauki najlepiej korzystać z Notatnika lub Worda (w Wordzie można też tworzyć strony w trybie WYSIWIG, ale jest on najmniej cenionym edytorem HTML pod tym względem) albo zainstalować jeden z programów, które można siciągnąć z tej strony.

W następnej części struktura dokumentu.