UNITATEA DE ÎNVĂȚARE NR.

1
Introducere în HTML Structura unui document HTML

Cuprins:

1.1. INTRODUCERE.................................................................................. ............5

1.2. STRUCTURA UNUI DOCUMENT HTML.................................................. 7
1.3. SCRIEREA DE TEXT CU FORMATE ÎN HTML ...................................... 9
1.3.1 FORMATAREA TEXTULUI .......................................................................... 9
1.3.2 FORMATAREA CARACTERELOR ............................................................. 11
1.4. APLICAȚII..................................................................................................... 19

Obiective
Însuşirea noţiunilor generale despre pagini web.
Înțelegerea modalităților de proiectare a unei pagini web.
Cunoaşterea structurii unui document HTML.
Utilizarea diferitelor formate de text într-o pagină web.

Timp alocat:1 oră

1.1. Introducere

HTML e limbajul în care sunt scrise paginile web. Paginile web sunt fişiere cu
extensia .html sau .htm care rezidă, de obicei, pe serverele de Internet, dar care pot
rezida şi pe calculatorul dumneavoastră. HTML e acronimul de la HyperText
Markup Language, care e numele unui limbaj de marcare ce a înlocuit SGML-ul şi
a fost conceput în 1989 de Tim Berners-Lee. Fiind şi expert în software, Berners-
Lee e acum director al World Wide WEb Consortium (pe scurt, W3C), adică al
organizaţiei care coordonează dezvoltarea web-ului (în principal, prin impunerea
de standarde pentru limbaje etc.). HTML-ul a cunoscut o popularitate rapidă,
aproape toate paginile web fiind scrise în acest limbaj.
Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni (ca Pascal-ul
sau C-ul) ori comenzi (ca Fox-ul), ci etichete, acestea fiind numite şi elemente sau
tag-uri. Sintaxa oricărui tag este:

<TAG atribut1="val" atribut2="val">Text</TAG>

În unele cazuri, atributele pot lipsi. În altele, poate lipsi tag-ul de închidere:
</TAG>. O pagină web poate conţine:
 text
5
  imagini
 fişiere audio
 fişiere video
Paginile web se vizualizează în browsere, care sunt nişte programe de
vizitare. Cele mai populare browsere sunt:
 Netscape Navigator, care a cunoscut mai multe versiuni, cele mai
reuşite fiind 4.75 si 4.76 care aveau, totuşi, defectul ca nu suportau diacriticele.
Acestora le-a urmat versiunea 8.0 care suportă diacriticele.
 Microsoft Internet Explorer, care a ajuns la versiunea 7.
Orice browser prezintă, în partea de sus, o fereastră îngustă în care se
tastează adresa paginii web căutate. Un exemplu de adresa ar fi:
http://www.upit.ro. După tastarea adresei şi apăsarea tastei "Enter", browserul
dumneavoastră îi trimite serverului upit.ro cererea de a i se furniza pagina web
proprie.
Într-un fisier html, se pot include:
 programe în JavaScript
 scripturi CSS
 tag-uri care să seteze parametrii unui applet (program scris în Java şi
care rezidă pe reţea)
Un fişier html se poate realiza:
- manual, scriind tag după tag în Notepad
- cu ajutorul editoarelor HTML precum Homesite, Adobe Golive,
Microsoft Frontpage '98 sau 2000, Macromedia Dreamweaver (aplicaţia cea mai
apreciată de profesionişti ), CoffeeCup HTML Editor , Netscape Composer
(recomandat doar începătorilor). Ultimele două sunt distribuite freeware (gratuit).
Dealtfel, de pe site-urile de download puteţi descărca un mare număr de editoare
HTML, unele în regim freeware, altele în regim shareware. Editoarele vă uşurează
munca, dar nu vă învaţă HTML, aşa că e de dorit să le evitaţi la începutul activităţii
dumneavoastră de webdesigner.
Cum realizăm prima pagină web ?
 Alocaţi un director site-ului pe care intentionaţi să-l realizaţi.
 Click pe butonul Start, apoi pe Programs, Accessories, Notepad.
 Introduceţi textul şi etichetele.
 Salvaţi fişierul cu extensia .htm sau .html în directorul dedicat.
