cursul pagweb 2

24
TEHNOLOGII TEHNOLOGII WEB WEB CURSUL CURSUL 2 2 HTML versus XHTML HTML versus XHTML - continuare - - continuare -

Upload: matei-oli

Post on 22-Dec-2015

224 views

Category:

Documents


1 download

DESCRIPTION

HTML versus XHTML

TRANSCRIPT

TEHNOLOGIITEHNOLOGII WEB WEB

CURSUL CURSUL 2 2

HTML versus XHTMLHTML versus XHTML

- continuare -- continuare -

2204/18/2304/18/23 Tehnologii WEBTehnologii WEB

C2 – C2 – HTML versus XHTMLHTML versus XHTML - continuare- continuare

1. Regulile de aur ale paginilor Web – s3

2. HTML - Structura unui document HTML4 strict – s4

3. XHTML - Structura unui document XHTML 1.0 – s9

4. Conversie HTML în XHTML – s18

3304/18/2304/18/23 Tehnologii WEBTehnologii WEB

1. Regulile de aur ale paginilor Web

Pagina de primirePagina de primire este prima pagină a unui siteeste prima pagină a unui site numiţi pagina de primire numiţi pagina de primire index.htmindex.htm sau sau index.htmlindex.html ea trebuie să conţină un rezumat succint al site-ului ea trebuie să conţină un rezumat succint al site-ului

Alte paginiAlte pagini fiecare pagină trebuie să înceapă cu informaţii importante, fiecare pagină trebuie să înceapă cu informaţii importante,

esenesenţţialeiale NUNU publicaţi o pagină în curs de realizare publicaţi o pagină în curs de realizare ! ! AActualizaţi în mod regulat paginilectualizaţi în mod regulat paginile ! ! utilizaţi utilizaţi fişiere de dimensiune minimalăfişiere de dimensiune minimală pentru ca vizitatorul să nu pentru ca vizitatorul să nu

aştepte minute în şir apariţia întregii pagini pe ecranaştepte minute în şir apariţia întregii pagini pe ecranTextulTextul

structuraţi textul utilizând structuraţi textul utilizând titluri de nivele diferitetitluri de nivele diferite pentru a garanta o pentru a garanta o bună lizibilitatebună lizibilitate, utilizaţi cel mult două sau trei , utilizaţi cel mult două sau trei

fonturifonturi verificaţi verificaţi corectitudinea informaţiilorcorectitudinea informaţiilor

Privilegiaţi interactivitateaPrivilegiaţi interactivitatea evitaţi instrucţiunile specifice unui anumit tip de navigator evitaţi instrucţiunile specifice unui anumit tip de navigator

((universaluniversalitate)itate) creaţi o legătură (link) de tip mailtocreaţi o legătură (link) de tip mailto prevedeţi un FAQ (Frequently Asked Questions)prevedeţi un FAQ (Frequently Asked Questions), , nu va trebui să nu va trebui să

răspundeţi de mai multe ori la întrebări puse frecvent.răspundeţi de mai multe ori la întrebări puse frecvent.

4404/18/2304/18/23 Tehnologii WEBTehnologii WEB

2. HTML - Structura unui document HTML4 strict

O pagină Web validă este alcătuită din trei părţi:O pagină Web validă este alcătuită din trei părţi: tipul documentuluitipul documentului secţiunea de antetsecţiunea de antet corpul paginii Webcorpul paginii Web

Exemplu:Exemplu:

5504/18/2304/18/23 Tehnologii WEBTehnologii WEB

2. HTML - Structura unui document HTML4 strict

Declaraţia Declaraţia DOCTYPEDOCTYPE precizează precizează tipul de documenttipul de document consorţiului W3C a definit trei consorţiului W3C a definit trei DTDDTD-uri (Document Type Definition)-uri (Document Type Definition)::

DTD HTML 4.01 strictDTD HTML 4.01 strict, care defineşte versiunea cea mai , care defineşte versiunea cea mai corectă a limbajului HTML 4corectă a limbajului HTML 4

DTD HTML 4.01 framesetDTD HTML 4.01 frameset, care permite în plus crearea , care permite în plus crearea cadrelorcadrelor

DTD HTML 4.01 transitionalDTD HTML 4.01 transitional, care, în plus faţă de elementele , care, în plus faţă de elementele DTD-ului strict, suportă încă elemente nerecomandate ale DTD-ului strict, suportă încă elemente nerecomandate ale versiunii 3.2versiunii 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">"http://www.w3.org/TR/html4/strict.dtd">

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

