Wprowadzenie do HTML/XHTML
Artykuł ten ma na celu przybliżenie czytelnika z technologią budowy stron internetowych przy użyciu najpopularniejszego dziś języka do budowy stron internetowych – XHMTL-a, będącego ustandaryzowaną wersją HTML-a. Nie stanowi on zbioru wszystkich poleceń, a jedynie omawia filozofię i podstawową składnię wspomnianego języka.
Sprawdź również kurs tworzenia stron w WordPress
Wprowadzenie
Język XHTML oznacza w ogólności HTML oparty na XML-u. Znaczniki używane przy budowie strony, opisujące HTML i XHTML są w zasadzie takie same. Różnica pomiędzy tymi dwiema technologiami wynika ze zgodności do XML-a (języka formalnego reprezentującego dane). Całość sprowadza się do tego, że XHTML ma bardziej rygorystyczną składnię wynikającą z zasad pisania w technologii XML. Dla osób znających HTML-a nauka XHTML-a sprowadza się w zasadzie tylko do poznania różnic pomiędzy nimi. Oprócz tego XHTML rozszerza HTML o nowe możliwości wynikające z samej technologii XML.
Kurs ten będzie obejmował tzw. przejściową wersję XHTML 1.0, gdyż ta się najpowszechniej przyjęła (Internet Explorer nie obsługuje poprawnie XHTML-a). Wersja przejściowa oznacza zgodność ze starszym HTML-em, a zarazem wprowadza zasady pisania zgodne z XML-em. Umożliwia zatem poprawne wyświetlenie strony na starszych przeglądarkach i przyzwyczaja webmastera do nowej składni. Wersja ta jednak nie obejmuje rozszerzonych możliwości wynikających z XML-a (inaczej nie byłaby zgodna z HTML-em)
Znaczniki (tagi)
Znaczniki (tagi) w (X)HTML-u to słowa kluczowe z których składa się strona www. Skrótowo można powiedzieć, że są to polecenia wydawane podczas tworzenia dokumentu strony internetowej (nie jest to poprawna definicja słownikowa, ale łatwiejsza do przyswojenia) – np. pogrub tekst, ustaw czcionkę, zmień kolor tekstu, ustaw tło, wstaw obrazek. Znaczniki tworzą bloki obejmujące otwarty i zamknięty znacznik (np. gdy przy otwieraniu znacznika wydamy „polecenie” pogrub czcionkę to będzie ono tak długo pogrubiało cały tekst, aż ten nie zostanie zamknięty. Wewnątrz wspomnianych bloków może znajdować się czysty tekst, bądź inne znaczniki tworzące kolejne bloki (warunkiem jest, że znacznik tworzący nowy blok wewnątrz innego nie może kończyć się za blokiem w którym powstał – wynika to ze składni XML-a).
Znacznik otwierający blok umieszcza się pomiędzy znakami < i >. W znaczniku otwierającym możemy (nie musimy) zmodyfikować działanie „polecenia” poprzez dodanie do niego różnych parametrów (właściwości) np.
<pogrub id="wazne" tło="czerwone">Powyższy – dosyć abstrakcyjny – przykład otwiera znacznik pogrubiająy czcionkę. Nadaje przy tym dodatkowe właściwości do tego pogrubienia – nazwę „wazne” (może być używana np. przez skrypty na stronie) i czerwony kolor tła. Znaczniki definiujące wygląd poszczególnych elementów (pogrubienie, kolor, czcionka itd.) przerzuca się najczęściej do osobnego pliku .css (tzw. arkusza stylów). W arkuszu tym możemy ustawić formatowanie wszystkich elementów (np. wszystkich pogrubień, całego tekstu, obrazków itd.), bądź tylko wybranych (zidentyfikowanych po nazwie – do znacznika dodaje się wymienione id lub class).
Znacznik zamykający blok umieszcza się pomiędzy znakami </ i >. Znacznik ten nie zawiera dodatkowych parametrów (właściwości):
</pogrub>Powyższy przykład kończy blok pogrubiający czcionkę.
Znacznik otwierający i zamykający. Jeżeli pomiędzy znacznikami nie umieszczamy żadnych danych (tak będzie często np. w przypadku wstawiania obrazka – chcemy go tylko wstawić) możemy zakończyć znacznik zaraz po jego otwarciu. Robi się to dodając spację (nie należy o niej zapominać) na końcu znacznika otwierającego i znak /> np. (img określa obrazek):
<img href="/obrazek.jpg" />Powyższy przykład otwiera i zarazem zamyka znacznik <img>. Można oczywiście napisać:
<img href="/obrazek.jpg></img>I też będzie działać jak należy, ale zajmuje więcej miejsca i stanowi spadek po HTML-u (w XHTML-u powinniśmy używać wcześniej wspomnianego stylu)
Podstawowe bloki HTML
Poprzedni akapit pokazał nam sposób budowania bloków. Każda strona składa się z 2-ch podstawowych bloków w której zawieramy specyficzne dla danego bloku dane i znaczniki. Pierwszym blokiem jest head (zwany nagłówkiem dokumentu) w którym wpisujemy dane informacyjne o budowanej stronie internetowej (albo raczej o pisanym dokumencie) – używany język (np. XHTML 1.0), tytuł pojawiający się na belce przeglądarki, słowa kluczowe dla przeglądarek itd. Informacje zawarte w bloku head nie pojawią się na naszej stronie – są one wykorzystywane tylko do opisania tworzonej strony. Drugi blok to body (zwany ciałem dokumentu). Tutaj będzie znajdowała się treść i wygląd całej naszej strony. Wszystko co znajdzie się w body będzie elementem, który może zostać wyświetlony na stronie. Taki podział na bloki powoduje, że w poszczególnych głównych blokach używa się innych znaczników – np. używanie pogrubienia w head, bądź pisanie jakiegokolwiek tekstu jest bezcelowe, bo i tak nie będzie widoczne dla użytkownika przeglądającego naszą stronę internetową. Sekcja head jest użyteczna dla mechanizmów przeglądarki, robotów wyszukiwarek internetowych, bądź innych programów które mogą pobierać stworzoną stronę i wyciągać użyteczne dla nich informacje.
Przykładowe bloki:
<head>
informacje dla przeglądarki dotyczące używanego języka
informacje dla robotów wyszukiwarek internetowych
informacje dla samej przeglądarki - np. tytuł strone
informacje o używanych dodatkowych plikach (np. podany arkusz stylów)
informacje dla innych programów, które mogą przeglądać naszą stronę
</head>
<body>
cała treść strony internetowej, jej elementy graficzne
i wszystkie inne wyświetlane obiekty
</body>Całość możemy (nie musimy) opatrzyć dodatkowym blokiem html.
Ponieważ bloki head i body są zwykłymi znacznikami html mogą zawierać dodatkowe właściwości opisujące poszególne bloki – np. dla bloku body możemy określić kolor tekstu, który będzie domyślnie używany w całym dokumencie. Możemy również dodać np. tło dla całego bloku itd.
Pozostałe elementy
Typ dokumentu
Przed blokiem head zaleca się podanie typu dokumentu, który ułatwia poprawną walidację elementów strony. Bez podania go niektóre przeglądarki mogą źle interpretować zawartość strony. Typ dokumentu podaje się jako listę właściwości znacznika !DOCTYPE. W przeciwieństwie do innych znaczników, !DOCTYPE nie posiada zamknięcia.
Encje i symbole znakowe
Podczas tworzenia strony nie ma możliwości wyświetlenia w standardowy sposób kilku znaków odstępu. Przeglądarka interpretuje znaki odstępu następujące po sobie jako jeden odstęp. Jeżeli chcemy jednak wymusić dodanie dodatkowego, możemy to zrobić używając tzw. encji lub symbolów znakowych. Podobnie sprawa się ma np. ze znakami < lub >, które stanowią elementy obejmujące znaczniki – są to znaki specjalne. Każdy taki znak posiada swoją własną nazwę rozpoczynającą się od innego znaku specjalnego – & np. wpisując < przeglądarka wyświetli nam znak <, a aby uzyskać &, należy wpisać &. Inną formą wypisywania znaków specjalnych jest odwołanie się do ich kodów za pomocą &# lub &#x (dla reprezentacji szesnastkowej)
Zasady tworzenia stron zgodnych z przejściowym XHTML 1.0
Na chwilę obecną najbezpieczniej jest tworzyć strony zgodne wstecz z HTML-em, ale na zasadach jak najbliższych XML. Istnieje kilka zasad, które powinno się przestrzegać podczas pisania:
- strona nie powinna zawierać błędów – powinna podlegać walidacji XHTML przy użyciu np. walidatora W3C,
- dokument powinien rozpoczynać się od deklaracji XHTML 1.0 Transitional i zawierać właściwą przestrzeń nazw,
- każdy otwarty znacznik musi zostać zamknięty,
- otwarte znaczniki nie mogą być zamykane za blokiem w którym zostały otwarte,
- wszystkie wartości właściwości powinny być ujęte w znaki cudzysłowia,
- nie należy minimalizować właściwości np. zamiast pisać
<textarea readonly>, należy napisać<textarea readonly="readonly"> - nie powinno się stosować javascript-owej metody
document.write()i właściwości innerHTML - znaczniki pustych elementów powinny zawierać dodatkową spację przed ukośnikiem np.
<br /> - należy używać
createElementNSzamiastcreateElement - należy uważać na wielkość liter
Co dalej
Dalej należy poznać podstawowe elementy i rozpocząć pisanie pierwszych prostych stron. Obecnie większość serwisów składa się przynajmniej z 2-ch plików: dokumentu (X)HTML i arkusza stylów CSS. Jeden arkusz stylów może z powodzeniem formatować tekst i grafikę na dziesiątkach stron (X)HTML. Pozwala to w jednym pliku umieścić cały wygląd tworzonej witryny i w razie potrzeby zmienić zawartość tego pliku. Formatowanie można oczywiście umieścić również we właściwościach znaczników, ale przy każdym tworzonym dokumencie musimy to robić jeżeli chcemy by witryna prezentowała się spójnie.
O wiele łatwiej wszystkie kolory i grafikę opisać w osobnym pliku i do niego się raz odwołać w dokumencie. Innym powodem jest np. odmienna interpretacja niektórych elementów przez różne przeglądarki. Możemy wówczas stworzyć osobne arkusze dla różnych przeglądarek. Sposobów wykorzystania arkuszy jest więcej (ot np. inne formatowanie strony na tel. komórkowe, bądź do wydruku), ale nie jest to odpowiednie miejsce do tego. Później przyjdzie kolej na poznanie jakiegoś języka po stronie serwera (np. PHP), bazy danych (np. MySQL) i języka rozszerzającego funkcjonalność po stronie klienta – np. JavaScript. Ale to później… po CSS-ie.
Aktualizacja 2022-04-09
Aktualnie zalecaną wersją jest XHTML 5. Nie zaleca się stosowania XHTML 1.0. Na początku dokumentu piszemy wówczas:
<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
strona
</html>
