Wstęp do HTML 4


Oto podstawowe pojęcia jakie musicie znać:

 

Strona internetowa, strona WWW (ang. web page) – dokument HTML udostępniony w Internecie przez serwer WWW. Po stronie hosta użytkownika, strona WWW jest otwierana i wyświetlana za pomocą przeglądarki internetowej. Autorem pierwszych stron WWW jest Tim Berners-Lee.

Aplikacja internetowa, (ang.) web application – zwana również aplikacją webową, to program komputerowy, który pracuje na serwerze i komunikuje się poprzez sieć komputerową z hostem użytkownika komputera z wykorzystaniem przeglądarki internetowej użytkownika, będącego w takim przypadku interaktywnym klientem aplikacji internetowej.

Serwis internetowy, witryna internetowa (ang. website) – grupa powiązanych ze sobą, w celu zwiększenia funkcjonalności, stron internetowych. Serwisy internetowe, poza treścią statyczną, mają często sekcję wiadomości oraz możliwość logowania się i zapamiętywania preferencji odbiorców w celu dostosowania treści do indywidualnych upodobań. W serwisie mogą występować obiekty interaktywne np. formularze, przyciski czy aplikacje.

Serwisy mogą być tematyczne, a więc poświęcone jednemu zagadnieniu, lub ogólne – zajmujące się kilkoma tematami.

Portal internetowy – internetowy serwis informacyjny poszerzony o różnorodne funkcje internetowe, dostępny z jednego adresu internetowego. W intencji twórców, ma to zachęcać użytkowników do ustawienia adresu portalu jako strony startowej w przeglądarce WWW i traktowania go jako bramy do Internetu.

Zazwyczaj portal zawiera informacje będące przedmiotem zainteresowania szerokiego grona odbiorców. Jako przykładową treść portalu można podać: dział aktualnych wiadomości, prognoza pogody, katalog stron WWW, czat, forum dyskusyjne oraz mechanizmy wyszukiwania informacji w nim samym lub w zewnętrznych zasobach Internetu (wyszukiwarki internetowe). Ponadto portale mogą oferować darmowe usługi np. poczty elektronicznej, hostingu.

Istnieje tendencja traktowania portalu jako synonimu serwisu internetowego, ale nie jest ona poprawna, gdyż mogą istnieć portale bez serwisu informacyjnego, np. portale publicystyczne.

Wortal, portal wertykalny (ang. vertical portal) – portal wyspecjalizowany, publikujący informacje z jednej dziedziny, tematycznie do siebie zbliżone, np. dotyczące muzyki, filmu, programów komputerowych, motoryzacji.

Nazwa miała stanowić przeciwstawienie do zwykłego portalu, obejmującego szeroki zakres tematyczny (horyzontalnego), a przy okazji podkreślać wyższą jakość udostępnianych zasobów, jednak nie przyjęła się szeroko.

Serwer internetowy to komputer, który świadczy usługi podłączonemu do internetu użytkownikowi. Usługą może być odebranie wiadomości e-mail czy też proces ściągania pliku. Istnieje wiele rodzajów serwerów internetowych, przy czym najpopularniejsze z nich to: serwer stron WWW, serwer pocztowy oraz serwer FTP

Statyczna strona internetowa, która nie została wyposażona w System Zarządzania Treścią (CMS). Oznacza to, że teksty są wpisane „na sztywno” w kod strony. Dokonanie zmian na stronie statycznej wymaga pomocy jej wykonawcy, gdyż trzeba edytować pliki strony.

Jest to najlepsze rozwiązanie, kiedy nie planujemy wprowadzać zmian na stronie częściej niż raz na parę miesięcy, np. jeśli strona ma służyć tylko do prezentacji danych teleadresowych firmy i jej oferty. W przypadku, gdy chcemy mieć możliwość np. publikowania aktualności czy dodawania nowych artykułów, potrzebny będzie już system CMS.

Dynamiczna strona internetowa jest wyposażona w System Zarządzania Treścią (CMS). Treść na stronie dynamicznej jest pobierana z bazy danych, więc każda modyfikacja w bazie jest od razu widoczna na stronie. Modyfikację treści w bazie danych umożliwia system CMS, gdzie można „wyklikać” potrzebne zmiany (np. dodanie newsa) – dzięki temu rozwiązaniu strona może być na bieżąco aktualizowana przez osobę, która nie posiada wiedzy technicznej.

 

HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.

HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy – oraz osadza w tekście dokumentu obiekty plikowe np. multimedia bądź elementy baz danych np. interaktywne formularze danych.

HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej. Do szczegółowego opisu formatowania akapitów, nagłówków, użytych czcionek i kolorów, zalecane jest wykorzystywanie kaskadowych arkuszy stylów.

W składni HTML wykorzystuje się pary znaczników umieszczone w nawiasach ostrokątnych, np. <title> i </title> lub <h1> i </h1>.

HTML pozwala również na osadzanie ciągów instrukcji języków skryptowych, umieszczonych pomiędzy znacznikami <script> i </script>

Należy nadmienić, że HTML, będąc językiem znaczników, nie jest zaliczany do języków programowania – w jego składni nie przewidziano wyrażeń obliczeniowych, warunkowych czy iteracyjnych.

Ważną cechą HTML-a, która przyczyniła się do popularności systemu WWW oraz Internetu, jest niezależność od systemu operacyjnego i wykorzystywanego sprzętu komputerowego.

 

XML (ang. Extensible Markup Language, w wolnym tłumaczeniu Rozszerzalny Język Znaczników) – uniwersalny język znaczników przeznaczony do reprezentowania różnych danych w strukturalizowany sposób.

XML jest niezależny od platformy, co umożliwia łatwą wymianę dokumentów pomiędzy heterogenicznymi (różnymi) systemami i znacząco przyczyniło się do popularności tego języka w dobie Internetu. XML jest standardem rekomendowanym oraz specyfikowanym przez organizację W3C.

 

XHTML (ang. Extensible HyperText Markup Language, rozszerzalny język znaczników hipertekstowych) – język służący do tworzenia stron WWW ogólnego przeznaczenia. Specyfikacje XHTML przygotowuje organizacja W3C.

XHTML/1.0 nie jest następcą HTML, a jedynie przedstawieniem HTML 4.01 w postaci XML. XHTML/2.0 miał być następcą HTML, niekompatybilnym wstecz, ale ze względu na niekompatybilność Internet Explorera, a co za tym idzie niechęć użytkowników, W3C zadecydowało o kontynuowaniu linii XHTML/1.0 i HTML 4 jako XHTML 1.1 i HTML 5.

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[1] – 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.

Jednak aby prawidłowo wyświetlać strony zarówno w nowoczesnych, jak i starszych przeglądarkach należy wykorzystać metodę negocjowania zawartości.

 

Podstawowe reguły XHTML

