6.

1 Proiectarea paginilor Web utilizând limbajul HTML

6.1.1 Proiectarea paginilor Web. Considera ţii ge nerale
HTML este un acronim care provine de la HyperText Markup Language şi reprezintă un limbaj
declarativ ce permite crearea de documente hipertext, pentru paginile Web, documente care pot fi
vizualizate cu ajutorul navigatoarelor Web (în mediul Internet cel mai folosit este browser-ul Internet
Explorer).
Web reprezintă un spaţiu abstract de informaţie, fiind practic un serviciu de informare care face apel la
conceptul de hipermedia. În contextul unui document dat, există o deosebire conceptuală între noţiunile de
hipermedia şi multimedia.
Un document multimedia este un document care poate să conţină, atât informaţii de natură statică (text,
imagini, grafice sau diagrame), cât şi informaţii dinamice (sunet, animaţie, film). Dacă la acest conţinut
informaţional se adaugă şi capabilităţi de realizare a unor legături între părţile componente ale unui
document multimedia, ceea ce rezultă reprezintă un document hipertext sau document hipermedia.
În practică, termenii hipertext şi hipermedia tind să fie consideraţi similari, deosebirea structurală fiind dată
de elementele multimedia (prin formatele grafice, audio şi video) conţinute de un document hipermedia.
La modul general, un document hipermedia poate fi identificat prin următoarele caracteristici
fundamentale:
Forma de vizualizare este dependentă de programul de afişare a informaţiilor conţinute de documentul
respectiv, în speţă, de navigatorul Web;
Structura si conţinutul documentului trebuie să respecte un format general de reprezentare pentru a se asigura
portabilitatea şi independenţa de platformă (cele două atribute se referă la necesitatea recunoaşterii
documentului HTML, indiferent de componenta software şi de echipamentele hardware cu care este dotat
sistemul). Acest format de reprezentare este asigurat şi furnizat de limbajul de marcare hipertext HTML.
Tehnicile hipertext (hipermedia) pot fi utilizate în diverse aplicaţii, precum cărţile electronice, enciclopediile,
sistemele on-line de ajutor, sistemele de învăţare asistată de calculator (CAL – Computer-Aided Learning),
scrierea colaborativă de documente, chioşcurile informaţionale interactive, sistemele decizionale etc.
Hipertextul reprezintă o formă neliniară de document electronic, fiind considerat o metodă de organizare
complexă a informaţiilor, prin care datele sunt memorate într-o reţea de noduri şi legături. Această reţea
poate fi parcursă prin intermediul navigatoarelor interactive şi manipulată de un editor structural.
Conceptual, hipertextul poate fi definit ca o metodă de prezentare a informaţiei, prin care anumite secvenţe
ale textului, numite cuvinte de legătură, sunt evidenţiate în mod special, ca prin accesarea lor să se obţină
informaţii suplimentare în legătură cu subiectul ales. Aceasta denotă o tehnică pentru organizarea informaţiei
textuale într-o manieră sofisticată, neliniară, în vederea facilitării exploatării rapide a unei cantităţi mari de
cunoştinţe.
Cuvintele de legătură prin care se realizează link-urile reprezintă secvenţe text formatate de o manieră
deosebită, prin aplicarea unei anumite culori (de regulă, albastru), dar şi prin sublinierea textului. De
asemenea, o legătură hipertext este evidenţiată şi prin modificarea aspectului de afişare a indicatorului
mouse-ului, în momentul în care utilizatorul îl plasează pe secvenţa de text respectivă.
Astfel, pentru explicitarea unei noţiuni, prin aceste cuvinte de legătură, se pot obţine mai multe nivele de
detaliere a conceptului asupra căruia utilizatorul doreşte să se informeze. De exemplu, plecând de la structura
generală a arhitecturii unui calculator personal, demersul informaţional al unui utilizator care doreşte să se
documenteze în legătură cu cache-ul primar al sistemului este următorul:
 Microprocesor
Unitatea centrală
Arhitectura PC Memoria internă
Echipamente periferice
Placa de bază

Memoria cache
Cache primar Memoria video Memoria RAM
Cache secundar Printer Buffer Memoria ROM
Memoria CMOS

6.1.2 Ele mente funcţio nale ale docume nte lor HTML. Mar cator i, a tr ibute, entităţi
Termenul tehnic pentru textul marcat este acela de element, acesta fiind văzut ca o componentă structurală a
unui document. Limbajul HTML conţine o mare diversitate de astfel de elemente, care poartă denumirea
specifică de tag-uri sau marcatori. Maniera de identificare a tag-urilor descriptivi, precum şi semantica
acestora, se specifică după următoarea sintaxă generală:
< Nume_tag > Text (Imagine) [< /Nume_tag >]
început de tag sfârşit de tag
Observaţie: numele unui tag HTML se încadrează întotdeauna între delimitatorii „<” şi „>”, nu poate începe
cu o cifră şi nu admite caracterul spaţiu.
Plecând de la caracterul opţional al tag-ului de sfârşit (plasarea acestuia între paranteze drepte), se pot
deosebi două tipuri de tag-uri HTML, şi anume:
• Tag singular care conţine numai tag-ul de început (Exemplu: <HR> permite trasarea unei linii
orizontale în pagina Web)
• Tag pereche care are în structura sa, atât tag-ul de început, cât şi cel de sfârşit (Exemplu: <B> Text
</B> permite aplicarea caracterelor aldine asupra textului cuprins între cei doi marcatori)
În anumite situaţii, pentru a ameliora design-ul unei pagini Web, se pot utiliza o serie atribute (parametrii)
ale tag-urilor HTML, în acest caz, sintaxa devenind:
<Nume_tag atribut1=valoare1...atributn=valoaren>Text[< /Nume_tag>]
Atunci când un tag HTML prezintă unul sau mai multe atribute, acestea sunt specificate întotdeauna în tag-
ul de început al liniei de comandă. Exemplu:
<HR size=3> permite trasarea unei linii orizontale, având grosimea de 3 puncte)
Numele de tag-uri şi de atribute pot fi editate cu caractere majuscule, cu minuscule sau combinaţia dintre
acestea, HTML fiind un limbaj case-insensitive (nu este sensibil la deosebirea dintre majuscule şi minuscule).
Însă, în anumite situaţii, se recomandă folosirea literelor mici, pentru ca elementele de cod să fie recunoscute
de orice program de vizualizare a documentelor Web.
Fişierele HTML sunt fişiere text obişnuite, divizate în două părţi: antetul (HEAD) şi corpul de text (BODY).
Structura generală a unui astfel de document conţine următoarele informaţii minimale:
<HTML> început program
<HEAD> început antet
<TITLE> Text </TITLE> titlul aplicaţiei
</HEAD> sfârşit antet
<BODY>
.. corp text
.
</BODY>
</HTML> sfârşit program
Observaţie: Secvenţa de text editată în tag-ul TITLE, nu reprezintă titlul propriu-zis al aplicaţiei Web, ea va fi
afişată pe bara de titlu a navigatorului cu ajutorul căruia se vizualizează pagina respectivă. De obicei, între
marcajele <HEAD> şi </HEAD> apar definiţii de subprograme (rutine) scrise în limbaje de tip script
(JavaScript), definiţii de stiluri CSS ori meta-elemente, pentru a ne asigura că sunt analizate şi memorate de
navigator, antetul fiind prima informaţie procesată.
În interiorul corpului de text BODY se regăseşte suita de tag-uri HTML care permit proiectarea paginii
Web, în raport de necesităţile de informare ale Web designer-ului (cel care concepe şi editează documentul
hipertext). Este de reţinut faptul că modul de spaţiere a tag-urilor nu are importanţă, spaţiile albe (caracterul
spaţiu, Tab sau New line) fiind practic ignorate de navigatorul Web.
De asemenea, în momentul procesării programului sursă, navigatorul nu va semnala nici o eroare, în situaţia
în care programul ar conţine anumite cod elemente sau atribute necunoscute, acestea fiind practic ignorate.
Introducerea unui tag necunoscut sau incorect are ca efect afişarea acestuia în pagină, ca o simplă secvenţă
de text. Dacă un atribut are o valoare invalidă, aceasta va fi ignorată, fiind înlocuită automat cu valoarea
implicită a acelui atribut.
6.1.3 Salvarea , vizua lizarea şi modificarea unui doc ume nt HTML
Pentru introducerea unui program HTML se poate utiliza orice editor de texte, dar se recomandă editorul
Notepad, pornind de la considerentul ca un fişier HTML este practic un fişier ASCII (conţinând caractere
neformatate). După ce a fost editat întregul program, utilizatorul procedează la salvarea fişierului care
conţine documentul respectiv. Notepad va propune automat extensia .TXT, specifică fişierelor de tip text,
extensie care trebuie modificată cu HTML sau HTM, pentru ca în momentul accesării, navigatorul să
recunoască acel fişier ca pe un document Web.

Salvarea fişierului Notepad

cu extensia specifică
documentelor HTML

Fişierul HTML poate fi accesat din orice program de gestionare a fişierelor (Windows Explorer sau My
Computer), sau chiar direct din fereastra programul navigator (Internet Explorer), prin comanda Open.

Actualizare
fişier HTML

Accesare
fişier HTML Vizualizare fişier în
fereastra navigatorului

În situaţia în care utilizatorul designer doreşte operarea unor modificări asupra paginii Web pe care a
proiectat-o, el va proceda la vizualizarea documentului sursă, prin apelarea comenzii Source din meniul
View al navigatorului. Modificările vor fi salvate, după care pagina Web va fi actualizată apelând la una din
următoarele variante: prin comanda Refresh din meniul View, prin acţionarea butonului de comanda cu
acelaşi nume, plasat pe bara de instrumente Standard a navigatorului, sau prin activarea tastei funcţionale F5.
6.1.4 Proiectarea paginilor Web. Desig n şi funcţionalitate
6.1.4.1. Aranjarea în pagină şi formatarea documentelor HTML
Cele mai importante tag-uri HTML utilizate pentru acest tip de operaţii sunt:
<! Text> permite introducerea în program a unui comentariu, care nu va fi afişat în momentul accesării
paginii Web, dar care poate permite parcurgerea cu uşurinţă a codurilor din programul HTML. Se
recomandă utilizarea comentariilor pentru a fi oferite informaţii privitoare la conţinutul paginii Web, data şi
motivul creării/actualizării acesteia sau pentru a fi explicate anumite construcţii sau prelucrări mai complexe,
realizate în programele HTML
<B>Text</B> pentru editarea textului cu caractere aldine (îngroşate)
<I>Text</I> pentru editarea textului cu caractere italice (caractere cursive)
<EM>Text</EM> combină facilităţile tag-urilor anterioare (permite aplicarea de caractere cursive
accentuate)
<TT>Text</TT> permite scrierea cu caractere expandate, tip maşina de scris
<Hi Align= Left|Center|Right|Justify>Text</Hi> unde „i” specifică dimensiunea caracterelor, în
număr puncte tipografice1 (H6 - dimensiunea minimă, H1- dimensiunea maximă)
<BIG>Text</BIG> editarea textului cu o dimensiune mai mare decât cea curentă
<SMALL>Text</SMALL> aplică o dimensiune mai mică decât cea curentă
<U>Text</U> aplică asupra textului operaţia de subliniere
<SUB>Text</SUB> permite scrierea sub formă de indice
<SUP>Text</SUP> permite scrierea sub formă de exponent
<P Align=Left|Center|Right> asigură editarea unui paragraf, cu posibilitatea de aliniere a textului
(Stânga|Centrat|Dreapta), prin atributul Align
<BR> permite trecerea pe rândul următor sau inserarea în pagină a unor linii vide
<DIV Align=Left|Center|Right|Justify> permite alinierea unui text sau a unei imagini, cu valorile:
Stânga|Centrat|Dreapta|Justificat
<CENTER> Text (Imagine)</CENTER> centrează un text sau o imagine
<HR Size=s Color=denumire/cod_culoare Width=n% Align=Left|Center| Right Noshade>
HR permite trasarea unei linii orizontale, ca o linie de demarcaţie între diferitele informaţii conţinute de
documentele HTML. Prezintă următoarele atribute:
Size – dimensiunea (grosimea liniei – în puncte tipografice)
Color - culoarea liniei, folosind codurile de culoare
Width – reprezintă cât la sută din lăţimea ferestrei ocupă linia orizontală
Align - alinierea liniei, în situaţia în care aceasta nu ocupă întreaga lăţime a paginii
Noshade - inhibă aplicarea unui efect de umbrire asupra liniei orizontale
<MARQUEE Bgcolor=denumire/cod_culoare Direction=Left|Right Behavior=Scroll|Slide|
Alternate> Text </MARQUEE>
Tag-ul MARQUEE are ca efect defilarea pe ecran a unui text sau a unei imagini, atributelor acestuia având
următoarea semnificaţie funcţională:

1
Un punct tipografic reprezintă 1/72 inch (un inch =2,54 cm)
Bgcolor - în cazul în care comanda se aplică unui şir de caractere, se poate stabili o culoare de fundal pentru
acestea
Direction - direcţia de deplasare a textului sau a imaginii (Stânga|Dreapta)
Behavior - modele de defilare a textului sau a imaginii (defilare continuă prin Scroll, defilare unidirecţională
prin Slide, defilare prin alternanţă cu Alternate)
<SPAN Style=”background-color:denumire/cod_culoare”> Text </SPAN>
Tag-ul SPAN asigură stabilirea unei culori de fundal pentru o secvenţă de text, culoarea care va fi introdusă
cu ajutorul atributului Style2.
Tag-ul BODY care asigură editarea corpului de text, prezintă o serie de atribute ce permit realizarea unor
setări generale, la nivelul întregului document HTML, astfel:
<BODY Bgcolor= c Text=t Link=1 Vlink=v Alink=a > … </BODY>
Bgcolor – setează culoarea pentru fundalul paginii Web
Text – stabileşte culoarea caracterelor
Link – culoarea legăturilor care nu au fost accesate sau vizitate
Vlink – culoarea legăturilor care au fost vizitate
Alink - culoarea legăturilor în momentul activării lor
În situaţia în care utilizatorul introduce tag-ul BODY, fără atributele sale, există anumite setări implicite,
aplicate acestor elemente ale paginii Web (culoarea de fundal-alb, culoarea caracterelor-negru, culoarea
legăturilor neaccesate-albastru, a legăturilor vizitate-indigo, culoarea în momentul accesării-roşu).
Toate valorile atributelor din tag-ul BODY se specifică în două moduri:
1. Definirea culorii după modelul RGB (red, green, blue - culorile primare în televiziune), sub forma
#rrggbb. Cu alte cuvinte, codificarea culorilor se va face cu ajutorul a şase cifre hexazecimale (de la 0 la F),
precedate de caracterul diez, cifre ce reprezintă cantitatea de roşu, de verde şi de albastru, conţinută de
fiecare culoare. Exemple de coduri hexazecimale asignate unor culori:

2. Navigatoarele de ultimă generaţie pot recunoaşte culorile stabilite în paginile Web, şi în situaţia în care
acestea sunt specificate prin denumirea lor în limba engleză. Exemple de culori accesate prin nume
culoare:

2
Style reprezintă o proprietate de stil care va fi prezentată şi la fişierele CSS (foi de stil)
Toate setările din tag-ul BODY sunt operaţionale la nivelul întregului document HTML. Există însă situaţii
în care designer-ul documentului Web doreşte aplicarea unor formatări, numai la nivelul unei secvenţe de
text din pagina respectivă, situaţie în care foloseşte tag-ul FONT, cu următoarele atribute de formatare:
<FONT Face=f Color= denumire/cod_culoare Size=s >Text </FONT>
Face - stabileşte tipul de font ce se doreşte a fi aplicat; în plus, există posibilitatea de a specifica mai multe
tipuri de fonturi (separate prin virgulă), urmând ca la procesare, navigatorul Web să execute fontul pe care îl
recunoaşte din lista respectivă
Observaţie: în cazul în care numele fontului este compus din mai multe cuvinte, acesta va fi indicat între
ghilimele (Exemplu: Face=”Arial Black”, Helvetica, Tahoma).
Color – stabileşte culoarea caracterelor, prin nume sau prin coduri hexazecimale
Size – setează dimensiunea caracterelor, măsurată în număr puncte tipografice
Pe lângă tag-urile prezentate anterior, într-un document HTML se pot introduce şi o serie de entităţi,
utilitatea majoră a acestora fiind dată de posibilitatea de generare a unor simboluri sau a unor caractere
speciale. Pentru a concepe documente HTML conţinând diacritice, se vor utiliza în programul sursă
entităţile-caracter.
Accesarea unei entităţi se va realiza prin intermediul referinţelor la entităţi, folosindu-se construcţia sintactică
&nume_entitate; În ceea ce priveşte referinţa la o entitate caracter, aceasta va fi specificată prin codul
numeric al caracterului respectiv, fiind prefixată, în acest caz, de două simboluri: „&#cod_numeric”.
Cele mai utile entităţi sunt prezentate în tabelul următor:

Vizualizare Entitate-
Simbol Entitate Vizualizare
caracter
copyright &copy; © &#194; Â
marcă înregistrată &reg; ® &#226; â
trademark &#8482; ™ &#258; Ă
mai mic decât &lt; < &#259; ă
mai mare decât &gt; > &#206; Î
ampersand &amp; & &#238; î
spaţiu &nbsp; &#350; Ş
linie orizontală &#8212; — &#351; ş
 ghilimele &quot; " &#354; Ţ
&#355; ţ

6.1.4.2. Introducerea de liste în documentele HTML

Într-un document HTML se pot defini trei tipuri de liste: liste ordonate (Ordered List), liste
nenumerotate (Unnumbered List) şi liste de definitii (Definition List).
<OL Type=t Start=s> în care Type specifică tipul numerotării, iar Start valoarea de început a acesteia
(se consideră valoare implicită prima valoare a listei ordonate).
t=1 numerotare prin cifre arabe (tipul implicit de listă Web)
t=A numerotare utilizând caractere majuscule
t=a numerotare utilizând caractere minuscule
t=1 numerotare prin cifre romane utilizând caractere majuscule
t=i numerotare prin cifre romane utilizând caractere minuscule
<UL Type=t> în care Type indică simbolul care va preceda elementele listei:
t=square (pătrat) t=circle (cerc vid) t=disc (cerc plin)
În ambele cazuri, elementele care fac parte din structura listei se definesc cu ajutorul unei etichete HTML, şi
anume <LI> (List item).

