bti-proiectarea paginilor web cu html

8/6/2019 Bti-proiectarea Paginilor Web Cu HTML

http://slidepdf.com/reader/full/bti-proiectarea-paginilor-web-cu-html 1/74

66..11 PPrrooiieeccttaarreeaa ppaaggiinniilloorr WWeebb uuttiilliizzâânndd lliimmbbaajjuull HHTTMMLL

66..11..11 PPrrooiieeccttaarreeaa ppaaggiinniilloorr WWeebb.. CCoonnssiiddeerraaiiii ggeenneerraallee 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 InternetExplorer).Web reprezintă un spaiu abstract de informaie, fiind practic un serviciu de informare care face apel laconceptul de hipermedia. În contextul unui document dat, există o deosebire conceptuală între noiunile dehipermedia şi multimedia.Un document multimedia este un document care poate să conină, atât informaii de natură statică (text,imagini, grafice sau diagrame), cât şi informaii dinamice (sunet, animaie, film). Dacă la acest coninutinformaional se adaugă şi capabilităi de realizare a unor legături între pările componente ale unuidocument multimedia, ceea ce rezultă reprezintă un document hipertext sau document hipermedia.În practică, termenii hipertext şi hipermedia tind să fie considerai similari, deosebirea structurală fiind datăde elementele multimedia (prin formatele grafice, audio şi video) coninute de un document hipermedia.

La modul general, un document hipermedia poate fi identificat prin următoarele caracteristicifundamentale:Forma de vizualizare este dependentă de programul de afişare a informaiilor coninute de documentulrespectiv, în speă, de navigatorul Web;Structura si coninutul documentului trebuie să respecte un format general de reprezentare pentru a se asiguraportabilitatea şi independena de platformă (cele două atribute se referă la necesitatea recunoaşteriidocumentului HTML, indiferent de componenta software şi de echipamentele hardware cu care este dotatsistemul). Acest format de reprezentare este asigurat şi furnizat de limbajul de marcare hipertext HTML. Tehnicile hipertext (hipermedia) pot fi utilizate în diverse aplicaii, precum cările electronice, enciclopediile,sistemele on-line de ajutor, sistemele de învăare asistată de calculator ( CAL – Computer- A ided Learning),

scrierea colaborativă de documente, chioşcurile informaionale interactive, sistemele decizionale etc.Hipertextul reprezintă o formă neliniară de document electronic, fiind considerat o metodă de organizarecomplexă a informaiilor, prin care datele sunt memorate într-o reea de noduri şi legături. Această reeapoate fi parcursă prin intermediul navigatoarelor interactive şi manipulată de un editor structural.Conceptual, hipertextul poate fi definit ca o metodă de prezentare a informaiei, prin care anumite secveneale textului, numite cuvinte de legătură, sunt evideniate în mod special, ca prin accesarea lor să se obinăinformaii suplimentare în legătură cu subiectul ales. Aceasta denotă o tehnică pentru organizarea informaieitextuale într-o manieră sofisticată, neliniară, în vederea facilitării exploatării rapide a unei cantităi mari decunoştine.Cuvintele de legătură prin care se realizează link-urile reprezintă secvene 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 evideniată şi prin modificarea aspectului de afişare a indicatoruluimouse-ului, în momentul în care utilizatorul îl plasează pe secvena de text respectivă. Astfel, pentru explicitarea unei noiuni, prin aceste cuvinte de legătură, se pot obine mai multe nivele dedetaliere a conceptului asupra căruia utilizatorul doreşte să se informeze. De exemplu, plecând de la structuragenerală a arhitecturii unui calculator personal, demersul informaional al unui utilizator care doreşte să sedocumenteze în legătură cu cache-ul primar al sistemului este următorul:



AArrhhiitteeccttuurraa PPCC Unitatea centrală

Echipamente periferice

Microprocesor

Memoria internă

Placa de bază

Memoria RAM

Memoria ROM

Memoria cache

Memoria video

Printer Buffer

Memoria CMOS

Cache primarCache secundar

66..11..22 EElleemmeennttee f f uunncciioonnaallee aallee ddooccuummeenntteelloorr HHTTMMLL.. MMaarrccaattoorrii,, aattrriibbuuttee,, eennttiittăăii Termenul tehnic pentru textul marcat este acela de element, acesta fiind văzut ca o componentă structurală aunui document. Limbajul HTML conine o mare diversitate de astfel de elemente, care poartă denumireaspecifică de ttaagg--uurrii sau mmaarrccaattoorrii. Maniera de identificare a tag-urilor descriptivi, precum şi semanticaacestora, se specifică după următoarea sintaxă generală:

< Nume_tag > Text (Imagine) [< /Nume_tag >]

început de tag sfârşit de tag

Observaie : numele unui tag HTML se încadrează întotdeauna între delimitatorii „<” şi „>”, nu poate începecu o cifră şi nu admite caracterul spaiu.Plecând de la caracterul opional al tag-ului de sfârşit (plasarea acestuia între paranteze drepte), se potdeosebi două tipuri de tag-uri HTML , şi anume:

