Lec ia 1: Structura unui document HTML. Notiuni de baza.

1.1 Ce este HTML?
HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in anul 1989, ca urmare a necesitatii de publicare a informatiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai recent HTML 4.01), fiecare versiune oferind noi facilitati. Se remarca cateva trasaturi cum ar fi:
y y y

independenta de platforma (modul de afisare al unui document este acelasi, indiferent de computerul pe care se realizeaza afisarea); structurarea formatarii; posibilitatile hypertext (orice cuvant, imagine sau alt element al documentului vizualizat de utilizator poate face referinta la un alt document, ceea ce usureaza navigarea in cadrul aceluiasi document sau intre documente diferite).

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaza intr-un text pentru a adauga informatii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor de documente structurate, destinat sa reprezinte instante ale acestor tipuri de documente. La baza SGML si a HTML se afla acelasi principiu: descrierea continutului unui document se face intr-un fisier text obisnuit (ASCII). S-a urmarit ca aceste fisiere sa fie editabile cu aplicatii software nepretentioase (ex. NotePad, WordPad). In cadrul unui document HTML, un marcaj (tag, in limba engleza) va avea forma <nume_marcaj> . Parantezele unghiulare sunt elementele care indica prezenta unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie in marcajul de inceput: <nume_marcaj optiune1=valoare1 optiune2=valoare2 ...> ................ </nume_marcaj>

Exista doua tipuri de marcaje: - individuale (ex. <br>) - perechi (ex. <p>...</p>) - de mentionat ca sfarsitul unui marcaj este indicat prin utilizarea caracterului '/' in fata numelui de marcaj