Listă
ordonată
(Type=A) Listă
ordonată
Listă (Type=1)
nenumerotată
(Type=square)

Listă de
definiţii

<DL> permite realizarea unei liste de definiţii care presupune specificarea termenilor introduşi şi a
definiţiilor acestora, la modul următor:
<DT> pentru introducerea termenilor ce se doresc a fi definiţi (explicaţi)
<DD> pentru descrierea propriu-zisă a termenului introdus prin tag-ul anterior
În funcţie de necesităţile designer-ului Web în ceea ce priveşte modalitatea de prezentare a informaţiei, într-
un document HTML există şi posibilitatea generării de liste imbricate, este vorba despre facilitatea definirii
unei liste într-o altă listă, indiferent de tipul acestora, pe mai multe nivele de ierarhizare a informaţiilor
prezentate în structurile respective.
Un exemplu de liste imbricate, pornind de la prezentarea generală a reţelei Internet este prezentat în figura
anterioară. Pentru realizarea în pagina Web a unei astfel de structuri informaţionale ierarhizate (structură
imbricată de liste), se va edita următoarea suită de comenzi HTML:
 început program

sfârşit program

6.1.4.3. Generarea legăturilor hipertext în documentele HTML

Hipertextul (hyperlink-ul) reprezintă cea mai importată facilitate în proiectarea paginilor Web, prin faptul
că realizează delimitarea funcţională între un document obişnuit şi un document hipermedia. Hipertextul
permite ca, prin „activarea” (executarea unui clic) unui şir de caractere sau a unei imagini, să se vizualizeze
conţinutul informaţional al altor fişiere HTML sau al altor zone aparţinând fişierului curent. În raport de
locaţia fişierului destinaţie, către care se generează legătura, există mai multe tipuri funcţionale de legături
hipertext, şi anume:

legături interne stabilite între zone diferite aparţinând aceluiaşi document

legături locale stabilite între fişiere diferite, plasate pe acelaşi server

legături externe generate între fişiere plasate pe servere diferite
Pentru realizarea legăturilor hipertext se foloseşte tag-ul ANCHOR (ancora), care se introduce, în mod
diferenţiat, în raport de natura documentului implicat în realizarea hyperlink-ului. Astfel, la sursă, în fişierul
din care se va genera conexiunea, tag-ul Anchor va conţine atributul HREF (Hypertext Reference) care
permite specificarea URL-ului (Uniform Resource Locator) fişierului destinaţie, în speţă, adresa acestuia. În
ceea ce priveşte specificarea destinaţiei se va utiliza atributul NAME, prin care se precizează locaţie către
care se generează legătura respectivă.
În cazul legăturilor interne, sintaxa tag-ului Anchor (A) va cuprinde următoarele elemente funcţionale:
La sursă: <A Href="#cuvânt-cheie"> Text (Imagine) de conectare </A>
La destinaţie: <A Name="cuvânt-cheie"> Paragraf ţintă </A>
Cuvântul cheie reprezintă o informaţie comună sursei şi destinaţiei, prin care se asigură legătura nemijlocită
între cele două locaţii. Alegerea cuvântului cheie rămâne la latitudinea utilizatorului, fiind de preferat ca acest
cuvânt sa fie cât mai sugestiv, tocmai în ideea de a identifica cu uşurinţă specificul legăturii generate. Prin
elementul „paragraf ţintă” se precizează secvenţa text care va reprezenta destinaţia conexiunii.

Prin exemplul anterior s-a urmărit realizarea unor conexiuni interne între diferitele structuri de informaţii
conţinute de documentul curent. Astfel, prin activarea legăturii reprezentate de textul FABBV, ca element al
listei nenumerotate (de tip circle), se permite deplasarea într-o altă locaţie a paginii curente, unde se afişează
un scurt logos despre facultatea de Finanţe. Pentru a se permite revenirea în antetul paginii, se va proceda la
activarea link-ului reprezentat de imaginea GIF.
O altă aplicaţie ce exemplifică realizarea legăturilor interne este prezentată în cele ce urmează:

<HTML>
<HEAD>
<TITLE>Pagină Web</TITLE>
</HEAD>
<BODY>
<H1 align=center> EXEMPLUL DE PAGINĂ WEB</H1>
<P>Prin conţinutul acestui document se exemplifică legătura către un paragraf al documentului.
<P>
<P><A NAME="CCC"></A>
<OL>
<LI> <H1> <A HREF="#AAA"> Materiile anului I </A></H1>
<LI> <H1> <A HREF="#BBB"> Materiile anului II </A></H1>
<LI> <H1> <A HREF="#DDD"> Materiile anului III </A></H1>
</OL>
<HR><P>
<H2> <A name="AAA"> Materiile anului I </A></H2><BR>
<UL>
<LI>Economia politică
<LI>Algebră liniară
<LI>Analiză matematică
<LI>Bazele programării
<LI>Sisteme de calcul si operare
<LI>Bazele statisticii
</UL>
<HR>
<A HREF="#CCC"> Revenire început </A>
<HR>
<P>
<H3> <A NAME="BBB"> Materiile anului II </A></H3><BR>
<UL>
<LI>Bazele contabilitătii
<LI>Drept civil
<LI>Programarea calculatoarelor
<LI>Management
<LI>Baze de date
<LI>Cercetări operationale
<LI>Finante-Monedă
<LI>Analiza sistemelor
</UL>
<HR>
<A HREF="#CCC">Revenire început </A>
<HR><P>
<H4> <A NAME="DDD"> Materiile anului III </A></H4><BR>
<UL>
<LI>Sisteme de operare
<LI>Structuri de date
<LI>Limbaje evoluate de programare
<LI>Algoritmi si logica matematica
<LI>Contabilitatea întreprinderii
<LI>Dreptul afacerilor
</UL>
<HR>
<A HREF="#CCC">Revenire început </A>
<HR>
<BODY>
</HTML>
În contextul realizării legăturilor cu alte fişiere HTML (llegături locale), sintaxa tag-ului Anchor este
îmbunătăţită cu numele, eventual adresa fişierului destinaţie:
La sursă: <A Href="Nume/adresa_fişier HTML#cuvânt-cheie"> Text (Imagine) de conectare</A>
La destinaţie: <A Name="cuvânt-cheie"> [Paragraf ţintă] </A>
În cazul în care paragraful ţintă nu este precizat în linia de comandă (acesta fiind opţional), conexiunea se va
realiza automat către antetul documentului destinaţie.
Exemplul următor relevă realizarea unor legături hipertext între elementele unei liste nenumerotate (de tip
square) dintr-o pagină principală (ASE.HTML) şi alte documente HTML, reprezentând pagini de prezentare
în detaliu a facultăţilor din ASE (fişierele FABBV.HTML şi CIG.HTML).
În cazul în care este vorba despre o legătură externă, sintaxa tag-ului Anchor se modifică, prin includerea
unor elemente funcţionale care ţin de identificarea fişierului destinaţie (prin URL-ul acestuia) în structura
reţelei Internet.
<A Href=''HTTP://WWW.adresa_host"> Text (Imagine) de conectare </A>
O formă particulară de legătură hipertext o reprezintă transmiterea unui mesaj prin poşta electronică (e-
mail).
<A Href="mailto:adresă_e-mail"> Text (Imagine) de conectare </A>
Adresa e-mail cuprinde în structura sa următoarele elemente:
nume_cont@furnizor_servicii_Internet.domeniu (indicativ_ţară)
Eticheta "Mailto" va deschide un
program de scriere şi expediere a
scrisorilor (Microsoft Outlook Express)
către destinatarul a cărui adresă este
furnizată în linia de comandă.
Exemple de furnizori de servicii
Internet:: dnt (Dynamic Network
Technologies), digicom, pcnet,
euroweb, xnet, ase, etc. Exemplu de
adresă e-mail: decanat@cig.ase.ro

6.1.4.4. Includerea în documentele HTML a elementelor multimedia. Imagini grafice,

formate video şi formate audio
În funcţie de modul în care se comportă în timpul vizualizării în fereastra navigatorului Web, în speţă, de
dinamismul lor, se poate vorbi despre mai multe tipuri de imagini, şi anume:
1. imagini statice, simple sau purtătoare de hyperlink-uri
2. imagini care asigură fundalul paginilor Web
3. imagini dinamice (animate – filme sau clipuri)
4. imagini reactive ce conţin zone generatoare de legături hipertext
1. Pentru a introduce în pagina Web o imagine statică se utilizează tag-ul IMG (Image), care prezintă
următoarea sintaxă generală:
<IMG Src=”Nume/adresa_fişier_grafic” Height=h Width=l Border=n Align=Left|Right
Alt=”Nume_etichetă”>
Atributele tag-ului de setare a unei imagini au următoarea semnificaţie funcţională:
Src – specifică numele fişierului care furnizează imaginea grafică sau, după caz, specificatorul de fişier al
acestuia (adresa completă a fişierului); există anumite tipuri specializate de fişiere ce conţin imagini, de
exemplu: fişiere de tip BMP, GIF, TIFF, JPEG, PNG, WMF etc.
Height şi Width – sunt elemente ce permit stabilirea dimensiunii imaginii din pagina Web, respectiv
înălţimea şi lăţimea acesteia (se măsoară în pixeli)
Align – stabileşte modalitatea de aliniere a imaginii în pagină (Stânga|Dreapta); în cazul în care utilizatorul
doreşte alinierea imaginii pe mijlocul paginii Web, se poate apela, fie la tag-ul DIV, cu valoarea Center a
atributului Align, fie la posibilitatea de centrare pe pagină, prin tag-ul CENTER
Border – permite definirea unui chenar de încadrare a imaginii, valoarea „n” stabilind grosimea liniei
respective (se măsoară în puncte tipografice)
Alt – permite afişarea unei etichete explicative în momentul plasării indicatorului mouse-ului pe suprafaţa
imaginii

<IMG Src=”Graduate.WMF”
Height (150 pixeli)

Height=150 Width=150
Align=Left
Border=2>

Width (150 pixeli)

Pentru ca o imagine simplă să se transforme într-o imagine generatoarea de hyperlink-uri, este necesar
ca aceasta să funcţioneze cu tag-ul ANCHOR (ANCORĂ) care permite realizarea de legături hipertext.

<A Href=”Nume/Adresa_fişier”> <IMG Src=”Nume/adresa_fişier_grafic” Height=h Width=l

Align=Left|Right Border=n> </A>
Prin atributul Href din ancoră se specifică fişierul HTML către care se va genera legătura hipertext, plecând
de la imaginea setată prin tag-ul IMG (activarea hyperlink-ului se realizează prin executarea unui clic în orice
locaţie a imaginii).
2. În afară de stabilirea unei culori de fundal, un utilizator are posibilitatea de a seta o imagine pe fundalul
paginii pe care o proiectează. Este de preferat ca această imagine să fie, cât mai simplă şi monocromă,
pentru a fi permite o vizualizare facilă a conţinutului informaţional al paginii respective. Pentru această
operaţie se va utiliza tag-ul BODY, cu atributul BACKGROUND, prin care se va introduce numele sau,
după caz, adresa completă a fişierului care furnizează imaginea de fundal.
<BODY Background=”Nume/adresa_fişier_grafic” >
Exemplu: se creează o pagină Web care să afişeze un scurt istoric al ASE-ului, pagina având pe fundal
imaginea furnizată de un fişier Paint (de tip Bitmap)
Linia de comandă care permite setarea unei imagini de fundal (de tip Bitmap) este:
<BODY Background="ase desen.bmp">
3. Includerea în pagina Web a imaginilor dinamice, presupune utilizarea tag-ului Image (IMG), dar cu
atributul Dynsrc, care specifică sursa formatului video (fişiere de tip MPEG, AVI, MOV etc.).
<IMG Dynsrc=”Nume/adresa_fişier_format_video” Height=h Width=l Border=n >
Acest element multimedia se poate constitui ca legătură hipertext, prin includerea sa în tag-ul ancoră, ca şi în
cazul unei imagini statice. Practic, prin accesarea unui cuvânt de legătură, navigatorul Web apelează un
anumit program specializat, capabil să recunoască acest format multimedia (VPlayer, BPlay, Media Player,
DivX Player etc.).
<A Href=”Nume/Adresa_fişier_format_video” >Cuvânt de legătură </A>
4. O altă categorie de imagini ce pot fi definite într-o pagină Web o constituie imaginile reactive, care
prezintă facilitatea de a genera legături hipertext cu alte resurse (de regulă, documente HTML), prin
activarea unor locaţii speciale ale acestei imagini, cunoscute sub accepţiunea de zone reactive.
De exemplu, o pagină Web de index (pagina principală) poate să conţină o imagine reactivă, cu mai multe
zone „clicabile” (zone reactive), de la care se pot realiza conexiuni cu celelalte pagini de prezentare în detaliu.
Din punct de vedere conceptual, zona reactivă poate fi definită ca o zonă specială a imaginii, care
reacţionează la plasarea indicatorului mouse-ului pe locaţia respectivă, comportând-se, practic, ca un
hyperlink ce asigură legătura cu alte resurse informaţionale. După cum relevă figura următoare, zonele
reactive se pot prezenta sub trei forme geometrice, şi anume: formă rectangulară, cerc şi poligon.
Descrierea zonelor reactive se face prin stabilirea coordonatelor acestora, ele raportându-se, de fapt, la
imaginea reactivă, şi nu la pagina Web, în ansamblul ei. Raportul care se stabileşte între coordonatele
ecranului şi cele ale imaginii reactive depinde nemijlocit de rezoluţia monitorului, exprimată în pixeli.

Numărul de puncte necesare pentru construirea unei zone reactive depinde, în mod nemijlocit, de forma
geometrică a acesteia, astfel:
• forma rectangulară se reprezintă prin două puncte: punctul din colţul stânga superior şi cel din
dreapta inferior al formei rectangulare
• cercul prin două puncte: punctele reprezentând centrul cercului şi raza acestuia
• poligonul se descrie prin punctele de intersecţie a laturilor poligonului
Definirea ansamblului zonelor reactive se realizează cu ajutorul tag-ului MAP, prin care imaginea este,
practic, asimilată unei hărţi, ce conţine mai multe zone sensibile la hyperlink (zone reactive). Prin MAP,
acestei „hărţi” i se va atribui un nume generic, la care se va face apel în momentul definirii acesteia ca
imagine reactivă.
<MAP Name=”Nume generic prin care sunt identificate zonele reactive” >
În ceea ce priveşte descrierea zonelor reactive propriu-zise, se apelează la tag-ul AREA, cu atributele de
parametrare a zonelor respective: formă de prezentare (formă rectangulară, cerc sau poligon), coordonate
(măsurate în pixeli), document ţintă (numele sau adresa fişierului/e-mail către care se face conexiunea).
<AREA Shape=”Rect|Circle|Poly” Coords=”coordonate_zonă_reactivă”
Href=”nume_document_ţintă|adresa e-mail” Alt=”Nume_etichetă” Noref >
Semnificaţia atributelor de parametrare a zonelor reactive este următoarea:
Shape – specifică forma geometrică a zonei reactive
Coords – introduce coordonatele elementelor de descriere a zonei respective, în speţă, valorile reprezentând
lăţimea şi înălţimea
Href – indică adresa documentului destinaţie sau adresa e-mail
Noref – inhibă legătura hipertext stabilită între zona reactivă şi locaţia destinaţie
Alt – permite setarea unei etichete explicative, care se activează în momentul plasării mouse-ului în orice
locaţie a zonei reactive, exceptând zonele inhibate prin Noref
Pentru introducerea în structura paginii Web a unei imagini reactive se foloseşte tag-ul Image (IMG), cu
atributele specifice acestuia şi, în plus, cu eticheta USEMAP, prin care se introduce numele generic al
zonelor reactive (stabilit prin tag-ul MAP), precedat de simbolul diez. În fapt, Usemap apelează un program
specializat ce permite trecerea de la coordonatele zonei reactive, la URL-ul fişierului ţintă apelat.
<IMG Usemap=”#Nume_generic_Map” Src=”nume_fişier_imagine” Height=h Width=l
Align=Left|Right Border=n >
Pentru exemplificarea utilizării zonelor reactive într-o pagină Web, se pleacă de la o imagine de tip GIF care
conţine trei zone reactive, de la care se apelează o adresă e-mail şi se generează conexiuni către ale
documente Web.
Schema conceptuală care prezintă succint natura legăturilor hipertext care se vor genera prin această
aplicaţie, este următoarea:

• de la zona reactivă reprezentând o formă rectangulară se activează programul de gestiune a poştei

electronice (Microsoft Outlook sau Microsoft Outlook Express), prin care se va expedia un mesaj
adresat decanatului facultăţii CIG
• de la zona reactivă reprezentând un cerc se accesează fişierul Istoric.HTML, care conţine un scurt
istoric al Academiei de Studii Economice

• de la zona reactivă reprezentând un poligon se accesează fişierul Pagina CIG.HTML,

