Wstęp

Jeśli wiesz już co to jest HTML i znasz jego podstawy, zapewne nie będziesz czytał wstępu, ale zapewniam Cię, że warto 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. 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, więc jeśli ktoś chce przy minimalnym wysiłku zrobić stronę to od razu odsyłam go do działu "Edytory HTML". Opisane są w nim edytory WYSIWYG przy pomocy, których można zrobić dobrą stronę bez znajomości HTMl-a. W tym kursie oprócz poleceń języka HTML przedstawię również sposoby przygotowania grafiki, pod kątem ich publikacji w Internecie oraz porady dotyczące kompozycji stron. Opiszę także różnice w interpretacji kodu, występujące pomiędzy dwoma najpopularniejszymi przeglądarkami jakimi są Internet Explorer" i "Sylaba Komunikator". Oczywiście wszystko zilustruje przykładami. Wszystkie przykładowe fragmenty kodu zostały wyróżnione czcionką "Courier New CE" dla lepszej czytelności.

Jeśli ktoś dopiero zaczyna, to od razu wyjaśniam, że do stworzenia własnej witryny nie potrzeba specjalnego oprogramowania, nakładów finansowych lub potężnego komputera. Wystarczy tylko 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. Oczywiście trzeba również chcieć, bo dla chcącego nic trudnego :) 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 HyperText 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 (z ang. 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 opublikowałbyś swoją stronę w Internecie, to napisz do mnie. 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 tworzenia 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. 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. Kolejnym językiem jest Java - przy pomocy tego języka można stworzyć aplety, czyli programy wywoływane z poziomu strony. Dużo osób myli języki Java i Java Script myśląc, że Java Script, to odmiana Javy. W rzeczywistości są to dwa odrębne języki. Istnieją także skrypty CSS - Kaskadowe Arkusze Stylów pozwalające szybciej zmieniać wygląd strony oraz skrypty CGI i PHP. CGI służy przede wszystkim do tworzenia różnego rodzaju ankiet, formularzy. 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, gdziekolwiek byśmy jej nie otworzyli, w edytorze tekstu, przeglądarce, itd., zawsze będzie plikiem tekstowym zapisanym w formacie ASCII. 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, nie wymagające zamknięcia (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 "size" 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, grafiki 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>

Zobacz

W tym przypadku wyrazy "tekst" zostały wyróżnione tylko kursywą (znacznik <I>), a wyraz "słowo" został dodatkowo wyróżniony pogrubieniem (znacznik <B>). Przy zagnieżdżaniu tagów, należy przestrzegać zasady, 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>

Zobacz

Czytelny i przejrzysty kod

Oprócz znajomości poleceń HTML-a, należy się jeszcze nauczyć przestrzegania zasad dotyczących czytelności i przejrzystoś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 go pierwszy raz.

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. Jednak nie można przesadzać ponieważ każdy dodatkowy znak zwiększa fizyczną objętość pliku.

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

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. 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.

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, a tworzenie stron jest niezwykle intuicyjne. 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, jest też często mało przejrzysty, a pisząc w edytorze tekstowym mamy pełną kontrolę nad kodem. Zbędne polecenia wydłużają czas pobierania stron z Sieci, a poza tym porządne edytory WYSIWYG mają stosunkowo duże wymagania sprzętowe. Coraz częściej można spotkać edytory typu WYSIWYG zintegrowane z edytorem kodu.

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 89 złotych. Inne dobre, polskie edytory to: bezpłatna "Kicia" oraz "Tiger" w cenie 55 PLN. Oprócz tego istnieją także inne:

ezHTML

Hedit

HTMLowiec

WebPager Xpress

Xsite

MS FrontPage - dołączany do przeglądarki "Internet Explorer"

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

Zagraniczne:

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 WYSIWYG, ale jest on najmniej cenionym edytorem HTML pod tym względem).

Kolejna część o strukturze dokumentu.

Autor :
Tygrys
tiger_mail@poczta.onet.pl