kurs xhtml.doc

(622 KB) Pobierz
Wstęp

Wstęp

Co to jest XHTML?

XHTML (eXtensible HyperText Markup Language) to język hipertekstowy używany do tworzenia dokumentów czyli stron internetowych. Polecenia tekstowe (znaczniki i atrybuty) pozwalają na realizację tzw. linków (odsyłaczy), wyświetlanie różnych czcionek, grafiki i innych elementów.
Definicja ta pasuje nie tylko do XHTML ale także do HTML. To nie przypadek, że definicje są podobne, ponieważ obydwa języki pełnią taką samą funkcję, ale XHTML ma dużo większe możliwości.
Można także inaczej odpowiedzieć na pytanie postawione wyżej: XHTML = HTML + XML. To chyba najkrótsza definicja XHTML.

Co to jest XML?

XML to znacznikowy język do opisu danych (metajęzyk). Język ten to otwarty standard stworzony przez W3C. XML służy do tworzenia aplikacji XML czyli innych języków (patrz: 'Specyfikacja XHTML i XML').
Taką aplikacją XML jest XHTML (a także inne języki takie jak MathML, Ruby, SVG itp., patrz: 'Inne ważne zasady').

Po co mi XHTML?

Te pytanie nasuwa się wszystkim webmasterom, którzy stykają się z XHTML Odpowiedź jest prosta. XHTML jest aktualnie obowiązującym standardem opisu stron WWW zalecanym przez W3C. XHTML należy traktować jako standard "HTML 5" (co oczywiście nie jest prawdą, ponieważ prace nad rozwijaniem języka HTML zostały zakończone na wersji 4.01). Wcześniej czy później wszystkie strony będą zgodne z tym standardem.
XHTML jest  także zgodny z XML, który staje się uniwersalnym standardem przetwarzania opisu środowiska WWW i dokumentów strukturalnie uporządkowanych informacji (patrz: 'Specyfikacja XHTML i XML').
XHTML jest ściśle związany z kaskadowymi stylami - CSS1 i CSS2, w przyszłości także - CSS3 (patrz: 'Specyfikacja CSS').

Przeglądarki XHTML

Większość przeglądarek dokumentów HTML dobrze interpretuje XHTML. Są to przeglądarki: Netscape Communicator/Sylaba Komunikator/Mozilla, Microsoft Internet Explorer, Opera, Konqueror i inne. Należy pamiętać, że im nowsza przeglądarka tym lepiej będzie interpretować XHTML. Nawiasem mówiąc (czytaj pisząc:-) najlepiej widać strony XHTML pod IE w wersji 5, 6 i Netscape 6, 7, Mozilla 0.9.x, 1.x i Opera 7. NC 4.xx (NN, Sylaba) gorzej obsługuje style. Jak widać problemy sprawiają style, które są nieodłącznym elementem XHTML.

Parsery w przeglądarkach

Parsery są to moduły wbudowane w przeglądarki, które zajmują się miedzy innymi poprawnym wyświetlaniem danej strony. Jednak przed wyświetleniem strony parsery badają poprawność kodu XHTML (także dotyczy innych języków zgodnych z XML). Jeśli zwrócą jakiś błąd strona najprawdopodobniej się nie wyświetli. Należy pamiętać, że dokumenty XHTML muszą być poprawnie parserowane, ponieważ najmniejszy nawet błąd może spowodować nie wyświetlenia strony. Dzisiejsze przeglądarki odnoszą się to tego zagadnienia bardzo różnie. Jedne w przypadku błędu zwracają komunikat o błędzie i nie wyświetlają strony (według XML), inne wyświetlają stronę tak jak byłaby stroną w HTML. Dlatego najlepszym rozwiązaniem jest pisanie stron XHTML bez błędów (patrz: 'Walidatory') w czym pozwoli Wam ten kurs.

Informacje ogólne

Podobieństwa z HTML

·         Dane są w formie tekstowej

·         Dane opisywane są znacznikami (tagami) np: <img>

·         Znaczniki mogą posiadać atrybuty np: src="przyk.gif"

·         Atrybuty posiadają wartości (przykład jak wyżej)

·         Tagi rozpoczynają się znakiem '<'a kończą '>' np: <html>

·         Przykład zamknięcia znacznika (jeśli jest wymagany) </html>

·         Wartości zawarte są w symbolach "" np: "przyk.gif"

·         Komentarze zawierają się miedzy <!-- --> i mogą być używane w całym dokumencie

A oto przykładowy dokument HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/REC-html401/strict.dtd">

<html>

<head>

<title>Przypładowa strona</title>

</head>

<body>

<!-- przykładowa strona -->

<p>To tylko przykład</p>

<img src="przyk.gif">