care afişează informaţii privind structura organizatorică şi funcţională a facultăţii de Contabilitate şi
Informatică de Gestiune
Codurile programului HTML care generează zonele reactive prezentate în exemplul precedent, au
următoarea succesiune logică:
…
<MAP Name=“harta">
<AREA Shape=“rect" Coords=“350,0 400,50" Href="mailto:decanat@cig.ase.ro">
<AREA Shape=“circle" Coords=“200,100,50" Href="Istoric.html">
<AREA Shape=“poly" Coords=“330,230 350,260 350,310 310,310 310,260"
Href="Pagina CIG.html">
</MAP>
<IMG Usemap="#harta" Src=“ase.gif" Height=300 Width=400 Border=3>
…
Un alt format multimedia care poate fi utilizat în contextul de exploatare a documentelor HTML, îl
reprezintă formatul audio (sunetul). În anumite cazuri, utilizatorii paginilor Web pot opta pentru setarea
unui sunet de fundal, care se activează în momentul accesării unui fişier Web (fişiere de tip MP3, WAV,
MID etc.)
<BGSOUND Src=”Nume/Adresa_fişier_format_audio” >
Acest element multimedia se poate constitui ca legătură hipertext, prin includerea sa în tag-ul ancoră (A), ca
şi în cazul unei imagini sau al unui format video.
<A Href=”Nume/Adresa_fişier_format_audio” >Cuvânt de legătură </A>
Practic, prin accesarea unui cuvânt de legătură, navigatorul Web apelează un anumit program specializat,
capabil să recunoască acest format multimedia – fişierele audio (programele Winamp, Media Player, DivX
Player etc.).
6.1.4.5. Definirea de cadre în documentele HTML
În mod obişnuit, utilizatorul poate vizualiza pe ecran un singur document HTML, încărcat în fereastra
asignată de navigator acelui document. Pentru a spori atractivitatea paginilor Web şi a organiza mai eficient
informaţiile conţinute de acestea, Web designerii pot recurge la tehnica „subferestrelor”, reprezentând un set
de secţiuni în fereastra navigatorului, cunoscute sub accepţiunea de cadre.
Conceptul de cadru (frame) constă în divizarea ecranului în mai multe zone, ce pot fi asimilate unor
ferestre, fiecare dintre acestea putând găzdui un document HTML; practic, aceste ferestre pot fi tratate, într-
o manieră independentă (fiecare zonă este identificată printr-un nume), ceea ce îi permite utilizatorului
modificări punctuale la nivelul unei ferestre, fără a le afecta pe celelalte, fapt ce măreşte considerabil
posibilităţile de informare ale acestuia, pe domenii de interes.
În funcţie de conţinutul informaţional al documentelor găzduite de aceste ferestre, ele vor fi prevăzute cu
bare de defilare care să permită deplasarea pe orizontală şi/sau pe verticală în interiorul cadrului, utilizatorul
putând astfel interveni, la modul punctual, asupra unui cadru sau al altuia.
Concluzionând, se poate afirma că utilizarea cadrelor oferă un avantaj incontestabil în proiectarea paginilor
Web, deoarece această facilitate permite obţinerea unui ecran multifereastră, în care se pot vizualiza
simultan mai multe documente HTML.
În programul HTML ce permite definirea unei structuri de cadre, tag-ul BODY (corp de text) va fi înlocuit
cu tag-ul FRAMESET, care va include mulţimea de frame-uri, conţinând documentele ce vor fi afişate de
navigatorul Web.
<FRAMESET Cols/Rows = v1,v2...vn Frameborder = yes|no Bordercolor=
=denumire/cod_culoare>
Prin tag-ul FRAMESET se divizează ecranul în mai multe cadre verticale (atributul Cols) sau orizontale
(atributul Rows), cu posibilitatea de setare a unui chenar al ferestrei (atributul Frameborder, cu valoarea
implicită Yes), pentru care se poate stabili o anumită culoare (atributul Bordercolor).
Valorile v1, v2...vn reprezintă dimensiunea cadrelor (în pixeli sau în procente), numărul de cadre fiind egal cu
numărul valorilor specificate prin atributele Rows şi Cols. Alocarea de spaţiu pentru elementele structurii de
cadre se poate realiza şi prin simbolul „*” care împarte, în mod egal, ecranul între cadrele existente.
De exemplu, atributul Cols=”333, 10%, *, 3*” va defini un ecran multifereastră cu patru cadre verticale,
primul cadru va ocupa 333 de pixeli, al doilea va ocupa 10% din lăţimea totală a ferestrei navigatorului, iar
următoarelor două cadre li se va atribui spaţiul rămas disponibil, respectând raportul de 1/3.
Structura de cadre corespunzătoare acestei setări va fi afişată la modul următor:

În anumite situaţii, pentru a ameliora designul unui ecran multifereastră, utilizatorul poate apela la definirea
unui set de cadre, atât pe verticală, cât şi pe orizontală, proiectând în acest sens, o structură imbricată de tag-uri
FRAMESET.
Descrierea efectivă a unui cadru se realizează cu ajutorul tag-ului FRAME, prin care sunt stabilite
documentele Web ce vor fi afişate în ferestre adiacente.
<FRAME Src=”Nume/Adresa fişier HTML” Name=”Nume_cadru” Scrolling= =yes|no
Marginwidth=n1 Marginheight=n2 Noresize>
Semnificaţia atributelor specificată în linia de comandă este următoarea:
 Src – specifică numele fişierului care conţine pagina Web ce va fi găzduită de cadrul respectiv; în situaţia
în care fişierul nu se regăseşte în folderul curent, se va specifica întreaga cale de acces (URL-ul
documentului HTML);
 Name- numele cadrului este un atribut opţional, însă introducerea lui este obligatorie, în situaţia în care
utilizatorul doreşte realizarea unor hyperlink-uri către documentul HTML găzduit de cadrul respectiv; în
acest caz, numele cadrului va fi precizat în tag-ul A (ancoră), prin atributul Target, astfel:
<A Href=”nume/adresa_fişier_HTML3” Target=”nume_cadru”>
 Scrolling - defineşte modalitatea de derulare a informaţiilor conţinute de un cadru, putând lua valorile
Yes sau No (valoarea implicit setată este Yes);

3
Numele documentului HTML care conţine structura de cadre
 Marginwidth – valoarea n1 denotă spaţierile pe orizontală dintre conţinutul unui cadru şi marginea
acestuia;
 Marginheight – valoarea n2 denotă spaţierile pe verticală dintre conţinutul unui cadru şi marginea
acestuia;
 Noresize – inhibă posibilitatea de redimensionare a cadrelor, navigatorul respectând valorile stabilite prin
atributele Cols şi Rows în FRAMESET.
Un exemplu de ecran multifereastră ce conţine o structură de cadre verticale şi orizontale, urmăreşte afişarea
unor informaţii referitoare la un scurt istoric al ASE-ului, precum şi la structura organizatorică şi
activitatea didactică a acestuia, Structura informaţională a primului cadru vertical (Frame2) cuprinde mai
multe legături hipertext (structura organizatorică, cursuri zi, cursuri distanţă etc.) prin activarea cărora se
încarcă un anumit document în Frame3. Cu alte cuvinte, până la apelarea unui hyperlink din Frame2, cadrul
Frame3 va fi un cadru vid.

Pentru realizarea legăturilor hipertext, conţinute de frame2 s-a utilizat tag-ul ancoră, cu atributul Target care
indică cadrul destinaţie (frame2) al legăturilor respective.

În funcţie de necesităţile sale de informare, dar şi de designul paginilor pe care le proiectează, utilizatorul
doreşte la un moment dat să insereze un cadru în interiorul unui document HTML, fără a fi însă nevoit să
definească o structură de cadre (un ecran multifereastră).
Această facilitate poate fi realizată cu ajutorul cadrelor interne, care oferă astfel posibilitatea integrării unei
pagini Web în fereastra unui alt document HTML. Crearea unei astfel de structuri se face prin tag-ul
IFRAME, care prezintă, în principiu, aceleaşi atribute ca şi FRAME, exceptând atributul Noresize (pe
considerentul că un cadru intern nu-şi poate modifica dimensiunea).
<IFRAME Src=”Nume/Adresa fişier HTML” Name=”Nume_cadru” Scrolling=yes|no
Height=n1 Width=n2 Frameborder=n3 Align=Left|Center|Right>
Valorile n1 şi n2 ale atributele Height şi Width precizează dimensiunea (în pixeli sau în procente) cadrelor, în
speţă, înălţimea şi lăţimea acestora.
În exemplu de mai jos s-a urmărit exemplificarea facilităţilor de utilizare a unor cadre interne, astfel,
documentul curent afişat în fereastra navigatorului Internet Explorer are în structura sa două „subferestre”
(cadre), cu următorul conţinut informaţional: un istoric al ASE-ului (frame1) şi un formular Web (frame2).
6.1.4.6. Definirea de tabele în documentele HTML
Sintaxa generală a tag-ului ce permite crearea unui tabel Web este următoarea:
<TABLE Border=n1 Cellpading=n2 Cellspacing=n3 Width=n4% Bgcolor=denumire/cod culoare
Align=Left|Center|Right Frame= Box| Above| Below| Hsides| Vsides| Lhs| Rhs> … </TABLE>
Semnificaţia atributelor ce permit formatarea unui tabel este următoarea:
Border – specifică grosimea chenarului de încadrare a tabelului
Cellpading – reprezintă spaţiul între conţinutul informaţional al celulei şi marginile celulei
Cellspacing – reprezintă spaţiul dintre celulele tabelului
Width – specifică, în procente, cât la sută din suprafaţa ferestrei ocupă tabelul
Bgcolor – stabileşte culoarea de fundal a tabelului
Align – modalitatea de aliniere a tabelului în pagina Web
Frame – permite stabilirea unui chenar pentru tabel, cu diferite modele de încadrare a acestuia (Exemple: box
– chenar de încadrare; above/below – trasarea unei linii în partea de sus, respectiv în partea de jos a
tabelului; hsides/vsides – trasarea liniilor numai pe orizontală sau pe verticală)
Titlul unui tabel se introduce în pagina Web prin tag-ul CAPTION, cu posibilitatea plasării acestuia în
partea superioară, în partea inferioară, în stânga sau în dreapta tabelului (atributul Align, cu valorile Top,
Bottom, Left şi Right)
<CAPTION Align=Top|Bottom|Left|Right> Titlul tabelului </CAPTION>
Informaţiile conţinute de prima linie a tabelului furnizează conţinutul informaţional al antetului tabelului, în
care textul este , în mod implicit, aliniat pe centru şi afişat cu caractere aldine (îngroşate). Antetul unui tabel
se descrie cu tag-ul TH (Table Head), având următoarea sintaxă:
<TH Valign=Top|Middle|Bottom Align=Left|Center|Right Colspan=n Rowspan=m Width=l
Height=h Bgcolor=denumire/cod culoare Nowrap> Text ce defineşte intrarea într-o celulă a antetului
</TH>
La nivelul antetului de tabel se pot aplica următoarele atribute de formatare;
Valign şi Align - permit alinierea verticală (cu valorile Sus/Pe mijloc/Jos), respectiv orizontală (cu valorile
Stânga/Centrat/Dreapta) a conţinutului celulelor plasate pe prima linie a tabelului
Colspan|Rowspan - în funcţie de modul în care Web designerul doreşte să vizualizeze informaţiile
conţinute de antetul unui tabel, dar şi de prima coloană a acestuia, el poate apela la facilitatea de fuzionare a
două sau mai multe celule, pe orizontală (atributul Rowspan) şi/sau pe verticală (atributul Colspan). Valorile
„n” şi „m” specifică numărul celulelor care vor fuziona.
Width|Height – cu ajutorul acestor atribute utilizatorul poate stabili dimensiunea celulelor fuzionate,
atributele Width şi Height reprezentând, în pixeli (sau în procente), lăţimea, respectiv înălţimea celulelor din
antet
Bgcolor - prin tag-ul TABLE se poate stabili o culoare de fundal a tabelului, acest lucru fiind posibil şi la
nivelul antetului, utilizând acelaşi atribut Bgcolor. Această setare va opera numai pentru prima linie a
tabelului, celelalte linii respectând setarea generică stabilită prin tag-ul TABLE
Nowrap - dimensionarea celulelor din tabel se realizează automat la lungimea maximă a textului conţinut de
acestea. Însă, dacă textul depăşeşte dimensiunea de 64 de caractere, navigatorul îl va afişa pe mai multe
rânduri. Atributul Nowrap al tag-ului TR permite tocmai inhibarea acestei reguli, afişând textul pe un singur
rând, indiferent de lungimea acestuia
În cazul în care se doreşte ca anumite celule ale tabelului să fie vide, în linia de comandă se recomandă
introducerea caracterului spaţiu, prin entitatea &nbsp;
<TD Atribute … > &nbsp; </TD>
Pentru definirea liniilor din tabel, se foloseşte tag-ul TR (Table Row), astfel:
<TR Valign=Left|Center|Right Align=Left|Center|Right Bgcolor = denumire/ cod culoare> …
</TR>
Atributele de formatare a liniilor operează în acelaşi mod ca în tag-ul TH.
Celulele unui tabel Web pot conţine informaţii de natură diversă, cum ar fi: şir de caractere, valori numerice,
liste, imagini, hyperlink-uri. Pentru setarea celulelor se utilizează tag-ul TD (Table Data), având următoarea
sintaxă:
<TD Valign=Top|Middle|Bottom Align=Left|Center|Right Colspan=n Rowspan=m Width=l
Height=h Bgcolor=denumire/cod culoare Nowrap> Text ce defineşte intrarea într-o celulă> … </TD>
Tag-ul TD prezintă aceleaşi atribute de formatare ca şi celulele conţinute de prima linie a tabelului (tag-ul
TH). Toate celulele unei linii a tabelului moştenesc valorile atributelor de aliniere pe orizontală şi pe verticală
(Align şi Valign), cu excepţia cazului în care atributele de aliniere vor fi redefinite în tag-ul TD, devenind
astfel prioritare, în raport setările realizate la definirea liniei prin TR.
Exemplu de tabel Web, ce conţine informaţii referitoare la disciplinele din planul de învăţământ al anului I,
cu numărul de credite afectate acestora:
Programul HTML ce permite definirea unui tabel cu această structură va conţine următoarele tag-uri
descriptive:

<HTML>
<BODY>
<TABLE Align=center BgColor=yellow Border=8 CellPadding=7 CellSpacing=5
Frame=box Width=80%>
<CAPTION Align=top><B><H3>Plan de învatamânt</B></H3></CAPTION>
<CAPTION Align=bottom><B><H3>Anul I/zi/CIG</B></H3></CAPTION>

<TR><FONT Color=yellow>
<TH BgColor=blue>Discipline</TH>
<TH BgColor=blue>Forma de examinare</TH>
<TH BgColor=blue>Numar credite</TH>
<TH BgColor=blue Colspan=2>Ponderi</FONT></TH></TR>
<TR>
<TD><B>Bazele contabilitatii</B></TD>
<TD Align=center Rowspan=2 Valign=center>Ex</TD>
<TD Align=center Valign=middle>6</TD>
<TD Nowrap>60% Examen</TD>
<TD Nowrap>40% Seminar</TD></TR>
<TR>
<TD><B><FONTColor=red>Bazele informaticii</B></FONT></TD></FONT>
<TD Align=center>5</B></TD>
<TD Align=left Nowrap>70% Examen</TD>
<TD Align=left Nowrap>30% Seminar</TD></TR>
<TR>
<TD><B>Matematica</B></TD>
<TD Align=center>PV</TD>
<TD Align=center>3</TD>
<TD Align=left Nowrap>50% Examen</TD>
<TD Align=left Nowrap>50% Seminar</TD></TR>
</TABLE>
</BODY>
</HTML>
6.1.4.7. Crearea de formulare în documentele HTML
Formularul Web sau formularul electronic reprezintă o interfaţă care permite interacţiunea cu utilizatorii
paginilor Web, prin introducerea unor date de natură diversă, date ce vor fi prelucrate ulterior pe serverul
Web de către anumite programe specializate, cunoscute sub denumirea de scripturi CGI (Common Gateway
Interface – interfaţa sau standardul „porţii” comune).
Interfaţa (scriptul) CGI reprezintă, practic, o specificaţie care extinde Protocolul de Transfer Hypertext
(HTTP) pentru a permite serverelor Web să interacţioneze dinamic cu staţiile de lucru client. În acest mod,
se asigură interacţiunea server-navigator Web, în sensul personalizării rezultatelor, prin diverse prelucrări
asupra elementelor conţinute de paginile Web.
Interacţiunea dintre server şi navigatorul Web poate fi prezentată schematic astfel:
 1 4
5
2 5

1. De la o staţie de lucru, un utilizator solicită serverului un formular electronic, această cerere fiind
formulată prin intermediul unui navigator (browser) Web
2. Serverul trimite utilizatorului formularul spre completare
3. După ce au fost introduse toate datele în formular, acesta este retransmis serverului Web
4. În etapa următoare serverul transferă datele conţinute de formular unui program specializat în
prelucrarea acestora, numit program CGI
5. După procesarea datelor din formular, rezultatele execuţiei programului CGI, vor fi transmise, într-un
format personalizat (format text) serverului Web care, la rândul său, trimite un mesaj de confirmare
browser-ului Web
În situaţia în care datele din formular vor fi transmise prin poşta electronică (prin e-mail), succesiunea
operaţiilor este următoarea:
• utilizatorul completează cu date toate câmpurile din formular, după care datele vor fi transmise către
serverul Web, prin acţionarea butonului Trimite date (buton de comandă de tip SUBMIT)

• sistemul confirmă, printr-un mesaj, modul de transmitere a datelor prin e-mail;

• utilizatorul poate vizualiza trimiterea datelor prin fereastra aplicaţiei de poştă electronică Outlook
Express
• din fereastra aplicaţiei Outlook Express (secţiunea mesajelor primite Inbox), se extrag de pe serverul
Web mesajele adresate utilizatorului, acţionând butonul Send/Receive

• prin acţionarea butonului Send/Receive se vizualizează (prin caseta Outlook Send/Receive Progress)
procesul de extragere a mesajelor de pe serverul Web. Acţiunea este finalizată prin depunerea
mesajelor în secţiunea Inbox, de unde acestea pot fi deschise şi consultate (prin acţionarea unui
dublu-clic pe pictograma aferentă mesajului - pictograma plic)

• se procedează la deschiderea fişierului ataşat ce conţine datele din formular

• în etapa următoare, sistemul propune, prin intermediul unei casete de dialog (Opening Mail
Attachment), fie deschiderea fişierului conţinând mesajul primit (opţiunea Open it), fie salvarea
acestuia pe disc, în locaţia dorită de utilizator (opţiunea Save it to disk)
 • datele din formular pot fi vizualizate prin fereastra aplicaţiei Notepad.