• Tag singular care conine numai tag-ul de început (Exemplu: <HR> permite trasarea unei liniiorizontale î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 situaii, pentru a ameliora design-ul unei pagini Web, se pot utiliza o serie aattrriibbuuttee (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 combinaia dintreacestea, HTML fiind un limbaj case-insensitive (nu este sensibil la deosebirea dintre majuscule şi minuscule).Însă, în anumite situaii, se recomandă folosirea literelor mici, pentru ca elementele de cod să fie recunoscutede orice program de vizualizare a documentelor Web.Fişierele HTML sunt fişiere text obişnuite, divizate în două pări: antetul (HEAD) şi corpul de text (BODY).Structura generală a unui astfel de document conine următoarele informaii minimale:

<HTML> început program

<HEAD> început antet

<TITLE> Text </TITLE> titlul aplicaiei

</HEAD> sfârşit antet

<BODY>...

</BODY>< /HTML> sfârşit program

corp text



Observaie: Secvena de text editată în tag-ul TITLE, nu reprezintă titlul propriu-zis al aplicaiei Web, ea va fiafişată pe bara de titlu a navigatorului cu ajutorul căruia se vizualizează pagina respectivă. De obicei, întremarcajele <HEAD> şi </HEAD> apar definiii de subprograme (rutine) scrise în limbaje de tip script(JavaScript), definiii de stiluri CSS ori meta-elemente, pentru a ne asigura că sunt analizate şi memorate denavigator, antetul fiind prima informaie 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ă documentulhipertext). Este de reinut faptul că modul de spaiere a tag-urilor nu are importană, spaiile albe (caracterulspaiu, 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 situaiaîn care programul ar conine 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 valoareaimplicită a acelui atribut.

66..11..33 SSaallvvaarreeaa,, vviizzuuaalliizzaarreeaa şşii mmooddiif f iiccaarreeaa uunnuuii ddooccuummeenntt HHTTMMLL 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 (coninând caractereneformatate). După ce a fost editat întregul program, utilizatorul procedează la salvarea fişierului careconine 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 Notepadcu 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.

Accesarefişier HTML

Actualizare fişier HTML

Vizualizare fişier înfereastra navigatorului

În situaia în care utilizatorul designer doreşte operarea unor modificări asupra paginii Web pe care aproiectat-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 dinurmătoarele variante: prin comanda Refresh din meniul View , prin acionarea butonului de comanda cuacelaşi nume, plasat pe bara de instrumente Standard a navigatorului, sau prin activarea tastei funcionale F5.

66..11..44 PPrrooiieeccttaarreeaa ppaaggiinniilloorr WWeebb.. DDeessiiggnn şşii f f uunncciioonnaalliittaattee

6.1.4.1. Aranjarea în pagină şi formatarea documentelor HTML

Cele mai importante tag-uri HTML utilizate pentru acest tip de operaii sunt:<! Text> permite introducerea în program a unui comentariu, care nu va fi afişat în momentul accesăriipaginii Web, dar care poate permite parcurgerea cu uşurină a codurilor din programul HTML. Serecomandă utilizarea comentariilor pentru a fi oferite informaii privitoare la coninutul paginii Web, data şimotivul creării/actualizării acesteia sau pentru a fi explicate anumite construcii 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 cursiveaccentuate)

<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, înnumă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 operaia 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 demarcaie între diferitele informaii coninute dedocumentele HTML. Prezintă următoarele atribute:Size – dimensiunea (grosimea liniei – în puncte tipografice)Color - culoarea liniei, folosind codurile de culoareWidth – reprezintă cât la sută din lăimea ferestrei ocupă linia orizontală Align - alinierea liniei, în situaia în care aceasta nu ocupă întreaga lăime a paginiiNoshade - 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ândurmătoarea semnificaie funcională:

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 pentruacesteaDirection - direcia de deplasare a textului sau a imaginii (Stânga|Dreapta)Behavior - modele de defilare a textului sau a imaginii (defilare continuă prin Scroll, defilare unidirecională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 unorsetă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 WebText – stabileşte culoarea caracterelorLink – 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 situaia î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, culoarealegă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, coninută defiecare culoare. Exemple de coduri hexazecimale asignate unor culori:

2. Navigatoarele de ultimă generaie pot recunoaşte culorile stabilite în paginile Web, şi în situaia în careacestea sunt specificate prin denumirea lor în limba engleză. Exemple de culori accesate prin numeculoare:

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 operaionale la nivelul întregului document HTML. Există însă situaiiîn care designer-ul documentului Web doreşte aplicarea unor formatări, numai la nivelul unei secvene detext din pagina respectivă, situaie î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 multetipuri de fonturi (separate prin virgulă), urmând ca la procesare, navigatorul Web să execute fontul pe care îlrecunoaşte din lista respectivăObservaie : în cazul în care numele fontului este compus din mai multe cuvinte, acesta va fi indicat întreghilimele (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 tipograficePe lângă tag-urile prezentate anterior, într-un document HTML se pot introduce şi o serie de eennttiittăăii,utilitatea majoră a acestora fiind dată de posibilitatea de generare a unor simboluri sau a unor caracterespeciale. Pentru a concepe documente HTML coninând diacritice, se vor utiliza în programul sursăentităile-caracter. Accesarea unei entităi se va realiza prin intermediul referinelor la entităi, folosindu-se construcia sintactică&nume_entitate; În ceea ce priveşte referina la o entitate caracter, aceasta va fi specificată prin codulnumeric al caracterului respectiv, fiind prefixată, în acest caz, de două simboluri: „&#cod_numeric”.Cele mai utile entităi sunt prezentate în tabelul următor:

Simbol

Entitate

Vizualizare Entitate-

caracter Vizualizare

copyright © © Â Â

marcă înregistrată ® ® â â

trademark ™ ™ Ă Ă

mai mic decât < < ă ă

mai mare decât > > Î Î

ampersand & & î î

spaiu Ş Ş linie orizontală — — ş ş



ghilimele " " Ţ

ţ

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 majusculet=a numerotare utilizând caractere minusculet=1 numerotare prin cifre romane utilizând caractere majusculet=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, şianume <LI> (List item).

Listă ordonată (Type=A) Listă

ordonată (Type=1)

Listă dedefiniii

Listă nenumerotată (Type=square)

<DL> permite realizarea unei liste de definiii care presupune specificarea termenilor introduşi şi adefiniiilor acestora, la modul următor:

<DT> pentru introducerea termenilor ce se doresc a fi definii (explicai)

<DD> pentru descrierea propriu-zisă a termenului introdus prin tag-ul anteriorÎn funcie de necesităile designer-ului Web în ceea ce priveşte modalitatea de prezentare a informaiei, într-un document HTML există şi posibilitatea generării de liste imbricate, este vorba despre facilitatea definiriiunei liste într-o altă listă, indiferent de tipul acestora, pe mai multe nivele de ierarhizare a informaiilorprezentate în structurile respective.Un exemplu de liste imbricate, pornind de la prezentarea generală a reelei Internet este prezentat în figura

anterioară. Pentru realizarea în pagina Web a unei astfel de structuri informaionale 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 HTMLHipertextul (hyperlink-ul) reprezintă cea mai importată facilitate în proiectarea paginilor Web, prin faptulcă realizează delimitarea funcională între un document obişnuit şi un document hipermedia. Hipertextulpermite ca, prin „activarea” (executarea unui clic) unui şir de caractere sau a unei imagini, să se vizualizezeconinutul informaional al altor fişiere HTML sau al altor zone aparinând fişierului curent. În raport delocaia fişierului destinaie, către care se generează legătura, există mai multe tipuri funcionale de legături

hipertext , şi anume: legături interne stabilite între zone diferite aparinâ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 moddifereniat, în raport de natura documentului implicat în realizarea hyperlink-ului. Astfel, la sursă, în fişieruldin care se va genera conexiunea, tag-ul Anchor va conine atributul HREF ( Hypertext Ref erence) carepermite specificarea URL-ului ( Uniform R esource Locator) fişierului destinaie, în speă, adresa acestuia. Înceea ce priveşte specificarea destinaiei se va utiliza atributul NAME, prin care se precizează locaie cătrecare se generează legătura respectivă.În cazul lleeggăăttuurriilloorr iinntteerrnnee, sintaxa tag-ului Anchor ( A ) va cuprinde următoarele elemente funcionale:La sursă : <A Href="#cuvânt-cheie"> Text (Imagine) de conectare </A >



La destinaie : < A Name="cuvânt-cheie"> Paragraf intă </A >

Cuvântul cheie reprezintă o informaie comună sursei şi destinaiei, prin care se asigură legătura nemijlocităîntre cele două locaii. Alegerea cuvântului cheie rămâne la latitudinea utilizatorului, fiind de preferat ca acestcuvânt sa fie cât mai sugestiv, tocmai în ideea de a identifica cu uşurină specificul legăturii generate. Prinelementul „paragraf intă” se precizează secvena text care va reprezenta destinaia conexiunii.

Prin exemplul anterior s-a urmărit realizarea unor conexiuni interne între diferitele structuri de informaiiconinute de documentul curent. Astfel, prin activarea legăturii reprezentate de textul FABBV, ca element allistei nenumerotate (de tip circle), se permite deplasarea într-o altă locaie a paginii curente, unde se afişeazăun scurt logos despre facultatea de Finane. Pentru a se permite revenirea în antetul paginii, se va proceda laactivarea link-ului reprezentat de imaginea GIF.O altă aplicaie 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 coninutul 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 ( lleeggăăttuurrii llooccaallee ), sintaxa tag-ului Anchor esteîmbunătăită cu numele, eventual adresa fişierului destinaie:

La sursă : < A Href ="Nume/adresa_fişier HTML#cuvânt-cheie"> Text (Imagine) de conectare</A >

La destinaie : < A Name="cuvânt-cheie"> [Paragraf intă] </A >

În cazul în care paragraful intă nu este precizat în linia de comandă (acesta fiind opional), conexiunea se varealiza automat către antetul documentului destinaie.Exemplul următor relevă realizarea unor legături hipertext între elementele unei liste nenumerotate (de tipsquare) 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 lleeggăăttuurrăă eexxtteerrnnăă, sintaxa tag-ului Anchor se modifică, prin includereaunor elemente funcionale care in de identificarea fişierului destinaie (prin URL-ul acestuia) în structurareelei 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 unprogram de scriere şi expediere ascrisorilor (Microsoft Outlook Express)către destinatarul a cărui adresă estefurnizată în linia de comandă.Exemple de furnizori de servicii Internet :: dnt (Dynamic Network Technologies), digicom, pcnet,euroweb, xnet, ase, etc. Exemplu deadresă e-mail: [email protected]

6.1.4.4. Includerea în documentele HTML a elementelor multimedia. Imagini grafice,formate video şi formate audio

În funcie de modul în care se comportă în timpul vizualizării în fereastra navigatorului Web, în speă, dedinamismul lor, se poate vorbi despre mai multe tipuri de imagini , şi anume:1. imagini statice, simple sau purtătoare de hyperlink-uri2. imagini care asigură fundalul paginilor Web3. imagini dinamice (animate – filme sau clipuri)4. imagini reactive ce conin zone generatoare de legături hipertext1. Pentru a introduce în pagina Web o iimmaaggiinnee ssttaattiiccăă 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 semnificaie funcională:



Src – specifică numele fişierului care furnizează imaginea grafică sau, după caz, specificatorul de fişier alacestuia (adresa completă a fişierului); există anumite tipuri specializate de fişiere ce conin imagini, deexemplu: 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ălimea ş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 utilizatoruldoreşte alinierea imaginii pe mijlocul paginii Web, se poate apela, fie la tag-ul DIV, cu valoarea Center aatributului 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 linieirespective (se măsoară în puncte tipografice) Alt – permite afişarea unei etichete explicative în momentul plasării indicatorului mouse-ului pe suprafaaimaginii

<IMG Src=”Graduate.WMF”

Height=150 Width=150

Align=Left

Border=2> H e i g h t ( 1 5

0 p i x e l i )

Width (150 pixeli)

Pentru ca o imagine simplă să se transforme într-o iimmaaggiinnee ggeenneerraattooaarreeaa ddee hh y yppeerrlliinnk k --uurrii, este necesarca aceasta să funcioneze 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ândde la imaginea setată prin tag-ul IMG (activarea hyperlink-ului se realizează prin executarea unui clic în oricelocaie a imaginii).

2. În afară de stabilirea unei culori de fundal, un utilizator are posibilitatea de a seta o iimmaaggiinnee ppee f f uunnddaalluull ppaaggiinniiii 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 coninutului informaional al paginii respective. Pentru aceastăoperaie 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 fundalimaginea 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 iimmaaggiinniilloorr ddiinnaammiiccee, presupune utilizarea tag-ului Image (IMG), dar cuatributul 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 încazul unei imagini statice. Practic, prin accesarea unui cuvânt de legătură, navigatorul Web apelează unanumit 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 iimmaaggiinniillee rreeaaccttii v v ee, careprezintă facilitatea de a genera legături hipertext cu alte resurse (de regulă, documente HTML), prinactivarea unor locaii speciale ale acestei imagini, cunoscute sub accepiunea de zone reactive.De exemplu, o pagină Web de index (pagina principală) poate să conină o imagine reactivă, cu mai multezone „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, carereacionează la plasarea indicatorului mouse-ului pe locaia respectivă, comportând-se, practic, ca unhyperlink ce asigură legătura cu alte resurse informaionale. 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, laimaginea reactivă, şi nu la pagina Web, în ansamblul ei. Raportul care se stabileşte între coordonateleecranului şi cele ale imaginii reactive depinde nemijlocit de rezoluia monitorului, exprimată în pixeli.

Numărul de puncte necesare pentru construirea unei zone reactive depinde, în mod nemijlocit, de formageometrică a acesteia, astfel:

• forma rectangulară se reprezintă prin două puncte: punctul din colul stânga superior şi cel dindreapta inferior al formei rectangulare

• cercul prin două puncte: punctele reprezentând centrul cercului şi raza acestuia• poligonul se descrie prin punctele de intersecie a laturilor poligonului

Definirea ansamblului zonelor reactive se realizează cu ajutorul tag-ului MAP, prin care imaginea este,practic, asimilată unei hări, ce conine mai multe zone sensibile la hyperlink (zone reactive). Prin MAP,acestei „hări” i se va atribui un nume generic, la care se va face apel în momentul definirii acesteia caimagine 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 deparametrare 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 >

Semnificaia 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ândlăimea şi înălimeaHref – indică adresa documentului destinaie sau adresa e-mailNoref – inhibă legătura hipertext stabilită între zona reactivă şi locaia destinaie

Alt – permite setarea unei etichete explicative, care se activează în momentul plasării mouse-ului în orice

locaie 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 ), cuatributele specifice acestuia şi, în plus, cu eticheta USEMAP, prin care se introduce numele generic alzonelor reactive (stabilit prin tag-ul MAP), precedat de simbolul diez. În fapt, Usemap apelează un programspecializat 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 careconine trei zone reactive, de la care se apelează o adresă e-mail şi se generează conexiuni către aledocumente Web.

Schema conceptuală care prezintă succint natura legăturilor hipertext care se vor genera prin aceastăaplicaie, este următoarea:

• de la zona reactivă reprezentând o formă rectangulară se activează programul de gestiune a poşteielectronice (Microsoft Outlook sau Microsoft Outlook Express), prin care se va expedia un mesajadresat decanatului facultăii CIG



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:[email protected] ">< 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, îlreprezintă f f oorrmmaattuull aauuddiioo (sunetul). În anumite cazuri, utilizatorii paginilor Web pot opta pentru setareaunui 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 fereastraasignată de navigator acelui document. Pentru a spori atractivitatea paginilor Web şi a organiza mai eficientinformaiile coninute de acestea, Web designerii pot recurge la tehnica „subferestrelor”, reprezentând un setde seciuni în fereastra navigatorului, cunoscute sub accepiunea de cadre.Conceptul de cadru (frame) constă în divizarea ecranului în mai multe zone, ce pot fi asimilate unorferestre, 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 utilizatoruluimodificări punctuale la nivelul unei ferestre, fără a le afecta pe celelalte, fapt ce măreşte considerabilposibilităile de informare ale acestuia, pe domenii de interes.



În funcie de coninutul informaional al documentelor găzduite de aceste ferestre, ele vor fi prevăzute cubare de defilare care să permită deplasarea pe orizontală şi/sau pe verticală în interiorul cadrului, utilizatorulputâ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 obinerea unui ecran multifereastră , în care se pot vizualizasimultan mai multe documente HTML.În programul HTML ce permite definirea unei structuri de cadre, tag-ul BODY (corp de text) va fi înlocuitcu tag-ul FRAMESET, care va include mulimea de frame-uri, coninând documentele ce vor fi afişate denavigatorul Web.

<FRAMESET Cols/Rows = v 1,v 2...v n 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 valoareaimplicită Yes), pentru care se poate stabili o anumită culoare (atributul Bordercolor ). Valorile v 1, v 2... v n 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 spaiu pentru elementele structurii decadre 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, iarurmătoarelor două cadre li se va atribui spaiul 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 situaii, pentru a ameliora designul unui ecran multifereastră, utilizatorul poate apela la definireaunui set de cadre, atât pe verticală, cât şi pe orizontală, proiectând în acest sens, o structură imbricată de tag-uriFRAMESET.Descrierea efectivă a unui cadru se realizează cu ajutorul tag-ului FRAME, prin care sunt stabilitedocumentele 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>

Semnificaia atributelor specificată în linia de comandă este următoarea: Src – specifică numele fişierului care conine pagina Web ce va fi găzduită de cadrul respectiv; în situaia

în care fişierul nu se regăseşte în folderul curent, se va specifica întreaga cale de acces (URL-uldocumentului HTML);

Name- numele cadrului este un atribut opional, însă introducerea lui este obligatorie, în situaia în careutilizatorul doreşte realizarea unor hyperlink-uri către documentul HTML găzduit de cadrul respectiv; înacest 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 informaiilor coninute de un cadru, putând lua valorile

Yes sau No (valoarea implicit setată este Yes);

3 Numele documentului HTML care conine structura de cadre



Marginwidth – valoarea n1 denotă spaierile pe orizontală dintre coninutul unui cadru şi margineaacestuia;

Marginheight – valoarea n2 denotă spaierile pe verticală dintre coninutul unui cadru şi margineaacestuia;

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 conine o structură de cadre verticale şi orizontale, urmăreşte afişareaunor informaii referitoare la un scurt istoric al ASE-ului, precum şi la structura organizatorică şiactivitatea didactică a acestuia, Structura informaională a primului cadru vertical (Frame2) cuprinde maimulte 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, cadrulFrame3 va fi un cadru vid.

Pentru realizarea legăturilor hipertext, coninute de frame2 s-a utilizat tag-ul ancoră, cu atributul Target careindică cadrul destinaie (frame2) al legăturilor respective.

În funcie de necesităile sale de informare, dar şi de designul paginilor pe care le proiectează, utilizatoruldoreş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 uneipagini Web în fereastra unui alt document HTML. Crearea unei astfel de structuri se face prin tag-ulIFRAME, care prezintă, în principiu, aceleaşi atribute ca şi FRAME, exceptând atributul Noresize (peconsiderentul 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, înspeă, înălimea ş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 coninut informaional: un istoric al ASE-ului (frame1) şi un formular Web (frame2).



6.1.4.6. Definirea de tabele în documentele HTMLSintaxa 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>

Semnificaia atributelor ce permit formatarea unui tabel este următoarea:Border – specifică grosimea chenarului de încadrare a tabeluluiCellpading – reprezintă spaiul între coninutul informaional al celulei şi marginile celuleiCellspacing – reprezintă spaiul dintre celulele tabelului

Width – specifică, în procente, cât la sută din suprafaa ferestrei ocupă tabelulBgcolor – stabileşte culoarea de fundal a tabelului Align – modalitatea de aliniere a tabelului în pagina WebFrame – 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 atabelului; 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 înpartea 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>

Informaiile coninute de prima linie a tabelului furnizează coninutul informaional al antetului tabelului, încare textul este , în mod implicit, aliniat pe centru şi afişat cu caractere aldine (îngroşate). Antetul unui tabelse 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 valorileStânga/Centrat/Dreapta) a coninutului celulelor plasate pe prima linie a tabelului

Colspan |Rowspan - în funcie de modul în care Web designerul doreşte să vizualizeze informaiileconinute 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ălimea celulelor dinantet

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 atabelului, celelalte linii respectând setarea generică stabilită prin tag-ul TABLENowrap - dimensionarea celulelor din tabel se realizează automat la lungimea maximă a textului coninut deacestea. Însă, dacă textul depăşeşte dimensiunea de 64 de caractere, navigatorul îl va afişa pe mai multerânduri. Atributul Nowrap al tag-ului TR permite tocmai inhibarea acestei reguli, afişând textul pe un singurrâ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 spaiu, prin entitatea <TD Atribute … > </TD>

Pentru definirea liniilor din tabel, se foloseşte tag-ul TR ( Table R ow), 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 conine informaii 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ătoareasintaxă:

<TD Valign=Top|Middle|Bottom Align=Left|Center|Right Colspan=n Rowspan=m Width=lHeight=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 coninute 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 excepia cazului în care atributele de aliniere vor fi redefinite în tag-ul TD, devenindastfel prioritare, în raport setările realizate la definirea liniei prin TR.Exemplu de tabel Web, ce conine informaii 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 conine următoarele tag-uridescriptive:

<HTML><BODY>

<TABLE

Align=center BgColor=yellow Border=8 CellPadding=7 CellSpacing=5Frame=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 HTMLFormularul Web sau formularul electronic reprezintă o interfaă care permite interaciunea cu utilizatoriipaginilor 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 – interfaa sau standardul „porii” comune).

