Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
CAPITOLUL 11
XHTML
XHTML
XHTML este un acronim pentru EXtensible HyperText Markup Language.
XHTML este noua generaţie de HTML, conformă cu tehnologia XML. Astfel, XHTML are facilitaţi
moştenite de la ambele limbaje de marcare:
Similar limbajului HTML, XHTML poate fi utilizat la crearea paginilor Web. Există
câteva diferenţe minore, dar capacităţile limbajului HTML obişnuit au fost păstrate în
XHTML;
Similar limbajului XML, XHTML poate fi utilizat cu toate aplicaţiile XML. Codul este mai
strict, dar, în acelşi timp, mai stabil şi mai curat.
Reţineţi că pentru afişarea corectă a unei pagini XHTML, un browser trebuie să recunoască şi să
accepte limbajul XHTML. Pentru a păstra compatibilitatea cu browserele mai vechi, codul din
fişierele XHTML trebuie scris cu atenţie (pentru detalii, vezi secţiunile următoare ale acestui
capitol).
Declaraţie XML
Pentru a declara un fişier XHTML ca fişier XML, prima linie trebuie sa conţină o declaraţie XML cu
sintaxa:
<?xml version="1.0" encoding="UTF-8"?>
Observaţii:
Declaraţia XML este recomandată, dar nu obligatorie;
Declaraţia XML poate genera unele probleme la afişarea documentului XHTML cu
browsere care nu recunosc Iimbajul XHTML;
Utilizaţi această declaraţie XML dacă fişierul XHTML utilizează o codificare de
caractere diferită de codificările prestabilite, UTF-8 sau UTF-16, şi nu aveţi un element
<meta> care să precizeze codificarea caracterelor utilizată de către pagina XHTML.
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 1 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
Declaraţia DOCTYPE
Fişierele XHTML trebuie să conţină o declaraţie DOCTYPE.
Pentru această declaraţie obligatorie există trei posibilităţi:
XHTML 1.0 Strict: În acest caz, nu puteţi utiliza elementele HTML 4.01 depreciate
<applet>, <basefont>, <center>, <dir>, <font>, <isindex>, <menu>, <s>, <strike> şi
<u>) şi nici elementele HTML 4.01 depăşite (<listing>, <plaintext> şi <xmp>). Sintaxa
este:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
XHTML 1.0 Transitional: În acest caz, puteţi utiliza elementele depreciate, dar nu pe
cele depăşite. Sintaxa este:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
XHTML 1.0 Frameset: În acest caz, puteţi utiliza elementele <frameset> şi <frame>.
Sintaxa este:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
Observaţii:
Toate aceste declaraţii DOCTYPE precizează "html" ca element rădăcină al fişierului
XHTML şi un identificator "PUBLIC" ce face referire la un fişier DTD care conţine
regulile pe care trebuie sa Ie respecte fişierul XHTML;
Plasaţi declaraţia DOCTYPE pe prima IInie a fişierului XHTML, dacă Iipseşte
declaraţia XML, sau imediat după declaraţia XML, dacă aceasta există;
Declaraţia DOCTYPE trebuie plasată înainte de elementul rădăcină "html" al fişierului
XHTML.
Metadate
În cazul în care vă hotărâţi să nu includeţi o declaraţie XML în fişierul XHTML, se recomandă
includerea unei etichete <meta> care declară setul de caractere utilizat de către document.
Folosiţi următoarea sintaxa:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
Reţineţi că, dacă doriţi, puteţi include ambele elemente.
Radăcina documentului XHTML
Un fişier XHTML trebuie să aibă "html" ca rădăcină a documentului. Rădăcina documentului
trebuie să aibă spaţiul de nume XHTML declarat astfel:
<html xmlns="[Link]
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 2 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
Rădăcina documentului trebuie să conţină doar două elemente: <head> şi <body>.
Utilizând toate informaţiile prezentate până în acest moment, putem construi un fişier XHTML
standard minim, aşa cum se arată în exemplul următor.
Creaţi în Notepad un nou fişier şi editaţi în el conţinutul de mai jos. Apoi salvaţi fişierul
denumindu-l [Link]. Vizualizaţi acest fişier cu ajutorul unui browser.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
[Link]">
<html xmlns="[Link]
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
</head>
<body>
Acesta este un document stabdard XHTML !!!
</body>
</html>
Fig: Textul editat cu Notepad în [Link] Fig: Vizualizare [Link]
Observaţii:
Extensia de nume pentru un fişier XHTML poate fi ".html" sau ".xhtml". Pentru a păstra
compatibilitatea cu browserele mai vechi, utilizaţi extensia ".html".
Elemente XHTML
Există câteva reguli care se aplică asupra elementelor XHTML:
Documentul XHTML trebuie să fie corect formatat. Acest lucru înseamnă că
elementele XHTML trebuie să fie imbricate complet unul în interiorul altuia.
Suprapunerea etichetelor de element este interzisă. De exemplu,<b><i>text</b></i>
este incorectă şi trebuie rescrisă astfel: <b><i>text</i></b>.
XHTML este un limbaj care face distincţie între majuscule şi litere mici. Numele
elementelor XHTML trebuie introduse în cod cu litere mici. De exemplu, elementele
<HTML> vor fi considerate incorecte sau aparţinand unui alt spaţiu de nume. Această
etichetă trebuie rescrisă sub forma <html>.
Toate elementele XHTML care nu sunt goale trebuie sa aibă o eticheta de deschidere
şi una de închidere şi să folosească sintaxa:
<nume_element>conţinut</nume_element>.
Aceste reguli se aplică în special asupra acelor elemente care nu sunt goale şi pentru
care, în HTML, eticheta de închidere este opţională. De exemplu:
o <body> conţinut </body>
o <colgroup> conţinut </colgroup>
o <dd> conţinut </dd>
o <dt> conţinut </dt>
o <head> conţinut </head>
o <html> conţinut </html>
o <li> conţinut </li>
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 3 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
o <option> conţinut </option>
o <p> conţinut </p>
o <tbody> conţinut </tbody>
o <td> conţinut </td>
o <tfoot> conţinut </tfoot>
o <th> conţinut </th>
o <thead> conţinut </thead>
o <tr> conţinut </tr>
Toate elementele goale trebuie să respecte una din următoarele sintaxe:
o <nume_element_gol/> (recomandat de W3C)
o <nume_element_gol /> (recomandat pentru browserele mai vechi)
o <nume_element_gol></nume_element_gol>
lată o listă cu toate elementele goale din HTML 4.01 şi cum Ie puteţi rescrie în XHTML:
<area/> <img/> <col/> <meta/>
<base/> <input/> <frame/> <param/>
<basefont/> <isindex/> <hr/> <link/>
<br/>
Creaţi în Notepad un nou fişier şi editaţi în el conţinutul de mai jos. Apoi salvaţi fişierul
denumindu-l [Link]. Vizualizaţi acest fişier cu ajutorul unui browser.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
[Link]">
<html xmlns="[Link]
<head>
<title>The standard XHTML document</title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
</head>
<body>
<table>
<tr><td>c11</td><td>c12</td></tr>
<tr><td>c21</td><td>c22</td></tr>
</table>
<basefont size="+5" face="fantasy" color="#00ff00" />
Acest text are fontul Fantasy.<br/>
<hr/ >
<form>
<input type="text" />
</form>
<hr />
<img src="[Link]" id="[Link]" />
</body>
</html>
Fig: Textul editat cu Notepad în [Link] Fig: Vizualizare [Link]
Atribute XHTML
Există câteva reguli care se aplică asupra atributelor XHTML:
Numele de atribute trebuie scrise în cod cu litere mici;
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 4 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
Valorile atributelor enumerate (cele care au valori predefinite) trebuie scrise cu litere
mici. De exemplu: <input type="text" value="Initial Text" />;
Valorile atributelor trebuie introduse între apostrofuri (‘) sau ghilimele (").
În interiorul valorilor atributelor trebuie evitate întreruperile de rând şi seriile de
caractere spaţiu.
Minimizarea atributelor este interzisă. Trebuie utilizată sintaxa următoare:
o checked="checked" pentru elementul <input>
o compact="compact" pentru elementele <dl>, <ol>, <ul>, <menu>, <dir>
o declare="declare" pentru elementul <object>
o defer="defer" pentru elementul <script>
o disabled="disabled" pentru elementele <button>, <input>, <optgroup>,
<option>, <select> şi <textarea>
o ismap="ismap" pentru elementele <img> şi <input>
o multiple="multiple" pentru elementul <select>
o nohref="nohref" pentru elementul <area>
o noresize="noresize" pentruelementul <frame>
o noshade="noshade" pentru elementul <hr>
o nowrap="nowrap" pentru elementele <td> şi <th>
o readonly="readonly" pentru elementele <input> şi <textarea>
o selected="selected" pentru elementul <option>
De exemplu:
<input type="checkbox" value="yes" name="cbl" checked="checked" />
În HTML 4.01, atributul name este utilizat pentru adăugarea unui identificator la
elementele <a>, <applet>, <frame>, <iframe>, <image> şi <map>. Aceste elemente
sunt apoi referite folosind respectivii identificatori. W3C recomandă utilizarea
atributului id în defavoarea atributului name. Pentru a păstra paginile Web XHTML
compatibile cu browserele mai vechi, este recomandat să includeţi ambele atribute
name şi id, ca în exemplul următor:
<img src="[Link]" id="iml" name="iml" />
Dacă utilizaţi atributul lang pentru un element, trebuie, de asemenea, să adăugaţi şi
atributul xml:lang, ca în exemplul următor (valorile atributelor xml:lang au prioritate):
<div lang="en" xml:lang="en">Acesta este un bloc div XHTML !</div>
Creaţi în Notepad un nou fişier şi editaţi în el conţinutul de mai jos.
Apoi salvaţi fişierul denumindu-l [Link].
Vizualizaţi acest fişier cu ajutorul unui browser.
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 5 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
[Link]">
<html xmlns="[Link]
<head>
<title>Atribute XHTML</title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
</head>
<body>
<form>
<input type="text" value="Text Initial"
readonly="readonly" />
<input type="checkbox" value="yes" name="cb1"
checked="checked" />
</form>
<img src="[Link]" id="rrr" name='rrr' />
<div lang="fr" xml:lang="fr">À propos,
précision, matériel, maîtrise, il peut
être très difficile
</div>
</body>
</html>
Fig: Textul editat cu Notepad în [Link] Fig: Vizualizare [Link]
XHTML şi CSS
Există mai multe reguli care se aplică fişierelor XHTML ce utilizează CSS:
Numele şi valorile proprietăţilor trebuie scrise în cod cu litere mici.
Dacă CSS este inserat într-un fişier extern, trebuie adaugată o declaraţie de foaie
XML utilizând sintaxa:
<?xml-stylesheet href="style_sheet_URL" type="text/css"?>
Dacă CSS este inserat într-un fişier XHTML, trebuie adăugată o declaraţie de foaie
XML utilizând sintaxa:
<?xml-stylesheet href="#internal_style_sheet_id" type="text/css"?>
Identificatorul "internal_style_sheet_id" este valoarea atributului "id" ataşat elememului <style>
care, în general, este inserat în elememul <head>. De exemplu:
<style id="internal_style_sheet_id" type="text/css">
p {color : red;}
</style>
Creaţi în Notepad un nou fişier şi editaţi în el conţinutul de mai jos. Apoi salvaţi fişierul
denumindu-l [Link]. Vizualizaţi acest fişier cu ajutorul unui browser.
Fişierul [Link] are următorul conţinut:
p {font-style : italic;}
div {color : blue;}
Fişierul [Link] are următorul conţinut:
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 6 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="[Link]" type="text/css"?>
<?xml-stylesheet href="#internal" type="text/css"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
[Link]">
<html xmlns="[Link]
<head>
<title>XHTML si CSS</title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="[Link]" />
<style id="internal" type="text/css">
p {color : red;\}
</style>
</head>
<body>
Acesta este un bloc de text normal.
<p>Acest paragraf are un stil definit in elementul
antetului documentului si intr-un fisier extern.</p>
<div>Acest element div are un stil definit intr-un fisier
extern css.</div>
Acesta este un bloc de text normal.
</body>
</html>
Fig: Textul editat cu Notepad în [Link] Fig: Vizualizare [Link]
XHTML şi elementele Script
Există câteva reguli care se aplica fişierelor XHTML ce utilizează cod JavaScript:
Se recomandă să folosiţi documente Script externe;
În XHTML, elementele <style> şi <script> sunt declarate ca având conţinut #PCDATA.
Acest lucru înseamnă că:
o orice caractere "<" şi "&" vor fi interpretate ca începutul unui element de
marcare, şi
o orice secvenţe de caractere "<" şi "&" vor fi interpretate ca referinţe de
entităţi pentru caracterele "<" şi "&".
Puteţi utiliza elementele <style> sau <script> ca în limbajul HTML dacă acestea nu
conţin unul din caracterele "<", "&", "<" sau "&".
În cazul în care elementele <style> sau <script> conţin cel puţin unul dintre caracterele
"<", "&", "<" sau "&", utilizaţi o secţiune CDATA pentru a evita o extindere a
acestor entităţi. Trebuie să ştiţi că unele browsere nu recunosc secţiunile CDATA. O
soluţie recomandată este ilustrată în exemplul următor (se utilizeaza sintaxa de
comentarii JavaScript "/ /" pentru a transforma în comentarii liniile "<![CDATA[" şi
"]]>"):
<script type="text/javascript"> //<![CDATA[
function f3(){
if (1<2) {alert("message");}
}
//]]>
</script>
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 7 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
În acest fel, fişierul ramâne un fişier XML, iar caracterul "<" este interpretat ca un operator "mai
mic ca" şi nu ca începutul unui element de marcare.
Creaţi în Notepad un nou fişier şi editaţi în el conţinutul de mai jos. Apoi salvaţi fişierul
denumindu-l [Link]. Vizualizaţi acest fişier cu ajutorul unui browser.
Fişierul extern [Link] ce conţine scriptul, are următorul conţinut:
Function f2()
{alert("Ati apasat butonul al 2-lea !!!");}
Fişierul [Link] are următorul conţinut:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
[Link]">
<html xmlns="[Link]
<head>
<title>Elemente XHTML si Script</title>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
<script type="text/javascript">
//<![CDATA[
function f1(){if (1<2) {alert("Ati apasat
butonul al 2-lea !!!");}}
//]]>
</script>
<script src="[Link]"></script>
</head>
<body>
<form>
<input type="button" name="b1" id="b1"
value="b1" onClick="f1();" />
<input type="button" name="b2" id="b2"
value="b2" onClick="f2();" />
</form>
</body></html>
Fig: Textul editat cu Notepad în [Link] Fig: Vizualizare [Link]
Aplicaţii – Capitolul 11
1. Vizualizarea exemplelor de pe CD
Pe CD-ul livrat odată cu acest manual, în directorul Exemple_Studiate\Capitolul_11, aveţi toate
fişierele HTML discutate în acest capitol.
Deschideţi toate aceste fişiere în diferite browsere.
Revedeţi încă odată codul HTML aferent fiecărui exemplu vizualizat.
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 8 © Copyright – Top Quality Management
Curs la distanţă – WEB DESIGN
Modul 3 – CSS, XML, XHTML şi DHTML
Recapitulare – Capitolul 11
La sfârşitul acestui capitol ar trebui să ştiţi următoarele:
XHTML este un acronim pentru EXtensible HyperText Markup Language. XHTML este
noua generaţie a limbajului HTML, conformă cu tehnologia XML;
Pentru a declara un fişier XHTML ca fişier XML, prima linie de cod trebuie să conţină o
declaraţie XML cu sintaxa: <?xml version="1.0" encoding="UTF-8"?>;
Declaraţia XML este recomandată, dar nu este obligatorie;
Fişierele XHTML trebuie să conţină o declaraţie DOCTYPE;
Un fişier XHTML trebuie să aibă "html" ca rădăcină a documentului;
Rădăcina documentului trebuie să aibă numele de spaţiu XHTML declarat cu sintaxa:
<html xmlns="[Link]
Documentele XHTML trebuie să fie corect formatate;
XHTML este un limbaj care face diferenţa între majuscule şi litere mici;
Toate elementele XHTML care nu sunt goale trebuie sa aibă o etichetă de deschidere
şi una de închidere;
Toate elementele goale trebuie să respecte una din urmatoarele sintaxe:
<nume_element_gol/> sau <nume_element_gol />;
Numele de atribute trebuie scrise în cod cu litere mici;
Valorile atributelor enumerate (au valori predefinite) trebuie scrise cu litere mici;
Valorile atributelor trebuie introduse între apostrofuri (‘) sau ghilimele (");
Minimizarea atributelor este interzisă;
Numele şi valorile proprietăţilor CSS trebuie scrise în cod cu litere mici;
Se recomandă să utilizaţi documente Script externe.
V1.00 – curs Web Design – Modul 3 – CSS, XML, XHTML şi DHTML Pagina 9 © Copyright – Top Quality Management