HTML - wstęp
Do przerabiania poszczególnych lekcji tego kursu będziesz potrzebował(a) edytor tekstu, który zapisuje pliki bez informacji o formatowaniu. Najprostszym programem tego typu jest np. Notatnik, który jest obecny w każdym systemie Windows. Można co prawda pisać stronę w edytorach pozwalających na formatowanie tekstu, jednakże przy zapisie należy przypilnować aby zapisywać dokument jako plik tekstowy bez formatowania, poprzez wybranie opcji "Zapisz jako" z menu i wybranie jako formatu zapisu "Plik tekstowy" lub coś w tym stylu.
Zalecam jednak zaopatrzenie się w jeden wielu dostępnych specjalizowanych edytorów HTML, gdyż ich stosowanie upraszcza znacznie tworzenie stron. Edytory tego typu posiadają wiele funkcji mających na celu wspomaganie tworzenia stron WWW, jak:
- automatyczna konwersja polskich znaków przy otwieraniu i zamykaniu plików (w Internecie stosowany jest powszechnie standard ISO-8859-2, zaś pod Windows standardem jest CP-1250)
- kolorowanie składni (np. znaczniki - na niebiesko, parametry znaczników - na brązowo, wpisywany tekst - na czarno, itd.)
- automatycznie "domykanie" wpisywanych znaczników
- znaczniki można wstawiać z użyciem skrótów klawiszowych, jak np. [Ctrl-B] - <b></b> (to jest para znaczników służąca do "pogrubienia" tekstu)
- typowe czynności, jak np. tworzenie szkieletu strony i wypełnianie sekcji <head>, jak również ustawianie parametrów znaczników, można wykonać z użyciem dostarczanych razem z programem kreatorów.
Pierwsza strona WWW
No ale koniec tego wstępu, przechodzimy do zaprezentowania przykładowej prostej strony WWW:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Moja Pierwsza Strona WWW</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
</head>
<body>
<p>Treść Mojej Pierwszej Strony WWW</p>
</body>
</html>
Powyższy kod HTML musisz przepisać dokładnie, i następnie zapisać go w pliku z rozszerzeniem .html lub .htm. Po otwarcie tego pliku w przeglądarce powinna ukazać się następująca strona: (kliknij tutaj). Nazwę pliku możesz wybrać dowolną, jednak w Internecie przyjęło się, iż strona główna serwisu powinna nazywać się index.html.
Zwróć też uwagę na wielkość znaków - większość serwerów WWW używa
systemu operacyjnego Unix (bądź Linux), w których to systemach wielkość
znaków w nazwach plików jest rozróżniana i pomyłka w wielkości liter w
nazwie spowoduje iż serwer nie będzie mógł znaleźć podaj strony. W
przypadku gdy korzystasz z serwera Microsoft IIS, domyślną nazwą strony
głównej może też być Default.htm, (jest to jednak zwykle zmieniane aby można było stosować index.html).
Przejdźmy jednak do analizy przedstawionego kodu.
Jak widać, język HTML składa się z tzw. tagów (zwanych także znacznikami), które zapisywane są w nawiasach ostrych (< i >).
Do każdego z tagów zwykle można podać pewne atrybuty (inaczej
parametry; nie zawsze jest to konieczne, bądź możliwe). Atrybut może
posiadać także przypisaną pewną wartość, bądź występować samodzielnie -
wtedy określa on uaktywnienie bądź nie pewnej cechy znacznika. Większość
tagów wymaga także "zamknięcia" przy użyciu taga o identycznej nazwie
jak tag otwierający, jednak poprzedzonej znakiem "/". Tagi zamykające
nigdy nie posiadają parametrów. Przykładowy tag wygląda następująco:
<tag parametr1="Wartość" parametr2 parametr3=15>fragment tekstu</tag>
Nazwy tagów oraz parametrów i ich wartości mogą być pisane zarówno
dużymi, jak i małymi literami - nie jest to istotne. Zalecane jest
jednak pisanie ich wyłącznie małymi literami, ze względu na fakt że
język XHTML (następca HTML) tego wymaga. Trzymanie się jednej wielkości
znaków upraszcza także później analizę kodu strony. Wartości parametrów
mogą być otoczone cudzysłowami lub apostrofami. Nie jest to wymagane
gdy wartość jest pojedynczą liczbą lub słowem, ale zalecam branie
wszystkich wartości w cudzysłów ze względu na fakt że kiedyś możesz
zechcieć zastosować XHTML - wtedy będzie prościej. Dodatkowo w XHTML
każdy parametr musi mieć przypisaną wartość (jeżeli któryś parametr nie
ma wartości określonej w standardzie HTML, wtedy przypisuje się jako
wartość nazwę tego parametru). Powyższy przykład po uwzględnieniu tych
zaleceń powinien zatem wyglądać następująco:
<tag parametr1="Wartość" parametr2="parametr2" parametr3="15">fragment tekstu</tag>
Warto też wiedzieć że wstawianie większej ilości dodatkowych odstępów
(np. spacji lub cudzysłowów) pomiędzy atrybutami nie ma znaczenia.
Podobnie traktowane są też znaki nowej linii (Enter'y). Powyższy
przykład może więc wyglądać też w taki sposób:
<tag parametr1="Wartość" parametr2="parametr2"
parametr3="15">fragment tekstu</tag>
Tagi można zagnieżdżać, przy czym kolejność zagnieżdżania ma
znaczenie - przy jej zmianie wynikowy dokument wyświetlony przez
przeglądarkę jest zwykle inny. Przy umieszczaniu tagów zamykających
(czyli rozpoczynających się od "/") należy pilnować kolejności w jakiej
były otwierane, i zamykać je w odwrotnej kolejności (poczynając od
najbardziej zagnieżdżonego). Chociaż przeglądarki obecnie starają się
"na siłę" ignorować wszelkie pojawiające się błędy w kodzie wyświetlanej
strony, to nieprzestrzeganie tej reguły może też powodować błędne
wyświetlanie się strony.
Wróćmy jednak do analizy przedstawionego powyżej przykładowego kodu strony.
Pierwsza linia w powyższym kodzie zawiera znacznik <!DOCTYPE>,
który określa tzw. DTD (Document Type Definition - definicja typu
dokumentu). Linia ta określa m.in. której wersji języka HTML będziemy
używać na stronie. Obecnie w użyciu są głównie HTML 4.01 oraz XHTML 1.0.
Różnice pomiędzy tymi dwoma standardami są niewielkie - XHTML 1.0 jest
to język HTML 4.01 do którego zastosowano reguły języka XML (główne
zasady wymieniłem już powyżej - znaczniki i atrybuty muszą być pisane
małymi literami, znaczniki muszą być pozamykane i każdy atrybut musi
mieć przypisaną wartość). Dokładne omówienie różnic to jest jednak temat
na osobny poradnik, dlatego tutaj będę się jedynie ograniczał do
przedstawiania przykładów kodu HTML który jest także zgodny z XHTML.
DOCTYPE/DTD czyli definicja typu dokumentu
Znacznik <!DOCTYPE> znajdując się w pierwszej linii określa także dodatkowo jaką odmianę danej wersji języka chcemy zastosować - do wyboru są Strict (najbardziej restrykcyjna, która wymaga aby formatowanie wyglądu tekstu było wykonane za pomocą arkuszy styli CSS), Transitional (zawiera znaczniki określające wygląd tekstu) i Frameset (do tworzenia dokumentów z ramkami). Osobiście staram się stosować
wersję Strict, gdyż oddzielenie kodu HTML od jego formatowania (style
CSS) pozwala na tworzenie bardziej czytelniejszego kodu. Ponieważ jednak
na razie się dopiero uczysz języka HTML, możesz stosować też wersję
Transitional.
Ponieważ znaczniki i atrybuty z DTD Transitional są oznaczone jako
niezalecane, w dalszej części kursu będę używał tego określenia i
zachęcał będę do stosowania zamiast nich odpowiednich komend kaskadowych
arkuszy stylów CSS.
Standardy HTML 4.01 i XHTML 1.0 definiują następujące DTD które można używać:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Znacznik <!DOCTYPE> można też oczywiście zapisać w jednej linii - tutaj podzieliłem go na dwie tylko po to aby ładnie się wyświetlił.
Po linii określającej DTD, pojawia się tag <html>, zaś na końcu znajduje się zamykający go tag </html>.
Ta para tagów określa granice dokumentu HTML, w ramach których powinny
zawrzeć się wszystkie pozostałe znaczniki (wyłączając oczywiście
deklarację używanego DTD, która jest wcześniej).
Po znaczniku <html> pojawiają się znaczniki określające dwie podstawowe części dokumentu - nagłówek (tagi <head> i </head>) i tzw. ciało dokumentu (tagi <body> i </body>). W nagłówku dokumentu znajduje się para tagów pomiędzy którymi znajduje się tytuł strony (tagi <title> i </title>) - jest on zwykle wyświetlany w pasku tytułu przeglądarki. W tej części znajdują się też tzw. meta-tagi (tagi <meta>),
które określają pewne parametry pracy przeglądarki przy wyświetlaniu
tej strony, czy też jej zachowanie. Tutaj umieszczony jest jeden taki
znacznik, określający sposób kodowania Polskich znaków w dokumencie
(standard ISO-8859-2). Poszczególne typy meta-tagów zostaną dokładniej
opisane w dalszej części kursu.
Właściwa część strony, która jest wyświetlana wewnątrz okna
przeglądarki, czyli tzw. ciało strony, umieszczone jest pomiędzy
znacznikami <body> i </body>. W powyższym przykładzie ciałem strony jest napis "Treść Mojej Pierwszej Strony WWW" umieszczony dodatkowo w znaczniku <p> (znacznik ten służy do tworzenia paragrafów tekstu. Więcej o nim będzie
w kolejnych lekcjach tego kursu). Ciało strony nie musi być jednakże
wyłącznie prostymi napisami - język HTML pozwala na ich formatowanie (co
prawda niezbyt skomplikowane, dlatego aby umożliwić bardziej
skomplikowane sposoby formatowania powstały Kaskadowe Arkusze Stylów -
CSS), w ciele strony można także umieścić grafikę, tabele, i inne
elementy.
Znaki specjalne w HTML
Przy wpisywaniu tekstu musisz jednakże zwrócić uwagę na fakt, iż nie
wszystkie znaki można wpisać bezpośrednio, gdyż zostały one już
wcześniej zarezerwowane do określonych celów w języku HTML. Znaki te
jednakże można uzyskać w utworzonym dokumencie podając w tekście
dokumentu odpowiednie kody postaci &nazwa;. Do najczęściej używanych należą:
" - znak cudzysłowu "< - znak mniejszości <> - znak większości >& - ampersand & - tzw. twarda (niełamalna) spacja (wyrazy
połączone taką spacją pozostaną w tej samej linii przy podziale tekstu
strony na wiersze)
Dostępnych jest także wiele innych znaków które można uzyskać
stosując podaną metodę, można także zlecić przeglądarce wyświetlenie
znaku o określonym kodzie. Pełną listę takich znaków znajdziesz w
artykule Znaki specjalne HTML. |
