TEHNOLOGII WEB

CURSUL 1

HTML versus XHTML

 Obiective curs

realizarea unui cod sursă aferent unei pagini Web

familiarizarea cu noţiunile care stau la baza construcţiei

unui site: liste, imagini şi hărţi de imagini, legături, tabele,
cadre, elemente grafice şi media

înţelegerea noţiunii 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

12/09/21 Tehnologii WEB 2

 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

desfăşurată în cadrul laboratorului, predarea site-
urilor şi cunoştinţele prezentate în timpul examinării
finale
examinarea continuă va avea o pondere de cel puţin
40 % din nota finală !

12/09/21 Tehnologii WEB 3

 Bibliografie
1. Buraga S., Proiectarea siturilor Web (ediţia a II-a), Editura Polirom, Iaşi
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, Bucureşti 2004

8. http://www.w3schools.com

12/09/21 Tehnologii WEB 4

 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

12/09/21 Tehnologii WEB 5

 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 uşor de învăţat
 nefiind un limbaj de programare.
După crearea paginile HTML 4, veţi simţi cu siguranţă
nevoia de a utiliza XHTML, iar pentru a creşte
atractivatea paginii se poate folosi XML.
 HTML – Hypertext Markup Language
 XHTML – eXtensible Hypertext Markup Language
 XML – eXtensible Markup Language

12/09/21 Tehnologii WEB 6

 2. HTML - HyperText Markup Language
Istoric
 anii ´80 şi debutul anilor ´90 se nasc rădăcinile HTML

 în anul 1989, Tim Berners – Lee, membru CERN

(Centrul European de Cercetare Nucleară cu sediul la

Geneva, Elveţia), a inventat un limbaj capabil de a:
structura datele
crea legături hipertext permiţând 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
funcţiona pe maşinile NeXT sau în mod Linie
 1993, NCSA (National Center for Supercomputing
Applications) a creat primul navigator cu numele Mosaic
 La sfârşitul anului 1993, 500 servere Web cunoscute
reprezentau 1% din traficul Internet.
12/09/21 Tehnologii WEB 7
 2. HTML - HyperText Markup Language

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

obiectiv stabilirea unei liste de marcatori (tag-uri) care
dădea utilizatorilor din lumea întreagă posibilitatea de a citi
şi a scrie pagini Web. Aşa a apărut versiunea HTML 2.0.
1996, W3C (World Wide Web Consortium), a fost creat şi
condus de INRIA (Franţa), MIT (SUA) şi Universitatea
KEYO (Asia). Scopul acestui grup a fost acela de a:
 dezvolta facilităţile 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

apărut XHTML, ca succesor al său. XHTML asociază puterea
limbajului HTML cu rigoarea limbajului XML.

12/09/21 Tehnologii WEB 8

 2. HTML - HyperText Markup Language

Versiuni HTML
 HTML a cunoscut versiuni începând cu 1.0 şi terminând cu

4.01.
 1969, IBM a pus bazele limbajului SGML - normalizat de

către ISO în anul 1986

 Principalele limbaje născute din SGML sunt: HTML,

DHTML şi XML.
SGML  HTML + DHTML + XML
 HTML 1.0 a apărut în anul 1991. Tag-urile limbajului
HTML 1.0
erau uşor de reţinut
permiteau generarea de titluri, liste, imagini şi, cel mai
important, legături hipertext
NU exista interfaţa 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ă
12/09/21 Tehnologii WEB 9
 2. HTML - HyperText Markup Language
 1995 W3C publică normele limbajului HTML 2.0.
Regrupează tag-uri de bază:
structurarea documentului (titluri, antet, corpul
documentului)
formatări mai puternice, liste, tabele şi alte componente
 1996 a fost publicată versiunea HTML 3.2 la
conferinţa 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

HTML 4.0 este un standard !

HTML = limbaj bazat pe tag-uri
12/09/21 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 către un navigator
(browser)
 tag-urile HTML trebuie să fie scrise între simbolurile „<” şi „>”
şi nu sunt admise spaţii î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 conţin metainformaţii;
tag-uri de formatare a paginii Web;
tag-uri pentru legături hipertext;
 Atributele tag-urilor pot apare în tag-ul de deschidere ca şi
perechi unite prin =
Sintaxa tag: <tag d>text</tag î>
 puteţi scrie tag-urile HTML cu majuscule sau minuscule
 este bine să le scrieţi cu minuscule pentru a facilita conversia