Fişierul va apărea ca, să zicem, index.htm.
 Deschideţi fişierul index.htm în Microsoft Internet Explorer. Pentru a
aduce modificări fişierului, executaţi click-dreapta pe suprafaţa acestuia şi veţi
obţine codul-sursă. După modificarea fişierului, salvaţi-l.

Observaţii:
1. HTML-ul e independent de platformă.
2. HTML-ul nu e un limbaj case-sensitive, aşa că putem scrie la fel de bine
<BODY>, <body>, <BOdy> sau <boDy> etc., pentru că în HTML nu se face
distincţia între literele mari şi cele mici.
6
 1.2. Structura unui document HTML

Codul HTML este stocat în fişiere cu extensia .html sau .htm. Un

document HTML este un fişier text obişnuit (cunoscut şi sub denumirea de fişier
ASCII) care conţine, pe lângă informaţiile textuale propriu-zise, marcaje pentru
utilizarea opţiunilor de formatare şi de conectare. Un asemenea marcaj se numeşte
TAG. Un tag se introduce in text sub forma: <nume_tag>, unde parantezele
unghiulare sunt elementele care indică prezenta unui tag. Numele
marcajelor poate fi scris oricum, limbajul nefiind senzitiv la litere mari / litere mici.
Orice document HTML are două componente principale:
 HEAD (antetul documentului), care conţine titlul documentului;
 BODY (corpul documentului), care conţine textul propriu-zis sub
formă de paragrafe, liste şi alte elemente.
Ce mai simplu document HTML începe cu tag-ul <HTML> şi se termină
cu tag-ul </HTML>. Între acestea se află cela două elemente esenţiale: head şi
body.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Tag-urile de marcare:
 HTML. Acest element transmite browserului că documentul conţine
informaţii în cod HTML. Extensia fişierului .html indică, de asemenea, un
document HTML. Extensia .htm se foloseşte în cazul în care fişierele au nume de
DOS (8 caractere, iar extensia 3 caractere).
 HEAD. Elementul HEAD identifică prima parte a documentului
HTML. Marcajele din această secţiune au doar rolul să descrie documentul curent
pentru programe (cum ar fi browsere), pentru alte documente HTML sau pentru
documentare. Informaţiile prezentate în această secţiune nu vor fi vizibile în pagina
afişată de browser, cu excepţia titlului ce va apărea pe linia titlu a browserului. Nici
vizionarea codului sursă al documentului nu va arăta, în general, informaţiile din
această secţiune. Tagurile care pot fi imbricate în această secţiune sunt: <TITLE>,
<META> <ISINDEX>, <BASE>, <STYLE>, <SCRIPT> şi <LINK>. Dintre
acestea: <TITLE> este cel mai des întâlnit.
 Elementul TITLE conţine titlul documentului şi identifică
conţinutul său în contextul general El este afişat undeva în fereastra browserului
(de obicei în partea de sus, pe bara de titlu), dar nu în interiorul ariei de text. De
asemenea, titlul poate apărea într-o listă a unui utilizator sau ca bookmark, de aceea
el trebuie să reprezinte ceva descriptiv, unic şi relativ scurt. Titlul documentului
poate apărea numai în secţiune HEAD. Elementul TITLE are următoarea sintaxă:

<TITLE> Textul titlului </TITLE>

7
  BODY. A doua - şi cea mai cuprinzătoare - parte a unui document
HTML este BODY, care reprezintă conţinutul documentului (afişat în interiorul
ariei de text a ferestrei browserului). Secţiunea BODY începe cu tagul <BODY> şi
se încheie cu tagul </BODY>. Între acestea se pot introduce anumiţi parametri ca:
imagine de fundal, culoare de fundal, linkuri, alinieri.

<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]
[BGPROPERTIES="fixed"]>
Conţinut document </BODY>

 BACKGROUND se referă la imaginea de fundal a paginilor web şi