"http://www.w3.org/TR/html4/frameset.dtd">"http://www.w3.org/TR/html4/frameset.dtd">

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

"http://www.w3.org/TR/html4/loose.dtd">"http://www.w3.org/TR/html4/loose.dtd">

6604/18/2304/18/23 Tehnologii WEBTehnologii WEB

2. HTML - Structura unui document HTML4 strict

Elementul <HTML>Elementul <HTML>numit element rădăcină în terminologia XMLnumit element rădăcină în terminologia XML

<HTML> are 2 secţiuni<HTML> are 2 secţiuni <HEAD><HEAD> şişi <BODY><BODY>:: antetul documentului, introdus prin tag-urile antetul documentului, introdus prin tag-urile <HEAD> <HEAD> şi şi </HEAD></HEAD> corpul documentului, introdus prin tag-urile corpul documentului, introdus prin tag-urile <BODY> <BODY> şişi </BODY> </BODY>

secţiunea de antet poate conţine următoarele elemente:secţiunea de antet poate conţine următoarele elemente:<BASE>, <LINK>, <BASE>, <LINK>, <META>, <SCRIPT>, <STYLES> şi <META>, <SCRIPT>, <STYLES> şi <TITLE><TITLE>, ultimul fiind obligatoriu, ultimul fiind obligatoriu

tag-ul tag-ul <META><META> preciz precizeeaazăză cuvintele cheie ale paginii cuvintele cheie ale paginii, poate fi definit în două , poate fi definit în două moduri diferite, cu atributele:moduri diferite, cu atributele:

nnameame - d - diferite valori ale atributului sunt cuvinte cheie utilizate de motoarele de iferite valori ale atributului sunt cuvinte cheie utilizate de motoarele de căutare pentru indexarea paginilor Web căutare pentru indexarea paginilor Web

http-equivhttp-equiv – permite adăugarea de perechi nume/valoare în antetul documentului – permite adăugarea de perechi nume/valoare în antetul documentului transmis prin servertransmis prin server

elementul elementul <<titletitle>> conţine titlul paginii şi esteconţine titlul paginii şi este a afişat în fişat în bara de titlu a bara de titlu a navigatoruluinavigatorului