Multe pagini Web care conţin formulare folosesc un program CGI, cu scopul de a procesa datele introduse
de utilizatori. Natura exactă a interacţiunilor ce se petrec între client şi server este determinată de diferite tag-
uri de control şi de specificatori de câmpuri înglobate în formulare scrise cu limbajul HTML.
Cu ajutorul unui script CGI, un server Web lansează un program, în momentul executării unui clic pe un
buton de înscriere/acceptare a unei pagini Web, ce conţine formularul unei declaraţii scrise în HTML.
Programul CGI transportă informaţia între serverele Web şi aplicaţiile back-end, cum ar fi bazele de date şi
sistemele de e-mail. În realitate, posibilitatea de interogare a bazelor de date printr-un formular Web, dar
şi facilitatea de direcţionare a informaţiei către un sistem de e-mail reprezintă două dintre cele mai cunoscute
utilizări ale unui CGI.
Formularele pot varia e la o simplă casetă text – care permite introducerea unui şir de caractere, cu rol de
expresie de interogare -, până la o structură complexă, cu multiple opţiuni, oferind puternice facilităţi de
transmitere a datelor.
Sintaxa generală a tag-ului ce permite descrierea unui formular Web este:
<FORM Method=Get|Post Action=URL_script CGI|adresa e-mail Name=nume_formular
Target=nume_cadru > … </FORM>
Semnificaţia atributelor ce permit crearea unui formular Web este următoarea:
Method – specifică modul de transmitere a datelor către serverul Web. Din acest punct
de vedere, există două maniere prin care informaţiile conţinute de un formular pot fi transmise, de la
navigatorul care vizualizează formularul, la serverul Web, situat într-o anumită locaţie a reţelei Internet.
Atunci când datele introduse într-un formular sunt incluse în URL-ul destinaţie ca un şir de interogare (după
caracterul „?”), avem de-a face cu metoda GET de transmitere a datelor sau cu un formular de tip „get”
(este utilizată metoda GET a protocolului HTTP). O metodă alternativă este aceea în care URL-ul destinaţie
nu conţine alte elemente suplimentare, adăugate la sfârşitul adresei Web, în acest caz, informaţiile introduse
în formular fiind transferate prin metoda POST a protocolului HTTP (este vorba despre un formular de tip
„post”)
Action – indică URL-ul fişierului sau aplicaţiei aflate pe serverul Web, care urmează să prelucreze
informaţiile conţinute de formular
Name – reprezintă numele care va fi ataşat formularului Web şi care va permite o identificare facilă a
datelor din formular care vor fi transmise către server
Target – specifică fereastra (cadrul) în care se vor afişa rezultatele execuţiei programului CGI. În absenţa
acestui atribut, datele vor fi afişate în pagina curentă
În cadrul marcajului FORM se pot insera, atât tag-uri HTML uzuale, cât şi diverse elemente particulare,
indicând modalităţi de introducere a datelor în cadrul formularului. În cea mai mare parte, toate câmpurile
unui formular, destinate introducerii datelor, sunt specificate prin intermediul elementului <input>,
utilizându-se atribute specifice fiecărui câmp al formularului.
Elementele uzuale ale unui element INPUT sunt următoarele:
• Type – indică tipul câmpului de introducere a datelor în formular
• Name – furnizează numele câmpului , nume ce urmează a fi folosit de către programul de prelucrare
a formularului
• Value – conţine valoarea implicită a câmpului de intrare
• Checked – indică pentru un buton de selecţie (buton radio sau buton de validare) dacă acea opţiune
este implicit selectată sau nu
• Disabled – specifică faptul că o opţiune sau un buton de selecţie sunt inhibate
• Size – stabileşte lăţimea de afişare (în număr caractere) a unui câmp de date, în mod uzual, a unui
câmp text
• Maxlength – determină lungimea maximă a valorilor introduse de utilizator într-un câmp de tip text
• Readonly indică faptul că un câmp al formularului nu poate fi modificat
Într-un formular electronic pot fi definite următoarele tipuri de controale:
1. caseta text în care informaţiile sunt introduse pe o singură linie
<INPUT Type=”Text” Name=”nume_control” Value=”valoare_implicită” Size=”n”
Maxlength=”m”>
Exemplu: crearea unei casete text pentru introducerea numelui şi a prenumelui:

2. caseta text multilinie al cărei conţinut informaţional va fi afişat pe mai multe rânduri, în funcţie de
lungimea acestuia
<TEXTAREA Name=”nume_control” Value=”valoare_implicită” Rows=”n” Cols=”m” Readonly>
… </TEXTAREA>
Valorile „n” şi „m” ale atributelor Rows şi Cols specifică numărul de linii, respectiv numărul de coloane pe
care va fi afişat conţinutul casetei multilinie. În cazul în care numărul liniilor şi al coloanelor depăşesc
valorile stabilite prin atributele Rows şi Cols, caseta text va fi prevăzută cu bare de defilare scrollbars, care să
permită deplasarea pe orizontală şi/sau pe verticală în cadrul casetei. Atributul Readonly are ca efect
imposibilitatea modificării datelor din caseta text, aceasta afişând, în momentul procesării, numai valoarea
implicită a textului.
Exemplu: crearea unei casete text multilinie pentru introducerea adresei:

3. Transmiterea unor informaţii care sunt inhibate vizualizării în fereastra navigatorului, ceea ce permite
 definirea unui câmp ascuns
<INPUT Type=”Hidden” Name=”nume_control” Value=”text cu atribut de vizualizare inhibat” >
Exemplu: crearea unei casete text în care se va introduce adresa e-mail, informaţie care va fi preluată de
serverul Web, dar nu va fi vizualizată de browser-ul Web
4. caseta text cu parolă specifică un câmp text în care datele introduse de utilizator vor fi afişate printr-un
simbolul generic, din motive de securitate. În mod uzual, valoarea acestui câmp va fi trimisă necriptată
serverului Web.
<INPUT Type=”Password” Name=”nume_control” Size=”n” Maxlength=”m”>
Exemplu: Crearea unui formular electronic pentru autentificarea utilizatorului cu scopul de a accesa diferite
resurse informaţionale. Formularul va conţine câmpuri de date pentru introducerea numelui şi prenumelui, a
parolei utilizatorului, iar adresa e-mail va fi inhibată vizualizării.
Prin acest formular se va exemplifica utilizarea combinată a câmpurilor de tip text, hidden şi password.

5. listă de opţiuni. Pentru a realiza meniuri cu opţiuni multiple, se recurge la elementul SELECT, cu
următoarea sintaxă:
<SELECT Name=”nume_control” Size=”n” Multiple> … </SELECT>
Prin atributul Size, utilizatorul specifică numărul de opţiuni implicit afişate, iar atributul Multiple oferă
facilitatea de a selecta din listă mai multe opţiuni posibile (pentru selecţia continuă - tasta CTRL, iar pentru
cea discontinuă - tasta SHIFT).
Opţiunile din meniul derulant se introduc cu ajutorul tag-ului OPTION, astfel:
<OPTION Selected Disabled> Nume_element_listă
Atributul Selected stabileşte opţiunea implicit afişată în momentul vizualizării formularului în fereastra
navigatorului. În lipsa acestui atribut, va fi selectată automat prima opţiune din meniul derulant. În cadrul
unui tag Option poate fi utilizat şi atributul Disabled, indicând faptul că acea opţiune este inhibată.
Exemplu: forma de învăţământ se va selecta dintr-o listă derulantă ce afişează implicit o singură opţiune
(Size=1), iar pentru limba străină sunt afişate 3 opţiuni din listă (Size=3) şi, în plus, se permite o selecţie
multiplă (Engleză şi Franceză).

6. butoanele de validare permit crearea unor casete checkbox prin care se pot valida una sau mai multe
variante sau mai multe acţiuni, în momentul completării unui formular Web.
<INPUT Type=”Checkbox” Name=”nume_control” Checked Disabled>
Atributul Checked permite utilizatorului să stabilească care este opţiunea (caseta) implicit selectată.
Exemplu: crearea unui grup de casete de validare din care utilizatorul să selecteze aplicaţiile pe care le
cunoaşte, exceptând opţiunea MS Access, care este inhibată:
 7. butoanele radio funcţionează în acelaşi mod ca butoanele de validare, cu deosebirea că, dintr-un grup
de opţiuni, utilizatorul poate selecta, la un moment dat, o singură variantă, în timp ce facilitatea
checkbox care permite o selecţie multiplă de opţiuni
<INPUT Type=”Radio” Name=”nume_control” Checked Disabled>
Exemplu: crearea unui grup de butoane radio din care utilizatorul să selecteze grupa de vârstă în care se
încadrează, exceptând ultima opţiune, care este inhibată

8. buton pentru transmiterea informaţiilor introduse în formular, către resursa specificată de atributul
Action al tag-ului FORM. Prin atributul Value se introduce secvenţa de text care va fi afişată pe butonul
de comandă.
<INPUT Type=”Submit” Name=”nume_control”
Value=”etichetă_buton” Disabled>
Exemplu: setarea unui buton de transmitere a datelor către serverul Web, acţiune care va fi validată prin
caseta afişată pe ecran la acţionarea butonului Submit

9. buton imagine ce permite transmiterea datelor din formular către serverul Web. Funcţionează la fel ca
butonul Submit, dar în locul unui buton de comandă va fi afişată imaginea ce va fi specificată în linia de
comandă
<INPUT Type=”Image” Name=”nume_control” Src=”fişier_imagine” Height=h Width=l>
Prin atributul Src se specifică numele sau adresa fişierului care furnizează imaginea, iar Height şi Width
stabilesc dimensiunea (înălţimea şi lăţimea), în pixeli, a acesteia
10. buton pentru ştergerea conţinutului tuturor zonelor de intrare din formular
<INPUT Type=”Reset” Name=”nume_control” Value=”etichetă_buton” Disabled>
Prin acest control se anulează, practic, toate intrările de date din câmpurile formularului, utilizatorul având
posibilitatea de introducere a datelor dorite.
Un exemplu practic pentru definirea unui formular electronic prezintă o structură cu mai multe controale,
care să definească toate facilităţile de abordare a formularelor din paginile Web (casete text, meniuri
derulante, butoane de opţiuni şi de validare, informaţii inhibate vizualizării, butoane de comandă).
Pentru realizarea într-o pagină Web a unui astfel de formular, se editează un program HTML care cuprinde
următoarea suită de coduri (tag-uri descriptive):
<HTML>
<BODY>
<FORM Method="post" Action=”http://www.infocib...” Name=”formular Web”>
<TABLE Align=center>
<TR>
<TD>Numele şi prenumele</TD>
<TD><INPUT Type="text" Name="nume_prenume" Size=35></TD></TR>
<TR>
<TD>Forma de învăţământ:</TD>
<TD>
<SELECT Name="ocupatia" Size=1>
<OPTION Selected>Învăţământ zi</OPTION>
<OPTION>Învăţământ distanţă</OPTION>
<OPTION>Masterat</OPTION>
<OPTION>Studii aprofundate</OPTION>
</SELECT></TD>
<TD>Anul</TD><TD Align=center><INPUT Type="text" Name="an"
Size=3></TD>
<TD>Seria</TD><TD Align=center><INPUT Type="text" Name="seria"
Size=3></TD>
<TD>Grupa</TD><TD Align=center><INPUT Type="text" Name="grupa"
Size=5></TD></TR>
<TR>
<TD>Vârsta:</TD>
<TD>
<INPUT Type="radio" Name="vârsta" Checked>18-25 |
<INPUT Type="radio" Name="vârsta">25-30 |
<INPUT Type="radio" Name="vârsta">30-50 |
<INPUT Type="radio" Name="vârsta" Disabled>peste 50</TD></TR>
<TR>
<TD>Limbi strãine cunoscute</TD>
<TD><SELECT Name="limba_straina" Size=3 Multiple>
<OPTION Selected>Engleza
<OPTION>Germana
<OPTION Selected>Franceza
 <OPTION>Spaniola
<OPTION>Italiana</select></TD></TR>
<TR>
<TD>Selectaţi soft-urile pe care le cunoaşteţi</TD>
<TD>
<INPUT Type="checkbox" Name="programe" Checked>MS Word
<INPUT Type="checkbox" Name="programe">MS Excel
<INPUT Type="checkbox" Name="programe">MS PowerPoint
<INPUT Type="checkbox" Name="programe" Disabled>MS Access</TD></TR>
<TR>
<TD>Adresa e-mail:</TD>
<TD><INPUT Type="hidden" Name="email" Value="web@infoarad.ro">
<FONT Face=script Color=red Size=5></FONT>Această informaţie este
secretă</TD></TR>
<TR>
<TD>Adresa domiciliu:</TD>
<TD><TEXTAREA Name="impresii" Rows=3 Cols=40></TEXTAREA></TD> </TR>
<TR>
<TD><INPUT Type="submit" Name="b1” Value="Trimite datele"></TD>
<TD Align=center>
<INPUT Type="reset" Name="b2" Value="Şterge câmpurile" Disabled></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Un alt exemplu de pagină Web care conţine un formular electronic este ilustrat figura următoare:
<HTML>
<HEAD>
<TITLE> *** ORDIN DE BURSA *** </TITLE>
<BODY>
<H2 ALIGN=CENTER>ORDIN DE BURSA</H2>
<FORM METHOD="post" ACTION="http://www.infocib…" >
<P>DATA EMITERII ORDINULUI :
<INPUT NAME=dataord TYPE=data SIZE=20>
<P>NUMAR CONTRACT/COMANDA :
<INPUT NAME=nrcntr TYPE=int SIZE=15>
<P> SENSUL TRANZACTIEI :
<P>CUMPARARE
<INPUT NAME=tip TYPE=radio CHECKED>
VÎNZARE
<INPUT NAME=tip TYPE=radio>
<P>DENUMIREA TITLULUI MOBILIAR :
<INPUT NAME=codtitlu TYPE=text SIZE=20>
<P>NUMARUL TITLURILOR:
<INPUT NAME=nrtitlord TYPE=int SIZE=10>
<P>MODUL DE NEGOCIERE :
<P>LA VEDERE
<INPUT NAME=modneg TYPE=radio CHECKED>
LA TERMEN
<INPUT NAME=modneg TYPE=radio>
<P>CURSUL DE EXECUTIE :
<P ALIGN=RIGH>
<SELECT NAME="tipcurs" SIZE="4">
<OPTION>LA PRIMUL CURS
<OPTION>CEL MAI BUN
<OPTION>LA CURS LIMITAT<P>
<OPTION>LA CURS LIMITAT, CU MENTIUNEA STOP
</SELECT>
<P>MENTIUNI SUPLIMENTARE :
<TEXTAREA NAME="Comentariu" ROW=12 COLS=44>
Mentiuni asupra cursului de executie
</TEXTAREA>
<P>TERMENUL LIMITA DE EXECUTIE :
<INPUT NAME=termlim TYPE=data SIZE=20>
<P>Tasteaza pentru :
<INPUT TYPE=SUBMIT VALUE=VALIDARE> sau pentru
<INPUT TYPE=RESET VALUE=ANULARE>
</FORM>
</HTML>
6.1.4.8. Aplicarea foilor de stil în paginile Web
Foile de stil în cascadă (CCS – Cascading Style Sheets) reprezintă o facilitate care permite stabilirea
unitară a unui set de proprietăţi de stil, care să definească design-ul paginilor Web; importanţa utilizării
acestor proprietăţi derivă, practic, din necesitatea eliminării redundanţei stilurilor introduse în paginile Web,
prin intermediul tag-urilor HTML. În contextul proiectării unei pagini Web, această facilitate se
materializează în trei modalităţi de aplicare a proprietăţilor de stil, şi anume:
1. Definirea stilurilor în antetul documentului HTML cu ajutorul tag-ului Style, respectând următoarea
sintaxă generală:
<STYLE Type="text/css"> proprietăţile de stil </STYLE>
Proprietăţile de stil specifică elementele de formatare ce se doresc a fi aplicate asupra informaţiilor conţinute
de paginile Web, fiind introduse după următorul format:
nume_tag {nume_proprietate : valoare_proprietate}
Exemplu de definire a unui stil de formatare:
P {Font-family:Times New Roman; Font-size:10pt; Font-style:Italic; Color:blue}
Permite editarea paragrafelor cu caractere italice, de culoare albastră, folosind fontul Times New Roman,
dimensiunea caracterelor fiind de 10 puncte tipografice
În structura unui document Web, există şi posibilitatea de a defini stiluri diferite pentru acelaşi tag HTML, în
acest caz, numele tag-ului trebuie să conţină un şir de caractere care să diferenţieze stilurile respective.
nume_tag . şir {nume_proprietate : valoare_proprietate}
Exemplu de definire a mai multor stiluri de formatare pentru un tag HTML:
P. aldin {Font-family:Courier;Color:blue;Font-weight:bold}
P. cursiv {Font-family:System;Color:red;Font-style:italic}
Se definesc, în cadrul aceluiaşi document HTML, două stiluri diferite, aplicate paragrafelor din acel
document: un stil se referă la paragrafele editate cu caractere aldine (îngroşate), altul la cele editate cu
caractere italice (cursive), setări realizate cu ajutorul atributului Font-style
Totodată, într-o pagină Web, proprietăţile de stil pot fi definite şi de o manieră generală, astfel, se pot stabili
anumite stiluri generice care pot fi aplicate ulterior mai multor tag-uri HTML.
.şir {nume_proprietate : valoare_proprietate}
Apelarea în programul HTML a stilurilor definite anterior, se va realiza după modelul: <P Class =
”şir” >Text
Exemplu: <P Class = ”aldin”> Text
În situaţia în care mai multe tag-uri dintr-un program HTML au acelaşi stil de formatare, se pot folosi
proprietăţile de stil, într-o manieră combinată, plecând de la următoarea sintaxă generală:
nume_tag1, nume_tag2 ... nume_tagn {proprietate : valoare}
Exemplu de aplicare a unor atribute de formatare pentru mai multe operaţii:
H2, A, TD {Color:green}
H2 {Font-weight:bold}
Presupune editarea caracterelor folosind culoarea verde (atributul Color), pentru un text cu dimensiunea H2
(tag-ul H2), pentru un şir de caractere ce reprezintă o legătură hipertext (tag-ul ANCHOR) şi pentru acele
informaţii care figurează în celulele unui tabel (tag-ul TD). În mod particular, se aplică formatarea cu
caractere aldine, numai pentru textul din tag-ul H2.
2. Definirea stilurilor in-line, adică în interiorul corpului de text al programului
În acest caz, în tag-ul de început din linia de comandă, se introduce atributul Style care permite definirea
proprietăţilor de stil, chiar în tag-ul BODY:
<Nume_tag Style = "nume_proprietate : valoare"> Text
Exemplu de stil in-line personalizat pentru tag-ul H1:
<H1 Style=”Font-family:script; Color:magenta; Font-weight:bold”> Text
Pentru acele informaţii ale paginii Web pentru care se setează dimensiunea maximă a caracterelor (H1), se va
aplica stilul in-line, care face apel la următoarele atribute de formatare: fontul Script, culoare violet, caractere
aldine (îngroşate)
3. Definirea stilurilor într-un fişier extern
În acest scop, se poate crea un fişier special, având extensia CSS (foi/şabloane de stil în cascadă), în care se
vor defini toate proprietăţile de stil ce vor fi folosite ulterior în cadrul programelor HTML.
Prin această facilitate se creează posibilitatea uniformizării tuturor paginilor Web din structura unui site,
aplicând aceleaşi stiluri de formatare, în toate fişierele componente. Realizarea legăturii nemijlocite dintre o
pagină Web şi un fişier cu stiluri (fişier CSS) se face prin tag-ul LINK, cu următoarea sintaxă generală:
<LINK Rel=stylesheet Type=”text/css” Href=”nume/adresa fişier.CSS”>
În mod particular, în tag-ul ANCHOR pot fi folosite o serie de pseudo-clase, pentru a modifica
proprietăţile de stil asociate unei legături hipertext. Exemplu:
A : HOVER {Text-decoration: none|underline | overline | line-through | blink}
Prin pseudo-clasa Hover se poate seta modul în care se scoate în evidenţă un şir de caractere, reprezentând
un hyperlink: sublinierea textului cu o linie (Underline), aplicarea asupra textului a unui efect de „licărire”
(Blink), etc.
Pentru exemplificarea facilităţilor oferite de fişierele CSS se vor defini într-un fişier extern (numit
Stiluri.CSS) trei stiluri generice, cu ajutorul aplicaţiei FrontPage. Aceste stiluri vor introduce următoarele
proprietăţi de formatare:
• Stilul de paragraf P.rosu permite editarea paragrafelor cu caractere italice (Font-style), de culoare roşie
(Color), dimensiunea caracterelor de 20 puncte tipografice (Font-size), folosind fontul care va fi
recunoscut de navigatorul Web, din lista propusă prin Font-family (Arial, Helvetica sau Arial Black)
• Stilul de paragraf P.albastru se referă la paragrafe editate cu albastru, caractere aldine, dimensiune
20puncte tipografice, indentare text de 2cm (Text-indent), iar spaţiul dintre litere este de 0,3 em
(Letter-spacing)
• A.ancora permite sublinierea cu o linie (Text-decoration) a unui şir de caractere ce reprezintă o
legătură hipertext
Programul HTML în care vor fi apelate stilurile definite în fişierul CSS va fi:
<HTML>
<HEAD>
<LINK Rel=stylesheet Type=”text/css” Href=”Stiluri.CSS”>
</HEAD>
<BODY>
<A NAME="zona">
<P CLASS="rosu">
<P CLASS="albastru">
<A CLASS="ancora" HREF="#zona">Exemplu de legatura hipertext</A>
</BODY>
</HTML>
Exemple de proprietăţi de stil ce pot fi definite într-o pagină Web
Proprietăţi ale corpurilor de literă (fonturilor)
font-family: stabilirea unei liste de fonturi disponibile, separate prin virgulă
font-size: „n” pt unde „n” reprezintă dimensiunea caracterelor, exprimată în număr puncte tipografice
font-style: italic scrierea cu caractere cursive (italice)
font-weight: bold scrierea cu caractere aldine (îngroşate)
font-stretch: condensed | expanded permite editarea cu caractere condensate sau expandate
Proprietăţi de fundal şi culori
color: denumire_culoare setarea culorilor pentru caractere
background-color: denumire_culoare stabilirea unei culori de fundal pentru text
background - image: nume/adresa fişier_imagine setarea unei imagini de fundal, cu specificarea
numelui, eventual a adresei fişierului care furnizează imaginea
background - repeat: repeat-x|repeat-y|repeat|no-repeat specifică modul de repetare a imaginii de
fundal: doar pe axa Ox (repeat-x), pe axa Oy (repeat-y), pe ambele axe (repeat) sau deloc (no-repeat)
background - attachment: fixed|scroll stabileşte dacă imaginea de fundal va fi fixă (fixed) sau va defila o
dată cu conţinutul paginii (scroll)
background - position: [top | center | bottom] [left | center | right] determină poziţia pe verticală şi
pe orizontală a imaginii de fundal
Proprietăţi ale textului
letter-spacing defineşte spaţierea dintre litere (se utilizează unitatea de măsură relativă „em” care
reprezintă lăţimea literei „M” relativă la corpul de literă folosit
word-spacing stabileşte spaţierea dintre cuvinte adiacente
transform: uppercase | lowercase transformarea textului în caractere majuscule sau în caractere
minuscule
text-align: left | center | right | justify alinierea textului pe orizontală
text-indent specifică modul de indentarea liniei, valorile fiind excprimate, fie în procente, fie în centimetri
text-decoration : none | underline | overline | line-through | blink setarea modului de afişare a
cuvintelor de legătură ce se constituie ca hyperlink-uri
vertical-align: sub | super scrierea sub formă de indice, respectiv sub formă de exponent
line-height specifică distanţa dintre două linii adiacente (în puncte tipografice)
list-style-type: disc|circle|square specifică simbolul care va preceda elementele unei liste nenumerotate
(cerc plin, cerc vid sau pătrat).

6.2 Documente XML - concepte de bază

XML(eXtensible Markup Language) este un limbaj pentru descrierea şi schimbarea documentelor
structurate. Ca şi fratele său mai mare SGML (Standard Generalized Markup Language), din care a generat,
el permite descrierea structurilor logice ale documentelor în principal textuale, cu ajutorul unui sistem de tag-
uri care marchează elementele componente ale structurii şi relaţiile dintre aceste elemente.
Marcarea structurală este un concept foarte simplu, prin care orice document textual este realizat conform unei
structuri, care este recunoscută de cititorii umani datorită:
• indicatorilor tipografici;
• convenţiilor de aranjare în pagină;
• cunoştinţelor pragmatice, culturale, relative la informaţiile generice care sunt susceptibile să fie
conţinute.
Orice document particular poate fi inclus într-o anumită categorie de documente.
XML este rezultatul cooperării unui mare număr de cercetători ai Web Consortium (W3C). Obiectivul lor
constă în definirea unui formalism care să permită schimbul uşor al documentelor complexe pe Web,
depăşind limitele impuse prin HTML. Norma internaţională existentă pentru schimbarea documentelor
structurate - SGML (ISO 8879 -1986) s-a dovedit a fi foarte complexă pentru ca navigatoarele să poată fi
uşor implementate. În plus, SGML impune ca orice document să fie conform unei structuri de document
tip, perfect specificat şi validat. Apoi, SGML nu oferă mecanisme de legături bine adaptate pentru crearea
unui hipertext deschis asociat numeroaselor documente.
6.2.1 HTML şi XML
Tag-urile disponibile în HTML, şi semantica ce le este asociată, sunt predefinite prin norme. Utilizatorul nu
are nici o posibilitate pentru definirea propriilor marcatri, în scopul realizării unei mai bune descrieri a
structurii documentelor sale particulare. Elementele predefinite HTML au rolul să descrie aspectul fizic şi
structural al documentelor ce se proiectează. Deoarece în acelaşi document HTML se regăsesc tag-uri pentru
descrierea structurii logice, descrierea semanticii unora dintre elementele sale şi o descriere a caracteristicilor
sale fizice (a modului de afişare pe ecran) apar două mari dezavantaje:
• documentele astfel create au o speranţă de viaţă relativ scurtă, vor fi dependente de navigatoarele
HTML;
• un acelaşi document nu poate fi uşor prezentat în mai multe moduri. De exemplu, autorul unui
document ar vrea ca informaţia să fie prezentată, după caz, sub forma:
 afişarea pe ecranul unui PC, cu o anumită aranjare în pagină;
 recepţionarea printr-un software special (sintetizator vocal), conectarea la Web se va face printr-
un telefon mobil;
 afişarea într-un mod simplificat pe miniecranul unui calculator de buzunar;
 afişarea printr-un terminal Braille.
Atâta timp cât regulile de realizare fizică sunt incluse în document, vor trebui create atâtea versiuni câte
forme de prezentare se doresc. XML rezolvă complet această problemă: noua normă nu propune nici un
element sau atribut pentru aranjarea în pagină. Realizarea fizică a documentului se face prin foile de stil
definite în CSS (Cascading Style Sheet) sau cu ajutorul limbajului XSL (eXtensible Stylesheet Language).

XML va fi limbajul nativ pentru următoarea generaţie a celor mai cunoscute navigatoare Web. În plus, XML
oferă o metodologie ideală pentru afacerile electronice, deoarece:
• XML permite creatorilor de mesaje tip să identifice clar rolul şi sintaxa fiecărui element al datelor
interschimbate utilizând o definire care este atât prelucrabilă automat cât şi interpretabilă uman;
• XML permite creatorilor de mesaje tip să identifice sursa fiecărei structuri partajate prin utilizarea
unui URL;
• XML poate utiliza facilităţile furnizate de ultimele versiuni ale protocolului HTTP;
• XML poate fi integrat cu sistemele EDI (Electronic Data Interchange) existente pentru:
 furnizarea unor formulare specifice aplicaţiei şi pe care utilizatorii le pot completa pentru
generarea mesajelor EDI;
 generarea formatelor de mesaje EDI pentru transmisia dintre calculatoare prin INTERNET
sau printr-o reţea cu valoare adăugată existentă;
 interpretarea datelor recepţionate în format EDI conform setului de reguli predefinite pentru
afişare.
• XML poate extinde aplicaţiile EDI existente deoarece permite creatorilor să adauge date specifice
aplicaţiei.
6.2.2 Rea lizar ea docume ntelor XML
XML distinge două clase de documente: documentele bine formate (corecte) şi documentele validate. Un document
este bine format atunci când se supune regulilor sintactice ale limbajului XML. Un document validat este
bine format şi corespunde unei structuri tip definită explicit într-o DTD (Document Type Definition).
Orice document validat poate fi distribuit printr-un sistem informatic. Navigatoarele XML au capacitatea de
a vizualiza şi imprima documentele corecte nevalidate. Editoarele de documente cunoscute pentru limbajul
XML nu impun definirea şi/sau utilizarea unei structuri tip pentru a crea un document.

a) Structura unui document

Orice document XML este compus din:
• prolog – conţine un anumit număr de declaraţii;
• arborele elementelor – formează conţinutul propriu-zis al documentului;
• comentariile şi instrucţiunile de prelucrare – a căror prezenţă este facultativă.

Declaraţia XML are rolul să identifice un document XML. Toate documentele XML trebuie să înceapă cu
o declaraţie a cărei sintaxă este:

<?xml version="nr_versiune" encoding="encoding_declaration" standalone="stare" ?>

Exemplu:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

Printr-o astfel de declaraţie, procesorul care va prelucra documentul primeşte următoarele informaţii:
• versiunea limbajului XML utilizată în document, aici versiunea 1.0;
• codificarea caracterelor utilizată în documentul XML. Se poate folosi unul din codurile: UTF-8,
UTF-16, ISO-10646-UCS-2, ISO-10646-UCS-4, ISO-8859-1 la ISO-8859-9, ISO-2022-JP, Shift_JIS,
EUC-JP;
• existenţa sau nu a unor declaraţii exterioare documentului, de care se va ţine seama. Dacă atributul
standalone are valoarea " yes" procesorul consideră că toate declaraţiile necesare prelucrării
documentului sunt incluse. Dacă acest atribut are valoarea "no" procesorul trebuie să caute
declaraţiile în alte fişiere externe.
Declaraţia XML trebuie să utilizeze caractere mici, excepţia o reprezintă valoarea atributului encoding.

b) Declararea documentului tip

Documentele valide au o structură tip predefinită. Definirea documentului tip (Document Type Definition
– DTD) este mecanismul prin care anumite structuri sunt specificate. Un document valid va fi totdeauna o
instanţă a unei structuri particulare definită în declaraţia de tip. Validarea unui document constă în utilizarea
unui program care verifică:
• dacă documentul respectă sintaxa limbajului XML;
• dacă documentul respectă structura definită prin DTD;
• toate referinţele pot fi rezolvate.
O definire a documentului tip reprezintă ansamblul tuturor informaţiilor conţinute, fie intern sau printr-o
referinţă la entităţi externe, într-o declaraţie a tipului de document DOCTYPE. DTD internă este de forma:

<!DOCTYPE element_rădăcină [
<!-- Document Type Definition(DTD):elemente/atribute/entităţi-->
<!ENTITY nume_entitate_1 "valoare">
…
]>

<?xml version="1.0" standalone="yes" ?>

<!-- DOCTYPE - parateza dreaptă indică un DTD intern -->

<!DOCTYPE exemplu [

<!-- început pentru DTD intern -->

<!ELEMENT exemplu (#PCDATA)>

<!-- sfârşitul declaraţiei -->

]>
<exemplu>Tutorial XML</exemplu>
• Declaraţia tip a documentului trebuie să se regăsească între declaraţia XML şi primul element
(elementul rădăcină) din document.
• Cuvântul cheie DOCTYPE trebuie să fie urmat de numele elementului rădăcină din documentul
XML.
Deoarece o DTD este o structură reutilizabilă ce poate fi folosită la realizarea multor documente, se preferă
conservarea sa ca o entitate separată. În declaraţia de tip a unui document se face apel la DTD-ul extern prin
intermediul unui URL. Există două tipuri de DTD externe: publice şi private.

DTD-urile externe private sunt identificare prin cuvântul cheie SYSTEM şi sunt utilizate de un singur autor sau
un grup de autori.

<!DOCTYPE element_rădăcină SYSTEM "DTD_localizare">

unde: DTD_localizare reprezintă un URL relativ (ex. doc.xml) sau absolut (ex. http://www.xmlwriter.net)

DTD-urile externe publice sunt identificate prin cuvântul cheie PUBLIC.

<!DOCTYPE element_rădăcină PUBLIC "DTD_nume" "DTD_localizare">

unde:
• DTD_localizare: este un URL relativ sau absolut;
• DTD_nume: are sintaxa:
"prefix//proprietar_DTD//descriere_DTD//ISO
 639_limbaj_identificat"

"DTD_localizare" este utilizat pentru a găsi DTD publică dacă nu poate fi identificată prin "DTD_nume".

Un document poate utiliza atât subseturi DTD interne cât şi externe. Subsetul DTD intern este specificat
între parantezele drepte ale declaraţiei DOCTYPE. Declaraţia pentru subsetul DTD extern este plasată
înaintea parantezelor drepte, imediat după cuvântul cheie SYSTEM.

c) Declararea elementelor
Toate tipurile de elemente utilizate într-un document XML trebuie declarate în DTD utilizând cuvântul
cheie ELEMENT. O declarare a unui element este de forma:
<!ELEMENT nume_element model_conţinut>

Exemplu:
<!ELEMENT adresa (#PCDATA)>
<!ELEMENT img EMPTY>

O declaraţie a unui element defineşte un tip de element şi îi asociază un nume şi un model al conţinutului
(tabel 9.1). Toate elementele instanţe ale acestui tip ce vor apare într-un document trebuie să corespundă
modelului definit în declaraţie.

Model_conţinut Semnificaţia:
Se referă la tag-urile care sunt vide. De exemplu, tag-ul
IMG din HTML poate fi reprezentat prin:
EMPTY
<IMG SRC="num_x.gif"/> sau
<IMG SRC="num_x.gif"></IMG>.
Elementul poate avea un conţinut oarecare, ce nu a fost încă
ANY decis, sub rezerva că respectă regulile sintactice generale
ale limbajului XML.
Când un număr de elemente tip pot înlocui un alt element
Elemente fiu tip. Acestea sunt denumite elemente fiu , iar elementele
înlocuite sunt denumite elemente părinte.
Conţinut mixt Se referă la combinaţia (#PCDATA) şi elementele fiu.
6.2.3 Dec larar ea ele me ntelor fiu
Elementele fiu pot avea o ordine impusă şi formează o secvenţă. Secvenţa este specificată prin lista de nume
ale tipurilor de elemente separate prin virgulă. Ordinea poate fi oarecare, iar elementele vor fi separate prin
bara verticală . Sintaxa este:

<!ELEMENT nume_părinte (name_fiu1, name_fiu2, name_fiu3)>

<!ELEMENT nume_fiu1 model_conţinut>
<!ELEMENT nume_fiu2 model_conţinut>
<!ELEMENT nume_fiu3 model_conţinut>

<?xml version="1.0"?>
<!DOCTYPE student [
<!--'student' conţine trei elemente fiu în ordinea
listată -->
<!ELEMENT student (id,nume_familie,primul_nume)>
<!ELEMENT id (#PCDATA)>
 <!ELEMENT primul_nume (#PCDATA)>
<!ELEMENT nume_familie (#PCDATA)>
]>
<student>
<id>5127</id>
<nume_familie>Popescu</nume_familie>
<primul_nume>Ioana</primul_nume>
</student>

Orice element de tip student va conţine un element id, un element nume_familie şi un element primul_nume,
respectând această ordine.

Numele unui element ce apare în modelul_conţinut al unui element părinte (cu alte cuvinte unul din
elementele nume_fiu) poate fi însoţit de unul din operatori: *, +, ?. Semnificaţia acestor operatori este:
• nume_fiu* indică faptul că elementul poate să nu apară, să apară o dată sau de mai multe ori în
conţinutul unei instanţe;

<!ELEMENT nume_părinte (nume_fiu*)>

<!ELEMENT nume_fiu model_conţinut>

<?xml version="1.0"?>
<!DOCTYPE student [
<!--'student' poate avea zero sau mai multe elemente fiu
de tip 'subiect'-->
<!ELEMENT student (subiect*)>
<!ELEMENT subiect (#PCDATA)>
]>
<student>
<subiect>Sisteme_de _calcul</subiect>
<subiect> Sisteme_de_operare</subiect>
<subiect>Teleinformatica</subiect>
</student>

• nume_fiu+ indică faptul că elementul poate apare o dată sau de mai multe ori în conţinutul unei
instanţe;

<!ELEMENT nume_părinte (nume_fiu+)>

<!ELEMENT nume_fiu model_conţinut>

<?xml version="1.0"?>
<!DOCTYPE student [
<!--'student' trebuie să aibă cel puţin un element fiu de
tip 'subiect'-->
<!ELEMENT student (subiect+)>
<!ELEMENT subiect (#PCDATA)>
]>
<student>
<subiect>Teleinformatica</subiect>
</student>

• nume_fiu? – indică faptul că elementul poate să nu apară sau să apară o singură dată în conţinutul unei
instanţe (este opţional).

<!ELEMENT nume_părinte (nume_fiu?)>

<!ELEMENT nume_fiu model_conţinut>
<?xml version="1.0"?>
<!DOCTYPE student [
<!--'student' poate avea zero sau un element fiu de
tip 'adm'-->
<!ELEMENT student (adm?)>
<!ELEMENT adm (#PCDATA)>
]>
<student>
<adm>19.06.97</adm>
</student>

Absenţa unuia din aceşti operatori are semnificaţia că elementul declarat trebuie să apară o dată şi numai o
dată: este obligatoriu şi nerepetabil.

Prezenţa datelor în conţinutul unui element se specifică prin cuvântul cheie

# PCDATA (Parsed Character DATA) :
<!ELEMENT nume (#PCDATA)>

Conform acestei declaraţii, un element nume nu poate conţine decât date, nu şi elemente fiu. Datele sunt
reprezentate printr-un set de caractere (de exemplu nu poate fi o imagine).

d) Declararea listei de atribute

Atributele sunt informaţii suplimentare asociate cu un element tip. Declaraţiile ATTLIST identifică
elementele tip care pot avea atribute, ce tipuri de atribute pot avea şi care sunt valorile implicite.

<!ATTLIST nume_element nume_atribut tip_atribut

valoarea_implicită>
.
.
<element nume_atribut ="valoare_atribut">

unde:
• nume_element reprezintă numele elementului pentru care se utilizează atributul nume_atribut;
• tip_atribut poate fi:
 CDATA – valoarea atributului va fi un şir de caractere, care nu va fi recunoscut şi prelucrat
printr-un procesor XML;

<?xml version="1.0"?>
<!DOCTYPE imagine [
<!ELEMENT imagine EMPTY>
<!ATTLIST imagine height CDATA #REQUIRED>
<!ATTLIST imagine width CDATA #REQUIRED>
]>
<imagine height="32" width="32"/>

 ID sau IDREF – definesc legături în interiorul documentelor;

<?xml version="1.0"?>
<!DOCTYPE nume_student [
<!ELEMENT nume_student (#PCDATA)>
<!ATTLIST nume_student nr_student ID #REQUIRED>
]>
<nume_student nr_student="an41999">Elena Dan</nume_student>
  ENTITY sau ENTITIES permit ca un atribut să ia ca valoare numele unei (sau mai multor)
entităţi externe;
 NMTOKEN sau NMTOKENS permit atributului să ia ca valoare numele unui "token" (sau unor
token-uri);
 NOTATION defineşte modul particular de interpretare a textului;
 Enumerarea tipurilor de atribute, prin care se poate face o alegere între diferitele valori ale
atributului.

• valoarea_implicită are semnificaţia că atributul este cerut sau nu şi dacă nu, ce valoare
implicită va fi afişată. Valorile implicite sunt listate în tabelul următor:

Lista valorilor implicite

Valoare implicită: Descrierea:
#REQUIRED Atributul va fi totdeauna prezent.
#IMPLIED Prezen ţa atributului este facultativă.
Atributul ia totdeauna aceeaşi valoare în instanţa în
#FIXED "Valoare"
care elementul a fost declarat.
6.2.4 Editarea XML

Scrierea documentelor XML bine formate (fără DTD) se realizează printr-un:

• Editor simplu de texte, situaţie în care este necesară existenţa unui produs parser care să verifice
sintaxa documentului obţinut.
• Editor de text în modul XML. Este un editor de text dotat cu un mecanism de macrou, astfel printr-
o singură comandă se inserează o construcţie relativ complexă a limbajului.
• editor pentru limbajul XML. În acest caz, fereastra de editare este împărţită în două: în stânga apare
reprezentarea grafică a structurii documentului, iar partea dreaptă va conţine elementul selectat şi
permite editarea.

Figura 6. 1 Fereastră a editorului XMLwriter

6.3 Generatorul de pagini WEB Microsoft FrontPage
6.3.1 Intr oduc ere
Încă de la lansare, Microsoft FrontPage s-a remarcat ca unul dintre cele mai puternice instrumente de editare a
paginilor WEB, atât din punctul de vedere al facilităţilor oferite creatorilor de pagini WEB, cât şi al
ergonomiei. Aplicaţia s-a îmbogăţit continuu cu noi instrumente puse la dispoziţia dezvoltatorilor de pagini
WEB, versiunea 2003, lansată odată cu suita de aplicaţii Microsoft Office 2003 nefăcând excepţie.
Caracteristicile principale ale editorului FrontPage sunt:
• Administrarea unuia sau mai multor site-uri WEB complexe cât şi a paginilor individuale;
• Editarea vizuală paginilor WEB în mod WYSIWYG – What You See Is What You Get – ceea ce vezi
este ceea ce obţii;
• Scrierea directă de cod în limbajul HTML, VBScript, JavaScript, etc.
• Asistenţa oferită la scrierea codului prin integrarea instrumntului IntelliSense. Acesta permite ca după
scrierea unui cuvânt cheie într-un anumit limbaj, să se afişeze automat în funcţie de context, toate
posibilităţile de utilizare a acestuia. În figurile următoare se prezintă modul de utilizare a
instrumentului IntelliSense pentru selectarea şi parametrizarea unui tag HTML:

Fereastra de bază a editorului FrontPage 2003 se caracterizează prin (vezi Figura 6. 2):
a. Bara clasică de meniuri a unei aplicaţii Windows, barele de
instrumente specifice4 şi un panou de instrumente/comenzi
“la îndemână” (Task Pane). Referitor la acesta din urmă,
implicit este afişat panoul Getting Started. În locul acestuia
poate fi afişat automat un alt panou de instrumente în
funcţie de contextul în care se gaseşte dezvoltarea unei
pagini. Afişarea acestor panouri se activează/dezactivează
din meniul View->Task Pane. Printr-un clic în titlul panoului
de comenzi rapide, acesta poate fi schimbat manual cu un
altul. Panourile de instrumente disponibile pot fi observate
în figura alăturată:

4
Cu fiecare versiune nou apărută, barele de instrumente şi principiul de utilizare ale editorului sunt tot mai apropiate de cele
din suita Microsoft Office.
 Figura 6. 2 Fereastra de bază a editorului FrontPage
b. În partea de jos a ferestrei, sunt vizibile patru opţiuni:
• Design – pentru editarea vizuală a paginii (inserare, ştergere, modificare conţinut pagină în mod
WYSIWYG;
• Split – pentru editarea/vizualizarea unei pagini atât în mod WYSIWYG cât şi de cod în limbajul
HTML sau alte scripturi; în figura următoare se poate observa modalitatea de afişare a unei pagini
WEB în acest mod.

• Code – permite scrierea/modificarea/ştergerea directă de cod în limbajul HTML sau alte scripturi;
• Preview – pentru previzualizarea unei pagini WEB (cum ar arăta pagina, dacă ar fi încărcată într-un
program specializat de navigare pe Internet, de exemplu Microsoft Internet Explorer). Anumite elemente
nu sunt afişate însă la fel ca în cazul încărcării paginii într-un program specializat de navigare pe
Internet, în consecinţă se recomandă şi încărcarea paginii într-un astfel de program (cel mai folosit
este Internet Explorer).
c. Bara rapidă de selectare a unui tag HTML (se activează/dezactivează din meniul View->Quick TAG
Selector), prezentă în partea de sus a paginii, sub numele acesteia. Aceasta se utilizează pentru a vizualiza sau
modifica tag-urile care sunt aplicate la un moment dat asupra unui text, imagine, etc.
6.3.2 Crearea paginilor şi site-urilor WEB
FrontPage 2003 pune la dipoziţie mai multe posibilităţi de creare şi gestionare atât a paginilor Web simple,
cât şi a site-urilor Web. În ceea ce priveşte numele fişierelor care fac parte dintr-o pagină Web simplă, sau
dintr-un site, acestea nu sunt supuse decât restricţiilor impuse de sistemul de operare gazdă, deci practic pot
fi folosite orice nume. Extensia fişierelor trebuie să fie HTM sau HTML. Sunt întâlnite şi alte extensii pentru
fişiere, însă, acestea de obicei, semnifică faptul că acel fişiere conţine un anumite elemente specifice. De
exemplu extensia .asp este utilizată pentru fişiere Active Server Pages, .aspx pentru fişiere ASP .NET, .css
pentru fişiere cu foi de stil, etc.
În cazul site-urilor trebuie să existe un fişier principal, aşa numita pagină de start, care are de obicei numele
index sau default, cu extensiile aferente. În funcţie şi de serverul Web utilizat pentru gazduirea unui site Web
pot fi utilizate şi alte nume, respectiv extensii.
6.3.2.1. Crearea şi întreţinerea paginilor Web individuale5
În acest paragraf se va face referire numai la pagini Web care se creează/întreţin individual, ce nu fac parte
dintr-un site Web, dar, ar putea să facă parte în orice moment.
Crearea unei pagini se poate realiza în mai multe moduri
unul dintre ele fiind meniul File->New..., moment în
care se afişează panoul de comenzi rapide New. Aşa
cum se observă din figura alăturată, sunt puse la
dispoziţie mai multe opţiuni:
• Blank Page – dacă se doreşte crearea unei pagini
de la început (de la “zero”);
• From existing page... – dacă se doreşte crearea
unei pagini, având ca model o pagină proprie
deja existentă. În acest caz, după invocarea
acestei opţiuni, se va alege de pe disc, pagina
care va servi ca bază pentru crearea unei alte
pagini;
• More page Templates – pentru crearea unei pagini,
utilizând modele de pagini (şabloane) predefinite,
din pachetul FrontPage, sau modele proprii. Este o
variantă care permite crearea rapidă a unei pagini
cu o anumită structură de conţinut, ţinând cont Figura 6. 3 Panoul de
că sunt puse la dispoziţie o mare varietate de comenzi rapide New
şabloane (vezi Figura 6. 4).

5
Chiar dacă un site Web, în ultimă instanţă poate să conţină un singur fişier pagină WEB, în marea majoritate a cazurilor un
site Web este o structură complexă de foldere şi fişiere cu pagini Web, imagini şi alte elemente multimedia. În acest paragraf,
sunt expuse modalităţile practice de creare/modificare a unei pagini Web neintegrată într-un site.
 Figura 6. 4 Fereastra pentru afişarea paginilor WEB de tip şablon
Aşa cum se remarcă şi din Figura 6. 4, şabloanele sunt organizate pe categorii, fiind disponibile următoarele
categorii:
• General – pentru definirea unor pagini, după o temă dată, de exemplu: bibliografie, carte de oaspeţi,
etc; În Figura 6. 5 se poate remarca modul de definire al unei pagini Web, care utilizează şablonul
Guest Book:
• Frames Pages – pentru pagini Web, care utilizează şi cadre;
• Style Sheets – pentru pagini de tip foaie de stil.

O altă posibilitate de creare a unei pagini Web este de activare a optiunii (Create a new normal page) din
bara de instrumente Standard. De remarcat că în cazul utilizării acestei variante, panoul de comenzi rapide
afişat, este Layout Tables and Cells, de unde se pot configura rapid câţiva parametri de design ai paginii Web.
Aşa cum se poate remarca şi din Figura 6. 6, principala facilitate oferită de acest panou este aceea de
împărţire tabelară a ferestrei paginii în mai multe zone (de fapt celule) în scopul obţinerii unor aranjamente
ale conţinutului de nivel ridicat. Practic structura paginii este dată de un tabel cu contururi invizibile, scopul
practic fiind acela de a plasa informaţiile din pagină în anumite zone fixe.
 Figura 6. 5 Utilizarea şablonului Guest Book

Figura 6. 6 Crearea unei pagini Web şi panoul Layout Tables and Cells
Salvarea unei pagini Web, se realizează din meniul File->Save (salvare cu acelaşi nume şi în aceeaşi locaţie) sau
din meniul File -> Save As (salvare cu posibilitatea schimbării numelui fişierului şi/sau a locaţiei. În cazul
unei pagini noi, care nu a fost salvată niciodată, ambele opţiuni afişează aceeaşi fereastră, cea a opţiunii Save
As.
Deschiderea unei pagini Web salvate, se realizează din meniul File->Open , apoi se alege locaţia şi
pagina dorită.
6.3.2.2. Crearea şi întreţinerea site-urilor Web.
Facilităţi specifice gestionării site-urilor Web
Din punct de vedere al tipului şi al conţinutului fişierelor unui site WEB, acestea pot fi salvate toate în
acelaşi folder, sau în foldere specializate, cum ar fi spre exemplu:
 • folder pentru imagini
• folder pentru fişierele cu foi de stiluri
• folder pentru fişierele htm, sau html
• folder pentru fişierele .asp etc.
Se pot face grupări ale fişierelor din site şi după temele care le tratează site-ul, utilizatorul fiind cel care
optează pentru o variantă sau alta. Varianta salvării tuturor fişierelor site-ului în acelaşi folder, poate fi
utilizată în cazul site-urilor care conţin puţine pagini, însă pentru site-urile cu multe fişiere această variantă,
face greoaie gestiunea actualizării paginilor din componenţă.
La crearea unui site cu FrontPage, acesta propune un set de foldere standard, în afară de acestea, utilizatorul
putând să-şi creeze şi propriile foldere.
Crearea unui site Web, se poate crea la fel ca în cazul paginilor Web simple, din meniul: File->New, apoi din
panoul de comenzi rapide New (vezi Figura 6. 3), se alege una din următoarele opţiuni:
• One page Web site – pentru crearea unui site nou, fără nici un fel de informaţie, având o singură pagină
Web. Odată cu crearea site-ului trebuie precizată şi locaţia unde va fi amplasat acesta: local sau la o
adresă validă Internet.
• More Web site templates (pentru crearea unui site după un şablon). În ambele cazuri pe ecran este
afişată aceeaşi fereastră, opţiunea pentru definirea unui site de la “zero” (Empty Web) sau pentru
definirea unui site cu o singură pagină Web (One page Web site) fiind tratată ca un şablon în cadrul
celorlalte şabloane FrontPage.

Figura 6. 7 Fereastra pentru selectarea şablonului care stă la baza unui site nou

În cazul în care este disponibilă o conexiune internet, se poate alege şi opţiunea Templates on Office Online,
fiind pusă la dispoziţia utilizatorului o colecţie impresionantă de şabloane pe site-ul Microsoft, producătorul
programului FrontPage.

Crearea paginilor Web utilizând şabloanele din categoria General

• Crearea unui site, utilizănd şablonul Empty WEB

În cazul utilizării acestei variante, se creează automat şi se sugerează doar o structură de foldere (vezi
imaginea de mai jos) care nu conţin însă fişiere. Utilizatorul îşi va salva paginile Web proprii în această
structură, eventual şi în alte foldere proprii.

De asemenea, aşa cum s-a arătat anterior,

utilizatorul va trebui să creeze şi o pagină
principală cu numele index.htm (.html) sau
default.htm (.html), de preferat fiind să o
salveze în folderul rădăcină al site-ului.

• Crearea unui site, utilizănd şablonul One page Web site

Operaţia se derulează la fel numai că se creează automat o pagină de start fără conţinut cu numele index.htm.

• Crearea unui site, utilizând celelalte şabloane

Utilizând celelalte şabloane, în funcţie de profilul site-ului definit de şablon, utilizatorul poate fi asistat pas cu
pas, la definirea acestuia, trebuind să răspundă la mai multe întrebări referitoare la structura şi design-ul site-
ului. Spre exemplu, dacă se doreşte crearea unui site, având la bază şablonul Corporate Presence Wizard, în
folder-ul c:\SiteAsistat, prima fereastră la care trebuie să răspundă utilizatorul este:

După cum se observă, sunt propuse un set de opţiuni, utilizatorul trebuind să aleagă conţinutul paginii
principale a site-ului: noutăţi (What’s new), produse şi servicii (Products/Services), un cuprins al site-ului (Table
Of Contents), etc. În final după precizarea tuturor opţiunilor, structura de foldere a site-ului (Folder List) şi
structura arborescentă a site-ului este prezentată în Figura 6. 8.
 Figura 6. 8 Structura arborescentă a unui site prezentată grafic
Cu titlu de exemplu, se prezintă o secvenţă din conţinutul şablon al fişierului products.htm, remarcându-se
informaţia care ar trebui modificată de către utilizator.

În cazul altor şabloane se creează doar structura de foldere şi fişiere şablon a site-ului fără a fi oferită
asistenţă pas cu pas. De exemplu alegerea şablonului Personal Web Site are ca efect crearea structurii din figura
următoare:
Utilizatorul trebuie să selecteze fiecare pagină din componenţa site-ului şi să o completeze cu informaţiile
necesare.

6.3.3 Fac ilităţi ofer ite în gestionarea site -ur ilor

Importul site-urilor. FrontPage permite importul atât a unor fişiere izolate cât şi a unor întregi site-uri prin
specificarea adresei. Meniul de unde se realizează operaţia este File->Import.
Publicarea site-urilor. Se realizează din meniul File->Publish Site... şi presupune ca serverul unde va funcţiona
site-ul să suporte extensiile FrontPage (FrontPage Extension).
Rapoarte despre site. Sunt accesibile din meniul View->Reports. Sunt disponibile mai multe tipuri de rapoarte,
din care se amintesc cele mai importante:
• Files->All Files – informaţii despre numărul, dimensiunea şi alte informaţii despre toate fişierele di
site;
• Files->Recently Added Site – informaţii despre ultimele fişiere adăugate site-ului;
• Files->Recently Changed Site – informaţii despre ultimele modificări ale site-ului;
• Problems->Unlinked files – fişiere care sunt în structura site-ului, darn u există nici o referire către ele;
• Problems->Slow Pages – despre paginile care se încarcă greu;
• Problems->Hyperlinks – informaţii despre legăturile hipertext care au erori;
• Usage – oferă diverse informaţii cu privire la accesarea site-ului, dar sunt condiţionate de publicarea
site-ului pe un server care suportă acest lucru;
Vizualizarea structurii arborescente de foldere şi fişiere din cadrul site-ului, se realizează din meniul View-
>Folders.
Vizualizarea grafică a structurii arborescente a site-ului, se realizează din meniul View->Navigation. În Figura 6.
8Error! Reference source not found. se poate vizualiza modul cum este prezentat grafic structura unui
site.
Programarea anumitor operaţii efectuate asupra unui site, se realizează din meniul View->Task.
Uniformizarea aspectului unui site, se realizează din meniul Format->Theme, care utilizează aşa-numitele teme,
care oferă un aspect unitar întregului site.
6.3.4 Definirea para metrilor principali ai unei pagini WEB
Se realizează din meniul File-
>Page Properties. Principalele
secţiuni care se pot configura,
sunt:
 General – unde se pot
stabili titlul paginii (Title),
localizarea în cadrul site-ului
(Base location), un fişier cu
sunete (Background sound) care
să fie redat în momentul
vizitării paginii, etc.
 Formatting – se poate
stabili un fişier imagine, care
să fie plasat în fundal, sau
culoarea de fond a
documentului (Background
picture). De asemnea se mai
pot stabili: culoarea textului
(Text), culoarea legăturilor
hipertext nevizitate
(Hyperlink), culoarea
legăturilor hipertext vizitate
(Visited hyperlink), etc.

 Advanced – pentru
stabilirea dimensiunii
spaţiului din partea de sus, de
jos a paginii şi a celui din
stanga, dreapta faţă de
conţinut. Opţiunea Design-time
control scripting stabilesc
modalitatea de execuţie a
scripturilor pe server sau pe
maşina clientului iar Enable
hyperlink rollover effects permite
definirea unui efect aplicat
legăturilor hipertext, atunci
când mouse-ul se află
deasupra acestora – butonul
de comandă Rollover Style
activând o listă cu efectele
posibile de aplicat.
6.3.5 For mata rea caracterelor
Caractereleor unui text i se
pot aplica mai multe
formatări, asemănătoare cu
cele oferite de programele
specializate în tehnore-
dactarea documentelor
(Microsoft Word, spre
exemplu). Pentru a stabili
caracteristicile unuia sa a
mai multor caractere, se
selectează zona dorită, apoi
se activează meniul
Format -> Font:
 Font – stabileşte setul de
caractere utilizat;
 Font Style – stabileşte
modul de afişare al
caracterelor: Bold (îngroşat),
Italic (înclinat), Bold Italic
(îngroşat şi înclinat), Regular
(normal);

 Size – dimensiunea caracterelor;

 Color – culoarea caracterelor;
 Effects – diverse efecte aplicate asupra caracterelor, din care se amintesc: Underline (caractere subliniate –
tag-ul <U>), Strikethrough (caractere tăiate – tag-ul <S>), Superscript (caractere scrise sub formă de putere –
tag-ul <SUP>, Subscript (caractere scrise sub formă de indici – tag-ul <SUB>), Strong (caractere scoase în
evidenţă – tag-ul <STRONG>), etc.
 Secţiunea Character Spacing, permite stabilirea spaţiului dintre caractere.
6.3.6 For mata rea paragrafelor
Un paragraf dintr-un document Web, se identifică în editorul FrontPage, ca fiind zona de informaţii, care ţine
până la acţionarea tastei ENTER (altfel spus – zona dintre două ENTER-uri). Stabilirea caracteristicilor
unui paragraf se realizează din meniul Format->Paragraph. Tag-ul HTML, inserat odată cu stabilirea acestor
caracteristici, este:
<P>
......
</P>
 Aşa cum se remarcă din
figura alăturată, opţiunile
puse la dispoziţie, sunt:
 Alignment – modul de
alieniere al conţinutului, pe
orizontală: Left (la stânga),
Center (centru), Right (la
dreapta), Justify (la stânga şi
la dreapta); corespunzător
acestor moduri de aliniere,
tag-ul <P>, este utilizat
împreună cu atributul
ALIGN:
<P
ALIGN=”LEFT|CENTER|RI
GHT|JUSTIFY”>

</P>

 Indentation – permite inserarea de spaţii, în partea stângă a textului (Before text), în partea dreaptă, până în
marginea din dreapta (After text);
 Indent first line – pentru inserarea de spaţii numai pentru prima linie a paragrafului;
 Spacing – pentru stabilirea spaţiilor de deasupra paragrafului (Before), după acesta (After) şi a celui dintre
cuvinte (Word);
 Line spacing – pentru spaţiul dintre rânduri: Single (un singur rând), 1.5 Lines (un rând şi jumătate) şi Double
(două rânduri).
6.3.7 Definirea listelor de e le mente
Listele de elemente, dintr-un document Web, se definesc din meniul Format ->Bullets and Numbering, şi sunt
de două tipuri:
 Nenumerotate, acestea pot
utiliza fişiere imagine,
stabilite de utilizator (Picture
Bullets) plasate înaintea
fiecărui element sau unul din
următoarele simboluri (Plain
Bullets): ,  (circle) sau 
(square), aşa cum se remarcă
din imaginea alăturată. Tag-
ul HTML, corespunzător
listelor de elemente
nenumerotate este:

<UL TYPE=”CIRCLE|SQUARE”>
<LI> element 1 </LI>
 <LI> element 2 </LI>
.....
</UL>
În cazul utilizării cerculeţelor pline (), nu se va menţiona atributul TYPE.

Exemplu de listă nenumrotată, care utilizează pătratul:

Codul HTML, corespunzător acestui exemplu este:

 numerotate (secţiunea Numbers), utilizează

pentru numerotare, cifre arabe (1,2,3...),
romane (I, II, ...sau i, ii, ....), litere (A...Z, sau
a....z). Tag-ul HTML, pentru definirea listelor
numerotate este:
<OL TYPE=”A|a|I|i” START=”n”>
<LI> element 1 </LI>
<LI> element 2 </LI>
.....
</OL>
Pentru numerotarea cu cifre arabe, nu se
utilizează atributul TYPE.
6.3.8 Definirea bor durilor şi a umbrelor
 Bordurile şi
umbrele se definesc
din meniul Format-
>Borders and Shading,
pentru borduri
utilizându-se
secţiunea Borders, iar
pentru umbre,
secţiunea Shading,
aşa cum se observă
şi din imaginea
alăturată.
În cazul bordurilor,
se pot stabili:
 tipul bordurii,
chenar complet
(Box) sau numai
anumite laturi
(Custom).
În acest din urmă caz, utilizatorul poate stabili din zona Preview, care sunt laturile care vor avea bordură.
 Tipul liniei bordurii (Style) – sunt puse la dispoziţie o mare varietate de linii: solid (linie continuă), dotted
(linie punctată), etc.
 Culoarea liniei (Color).
 Grosimea liniei (Width).
 Distanţa între linie şi text (Padding), din punct de vedere orizontal (Left – stânga şi Right – dreapta) şi
vertical (Top – sus şi Bottom – jos).
În ceea ce priveşte umbrele, se pot stabili:
 culoarea de fond (Background color);
 culoarea textului (Foreground color);
 imagine de fond (Background picture).
Imaginea poate fi aliniată din punct de
vedere vertical (Vertical position) sau
orizontal (Horizontal position) în cadrul
chenarului.

6.3.9 Inserer area obiectelor HTML

 Inserarea unui rând nou, în cadrul aceluiaşi paragraf, se realizează din meniul Insert->Break, tag-ul html,
fiind <BR>.
 Liinile orizontale, se inserează în
document din meniul Insert->Horizontal Line.
Tag-ul HTML generat la inserarea liniei este
<HR>. Implicit se desenează o linie care va
ocupa 100% din dimensiunea ferestrei, şi cu
grosimea de 2 pixeli.
Pentru a modifica aceste caracteristici implicite, se selectează linia, apoi se activează meniul Format ->
Properties, sau dublu clic pe linia selectată, sau clic dreapta şi Horizontal Line Properties. De menţionat că aceste
comenzi sunt valabile pentru a modifica toate obiectele dintr-o pagină web, editată cu FrontPage. Fereastra cu
proprietăţile liniei este:
 Lungimea linie (Width) se poate stabili ca
procent din dimensiunea ferestrei (Percent of
Window) sau lungime fixă în pixeli (Pixels).
 Grosimea liniei se stabileşte în caseta
Height, tot în pixeli.
 În cazul în care lungimea liniei nu este
100% din fereastră, se poate stabili şi modul
de aliniere a liniei pe orizontală (Alignment): la
stânga (Left), la dreapta (Right) sau pe centru
(Center).

 caseta Color defineşte culoarea liniei,

 Solid line, stabileşte dacă linia are sau nu umbră.

Inserarea straturilor (tag-ul DIV)

Se realizează din meniul Insert-

>Layer. În figura alăturată sunt
prezentate două straturi
adăugate din acest meniu.
Modificarea caracteristicilor
unui strat se realizează prin
acţionarea unui clic dreapta
deasupra, şi apoi meniul
contextual Layer->Properties.

Caracteristicile principale se referă la elementele de

contur ale unui strat (Borders and Shading) şi la cele de
poziţionare (Positioning) accesibile dintr-un panou de
comenzi rapide (Layers), aşa cum se poate observa şi
din imaginea alăturată.

Cadre inline
Un cadru (frame) inline (inclus direct în
corpul unei pagini WEB) se inserează din
meniul Insert-> InlineFrame. Odată cu
adăugarea cadrului, FrontPage plasează şi
două butoane de comandă de unde se
poate stabili pagina cu care se încarcă
cadrul. Odată ce se stabileşte pagina care
este încărcată în cadru, acestea nu mai
sunt vizibile.

Caracteristicile unui cadru inline se

stabilesc acţionând clic dreapta
deasupra acestuia, după care se
configurează opţiunile din imaginea
alăturată. Aşa cum se poate observa
se poate stabili:
• numele cadrului (Name),
• pagina de încărcare (Initial
page), pagină care poate fi
schimbată dinamic, ulterior,
prin codul paginii,
• titlul acestuia (Title),
• dimensiunile (Frame size-
>Width şi Height),
• marginile din interiorul
cadrului şi până în
conţinutul acestuia (Margins-
>Width şi Heght),
• Alinierea cadrului (Alignment) în cadrul paginii,
• Activarea/Dezactivarea barelor de defilare ale cadrului, atunci când conţinutul acestuia nu poate fi
afişat în dimensiunile actuale (Scrollbars).
 Data şi ora se inserează din meniul Insert-
>Date and Time. Aşa cum se observă şi din
figura alăturată se poate alege un anumit
format de afişare atât pentru dată cât şi pentru
oră.
 Comentariile, se inserează din
meniul Insert->Comment, tag-ul HTMl
generat fiind <!>. De menţionat că un
comentariu nu este afişat în momentul
vizitării paginii, acesta servind doar
celui care a realizat pagina.
 Caracterele speciale se inserează
din meniul Insert Symbol.

 Inserarea imaginilor, se realizează din meniul Insert-

>Picture, în acest meniu, fiind puse la dispozie mai multe
submeniuri, din care utilizatorul îşi poate alege tipul şi sursa
imaginii ce va fi încorporată în document (vezi figura
alăturată):
 Clip Art – permite inserarea unei imagini, din colecţia de
imagini a pachetului de programe Office;
 From File – permite selectarea unui fişier imagine de pe
disc, care va fi încorporat în document;

 From Scanner or Camera – permite inserarea unei imagini, direct de la o sursă externă, cum ar fi un scaner,
cameră video, tunner tv, etc;
 New Photo Galerry – inserează o imagine dintr-un album foto, gestionat de o aplicaţie specială din pachet.
Cu ajutorul acestei aplicaţii, utilizatorul îşi poate adăuga, şterge şi organiza imaginile proprii, inclusiv cu texte
însoţitoare, etc.
 Movie in Flash Format – inserează o animaţie în format Macromedia Flash.
 New Drawing – permite realizarea şi inserarea unei imagini cu ajutorul aplicaţiei Drawing din pachetul
Office, aplicaţie care poate fi utilizată şi din celelalte programe din pachet (Word, Excel, ş.a.).

 AutoShapes – permite introducerea automată din

cadrul unei colecţii bogate, a unei pictograme (vezi
figura alăturată). Această funcţie este întâlnită la
nivelul tuturor aplicaţiilor din pachetul Office;
 WordArt – permite introducerea unei imagini
realizate cu aplicaţia WordArt, aceasta fiind tot o
aplicaţie a suitei Office;
 Video – încorporează o secvenţă video în pagină.

Proprietăţile unei imagini:

Principalele proprietăţi ale unei imagini,
sunt (vezi figura alăturată):
 Wrapping style – stabileşte cum va fi
amplasată imaginea în raport cu textul de
lângă ea, la stânga (Left), la dreapta (Right),
sau implicit.
 Alignment – modul de aliniere al
imaginii, faţă de textul unde este
amplasată;
 Horozontal spacing – spaţiul care va fi
lăsat în partea stângă a imaginii;

 Vertical spacing – spaţiul care va fi lăsat în partea de sus a imaginii;

 Border thickness – dacă se introduce un număr mai mare de zero, va fi creată o bordură de efect, în jurul
imaginii;
 Size – stabileşte dimensiunea imaginii, în cazul în care se doreşte a fi modificată dimensiunea implicită a
acesteia; Lăţimea (Width) şi înălţimea (Height), pot fi stabilite ca dimensiune fixă, în pixeli (in pixels), sau în
procente (in percent).

Legături hipertext

Aşa cum s-a arătat la începutul acestui capitol, o legătură se poate defini pe orice tip de informaţie: text,
imagine statică, imagine în miscare, etc. Legăturile hipertext se definesc din meniul Insert->Hyperlink. Se pot
defini următoarele tipuri de legături:
A) legături către o destinaţie ţintă (ancoră) aflată în
acelaşi document cu legătura;
În acest caz, pentru a defini o astfel de
legătură trebuie definită zona ţintă (ancora),
unde se va realiza deplasarea, în momentul
acţionării legăturii. Definirea unei ancore se
realizează din meniul Insert->Bookmark (vezi
figura alăturată). Pentru definirea fiecărei
ancore, trebuie realizată în prealabil
poziţionarea în locul de unde va începe
afişarea, apoi se activează meniul menţionat
anterior.

În FrontPage, zona unde s-a definit ancora va fi marcată printr-un stegulet , care nu va fi vizibil în
momentul afişării paginii într-un program de navigare.
Tag-ul HTML, generat la definirea unei ancore, este:
<A NAME=”nume ancora”></A>
Fereastra pentru definirea legăturii, este prezentată în figura următoare (din partea stângă a ferestrei afişate se
va acţiona asupra comenzii Place in This Document):
Se observă că în zona de mijloc sunt afişate ancorele, care există în documentul curent.
Tag-ul HTML, generat la definirea legăturii, este:
<A HREF=”#nume ancora”>text sau alt obiect de legătură</A>
Exemplu. Se doreşte implemetarea următoarelor legături (vezi şi figura , şi figura ) în fişierul cu numele
exemplu1.htm:
Definire ANCORA INCEPUT
Deplasare la sfârşitul documentului
Deplasare la mijlocul documentului

Definire ANCORA MIJLOC

Definire ANCORA SFARSIT

Deplasare la începutul documentului
Codul HTML generat de FrontPage, pentru aceste legături, sunt:
<body>
<p><a name="ANCORA INCEPUT"></a></p>
<p><a href="#ANCORA SFARSIT">Deplasare la sfarsitul documentului</a></p>
<p><a href="#ANCORA MIJLOC">Deplasare la mijlocul documentului</a></p>
text....
.....
<p><a name="ANCORA MIJLOC"></a></p>
text.....
......
<p><a name="ANCORA SFARSIT"></a></p>
<p><a href="#ANCORA INCEPUT">Deplasare la începutul documentului</a></p>
</body>
b) legături către alte documente, sau către alte destinaţii ţintă (ancore) din alte documente. Ancorele se definesc după
acelaşi principiu prezentat la a), iar pentru definirea legăturii se va alege Existing File or Web Page, din fereastra
afişată de meniul Insert->Hyperlink. În figura de mai jos, este exemplificat modul de definire al unei legături
dintr-un fişier nou, în fişierul exemplu1.htm, la sfârşitul acestuia.
Ancora dela sfarşitul documentului exemplu1.htm, se va alege prin
invocarea butonului Bookmark (vezi anterioară şi figura alăturată).
Tag-ul HTML, generat pentru această legătură este:
<a href="exemplu1.htm#ANCORA SFARSIT">Legătura catre
fisierul exemplu1.htm la sfarsit</a>

c) legături către alte adrese internet. Se definesc în caseta Adress, din fereastra afişată de meniul Insert->Hyperlink.
Exemplu de cod HTML, pentru definirea de legături către adrese internet:
<a href="http://www.ase.ro">legătura către site-ul ASE</a>
Pentru definirea unei legături către o adresă de poştă electronică, se poate utiliza şi comanda E-mail Adress,
din aceeaşi fereastră, sau la secţiunea Adress, se va tasta o adresă de e-mail, astfel: mailto:adresa. Exemplu:
Dacă doriti sa lasati un mesaj clic <a href = "mailto:fm@mailcig.ase.ro"> aici </a>

Formulare

Un formular dintr-o pagină Web, este un obiect, prin care se asigură

comunicarea interactivă între vizitatorul unei pagini şi deţinătorul acesteia.
Deţinătorul paginii poate stoca şi prelucra informaţiile recepţionate prin
intermediul formularului cu ajutorul unui sistem de gestiune a bazelor de
date, scripturi CGI sau alte tipuri de programe. Cea mai simplă formă de
transmitere şi recepţionare a informaţiilor dintr-un formular, este prin e-
mail, variantă care nu necesită cunoaşterea vreunui limbaj de programare,
sau lucrul cu SGBD-uri.
Formularele se inserează în pagină din meniul Insert->Form, meniu care
dispune de submeniuri pentru inserarea tuturor categoriilor de obiecte
specifice unui formular (vezi figura alăturată). Formularul propriu zis se
inserează din submeniul Form. Oricum, chiar dacă nu se inserează explicit,
un formular din acest submeniu, odată cu introducerea primului control,
se adaugă automat şi un formular.
Formularul şi fiecare tip de control dispun de un set de proprietăţi specifice, prin care se definesc anumiţi
parametrii de lucru ai acestora. Proprietăţile formularului se afişează din meniul Insert->Form->Form Properties,
după poziţionarea prealabilă în cadrul acestuia sau clic dreapta undeva în ineriorul formularului şi opţiunea
Form Properties. Proprietăţile unui formular sunt:
 File Name – specificarea
unui fişier din site, care va
recepţiona conţinutul
formularului (necesită
instalarea componentei
FrontPage Server Extension);
aşa cum se observă din
exemplul captat în figura
alăturată, conţinutul
formularului se va salva în
fişierul form_results.csv, din
folder-ul _private, din
structura site-ului. Fişierele
cu extensia .csv se pot
vizualiza şi modifica cu
Microsoft Excel;
 E-mail adress – definirea unei adrese de poştă electronică, unde va fi recepţionat conţinutul formularului;
 Send to database – transimterea conţinutului formularului către o bază de date;
 Send to other – transmiterea conţinutului formularului către un program special de prelucrare a acestuia,
cum ar fi: script CGI, script ASP, etc.
 Form name – numele intern al formularului;
 Target frame – cadrul în care se va afişa formularul;
Tag-ul html generat, este:
<FORM NAME=”Nume” ACTION=”adresa internet unde se va expedia formularul”>
.....definiţii de controale
</FORM>
FrontPage adaugă automat unui formular
nou, un buton de comandă pentru
transmiterea informaţiilor conţinute de
acesta după completare (Submit), şi un
buton de comandă pentru anularea
informaţiilor conţinute la un moment dat
de formular (Reset), în vederea reintroducerii. Denumirile acestor butoane se pot schimba, din lista cu
proprietăţi a acestora. Utilizatorul îşi poate introduce controalele pe care le doreşte în formular, în chenarul
marcat cu linie punctată (vezi figura de mai sus), pentru a evita adăugarea accidentală (dacă se adaugă un
control în afara chenarului, se va adăuga un nou formular) a mai multor formulare în pagină, dacă acestea nu
sunt necesare.
Aşa cum s-a arătat, fiecare tip de control dispune de un set de proprietăţi, care pot fi afişate, prin selectarea
controlului, apoi una din următoarele variante: meniul Format->Properties, clic dreapta pe control şi opţiunea
Form Field Properties, combinaţia ALT+ENTER, sau dublu clic pe acesta. Pentru anumite controale se poate
defini şi un set de reguli de validare (constrângeri) care să acţioneze asupra informaţiilor din acestea, în
momentul în care se încearcă editarea conţinutului acestora. Aceste reguli sunt utile pentru a limita pe cât
posibil greşelile de completare a formularului, în scopul obţinerii unor informaţii cât mai exacte.
Controalele uzuale care se pot insera într-un formular sunt:
 Casetă de text (Textbox) –
utilizabilă pentru tastarea unui şir de
caractere, numere, etc.
Proprietăţile unei casete de text sunt:

 Name – numele intern al

controlului, sub care poate fi referit
din pagina web; este o proprietate
comună pentru toate tipurile de
controale;
 Initial value – valoarea implicită
(predefinită) a controlului;
 Width in characters – lungimea
afişată a controlului;
 Password field – se poate opta pentru mascarea informaţiilor introduse (Yes) prin intermediul unui caracter
generic, sau afişarea în clar a acestora (No). Mascarea (ascunderea) caracterelor introduse, este utilă atunci
când se doreşte ca anumite informaţii introduse să nu poată fi citite de persoanele din jurul celei care se află
la calculator, cum ar fi spre exemplu o parolă de acces.
 Tab order – este o proprietate comună tuturor controalelor unui formular, şi se referă la ordinea de vizitare
a acestora în cadrul formularului.
Din butonul de comandă Validate, se activează fereastra unde se pot defini reguli de validare, pentru fiecare
control:
 Data type – stabileşte tipul de informaţie acceptat în caseta de text: Text (orice caracter), Integer (numere
întregi), Number (orice număr);
 Text format – stabileşte modul de afişare al conţinutului casetei de text, în cazul în care proprietatea Data
Type are valoarea Text:

Letters (litere), Digits (cifre), Whitespace (spaţii), Other (alte caractere);

 Data Length – stabileşte lungimea minimă (Min length) sau maximă (Max length) acceptată şi dacă este
obligatorie completarea conţinutului casetei de text.
 Data Value – stabileşte dacă valoarea conţinută de control, trebuie să respecte anumite condiţii de
comparare, pentru a fi acceptată. Condiţiile se definesc cu ajutorul operatorilor de comparare cunoscuţi: >
(Greather than),< (Less than),>= (Greather than or equal to),<= (Less than or equal to),= (Equal to),<> (Not equal
to). În cazul în care trebuiesc respectate două conţiţii, se utilizează operatorul And must be.
 Caseta de text de dimensiuni mari (Text Area) –
nu dispune de proprietatea Password field, în schimb
mai are o proprietate suplimentară faţă
de o casetă de text obişnuită, numită Number of Lines, care stabileşte numărul de rânduri ale casetei.
 Caseta de validare (Checkbox) – control cu două
stări: selectat (proprietatea Initial state: Checked)
sau neselectat (proprietatea Initial state: Not checked).
Proprietatea Value, stabileşte valoarea internă a
controlului în cazul în care acesta este selectat.
Exemplu de utilizare:

 Butonul de opţiune (Radio button) – control cu două stări,

asemănător ca funcţionalitate cu caseta de validare, cu precizarea că
butoanele de opţiune, pot fi grupate, în aşa fel încât utilizatorul să
poată selecta o variantă din mai multe posibilităţi (vezi exemplul).

Pentru a realiza această grupare, toate

butoanele de opţiune din cadrul unui
grup trebuie să primească acelaşi nume
(proprietatea Name). Faţă de caseta de
validare, proprietatea Initial State, are
valorile Selected, atunci când butonul este
selectat şi Not selected, atunci când nu este
selectat.

 Grupul de opţiuni (Group box) –

realizează gruparea automată a
butoanelor de opţiune, nemaifiind
necesară intervenţia utilizatorului
pentru a realiza această grupare.

 Lista de valori (Drop Down Box) – îmbracă Exemplu de lista simplă:

două forme: lista simplă de valori şi lista
derulantă de valori.
Proprietăţile acestui control sunt:
 coloana Choice – numele fiecărei variante a
listei;
 coloana Selected – indică dacă varianta este Exemplu de listă derulantă:
selectată implicit (Yes) sau nu (No);
 Height – dacă are valoarea unu, controlul va
fi de tip listă derulantă de valori; dacă este mai
mare de unu, controlul este de tip listă simplă
de valori;
 Allow multiple selections –
stabileşte dacă se pot selecta
simultan mai multe variante
din lista afişată. Dacă are
valoarea Yes, controlul va fi
de tip listă simplă de valori,
indiferent de valoarea
proprietăţii Height.
 Butoanele Add, Modify,
Remove – permit adăugarea,
modificarea respectiv
ştergerea unei variante;

 Butoanele Move Up, Move Down – permit schimbarea ordinii variantelor în cadrul listei.

 Butonul de comandă
(Push Button) – creează un
buton, care în momentul
acţionării, poate executa:
 acţiune definită de
utilizator;

 trimiterea (proprietatea Submit) conţinutului formularului către locaţia internet, precizată în

proprietatea ACTION a formularului;
 anularea (proprietatea Reset) conţinutului curent al formularului, în vederea introducerii altor date.
Proprietatea Value/Label stabileşte textul afişat de buton.

Crearea tabelelor

Tabelele, se inserează în FrontPage din meniul Table->Insert->Table. Celulele unui tabel dintr-o pagină WEB,
pot conţine orice tip de informaţie: text, imagini, legături hipertext, alte tabele, etc. Unele caracteristici ale
unui tabel se pot stabili chiar de la crearea acestuia:
 Size – stabileşte
numărul de rânduri
(Rows) şi numărul de
coloane (Columns);
 Layout – elemente
referitoare la alinierea
tabelului (Alignment) pe
centru (Center), la
stânga (Left), la dreapta
(Right); Cell padding –
spaţiul din jurul
conţinutului fiecărei
celule; Cell spacing –
spaţiul dintre celule;
Specify width –
dimensiunea tabelului,
raportată la
dimensiunea ferestrei
(In percent), sau
dimensiune fixă a
acestuia în pixeli (In
pixels), indiferent de
suprafaţa ferestrei.
Similar se stabileşte
înălţimea, din
proprietatea Specify
Height;
Figura 6. 9 Properietăţile unui tabel

 Borders stabileşte caracteristicile globale ale bordurii (contururilor) tabelului; Size – grosimea bordurii
tabelului; Color – culoarea de bază a bordurii tabelului; Light Border şi Dark Border stabilesc două nuanţe ale
bordurii tabelului care vor forma culoarea bordurii tabelului.
 Inserarea de rânduri (Rows) şi coloane (Columns) se
realizează din meniul Table ->Insert ->Rows or Columns,
caseta Number of rows. Above selection va insera rânduri
deasupra, Below selection, dedesupt, similar existând
opţiuni şi pentru coloane de inserare la stânga (Left of
Selection), respectiv la dreapta (Right of Selection).
 Inserarea unei singure celule, se realizează din
meniul Table->Insert->Cell.

 Titlul tabelului, se stabileşte din meniul Table->Insert->Caption.

 Unirea mai multor celule într-una singură, se realizează prin selectarea celulelor de unit, apoi se activează
meniul Table -> Merge Cells.
 Împărţirea uneia sau mai multor celule în mai
multe se realizează din meniul Table ->Split Cells
(vezi figura alăturată). Se poate opta pentru
împărţire în mai multe coloane (Split into Column)
sau în mai multe rânduri (Split into rows). Numărul
acestora se stabileşte în caseta Number of Columns
pentru împărţirea în coloane, şi Number of Rows,
pentru împărţirea în rânduri.
 Stabilirea caracteristi-
cilor uneia sau mai
multor celule, se
realizează prin selectare şi
apoi activarea meniului
Table->Table Properties->
Cell:
 Horizontal alignment –
alinierea conţinutului
celulei din punct de
vedere orizontal: la
stânga (Left), la dreapta
(Right), pe centru (Center),
la stânga şi la dreapta
(Justify);

 Vertical alignment – alinierea conţinutului celulei din punct de vedere vertical: în partea de sus a celulei
(Top), în partea de jos (Bottom), în centru (Middle);
 Header Cell – celula face parte din antetul tabelului;
 No Wrap – dacă este marcată, conţinutul celulei nu se va scrie pe mai multe rânduri, iar dacă acesta nu
încape în dimensiunea celulei, aceasta va fi redimensionată pe orizontală atât cât este nevoie;
 Use background picture – stabileşte un fişier imagine, care va fi afişat în fundalul celulei;
 Background color – culoarea fondului unei celule;
 Rows spaned – numărul de rânduri pe care âl ocupă celula;
 Columns spaned – numărul de coloane pe care îl ocupă celula;
 Borders – stabileşte culoarea bordurii (Color);
 Specify width, specify height – se stabileşte lăţimea şi înălţimea celulei.

Caracteristicile unui tabel se modifică din meniul Table->Table Properties->Table, fereastra afişată fiind cea din
Figura 6. 9Error! Reference source not found..
6.3.10 Alte co mpone nte we b

Pot fi adăugate din meniul Insert->Web

Component. În figura alăturată se pot
vizualiza o parte din opţiunile
disponibile.

Efectul de text defilant.

Se realizează din opţiunea
Marquee (tag-ul HTML are
acelaşi nume).
Principalele opţiuni ce se
pot configura:
• Text – textul care
va defila;
• Direction – direcţia
din care defilează
textul;
• Speed – viteza de
defilare;
• Behavior – modul de defilare a textului: Scroll – doar într-o direcţie, Alternate – când se termină un
ciclu de defilare într-o direcţie se reia din direcţia opusă;
• Size – dimensiunea casetei textului defilant;
• Repeat – numărul de reluări ale defilării textului. Opţiunea Continuosly se foloseşte pentru defilarea
infinită a textului;
• Background color – culoarea de fond.

Butoane de comandă cu efecte prestabilite.

Se integrează în pagină din

opţiunea Interactive Button.
Acestea au deja prestabilite
efecte care se activează în
anumite situaţii (de exemplu
se schimbă culoarea de afişare
a textului din butonul de
comandă la trecerea mouse-
ului pe deasupra sau la
acţionarea acestuia) şi imagini
de fond. Configurarea acestor
butoane de comandă se
realizează prin intermediul a
trei secţiuni, afişate sub forma
a trei ferestre. Astfel, în
secţiunea Button (vezi
imaginea alăturată), se pot
configura următoarele
opţiuni:

• Buttons – Forma butonului de comandă. Se alege din lista prestabilită de variante;

• Text – textul afişat pe butonul de comandă;
• Link – legătura hipertext activată la acţionarea butonului.
Secţiunea Font permite
stabilirea câtorva caracteristici
referitoare la caracterele cu
care este scris textul afişat de
buton (vezi şi imaginea
alăturată):
• Font – stabileşte setul
de caractere utilizat;
• Font Style – stabileşte
stilul de afişare al
caracterelor (Italic-
înclinat, Bold-îngroşat,
Bold Italic-îngroşat şi
înclinat);
• Size – dimensiunea
caracterelor;

• Hovered Font Color – stabileşte culoarea de afişare a textului din butonul de comandă la trecerea cu
mouse-ul pe deasupra acestuia;
• Pressed Font Color – culoarea de afişare a textului din butonul de comandă în momentul acţionării
acestuia;
• Original Font Color – culoarea implicită de afişare a textului din butonul de comandă;
• Horizontal Alignment – alinierea pe orizontală a textului afişat de butonul de comandă;
• Vertical Alignment – alinierea pe verticală a textului afişat de butonul de comandă;
Secţiunea Image, configurează câteva
aspecte legate de imaginea afişată de
butonul de comandă (vezi figura
alăturată), din care cele mai importante
sunt:
• Width – lungimea butonului de
comandă;
• Height – înălţimea butonului de
comandă;
• Maintain proportions – în cazul
modificării uneia din opţiunile
anterioare, se redimensionează
proporţional şi cealaltă
caracteristică;
Integrarea unei foi de calcul, grafic sau tabel pivot în pagina web

Se realizează din opţiunea Spreadsheet and

Charts, fiind puse la dispoziţie trei
opţiuni:

• Office Spreadsheet – pentru inserarea unei foi de calcul având aceleaşi caracteristici şi funcţionalităţi cu
a unei foi de calcul Excel, aceasta putând fi de altfel editată la alegere chiar în Excel, printr-un singuri
clic pe opţiunea .

Figura 6. 10 Foaie de calcul inserată într-o pagină web

• Office Chart – integrează în pagina web un grafic, opţiunile de configurare, fiind asemănătoare cu cele
de la crearea unui grafic Excel. Definirea unui grafic se realizează în trei paşi:
a. se alege sursa de date a graficului;
Pentru a utiliza date dintr-o foaie de
calcul aflată în pagina web, se alege a
treia opţiune (Data from the following page
item). În imaginea alăturată se observă
modul de selectare a foii de calcul
definită anterior (din Figura 6. 10).
b. În secţiunea Data Range se stabilesc
seriile de date reprezentate în grafic. Aşa
cum se reamrcă din figura alăturată, s-a
definit o serie de date pentru afişarea
comparativă a valorilor produselor.

c. Ultimul pas, presupune alegerea tipului

de grafic. În figura alăturată se pot
oberva toate categoriile de grafice
disponibile. Pentru graficul prezentat ca
exemplu, s-a ales varianta afişării sub
formă de coloane.

• Office Pivot Table – integrează în pagina web un tabel pivot, tabel care permite o vedere
multidimensională asupra datelor provenind dintr-un tabel Excel sau altă sursă de date. Tabelele
pivot sunt familiare celor care le utilizează în mod frecvent în Microsoft Excel, sau celor familiarizaţi
cu cuburile OLAP 6 gestionate de alte produse informatice.
6.3.11 Efecte aplicate asupra une i pag ini sau unor
obiec te dintr-o pagină
6.3.11.1. Efecte de tranziţie aplicate unei pagini.
Se stabilesc din meniul Format-
>Page Transition, opţiunile ce
trebuiesc configurate fiind
prezentate în figura alăturată.
În secţiunea Event se stabileşte
momentul în care se aplică un
6
OLAP (On Line Analitycal Processing) – tehnologie de analiză multidimensională a datelor
efect:
• Page Enter – la afişarea
conţinutului paginii;

• Page Exit – la părăsirea paginii;

• Site Enter – la afişarea primei pagini a unui site;
• Site Exit – la părăsirea site-ului;
Efectele propriu-zise de tranziţie se stabilesc din caseta Transition effect, iar durata de aplicare a unui efect, din
caseta Duration.
6.3.11.2. Efecte/acţiuni aplicate obiectelor dintr-o pagină.
Aplicarea unui efect sau a unei acţiuni unui obiect
dintr-o pagină, se realizează prin selectarea
obiectului respectiv şi apoi activarea meniului
Format->Behaviors. Acţionarea acestui meniu are ca
efect activarea panoului de comenzi rapide Behaviors
(vezi figura alăturată). În cadrul acestuia există două
butoane de comandă: Insert, pentru adăugarea unei
acţiuni şi Delete, pntru eliminarea unei acţiuni deja
adăugate.
Adăugarea unei acţiuni aplicabile unui obiect
selectat, se realizează practic în doi paşi:
a. se alege mai întâi acţiunea ce va fi aplicată
obiectului selectat;
b. se alege evenimentul la care va fi declanşată
acţiunea selectată anterior.

Exemplu:
Pentru a înţelege mai bine modul de definire al unei
acţiuni, presupunem că avem un text, şi la acţionarea
unui clic de mouse deasupra sa să fie afişat un text
în bara de stare. După scrierea şi selectarea textului,
se alege din panoul Behaviors, opţiunea Set Text şi
apoi Set Text of Status Bar.
După alegerea acţiunii, panoul Behaviors
afişează automat, lista cu evenimente şi
acţiunile asociate acestora. Implicit
evenimentul selectat este onmouseover (la
trecerea cu mouse-ul pe deasupra
obiectului), iar pentru a reacţiona la un
clic de mouse, trebuie să se aleagă
evenimentul onclick.
Similar se pot adăuga şi alte tipuri de
acţiuni asupra obiectelor dintr-o pagină
web (acestea sunt destul de sugestive),
maniera de operare fiind asemănătoare.

6.3.12 Definirea stilur ilor într -o pagină web

În FrontPage, definirea unui stil se realizează din meniul Format->Style, paşii care trebuiesc urmaţi pentru
definirea unui stil nou fiind prezentaţi în figura următoare.

Figura 6. 11 Definirea unui stil nou

În cazul în care se defineşte un stil valabil doar pentru un anumit tag HTML (Figura 6. 11, pasul ), acesta
va fi definit, respectând forma generală de definire a unui stil:

Nume_TAG_HTML.nume_clasa

Stabilirea caracteristicilor stilului se realizează din butonul de comandă Format (Figura 6. 11, pasul
),
acestea putând fi modificate ulterior, de câte ori este nevoie.
Ataşarea unui fişier care conţine stilurile ce vor fi aplicate conţinutului pagii curente, se realizează din meniul
Format->Style Sheet Links.
Modalitatea de aplicare cea mai simplă a unui stil, în FrontPage este utilizarea barei de instrumente
Formatting, aşa cum se poate remarca şi din imaginea următoare.
Figura 6. 12 Aplicarea unui stil asupra unui text