primeşte ca valoare calea către fişierul imagine respectiv.
 BGCOLOR se referă la culoarea de fundal având ca valoare numele
sau codul culorii RGB în hexazecimal.
 TEXT se referă la culoarea textului.
 LEFTMARGIN precizează, în pixeli, marginea stângă a
documentului (distanţa dintre fereastră şi conţinutul documentului);
 TOPMARGIN precizează, în pixeli, marginea de sus a documentului
(distanţa dintre fereastră şi conţinutul documentului).
În documentele HTML se mai pot introduce linii de comentariu. Acest
lucru se poate realiza cu ajutorul tagului <!>:

<! Textul comentariului>

Funcţionalitatea lui principală este cea uzuală în orice limbaj de

programare. Apare însă şi o funcţie nouă, oarecum improprie unei linii de
comentariu, aceea de a "ascunde" anumite porţiuni ale textului. Porţiunile
respective vor fi interpretate doar de unele browsere. Comentariile în cod HTML
nu au tag de închidere.

Exemplul 1:

<body bgcolor="#C0C0C0" link="red" alink="blue" vlink="green"

text="black">

Culoarea paginii va fi gri ( stabilită prin bgcolor="#C0C0C0" ), link-urile

vor fi rosii, link-ul activ albastru iar link-urile vizitate verzi. Textul va fi afisat cu
negru. De multe ori , nu se precizează culoarea fundalului/textului/link-urilor, ceea

