Tutorial XHTML - Introducerea in XHTML
Pagina 1 din 1
Tutorial XHTML - Introducerea in XHTML
Scris de dalem Joi Sept 23, 2010 9:11 pm
Am sa incerc sa explic in cateva pagini limbajul de programare XHTML. Un tutorial pe care ar fi trebuit sa il scriu de mult dar mi-a fost imposibil.
eXtensible HyperText Markup Language, sau pe numele lui mic XHTML, este o versiune mult mai stricta si mai curata a HTML. Poate fi considerat o combinatie intre Html si XML.
Xhtml 1.0 a devenit o recomandare a W3C (World Wide Web Consortium) la data de 26 ianuarie 2000.
XHTML este un standard compatibil cu toate browserele si este aproape identic cu HTML 4.01.
Diferente intre HTML si XHTML
Dupa cum am spus ceva mai sus XHTML este o versiune stricta a html-ului. Vom lua un exemplu pentru a demonstra aceasta afirmatie.
De exemplu, multe browsere ar afisa codul de ma jos fara erori.
<html>
<head>
</head>
<title>Un exemplu de cod HTML cu greseli</title>
<body>
<h1>Titlu aici
<p>Text intr-un paragraf
<body>
Acesta nu ar fi un cod valid din punct de vedere XHTML.
In XHTML toate elementele trebuiesc
- inchise intotdeauna
- inchise in aceasi ordine in care au fost deschise
- scrise cu litere mici
- deschise si inchise in ordinea specifica
Voi exemplifica putin fiecare afirmatie.
1. In XHTML toate elementele trebuiesc inchise
Cod HTML acceptat de browser
<p>Acesta este un paragraf
<p>Acesta este un alt paragraf
Cod corect XHTML
<p>Acesta este un paragraf</p>
<p>Acesta este un alt paragraf</p>
O greseala intalnita destul des este neinchiderea elementelor unei liste
<ul>
<li>Element 1
<li>Element 2
</ul>
Cod corect XHTML
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
2. In XHTML toate elementele trebuiesc inchise in ordinea in care au fost deschise
Cod HTML acceptat de browser
<b><i>Acest text este ingrosat si inclinat in acelasi timp</b></i>
Cod corect XHTML
<b><i>Acest text este ingrosat si inclinat in acelasi timp</i></b>
3. In XHTML toate elementele trebuiesc scrise cu minuscule.
Cod HTML acceptat de browser
<HTML>
<HEAD>
<TITLE>Cod XHTML incorect</TITLE>
</HEAD>
<BODY>
<P>Un paragraf oarecare</P>
</BODY>
</HTML>
Cod corect XHTML
<html>
<head>
<title>Cod XHTML corect</title>
</head>
<body>
<p>Un paragraf oarecare</p>
</body>
</html>
4. Toate elemente XHTML trebuiesc deschise si inchise in ordinea specifica. Ma refer aici la faptul ca toate elementele trebuiesc incapsulate in cele doua taguri <html> iar celelalte elemente deschise si inchise in ordinea corespunzatoare.
<html>
<head>....</head>
<body>....</body>
</html>
eXtensible HyperText Markup Language, sau pe numele lui mic XHTML, este o versiune mult mai stricta si mai curata a HTML. Poate fi considerat o combinatie intre Html si XML.
Xhtml 1.0 a devenit o recomandare a W3C (World Wide Web Consortium) la data de 26 ianuarie 2000.
XHTML este un standard compatibil cu toate browserele si este aproape identic cu HTML 4.01.
Diferente intre HTML si XHTML
Dupa cum am spus ceva mai sus XHTML este o versiune stricta a html-ului. Vom lua un exemplu pentru a demonstra aceasta afirmatie.
De exemplu, multe browsere ar afisa codul de ma jos fara erori.
<html>
<head>
</head>
<title>Un exemplu de cod HTML cu greseli</title>
<body>
<h1>Titlu aici
<p>Text intr-un paragraf
<body>
Acesta nu ar fi un cod valid din punct de vedere XHTML.
In XHTML toate elementele trebuiesc
- inchise intotdeauna
- inchise in aceasi ordine in care au fost deschise
- scrise cu litere mici
- deschise si inchise in ordinea specifica
Voi exemplifica putin fiecare afirmatie.
1. In XHTML toate elementele trebuiesc inchise
Cod HTML acceptat de browser
<p>Acesta este un paragraf
<p>Acesta este un alt paragraf
Cod corect XHTML
<p>Acesta este un paragraf</p>
<p>Acesta este un alt paragraf</p>
O greseala intalnita destul des este neinchiderea elementelor unei liste
<ul>
<li>Element 1
<li>Element 2
</ul>
Cod corect XHTML
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
2. In XHTML toate elementele trebuiesc inchise in ordinea in care au fost deschise
Cod HTML acceptat de browser
<b><i>Acest text este ingrosat si inclinat in acelasi timp</b></i>
Cod corect XHTML
<b><i>Acest text este ingrosat si inclinat in acelasi timp</i></b>
3. In XHTML toate elementele trebuiesc scrise cu minuscule.
Cod HTML acceptat de browser
<HTML>
<HEAD>
<TITLE>Cod XHTML incorect</TITLE>
</HEAD>
<BODY>
<P>Un paragraf oarecare</P>
</BODY>
</HTML>
Cod corect XHTML
<html>
<head>
<title>Cod XHTML corect</title>
</head>
<body>
<p>Un paragraf oarecare</p>
</body>
</html>
4. Toate elemente XHTML trebuiesc deschise si inchise in ordinea specifica. Ma refer aici la faptul ca toate elementele trebuiesc incapsulate in cele doua taguri <html> iar celelalte elemente deschise si inchise in ordinea corespunzatoare.
<html>
<head>....</head>
<body>....</body>
</html>
dalem- Moderator
Prenume/Nume : Damian
Mesaje : 60
Puncte : 165 Reputatie : 1
Data de inscriere : 09/09/2010
Tutoriale XHTML - Sintaxa XHTML
Scris de dalem Joi Sept 23, 2010 9:11 pm
Reguli de sintaxa in XHTML :
- atributele trebuiesc scrise cu litere mici
- valorile atributelor trebuiesc scrise intre ghilimele
- atributul name este inlocuit de atributul id
- prescurtarea nu este permisa
- toate documentele XHTML au o declaratie DOCTYPE care contine toate elementele specifice HTML-ului (html, head, title, body).
Voi exemplifica mai jos fiecare afirmatie
1. In XHTML toate atributele trebuiesc scrise cu litere mici.
Cod HTML acceptat de browser
<table BORDER="0">
Cod XHTML corect
<table border="0">
2. In XHTML, valorile tuturor atributelor trebuiesc scrise intre ghilimele.
Cod HTML acceptat de browser
<table border=0>
Cod XHTML corect
<table border="0">
3. In XHTML atributul name este inlocuit de atributul id
In html 4.01, tagurile: applet, frame, iframe si img pot avea definit atributul name. In XHTML acesta este depreciat folosinduse in schimb atributul id.
Unele browsere mai vechi nu recunosc tagul id in acest context. Pentru rezolvarea acestei probleme se pot folosi ambele taguri.
Cod HTML acceptat de browser
<img src="imagine.jpg" name="fotografie"/>
Cod XHTML corect
<img src="imagine.jpg" id="fotografie" />
<img src="imagine.jpg" name="fotografie" id="fotografie" />
Observatie:
In XHTML exista taguri precum: img, input br, hr, care nu au nevoie de tagul specific de inchidere. Pentru a le transforma in taguri valide XHTML vom adauga un spatiu inainte de semnul "/", transformandul in " /".
4. In XHTML nu este permisa prescurtarea atributelor
Cod HTML acceptat de browser
<input checked>
<option selected>
Cod XHTML corect
<input checked="checked" />
<option selected="selected" />
Am adaugat mai jos o lista cu toate atributele prescurtate
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
5. Toate diocumentele XHTML au o declaratie DOCTYPE care contine toate elementele specifice HTML-ului (html, head, title, body).
Declaratia DOCTYPE nu este un element in sine dupa cum vom vedea in capitolul urmator
<!DOCTYPE Declaratia doctype va fi pusa aici>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>Titlul pagini</title>
</head>
<body>
</body>
</html>
Observatie
Desi atributul xmlns intalnit in tagul <html> este obligatoriu, nu va fi nici o problema daca nu il punem. Ma cam contrazic nu-i asa? Explicatia este simpla: Acest atribut este atat de obligatoriu incat daca nu il punem, atunci cand validam documentul la w3.org, acesta va fi adaugat de la sine cu valoarea "xmlns=http://www.w3.org/1999/xhtml";, fiind valoarea standard.
Atributul Lang in XHTML
Desi motoarele de cautare de multe ori detecteaza automat limba principala a unui website este important sa o specificam in prealabil.
Vom face aceasta dupa cum urmeaza:
<html lang="ro-RO" xml:lang="ro-RO" xmlns ="http://www.w3.org/1999/xhtml";>
De multe ori specificare limbi unui website este intalnita sub aceasta forma:
<meta http-equiv="Content-Language" content="ro" />
w3.org valideaza aceasta expresie fara nici o problema. Se recomanda insa folosirea metoda xml:lang in locul http-equiv, cconform standardului XHTML.
In cazul in care avem un paragraf in alta limba decat cea specificata la inceputul documentului vom proceda in felul urmator:
<div lang="en-RO" xml:lang="en-RO">Continut in engleza pentru vorbitorii de limba romana</div>
Sau pentru continut in alta limba decat cea specificata la inceputul documentului XHTML dar care poate fi acceptat ca si continut universal. Un exemplu ar ilustra aceasta mult mai simplu:
<div lang="it" xml:lang="no">Ciao</div>
Desi pare complicat, cu putina practica lucrurile se simplifica de la sine.
Pentru o list acompleta cu limba si prescurtarea corespunzatoare, pentru construirea tagului "lang" va rog vizitati www.w3.org
- atributele trebuiesc scrise cu litere mici
- valorile atributelor trebuiesc scrise intre ghilimele
- atributul name este inlocuit de atributul id
- prescurtarea nu este permisa
- toate documentele XHTML au o declaratie DOCTYPE care contine toate elementele specifice HTML-ului (html, head, title, body).
Voi exemplifica mai jos fiecare afirmatie
1. In XHTML toate atributele trebuiesc scrise cu litere mici.
Cod HTML acceptat de browser
<table BORDER="0">
Cod XHTML corect
<table border="0">
2. In XHTML, valorile tuturor atributelor trebuiesc scrise intre ghilimele.
Cod HTML acceptat de browser
<table border=0>
Cod XHTML corect
<table border="0">
3. In XHTML atributul name este inlocuit de atributul id
In html 4.01, tagurile: applet, frame, iframe si img pot avea definit atributul name. In XHTML acesta este depreciat folosinduse in schimb atributul id.
Unele browsere mai vechi nu recunosc tagul id in acest context. Pentru rezolvarea acestei probleme se pot folosi ambele taguri.
Cod HTML acceptat de browser
<img src="imagine.jpg" name="fotografie"/>
Cod XHTML corect
<img src="imagine.jpg" id="fotografie" />
<img src="imagine.jpg" name="fotografie" id="fotografie" />
Observatie:
In XHTML exista taguri precum: img, input br, hr, care nu au nevoie de tagul specific de inchidere. Pentru a le transforma in taguri valide XHTML vom adauga un spatiu inainte de semnul "/", transformandul in " /".
4. In XHTML nu este permisa prescurtarea atributelor
Cod HTML acceptat de browser
<input checked>
<option selected>
Cod XHTML corect
<input checked="checked" />
<option selected="selected" />
Am adaugat mai jos o lista cu toate atributele prescurtate
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
5. Toate diocumentele XHTML au o declaratie DOCTYPE care contine toate elementele specifice HTML-ului (html, head, title, body).
Declaratia DOCTYPE nu este un element in sine dupa cum vom vedea in capitolul urmator
<!DOCTYPE Declaratia doctype va fi pusa aici>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>Titlul pagini</title>
</head>
<body>
</body>
</html>
Observatie
Desi atributul xmlns intalnit in tagul <html> este obligatoriu, nu va fi nici o problema daca nu il punem. Ma cam contrazic nu-i asa? Explicatia este simpla: Acest atribut este atat de obligatoriu incat daca nu il punem, atunci cand validam documentul la w3.org, acesta va fi adaugat de la sine cu valoarea "xmlns=http://www.w3.org/1999/xhtml";, fiind valoarea standard.
Atributul Lang in XHTML
Desi motoarele de cautare de multe ori detecteaza automat limba principala a unui website este important sa o specificam in prealabil.
Vom face aceasta dupa cum urmeaza:
<html lang="ro-RO" xml:lang="ro-RO" xmlns ="http://www.w3.org/1999/xhtml";>
De multe ori specificare limbi unui website este intalnita sub aceasta forma:
<meta http-equiv="Content-Language" content="ro" />
w3.org valideaza aceasta expresie fara nici o problema. Se recomanda insa folosirea metoda xml:lang in locul http-equiv, cconform standardului XHTML.
In cazul in care avem un paragraf in alta limba decat cea specificata la inceputul documentului vom proceda in felul urmator:
<div lang="en-RO" xml:lang="en-RO">Continut in engleza pentru vorbitorii de limba romana</div>
Sau pentru continut in alta limba decat cea specificata la inceputul documentului XHTML dar care poate fi acceptat ca si continut universal. Un exemplu ar ilustra aceasta mult mai simplu:
<div lang="it" xml:lang="no">Ciao</div>
Desi pare complicat, cu putina practica lucrurile se simplifica de la sine.
Pentru o list acompleta cu limba si prescurtarea corespunzatoare, pentru construirea tagului "lang" va rog vizitati www.w3.org
dalem- Moderator
- Prenume/Nume : Damian Mesaje : 60 Puncte : 165 Reputatie : 1 Data de inscriere : 09/09/2010
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum