TEHNOLOGII WEB

CURSUL 1

HTML versus XHTML

Obiective curs
realizarea unui cod surs aferent unei pagini Web
familiarizarea cu noiunile care stau la baza construciei
unui site: liste, imagini i hri de imagini, legturi, tabele,
cadre, elemente grafice i media
nelegerea noiunii CGI - Common Gateway Interface;
lucrul cu script-uri i folosirea formularelor;
folosirea n cadrul Web a foilor de stil cascad - CSS
dinamicitatea site-ului cu ajutorul Javascript-urilor

04/08/15

Tehnologii WEB

Modul de examinare
continu: realizarea a dou site-uri
unul folosind elemente de baz
cel de al doilea folosind CSS si Javascript
final: examen
la nota final, se va ine cont de activitatea
desfurat n cadrul laboratorului, predarea siteurilor i cunotinele prezentate n timpul examinrii
finale
examinarea continu va avea o pondere de cel puin
40 % din nota final !
04/08/15

Tehnologii WEB

Bibliografie
1.

Buraga S., Proiectarea siturilor Web (ediia a II-a), Editura Polirom, Iai
2005

2.

Dave Taylor Crearea paginilor Web cu HTML 4, Editura Teora 2000

3.

Gugoiu Teodoru HTML prin exemple, Editura Teora 2000

4.

Gugoiu Teodoru - HTML, XHTML, CSS si XML prin exemple - ghid practic,
editura Teora 2005

5.

Musciano, C., Kennedy, B., HTML: The Definitive Guide, 2nd Edition, May
1997Budd, A.; Moll, C.; Collison S., CSS Mastery: Advanced Web
Standards Solutions, Apress, Berkeley, CA, 2006

6.

Flanagan, D., JavaScript: The Definitive Guide, 2nd Edition, January 1997

7.

Negrino, Tom; Smith, Dori, Javascript pentru World Wide Web, Editura
Corint, Bucureti 2004

8.

http://www.w3schools.com

04/08/15

Tehnologii WEB

C1 HTML versus XHTML

1. HTML4, XHTML sau XML? s6

2. HTML - HyperText Markup Language s7
3. XHTML - eXtensible HyperText Markup Language
s13
4. XML - eXtensible Markup Language s18
04/08/15

Tehnologii WEB

1.

HTML4, XHTML sau XML?

Standardizarea limbajului de descriere a paginilor

HTML i varianta sa modern XHTML au contribuit
decisiv la democratizarea Internetului.
Progresul extraordinar al Internetului de la nceputul
anilor 90 a avut loc datorit faptului c HTML:

este foarte uor de nvat

nefiind un limbaj de programare.

Dup crearea paginile HTML 4, vei simi cu siguran

nevoia de a utiliza XHTML, iar pentru a crete
atractivatea paginii se poate folosi XML.

HTML Hypertext Markup Language

XHTML eXtensible Hypertext Markup Language
XML eXtensible Markup Language

04/08/15

Tehnologii WEB

2.

HTML - HyperText Markup Language

Istoric

anii 80 i debutul anilor 90 se nasc rdcinile HTML

n anul 1989, Tim Berners Lee, membru CERN

(Centrul European de Cercetare Nuclear cu sediul la
Geneva, Elveia), a inventat un limbaj capabil de a:

structura datele
crea legturi hipertext permind schimbul de documente pe
Internet
HTML utlizeaz metalimbajul SGML (Standard Generalized
Markup Language)

SGML este un instrument standard ISO (International

Standards Organization) care creaz limbaje de marcaj de
diferite tipuri
1991, fizicienii de la CERN puteau utiliza acest sistem care
funciona pe mainile NeXT sau n mod Linie
1993, NCSA (National Center for Supercomputing
Applications) a creat primul navigator cu numele Mosaic
La sfritul anului 1993, 500 servere Web cunoscute
reprezentau 1% din traficul Internet.

04/08/15

Tehnologii WEB

2.

HTML - HyperText Markup Language

1994, IETF (Internet Engineering Task Force) a avut ca

