Sunteți pe pagina 1din 24

TEHNOLOGII WEB

CURSUL 2

HTML versus XHTML


- continuare -

C2 HTML versus XHTML - 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

04/08/15

Tehnologii WEB

1.

Regulile de aur ale paginilor Web

Pagina de primire

este prima pagin a unui site

numii pagina de primire index.htm sau index.html

ea trebuie s conin un rezumat succint al site-ului


Alte pagini

fiecare pagin trebuie s nceap cu informaii importante, esen iale

NU publicai o pagin n curs de realizare !

Actualizai n mod regulat paginile !

utilizai fiiere de dimensiune minimal pentru ca vizitatorul s nu


atepte minute n ir apariia ntregii pagini pe ecran
Textul

structurai textul utiliznd titluri de nivele diferite

pentru a garanta o bun lizibilitate, utilizai cel mult dou sau trei
fonturi

verificai corectitudinea informaiilor


Privilegiai interactivitatea

evitai instruciunile specifice unui anumit tip de navigator


(universalitate)

creai o legtur (link) de tip mailto

prevedei un FAQ (Frequently Asked Questions), nu va trebui s


rspundei de mai multe ori la ntrebri puse frecvent.

04/08/15

Tehnologii WEB

2.

HTML - Structura unui document HTML4 strict

O pagin Web valid este alctuit din trei pri:

tipul documentului
seciunea de antet
corpul paginii Web

Exemplu:

04/08/15

Tehnologii WEB

2.

HTML - Structura unui document HTML4 strict

Declaraia DOCTYPE

precizeaz tipul de document

consoriului W3C a definit trei DTD-uri (Document Type


Definition):
DTD HTML 4.01 strict, care definete versiunea cea mai
corect a limbajului HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DTD HTML 4.01 frameset, care permite n plus crearea
cadrelor
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

DTD HTML 4.01 transitional, care, n plus fa de elementele


DTD-ului strict, suport nc elemente nerecomandate ale
versiunii 3.2

04/08/15

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


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

Tehnologii WEB

2.

HTML - Structura unui document HTML4 strict

Elementul <HTML>
numit element rdcin n terminologia XML
<HTML> are 2 seciuni <HEAD> i <BODY>:

antetul documentului, introdus prin tag-urile <HEAD> i </HEAD>


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

seciunea de antet poate conine urmtoarele elemente:<BASE>, <LINK>,


<META>, <SCRIPT>, <STYLES> i <TITLE>, ultimul fiind obligatoriu
tag-ul <META> precizeaz cuvintele cheie ale paginii, poate fi definit n dou
moduri diferite, cu atributele:

name - diferite valori ale atributului sunt cuvinte cheie utilizate de motoarele de
cutare pentru indexarea paginilor Web
http-equiv permite adugarea de perechi nume/valoare n antetul documentului
transmis prin server

elementul <title> conine titlul paginii i este afiat n bara de titlu a


navigatorului
tag-urile de comentarii:

sintaxa: <!--comentariu -->