Interfaa (scriptul ) CGI reprezintă, practic, o specificaie care extinde Protocolul de Transfer Hypertext(HTTP) pentru a permite serverelor Web să interacioneze dinamic cu staiile de lucru client. În acest mod,se asigură interaciunea server-navigator Web, în sensul personalizării rezultatelor, prin diverse prelucrăriasupra elementelor coninute de paginile Web.Interaciunea dintre server şi navigatorul Web poate fi prezentată schematic astfel:



4

5

3

2 5

1

1. De la o staie de lucru, un utilizator solicită serverului un formular electronic, această cerere fiindformulată prin intermediul unui navigator (browser) Web

2. Serverul trimite utilizatorului formularul spre completare3. După ce au fost introduse toate datele în formular, acesta este retransmis serverului Web4. În etapa următoare serverul transferă datele coninute de formular unui program specializat în

prelucrarea acestora, numit program CGI5. După procesarea datelor din formular, rezultatele execuiei programului CGI, vor fi transmise, într-un

format personalizat (format text) serverului Web care, la rândul său, trimite un mesaj de confirmarebrowser-ului Web

În situaia în care datele din formular vor fi transmise prin poşta electronică (prin e-mail), succesiuneaoperaiilor este următoarea:

• utilizatorul completează cu date toate câmpurile din formular, după care datele vor fi transmise cătreserverul Web, prin acionarea 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 aplicaiei de poştă electronică Outlook Express