obiectiv stabilirea unei liste de marcatori (tag-uri) care
ddea utilizatorilor din lumea ntreag posibilitatea de a citi
i a scrie pagini Web. Aa a aprut versiunea HTML 2.0.
1996, W3C (World Wide Web Consortium), a fost creat i
condus de INRIA (Frana), MIT (SUA) i Universitatea
KEYO (Asia). Scopul acestui grup a fost acela de a:

dezvolta facilitile Web

proteja drepturile i libertatea utilizatorilor definind tag-urile
care trebuiau s reprezinte norma pentru toate navigatoarele
i autorii de pagini Web

1997 versiunea HTML 3.2 (vezi www.w3.org)

HTML 3.2 a fost nlocuit cu HTML 4.0, care a fost validat
de W3C.
HTML 4 este mereu de actualitate, chiar dac ntre timp a
aprut XHTML, ca succesor al su. XHTML asociaz puterea
limbajului HTML cu rigoarea limbajului XML.
04/08/15

Tehnologii WEB

2.

HTML - HyperText Markup Language

Versiuni HTML

HTML a cunoscut versiuni ncepnd cu 1.0 i terminnd cu

4.01.
1969, IBM a pus bazele limbajului SGML - normalizat de
ctre ISO n anul 1986

Principalele limbaje nscute din SGML sunt: HTML,

DHTML i XML.

SGML HTML + DHTML + XML

HTML 1.0 a aprut n anul 1991. Tag-urile limbajului

HTML 1.0
erau uor de reinut
permiteau generarea de titluri, liste, imagini i, cel mai
important, legturi hipertext
NU exista interfaa grafic nc
versiunea HTML 1.0 NU mai este utilizat

Mosaic i apoi Netscape au fost primele navigatoare

care au fost dotate cu o interfa grafic

04/08/15

Tehnologii WEB

2.

HTML - HyperText Markup Language

1995 W3C public normele limbajului HTML 2.0.
Regrupeaz tag-uri de baz:
structurarea documentului (titluri, antet, corpul
documentului)
formatri mai puternice, liste, tabele i alte componente

1996 a fost publicat versiunea HTML 3.2 la

conferina World Wide Web de la Paris

unele din tag-urile vechi au primit noi atribute

au fost create noi tag-uri
Microsoft i Netscape au continuat dezvoltarea propriilor
navigatoare n afara acestor norme

W3C prezint n vara anului 1997 versiunea 4.0 a

limbajului HTML
integreaz cadre
noi tag-uri
CSS (Cascading Style Sheets, foi de stiluri n cascad)
dup aproape trei ani, HTML 4.0 a devenit standard

04/08/15

HTML 4.0 este un standard !

HTML = limbaj bazat pe tag-uri
Tehnologii WEB

10

2.

HTML - HyperText Markup Language

Elemente i tag-uri

HTML:

este un limbaj bazat pe tag-uri (comenzi) ca i primele procesoare

de text
permite programarea unei pagini cu ajutorul tag-urilor de
formatare care sunt apoi interpretate de ctre un navigator
(browser)

tag-urile HTML trebuie s fie scrise ntre simbolurile < i >

i nu sunt admise spaii ntre cele dou simboluri
Cea mai mare parte a tag-urilor HTML trebuie s fie deschise i
nchise. Un tag de nchidere este identic cu tag-ul de
deschidere, dar n plus necesit o bar oblic (/ sau slash)
dup simbolul <.
Exist mai multe tipuri de tag-uri:
tag-uri care conin metainformaii;
tag-uri de formatare a paginii Web;
tag-uri pentru legturi hipertext;

Atributele tag-urilor pot apare n tag-ul de deschidere ca i

perechi unite prin =
Sintaxa tag: <tag d>text</tag >

putei scrie tag-urile HTML cu majuscule sau minuscule

este bine s le scriei cu minuscule pentru a facilita conversia

n XHTML
04/08/15
Tehnologii WEB
11

2.

HTML - HyperText Markup Language

Instrumentele necesare pentru crearea unui site HTML