8
ce conduce la afisarea u nui fundal alb, a unor fonturi negre si a unor link-uri
albastre. Aceasta e setarea implicită. Se observă că orice culoare poate fi exprimată
atât printr-un cuvânt, cât si printr-un set de 6 caractere precedate de diez ( # ).
Această notatie se datorează existentei unui sistem bazat pe rosu, verde si albastru (
Red, Green, Blue ). Sistemul se numeste RGB. In acest sistem, fiecare componentă
are o valoare cuprinsă între 00 si FF. Impreună, valorile celor trei componente
alcătuiesc un sistem de 6 caractere. Tag-ul de sus poate fi scris si ca:

<body bgcolor="#C0C0C0" link="#FF0000" alink="#0000FF"

vlink="#008000" text="#000000">

Exemplul 2:

<body background="imagini/poza1.jpg">

Fundalul paginii e o imagine ( poza1.jpg din directorul imagini ).

Exemplul 3:

Dacă, în plus, dorim ca imaginea de fundal să nu se deplaseze când

navigăm de-a lungul paginii, vom scrie:

<body background="imagini/poza1.jpg" bgproperties="fixed">

Exemplul 4: Pentru a seta marginile de sus si din stânga ale paginii la valorile de
10, respectiv 15 pixeli, vom scrie:

<body topmargin="10" leftmargin="15">

1.3. Scrierea de text cu formate în HTML

Documentul HTML conţine, pe lângă informaţiile textuale propriu-zise,

marcaje pentru utilizarea opţiunilor de formatare. Aceste opţiuni se referă atât la
formatarea textului din interiorul documentului, cât şi la formatarea caracterelor,
care poate avea loc pe trei nivele: fizic, logic, de comunicare.

1.3.1 Formatarea textului

O proprietate care diferenţiază editoarele de text de procesoarele de text este

modul în care apare textul în forma finală: se pot schimba fonturile, se poate varia
mărimea caracterelor, se poate opera asupra alinierii orizontale sau / şi verticale.
9
 În continuare sunt prezentate câteva taguri de formatare a textului:

 TAGUL PARAGRAPH. Unitatea principală de text este paragraful, care se

remarcă prin lăsarea unui spaţiu vertical suplimentar după el. Textul este aliniat,
implicit, la stânga. Spre deosebire de alte procesoare de text, în HTML caracterul
CR (carriage return) nu are nici o semnificaţie. De aceea pentru a indica
paragrafele, codul HTML utilizează tag-ul <p>.
Iată un exemplu simplu de folosire a paragrafelor într-un document HTML:

<p> Bine ati venit in lumea HTML!

Acesta este primul paragraf. </p>

Deşi în fişierul sursă a doua propoziţie este scrisă pe rândul următor,

browserul web va ignora acest lucru şi va afişa cele două afirmaţii pe o singură
linie, începând un paragraf nou doar dacă întâlneşte un alt tag <p>.
Aşadar, paragrafele trebuiesc indicate prin tag-ul <p> deoarece browserul
ignoră orice indentare sau linie goală din sursa HTML.
Un exemplu de text cu paragrafe este prezentat mai jos:
<H1>Primul nivel de heading </H1>
<P>Bine ati venit in lumea HTML. Acesta este primul paragraf.</P>
<P>Şi acesta este cel de al doilea paragraf.</P>

Pentru a păstra uşurinţa de citire a codului în fişierele HTML, este bine ca

paragrafele să fie puse pe linii separate şi să se folosească linii goale pentru a
indica începutul unei noi secţiuni. Aceste spaţii în plus ajută la editarea fişierelor
HTML, dar browserul le va ignora pentru că el are stabilit propriul set de reguli cu
privire la spaţiere, care nu depind de spaţiile puse de cel ce editează codul sursă.
NOTĂ: Tag-ul de închidere </p> poate fi omis. Acest lucru este posibil
datorită faptului că browserele înţeleg că atunci când întâlnesc un tag <p>, aceasta
implică sfârşitul paragrafului anterior.
Tagul paragraf poate avea mai mulţi parametri. Unul dintre aceştia este
parametrul ALIGN care aliniază textul în funcţie de valoarea pe care o primeşte:
left, center, right. Sintaxa este următoarea:

< P ALIGN=CENTER|LEFT|RIGHT >

10
 TAGUL DIV. Marchează începutul unei noi diviziuni (secţiuni) a
documentului. Sintaxa poate fi următoarea:

< DIV [ ALIGN=LEFT|RIGHT|CENTER]> Text </DIV>

Parametrul ALIGN indică alinierea textului pentru întreaga diviziune. În

lipsa opţiunii ALIGN nu se produce absolut nimic în prezentarea documentului.
DIV marchează doar locul unde începe o noua secţiune în document, ca un simplu
comentariu, sau cu posibilitatea de a schimba alinierea textului.
Tagul DIV nu produce trecerea pe un rând nou.
Deoarece caracterele albe sunt ignorate de browserul care afişează pagina
Web, există comenzi speciale pentru a trece la o linie nouă şi anume:

 TAGUL BR care nu face altceva decât să informeze browserul că textul care

urmează va fi afişat pe o linie nouă, indiferent dacă urmează text sau imagine.

 TAGUL HR. Sintaxa completă a tag-ului <HR> este următoarea:

<HR [SIZE=n] [WIDTH=n] [ALIGN=left|right|center] [NOSHADE]>

Această comandă are ca efect trasarea unei linii orizontale de separare, care
poate avea următoarele caracteristici: grosime (SIZE), lungime (WIDTH), aliniere
(ALIGN) şi fără umbră (NOSHADE).
Diferenţa dintre aceste două tag-uri este că cea de-a doua desenează în plus
o linie între cele două linii de text despărţite de <HR>.

1.3.2 Formatarea caracterelor

Deşi există multe taguri dedicate formatării caracterelor, această formatare

nu este la nivelul celei produse de un procesor de text. Multe taguri sunt lăsate la
interpretarea browserelor sau constituie rezerva pentru dezvoltări ulterioare. Este
de aşteptat ca următoarele versiuni de HTML să accepte definirea de stiluri, ceea ar
facilita formatarea unitară a unui document.
Formatarea caracterelor se poate efectua:
A. la nivel fizic,
B. la nivel logic,
C. la nivel de comunicare.

A. Formatarea la nivel fizic

11
 Formatarea la nivel fizic se efectuează atunci când se indică direct fontul,
culoarea şi/sau stilul în care se afişează anumite porţiuni de text. Tagurile de
formatare la nivel fizic sunt:

 TAGUL B. Aplică stilul bold textului. Are sintaxa: <B>text</B>

Este utilizat pentru evidenţierea anumitor cuvinte, propoziţii etc. Nu produce
o rupere de rând.

 TAGUL BASEFONT. Este o etichetă singulară(fără delimitator de sfârşit de

bloc). Are sintaxa:

<BASEFONT SIZE = număr COLOR = culoare STYLE = font>

unde:
- număr - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic şi 7
pentru fontul cel mai mare);
- culoare - este o culoare precizată prin nume sau printr-o construcţie
RGB;
- font - poate fi un font generic ca "serif", "san serif", "cursive",
"monospace", "fantasy" sau un font specific instalat pe calculatorului clientului, ca
"Times New Roman", "Helvetica" sau "Arial". Se acceptă ca valoare şi o listă de
fonturi separate prin virgulă, de exemplu: "Times New Roman, serif,monospace".
Domeniul de valabilitate al caracteristicelor precizate de această etichetă se
întinde de la locul în care apare eticheta până la sfârşitul paginii sau până la
următoarea etichetă <basefont>.
Dacă acest atribut lipseşte atunci textul din pagina Web are atribute
prestabilite sau atribute precizate de browserul utilizat. Atributele prestabilite sunt:
size = 3, color = black, şi style = " Times New Roman " .

 TAGUL FONT. Se referă la mărimea sau culoarea fontului şi acceptă ca

parametri:
 SIZE: arată o modificare relativă a dimensiunii fontului în cazul
când apare + sau -. Setarea poate fi absolută prin indicarea numărului dintre 1 şi 7.
Mărimea implicită de font este 3.
 COLOR: indică noua culoare pe care o va avea textul. Codul culorii
este dat în formatul hexazecimal RGB: rr reprezintă roşu (de la 00 la FF); gg
reprezintă verde (de la 00 la FF); bb reprezintă albastru (de la 00 la FF). Color este
unul dintre numele acceptate pentru culori. Cele mai uzuale sunt: red, maroon,
yellow, green, lime, teal, olive, aqua, blue, navy, purple, fuchsia, black (este
culoarea implicită), gray, silver, white.
12
  FACE: specifică un nou font dintre cele suportate. În cazul în care
se selectează un font care nu este accesibil pe calculatorul client, browserul va
substitui fontul implicit (posibil Times Roman).
Sintaxa acestui tag este:

<FONT [ SIZE=[+|-]1|2|3|4|5|6|7] [COLOR="#rrggbb"|"color"]

[FACE="font"]>text</FONT>

Iată un exemplu de utilizare a tagului FONT cu cei trei parametri ai săi:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
Normal, <FONT SIZE=-1> Mai mic, </FONT> <FONT SIZE=-2>
Si mai mic.</FONT>
<P><FONT SIZE=1>Cel mai mic text</FONT><BR>
<FONT SIZE=7>Cel mai mare text</FONT>
<P><FONT SIZE=4 COLOR="blue"> Acesta este un text albastru, de
marime 4.</FONT><BR>
<FONT SIZE=4 COLOR="green" FACE="Courier"> Acesta este un
text verde, de marime 4, în Courier. </FONT>
</body>
</html>

Rezultatul execuţiei acestor linii de cod de către browser este următorul:

Figura 3.2.1 - Utilizarea tagului FONT cu cei trei parametri:

size, color şi face
13
 TAGUL PRE. Pentru ca browser-ul sa interpreteze corect caracterele " spatiu
", " tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un
bloc <pre>...</pre>.

 TAGUL I. Aplică textului stilul italic (înclinat). Este utilizat pentru evidenţierea
anumitor cuvinte, propoziţii etc. Nu produce o rupere de rând.
Are următoarea sintaxă: I>text</I>

 TAGUL STRIKE. Sintaxa tagului STRIKE este următoarea:

<STRIKE>text</STRIKE>. Acest tag produce "tăierea" cu o linie a textului
conţinut (utilizat de obicei pentru producerea unor exemple negative: aşa nu se
face). Nu are loc rupere de rând. Fiind un tag nou (HTML 3.2) nu este recunoscut
de toate browserele.

 TAGUL TT. Tagul TT afişează textul în fontul teletype (neproporţional). Este