• din fereastra aplicaiei Outlook Express (seciunea mesajelor primite Inbox), se extrag de pe serverul

Web mesajele adresate utilizatorului, acionând butonul Send/Receive

• prin acionarea butonului Send/Receive se vizualizează (prin caseta Outlook Send/Receive Progress)procesul de extragere a mesajelor de pe serverul Web. Aciunea este finalizată prin depunereamesajelor în seciunea Inbox, de unde acestea pot fi deschise şi consultate (prin acionarea unuidublu-clic pe pictograma aferentă mesajului - pictograma plic)

• se procedează la deschiderea fişierului ataşat ce conine datele din formular

• în etapa următoare, sistemul propune, prin intermediul unei casete de dialog (Opening Mail Attachment), fie deschiderea fişierului coninând mesajul primit (opiunea Open it), fie salvarea acestuia pe disc, în locaia dorită de utilizator (opiunea Save it to disk)



• datele din formular pot fi vizualizate prin fereastra aplicaiei Notepad.

Multe pagini Web care conin formulare folosesc un program CGI, cu scopul de a procesa datele introdusede utilizatori. Natura exactă a interaciunilor 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 unbuton de înscriere/acceptare a unei pagini Web, ce conine formularul unei declaraii scrise în HTML.Programul CGI transportă informaia între serverele Web şi aplicaiile back-end , cum ar fi bazele de date şisistemele de e-mail. În realitate, posibilitatea de interogare a bazelor de date printr-un formular Web, darşi facilitatea de direcionare a informaiei către un sistem de e-mail reprezintă două dintre cele mai cunoscuteutilizări ale unui CGI.

Formularele pot varia e la o simplă casetă text – care permite introducerea unui şir de caractere, cu rol deexpresie de interogare -, până la o structură complexă, cu multiple opiuni, oferind puternice facilităi detransmitere 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_formularTarget=nume_cadru > … </FORM>

Semnificaia atributelor ce permit crearea unui formular Web este următoarea:Method – specifică modul de transmitere a datelor către serverul Web. Din acest punctde vedere, există două maniere prin care informaiile coninute de un formular pot fi transmise, de lanavigatorul care vizualizează formularul, la serverul Web, situat într-o anumită locaie a reelei Internet.

Atunci când datele introduse într-un formular sunt incluse în URL-ul destinaie 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 destinaie



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, informaie care va fi preluată deserverul Web, dar nu va fi vizualizată de browser-ul Web4. 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 diferiteresurse informaionale. Formularul va conine câmpuri de date pentru introducerea numelui şi prenumelui, aparolei 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 opiuni . Pentru a realiza meniuri cu opiuni multiple, se recurge la elementul SELECT, cuurmătoarea sintaxă:

<SELECT Name=”nume_control” Size=”n” Multiple> … </SELECT>

Prin atributul Size, utilizatorul specifică numărul de opiuni implicit afişate, iar atributul Multiple oferăfacilitatea de a selecta din listă mai multe opiuni posibile (pentru selecia continuă - tasta CTRL, iar pentrucea discontinuă - tasta SHIFT).Opiunile din meniul derulant se introduc cu ajutorul tag-ului OPTION, astfel:

<OPTION Selected Disabled> Nume_element_listă

Atributul Selected stabileşte opiunea implicit afişată în momentul vizualizării formularului în fereastranavigatorului. În lipsa acestui atribut, va fi selectată automat prima opiune din meniul derulant. În cadrulunui tag Option poate fi utilizat şi atributul Disabled, indicând faptul că acea opiune este inhibată.Exemplu : forma de învăământ se va selecta dintr-o listă derulantă ce afişează implicit o singură opiune(Size=1), iar pentru limba străină sunt afişate 3 opiuni din listă (Size=3) şi, în plus, se permite o seleciemultiplă (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 aciuni, în momentul completării unui formular Web.

<INPUT Type=”Checkbox” Name=”nume_control” Checked Disabled>

Atributul Checked permite utilizatorului să stabilească care este opiunea (caseta) implicit selectată.

Exemplu : crearea unui grup de casete de validare din care utilizatorul să selecteze aplicaiile pe care lecunoaşte, exceptând opiunea MS Access, care este inhibată:



7. butoanele radio funcionează în acelaşi mod ca butoanele de validare, cu deosebirea că, dintr-un grup

de opiuni, utilizatorul poate selecta, la un moment dat, o singură variantă, în timp ce facilitateacheckbox care permite o selecie multiplă de opiuni

<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 opiune, care este inhibată

8. buton pentru transmiterea informaiilor introduse în formular, către resursa specificată de atributul Action al tag-ului FORM. Prin atributul Value se introduce secvena de text care va fi afişată pe butonulde comandă.

<INPUT Type=”Submit” Name=”nume_control”

Value=”etichetă_buton” Disabled>Exemplu : setarea unui buton de transmitere a datelor către serverul Web, aciune care va fi validată princaseta afişată pe ecran la acionarea butonului Submit

9. buton imagine ce permite transmiterea datelor din formular către serverul Web. Funcionează la fel cabutonul Submit, dar în locul unui buton de comandă va fi afişată imaginea ce va fi specificată în linia decomandă

<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ălimea şi lăimea), în pixeli, a acesteia10. buton pentru ştergerea coninutului 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ândposibilitatea 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, meniuriderulante, butoane de opiuni şi de validare, informaii inhibate vizualizării, butoane de comandă).



Pentru realizarea într-o pagină Web a unui astfel de formular, se editează un program HTML care cuprindeurmă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>Selectai soft-urile pe care le cunoaştei</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="[email protected]"><FONT Face=script Color=red Size=5></FONT>Această informaie 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 conine 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 WebFoile de stil în cascadă ( CCS – Cascading Style Sheets) reprezintă o facilitate care permite stabilireaunitară a unui set de proprietăi de stil, care să definească design-ul paginilor Web; importana utilizăriiacestor proprietăi derivă, practic, din necesitatea eliminării redundanei stilurilor introduse în paginile Web,prin intermediul tag-urilor HTML. În contextul proiectării unei pagini Web, această facilitate sematerializează în trei modalităi de aplicare a proprietăilor de stil, şi anume:1. Definirea stilurilor î î nn aanntteettuull ddooccuummeennttuulluuii HHTTMMLL cu ajutorul tag-ului Style, respectând următoarea

sintaxă generală:

<STYLE Type="text/css"> pprroopprriieettăăiillee ddee ssttiill </STYLE>

Proprietăile de stil specifică elementele de formatare ce se doresc a fi aplicate asupra informaiilor coninutede 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, înacest caz, numele tag-ului trebuie să conină un şir de caractere care să diferenieze 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 aceldocument: un stil se referă la paragrafele editate cu caractere aldine (îngroşate), altul la cele editate cucaractere 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 stabilianumite 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 situaia în care mai multe tag-uri dintr-un program HTML au acelaşi stil de formatare, se pot folosiproprietă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 operaii :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 aceleinformaii care figurează în celulele unui tabel (tag-ul TD). În mod particular, se aplică formatarea cucaractere aldine, numai pentru textul din tag-ul H2.2. DDeef f iinniirreeaa ssttiilluurriilloorr iinn--lliinnee, 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 definireaproprietă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 informaii ale paginii Web pentru care se setează dimensiunea maximă a caracterelor (H1), se vaaplica stilul in-line, care face apel la următoarele atribute de formatare: fontul Script, culoare violet, caracterealdine (îngroşate)33.. DDeef f iinniirreeaa ssttiilluurriilloorr î î nnttrr--uunn f f iişşiieerr eexxtteerrnn

Î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 opagină 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 modificaproprietă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ândun 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 (numitStiluri.CSS ) trei stiluri generice, cu ajutorul aplicaiei FrontPage. Aceste stiluri vor introduce următoareleproprietă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 firecunoscut 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, dimensiune20puncte tipografice, indentare text de 2cm ( Text-indent ), iar spaiul 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ă olegă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>

EExxeemmppllee ddee pprroopprriieettăăii ddee ssttiill ccee ppoott f f ii ddeef f iinniittee î î nnttrr--oo ppaaggiinnăă WWeebb

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 tipograficefont-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 caracterebackground-color: denumire_culoare stabilirea unei culori de fundal pentru textbackground - image: nume/adresa fişier_imagine setarea unei imagini de fundal, cu specificareanumelui, eventual a adresei fişierului care furnizează imaginea