un editor de text simplu pentru crearea i salvarea documentelor
HTML
[ un instrument de validare (X)HTML (vezi XHTML) ]
un navigator Web pentru vizualizarea i testarea documentelor
HTML (vezi XHTML)
Editoare HTML
editoare pe baz de text sau de cod
editoare WYSIWYG (What You See Is What You Get)
Observaii:
editoarele WYSIWYG, precum DREAMWEAVER, NETSCAPE
COMPOSER i MICROSOFT FRONTPAGE, creeaz n mod rapid
documentele HTML. Ofer numai o metod aproximativ de
punere n pagin, de proiectare, de definire a culorilor etc;
XHTML garanteaz calitatea documentelor i stabilitatea
afirii acestora
numai dup ce ai creat mai multe documente HTML i numai
dup ce ai neles principiile de baz HTML putei trece la
utilizarea unui editor WYSIWYG i a unui editor pe baz de cod
recomandare: mai nti scriei manual codul HTML cu un editor de
text standard (Notepad)
04/08/15

Tehnologii WEB

12

3.

XHTML - eXtensible HyperText Markup Language

Limbajul XHTML

recomandare a consoriului W3
este o versiune HTML care respect sintaxa limbajului
XML (eXtensible Markup Language)
versiune n care sunt excluse toate impreciziile pe care
le ntlnim n general n paginile Web

XHTML garanteaz calitatea documentelor i

stabilitatea afirii acestora
XHTML este limbajul HTML integrat n XML

permite crearea unui cod modern, perfect lizibil,

construit cu claritate, care garanteaz afiarea perfect
a paginilor Web pentru versiunile viitoare ale
navigatoarelor

04/08/15

Tehnologii WEB

13

3.

XHTML - eXtensible HyperText Markup Language

Elemente i tag-uri
XHTML este alctuit din elemente, tag-uri i atribute
elementele XHTML au n principal dou funciuni:

identific prile logice ale documentului, altfel spus principalele

componente structurale ale documentului, precum antet-uri (h1,
de exemplu), liste numerotate (ol, numite de asemenea liste
ordonate) i paragrafe (p).
insereaz pointeri i legturi hipertext ctre alte documente,
imagini, fiiere sunet, fiiere video, aplicaii multimedia,
animaii, applet-uri etc.

Obsevaii:
toate tag-urile XHTML se scriu cu minuscule !
tag-urile XHTML pot avea dou forme:

o pereche de tag-uri, precum <h1> </h1>, <title> </title>

etc.
un tag unic, precum <br >, <bgsound >, sau <img > numit i
element vid. n XHTML astfel de tag-uri trebuie s se termine cu
un spaiu i o bar oblic (/ sau slash) nainte de simbolul >.
Spaiul lsat (un mic truc!) permite vechilor navigatoare care nu
recunosc XHTML de a trata aceste tag-uri ca i n HTML.

04/08/15

Tehnologii WEB

14

3.

XHTML - eXtensible HyperText Markup Language

ntr-un document XHTML fiecare element vid trebuie s se termine cu

>, iar fiecrui tag de deschidere trebuie s-i corespund un tag de
nchidere;
nu includei spaii suplimentare n interiorul tag-urilor. Excepie de la
aceast regul sunt elementele vide care necesit un spaiu naintea
barei oblice de nchidere ( >).
toate atributele sunt separate de alte atribute i de tag-ul nsui prin
spaii
n XHTML toate valorile atributelor se plaseaz ntre ghilimele
n interiorul tag-urilor de deschidere sau tag-urilor care corespund
elementelor vide, atributele se pot plasa n orice ordine, dup numele
elementului, cu condiia ca numele elementului s apar ntotdeauna
pe prima poziie.

Instrumentele necesare pentru crearea unui site XHTML

un editor de text simplu, pentru crearea i salvarea documentelor
XHTML;
un instrument de validare XHTML, pentru verificarea sintaxei i
structurii documentelor XHTML;
Etapa de validare specific XHTML-ului se realizeaz cu
W3C validator
un navigator Web, pentru vizualizarea i testarea documentelor
XHTML.
04/08/15

Tehnologii WEB

15

3.

XHTML - eXtensible HyperText Markup Language

Editoare de text (X)HTML