ttag-urile de comentariiag-urile de comentarii:: sintaxa:sintaxa: <!--<!--comentariucomentariu --> --> vvă ajute în înţelegerea codului (el nu va fi interpretat de navigator dacă ă ajute în înţelegerea codului (el nu va fi interpretat de navigator dacă

conţine tag-uri HTMLconţine tag-uri HTML ccomentariile joacă un rol particular în cadrul stilurilor. Ele permit vechilor omentariile joacă un rol particular în cadrul stilurilor. Ele permit vechilor

navigatoare să nu afişeze definiţia stilurilor, script-urile utilizate etc.navigatoare să nu afişeze definiţia stilurilor, script-urile utilizate etc.

7704/18/2304/18/23 Tehnologii WEBTehnologii WEB

2. HTML - Structura unui document HTML4 strict

ttag-urile ag-urile <BODY> <BODY> şişi </BODY> </BODY> definesc corpul documentului definesc corpul documentului

ttoate tag-urile (de nivel 1) imbricate în elementul <BODY> trebuie oate tag-urile (de nivel 1) imbricate în elementul <BODY> trebuie să fie conforme cu DTD HTML 4 strictsă fie conforme cu DTD HTML 4 strict

ValidaValidarearea documentel documenteloror HTML 4 strict HTML 4 strict

sserviciul de validareerviciul de validare:: verificărverificărăă pagin paginaa semnalsemnaleazăează eventualelor erori generate eventualelor erori generate (indicând (indicând numărul de linie şi numărul de linie şi

tipul de eroaretipul de eroare)) se afişează în pagină eticheta de validare se afişează în pagină eticheta de validare instrument de validare: aplicaţia open source instrument de validare: aplicaţia open source W3C Validator, W3C Validator,

disponibilă disponibilă pe site-ul: pe site-ul: http://validator.w3.orghttp://validator.w3.org

8804/18/2304/18/23 Tehnologii WEBTehnologii WEB

2. HTML - Structura unui document HTML4 strict

în urma validării se obţine în urma validării se obţine eticheta de validareeticheta de validare, generată de codul următor:, generată de codul următor:

Atribute HTML comuneAtribute HTML comune

<p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a></p>

="nume"

Atribuie un nume unic unui element din interiorul documentului. Când un element conţine de asemenea un atribut name este de dorit să utilizăm simultan cele două atribute (id şi name) atribuindu-le aceeaşi valoare.

Exemplu: <P id="p1"> Text paragraf </P>.

class="nume"Atribuie o clasa sau un element de clasa unui element. Acest atribut este frecvent

utilizat cu foile de stiluri CSS.Exemplu: <P class="avantaje"> Text paragraf </P>.

style="stil"Permite crearea unui stil local.Exemplu: <P style="background-color: red"> Text paragraf </P>.

title="text"Se aplica numai unui element dedicat şi nu întregului document.Exemplu: <P title="cititi paragraful"> Text paragraf </P>.

lang="cod"Precizează codul ISO al limbii.

Exemplu: <P lang="fr"> Text paragraf </P>.

dir="ltr\rtl" Precizeaza sensul de citire (left to right\ right to left) al unui text.

onclick, ondblclick, onkeydown, onkeypress, onkeyup,

onmousedown, onmousemove,onmouseout, onmouseover, Onmouseup

Atribute pentru gestionarea evenimentelor.

9904/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

XHTMLXHTML = reformulare a lui HTML 4.0 în termenii limbajului XML= reformulare a lui HTML 4.0 în termenii limbajului XML utilizează la fel ca şi HTML-ul marcaje (tag-uri)utilizează la fel ca şi HTML-ul marcaje (tag-uri) prima versiune apare în ianuarie 2000, revizuită în august 2000prima versiune apare în ianuarie 2000, revizuită în august 2000 e specificat în trei variante, ce definesc trei tipuri de documente e specificat în trei variante, ce definesc trei tipuri de documente DTDDTD::

XHTML 1.0 StrictXHTML 1.0 Strict – documente de acest tip nu conţin elemente sau atribute – documente de acest tip nu conţin elemente sau atribute considerate demodateconsiderate demodate

XHTML 1.0 TransitionalXHTML 1.0 Transitional – documente de acest tip pot conţine elemente – documente de acest tip pot conţine elemente HTML considerate demodateHTML considerate demodate

XHTML 1.0 FramesetXHTML 1.0 Frameset – documente de acest tip sunt folosite în situaţia în – documente de acest tip sunt folosite în situaţia în care se doreşte utilizarea cadrelor (frames)care se doreşte utilizarea cadrelor (frames)

101004/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

Exemplu:Exemplu:

111104/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

Declaraţia Declaraţia DOCTYPEDOCTYPE precizează precizează tipul de documenttipul de document consorţiului W3C a definit trei consorţiului W3C a definit trei DTDDTD-uri (Document Type Definition)-uri (Document Type Definition)::

DTD DTD XXHTML 1HTML 1.0.0 strict strict, care defineşte versiunea , care defineşte versiunea curată acurată a limbajului limbajului XXHTMLHTML, nu acceptă CSS, nu acceptă CSS

sau versiunea prescurtată:sau versiunea prescurtată:

DTD DTD XXHTML 1HTML 1.0.0 transitionaltransitional, care permite , care permite elemente CSSelemente CSS

DTD HTML 1DTD HTML 1.0.0 framesetframeset, , acceptă cadreacceptă cadre

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1-strict.dtd">"http://www.w3.org/TR/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transational//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transational//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">"DTD/xhtml1-strict.dtd">

121204/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

Elementul <HTML>Elementul <HTML>

identifică documentul ca pe un document HTML sau XHTMLidentifică documentul ca pe un document HTML sau XHTML

ppentru a preciza că documentul este un document XHTML, va entru a preciza că documentul este un document XHTML, va trebui să adăugaţi un spaţiu de nume XHTMLtrebui să adăugaţi un spaţiu de nume XHTML

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

<HTML> are 2 secţiuni<HTML> are 2 secţiuni <HEAD><HEAD> şişi <BODY><BODY>:: antetul documentului, introdus prin tag-urile antetul documentului, introdus prin tag-urile <HEAD> <HEAD> şi şi

</HEAD></HEAD> corpul documentului, introdus prin tag-urile corpul documentului, introdus prin tag-urile <BODY> <BODY> şişi

</BODY></BODY>

secţiunea de antet poate conţine următoarele elemente: secţiunea de antet poate conţine următoarele elemente: script, style, link, isindexscript, style, link, isindex (este înlocuit de elementul input), (este înlocuit de elementul input), basebase

131304/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

tag-ul tag-ul <META><META> este un fiu al elementului head, fiind un este un fiu al elementului head, fiind un element vid:element vid:

<meta http-equiv="Content-Type" <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />content="text/html;charset=UTF-8" />

elementul elementul <<titletitle>> conţine titlul paginii şi esteconţine titlul paginii şi este a afişat în fişat în bara bara de titlu a navigatoruluide titlu a navigatorului şi este obligatoriu ! şi este obligatoriu !

ttag-urile de comentariiag-urile de comentarii: (la fel ca şi la HTML): (la fel ca şi la HTML) sintaxa:sintaxa: <!--<!--comentariucomentariu --> --> vvă ajute în înţelegerea codului (el nu va fi interpretat de ă ajute în înţelegerea codului (el nu va fi interpretat de

navigator dacă conţine tag-uri HTMLnavigator dacă conţine tag-uri HTML ccomentariile joacă un rol particular în cadrul stilurilor. Ele omentariile joacă un rol particular în cadrul stilurilor. Ele

permit vechilor navigatoare să nu afişeze definiţia stilurilor, permit vechilor navigatoare să nu afişeze definiţia stilurilor, script-urile utilizate etc.script-urile utilizate etc.

141404/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

ttag-urile ag-urile <BODY> <BODY> şişi </BODY> </BODY> definesc corpul documentului definesc corpul documentuluittoate tag-urile (de nivel 1) imbricate în elementul <BODY> trebuie să fie oate tag-urile (de nivel 1) imbricate în elementul <BODY> trebuie să fie conforme cu DTD HTML conforme cu DTD HTML 1.0 strict1.0 strict

Atribute XHTML1 comuneAtribute XHTML1 comunecca şi în HTML, atributele:a şi în HTML, atributele:

id, style, class, lang, dir, title, onclick, ondblclick, onkeydown, onkeypress, id, style, class, lang, dir, title, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseuponmouseup

sunt comune şi elementelor XHTMLsunt comune şi elementelor XHTML

Observaţii:Observaţii:atributul atributul stylestyle NU poate fi utilizat cu elementele: <html>, <head>, <title>, NU poate fi utilizat cu elementele: <html>, <head>, <title>, <meta>, <style>, <script>, <param>, <base> şi <basefont><meta>, <style>, <script>, <param>, <base> şi <basefont>atributul atributul titletitle NU poate fi utilizat cu elementele: <html>, <head>, NU poate fi utilizat cu elementele: <html>, <head>, <meta>, <title>, <script>, <param>, <base> şi <basefont><meta>, <title>, <script>, <param>, <base> şi <basefont>

</head></head> <!--Corpul documentului--><!--Corpul documentului--> <body><body> <h1>Prima mea pagina <h1>Prima mea pagina Web</h1>Web</h1> </body></body></html></html>

151504/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

Elemente HTML depăşite în versiunea XHTML1Elemente HTML depăşite în versiunea XHTML1

Obiectiv principal al XHTML-ului:Obiectiv principal al XHTML-ului: separarea structurii documentului de forma sa de prezenataresepararea structurii documentului de forma sa de prezenatare

elemente HTML, care sunt depăşite în versiunea XHTML1, dar elemente HTML, care sunt depăşite în versiunea XHTML1, dar mereu utilizatemereu utilizate::

appletapplet, înlocuit de elementul object;, înlocuit de elementul object; basefontbasefont, înlocuit de , înlocuit de CSSCSS;; centercenter, înlocuit de , înlocuit de CSSCSS;; dirdir, înlocuit de elementul , înlocuit de elementul ulul;; fontfont, înlocuit de , înlocuit de CSSCSS;; isindexisindex, înlocuit de elementul , înlocuit de elementul inputinput;; menumenu, înlocuit de elementul , înlocuit de elementul ulul;; ss sau sau strikestrike, înlocuit de , înlocuit de CSSCSS;; uu, înlocuit de , înlocuit de CSSCSS

161604/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

ValidaValidarearea documentel documenteloror XXHTML HTML 11 strict strict (analog cu HMTL)(analog cu HMTL)

sserviciul de validareerviciul de validare:: verificărverificărăă pagin paginaa semnalsemnaleazăează eventualelor erori generate eventualelor erori generate (indicând (indicând numărul de linie şi numărul de linie şi

tipul de eroaretipul de eroare)) se afişează în pagină eticheta de validare se afişează în pagină eticheta de validare instrument de validare: aplicaţia open source instrument de validare: aplicaţia open source W3C Validator, W3C Validator,

disponibilă disponibilă pe site-ul: pe site-ul: http://validator.w3.orghttp://validator.w3.org

171704/18/2304/18/23 Tehnologii WEBTehnologii WEB

3. XHTML - Structura unui document XHTML 1.0

în urma validării se obţine în urma validării se obţine eticheta de validareeticheta de validare, generată de codul următor:, generată de codul următor:

<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88“ /></a></p>

181804/18/2304/18/23 Tehnologii WEBTehnologii WEB

4. Conversie HTML în XHTML

De ce trebuie să convertiţi documentele HTML?De ce trebuie să convertiţi documentele HTML?

XHTML XHTML == aplicaţie XML, un procesor XML poate prelucra XHTML; aplicaţie XML, un procesor XML poate prelucra XHTML;

XHTML poate fi extins pentru a integra alte modele de documente XHTML poate fi extins pentru a integra alte modele de documente (vocabulare) ca de exemplu(vocabulare) ca de exemplu::

SVG (Scalable Vector Graphics)SVG (Scalable Vector Graphics) SMIL (Synchronized Multimedia Integration Language)SMIL (Synchronized Multimedia Integration Language) MathML (Mathematic Markup Language)MathML (Mathematic Markup Language) propriul vocabular XMLpropriul vocabular XML

XHTML încurajează separarea stilului (documentului) de structura XHTML încurajează separarea stilului (documentului) de structura documentului;documentului;

XHTML oferă un cod mai clar, mai uşor de citit atât pentru procesor cât XHTML oferă un cod mai clar, mai uşor de citit atât pentru procesor cât şi pentru ochiul uman;şi pentru ochiul uman;

furnizorii de telefoane mobile au ales XHTML ca limbaj privilegiat;furnizorii de telefoane mobile au ales XHTML ca limbaj privilegiat;

conexiunea XHTML-XML a demonstrat costuri reduse în materie de conexiunea XHTML-XML a demonstrat costuri reduse în materie de copyright, de mentenanţă şi de dezvoltarecopyright, de mentenanţă şi de dezvoltare

W3C nu va mai dezvolta HTML, decât sub formă de noi versiuni XHTML.W3C nu va mai dezvolta HTML, decât sub formă de noi versiuni XHTML.

191904/18/2304/18/23 Tehnologii WEBTehnologii WEB

4. Conversie HTML în XHTML

Conversia este Conversia este posibilposibilăă în două moduri: în două moduri: convertire în mod manualconvertire în mod manual convertire în mod automat, utilizând aplicaţia convertire în mod automat, utilizând aplicaţia HTML TidyHTML Tidy

Convertiţi manual documentele HTMLConvertiţi manual documentele HTML

metodă mai puţin utilizatămetodă mai puţin utilizată

rreguli de convertire manualăeguli de convertire manuală

atunci când utilizaţi sintaxa elementului vid XML, atunci când utilizaţi sintaxa elementului vid XML, inseraţi un spaţiu inseraţi un spaţiu înaintea barei obliceînaintea barei oblice (/); exemplu: <br (/); exemplu: <br / />;>;

utilizaţi o utilizaţi o foaie de stiluri externăfoaie de stiluri externă sau documente de script în loc de sau documente de script în loc de a le imbrica între <head> şi </head> ale documentului XHTML;a le imbrica între <head> şi </head> ale documentului XHTML;

convertiţi toate numele de elemente şi atribute (şi valorile convertiţi toate numele de elemente şi atribute (şi valorile atributelor) care sunt scrise cu majuscule, în atributelor) care sunt scrise cu majuscule, în minusculeminuscule;;

202004/18/2304/18/23 Tehnologii WEBTehnologii WEB

4. Conversie HTML în XHTML

nu utilizaţi rupturi de linienu utilizaţi rupturi de linie pentru a mări lizibilitatea documentului; pentru a mări lizibilitatea documentului; inseraţi un spaţiu alb numai între elemente;inseraţi un spaţiu alb numai între elemente;

utilizaţi împreună atributele utilizaţi împreună atributele name name şişi id id pentru a asigura o pentru a asigura o compatibilitate perfectăcompatibilitate perfectă cu navigatoarele! Exemplu: cu navigatoarele! Exemplu: <a <a name=”unu” id=”unu”> … </a>name=”unu” id=”unu”> … </a>;;

pentru a asigura o pentru a asigura o compatibilitate totalăcompatibilitate totală utilizaţi în acelaşi timp utilizaţi în acelaşi timp atributele atributele langlang şi şi xmlxml;;

închideţi toate elementeleînchideţi toate elementele, inclusiv elementele vide;, inclusiv elementele vide; plasaţi între plasaţi între ghilimeleghilimele toate toate valorile atributelorvalorile atributelor;; atribuiţi atribuiţi valori tuturor atributelorvalori tuturor atributelor. Exemplu: . Exemplu: <input <input

type=”checkbox” checked=”checked” >type=”checkbox” checked=”checked” >;; imbricaţi corectimbricaţi corect elementele; elementele; utilizaţi declaraţia utilizaţi declaraţia DOCTYPE corespunzătoareDOCTYPE corespunzătoare;; introduceţi în tag-ul de deschidere <html> spaţiul de nume introduceţi în tag-ul de deschidere <html> spaţiul de nume

XHTML:XHTML:

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

212104/18/2304/18/23 Tehnologii WEBTehnologii WEB

4. Conversie HTML în XHTML

Convertiţi (automat) documentele HTML cu HTML TidyConvertiţi (automat) documentele HTML cu HTML Tidy

HTML TidyHTML Tidy instrument conceput de instrument conceput de David RagettDavid Ragett

eeste de un mare ajutor pentru toţi creatorii Webste de un mare ajutor pentru toţi creatorii Web

ddisponibil pe platformele Windows şi Macisponibil pe platformele Windows şi Mac

converteşte converteşte precis şi rapid precis şi rapid documentele HTML în XHTMLdocumentele HTML în XHTML

ddestinat la început curăţării codului HTML el a sfârşit prin a fi estinat la început curăţării codului HTML el a sfârşit prin a fi integrat ca plugin în cea mai mare parte a editoarelor HTMLintegrat ca plugin în cea mai mare parte a editoarelor HTML

posedă şi o versiune grafică, posedă şi o versiune grafică, Tidy GuiTidy Gui

222204/18/2304/18/23 Tehnologii WEBTehnologii WEB

4. Conversie HTML în XHTML

Avantaje HTML Tidy

corectează tag-urile finale desperecheatecorectează tag-urile finale desperecheate

corectează erorile de imbricarecorectează erorile de imbricare

localizează elementele prost plasate (exemplu: elementul td localizează elementele prost plasate (exemplu: elementul td este este plasat în interiorul elementului form) în interiorul elementului form)

modifică în mod automat toate numele de elemente şi atribute modifică în mod automat toate numele de elemente şi atribute care au fost scrise cu majusculecare au fost scrise cu majuscule

adaugă ghilimele (simple sau duble) valorilor atributeloradaugă ghilimele (simple sau duble) valorilor atributelor

232304/18/2304/18/23 Tehnologii WEBTehnologii WEB

4. Conversie HTML în XHTML

Modul de lucru cu HTML TidyModul de lucru cu HTML Tidy îîncărcaţi HTML-Kit de pe site-ul www.chami.com/html-kitncărcaţi HTML-Kit de pe site-ul www.chami.com/html-kit// iidentificaţi documentul dentificaţi documentul inceput.htminceput.htm ddeschideţi fişierul (File - Open).eschideţi fişierul (File - Open).

242404/18/2304/18/23 Tehnologii WEBTehnologii WEB

4. Conversie HTML în XHTML

îîn HTML-Kit selectaţi n HTML-Kit selectaţi Actions/ Actions/ Tools / HTML Tidy / Convert Tools / HTML Tidy / Convert to XHTMLto XHTML

înlocuiînlocuirearea vechiul document vechiul document ((inceput.htminceput.htm) HTML cu noul ) HTML cu noul document XHTMLdocument XHTML

folosiţi tab-ul folosiţi tab-ul OutputOutput

apoi apoi Edit / Copy Output to Edit / Copy Output to Editor Editor din aplicaţia utilitară din aplicaţia utilitară HTML KitHTML Kit

sselectaţi electaţi File – Save AsFile – Save As din din tab-ul tab-ul EditorEditor pentru a salva pentru a salva fişierul fişierul inceput.htminceput.htm versiunea HTML4 în XHTML 1 versiunea HTML4 în XHTML 1 sub denumirea sub denumirea inceput inceput modificat XHTML.htmmodificat XHTML.htm