. <p>) ....inline: este afisat dupa elementul anterior (ex. fisierul DTD contine definitiile marcajelor din versiunea respectiva de HTML. Declaratia se face prin intermediul DTD (document type definition).org/TR/html4/strict.... HTML 4.. o linie continand versiunea HTML 2.In functie de modul de formatare a paginii....w3.. </nume_marcaj2> </nume_marcaj1> Browserele vor ignora marcajele si optiunile pe care nu le recunosc...2 Structura unui document HTML Un document HTML 4 are urmatoare structura: 1.block: este afisat sub elementul anterior (ex.01 Strict DTD include toate elementele si atributele care nu sunt "invechite" (elemente si atribute a caror utilizare nu este recomandata deoarece se doreste renuntarea la acestea pe viitor) sau care nu apar in documentele ce contin cadre.. delimitata de marcajele <BODY> </BODY> sau <FRAMESET> </FRAMESET> <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.... Pe scurt...01 specifica 3 variante DTD : y HTML 4.01//EN" "http://www. </body> </html> Un document HTML valid contine declaratia versiunii HTML utilizate... sectiunea HEAD.dtd"> <html> <head> <title>Prima mea pagina web</title> </head> <body> . sectiunea BODY.table: este afisat sub forma unui tabel Marcajele perechi pot fi imbricate: <nume_marcaj1> <nume_marcaj2> . avem marcaje de tip: ... delimitata de marcajele <HEAD> </HEAD> 3. .. 1. <span>) .

Alte marcaje care apar in sectiune HEAD: y <META> .2" type="text/javascript" src="lib... araba.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. charset=set_caractere"> Precizarea setului de caractere face posibila afisarea in browserul utilizatorului a caracterelor specifice unor limbi precum romana.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" Transitional DTD "http://www.y y HTML 4. o descriere a paginii.poate contine cuvinte cheie. frecventa (teoretica) cu care motoarele de cautare ar trebui sa reindexeze pagina. numele autorului paginii. HTML 4. y <style>.01 Strict DTD 1.</style> y <script> .01 Transitional DTD include Strict DTD plus elementele si atributele "invechite". Declaratiile META implica in general declararea unei proprietati si a valorii asociate acelei proprietati. fiind deosebit de important pentru motoarele de cautare.w3. cu exceptia marcajului <title>.w3.01 Frameset Frameset//EN" DTD "http://www. El va contine un titlu relevant pentru pagina. etc.cascading style sheets .scripturi JavaScript sau VBScript <script language="JavaScript1.org/TR/html4/frameset.01//EN" "http://www.w3.01 HTML 4. Marcajul <title> este obligatoriu si poate apare doar in sectiunea HEAD.01 Frameset DTD include Transitional DTD plus cadrele (frames). rusa.org/TR/html4/loose. <META NAME="nume" CONTENT="continut"> Declararea setului de caractere se face astfel: <META http-equiv="Content-Type" content="text/html.1 Sectiunea HEAD Cuprinde informatii care nu vor fi afisate in browser.dtd"> HTML 4.stiluri pentru formatarea textului din documentul HTML. etc.org/TR/html4/strict.2.01 HTML 4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. <style type="text/css">.js"></script> .

... </BODY> Marcajul de sfarsit (</BODY>) nu este obligatoriu In sectiunea BODY se gaseste informatia care va fi afisata in browser (text. continut document ...... <link rel="stylesheet" href="stiluri.... etc.css" type="text/css"> Sectiunea HEAD a unui document HTML poate arata in felul urmator: <head> <title>Titlul paginii mele</title> <META http -equiv="Content -Type" content="text/html...xprim.. Toate referintele (<a href=""></a>.. charset=windows -1250"> <META name="author" content="Popescu Ion"> <META name="copyright" content="© 2003 InsideMedia"> <META name="keywords" content="cu rs...stabileste URL-ul de "baza" al documentului.) (<body>..... gratuit.y <base> .ro/index..stabileste o legatura cu un document extern...php" target="_top"> </head> y <link> ...2 Sectiunea BODY Este inclusa intre marcajele <body>.2.. . respectiv <img src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>. spre exemplu un fisier de definitii CSS... </body> <BODY [ BACKGROUND="adresa_imagine"] [ BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [ LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [ ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [ TOPMARGIN=marg_top]> . </body>)..... elearning"> <link rel="stylesheet" href="stiluri.... imagini.css" type="text/css"> </head> 1. <head> <base href="http://www.... html.

..01//EN" "http://www..</s> .</b> .. gratuit. <h4>.dtd"> <html> <head> <title>Titlul paginii mele</title> <META http -equiv="Content -Type" content="text/html.toate necesita marcaj de inchidere) care sunt folosite in general pentru evidentierea titlurilor... in pixeli. marginea stanga a documentului (distanta dintre fereastra si continutul documentului)... y y LEFTMARGIN precizeaza... textul comentariului --> <!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza decat in Internet Explorer 3+). <h3>.css" type="text/css"> </head> <body bgcolor="#999999" leftmargin=0 topmargin=0> <!--Aceasta linie nu va fi afisata in browser --> <p>text text text text text text text text text text </p> <p>alt text alt text alt text alt text alt text </p> </body> </html> In exemplul de mai sus a aparut un nou marcaj <p> (paragraf). TOPMARGIN precizeaza..caractere "taiate" . folosind marcajul <!-.org/TR/html4/strict.caractere ingrosate <i>. charset=windows -1250"> <META name="author" content="Popescu Ion"> <META name="copyright" content="© 2003 InsideMedia"> <META name="keyword s" content="curs.caractere subliniate <s>. html.. <h5>. marginea de sus a documentului (distanta dintre fereastra si continutul documentului) Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce comentarii.w3.caractere inclinate <u>.</i> . în pixeli. elearning"> <link rel="stylesheet" href="stiluri. <h2>. Alaturi de el trebuie mentionate marcajele <h1>.</u> . (exemplu) Pentru formatarea textului pot fi folosite si marcajele: y y y y <b>. <h6> (headings .

.w3. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online 2.marcajul de informatie preformatata  conserva toata caracterele si spatierile de linii  utilizeaza un font diferit (Courier) <sup>...... insa pentru a se evita formatarea explicita pe fiecare paragraf in parte (ex. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate marcajele prezentate in aceasta lectie.org/ .. <DIV [ ALIGN="left|center|right"] style=".. spre deosebire de <span>.. <div> poate fi folosit ca un container pentru alte elemente de tip "block". fontul).. <p>) in combinatie cu stilurile CSS. este recomandata folosirea marcajului <div> pentru centrarea textului...exponent <sub>.. 2.... Se foloseste in general pentru pozitionare in cadrul documentului si pentru specificarea unor proprietati CSS care sa fie aplicate textului din interiorul lui (exemplu).... stil care va fi preluat de paragrafele mentionate....indice <br> .y y y y y <pre>...01..</sup> ."rupe" textul...</pre> .. trecand pe o linie noua .. Exemplu: se pot include 2 sau mai multe paragrafe intr-un marcaj <div>. pentru a impune o formatare diferita de restul continutului din marcajul "block" respectiv (exemplu). y y <span> este un marcaj de tip "inline". Valideaza pagina la adresa http://validator....</sub> .. </DIV> 1. Conform specificatiilor HTML 4. se va defini stilul de formatare pentru marcajul <div>.. 1. in locul marcajului <center> exemplu. Se foloseste in general in interiorul marcajelor de tip "block" (ex."> .. culorii si a tipului de font utilizat (exemplu) Ultimele 2 marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele <span> si <div>(ambele necesita marcaj de inchidere):.. Marcajul <font>..poate apare oriunde in text <hr> .. marcajul <div> este de tip "block"..traseaza o linie subtire orizontala Acest exemplu evidentieaza efectele marcajelor mentionate mai sus...</font> ofera posibilitatea modificarii dimensiunii.