</body>

</html>

Bardzo początkujących (nie znających HTML i nie rozumiejących składni języka) zapraszam na doby kurs Pawła Wimmera: http://webmaster.helion.pl/kurshtml/

Nowości w stosunku do HTML

·         Znaczniki niepuste mają zawsze znacznik końcowy np: <p>Coś tam</p>

·         Znaczniki puste (logiczne) muszą być zawsze zakończone '/>' np: <br />

·         Wszystkie atrybuty i tagi muszą być pisane małymi literami np: <img src="przyk.gif" />

·         Atrybuty typu boolean (logiczne) muszą być uzupełniane o wartość np: noshade="noshade"

·         Wartości atrybutów muszą być zawarte w symbolach (nawet te jedno wyrazowe) "" np: <table summary="opis tabeli" width="150">

·         Zlikwidowano znaczniki (dotyczy też HTML 4, patrz: 'Znaczniki'):

o        <font> - należy używać stylów

o        <basefont> - należy używać stylów

o        <strike> - należy używać stylów

o        <s> - należy używać stylów

o        <u> - należy używać stylów

o        <center> - należy używać stylów i znacznika <div>

o        <menu> - należy używać znacznika <ul>

o        <dir> - należy używać znacznika <ul>

o        <isindex> - należy używać znacznika <input>

o        <xmp> - należy używać znacznika <pre>

o        <plaintext> - należy używać znacznika <pre>

o        <listing> - należy używać znacznika <pre>

o        <applet> - należy używać znacznika <object>

·         Zlikwidowano atrubuty (dotyczy też HTML 4, patrz: 'Atrybuty'):

o        accesskey

o        align (uwaga: można używać w <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>)

o        alink

o        background

o        bgcolor

o        border (uwaga: można używać w <table>)

o        clear

o        color

o        compact

o        face

o        height (uwaga: można używać w <iframe>, <img>, <object> ale się nie zaleca)

o        hspace

o        lang

o        language (należy używać type="text/javascript" w znaczniku <script>)

o        link

o        name (zlikwidowano w <a> i <map>)