utilizat, în general, pentru prezentarea unei ieşiri de tip listing (clasic) de calculator.
Nu produce o rupere de rând. Sintaxa lui este: <TT>text</TT>

 TAGUL U. Subliniază textul conţinut. Nu provoacă trecerea pe un rând nou.

Sintaxa tagului este: <U>text</U>
Sublinierea cu tagul U poate produce, împreună cu utilizarea unor culori,
confuzii cu legăturile utilizate într-un hipertext, de aceea, se va preferă evidenţierea
textului prin alte mijloace.

B. Formatarea la nivel logic

Formatarea la nivel logic se efectuează atunci când se indică doar faptul că o
anumită porţiune de text trebuie evidenţiată faţă de textul din jur şi se lasă la
latitudinea browserului să efectueze această evidenţiere. Multe dintre tagurile care
realizează acest lucru produc acelaşi efect vizibil, diferenţierea lor fiind lăsată
browserelor de generaţii viitoare.
Tagurile formatării la nivel logic sunt:

 TAGUL BIG: <BIG>text</BIG>

Afişează textul din container cu dimensiune mai mare decât fontul de bază.
Tagul nu produce o rupere de rând. Unele editoare HTML (inclusiv Netscape
Editor) convertesc tagul BIG în:
<FONT SIZE=+1>text</FONT>
14
 TAGUL DFN: <DFN>text</DFN>
Identifică un termen de definiţie şi-l scrie cu caractere diferite de textul
înconjurător. Este un tag HTML 3.2 şi unele browsere nu-l recunosc. Nu produce o
rupere de rând.

 TAGUL EM: <EM>text</EM>

Evidenţiază textul specificat, de obicei prin scrierea italică.
Nu produce rupere de rând.
 TAGUL Hn: <Hn>text</Hn>
Aplică unul dintre cele şase formate predefinite de antet. Fiecare browser
are formate proprii pentru stilurile logice: H1…H6. Este de preferat ca stilurile să
se specifice în ordine, deci să nu se utilizeze, de exemplu, H3 fără a fi utilizat H2
etc. Vor fi rezervate, în general, pentru diverse niveluri de titluri.
Cele 6 nivele de stiluri sunt prezentate în exemplul de mai jos:

<html>
<head>
<title>Antete</title></head>
<body>
<H1>Antet 1</H1>
<H2>Antet 2</H2>
<H3>Antet 3</H3>
<H4>Antet 4</H4>
<H5>Antet 5</H5>
<H6>Antet 6</H6>
</body></html>

15
 Figura 3.2.2 - Utilizarea tagului Hn pentru crearea antetelor
Tagurile Hn provoacă o rupere de rând şi, implicit, au câte un rând gol
înainte şi după.

 TAGUL BLOCKQUOTE. Pentru ca un bloc de text sa fie indentat (marginea

din stanga a textului sa fie deplasata la dreapta la o anumita distanta fata de
marginea paginii ), acesta trebuie inclus intre etichetele
<blockquote>...</blockquote>.

<html>
<head>
<title>Text indentat</title></head>
<body>
Textul ce urmeaza este indentat:<blockquote> Aceste etichete nu se
refera la particularitatiile caracterelor ce compun textul, ci la functiile
pe care le poate avea un bloc de text in cadrul paginii Web. Toate
aceste etichete produc automat trecerea la un rand nou si adaugarea
unui spatiu suplimentar. </blockquote>
</body>
</html>
16
 Figura 3.2.3 Text indentat

 TAGUL CENTER. Blocul introdus de etichetele <center>...</center> aliniază

centrat toate elementele pe care le conţine.

 TAGUL NOBR. Blocul de text cuprins între etichetele <nobr>...</nobr> va fi

afişat pe o singură linie.

 TAGUL KBD: <KBD>text</KBD>

Aplică textului menţionat un font similar intrării de la tastatură, deci un font
neproporţional. Multe browsere aplică acelaşi font pentru KBD, TT şi altele
asemenea (de exemplu, Netscape Navigator utilizează Courier). Tagul KBD nu
provoacă o rupere de rând automată.

 TAGUL SMALL: <SMALL>text</SMALL>