background - repeat: repeat-x|repeat-y|repeat|no-repeat specifică modul de repetare a imaginii defundal: 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 odată cu coninutul paginii ( scroll )background - position: [top | center | bottom] [left | center | right] determină poziia pe verticală şipe orizontală a imaginii de fundal

Proprietăi ale textului letter-spacing defineşte spaierea dintre litere (se utilizează unitatea de măsură relativă „em” carereprezintă lăimea literei „M” relativă la corpul de literă folosit



word-spacing stabileşte spaierea dintre cuvinte adiacentetransform: uppercase | lowercase transformarea textului în caractere majuscule sau în caractereminusculetext-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 acuvintelor de legătură ce se constituie ca hyperlink-uri vertical-align: sub | super scrierea sub formă de indice, respectiv sub formă de exponentline-height specifică distana 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).

66..22 DDooccuummeennttee XXMMLL -- ccoonncceeppttee ddee bbaazzăă

XML(eXtensible Markup Language) este un limbaj pentru descrierea şi schimbarea documentelorstructurate. 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 relaiile dintre aceste elemente. Marcarea structurală este un concept foarte simplu, prin care orice document textual este realizat conform uneistructuri, care este recunoscută de cititorii umani datorită:

• indicatorilor tipografici;• conveniilor de aranjare în pagină;• cunoştinelor pragmatice, culturale, relative la informaiile generice care sunt susceptibile să fie

coninute.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 internaională existentă pentru schimbarea documentelorstructurate - SGML (ISO 8879 -1986) s-a dovedit a fi foarte complexă pentru ca navigatoarele să poată fiuşor implementate. În plus, SGML impune ca orice document să fie conform unei structuri de documenttip, perfect specificat şi validat. Apoi, SGML nu oferă mecanisme de legături bine adaptate pentru creareaunui hipertext deschis asociat numeroaselor documente.

66..22..11 HHTTMMLL şşii XXMMLL Tag-urile disponibile în HTML, şi semantica ce le este asociată, sunt predefinite prin norme. Utilizatorul nuare nici o posibilitate pentru definirea propriilor marcatri, în scopul realizării unei mai bune descrieri astructurii documentelor sale particulare. Elementele predefinite HTML au rolul să descrie aspectul fizic şistructural 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 caracteristicilorsale 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 informaia să fie prezentată, după caz, sub forma: afişarea pe ecranul unui PC, cu o anumită aranjare în pagină; recepionarea 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âteforme 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 stildefinite în CSS ( C ascading S tyle S heet) sau cu ajutorul limbajului XSL (e X tensible S tylesheet L anguage).

XML va fi limbajul nativ pentru următoarea generaie a celor mai cunoscute navigatoare Web. În plus, XMLoferă o metodologie ideală pentru afacerile electronice, deoarece:

• XML permite creatorilor de mesaje tip să identifice clar rolul şi sintaxa fiecărui element al datelorinterschimbate 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 utilizareaunui 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 aplicaiei ş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 reea cu valoare adăugată existentă; interpretarea datelor recepionate în format EDI conform setului de reguli predefinite pentru

afişare.• XML poate extinde aplicaiile EDI existente deoarece permite creatorilor să adauge date specificeaplicaiei.

66..22..22 RReeaalliizzaarreeaa ddooccuummeenntteelloorr XXMMLL XML distinge două clase de documente: documentele bine formate (corecte) şi documentele validate . Un documenteste bine format atunci când se supune regulilor sintactice ale limbajului XML. Un document validat estebine format şi corespunde unei structuri tip definită explicit într-o DTD ( D ocument T ype D efinition).Orice document validat poate fi distribuit printr-un sistem informatic. Navigatoarele XML au capacitatea dea vizualiza şi imprima documentele corecte nevalidate. Editoarele de documente cunoscute pentru limbajulXML 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 – conine un anumit număr de declaraii;• arborele elementelor – formează coninutul propriu-zis al documentului;• comentariile şi instruciunile de prelucrare – a căror prezenă este facultativă.

Declaraia XML are rolul să identifice un document XML. Toate documentele XML trebuie să înceapă cuo declaraie 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 declaraie, procesorul care va prelucra documentul primeşte următoarele informaii:• 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;

• existena sau nu a unor declaraii exterioare documentului, de care se va ine seama. Dacă atributul

standalone are valoarea " yes" procesorul consideră că toate declaraiile necesare prelucrăriidocumentului sunt incluse. Dacă acest atribut are valoarea "no" procesorul trebuie să cautedeclaraiile în alte fişiere externe.

Declaraia XML trebuie să utilizeze caractere mici, excepia 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 oinstană a unei structuri particulare definită în declaraia de tip. Validarea unui document constă în utilizareaunui program care verifică:

• dacă documentul respectă sintaxa limbajului XML;• dacă documentul respectă structura definită prin DTD;• toate referinele pot fi rezolvate.

O definire a documentului tip reprezintă ansamblul tuturor informaiilor coninute, fie intern sau printr-oreferină la entităi externe, într-o declaraie a tipului de document DOCTYPE. DTD internă este de forma:

<!DOCTYPE element_rădăcină [

<!ENTITY nume_entitate_1 "valoare">

…]>

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