Dei exist numeroase editoare (X)HTML WYSIWYG
performante, nu renunai la crearea de cod (X)HTML cu un
editor de text standard
Notepad este editor de text recomandat pentru generarea
codul (X)HTML
utilizarea procesoarelor de text Word, Wordperfect sau
WordPad pentru crearea documentelor (X)HTML NU este
recomandat !
Aplicaia de validare W3C validator
Validarea = etap important n procesul de redactare al
codului XHTML. Exist sigurana c cea mai mare parte a
navigatoarelor va putea afia coninutul documentelor
XHTML.
Pentru a verifica dac este valid sau nu codul XHTML,
utilizai aplicaia de validare W3C W3C validator. ( vezi
http://validator.w3.org/file-upload.html.)

04/08/15

Tehnologii WEB

16

3.

XHTML - eXtensible HyperText Markup Language

Navigatoarele Web
Navigatoarele cel mai des folosite sunt:

Microsoft Internet Explorer (IE) i

Netscape Navigator.
Alte navigatoare, dintre care sunt apreciate n mod deosebit:
Opera (www.opera.com, gratuit) i
Amaya (www.w3.org/Amaya, gratuit).

04/08/15

Tehnologii WEB

17

4.

XML - eXtensible Markup Language

XML - eXtensible Markup Language

limbaj de tag-uri extensibil / extensibile

limbaj alctuit din tag-uri

elaborat de XML Working Group sub direcia lui World Wide Web
Consortium (W3C) din anul 1996

este destinat structurrii documentelor

n 1998, specificaiile XML 1.0 au devenit recomandri, XML fiind oficial

definit i recunoscut ca standard.
XML= limbaj de tag-uri extensibil/e
XML 1.0 recunoscut ca standard

Observaii:
XML NU vine de la HTML !
XML deriv din SGML definit n anul 1986 prin standardul ISO 8879.
XML (eXtensible Markup Language) este cel mai nou limbaj dezvoltat de
consoriul W3 (specializat n standarde Web);
documente i specificaii XML pot fi accesate de la adresele:

http://www.w3c.org/MarkUp;

www.ibiblio.org/pub/sun-info/standards/xml/why/xmlapps.htm;

www.xml.com.

04/08/15

Tehnologii WEB

18

4.

XML - eXtensible Markup Language

Diferene majore ntre XML i HTML

XML-ului nu nlocuiete XHTML-ului
cele dou limbaje alctuite din tag-uri nu au deloc aceleai
obiective:

XML poate fi privit ca un mijloc de descriere a datelor, fiind

specializat pe tot ceea ce reprezint date
HTML a fost conceput numai pentru afiarea datelor i nimic
mai mult

XML NU face nimic !

Exemplu: descrie datele e-mail de o manier structurat

<email>
<to>UAV</to>
<from>Liga Studentilor</from>
<date>1 octombrie 2010</date>
<subject>urare</subject>
<body>Bun venit bobocilor in noul an scolar !
</body>
</email>

XML = metalimbaj
XML structureaz, stocheaz i manipuleaz datele

04/08/15

Tehnologii WEB

19

4.

XML - eXtensible Markup Language

XML, complementul HTML-ului

XML-ul va fi utilizat pentru descrierea datelor

HTML va fi utilizat pentru formatarea i afiarea datelor
XML este un instrument gramatical sau structural
independent de toate platformele hard i soft care
permit transmisia informaiilor structurate

XML n viitor

XML-ul va reprezenta cu siguran instrumentul

standard pentru descrierea, manipularea i transmisia
datelor.
XML-ul este generator de noi limbaje:

04/08/15

WML (Wirelles Markup Language) permite afiarea

datelor pe telefoanele mobile;
HR XML (Human Ressources XML) permite descrierea
domeniului de resurse umane;
SVG (Scalable Vector Graphics) permite crearea
imaginilor n dou dimensiuni XML;
SMIL (Synchronized Multimedia Integration Language)
permite crearea obiectelor multimedia (sunet, video etc.);
MathML permite definirea ecuaiilor matematice,
reprezentri algebrice, sisteme de sintez vocal.
Tehnologii WEB
20