o        size (uwaga: można używać w <input>, <select>

o        start

o        tabindex

o        target (zlikwidowano w <a>, <area> i <link>)

o        text

o        type

o        value

o        version

o        vlink

o        vspace

o        width (uwaga: można używać w <colgroup>, <col>, <table>, <img>, <object>, <iframe> ale się nie zaleca)
Wszystkie atrybuty wymienione wyżej należy zastąpić stylami chyba, że jest to zaznaczone w nawiasie

·         Między znacznikami <table> musi znajdować się tag <tbody> np: <table><tbody><tr><td></td></tr></tbody></table>, jeśli tabela jest długa należy stosować znaczniki <thead> i/lub <tfoot>

·         Pomimo, że tagi takie jak <b>, <i> znajdują się w specyfikacji to zaleca się stosowanie stylów. W przyszłości wszystkie atrybuty i znaczniki opisujące pod względem wizualnym stronę zostaną zlikwidowane. Atrybuty wymienione wyżej, które teraz można używać z niektórymi tagami w przyszłości zostaną zlikwidowane (np: size, width, height, border, align).

·         Przy znaczniku <img> należy używać atrybutu 'alt'.

·         Znaczniki nie mogą być skrzyżowane (patrz: Krzyżowanie znaczników).

·         Zamiast atrybutu name należy stosować atrybut id (patrz: Atrybuty 'id' i 'name')

·         Wartości atrybutów podobnie jak w innych aplikacjach XML mogą być zawarte w symbolach '' 'przyk.gif'

·         Skrypty i style wewnątrz dokumentu muszą znajdować się miedzy sekcją CDATA (patrz: Skrypty i style).

·         Więcej nowych cech znajduje się w dalszych częściach kursu (patrz: 'Inne ważne zasady').

Większość cech wymienionych wyżej nie związanych z HTML pochodzi z XML.
Więcej informacji o XML znajduje się na stronie Pawła Stroińskiego.

A oto przykład dokumentu XHTML:

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"

  content="text/html; charset=iso-8859-2" />

<title>Przypładowa strona</title>

</head>

<body>

<p>Oto przykład</p>

<hr />

<img src="przyk.gif" alt="tekst" />

</body>

</html>

 

Specyfikacja XHTML

Co to jest specyfikacja?

Specyfikacja to pełny zbiór zasad i reguł dotyczących danego języka np. XHTML, HTML, SVG itp. Specyfikacja jest ustalana przez specjalistów z danej dziedziny (w tym przypadku ludzi z W3C), wytycza ona drogi rozwoju dla języków. Specyfikacja XHTML jest napisana w języku angielskim (występuje w niej wiele specjalistycznych wyrażeń) a co za tym idzie jest trudna do zrozumienia. Ten kurs w poszczególnych rozdziałach przedstawia zasady zawarte w specyfikacji napisane prostym językiem (i jak widać po polsku:-). Część informacji zawartych w tym kursie nie występuje w specyfikacji XHTML ale jest równie ważna (czasami są one zawarte w innych specyfikacjach zgodnych z XHTML np. w XML, inne zaś są rodzajami reguł ogólnie przyjętych zgodnych oczywiście ze specyfikacjami).

Specyfikacja HTML

XHTML jest bardzo podobny do HTML i XML. Specyfikacja XHTML nie zawiera opisu znaczników i atrybutów, ponieważ jest to zawarte w specyfikacji HTML 4.01 (patrz: 'Informacje ogólne', 'Znaczniki' i 'Atrybuty'). Specyfikacja HTML 4.01 jest poprawioną i uzupełnioną wersją specyfikacji HTML 4.0. HTML jest uproszczoną wersją metajęzyka SGML.

Specyfikacja HTML 4.01: http://www.w3.org/TR/html401/

Specyfikacja XHTML i XML

Specyfikacja XHTML zawiera reguły, które są związane z XML. Inaczej mówiąc (właściwie pisząc:-) XHTML jest odmianą języka HTML przeformatowanego do metajęzyka XML. XHTML jest więc zgodny XML, który w przyszłości stanie się standardem przechowywania informacji nie tylko stron internetowych. Od niedawna pojawiła się uproszczona wersja XHTML - Basic XHTML (patrz: 'Basic XHTML').

Scecyfikacja XML: http://www.w3.org/TR/REC-xml/
Specyfikacja XHTML 1.0: http://www.w3.org/TR/xhtml1/
Specyfikacja XHTML 1.1: http://www.w3.org/TR/xhtml11/
Specyfikacja Basic XHTML: http://www.w3.org/TR/xhtml-basic/

Większość informacji ze specyfikacji dotyczących XHTML jest zawarte w tym kursie (a niektórych informacji nawet nie znajdziesz w specyfikacji).

Specyfikacja CSS

Osoby znające HTML i XML nie będą mieli żadnych problemów z opanowaniem języka XHTML (pozostali będą się musieli trochę pomęczyć, ale zapewniam, że XHTML to prosty język:-). Niestety sam XHTML nie wystarczy, trzeba znać style kaskadowe, które zajmują się formatowaniem i upiększaniem stron (tzw. Strona napisana w czystym XHTML wygląda niezbyt ładnie). Jeśli ktoś miał wcześniej styczność z CSS1 nie będzie miał problemu z opanowaniem CSS2, ponieważ obydwie specyfikacje są do siebie bliźniaczo podobne. Większość dokumentów zgodnych z CSS1 jest zarówno zgodne z CSS2. Specyfikacja CSS2 nie jest nowa, była już zalecana do HTML (patrz: 'Style w XHTML'). Do mniej skomplikowanych dokumentów wystarczy nawet CSS1. Ostatnio prowadzone są prace nad CSS3. Warto pamiętać, że CSS2 nie jest jeszcze w pełni interpretowany przez przeglądarki a CSS3 to zupełna nowość.

Specyfikacja CSS2: http://www.w3.org/TR/REC-CSS2/
Specyfikacja CSS1: http://www.w3.org/TR/REC-CSS1

Inne specyfikacje

XHTML został stworzony aby współistnieć z innymi językami znacznikowymi zgodnymi z XML. Większość tych języków są specyfikacjami W3C, inne czekają na standaryzację. Na stronie http://www.w3.org/TR/ znajdują się wszystkie specyfikacje (i rekomendacje) tych języków. Istnieje tendencja do przydzielania określonym zadaniom odpowiednich języków (a nie wprowadzanie nowych znaczników do XHTML) np. aby zapisać równanie matematyczne w XHTML wystarczy wstawić odpowiedni fragment języka MathML (patrz: Matematyka w XHTML).

Kilka języków znacznikowych uzupełniających XHTML o nowe funkcje:

SMIL

Język umożliwiający wstawianie animacji, wideo, dźwięku i obrazu.

SVG

Język zapisu obrazu wektorowego (patrz: Animacje Flash a XHTML).

MathML

Język opisu równań matematycznych (patrz: Matematyka w XHTML).

XForms

Język opisu formularzy, ma większe możliwości niż XHTML.

Ruby Annotation

Język opisu tekstu Ruby, szczególnie związany z XHTML 1.1 (patrz: Ruby w XHTML).

XFrames

Język do opisu ramek.

Więcej informacji w dziale ...

Zgłoś jeśli naruszono regulamin