<!DOCTYPE exemplu [



<!ELEMENT exemplu (#PCDATA)>



]>

<exemplu>Tutorial XML</exemplu>

• Declaraia tip a documentului trebuie să se regăsească între declaraia 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 documentulXML.

Deoarece o DTD este o structură reutilizabilă ce poate fi folosită la realizarea multor documente, se preferăconservarea sa ca o entitate separată. În declaraia de tip a unui document se face apel la DTD-ul extern prinintermediul 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 declaraieiDOCTYPE

. Declaraia 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ântulcheie ELEMENT. O declarare a unui element este de forma:

<!ELEMENT nume_element model_coninut>

Exemplu:<!ELEMENT adresa (#PCDATA)>

<!ELEMENT img EMPTY>

O declaraie a unui element defineşte un tip de element şi îi asociază un nume şi un model al coninutului(tabel 9.1). Toate elementele instane ale acestui tip ce vor apare într-un document trebuie să corespundămodelului definit în declaraie.

Model_coninut Semnificaia:

EMPTY

Se referă la tag-urile care sunt vide. De exemplu, tag-ulIMG din HTML poate fi reprezentat prin:<IMG SRC="num_x.gif"/> sau<IMG SRC="num_x.gif"></IMG>.

ANY

Elementul poate avea un coninut oarecare, ce nu a fost încă

decis, sub rezerva că respectă regulile sintactice generaleale limbajului XML.

Elemente fiuCând un număr de elemente tip pot înlocui un alt elementtip. Acestea sunt denumite elemente fiu, iar elementele

înlocuite sunt denumite elemente pă rinte.Coninut mixt Se referă la combinaia (#PCDATA) şi elementele fiu.

66..22..33 DDeeccllaarraarreeaa eelleemmeenntteelloorr f f iiuu Elementele fiu pot avea o ordine impusă şi formează o secvenă. Secvena este specificată prin lista de numeale tipurilor de elemente separate prin virgulă. Ordinea poate fi oarecare, iar elementele vor fi separate prinbara verticală . Sintaxa este:

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

<!ELEMENT nume_fiu1 model_coninut>



<?xml version="1.0"?>

<!DOCTYPE student [

<!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 conine un element id , un element nume_familie şi un element primul_nume ,respectând această ordine.

Numele unui element ce apare în modelul_coninut al unui element părinte (cu alte cuvinte unul dinelementele nume_fiu ) poate fi însoit de unul din operatori: *, +, ?. Semnificaia acestor operatori este:

• nume_fiu * indică faptul că elementul poate să nu apară, să apară o dată sau de mai multe ori înconinutul unei instane;

<!ELEMENT nume_părinte (nume_fiu*)>

<!ELEMENT nume_fiu model_coninut>


<!DOCTYPE student [



<!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 coninutul uneiinstane;

<!ELEMENT nume_părinte (nume_fiu+)>



<!DOCTYPE student [

<!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 coninutul uneiinstane (este opional).

<!ELEMENT nume_părinte (nume_fiu?)>

<!DOCTYPE student [



<!ELEMENT student (adm?)>

<!ELEMENT adm (#PCDATA)>

]>

<student>

<adm>19.06.97</adm>

</student>

Absena unuia din aceşti operatori are semnificaia că elementul declarat trebuie să apară o dată şi numai odată: este obligatoriu şi nerepetabil.

Prezena datelor în coninutul unui element se specifică prin cuvântul cheie# PCDATA (Parsed Character DATA) :

<!ELEMENT nume (#PCDATA)>

Conform acestei declaraii, un element nume nu poate conine decât date, nu şi elemente fiu. Datele suntreprezentate printr-un set de caractere (de exemplu nu poate fi o imagine).

d) Declararea listei de atribute

Atributele sunt informaii suplimentare asociate cu un element tip. Declaraiile 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 semnificaia că atributul este cerut sau nu şi dacă nu, ce valoareimplicită 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 Prezena atributului este facultativă.

#FIXED "Valoare" Atributul ia totdeauna aceeaşi valoare în instana încare elementul a fost declarat.

66..22..44 EEddiittaarreeaa XXMMLL

Scrierea documentelor XML bine formate (fără DTD) se realizează printr-un:• Editor simplu de texte, situaie în care este necesară existena unui produs parser care să verifice

sintaxa documentului obinut.• 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 construcie relativ complexă a limbajului.• editor pentru limbajul XML. În acest caz, fereastra de editare este împărită în două: în stânga apare

reprezentarea grafică a structurii documentului, iar partea dreaptă va conine elementul selectat şipermite editarea.

Figura 6. 1 Fereastră a editorului XMLwriter



66..33 GGeenneerraattoorruull ddee ppaaggiinnii WWEEBB MMiiccrroossoof f tt FFrroonnttPPaaggee

66..33..11 IInnttrroodduucceerree Încă de la lansare, Microsoft FrontPage s-a remarcat ca unul dintre cele mai puternice instrumente de editare apaginilor WEB, atât din punctul de vedere al facilităilor oferite creatorilor de pagini WEB, cât şi alergonomiei. Aplicaia s-a îmbogăit continuu cu noi instrumente puse la dispoziia dezvoltatorilor de pagini

WEB, versiunea 2003, lansată odată cu suita de aplicaii Microsoft Office 2003 nefăcând excepie.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 – W hat Y ou S ee I s W hat Y ou G et – ceea ce vezi

este ceea ce obii;• Scrierea directă de cod în limbajul HTML , VBScript , JavaScript , etc.• Asistena 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 funcie de context, toateposibilităile de utilizare a acestuia. În figurile următoare se prezintă modul de utilizare ainstrumentului 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 aplicaii Windows , barele deinstrumente 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 acestuiapoate fi afişat automat un alt panou de instrumente înfuncie de contextul în care se gaseşte dezvoltarea uneipagini. Afişarea acestor panouri se activează/dezactiveazădin meniul View->Task Pane . Printr-un clic în titlul panouluide comenzi rapide, acesta poate fi schimbat manual cu unaltul. 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 celedin suita Microsoft Office .



Figura 6. 2 Fereastra de bază a editorului FrontPage

b. În partea de jos a ferestrei, sunt vizibile patru opiuni:• Design – pentru editarea vizuală a paginii (inserare, ştergere, modificare coninut 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 elementenu 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 folositeste Internet Explorer ).



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 locaie) saudin meniul File -> Save As (salvare cu posibilitatea schimbării numelui fişierului şi/sau a locaiei. În cazulunei pagini noi, care nu a fost salvată niciodată, ambele opiuni afişează aceeaşi fereastră, cea a opiunii Save As . Deschiderea unei pagini Web salvate, se realizează din meniul File->Open, apoi se alege locaia şipagina dorită.

6.3.2.2. Crearea şi întreinerea site-urilor Web.Facilităi specifice gestionării site-urilor WebDin punct de vedere al tipului şi al coninutului fişierelor unui site WEB, acestea pot fi salvate toate înacelaşi folder, sau în foldere specializate, cum ar fi spre exemplu:



În cazul utilizării acestei variante, se creează automat şi se sugerează doar o structură de foldere (veziimaginea de mai jos) care nu conin î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 ) saudefault.htm (.html ), de preferat fiind să osalveze în folderul rădăcină al site-ului.

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

Operaia se derulează la fel numai că se creează automat o pagină de start fără coninut cu numele index.htm .

• Crearea unui site, utilizând celelalte şabloane

Utilizând celelalte şabloane, în funcie de profilul site-ului definit de şablon, utilizatorul poate fi asistat pas cupas, 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 , înfolder-ul c:\SiteAsistat , prima fereastră la care trebuie să răspundă utilizatorul este:

După cum se observă, sunt propuse un set de opiuni, utilizatorul trebuind să aleagă coninutul paginiiprincipale 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 opiunilor, structura de foldere a site-ului ( Folder List ) şistructura arborescentă a site-ului este prezentată în Figura 6. 8.



Utilizatorul trebuie să selecteze fiecare pagină din componena site-ului şi să o completeze cu informaiilenecesare.

66..33..33 FFaacciilliittăăii oof f eerriittee î î nn ggeessttiioonnaarreeaa ssiittee--uurriilloorr 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ă operaia este File->Import .Publicarea site-urilor . Se realizează din meniul File->Publish Site... şi presupune ca serverul unde va funcionasite-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 – informaii despre numărul, dimensiunea şi alte informaii despre toate fişierele disite;

• Files->Recently Added Site – informaii despre ultimele fişiere adăugate site-ului;• Files->Recently Changed Site – informaii 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 – informaii despre legăturile hipertext care au erori;• Usage – oferă diverse informaii cu privire la accesarea site-ului, dar sunt condiionate 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 unuisite.Programarea anumitor operaii 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.

66..33..44 DDeef f iinniirreeaa ppaarraammeettrriilloorr pprriinncciippaallii aaii uunneeii ppaaggiinnii WWEEBB

Se realizează din meniul File- >Page Properties . Principaleleseciuni care se pot configura,sunt: General – unde se potstabili titlul paginii ( Title ),localizarea în cadrul site-ului( Base location ), un fişier cusunete ( Background sound ) caresă fie redat în momentul vizitării paginii, etc.



Formatting – se poatestabili un fişier imagine, caresă fie plasat în fundal, sauculoarea de fond adocumentului ( Background picture ). De asemnea se maipot stabili: culoarea textului( Text ), culoarea legăturilorhipertext nevizitate( Hyperlink ), culoarealegăturilor hipertext vizitate( Visited hyperlink ), etc.

Advanced – pentru

stabilirea dimensiuniispaiului din partea de sus, dejos a paginii şi a celui dinstanga, dreapta faă deconinut. Opiunea Design-time control scripting stabilescmodalitatea de execuie ascripturilor pe server sau pemaşina clientului iar Enable hyperlink rollover effects permitedefinirea unui efect aplicat

legăturilor hipertext, atuncicând mouse-ul se aflădeasupra acestora – butonulde comandă Rollover Style activând o listă cu efecteleposibile de aplicat.



66..33..55 FFoorrmmaattaarreeaa ccaarraacctteerreelloorr

Caractereleor unui text i sepot aplica mai multeformatări, asemănătoare cucele oferite de programele

specializate în tehnore-dactarea documentelor( Microsoft Word , spreexemplu). Pentru a stabilicaracteristicile unuia sa amai multor caractere, seselectează zona dorită, apoise activează meniulFormat -> Font : Font – stabileşte setul decaractere utilizat;

Font Style – stabileştemodul de afişare alcaracterelor: 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 înevidenă – tag-ul <STRONG>), etc. Seciunea Character Spacing , permite stabilirea spaiului dintre caractere.

66..33..66 FFoorrmmaattaarreeaa ppaarraaggrraaf f eelloorr Un paragraf dintr-un document Web, se identifică în editorul FrontPage , ca fiind zona de informaii, care inepână la acionarea tastei ENTER (altfel spus – zona dintre două ENTER -uri). Stabilirea caracteristicilorunui paragraf se realizează din meniul Format->Paragraph . Tag-ul HTML , inserat odată cu stabilirea acestorcaracteristici, este:<P>

......</P>



Aşa cum se remarcă dinfigura alăturată, opiunilepuse la dispoziie, sunt: Alignment – modul dealieniere al coninutului, pe

orizontală:Left

(la stânga),Center (centru), Right (ladreapta), Justify (la stânga şila dreapta); corespunzătoracestor moduri de aliniere,tag-ul <P>, este utilizatîmpreună cu atributul ALIGN:<P ALIGN=”LEFT|CENTER|RIGHT|JUSTIFY”>

</P>

Indentation – permite inserarea de spaii, în partea stângă a textului ( Before text ), în partea dreaptă, până înmarginea din dreapta ( After text ); Indent first line – pentru inserarea de spaii numai pentru prima linie a paragrafului; Spacing – pentru stabilirea spaiilor de deasupra paragrafului ( Before ), după acesta ( After ) şi a celui dintrecuvinte ( Word ); Line spacing – pentru spaiul dintre rânduri: Single (un singur rând), 1.5 Lines (un rând şi jumătate) şi Double (două rânduri).

66..33..77 DDeef f iinniirreeaa lliisstteelloorr ddee eelleemmeennttee Listele de elemente, dintr-un document Web, se definesc din meniul Format ->Bullets and Numbering , şi suntde două tipuri: Nenumerotate , acestea potutiliza fişiere imagine,stabilite de utilizator ( Picture Bullets ) plasate înainteafiecărui element sau unul dinurmătoarele simboluri ( Plain Bullets ): , ( circle ) sau ( square ), aşa cum se remarcădin imaginea alăturată. Tag-ul HTML , corespunzătorlistelor de elementenenumerotate este:

<UL TYPE=”CIRCLE|SQUARE”>

<LI> element 1 </LI>




.....

</UL>

În cazul utilizării cerculeelor pline ( ), nu se va meniona atributul TYPE.

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

Codul HTML , corespunzător acestui exemplu este:

numerotate (seciunea Numbers ), utilizează

pentru numerotare, cifre arabe (1,2,3...),romane (I, II, ...sau i, ii, ....), litere (A...Z, saua....z). Tag-ul HTML , pentru definirea listelornumerotate este:<OL TYPE=”A|a|I|i” START=”n”>



.....

</OL>

Pentru numerotarea cu cifre arabe, nu seutilizează atributul TYPE.



66..33..88 DDeef f iinniirreeaa bboorrdduurriilloorr şşii aa uummbbrreelloorr

Bordurile şiumbrele se definescdin meniul Format- >Borders and Shading ,

pentru borduriutilizându-seseciunea Borders , iarpentru umbre,seciunea Shading ,aşa cum se observăşi din imagineaalăturată.În cazul bordurilor,se pot stabili: tipul bordurii,

chenar complet( Box ) sau numaianumite 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 dispoziie o mare varietate de linii: solid (linie continuă), dotted (linie punctată), etc. Culoarea liniei ( Color ). Grosimea liniei ( Width ). Distana î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 ) sauorizontal ( Horizontal position ) în cadrulchenarului.

66..33..99 IInnsseerreerraarreeaa oobbiieecctteelloorr HHTTMMLL 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ă îndocument din meniul Insert->Horizontal Line . Tag-ul HTML generat la inserarea liniei este<HR>. Implicit se desenează o linie care vaocupa 100% din dimensiunea ferestrei, şi cugrosimea 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 menionat că acestecomenzi sunt valabile pentru a modifica toate obiectele dintr-o pagină web, editată cu FrontPage . Fereastra cuproprietăile liniei este: Lungimea linie ( Width ) se poate stabili caprocent din dimensiunea ferestrei ( Percent of Window ) sau lungime fixă în pixeli ( Pixels ). Grosimea liniei se stabileşte în casetaHeight , tot în pixeli. În cazul în care lungimea liniei nu este

100% din fereastră, se poate stabili şi modulde aliniere a liniei pe orizontală ( Alignment ): lastâ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ă suntprezentate două straturiadăugate din acest meniu.Modificarea caracteristicilorunui strat se realizează prinacionarea unui clic dreaptadeasupra, şi apoi meniulcontextual Layer->Properties .

Caracteristicile principale se referă la elementele decontur ale unui strat ( Borders and Shading ) şi la cele depoziionare ( Positioning ) accesibile dintr-un panou decomenzi rapide ( Layers ), aşa cum se poate observa şidin imaginea alăturată.

Cadre inline



Un cadru ( frame ) inline (inclus direct încorpul unei pagini WEB) se inserează dinmeniul Insert-> InlineFrame . Odată cuadăugarea cadrului, FrontPage plasează şidouă butoane de comandă de unde sepoate stabili pagina cu care se încarcăcadrul. Odată ce se stabileşte pagina careeste încărcată în cadru, acestea nu maisunt vizibile.

Caracteristicile unui cadru inline sestabilesc acionând clic dreaptadeasupra acestuia, după care seconfigurează opiunile din imagineaalăturată. Aşa cum se poate observase poate stabili:

• numele cadrului ( Name ),

• pagina de încărcare ( Initial page ), pagină care poate fischimbată dinamic, ulterior,prin codul paginii,

• titlul acestuia ( Title ),• dimensiunile ( Frame size-

> Width şi Height),• marginile din interiorul

cadrului şi până înconinutul acestuia ( Margins- >Width şi Heght ),

• Alinierea cadrului ( Alignment ) în cadrul paginii,• Activarea/Dezactivarea barelor de defilare ale cadrului, atunci când coninutul 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 dinfigura alăturată se poate alege un anumitformat de afişare atât pentru dată cât şi pentru

oră.



Comentariile, se inserează dinmeniul Insert->Comment , tag-ul HTMlgenerat fiind <!>. De menionat că uncomentariu nu este afişat în momentul vizitării paginii, acesta servind doarcelui 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 multesubmeniuri, din care utilizatorul îşi poate alege tipul şi sursaimaginii ce va fi încorporată în document (vezi figuraalăturată): Clip Art – permite inserarea unei imagini, din colecia deimagini a pachetului de programe Office; From File – permite selectarea unui fişier imagine de pedisc, 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 aplicaie specială din pachet.

Cu ajutorul acestei aplicaii, utilizatorul îşi poate adăuga, şterge şi organiza imaginile proprii, inclusiv cu texteînsoitoare, etc. Movie in Flash Format – inserează o animaie în format Macromedia Flash.

New Drawing – permite realizarea şi inserarea unei imagini cu ajutorul aplicaiei Drawing din pachetulOffice, aplicaie care poate fi utilizată şi din celelalte programe din pachet ( Word , Excel , ş.a.).

AutoShapes – permite introducerea automată dincadrul unei colecii bogate, a unei pictograme (vezifigura alăturată). Această funcie este întâlnită lanivelul tuturor aplicaiilor din pachetul Office ;

WordArt – permite introducerea unei imaginirealizate cu aplicaia WordArt , aceasta fiind tot oaplicaie 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 fiamplasată imaginea în raport cu textul delângă ea, la stânga ( Left ), la dreapta ( Right ),

sau implicit. Alignment – modul de aliniere alimaginii, faă de textul unde esteamplasată; Horozontal spacing – spaiul care va filăsat în partea stângă a imaginii;

Vertical spacing – spaiul 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 jurulimaginii; Size – stabileşte dimensiunea imaginii, în cazul în care se doreşte a fi modificată dimensiunea implicită aacesteia; Lăimea ( Width ) şi înălimea ( Height ), pot fi stabilite ca dimensiune fixă, în pixeli ( in pixels ), sau înprocente ( 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 informaie: text,imagine statică, imagine în miscare, etc. Legăturile hipertext se definesc din meniul Insert->Hyperlink. Se potdefini următoarele tipuri de legături: A) legături către o destinaie intă (ancoră) aflată în acelaşi document cu legătura ;În acest caz, pentru a defini o astfel delegătură trebuie definită zona intă (ancora),unde se va realiza deplasarea, în momentulacionării legăturii. Definirea unei ancore serealizează din meniul Insert->Bookmark (vezifigura alăturată). Pentru definirea fiecărei

ancore, trebuie realizată în prealabilpoziionarea în locul de unde va începeafişarea, apoi se activează meniul menionatanterior.

În FrontPage , zona unde s-a definit ancora va fi marcată printr-un stegulet , care nu va fi vizibil înmomentul 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 aciona 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 numeleexemplu1.htm:

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 destinaii 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 fereastraafişată de meniul Insert->Hyperlink. În figura de mai jos, este exemplificat modul de definire al unei legăturidintr-un fişier nou, în fişierul exemplu1.htm , la sfârşitul acestuia.

Definire ANCORA INCEPUT Deplasare la sfâr şitul documentului

Deplasare la mijlocul documentului

Definire ANCORA MIJLOC

Definire ANCORA SFARSIT De lasare la înce utul documentului



Ancora dela sfarşitul documentului exemplu1.htm , se va alege prininvocarea 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 seciunea Adress, se va tasta o adresă de e-mail, astfel: mailto:adresa. Exemplu:Dacă doriti sa lasati un mesaj clic <a href = "mailto:[email protected]"> aici </a>

Formulare

Un formular dintr-o pagină Web, este un obiect, prin care se asigurăcomunicarea interactivă între vizitatorul unei pagini şi deinătorul acesteia.Deinătorul paginii poate stoca şi prelucra informaiile recepionate prinintermediul formularului cu ajutorul unui sistem de gestiune a bazelor dedate, scripturi CGI sau alte tipuri de programe. Cea mai simplă formă detransmitere şi recepionare a informaiilor 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 caredispune de submeniuri pentru inserarea tuturor categoriilor de obiectespecifice unui formular (vezi figura alăturată). Formularul propriu zis seinserează 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.



Casetă de text ( Textbox ) – utilizabilă pentru tastarea unui şir decaractere, numere, etc.Proprietăile unei casete de text sunt:

Name – numele intern alcontrolului, sub care poate fi referitdin pagina web; este o proprietatecomună pentru toate tipurile decontroale; Initial value – valoarea implicită(predefinită) a controlului; Width in characters – lungimeaafişată a controlului;

Password field – se poate opta pentru mascarea informaiilor introduse ( Yes ) prin intermediul unui caractergeneric, sau afişarea în clar a acestora ( No ). Mascarea (ascunderea) caracterelor introduse, este utilă atuncicând se doreşte ca anumite informaii 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 vizitarea acestora în cadrul formularului.Din butonul de comandă Validate , se activează fereastra unde se pot defini reguli de validare, pentru fiecarecontrol: Data type – stabileşte tipul de informaie acceptat în caseta de text: Text (orice caracter), Integer (numereîntregi), Number (orice număr); Text format – stabileşte modul de afişare al coninutului casetei de text, în cazul în care proprietatea Data Type are valoarea Text :

Letters (litere), Digits (cifre), Whitespace (spaii), Other (alte caractere); Data Length – stabileşte lungimea minimă ( Min length ) sau maximă ( Max length ) acceptată şi dacă esteobligatorie completarea coninutului casetei de text. Data Value – stabileşte dacă valoarea coninută de control, trebuie să respecte anumite condiii decomparare, pentru a fi acceptată. Condiiile se definesc cu ajutorul operatorilor de comparare cunoscui: >



Allow multiple selections – stabileşte dacă se pot selectasimultan mai multe variantedin lista afişată. Dacă are valoarea Yes , controlul va fide tip listă simplă de valori,indiferent de valoareaproprietă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ă unbuton, care în momentulacionării, poate executa: aciune definită deutilizator;

trimiterea (proprietatea Submit ) coninutului formularului către locaia internet, precizată înproprietatea ACTION a formularului;

anularea (proprietatea Reset ) coninutului 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 conine orice tip de informaie: text, imagini, legături hipertext, alte tabele, etc. Unele caracteristici aleunui tabel se pot stabili chiar de la crearea acestuia:



Size – stabileştenumărul de rânduri( Rows ) şi numărul decoloane ( Columns ); Layout – elemente

referitoare la aliniereatabelului ( Alignment ) pecentru ( Center ), lastânga ( Left ), la dreapta( Right ); Cell padding – spaiul din jurulconinutului fiecăreicelule; Cell spacing – spaiul dintre celule; Specify width – dimensiunea tabelului,raportată ladimensiunea ferestrei( In percent ), saudimensiune fixă aacestuia în pixeli ( In pixels ), indiferent desuprafaa ferestrei.Similar se stabileşteînălimea, dinproprietatea Specify Height ;

Figura 6. 9 Properietăile unui tabel

Borders stabileşte caracteristicile globale ale bordurii (contururilor) tabelului; Size – grosimea borduriitabelului; Color – culoarea de bază a bordurii tabelului; Light Border şi Dark Border stabilesc două nuane alebordurii tabelului care vor forma culoarea bordurii tabelului. Inserarea de rânduri ( Rows ) şi coloane ( Columns ) serealizează din meniul Table ->Insert ->Rows or Columns ,caseta Number of rows . Above selection va insera rândurideasupra, Below selection , dedesupt, similar existândopiuni ş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ărirea uneia sau mai multor celule în maimulte se realizează din meniul Table ->Split Cells (vezi figura alăturată). Se poate opta pentruîmpărire în mai multe coloane ( Split into Column )sau în mai multe rânduri ( Split into rows ). Numărulacestora se stabileşte în caseta Number of Columns pentru împărirea în coloane, şi Number of Rows, pentru împărirea în rânduri.



Stabilirea caracteristi-cilor uneia sau maimultor celule, serealizează prin selectare şiapoi activarea meniuluiTable->Table Properties->Cell : Horizontal alignment – alinierea coninutuluicelulei din punct de vedere orizontal: lastânga ( Left ), la dreapta( Right ), pe centru ( Center ),la stânga şi la dreapta( Justify );

Vertical alignment – alinierea coninutului 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ă, coninutul 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ălimea celulei.

Caracteristicile unui tabel se modifică din meniul Table->Table Properties->Table , fereastra afişată fiind cea dinFigura 6. 9Error! Reference source not found..

66..33..1100 AAllttee ccoommppoonneennttee wweebb

Pot fi adăugate din meniul Insert->Web Component . În figura alăturată se pot vizualiza o parte din opiuniledisponibile.

Efectul de text defilant.



Se realizează din opiunea Marquee (tag-ul HTML areacelaşi nume).Principalele opiuni ce se

pot configura:• Text – textul care va defila;

• Direction – direciadin care defileazătextul;

• Speed – viteza dedefilare;

• Behavior – modul de defilare a textului: Scroll – doar într-o direcie, Alternate – când se termină unciclu de defilare într-o direcie se reia din direcia opusă;

• Size – dimensiunea casetei textului defilant;• Repeat – numărul de reluări ale defilării textului. Opiunea Continuosly se foloseşte pentru defilarea

infinită a textului;• Background color – culoarea de fond.

Butoane de comand ă cu efecte prestabilite.

Se integrează în pagină dinopiunea Interactive Button . Acestea au deja prestabiliteefecte care se activează înanumite situaii (de exempluse schimbă culoarea de afişarea textului din butonul decomandă la trecerea mouse-ului pe deasupra sau laacionarea acestuia) şi imaginide fond. Configurarea acestorbutoane de comandă serealizează prin intermediul atrei seciuni, afişate sub formaa trei ferestre. Astfel, în

seciunea Button (veziimaginea alăturată), se potconfigura următoareleopiuni:

• 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 acionarea butonului.



Seciunea Font permitestabilirea câtorva caracteristicireferitoare la caracterele cucare este scris textul afişat debuton (vezi şi imagineaalăturată):

• Font – stabileşte setulde caractere utilizat;

• Font Style – stabileştestilul de afişare alcaracterelor ( Italic -înclinat, Bold -îngroşat,Bold Italic -îngroşat şiînclinat);

• Size – dimensiuneacaracterelor;

• Hovered Font Color – stabileşte culoarea de afişare a textului din butonul de comandă la trecerea cumouse-ul pe deasupra acestuia;

• Pressed Font Color – culoarea de afişare a textului din butonul de comandă în momentul acionăriiacestuia;

• 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ă;Seciunea Image , configurează câtevaaspecte legate de imaginea afişată debutonul de comandă (vezi figuraalăturată), din care cele mai importantesunt:

• Width – lungimea butonului decomandă;

• Height – înălimea butonului decomandă;

• Maintain proportions – în cazulmodificării uneia din opiunileanterioare, se redimensioneazăproporional şi cealaltăcaracteristică;



Integrarea unei foi de calcul, grafic sau tabel pivot în pagina web

Se realizează din opiunea Spreadsheet and Charts , fiind puse la dispoziie treiopiuni:

• Office Spreadsheet – pentru inserarea unei foi de calcul având aceleaşi caracteristici şi funcionalităi cua unei foi de calcul Excel, aceasta putând fi de altfel editată la alegere chiar în Excel, printr-un singuri

clic pe opiunea .

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

• Office Chart – integrează în pagina web un grafic, opiunile de configurare, fiind asemănătoare cu celede 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 decalcul aflată în pagina web, se alege a

treia opiune ( Data from the following page item ). În imaginea alăturată se observămodul de selectare a foii de calculdefinită anterior (din Figura 6. 10).



b. În seciunea Data Range se stabilescseriile de date reprezentate în grafic. Aşacum se reamrcă din figura alăturată, s-adefinit o serie de date pentru afişareacomparativă a valorilor produselor.

c. Ultimul pas, presupune alegerea tipuluide grafic. În figura alăturată se potoberva toate categoriile de graficedisponibile. Pentru graficul prezentat caexemplu, s-a ales varianta afişării subformă de coloane.

• Office Pivot Table – integrează în pagina web un tabel pivot, tabel care permite o vederemultidimensională 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 familiarizaicu cuburile OLAP6 gestionate de alte produse informatice.

66..33..1111 EEf f eeccttee aapplliiccaattee aassuupprraa uunneeii ppaaggiinnii ssaauu uunnoorr oobbiieeccttee ddiinnttrr--oo ppaaggiinnăă

6.3.11.1. Efecte de tranziie aplicate unei pagini.

Se stabilesc din meniul Format- >Page Transition , opiunile cetrebuiesc configurate fiindprezentate în figura alăturată.În seciunea 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şareaconinutului 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 tranziie se stabilesc din caseta Transition effect , iar durata de aplicare a unui efect, dincaseta Duration .

6.3.11.2. Efecte/aciuni aplicate obiectelor dintr-o pagină. Aplicarea unui efect sau a unei aciuni unui obiectdintr-o pagină, se realizează prin selectareaobiectului respectiv şi apoi activarea meniuluiFormat->Behaviors . Acionarea acestui meniu are caefect activarea panoului de comenzi rapide Behaviors (vezi figura alăturată). În cadrul acestuia există douăbutoane de comandă: Insert , pentru adăugarea uneiaciuni şi Delete , pntru eliminarea unei aciuni dejaadăugate. Adăugarea unei aciuni aplicabile unui obiect

selectat, se realizează practic în doi paşi:a. se alege mai întâi aciunea ce va fi aplicată

obiectului selectat;b. se alege evenimentul la care va fi declanşată

aciunea selectată anterior.

Exemplu:

Pentru a înelege mai bine modul de definire al uneiaciuni, presupunem că avem un text, şi la acionareaunui 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 , opiunea Set Text şiapoi Set Text of Status Bar .



După alegerea aciunii, panoul Behaviors afişează automat, lista cu evenimente şiaciunile asociate acestora. Implicitevenimentul selectat este onmouseover (latrecerea cu mouse-ul pe deasupraobiectului), iar pentru a reaciona la unclic de mouse, trebuie să se aleagăevenimentul onclick.Similar se pot adăuga şi alte tipuri deaciuni asupra obiectelor dintr-o pagină web (acestea sunt destul de sugestive),maniera de operare fiind asemănătoare.

66..33..1122 DDeef f iinniirreeaa ssttiilluurriilloorr î î nnttrr--oo ppaaggiinnăă wweebb În FrontPage , definirea unui stil se realizează din meniul Format->Style , paşii care trebuiesc urmai pentrudefinirea unui stil nou fiind prezentai î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 conine stilurile ce vor fi aplicate coninutului 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 instrumenteFormatting, aşa cum se poate remarca şi din imaginea următoare.



Figura 6. 12 Aplicarea unui stil asupra unui text

bti-proiectarea paginilor web cu html

Documents