în XHTML
12/09/21 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”)
Observaţii:
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
afişării acestora
numai după ce aţi creat mai multe documente HTML şi numai
după ce aţi înţeles principiile de bază HTML puteţi trece la
utilizarea unui editor WYSIWYG şi a unui editor pe bază de cod
recomandare: mai întâi scrieţi manual codul HTML cu un editor de
text standard (Notepad)

12/09/21 Tehnologii WEB 12

3. XHTML - eXtensible HyperText Markup Language

Limbajul XHTML
 recomandare a consorţiului W3
 este o versiune HTML care respectă sintaxa limbajului
XML (eXtensible Markup Language)
 versiune în care sunt excluse toate impreciziile pe care
le întâlnim în general în paginile Web

XHTML garantează calitatea documentelor şi

stabilitatea afişării acestora
XHTML este limbajul HTML integrat în XML
 permite crearea unui cod modern, perfect lizibil,
construit cu claritate, care garantează afişarea perfectă
a paginilor Web pentru versiunile viitoare ale
navigatoarelor

12/09/21 Tehnologii WEB 13

3. XHTML - eXtensible HyperText Markup Language

Elemente şi tag-uri
XHTML este alcătuit din elemente, tag-uri şi atribute
elementele XHTML au în principal două funcţiuni:
 identifică părţile 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 legături hipertext către alte documente,
imagini, fişiere sunet, fişiere video, aplicaţii multimedia, animaţii,
applet-uri etc.
Obsevaţii:
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 spaţiu şi o bară oblică (/ sau slash) înainte de simbolul “>”.
Spaţiul lăsat (un mic truc!) permite vechilor navigatoare care nu
recunosc XHTML de a trata aceste tag-uri ca şi în HTML.

12/09/21 Tehnologii WEB 14

3. XHTML - eXtensible HyperText Markup Language
 într-un document XHTML fiecare element vid trebuie să se termine cu
“>”, iar fiecărui tag de deschidere trebuie să-i corespundă un tag de
închidere;
 nu includeţi spaţii suplimentare în interiorul tag-urilor. Excepţie de la
această regulă sunt elementele vide care necesită un spaţiu înaintea
barei oblice de închidere ( >).
 toate atributele sunt separate de alte atribute şi de tag-ul însuşi prin
spaţii
 î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 condiţia ca numele elementului să apară întotdeauna
pe prima poziţie.

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.

12/09/21 Tehnologii WEB 15

3. XHTML - eXtensible HyperText Markup Language

Editoare de text (X)HTML

Deşi există numeroase editoare (X)HTML WYSIWYG
performante, nu renunţaţi 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ă !
Aplicaţia de validare W3C validator
Validarea = etapă importantă în procesul de redactare al
codului XHTML. Există siguranţa că cea mai mare parte a
navigatoarelor va putea afişa conţinutul documentelor
XHTML.
Pentru a verifica dacă este valid sau nu codul XHTML,
utilizaţi aplicaţia de validare W3C – W3C validator. ( vezi
http://validator.w3.org/file-upload.html.)

12/09/21 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).

12/09/21 Tehnologii WEB 17

 4. XML - eXtensible Markup Language

XML - eXtensible Markup Language

 limbaj de tag-uri extensibil / extensibile
 limbaj alcătuit din tag-uri
 elaborat de XML Working Group sub direcţia lui World Wide Web
Consortium (W3C) din anul 1996
 este destinat structurării documentelor
 în 1998, specificaţiile XML 1.0 au devenit recomandări, XML fiind oficial
definit şi recunoscut ca standard.

XML= limbaj de tag-uri extensibil/e

XML 1.0 recunoscut ca standard
Observaţii:
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
consorţiul W3 (specializat în standarde Web);
documente şi specificaţii 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.

12/09/21 Tehnologii WEB 18

 4. XML - eXtensible Markup Language
Diferenţe majore între XML şi HTML
XML-ului nu înlocuieşte XHTML-ului
cele două limbaje alcătuite din tag-uri nu au deloc aceleaşi
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 afişarea 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
12/09/21 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 afişarea datelor
 XML este un instrument gramatical sau structural
independent de toate platformele hard şi soft care
permit transmisia informaţiilor 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:
WML (Wirelles Markup Language) – permite afişarea
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 ecuaţiilor matematice,
reprezentări algebrice, sisteme de sinteză vocală.
12/09/21 Tehnologii WEB 20