Afişează textul cu o dimensiune mai mică decât textul înconjurător.
Netscape Editor utilizează conversia în: <FONT SIZE=-1>text</FONT>. Nu
produce rupere automată de rând.

 TAGUL STRONG: <STRONG>text</STRONG>

17
 Produce o evidenţiere pronunţată a textului, uzual prin trecerea în aldine. Nu
produce rupere automată de rând. Efectul vizibil este acelaşi ca şi la tagul B
(prezentat la formatarea logică), care aplică textului stilul bold.
 TAGUL SUB: <SUB>text</SUB>
Mută textul selectat mai jos decât linia de baza a textului precedent şi aplică
un font mai mic (face trecerea în indice inferior). Nu produce rupere automată de
rând.
 TAGUL SUP: <SUP>text</SUP>
Mută textul selectat mai sus decât linia de bază a textului precedent şi aplică
un font mai mic. Nu produce rupere automată de rând.
Exemplul următor arată cum se vizualizează texte care fac obiectul unora
dintre tagurile prezentate anterior:

<html>
<head>
<title>Formatare la nivel logic</title>
</head>
<body>
<KBD> Acesta este un text scris cu KBD </KBD><BR>
<SAMP> Acesta este un text scris cu SAMP </SAMP><BR>
<SMALL>A cesta este un text SMALL </SMALL> <BR>
<STRONG> Acesta este un text STRONG </STRONG> <BR>
Formula apei este H<SUB>2</SUB>O,<BR>
iar X<SUP>2</SUP> este X*X
</body>
</html>

Figura 3.2.4 - Tagurile formatării logice a caracterelor

18
 C. Formatare la nivel de comunicare
În această secţiune se prezintă taguri dedicate formatărilor specifice pentru
anumite tipuri de informaţii. Formatările respective intră tot în categoria
formatărilor logice, deci forma de vizualizare depinde de browserul utilizat.

 TAGUL ADDRESS. Cu ajutorul acestui tag se vizualizează o informaţie de

adresă, uzual o adresă de e-mail. Are următoarea structură:
<ADDRESS [ ALIGN=left|center|right]> text</ADDRESS>
Parametrul ALIGN indică modul de aliniere. Acest tag provoacă trecerea la
un paragraf nou.

 TAGUL CITE: <CITE>text</CITE>. Indică o referinţă, cum ar fi un nume de

carte, articol, numele unui autor. Referinţa este diferenţiată faţă de textul curent.
Formatarea este logică, deci diferenţierea este dependentă de browserul utilizat. Nu
se produce rupere de rând.

 TAGUL CODE: <CODE>text</CODE>

Aplică textului un font neproporţional precum cel de calculator (clasic).
Forma efectivă de afişaj depinde de browser. Multe browsere utilizează acelaşi font
pentru CODE, KBD, SAMP şi TT.

 TAGUL LISTING: <LISTING>text</LISTING>

Aplică textului un font similar ieşirilor de calculator. Este un tag păstrat doar
pentru compatibilitate cu versiuni mai vechi. Provoacă trecerea la un nou paragraf.

 TAGUL VAR: <VAR>text</VAR>

Produce o evidenţiere a textului, uzual prin trecerea în italice. Este o
formatare logică, depinde deci de browser, dar este dedicată evidenţierii termenilor
noi introduşi într-un document. Nu produce schimbări în curgerea textului.

1.3 Aplicații

Exemplul 1.

<html>
<head>
<title>Aceasta este prima mea pagina de Web
</title>
19
 </head>
<body>
Bine ati venit in pagina mea de Web!
<br> Inceput
</body>
</htlm>

Exemplul 2.

<html>
<head>
<title>bloc preformatat </title>
</head>
<body>
<pre>
Prima linie
A doua linie
A treia linie
</pre>
</body>
</html>

20
Exemplul 3.

<html>
<head>
<title>culoare de fond </title></head>
<body bgcolor= "#C7F0FE" text=red>
O pagina Web cu fondul albastru si culoarea textului rosie!
</body>
</html>