Zasady konstruowania dokumentów XHTML – najważniejsze różnice w porównaniu z HTML:

  • Jeśli strona XHTML zawiera błędy, nie może zostać wyświetlona;
  • Strony XHTML muszą mieć typ zawartości application/xhtml+xml (lub inny XML);
  • Dzięki użyciu XHTML można stosować inne aplikacje XML (jak MathML czy SVG) bezpośrednio w dokumencie, czego nie da się w HTML;
  • Dokument powinien rozpoczynać się od deklaracji XML (np. <?xml version="1.0" encoding="utf-8"?>); nie jest ona wymagana, gdy dokument ma kodowanie znaków UTF-8 lub UTF-16, albo gdy odpowiednie kodowanie zostało określone w nagłówkach HTTP (jednak nawet wtedy warto dołączać deklarację XML, gdyż pozwala ona ustalić kodowanie np. w przypadku zapisania strony na dysku);
  • Element główny (html) musi zawierać atrybut xmlns określający przestrzeń nazw XHTML: http://www.w3.org/1999/xhtml;
  • Znacznikowi otwierającemu każdego niepustego elementu powinien odpowiadać znacznik zamykający (np. <li> ... </li>);
  • Puste elementy muszą także być zamykane (np. zamiast <br> musi być <br/>, albo <br></br>);
  • Elementy muszą być zagnieżdżane w odpowiedni sposób (np. zamiast <p>Tekst z <em>wyróżnieniem</p></em><p>Tekst z <em>wyróżnieniem</em></p>); wprawdzie w HTML także istniał taki wymóg, lecz nie był egzekwowany przez przeglądarki;
  • Nazwy elementów i atrybutów XHTML muszą być pisane małymi literami;
  • Wszystkie wartości atrybutów muszą być ujęte w cudzysłów (podwójny, np. <td rowspan="3">, albo apostrof, np. <td rowspan='3'>);
  • Niedozwolona jest minimalizacja atrybutów (np. zamiast <textarea readonly> musi być <textarea readonly="readonly">);
  • Wewnątrz elementów script i style komentarze XML (<!-- -->) zamiast ukrywać je przed starszymi przeglądarkami (które i tak nie obsługują XHTML), powodują ignorowanie tych stylów lub skryptów. W sekcji CDATA natomiast komentarze są traktowane jako element stylu/skryptu;
  • Jeśli zawarte wewnątrz dokumentu arkusze stylów lub skrypty zawierają znaki & lub <, zawartość elementów style i script należy umieścić w sekcji CDATA (np.: <style type="text/css"><![CDATA[ arkusz stylów]] ></style>); alternatywnie można użyć encji lub zewnętrznego arkusza stylów/skryptu;
  • Ze względu na trudności z parsowaniem, nie powinno się używać w XHTML-u javascriptowej metody document.write() i właściwości innerHTML; jednak niektóre przeglądarki już obsługują te konstrukcje także w dokumentach XML. Zamiast nich należy używać metod DOM.

Kompatybilność z HTML

Ponieważ nadal są używane nieobsługujące XHTML przeglądarki internetowe, jeżeli chcemy wysyłać dokument zarówno jako XHTML, jak i HTML (dla starszych przeglądarek), możemy się zastosować do kilku reguł. Jednak niektórzy uważają, że XHTML zgodny z HTML pozbawia całkowicie sensu ideę HTML-a jako XML (patrz: http://www.hixie.ch/advocacy/xhtml).

  • Znaczniki pustych elementów powinny zawierać dodatkową spację przed ukośnikiem, np. zamiast <br/> powinno być <br />
  • Należy unikać używania zminimalizowanej formy (np. <p/>) w przypadku pustych elementów, które mogą mieć zawartość; np. stosowanie znacznika <script type="text/javascript" src="skrypt.js"/> w dokumencie przesyłanym jako HTML prowadzi zwykle do niewyświetlenia reszty dokumentu; należy w tym wypadku używać <script type="..." src="..."></script>
  • Obok lub zamiast instrukcji xml-stylesheet należy odwoływać się do zewnętrznych arkuszy stylów przy pomocy obsługiwanego w HTML-u znacznika <link rel="stylesheet" ... />
  • Objęcie wewnętrznych skryptów i stylów sekcją CDATA może powodować ich błędne działanie; należy w związku z tym zakomentować znaczniki początku i końca sekcji CDATA, np.: <style type="text/css">/* <![CDATA[ */ arkusz stylów /*]] > */</style>
  • Oprócz typowej dla XML deklaracji języka za pomocą atrybutu xml:lang, należy też używać zgodnego z HTML atrybutu lang.
  • Dla kompatybilności z IE6 należy pomijać deklarację XML – powoduje to w nim przejście w tryb wstecznej zgodności. Nie ma sensu jednak dodawać jej dla innych przeglądarek (skryptami po stronie serwera), gdyż i tak jest ona nieobowiązkowa. Strona musi być zakodowana jako UTF-8/USC-*, a jeżeli jest zakodowana inaczej, musimy odpowiednią informację dodać do nagłówka Content-Type (np. kodem PHP: header("Content-Type: $mime; charset=\"iso-8859-2\"");, gdzie $mime to ustalony w wyniku negocjacji zawartości typ pliku).
  • W DOM należy używać createElementNS zamiast createElement i trzeba uważać na wielkość liter (DOM HTML podaje nazwy elementów wielkimi literami, DOM XML zachowuje wielkość liter i w XHTML dopuszcza tylko małe litery).

 

 

Przydatny link – Dokumentacja HTML