Co to HTML ?
HTML ( Hyper Text Markup Language.) jest to język znaczników służący do projektowania stron WWW. Znaczniki wstawiane są do zwykłych plików tekstowych bezpośrednio w edytorze tekstowym, lub pośrednio za pomocą edytora języka HTML, definiując zarówno strukturę dokumentów, jak i sposób ich łączenia z innymi dokumentami na tym samym lub innym serwerze WWW. Tak utworzone dokumenty mogą zawierać tekst, grafikę, dźwięk, sekwencje wideo. Do interpretowania etykiet języka HTML służą przeglądarki.
Znaczniki
Znaczniki HTML/XHTML są podstawowymi cegiełkami z których zbudowana jest każda strona WWW. Poniższa lista zawiera posortowane alfabetycznie znaczniki HTML 4.01 / XHTML 1.0. Wartości w kolumnie "DTD" oznaczają w której wersji HTML/XHTML można korzystać z podanego znacznika:
S - Strict
T - Transitional
F – Frameset
Znacznik | Opis | DTD |
---|---|---|
<!--...--> | Komentarz | STF |
<!DOCTYPE> | Definicja typu dokumentu | STF |
<a> | Odnośnik (kotwica) | STF |
<abbr> | Skrót | STF |
<acronym> | Akronim | STF |
<address> | Adres | STF |
<applet> | Applet (niezalecany) | TF |
<area> | Element mapy odsyłaczy | STF |
<b> | Pogrubienie tekstu | STF |
<base> | Definicja bazowego adresu URL dla wszystkich odnośników na stronie | STF |
<basefont> | Definicja bazowego fontu (niezalecany) | TF |
<bdo> | Kierunek wyświetlania tekstu | STF |
<big> | Powiększenie tekstu | STF |
---|---|---|
<blockquote> | Komentarz blokowy | STF |
<body> | Ciało dokumentu HTML | STF |
<br> | Przejście do nowej linii | STF |
<button> | Przycisk | STF |
<caption> | Tytuł tabeli | STF |
<center> | Centrowanie tekstu (niezalecany) | TF |
<cite> | Cytat | STF |
<code> | Fragment kodu programu | STF |
<col> | Definicja kolumny tabeli | STF |
<colgroup> | Definicja grupy kolumn w tabeli | STF |
<dd> | Opis definicji | STF |
<del> | Tekst skasowany | STF |
<dfn> | Definiowane słowo lub wyrażenie | STF |
<dir> | Lista katalogu (niezalecany) | TF |
<div> | Sekcja w dokumencie | STF |
<dl> | Lista definicji | STF |
<dt> | Definiowane słowo lub wyrażenie | STF |
<em> | Emfaza | STF |
<fieldset> | Grupa pól | STF |
<font> | Określenie czcionki, jej rozmiaru i koloru (niezalecany) | TF |
<form> | Formularz | STF |
<frame> | Definicja zawartości ramki na stronie z ramkami | F |
<frameset> | Grupa ramek na stronie z ramkami | F |
<h1> | Nagłówek poziomu 1 | STF |
<h2> | Nagłówek poziomu 2 | STF |
<h3> | Nagłówek poziomu 3 | STF |
<h4> | Nagłówek poziomu 4 | STF |
<h5> | Nagłówek poziomu 5 | STF |
<h6> | Nagłówek poziomu 6 | STF |
<head> | Definicja informacji o dokumencie | STF |
<hr> | Pozioma linia | STF |
<html> | Definicja dokumentu HTML | STF |
---|---|---|
<i> | Tekst pochylony | STF |
<iframe> | Ramka pływająca (iframe) | TF |
<img> | Obrazek | STF |
<input> | Pole formularza (opis ogólny) | STF |
<ins> | Tekst wstawiony | STF |
<isindex> | Definiuje jednoliniowe pole do wprowadzania tekstu(niezalecany) | TF |
<kbd> | Tekst wprowadzony z klawiatury | STF |
<label> | Erykieta dla kontrolki formularza | STF |
<legend> | Tytuł dla grupy pól | STF |
<li> | Element listy | STF |
<link> | Odnośnik do zasobu | STF |
<map> | Mapa odsyłaczy graficznych | STF |
<menu> | Lista typu menu (niezalecany) | TF |
<meta> | Informacje meta | STF |
<noframes> | Sekcja noframe (dla przeglądarek nie obsługujących ramek) | TF |
<noscript> | Sekcja noscript (dla przeglądarek nie obsługujących skryptów) | STF |
<object> | Osadzony obiekt | STF |
<ol> | Lista numerowana | STF |
<optgroup> | Grupa opcji | STF |
<option> | Opcja w liście rozwijalnej | STF |
<p> | Paragraf | STF |
<param> | Parametr dla obiektu | STF |
<pre> | Tekst preformatowany | STF |
<q> | Krótki cytat | STF |
<s> | Tekst przekreślony (niezalecany) | TF |
<samp> | Przykład kodu komputerowego | STF |
<script> | Skrypt | STF |
<select> | Lista wybieralna | STF |
<small> | Pomniejszony tekst | STF |
<span> | Sekcja w dokumencie | STF |
<strike> | Tekst przekreślony (niezalecany) | TF |
<strong> | Tekst silnie wyróżniony | STF |
<style> | Definicja arkuszy styli CSS | STF |
<sub> | Tekst w dolnym indeksie | STF |
<sup> | Tekst w górnym indeksie | STF |
<table> | Tabela | STF |
<tbody> | Ciało tabeli | STF |
<td> | Komórka tabeli | STF |
<textarea> | Pole do wprowadzania wielu linii tekstu | STF |
<tfoot> | Stopka tabeli | STF |
<th> | Komórka nagłówka tabeli | STF |
<thead> | Nagłówek tabeli | STF |
<title> | Tytuł dokumentu HTML | STF |
<tr> | Wiersz tabeli | STF |
<tt> | Tekst "maszynowy" | STF |
<u> | Tekst podkreślony (niezalecany) | TF |
<ul> | Lista wypunktowana | STF |
<var> | Zmienna (np. w programie) | STF |
Historia języka HTML
Pierwsza wersja HTML’a została opracowana przez Tima Berners-Lee w 1989 roku, który w tym czasie był konsultantem do spraw oprogramowania pracującym dla CERN. Pierwotnie składał się on z kilkunastu znaczników umożliwiających wyświetlanie tekstu wraz z odsyłaczami do innych tekstów. Rewolucyjność pomysłu polegała na tym, że użytkownik przeskakujący do innego tekstu nie musiał w ogóle wiedzieć gdzie fizycznie znajduje się interesujący go tekst. Była to tzw. zerowa wersja HTML.
Wraz z rozwojem sieci WWW, a zwłaszcza jej upowszechnianiem, pojawiła się potrzeba dołączania do tekstów tabel, grafiki i plików multimedialnych, w wyniku czego zaczęły powstawać kolejne wersje HTML-a. Wersje te były rozwijane przez firmy produkujące przeglądarki stron WWW, bez wzajemnych konsultacji, co doprowadziło do częściowej niekompatybilności wersji HTML-a zaimplementowanych w przeglądarkach różnych producentów.
Próbą odpowiedzi na tę sytuację było stworzenie W3C czyli World Wide Web Consortium, organizacji która zajmuje się ustanawianiem wspólnych standardów HTML-a, a także innych spraw związanych z pisaniem stron WWW.
Kolejne "oficjalne" wersje HTML-a są uzgadnianie przez szeroką dyskusję ekspertów i przedstawicieli zainteresowanych firm i następnie definiowane za pomocą SGML-a. Pierwszą taką oficjalną wersją HTML-a był HTML 2, którego niewątpliwym sukcesem było to, że wszystkie ważniejsze przeglądarki takie jak Internet Explorer i Netscape są w zasadzie z nim zgodne.
Drugą wersją HTML-a, którą udało się uzgodnić w trakcie tzw. wojny przeglądarek, czyli ostrej i nie zawsze uczciwej konkurencji między Microsoftem i Netscape, była wersja 3.2. Przedostatnią wersją HTML-a jest wersja 4.01, która próbuje wydzielić zarządzanie wyglądem strony do kaskadowych arkuszy stylów (CSS). HTML 4.01 okazał się jedynie częściowym sukcesem w dziedzinie standaryzacji, gdyż wsparcie dla CSS w większości przeglądarek było przez wiele lat niepełne i zawierało wiele mniejszych i większych niekompatybilności. Niekompatybilności te stają się jednak z czasem coraz mniejsze, i pisanie stron obsługiwanych poprawnie przez wiele przeglądarek jest łatwiejsze niż w czasach wojen edytorowych.
XHTML
W odróżnieniu od HTML-a (który jest zastosowaniem SGML), dokumenty pisane w XHTML są zgodne z oficjalną specyfikacją XML (to znaczy, że dokumenty w XHTML są poprawnymi dokumentami XML) i dzięki temu można je łatwo generować z innych dokumentów XML przy pomocy np. transformacji XSLT, a także automatycznie przekształcać w inne formy XML-a. Dzięki temu dokumenty te posiadają większe możliwości, jak choćby wstawianie innych dokumentów za pomocą jednej metody (element <object/>), zagnieżdżanie wzorów matematycznych (język MathML), czy grafik wektorowych (język SVG).Jedną z największych zalet XHTML jest możliwość łączenia z innymi językami zgodnymi z XML, np. wspomniany już, MathML czy SVG. Odbywa się to dzięki wykorzystaniu mechanizmu przestrzeni nazw XML.
Obecnie nowe przeglądarki, takie jak Firefox czy Opera, praktycznie w pełni obsługują XHTML, lecz program mający największy udział w rynku – Internet Explorer – obsługuje XHTML-owy typ zawartości dopiero od wersji 9. W praktyce zmuszało to webmasterów do stosowania dla dokumentów XHTML starego HTML-owego typu zawartości – dzięki temu, że XHTML w wersji 1.0 "symuluje" HTML 4 (tzn. posiada praktycznie taki sam zestaw elementów i atrybutów), wyświetlanie XHTML jako HTML nie sprawia większych problemów w żadnej przeglądarce, o ile dokument nie wykorzystuje dodatkowych możliwości XHTML, których nie ma w HTML (przedrostków nazw elementów, innych przestrzeni nazw, XML DOM), zachowanie to uznawane jest za nieprawidłowe, choć dopuszczalne, ze względu na niezgodność wcześniejszych wersji Internet Explorera.
XHTML jest oddzielnym, nowym językiem skonstruowanym na bazie HTML 4.01 przy użyciu XML 1.0. Jest dalej rozwijany:
XHTML 1.0, opublikowany 26 stycznia 2000 jako rekomendacja W3C; w późniejszym czasie skorygowany i opublikowany ponownie 1 sierpnia 2002. Oferuje trzy typy z HTML-a 4.0 oraz 4.01. Przystosowany do standardu XML, czego skutkiem są dodatkowe drobne restrykcje w języku.
XHTML 1.1, opublikowany 31 maja 2001 jako rekomendacja W3C. Bazuje na XHTML 1.0 Strict, zawiera jednak pewne korekty. Może być dostosowywany poprzez użycie modułów opisanych w Modularyzacji XHTML, opublikowanej 10 kwietnia 2001 jako rekomendacja W3C.
XHTML 2.0 przez dłuższy czas figurujący jako szkic a obecnie całkowicie porzucony. XHTML 2.0 nie był kompatybilny z XHTML 1.x, dlatego też można go było scharakteryzować jako nowy język powstały z inspiracji XHTML-em a nie traktować go jako uaktualnienie XHTML-a 1.x.
XHTML 5, który jest aktualizacją XHTML-a 1.x, jest zdefiniowany wraz z HTML-em 5 w szkicu HTML 5
HTML 5
HTML 5 to jezyk wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest rozwinięciem języka HTML 4 i jego XML-owej odmiany (XHTML 1), opracowywane w ramach prac grupy roboczej WHATWG iW3C.Jest to konkurencyjna specyfikacja w stosunku do specyfikacji XHTML 2, której rozwój został porzucony 2 lipca 2009 roku wsparcie wszystkich środowisk i producentów przeglądarek ukierunkowane jest na HTML 5.
Główna różnica pomiędzy HTML 5 a XHTML 2 polega na tym, że HTML 5 jest pisane z myślą o kompatybilności wstecznej, podczas gdy XHTML 2 zrywało z kompatybilnością.HTML 5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów. Niejasności co do sposobu, w jaki przeglądarki powinny obsługiwać błędy w kodzie HTML są jedną z podstawowych przyczyn, dla której wiele serwisów internetowych, napisanych z naruszeniem specyfikacji, w różnych przeglądarkach działa w inny sposób w niektórych działając, w innych nie. HTML 5 wysyłany jako XML nazywany jest XHTML 5.
Nowe tagi: section, article, header, footer, nav, video, audio, mark, progress, ...
Nowe typy inputów: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color.
Nowe atrybuty elementów formularzy: autofocus, required, autocomplete, min, max, multiple, pattern, step, ...
Możliwość osadzenia MathML i SVG bezpośrednio w dokumencie, zupełnie jak w XHTML
HTML 5 nie zawiera żadnych elementów prezentacyjnych
Rysowanie 2D z nowym elementem canvas,
API dla odtwarzania audio i video,
API dla aplikacji offline,
API, pozwalające zarejestrować aplikację WEB jako protokół lub media_type,
API edycji z atrybutem contenteditable,
API przeciągnij i upuść, z atrybutem draggable,
API do obsługi przycisku wstecz.
API pamięci (storage) pozwalające na przechowywanie danych pomiędzy przeładowaniami strony.
Microdata – przechowywanie danych w atrybutach (prefix: data-)
Przeglądarki obsługujące HTML5 będą dostosowane do obsługi błędów w składni. HTML5 został zaprojektowany tak, by starsze przeglądarki bez problemu mogły ignorować nowe konstrukcje. W przeciwieństwie do starszego HTML 4.01 specyfikacja tej wersji zawiera szczegółowe instrukcje jak postępować z niepoprawną składnią, przez co strony z błędami będą wyświetlane w ten sam sposób w różnych przeglądarkach.
Znaczniki <audio> i <video> dają możliwość odtwarzania na stronie dźwięku i klipów wideo bez użycia dodatkowych wtyczek. Problem stanowi brak porozumienia producentów przeglądarek co do użycia tych samych kodeków w swoich produktach.
Edytor HTML
Dokument HTML jest plikiem tekstowym i jako taki może być tworzony w dowolnym edytorze tekstu, nawet tak prostym, jak Notatnik w systemie operacyjnym Windows czy Kate w systemie GNU/Linux.
Jednak wyróżniającą cechą edytora HTML jest wspomaganie dla znaczników (tagów) HTML, dzięki czemu pisanie stron jest w znacznej mierze ułatwione (należy jednak podkreślić, że niektóre edytory tekstowe wprowadzają również prostą obsługę znaczników HTML).
Niekiedy spotyka się twierdzenie, że używanie edytorów HTML nie jest konieczne. Wyspecjalizowany program tego typu umożliwia jednak:
szybsze wprowadzanie znaczników dzięki gotowym szablonom
unikanie błędów wynikających z ręcznego wprowadzania znaczników
Edytory HTML można podzielić na dwie podstawowe klasy: edytory pracujące w trybie tekstowym i edytory pracujące w trybie graficznym.Mianem edytorów pracujących w trybie tekstowym określamy programy, które pozwalają pracować bezpośrednio z kodem HTML, wyświetlając tekst dokumentu i kody sterujące (np. wyżej wspomniane Notatnik czy Kate). Pierwszym edytorem Hipertekstu był program World Wide Web autorstwa Timothy'ego Bernersa-Lee, twórcy WWW.
Pajączek (shareware - płatny)
CoreEditor (płatny - dostępna wersja DEMO)
Ager Web Edytor (darmowy)
EdHTML (darmowy)
Edytor Znaczników HTML - ezHTML (darmowy)
HateML Pro (darmowy)
kED (darmowy)
PSPad (darmowy)
Web Edit (darmowy)
Bluefish (darmowy)
gedit (darmowy)
Kate (darmowy)
Quanta Plus (darmowy)
Bluefish (darmowy)
Smultron (darmowy)
Taco HTML Edit (darmowy)