v ajute n nelegerea codului (el nu va fi interpretat de navigator dac


conine tag-uri HTML

comentariile joac un rol particular n cadrul stilurilor. Ele permit vechilor


navigatoare s nu afieze definiia stilurilor, script-urile utilizate etc.

04/08/15

Tehnologii WEB

2.

HTML - Structura unui document HTML4 strict

tag-urile <BODY> i </BODY> definesc corpul documentului


toate tag-urile (de nivel 1) imbricate n elementul <BODY>
trebuie s fie conforme cu DTD HTML 4 strict
Validarea documentelor HTML 4 strict
serviciul de validare:

verificr pagina
semnaleaz eventualelor erori generate (indicnd numrul de linie i
tipul de eroare)
se afieaz n pagin eticheta de validare
instrument de validare: aplicaia open source W3C Validator,
disponibil pe site-ul: http://validator.w3.org

04/08/15

Tehnologii WEB

2.

HTML - Structura unui document HTML4 strict


<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. Cnd un element
conine de asemenea un atribut name este de dorit s utilizm simultan cele
dou atribute (id i name) atribuindu-le aceeai 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

04/08/15

Atribute pentru gestionarea evenimentelor.

Tehnologii WEB

3.

XHTML - Structura unui document XHTML 1.0

XHTML

= reformulare a lui HTML 4.0 n termenii limbajului XML


utilizeaz la fel ca i HTML-ul marcaje (tag-uri)
prima versiune apare n ianuarie 2000, revizuit n august 2000
e specificat n trei variante, ce definesc trei tipuri de documente DTD:

XHTML 1.0 Strict documente de acest tip nu conin elemente sau atribute
atribut
considerate demodate
XHTML 1.0 Transitional documente de acest tip pot conine elemente
HTML considerate demodate
XHTML 1.0 Frameset documente de acest tip sunt folosite n situaia n
care se dorete utilizarea cadrelor (frames)

04/08/15

Tehnologii WEB

3.

XHTML - Structura unui document XHTML 1.0

Exemplu:

04/08/15

Tehnologii WEB

10

3.

XHTML - Structura unui document XHTML 1.0

Declaraia DOCTYPE

precizeaz tipul de document

consoriului W3C a definit trei DTD-uri (Document Type


Definition):
DTD XHTML 1.0 strict, care definete versiunea curat a
limbajului XHTML, nu accept CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">

sau versiunea prescurtat:


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

DTD XHTML 1.0 transitional, care permite elemente CSS


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

DTD HTML 1.0 frameset, accept cadre


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

04/08/15

Tehnologii WEB

11

3.

XHTML - Structura unui document XHTML 1.0

Elementul <HTML>
identific documentul ca pe un document HTML sau XHTML
pentru a preciza c documentul este un document XHTML, va
trebui s adugai un spaiu de nume XHTML
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML> are 2 seciuni <HEAD> i <BODY>:

antetul documentului, introdus prin tag-urile <HEAD> i


</HEAD>

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


</BODY>
seciunea de antet poate conine urmtoarele elemente:
script, style, link, isindex (este nlocuit de elementul input),
base
04/08/15

Tehnologii WEB

12

3.

XHTML - Structura unui document XHTML 1.0

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


element vid:
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
elementul <title> conine titlul paginii i este afiat n bara
de titlu a navigatorului i este obligatoriu !
tag-urile de comentarii: (la fel ca i la HTML)

sintaxa: <!--comentariu -->

v ajute n nelegerea codului (el nu va fi interpretat de


navigator dac conine tag-uri HTML

comentariile joac un rol particular n cadrul stilurilor. Ele


permit vechilor navigatoare s nu afieze definiia stilurilor,
script-urile utilizate etc.
04/08/15

Tehnologii WEB

13

3.

XHTML - Structura unui document XHTML 1.0

tag-urile <BODY> i </BODY> definesc corpul documentului


toate tag-urile (de nivel 1) imbricate n elementul <BODY> trebuie s fie
conforme cu DTD HTML 1.0 strict
</head>
<!--Corpul documentului-->
<body>
<h1>Prima mea pagina
Web</h1>
</body>
</html>

Atribute XHTML1 comune


ca i n HTML, atributele:

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

sunt comune i elementelor XHTML


Observaii:
atributul style NU poate fi utilizat cu elementele: <html>, <head>,
<title>, <meta>, <style>, <script>, <param>, <base> i <basefont>
atributul title NU poate fi utilizat cu elementele: <html>, <head>,
<meta>, <title>, <script>,
<param>,
04/08/15
Tehnologii
WEB<base> i <basefont>
14

3.

XHTML - Structura unui document XHTML 1.0

Elemente HTML depite n versiunea XHTML1


Obiectiv principal al XHTML-ului:

separarea structurii documentului de forma sa de prezenatare

elemente HTML, care sunt depite n versiunea XHTML1, dar


mereu utilizate:

applet, nlocuit de elementul object;


basefont, nlocuit de CSS;
center, nlocuit de CSS;
dir, nlocuit de elementul ul;
font, nlocuit de CSS;
isindex, nlocuit de elementul input;
menu, nlocuit de elementul ul;
s sau strike, nlocuit de CSS;
u, nlocuit de CSS

04/08/15

Tehnologii WEB

15

3.

XHTML - Structura unui document XHTML 1.0

Validarea documentelor XHTML 1 strict (analog cu HMTL)


serviciul de validare:

verificr pagina
semnaleaz eventualelor erori generate (indicnd numrul de linie i
tipul de eroare)
se afieaz n pagin eticheta de validare
instrument de validare: aplicaia open source W3C Validator,
disponibil pe site-ul: http://validator.w3.org

04/08/15

Tehnologii WEB

16

3.

XHTML - Structura unui document XHTML 1.0

n urma validrii se obine eticheta de validare, generat de codul urmtor:


<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>

04/08/15

Tehnologii WEB

17

4.

Conversie HTML n XHTML

De ce trebuie s convertii documentele HTML?


XHTML = aplicaie XML, un procesor XML poate prelucra XHTML;
XHTML poate fi extins pentru a integra alte modele de documente
(vocabulare) ca de exemplu:

SVG (Scalable Vector Graphics)


SMIL (Synchronized Multimedia Integration Language)
MathML (Mathematic Markup Language)
propriul vocabular XML

XHTML ncurajeaz separarea stilului (documentului) de structura


documentului;
XHTML ofer un cod mai clar, mai uor de citit att pentru procesor ct i
pentru ochiul uman;
furnizorii de telefoane mobile au ales XHTML ca limbaj privilegiat;
conexiunea XHTML-XML a demonstrat costuri reduse n materie de
copyright, de mentenan i de dezvoltare
W3C nu va mai dezvolta HTML, dect sub form de noi versiuni XHTML.

04/08/15

Tehnologii WEB

18

4.

Conversie HTML n XHTML

Conversia este posibil n dou moduri:

convertire n mod manual


convertire n mod automat, utiliznd aplicaia HTML Tidy

Convertii manual documentele HTML


metod mai puin utilizat
reguli de convertire manual

atunci cnd utilizai sintaxa elementului vid XML, inserai un spaiu


naintea barei oblice (/); exemplu: <br />;
utilizai o foaie de stiluri extern sau documente de script n loc de
a le imbrica ntre <head> i </head> ale documentului XHTML;
convertii toate numele de elemente i atribute (i valorile
atributelor) care sunt scrise cu majuscule, n minuscule;

04/08/15

Tehnologii WEB

19

4.

Conversie HTML n XHTML

nu utilizai rupturi de linie pentru a mri lizibilitatea documentului;


inserai un spaiu alb numai ntre elemente;
utilizai mpreun atributele name i id pentru a asigura o
compatibilitate perfect cu navigatoarele! Exemplu: <a
name=unu id=unu> </a>;
pentru a asigura o compatibilitate total utilizai n acelai timp
atributele lang i xml;
nchidei toate elementele, inclusiv elementele vide;
plasai ntre ghilimele toate valorile atributelor;
atribuii valori tuturor atributelor. Exemplu: <input
type=checkbox checked=checked >;
imbricai corect elementele;
utilizai declaraia DOCTYPE corespunztoare;
introducei n tag-ul de deschidere <html> spaiul de nume
XHTML:
<html xmlns=http://www.w3.org/1999/xhtml>

04/08/15

Tehnologii WEB

20

4.

Conversie HTML n XHTML

Convertii (automat) documentele HTML cu HTML Tidy

HTML Tidy

instrument conceput de David Ragett

este de un mare ajutor pentru toi creatorii Web

disponibil pe platformele Windows i Mac

convertete precis i rapid documentele HTML n XHTML

destinat la nceput currii codului HTML el a sfrit prin a fi


integrat ca plugin n cea mai mare parte a editoarelor HTML
posed i o versiune grafic, Tidy Gui

04/08/15

Tehnologii WEB

21

4.

Conversie HTML n XHTML

Avantaje HTML Tidy

corecteaz tag-urile finale desperecheate

corecteaz erorile de imbricare

localizeaz elementele prost plasate (exemplu: elementul td


este plasat n interiorul elementului form)
modific n mod automat toate numele de elemente i atribute
care au fost scrise cu majuscule
adaug ghilimele (simple sau duble) valorilor atributelor

04/08/15

Tehnologii WEB

22

4.

Conversie HTML n XHTML

Modul de lucru cu HTML Tidy

ncrcai HTML-Kit de pe site-ul www.chami.com/html-kit/


identificai documentul inceput.htm
deschidei fiierul (File - Open).

04/08/15

Tehnologii WEB

23

4.

Conversie HTML n XHTML

n HTML-Kit selectai Actions/


Tools / HTML Tidy / Convert
to XHTML
nlocuirea vechiul document
(inceput.htm) HTML cu noul
document XHTML
folosii tab-ul Output
apoi Edit / Copy Output to
Editor din aplicaia utilitar
HTML Kit
selectai File Save As din
tab-ul Editor pentru a salva
fiierul inceput.htm
versiunea HTML4 n XHTML 1
sub denumirea inceput
modificat XHTML.htm

04/08/15

Tehnologii WEB

24