Exemplul 4.

<html>
<head>
<title>Blocuri de caractere monospatiate si clipitoare </title>
21
 </head>
<body>
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este:
<code>Function f(x,y) {return x+y;}</code><br>
Tastati urmatoarea comanda comanda DOS:
<kbd> copy c:\My Documents\Dana\* c:\Nicolae<kbd><br>
<tt>Asa scrie un teleprinter</tt><br>
Acest cuvant clipeste <blink>Blink</blink>
</body>
</html>

Exemplul 5.

<html>
<head>
<title> Linii orizontale</title></head>
<body>
<center> <hr width=10% size=4 noshade> <hr width=40%>
<hr width=70%> <hr width=100%> <hr width=70%>
<hr width=40%> <hr width=10%> </center>
</body></html>

22
Exemplul 6.

html>
<head>
<title> Blocul <div></title></head>
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.
<div align="right">
O singura linie.O singura linie.O singura linie.O singura linie.<br>
O singura linie.O singura linie.O singura linie.O singura linie.<br>
O singura linie.O singura linie.O singura linie.O singura linie.
<br></div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br></div>
</body>
</html>

23
Exemplul 7.
<html>
<head>
<title>Exemplu 7</title>
</head>
<body>
<HTML>
<HEAD>
<TITLE> A patra pagina Web </TITLE></HEAD>
<BODY>
<STRONG> BOLD </STRONG><BR>
<EM> ITALIC </EM><BR>
<TT> COURIER NEW </TT><BR>
<SMALL> MIC </SMALL>
MEDIU
<BIG> MARE </BIG><BR>
<U> SUBLINIAT </U><BR>
<PRE>
SPATIILE NU
SUNT IGNORATE
DE BROWSER
</PRE>
a <SUB> n </SUB> =2 <SUP> n </SUP>
</BODY>
</HTML>
</body>
</html>

24
Exemplul 8.

<html>
<head>
<title> SEMINAR 1 </title>
<body bgcolor=lightyellow text=red leftmargin=50 topmargin=10>
PAGINA NR.1
<br> UN TEXT SIMPLU
CE SE SCRIE PE UN SINGUR RAND
<br> <b> Text ingrosat </b>
<i>Text italic </i>
<u> Text subliniat </u>
<br> text cu indici superiori si inferiori
²
₃
<br> text imbricat:
<b> Primul
<i> seminar este </i>
<u> usor </u> </b>
<br>
functia <code> f(x) = x+1 </code>
<br><basefont size=7 color=blue style=Arial>

25
Am schimbat atributele textului.
<br> Bloc preformatat
<pre>
<basefont size=5 color= gray style=Times New Roman>
Matricea

1 2 3
4 5 6

are 2 linii si 3coloane

</pre>
<br>
Se partreaza atributele de la ultima eticheta basefont
</body>
</html>

26
Exemplul 9.

<html>
<head>
<title> SEMINAR 2 </title>
<body bgcolor=lightblue>
<h1 align=center> <font color= red > CIG ANUL III
<BR> ORAR </font></h1>
<pre>
<b><font size=5 color=blue>
<center>
ORA/ZIUA LUNI MARTI MIERCURI</b>
</font></center>
<hr align=center width = 800 size=4 color= blue>
<font color=navy size=5>
<I> <CODE>
8-10 </code> <font face="arial"> SIAD </font>
<code>
10-12 </code> <font face="arial"> Contab.fin </font>
<code>
12-14 </code> <font face="arial"> Limbaje </font>
</i></font>
</pre>
<blockquote>
<font size=4 color=blue>
Orarul se gaseste pe site-ul Universitatii din Pitesti si este pus la
dispozitia studentilor dim data de 1.03.2005. </BLOCKQUoTE></font>
<font color=navy size=5 weight = 900>
Adresa Universitatii este :
<address> Universitatea Pitesti <br> Str. Targul din Vale
<br> Arges </address> </font>
<p><u> <font size=2> Nota</u> :
<i> Prezenta la cursuri si seminarii este obligatorie
</i> </font>
</body>
</html>

27
28