Universitatea de Stat din Moldova Facultatea de Matematic i Informatic

T.Bragaru, T.Sibirschi, V.Sibirschi

Aprobat de Consiliul Profesoral al Facultii de Matematic i Informatic

Chiinu, 2002

CZU 004.55(075.8) B76 Bragaru T, Sibirschi T, Sibirschi V. Explorarea HTML. Chiinu: USM, 2002. 118 p.
n lucrare sunt elucidate aspecte ale proiectrii Web site-urilor. Pe baza unor exemple tipice se exploreaz posibilitile limbajului HTML ca nucleu al Web tehnologiilor avansate. Totodat, lucrarea conine un ir de ntrebri de autocontrol i exerciii care ajut la o mai bun nelegere a materialului. Se adreseaz celor cointeresai n construirea Web-paginilor, celor ce doresc s publice careva informaii prin Internet i/sau s dezvolte o afacere prin Internet. Dar n primul rnd este destinat studenilor-specialiti de informatic, reele de calculatoare, tehnologii informaionale etc. Pentru a explora posibilitile standarde ale HTMLlui, este necesar lansarea exemplelor. Pentru a afla mai multe informaii dect cele prezentate n lucrare vizitai Web-paginile indicate n referine sau oricare alte izvoare de pe Internet. Sursa principal de inspiraie a prezentei lucrri este Internetul. Referine utile vezi pe parcursul textului. O list integr a adreselor de referin vezi n bibliografie. Recomandat de catedra Informatic i Optimizare Discret Recenzent: Catedra Informatic a Academiei de tiine a Republicii Moldova, ef catedr, doctor, confereniar, G. Secrieru.

Descrierea CIP a Camerei Naionale a Crii Explorarea HTML/Bragaru T., Sibirschi T., Sibirschi V. - Chiinu: USM, 2002. 118 p. Bibliogr. p.104 (18 tit.) ISBN 9975-70-13-2 50 ex. 004.55(075.8)

ISBN 9975-70-13-2 Universitatea de Stat din Moldova, 2002

3

CUPRINS
CUPRINS......................................................................................................4 1. INTRODUCERE......................................................................................6 1.1. DE CE E NECESAR A FI STUDIAT HTML .....................................................6 1.2. OBIECTIVE URMRITE...............................................................................7 1.3. CE ESTE NECESAR A CUNOATE PENTRU ATINGEREA SCOPULUI........................7 2. CONINUTUL I ORDINEA LUCRRILOR....................................9 2.1. SARCINA DE EXPLORARE (STUDIERE) HTML ..............................................9 2.2. SARCINA CREATIV (CRISTALIZARE CUNOTINE)........................................10 3. CONCEPTE DE BAZ ........................................................................13 3.1. HYPERTEXT ...................................................................................13 3.2. NAVIGAREA ..................................................................................16 3.3. EDITOARELE HTML .....................................................................17 3.4. WORLD WIDE WEB...............................................................................18 3.5. HTML................................................................................................19 3.6. ELEMENTE DE BAZ ALE DOCUMENTELOR HTML .....................................21 3.7. WEB DESIGN ........................................................................................23 3.7.1. Proiectarea unui Web-site.........................................................24 3.7.2. Publicare....................................................................................26 3.7.3. Promovarea site-ului ................................................................27 4. EXPLORARE HTML...........................................................................29 4.1. STRUCTURA DOCUMENTULUI HTML........................................................29 4.1.1. Instruciuni HTML i noiuni de baz........................................29 4.1.2. Setul de caractere utilizat de HTML..........................................31 4.1.3. Prima sarcin de explorare. Modul de lucru.............................32 4.1.4. Exemple de explorare................................................................34 4.1.5. Informaii pentru motoarele de cutare.....................................38 4.1.6. ntrebri de autocontrol i exerciii...........................................39 4.2.FORMATAREA CARACTERELOR, ORGANIZAREA TEXTULUI................................41 4.2.1. Instruciuni i atribute utilizate..................................................41 4.2.2. Redarea culorilor prin nume sau valoarea RGB.......................46 4.2.3. Exemple de explorare ...............................................................48 4.2.4. ntrebri de autocontrol i exerciii...........................................51 4.3. ALTE ORGANIZRI INTERNE ALE TEXTULUI. LISTE.......................................52 4.3.1. Noiuni i marcaje utilizate........................................................53 4.3.2. Exemple de explorare ...............................................................54 4

4.3.3. ntrebri de autocontrol i exerciii...........................................56 4.4. ALTE ORGANIZRI INTERNE ALE TEXTULUI. TABELE....................................58 4.4.1. Noiuni i marcaje utilizate........................................................58 4.4.2. Exemple de explorare ...............................................................64 4.4.3 ntrebri de autocontrol i exerciii............................................67 4.5. ORGANIZAREA SITE-ULUI. REFERINE ......................................................68 4.5.1. Legturile hipertext....................................................................69 4.5.2. Organizarea site-ului.................................................................72 4.5.3. Exemple de explorare ...............................................................75 4.5.4 ntrebri de autocontrol i exerciii............................................77 4.6. OPERAREA CU OBIECTE ..........................................................................78 4.6.1. Introducerea imaginilor.............................................................78 4.6.2. Introducerea sunetelor ..............................................................80 4.6.3. Introducere videoclipuri ...........................................................81 4.6.4 ntrebri de autocontrol i exerciii............................................82 4.7. OPERAREA CU FORMULARE......................................................................83 4.7.1.Maracje utilizate ........................................................................83 4.7.2. Exemple de explorare ...............................................................86 4.7.3. ntrebri de autocontrol i exerciii...........................................88 4.8. FERESTRE (CADRE, FRAME) .....................................................89 4.8.1. Comenzi de construire a cadrelor..............................................90 4.8.2. ntrebri de autocontrol i exerciii...........................................93 4.9. ALTE ELEMENTE...........................................................................94 4.9.1. Realizarea efectului Marquee....................................................94 4.9.2. Text clipitor ...............................................................................96 4.9.3. Modele de stiluri........................................................................96 5. SFATURI UTILE.................................................................................100 5.1. ACCESIBILITATEA WEB-PAGINII.............................................................100 5.2. ARANJAREA N PAGIN .........................................................................100 5.3. NAVIGAREA N INTERIORUL PAGINII.........................................................101 5.4. ALTE REGULI PENTRU O PAGIN MAI EFICIENT ........................................103 BIBLIOGRAFIE I REFERINE UTILE............................................105 Anexa 1. Forma recomandat a CV-ului...........................................106 Anexa 2. Denumiri sugestive de tabele i liste...................................107 Anexa 3. Exemplu sugestiv de structurare a site ului de explorare. 109 Anexa 4. Exemplu de structur a siteului creativ ...........................110 Anexa 5. O list sugestiv de teme pentru site-urile creative la cursul REELE DE CALCULATOARE.........................................111

1. INTRODUCERE 1.1. De ce e necesar a fi studiat HTML Paginile Web (codurile HTML) pot fi construite-editate manual sau n diverse medii de editare, utiliznd la pstrare convertoarele aferente. Exist o serie de procesoare de texte care permit salvarea documentelor n format HTML n locul formatului propriu. Unele editoare sunt orientate special la elaborarea codului HTML, au comenzi incorporate pentru verificarea corectitudinii codului (spre exemplu HoTMetaL). Editoarele Microsoft Front Page", NetScape Composer" etc. permit elaborarea rapid, precum i corectarea unor documente simple ce funcioneaz excelent sub navigatoarele (browser-ele) omonime - Internet Explorer (IE) sau NetScape. ns Web-paginile construite sub un anumit mediu de editare pot funciona prost sub alte navigatoare din cauza particularitilor lor, precum i a editoarelor, deoarece procesoarele de tip WYSIWYG nu sunt standardizate ntre furnizori, calculatoare i sisteme de operare. De asemenea ele nu pot s realizeze reformatare pentru diferite dimensiuni de ferestre sau rezoluii ale ecranelor. Codurile construite cu ajutorul editoarelor sunt mult mai lungi dect cele construite manual. Paginile construite n medii speciale de editare necesit testarea rezultatelor pe ct mai multe din navigatoarele existente, pe diferite platforme, iar aceasta este costisitor, dureaz, iar uneori este chiar i imposibil. Adesea se cere revizuirea codului i corectarea lui, pentru a nltura comenzile specifice unui mediu de elaborare sau unei platforme, iar asemenea probleme fr cunoaterea HTML sunt imposibil de soluionat. Uneori poate fi mult mai uor s elaborezi o pagin n HTML dect s nvei un editor specific de Web-pagini.

Deci, studierea HTML urmrete, n primul rnd, scopuri didactice i instructive pentru a nelege mai bine arhitectura Web-paginilor i a standardului SHTML. n al doilea rnd, cunoaterea HTML este absolut necesar pentru corectarea modificarea unor Web-pagini, pentru asigurarea funcionrii lor corecte pe diferite platforme hardware - software. Pentru un Web designer profesionist este absolut necesar i cunoaterea unor editoare specializate a Web-paginilor. 1.2. Obiective urmrite 1. Iniiere n problematica crerii Web-paginilor, Web site-urilor. 2. nsuirea marcajelor (tag-urilor) de baz a HTML. 3. Crearea-modificarea unui Web site sub genericul Explorarea HTML. 4. Crearea-modificarea unui Web site de prezentare a unei teme recomandate. 1.3. Ce este necesar a cunoate pentru atingerea scopului Dei pentru vizualizarea unei pagini de Internet este necesar un singur instrument, denumit navigator (browser), pentru construirea unui asemenea site vei avea nevoie de o serie vast de tipuri de programe. n primul rnd, orice pagin de Internet este scris n limbajul HTML (Hyper Text Markup Language). Din orice navigator putei vedea codul-surs al unei pagini de Web. Acesta este scris n HTML, un limbaj care este interpretat de ctre navigator n momentul ncrcrii unei pagini Web. HTML este un limbaj simplu, care poate fi nvat n maximum o sptmna-dou. Dificultatea apare abia n momentul conceperii unui site i se refer la coninutul acestuia, la schema de organizare i elementele de design aferente.
7

O pagin HTML poate fi creat ntr-un program simplu de redactare a textului, ca de exemplu, binecunoscutul NotePad, distribuit mpreun cu Windows 9x. O alt modalitate de creare a unei pagini Web este folosirea unui program utilitar. Utilitarele se mpart n doua categorii: programe de tipul WYSWYG (vezi punctul 3.3. al prezentei lucrri) sau programe ajuttoare. Pentru utilizarea programelor WYSWYG (de ex. Microsoft Front Page) nu este necesar cunoaterea limbajului HTML. Crearea site-ului are loc n mod intuitiv, programul facilitnd transformarea n codul HTML corespunztor. Dezavantajul programelor de acest fel este codul HTML creat de acesta care este excesiv de mare. Respectivul cod uneori poate s fie de cteva ori mai mare dect codul optimizat. n celelalte programe utilitare (de ex. HotDog, HomeSite) se editeaz direct codul HTML, programele oferind diverse unelte auxiliare. Avantajul const n posibilitatea de a controla n totalitate codul absolut, un posibil dezavantaj putnd fi considerat necesitatea de a cunoate limbajul HTML. De asemenea sunt necesare cunotine prealabile de construire a imaginilor, schemelor, obiectelor sonore, videoclipurilor (PhotoShop, Visio, Corell Draw i altele). Pentru site-uri mai sofisticate, cu animaie, aciuni - este necesar programarea n Perl, DHTML, CGI, programarea unor scripturi i apleturi n Java, Java Script etc.

2. CONINUTUL I ORDINEA LUCRRILOR Coninutul lucrrilor de explorare se exprim prin executarea exemplelor aduse n text, a exerciiilor, precum i gsirea rspunsurilor la ntrebrile formulate. Totodat, se recomand efectuarea a dou lucrri integrale care s ofere o evaluare mai adecvat a cunoaterii disciplinei. Ordinea executrii lucrrilor nu este obligatorie. ns pentru cei ce construiesc prima lor Web-pagin i primul Web site se recomand ordinea consecutiv de la simplu spre complexitate sporit. 2.1. Sarcina de explorare (studiere) HTML ncepnd cu prima lucrare de laborator i terminnd cu ultima, se exploreaz posibilitile HTML. n paralel se creeaz un Web site de structur liniar, arborescent, sau stea, care conine un numr de Web-pagini, egal cu numrul lucrrilor de laborator sau numrul compartimentelor explorate. Fiecare pagin este o prezentare succint a marcajelor temei explorate, care poate fi utilizat la susinerea lucrrilor de laborator i care la finele cursului va constitui un mini-conspect de studiere a HTML-lului, sub form de Web site. Fiecare i fixeaz ceea ce i-a fost mai interesant, sau de folos, sau mai instructiv, sau, pur i simplu, ca note pentru memorare, sau ca exemple demonstrative etc. Prezentarea acestui site, n fond individual, este o condiie de prim atestare a studentului, conform graficului de studii. Un exemplu sugestiv de cuprins al compendiului de explorare a HTML vezi anexa 3, precum i exemplul 10. Not: Pstrai rezultatul lucrrilor de laborator pe harddisc i salvai copiile pe o dischet portabil. Utilizai copiile
9

pentru versiuni noi i explorri ulterioare. Cu fiecare lucrare siteul iniial se va complica, incluznd noi pagini, noiuni, marcaje, efecte etc. 2.2. Sarcina creativ (cristalizare cunotine) O alt lucrare integral const n crearea unui Web site pe o tem individual. Sugestiv o list de teme la cursul Reele de calculatoare este prezentat n anexa 5. Dar poate fi propus orice alt list de lucrri creative, inclusiv teze anuale. Aceast sarcin se va realiza dup iniierea n HTML, precum i dup acumularea informaiilor suficiente despre tema selectat. Prin aceast lucrare se verific aptitudinile de orientare a studentului n problematica construirii Web-paginilor, se cristalizeaz cunotinele despre HTML. Totodat, n aceast lucrare sunt semnificative ideile de proiect, ipotezele, precum i structurarea materialului expus sub form de hipertext. Lucrarea creativ poate fi efectuat n trei etape. n primul rnd, se va studia i nelege (de dorit destul de bine) informaia la tem. n scopul selectrii informaiilor utile pentru tema site-ului este recomandat studiul mai multor izvoare (studierea preliminar a literaturii, regsirea informailor pe Internet etc.) Prima etap se va finaliza cu o colecie de materiale pentru tema selectat (pe hrtie i/sau pe supori magnetici). La al doilea pas se evalueaz materialele. Sunt necesare anumite decizii de planificaremachetare a siteului, de construire a imaginilor, schemelor etc. Este necesar a selecta poriuni potrivite de text, grafice, imagini, animaie etc, care vor intra n site. Stabilirea cu precizie a unei coloane vertebrale a paginii constituie esena proiectrii Web-paginii. Pentru a obine efectul dorit, nainte ca pagina s existe, este necesar s ne-o imaginam.

10

i, n sfrit, studentul este impus a aciona. El trebuie s-i selecteze mijloacele de realizare, s planifice etapele, s-i mobilizeze resursele personale i cele ale mediului (de laborator) pentru a elabora site-ul planificat, inclusiv codul HTML, scheme, imagini etc. Prezena materialelor grafice n site-ul creativ este recomandat insistent. Deoarece cnd ai multe a spune, dar dispui de puin loc i timp - o schem nlocuiete mii de cuvinte. i anume aa trebuie fcut prezentarea pe Internet. Pe de alt parte, pentru a construi o schem, este necesar a studia destul de profund tema, de a utiliza medii de construire a schemelor, imaginilor etc. Prezentarea site-ului creativ la finele cursului este o condiie necesar i suficient pentru atestarea la sfrit de semestru, sau pentru admiterea la examene, sau de examinare, n funcie de cursul studiat i obiectivele stabilite. La susinerea lucrrii creative este important att coninutul, miezul, ct i forma prezentrii, structurarea materialului. Se evalueaz utilizarea posibilitilor lucide de expunere a temei sub form de hipertext, dar care, totodat, trebuie s dezvluie complet subiectul temei, s sesizeze principalul. Legturile activate vor avea ca efect o desfurare a temei n adncime, pe diagonal ori combinat, dup dorina i nevoile asociative ale cititorului, plus posibilitatea de pstrare a ateniei lui prin utilizarea legturilor grafice, foto, audio etc. Structurarea temei va fi efectuat (cel puin) n trei niveluri (tem, capitole, paragrafe), iar, n caz de necesitate, i mai mult. Fiecare nivel va avea propriul su cuprins, referine n adncime i/sau napoi, dup necesiti. Web site-ul va conine texte, liste, scheme, tabele, forme, eventual un glosar de termeni, cu referine directe i inverse. Volumul maximal al siteului este limitat la 10-15 pagini A4, cu mrimea maximal a fontului de 14 pt (puncte). n cadrul evalurii este important a deosebi un Web site de o carte
11

tradiional. Este necesar a utiliza posibilitile avansate de hipertext i hipermedia. O tem creativ poate fi executat doar de o persoan a seriei de studii. n funcie de numrul de ore prevzut cursului, ca teme individuale (conform anexei 5) pot fi titlurile de nivelul I, cu plan de expunere conform titlurilor de nivelul II, sau titlurile de nivelul II cu tot ce este sub eleca plan al expunerii temei, sau titlurile de nivelul III. Un exemplu sugestiv de cuprins al sarcinii creative la una din temele cursului Reele de calculatoare vezi anexa 4.

12

3. CONCEPTE DE BAZ 3.1. HYPERTEXT Prin hipertext se nelege un document (evident n sensul utilizat n informatic: fiier creat printr-un editor, procesor de texte etc) care conine, pe lng text (coninutul clasic al unui document), grafic, imagini, animaie, nregistrri audio, legturi cu alte documente. Un hipertext poate fi gndit ntr-un spaiu cu mai multe dimensiuni, fiecare ax reprezentnd un alt mijloc de comunicare: text, audio, video. Conceptul de hipertext este deosebit de important i esenial n nelegerea facilitilor i modului de utilizare a sistemelor de tip NetScape, Internet Explorer, Harvest sau altele. Indiferent de metoda de stocare (hrtie sau suport magnetic), informaia se poate prezenta n una din urmtoarele forme de organizare: 1) Organizare liniar de tip "roman". n acest caz, informaia trebuie parcurs n ordine, de la nceput la sfrit, pentru a putea obine o imagine de ansamblu asupra ei. Un roman nu poate fi citit dect succesiv, n ordinea liniar. 2) Organizare sub forma ierarhic, arborescent, pe niveluri (de exemplu, n capitole, seciuni i subseciuni). Spre deosebire de roman, ordinea de parcurgere a textului n acest caz nu mai este strict consecutiv i poate fi stabilit de creator, n funcie de scopurile urmrite, cunoaterea domeniului etc. Cititorul se poate menine la niveluri mai generale sau poate aprofunda acele noiuni care i se par mai interesante prin parcurgerea doar a unor ramuri din arborele n care este organizat textul. 3) Organizare asociativ. n acest caz, pe lng textul propriu-zis, exist o tabel de indeci n care sunt enumerate subiectele i/sau conceptele importante din carte mpreun cu
13

pagina unde pot fi regsite. n acest mod, cititorul poate cuta direct un anumit subiect interesant. De asemenea, n text exist referiri la alte subiecte, detalieri separate ale unor concepte, definiii, enunuri i demonstraii, trimiteri n josul paginii la bibliografie sau la anexe. Plecnd de la analizele i experimentele fcute asupra memoriei i a modalitilor de reprezentare i prelucrare a cunotinelor de ctre om, se poate spune c memoria noastr de lung durat este de tip asociativ. Mai mult, cunotinele noastre sunt foarte strns legate unele de altele, formnd o reea complex. nvarea unei noiuni noi se face prin asocierea ei cu altele vechi, "tiute". Altfel spus, avem o organizare de tip reea a informaiei, ns o organizare foarte versatil, care se modific rapid n funcie de factori psihologici (motivaie, stare de spirit, stimuli externi) sau chiar fizici. Bineneles c cea mai adecvat form de organizare a informaiilor tiinifice este cea asociativ, n reea, care este cea mai apropiat de modul uman de a gndi. Sistemele dezvoltate conform acestei direcii sunt aa-numitele sisteme hipertext i hipermedia. Scheletul pe care sunt organizate informaiile ntr-un astfel de sistem l reprezint un graf ale crui noduri sunt conceptele importante ale domeniului i ale crui arce sunt relaii ntre aceste concepte. Avantajele hipertextului devin evidente atunci cnd se iau n considerare dezavantajele inerente ale mediului de informare tradiional: cartea tiprit n care prezentarea informaiei este exclusiv liniar. Detaliile sunt inserate n text, abtnd atenia cititorului de la general ctre specific. Mutarea de la un subiect la altul este greoaie, presupunnd o cutare care, de cele mai multe ori, este plictisitoare. Revenirea la subiectul anterior este, de asemenea, greoaie. Hipertextul menine capacitatea de stocare a unei mari cantiti de informaie, oferit de cartea scris, dar nltur toate limitrile contextuale. n contrast cu liniaritatea
14

"obiectiv" a informaiei tiprite, sistemul hipertext ofer utilizatorului o liniaritate "subiectiv". Aceasta nseamn c, n loc s urmeze cursul normal (consecutiv) al documentului, utilizatorul poate alege o anumit cale de explorare dintr-o mulime de astfel de ci posibile, definite de cel care a creat hipertextul. Rezult deci c decizia privind ordinea prezentrii informaiei trece din sarcina celui care elaboreaz documentul n sarcina celui care l citete, cu meniunea c anumite limitri de parcurgere ar fi totui necesare pentru a asigura o citire coerent a documentului, aceasta din urm fiind o sarcin a creatorului. Hipertextul permite evitarea modului tradiional de citire a unui document: linie dup linie, pagin dup pagin etc. Legturile activate produc o desfurare a documentului n adncime, pe diagonal etc., dup nevoile utilizatorului plus posibilitatea de pstrare a ateniei cititorului prin utilizarea legturilor grafice, audio etc. Pe msur ce performanele calculatoarelor au sporit, noiunea de hipertext s-a extins n mod natural spre cea de hipermedia (un subdomeniu al aplicaiilor multimedia). Nodurile unei reele hipermedia pot conine imagini, sunete, texte, chiar aciuni, sau orice combinaie a acestora. n cazul acestor sisteme, unei legturi i se pot asocia aciuni dintre cele mai diverse, cum ar fi afiarea unei fotografii nsoit de un text explicativ, derularea unui microfilm sau a unei melodii, toate cu posibilitatea stoprii, a revenirii n starea anterioar sau a continurii explorrii prin alegerea unei alte legturi. Principalele elemente ale unui sistem hipertext sunt: 1) Nodurile (paginile) Nodul (pagina) este un bloc de informaii cuprins n reeaua sistemului hipertext. Sunt poriuni de text a cror semnificaie este mai mult sau mai puin unitar, dup cum a gndit-o creatorul hipertextului. Nodurile pot cuprinde

15

fragmente de text, scheme, imagini, secvene de sunete, aciuni executabile sau orice combinaie a acestora. 2) intele inta ("target") este o parte dintr-un nod care constituie originea unei legturi ctre alt nod. Este de obicei, un cuvnt, un grup de cuvinte sau o alt informaie din nod (de exemplu o poriune dintr-o imagine). Pe ecran, intele apar cu o culoare sau strlucire diferit de cea a textului obinuit ("highlighted"). Atunci cnd cursorul atinge o astfel de int, ea devine activ i capt un aspect special (de exemplu, se coloreaz altfel dect restul intelor). 3) Legturile Fiecare nod este legat de alte noduri din reeaua hipertextului, ceea ce permite utilizatorului s treac de la un nod la altul. Existena unei legturi ntre dou noduri A i B ale hipertextului ofer utilizatorului aflat n nodul A posibilitatea de a accesa direct nodul B, fr a mai trece prin alte noduri. Pstrnd analogia cu cartea scris, legturile pot fi privite ca nite "semne de carte" marcate la care cititorul se poate transfera oricnd. 3.2. NAVIGAREA O serie de firme productoare de software au elaborat browsere - aa numitele navigatoarenite programe, care permit vizualizarea Web documentelor. Clienii WWW sunt navigatoare interactive tipice aflate sub controlul utilizatorului. n pofida standardului SHTML, exist o mare diversitate de navigatoare ce ruleaz pe diferite platforme hardwaresoftware, create de diferii productori, fapt care ngreuneaz standardizarea Web tehnologiilor pe Internet. De exemplu: Navigatoarele Mosaic, ViolaWWW pot fi utilizate pe platforma X Windows

16

 Navigatoarele Cello, WinWeb sunt pentru platforma MS Windows, OS2. Cele mai cunoscute firme Microsoft cu Internet Explorer i NetScape cu produsul omonim i-au creat propriile extensii i practic au acaparat piaa. Pentru mai multe informaii (o lista de navigatoare care se modific continuu i caracteristicile lor) vezi: http://www. ici.ro/navigator/navigatoare.shtml. 3.3. EDITOARELE HTML n prezent se utilizeaz pe larg editoare HTML de tip WYSIWYG (What You See Is What You Get - ceea ce vezi, acea i este) cum ar fi Netscape Navigator Gold, Microsoft Front Page i altele. Utilizatorul nu vede "coninutul intern", codul documentului, dar vede numai rezultatul Web afirii. El lucreaz la fel cum lucreaz procesoarele de texte cu destinaie general, cum ar fi Microsoft Word, Word Perfect sau altele. Multe din procesoarele de texte cu destinaie general, inclusiv cel mai rspndit Microsoft Word, au convertoare ce permit salvarea documentelor sub form de cod HTML. O alt clas rspndit de editoare destinate pentru elaborarea de documente - HTML (HotDog, Ken Nesbitt Web Editor etc) funcioneaz similar cu mediile de programare interactiv de genul Visual Basic sau Borland Delphi. Astzi nu este cunoscut numrul exact al editoarelor HTML. Ele apar ca ciupercile dup ploaie. Multe din editoarele HTML sunt gratuite i se pot copia de pe Internet. Altele cost pn la 200$. Unele sunt dependente de platform, altele nu. n decurs de civa ani a aprut i continu progresul numit webomania; au fost elaborate circa 200 editoare HTML, majoritatea dintre care sunt de tipul WYSIWYG.

17

Exist editoare care pot edita simultan mai mult de 100 de pagini, cu servicii avansate, pentru extensii Netscape, sau Explorer, preferenial destinate pentru forme sau tabele, editoare mici i mari, cu interfaa intuitiv, construire pas cu pas a paginii etc. Multe din editoarele HTML combin funciile complete ale unui navigator i ale unui editor WYSIWYG, sunt bazate pe tehnologia SGML, au suport pentru cteva versiuni HTML, conin fiiere de acces pentru colaborare autorizat, abloane (template-uri) HTML, posibiliti de "undo" multiple, accesul la codul-surs HTML etc. Editoarele HTML sunt mprite pe platforme: Amiga, DOS, Mac, NeXTstep, OS/2, Unix, VMS i Windows. Exist editoare HTML independente de platform, sau pentru platforme multiple (Easy HTML, HTMLjive), sau doar pentru o platform. Actualmente sub UNIX sunt cunoscute circa 25 editoare (WebMagic Phoenix HoTMetaL i HoTMetaL PRO). Cel mai mare numr de editoare (peste 100) este pe platforma Windows i numrul lor crete continuu (4W Publisher, Aspire, CGI*Star, E-Publish Internet, FrontPage, Hippie, HotDog Professional, HoTMetaL i HoTMetaL PRO, Hypertext Master, WebElite, WebMania!). Pentru mai multe informaii - vezi o list complet de utilitare de editare HTML cunoscute pn la aceast or i mprit pe platforme: http://www.ici.ro/navigator/editlist. 3.4. World Wide Web World Wide Web, sau WWW, sau Web, sau W3 a aprut la sfritul anilor '80, cnd cercettorii de la CERN (Laboratorul European pentru fizica particulelor) au dezvoltat o reea pentru a avea acces mai uor la documentele produse de diverse laboratoare. n 1990 ei au introdus un navigator doar pentru texte i au dezvoltat HTML. n 1991 au implementat
18

Web la CERN. n 1992 cercettorii de la CERN au introdus Web n comunitatea Internet i cu aceasta a nceput revoluia. Ceea ce deosebete WWW de celelalte componente ale Internetului este tocmai hipertextul, care i-a gsit n Web calea ideal de exprimare. Toate documentele accesibile n Web sunt legate ntre ele, indiferent de serverul pe care sunt memorate i indiferent de locul geografic unde sunt amplasate. Trecerea de la un document la altul, de la un subiect la altul, de la un loc la altul etc produce o impresie puternic asupra utilizatorului, i d acestuia certitudinea c totul este potrivit intereselor lui, potrivit ritmului propriu de nelegere. Cele trei componente majore pe care le conine sistemul WWW: Interfaa utilizator consistent. Capacitatea de a ncorpora o mare varietate de tehnologii i tipuri de documente. Capacitatea de a accesa informaia univoc n pofida unei mari varieti a tipurilor de calculatoare i a software-ului rulat de acestea, i aceasta ntr-un mod ct mai simplu din punctul de vedere al utilizatorului. Cea mai important caracteristic a Web-ului o constituie simplitatea modului de acces la resurse, care n mare msur a determinat succesul Web tehnologiilor i a cauzat webomania. 3.5. HTML HTML - Hypertext Markup Language - este un limbaj de marcare pentru hipertext care este neles de toi clienii de WWW. Este compus dintr-un set de elemente care definesc un document i ghideaz afiarea acestuia. Documentele HTML ofer mijloace pentru furnizarea de legturi hipertext la o varietate de medii: de la text la imagini, sunete, filme MPEG, fiiere Postcript i alte formate. HTML este bazat pe SGML (Standard Generalized Markup Language)
19

i reprezint elemente de document la nivel logic. Se pot crea documente HTML direct sau utiliznd programe de conversie din alte formate ca LaTex, Framemaker, Word pentru Windows i altele. HTML a fost proiectat s poat opera cu funcionaliti multimedia ale WWW. Este de menionat c HTML este un limbaj n continu evoluie i c diferite navigatoare WWW pot recunoate diferite seturi de HTML. HTML 1.0 i HTML+ au aprut n 1990, respectiv 1993. HTML 2.0, aprut n 1994, a fost prima versiune standardizat. Ea conine 49 de marcaje. HTML 3.0 a aprut n 1995. Versiunea cuprindea extensii importante, cum ar fi marcaje pentru notaii matematice, bannere etc. n prezent nu mai este utilizat. HTML 3.2, introdus n 1996, este considerat ca succesorul versiunii 2.0, ncorpornd o serie de marcaje din HTML 3.0 i extensii Netscape. HTML 4.0, introdus n 1996, este considerat ca succesorul versiunii 2.0, ncorpornd o serie de marcaje din HTML 3.0 i extensii Netscape. HTML este un limbaj de marcare, un limbaj care descrie cum trebuie s fie formatate textele. Termenul de "marcare" provine din timpurile vechi, cnd editorii fceau marcaje pe documente pentru a indica tipografului - n acele timpuri un om - ce font-uri s foloseasc .a.m.d. HTML conine comenzi explicite pentru formatare, precum i comenzi care vor indic modul cum se efectueaz legturile documentului, cum vor aprea paginile documentului etc. Un document HTML poate fi fcut public, dac este amplasat pe un calculator care are acces la Internet. Un document fcut public poate fi vzut din orice punct al Internetului.

20

Avantajul utilizrii unui limbaj de marcare fa de unul n care nu se utilizeaz marcarea explicit const n faptul c este simplu de scris un program de navigare, care s interpreteze comenzile de marcare. Documentele scrise ntr-un limbaj de marcare pot s fie comparate cu cele obinute utiliznd procesoare de text de tip MS Word sau Word Perfect. Acest tip de sisteme pot s memoreze fiierele utiliznd marcaje ascunse pentru ca formatarea s se poat reface ulterior. Nu toate procesoarele de texte funcioneaz aa. Procesoarele de text pentru Macintosh, de exemplu, pstreaz informaia n structuri de date separate. Prin standardizarea i includerea comenzilor de marcaj n fiecare fiier HTML, devine posibil ca orice program de navigare s poat s citeasc i s formateze orice pagin Web. Posibilitatea formatrii paginii recepionate este foarte important, deoarece o pagin poate s fie construit utiliznd un ecran cu 1024 x 768 pixeli utiliznd culori codificate cu 24 de bii, dar s-ar putea s fie necesar afiarea ntr-o mic fereastr de pe un ecran cu 640 x 480 pixeli i utiliznd culori codificate pe 8 bii. Standardizarea oficial a limbajului HTML este fcut de Consoriul WWW, dar diferii furnizori de navigatoare i programe de navigare au adugat o serie de extinderi proprii. Aceti furnizori sper ca cei care construiesc pagini de Web s utilizeze aceste extensii astfel nct cei care vor s citeasc aceste pagini s aib nevoie de programe de navigare care tiu s interpreteze extensiile respective. Astfel de abordri ngreuneaz sarcina standardizrii limbajului HTML. Specificaia curent a limbajului HTML se poate consulta pe serverul http://www.w3.org/. 3.6. Elemente de baz ale documentelor HTML

21

Vom deosebi mai multe categorii de elemente ale unui document HTML (Web-pagin): Elemente de titlu i descriptive ce conin date despre document i pentru motoarele de cutare HEAD, TITLE, ISINDEX, ADRESS, BASE META, LINK, SCRIPT, STYLE. Blocuri de structur, care specific structura documentului, cum ar fi mprirea n paragrafe (alineate) (DivizoriP, DIV, BR, HR), titluri i subtitluri: H1, H2, H3, H4, H5, H6, liste (UL, OL, DL), tabele (TABLE), forme (FORM), texte preformatate (PRE), aranjarea n pagin i spaierea (center, blockquote), desprirea prin linii HR .a. n mod general un Web-document utilizeaz un set de caractere, ferestre, cadre, are un fundal, poate conine texte, liste, tabele, imagini, obiecte audiovizuale sau legturi spre ele, linii de demarcare etc Textul const din alineate (paragrafe), care pot fi centrare n pagin sau alipite (alineate) la marginea stnga, la dreapta, sau la ambele margini. Pot fi grupri de text (liste, tabele), cu spaierea dorit (de la margini) cu afiarea n una sau mai multe coloane. Fonturile utilizate pot fi de diferite tipuri, dimensiuni i culori, definite implicit (ca n anteteH1, H2,...H6), prin marcare logic sau fizic. Elementele de text pot fi de tipul text simplu, fr marcaje i stiluri, text preformatat (afiat cu caracteristicile sale n modul n care este cules), text sau caractere marcate prin stiluri fizice (TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP .a), text sau caractere marcate prin stiluri logice (EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, .a). Listele pot fi definite ca liste numerotate, marcate, liste de definiii, sau liste mixte, ncapsulate una n alta. Elementele unui tabel permit dimensionarea i aranjarea tabelului n pagin, dimensionarea i colorarea chenarului (liniilor de frontier), afiarea textului n tabel, colorarea (liniilor, coloanelor, celulelor). Tabelul poate avea un titlu. Pot
22

fi grupri de tabele, precum i tabele ncorporate (unul n altul, dar nu se prea recomand). n pagin de asemenea pot fi i elemente speciale: A(ancor), IMG (imagine), APPLET, BASEFONT, SCRIPT, formulare de colectare a datelor: INPUT, SELECT, TEXTAREA, cadre sau ferestre (FRAME), efectul de micare (Marquee) etc. Instruciunile de declarare a imaginilor permit poziionarea lor n pagin, afiarea liniei de contur, ntitularea imaginii. n structura unui formular intr elemente de checkbox i radio, elemente ascunse, meniuri de selectare a valorilor din nite liste fixate. Marcajele pentru titluri, paragrafe, liste, tabele afecteaz blocul de text coninut n ansamblul sau, schimbnd fonturile i spaierea vertical. Marcajele pentru stilurile caracterelor afecteaz modul n care sunt afiate cuvintele coninute: cursiv, ngroat, subliniat etc. Stilurile fizice indic navigatorului cum s afieze textul coninut. n continuare, n compartimentul 4 al prezentei lucrri, sunt descrise elementele de baz ale unui Web document (sau document HTML), prezentate exemple i sarcini de explorare. 3.7. Web design nainte de a elabora orice Web-pagin este necesar: A formula scopul. A alege tipul i a determina structura site-ului, fundalului. A determina lista tabelelor, schemelor, imaginilor. A perfecta cuprinsul. A determina legturile interne i externe, modul de plasare al legturilor. A aranja elementele n pagin etc.
23

Pentru ca un site Web s poat fi accesat de toate persoanele interesate, trebuie s parcurgem trei etape principale: Proiectare - realizarea efectiv a paginilor Web-pe propriul calculator. Publicare (pe Internet) - amplasarea site-ului construit pe o gazd Web. Promovare - aducerea la cunotina publicului. ns i aceasta e puin. Este necesar o continu administrare a siteului, asigurarea inerii la zi a informaiilor de pe site, nnoirea lor, introducerea modificrilor sugerate, desvrirea site-ului i altele. 3.7.1. Proiectarea unui Web-site. Prin proiectarea unui site se nelege procesul de realizare efectiv a paginilor Web pe calculatorul dvs. Pentru acest lucru este nevoie de imaginaie, dar i de cteva principii generale (reguli), cum ar fi: Pagina Web trebuie s aib un scop bine definit. Paginile Web trebuie s se ncarce repede, timpul mediu acceptabil fiind nu mai mare de 10-20 secunde. Pagina Web trebuie structurat astfel nct s permit vizitatorilor o navigare uoar. Imaginile i graficele trebuie reduse la minimum pentru a permite o ncrcare rapid. E necesar a folosi un header (antet) i footer (not de subsol) standard pentru fiecare pagin. Adresa E - mail ar trebui inclus n fiecare pagin. Pentru realizarea efectiv a unui site Web (proiectare), pe calculatorul dvs. trebuie s parcurgei urmtorii pai: Planificare - Machetare - Programare. Planificarea include stabilirea scopurilor, a structurii coninutului i aspectului grafic, mijloacelor de construire a site-ului, precum i altor resurse (timp-termene, finane etc).
24

Machetarea. Machetul este un set de reguli pentru amplasarea elementelor Web-paginii, cum ar fi mrimea fonturilor, coloanelor de text, distanei dintre elemente etc. Este un schelet (o coloan vertebral) pe care se vor mbrca elementele de design i elementele informaionale ale paginii. Machetul (ablonul) este un element de baz al stilului paginii, care asigur unitatea, integritatea ei, face documentul uor lizibil, comod pentru percepere. n calitate de ablon al Web-paginii create se poate utiliza o pagin din cele existente. Pentru realizarea propriului site nu este necesar a inventa din nou bicicleta. n fond s-au stabilit mai multe abloane de Web-pagini, care se utilizeaz pentru anumite tipuri de prezentri pe Internet, cum ar fi prezentarea firmei, produsului, e-comer, e-marketing etc. Utilizai Web-paginile accesate care v impresioneaz ca exemple demne de urmat pentru elaborrile proprii. Pentru aceasta este suficient s le salvai pe calculatorul dvs. i s le adaptai la necesitile proprii, folosind forma, butoanele, efectele potrivite etc. Programarea (cel puin a unor scripturi i aplleturi) se utilizeaz de regul pentru parolarea site-ului, crearea bazelor de date, prelucrarea datelor colectate etc. ns programarea este un subiect aparte. Este de menionat faptul c exist o serie de servere ce conin scripturi i appleturi utile pentru cele mai multe cazuri de Web design, cu utilizarea lor gratuit i cu condiia referinei la autor. De ce aceasta este o alt tem. Principalul este c putei selecta funcia necesar n una din arhivele indicate mai jos, unde ele sunt adunate i descrise cu mare grij. http://www.clickxchange.com/. - Script Locker, o colecie de CGI-scripturi, este comod pentru nceptori, conine multe scripturi i n ele te poi uor orienta.

25

http://www.cgi-resources.com/. - Cgi Resources cea mai plin arhiv a CGI-scripturilor. http://www.download.ru/. - Posibil cea mai mare colecie a CGI-scripturilor n limba rus. http://www.webclub.ru/. - O serie de scripturi utile n rus. 3.7.2. Publicare Deoarece site-ul proiectat i creat va trebui s fie accesibil tuturor vizitatorilor, urmeaz etapa de publicare a site-ului i parcurgerea altor pai importani, cum ar fi: gzduire; transfer; verificare. Ctre nceputul etapei de publicare se presupune ca ai terminat realizarea efectiv a site-ului Web pe calculatorul dvs. n continuare, va trebui s v gndii la alegerea unui nume de domeniu pentru site-ul respectiv. Acest nume trebuie s fie sugestiv i s simbolizeze afacerea dvs. Dup aceea va trebui s alegei o gazd Web. La fel ca i numele de domeniu, avei de ales ntre obinerea unei gazde Web gratuite sau o gzduire (Web hosting) contra cost, n schimbul unor facilitai suplimentare. n cazul gazdei gratuite pe site-ul dvs. va rula reclama companiei ce va oferit gazda. Apoi urmeaz etapa de transfer efectiv al fiierelor (prin FTP) ntre calculatorul dvs. i gazda Web-pe care ai ales-o. Dac ai folosit un editor HTML (Microsoft Front Page sau Macromedia Dreamweaver, de exemplu), avei posibilitatea s folosii opiunile de transfer de fiiere incluse n aceste programe. Dup ce ai realizat transferul fiierelor, sunt obligatorii operaiunile de verificare final i validare HTML. Trebuie precizat c verificrile paginilor Web vor trebui s fie efectuate i ca etape intermediare, pe parcursul realizrii efective a site-ului Web.

26

n final, va trebui s ntreinei i s actualizai site-ul, dac vrei ca vizitatorii dvs. s revin, i aceti pai trebuie urmrii cu maxim atenie. Unele planuri i oferte de hosting vezi: - http://www.clickxchange.com/. - Web Host Directory. - http://www.holm.ru/. - Hosting gratuit de la Agava Software. 3.7.3. Promovarea site-ului Pentru ca site-ul dvs. s poat fi vzut de ct mai muli vizitatori, trebuie s ncepei o campanie de promovare. Nici cel mai bine realizat site Web nu valoreaz nimic, dac el nu este adus la cunotina publicului. Promovarea unui site Web este o aciune complex i de durat. Ea se poate face folosind una sau mai multe metode de promovare: Motoare de cutare Directoare Marketing prin email Ziare electronice Anunuri publicitare Liste de discuii Newsgroup Schimb de banere Schimb de legturi Inele Web Fiiere semntur Autoresponder Pagini FFA Premii Promovare offline.

27

Creai o baz de date care s includ aciunile dvs. de promovare. De exemplu, pentru promovarea cu ajutorul motoarelor de cutare alctuii un tabel care s cuprind urmtoarele informaii: Numele motorului de cutare /directorului Data nregistrrii Timpul necesar pentru realizarea nregistrrii Cuvintele cheie folosite Codul care atest c site-ul a fost nregistrat. Dup ce ai completat formularul online de nregistrare a site-ului trebuie s ateptai cteva zile sau cteva sptmni pana cnd el va fi nregistrat, n funcie de motorul de cutare ales.

28

4. EXPLORARE HTML 4.1. Structura documentului HTML 4.1.1. Instruciuni HTML i noiuni de baz HTML-document, (HTML-cod, sau cod-surs, al documentului HTML) - document scris n limbajul de marcare a hipertextului (HTML). Se conine ntre marcajele <html> i </html>. Instruciunile HTML (numite i marcaje sau tag-uri) ncep cu o parantez unghiular deschis <urmat imediat de numele instruciunii, unul sau mai multe atribute ale instruciunii (opional), apoi de o parantez unghiular nchis>. ntre parantezele unghiulare i numele instruciunilor nu se admit spaii. Atributele au forma nume atribut = valoare atribut. Majoritatea instruciunilor sunt perechi. Cea de nceput se numete marcaj de deschidere, iar cea de sfrit - marcaj de nchidere. Marcajul de nchidere, spre deosebire de cel de deschidere, nu conine atribute sau spaii. Mai mute spaii ntre cuvinte n codul HTML, i/sau ntre atributele marcajelor, se convertesc de navigator ntr-un singur spaiu, cu excepia preformatrii. Not. Navigatorul ignor marcajele pe care nu le nelege i pe cele scrise greit. Pentru ierarhizarea seciunilor documentului se pot utiliza diferite niveluri de titluri (antete), acestea variind prin mrime i "ngroare". Titlurile nu sunt numerotate, dar navigatoarele afieaz titlurile astfel nct s ias n eviden fa de textul obinuit. Lungimea unui titlu nu este limitat.

29

Limbajul HTML definete ase niveluri de titluri ntr-un document (vezi tabelul 1). Standardul HTML recomand (!) ca un document s conin o parte descriptiv (<head>,<title>) i una funcional (corpul documentului). Astfel forma de baz a unui document HTML este prezentat n tabelul 1. Tabelul 1, i alte tabele cu instruciunile HTML, n unele cazuri potrivite, conin i exemple ale aciunii marcajelor. Tabelul 1. Forma recomandat a unui HTML document
Instruciune
<html>

Descriere, exemple

Marcajul HTML de deschidere - indic faptul c documentul este scris n limbajul HTML; se utilizeaz de navigatoare Marcajul HEAD - antetul paginii; suplimentar mai conine cuvinte-cheie, care se utilizeaz de motoarele de cutare <head> pentru regsirea paginii i alte informaii; tot ce este n antet nu apare n fereastra navigatorului Marcajele pereche TITLE. Aici se scriu cteva cuvinte <title>Titlul sugestive despre coninutul paginii. Aceste cuvinte vor apare paginii</title>pe bara de titlu a navigatorului. Dac pagina este adugat ntr-o list favorit, aceste cuvinte apar ca nume al paginii </head> Marcajul de nchidere a antetului paginii Marcajul de deschidere - ncepe corpul documentului propriu <body> zis, afiat de navigator Marcarea unui antet (titlu, subtitlu) de document, de mrimile: <h1>... </h1> ......... <h6>... </h6> H4 H5 H6

H1 H2

H3

<p>...</p>

Aranjarea textului n paragrafe (alineate) - las o linie liber i ncepe textul de la nceput de rnd. Marcajul </p> este opional. Dac nu se folosete marcajul n forma container, paragraful se va termina la ntlnirea unui alt marcaj <p> ntrerupe linia de text n locul marcajului. Urmtorul text se va afia de la nceputul rndului Marcajul BODY de nchidere indic sfritul corpului 30

<br> </body>

</html>

documentului Marcajul HTML de nchidere

4.1.2. Setul de caractere utilizat de HTML Documentele HTML cuprind caractere de 8 bii din setul de caractere Latin-1 (ISO 8859). Pentru caractere speciale, care lipsesc din acest set, precum i pentru cele care se pot confunda cu elementele de comand s-au stabilit codificri ca n tabelul 2. Aceste caractere sunt definite ntr-un mod tipic: "&" + litera mare sau mic + semnul diacritic (care lipsete n ISO 8859). La fel se scriu n codul HTML o parte din caracterele utilizate de HTML ca elemente de sintax, cum ar fi parantezele unghiulare, ghilimelele etc. Pentru a face s apar n navigator caracterul din coloana Caracter (tab.2), n codulsurs trebuie s avem Codul HTML (tab.2). Not. Nu toate navigatoarele afieaz orice caractere speciale din tabelul 2, precum nici lista menionat nu este aceiai pentru diverse versiuni ale HTMLlului. Tabelul 2. Caractere speciale
Caracter & < > Codul HTML &amp; &lt; &gt; ampensand mai mic (less than) mai mare (greater than) Semnificaie

Pentru a obine majuscule, le folosim n codul-surs n locul literelor mici. Ex.: &Acirc; =
&aacute; a mic cu accent ascuit (acute)

&agrave; a mic cu accent grav

31

&acirc; &atilde; &auml; &aring; &ccedil; &ntilde; &oslash; &szlig; &iquest; &pound; &cent; &copy; &reg;

a mic cu accent circumflex a mic cu tild a mic cu dou puncte (umblaut) a mic cu inel (ring) c mic cu sedil n mic cu tild o mic barat (cu slash) s-z mic ligaturat semnul de ntrebare inversat lir sterlin cent simbolul de copyright simbolul de marc nregistrat chiar dac n codul-surs avem mai multe spaii, navigatorul afieaz unul singur; &nbsp foreaz spaii multiple; se poate folosi pentru a scrie o serie de paragrafe cu alinieri constante ale elementelor ghilimele

&nbsp;

"

&quot;

Not. Caracterele speciale mai pot fi introduse prin codul lor hexazecimal n forma: &#+ codul hexazecimal+;. De exemplu &#222;&#195; 4.1.3. Prima sarcin de explorare. Modul de lucru 1. Pornim un editor de texte simplu (Notepad, sau IE) pentru a edita codul-surs.
32

2. Culegem exemplul 1. 3. Salvm fiierul cu FILE - SAVE AS... 4. Lansm Windows Explorer, Windows Commander sau alt utilitar similar, mergem n directorul unde am salvat exemplul i l deschidem cu dublu-click pe mouse. Va porni navigatorul care este setat ca navigator implicit (dac avem instalate mai multe). Exemplele din prezenta lucrare au fost probate pe Internet Explorer, versiunea 5.5, n continuare IE. Sau pornim navigatorul IE. Dac ncearc stabilirea conexiunii la reea, dai Cancel. Apoi FILE-OPEN din meniul navigatorului, BROWSE deschidem directorul n care am salvat exemplu i selectm fiierul necesar OPEN, apoi OK. 5. Trebuie s apar o pagin cu textul explicativ conform exemplului 1. 6. Dac vom face modificri n codul-surs, pentru a le putea vedea n navigator trebuie salvat fiierul.htm (FILESAVE), apoi folosim butonul Refresh - reafiare. Not. Editorul codului-surs poate fi deschis pentru ntreaga sesiune de lucru, fr s fie nchis pentru vizualizarea rezultatelor. nsi IE permite editarea codului-surs. Pentru acesta selectai WIEW i opiunea respectiv. 7. Putem continua s dezvoltm aceast pagin. Vizualizai documentul, examinai codul HTML. 8. Extragei cte un exemplu din marcajele HTML utilizate (pentru prima sarcin). 9. Verificai aciunea marcajelor-perechi prin tergereamodificarea celui de sfrit sau/i de nceput. Unele marcaje de nchidere pot fi nlocuite prin cele de deschidere. Care sunt ele (verificai pe exemple). 10. Explicai pentru ce servesc fiecare din marcajele din exemplele aduse.
33

11. ncercai s programai Web-afiarea codului-surs al exemplului 1. 12. Culegei i explorai exemplele 2 i 3. Indicaii suplimentare ntre parantezele unghiulare i denumirile marcajelor nu trebuie s avem spaii dect dac spaiile separ numele marcajului de atributele lui sau atributele ntre ele. Dac utilizai editorul de texte MS Word pentru editarea codului HTML sau oricare alt editor, pstrai fiierul sub form de text simplu, cu extensia fiierului .htm, sau .html. Pentru a vedea rezultatul, nu este nevoie s fim conectai la Internet. Pentru editarea Web-paginilor pot fi utilizate editoare speciale HTML (vezi p.3.3) sau MS Word. n ultimul caz salvai fiierul utiliznd filtrul respectiv (cod HTML sau Web-pagin). La editarea textelor, explorarea i modificarea lor utilizai comenzile de editare, copiere, mutare blocuri etc. Alturi de marcajele utilizate mai exist i altele. Fiecare marcaj poate fi combinat cu atribute, comentarii etc. Mai multe detalii despre HTML vezi Ghidul programatorului http://werbach.com/barebones, http://werbach.com/web/wwwhwelp. 4.1.4. Exemple de explorare Scop. Studierea marcajelor obligatorii de structur a documentelor, antete. Divizarea textului n alineate. ntreruperea forat a alineatului. Exemplu de utilizare a caracterelor speciale Textul "A&B" are valoarea <100> se va scrie n HTML &quotA&ampB&quot are valoarea &lt100&gt
34

Diacriticile , se vor scrie astfel &Acirc&acirc, &Icirc&icirc, Exemplul 1cel mai simplu document Not: Codul-surs al exemplelor, precum i fragmentele afirii lor la ecran, n scop de claritate i transparen, nu vor conine diacriticele limbii rmne.
<html> <head> <title> Exemplu 1(denumirea ferestrei, sau paginii)</title> </head> <body> <H1> Notiuni generale despre HTML</H1> <P> In HTML deosebim marcaje pare si<BR> marcaje impare, care au doar marca de inceput. </P> <P> Totul ce se contine intre aceste marcaje - <BR> reprezinta un alineat </P> Marcajul P nu este obligatoriuggfgn. <P> Acest fisier este de tip html, poate fi deschis si<BR> redactat in orice editor de texte. Poate fi vizualizat <BR> doarin editoare destinate HTML. </P> </body> </html>

Fragmentul semnificativ al Web afirii vezi mai jos, figura 1.

35

Figura 1. Rezultatul rulrii exemplului 1. Exemplul 2Antete, alinierea antetelor i paragrafelor

<html> <head> <title> Exemplul 2 Antete, Alinierea antetelor i paragrafelor </title> <H1 ALIGN=CENTER> Salut lume!(titlul cel mai semnificativ - H1, centrat)</H1> <H2 ALIGN=RIGHT> Salut lume !(titlul de nivelul 2, alineat la dreapta)</H2> <H6 ALIGN=LEFT> Salut lume !(titlul cel mai mic H6,
36

aliniat la stnga)</H6> </head> <body> <P> Mai jos se demonstreaz alinierea textului alineatelor </P> <DIV> Textul alineatului, ca si in MS Word, poate fi alineat - alipit la marginea din stnga. Aceasta aliniere este implicit. </DIV> <DIV ALIGN=CENTER> la centru </DIV> <DIV ALIGN=RIGHT> sau la marginea din dreapta.</DIV> <DIV> Pentru un mai bun control vizual - marcajele pot fi structurate ca in prezentul exemplu, fiecare din rnd nou, cu spaiere de nceput, ce red structura marcajelor. Dar acest lucru nu este deloc obligatoriu. Se recomand pentru comoditate, mai ales la depnarea Web-paginii, dar i pentru introducerea modificrilor n cadrul limitei lungimii liniei ecranului. </DIV> <P ALIGN=JUSTIFY> Observai diferena dintre ultimul si penultimul paragraf alinierea la ambele margini - se obine prin mrirea spaiilor dintre cuvinte la afiarea textului de ctre IE. Pentru un mai bun control vizual, marcajele pot fi structurate ca in prezentul exemplu, fiecare din rnd nou, cu o spaiere de la nceputul rndului, ce red structura marcajelor. Dar acest lucru nu este deloc obligatoriu. Se recomand pentru comoditate, mai ales la depnarea Web-paginii, dar i pentru introducerea modificrilor n cadrul limitei lungimii liniei ecranului. </P> </body> </html>

Exemplul 3 ntreruperea forat a alineatului, comentarii

37

<!-Acesta este un comentariu, nu se afiseaza de browser --> <html> <head> <title>Exemplul 3 - intrerupere fortata a liniei - BR</title> <H4 ALIGN=LEFT> BR Este comod, de exemplu, pentru afisarea versurilor</H4> </head> <P>Limba noastr&atilde-i o comoar&atilde<BR> Din ad&acircncuri desfundat&atilde.<BR> Un sirag de piatr&atilde rar&atilde<BR> Pe mosie rev&atildersat&atilde.<BR> </P> <H5> (A.Mateevici)</H5> </body> </html> Fragmentul semnificativ al Web afirii vezi figura 2

Figura 2. Rezultatul rulrii exemplului 3.

4.1.5. Informaii pentru motoarele de cutare

38

n general n antetul unei pagini Web, ntre marcajele <head> i </head>, exist mai multe marcaje META, cu atribute name - content perechi. Exemplu: <html><head><title>Titlul dorit</title> <meta content="text/html; charset=windows-1252" httpequiv = Content-Type> - indic navigatorului c este un fiier HTML; charset stabilete tipul de caractere (n general windows-1252), dar exist i altele. <meta name=keywords content="o list de cuvinte, separate prin virgul">. Pagina va fi listat de un motor de cutare (la care a fost nscris site-ul) n cazul unei cutri n care s-au folosit cuvinte din aceast list. <meta name=description content="O fraz care descrie pe scurt coninutul paginii">. n cazul unei cutri dup cuvinte-cheie, motorul de cutare ne d o list de pagini. Pentru fiecare pagin (site) din list apare titlul ei (dat cu marcajul TITLE) urmat de o fraz (cea de la name=description content="o fraz care descrie..."). Dac nu avem n marcajul META acea fraz, motorul va indexa dup prima fraz din pagin. Tot ea va fi afiat la o eventual cutare. <meta name=author content="numele dvs., e-mail etc"> numele autorului. Adresa e-mail. 4.1.6. ntrebri de autocontrol i exerciii. 1. Care este diferena dintre un Web document i un fiier HTML? 2. Care este forma general a unui fiier HTML? 3. Care este cauza elaborrii a ctorva sute de editoare HTML? 4. Care este sensul cuvntului de marcare n HTML? 5. Care marcaje definesc partea descriptiv a Web documentului? 6. Care sunt elementele principale ale unui Web document?
39

7. Ce este un alineat, o linie de document? 8. Ce este un hipertext? 9. Ce este Web designul? 10. Care este semnificaia Web designului? 11. Ce este un Web document? 12. Ce este un Web document multimedia? 13. Ce este un Web site? 14. Ce reprezent HTML, care este mecanismul lui de aciune? 15. Ce tipuri de elemente sunt prezente n limbajul HTML? 16. Cum se introduc ghilimelele, parantezele unghiulare i alte semne speciale n codul-surs al HTML? 17. De ce este necesar HTML, care este destinaia sa, ce probleme soluioneaz? 18. De ce sunt necesare Esc - caracterele n HTML? 19. Este oare raional studierea HTML, cnd exist attea editoare specializate? Dac dacare sunt motivele? 20. Pentru ce se utilizeaz termenii fiier HTML, cod-surs HTML, Web document? Ce reflect aceti termini? 21. Prin ce difer un document obinuit de un hipertext, care sunt avantajele hipertextului? 22. La ce servete instruciunea meta name, care sunt perechile cele mai utilizate? 23. Cum se poate face ca o pagin s fie regsit ct mai des? 24. Culegei exemplele 1-3, modificai valorile atributelor i sesizai aciunea marcajelor. 25. Obinei afiarea semnelor diacritice ale limbii romne , , , , . 26. De ce nu ntotdeauna se afieaz caracterele diacritice ale limbii romne (&Scedil, &Tcedil, codurile hexazecimale &#186; &#195; &#227; &#238; &#254 etc)? 27. Ce trebuie fcut pentru ca semnele diacritice s fie afiate? 28. Schimbai titlul (numele) paginii exemplului 1.

40

29. Afiai textul BUNA ZIUA, LUME!!! sub form de titluri n descretere h1,.., h6 i invers, de la h6 spre h1 (n cretere). 30. Repetai sarcina 29, dar cu aranjarea succesiv a fiecrui titlu la stnga, centru, dreapta n cel mai econom mod de scriere (a codului HTML). 4.2.Formatarea caracterelor, organizarea textului 4.2.1. Instruciuni i atribute utilizate Poriunilor de text dintr-un document le pot fi asociate atribute, care definesc aspectul lor, cum ar fi dimensiunea fontelor, culoarea textului, fundalul etc. Seciuni din text pot fi separate ca alineate, cu spaierea din stnga, dreapta, nainte, dup alineat sau prin trasarea unei linii orizontale intre ele. Asocierea caracteristicilor poate fi efectuat prin marcarea fizic, cu indicarea valorilor atributelor (stiluri fizice, cu indicarea direct a valorilor din mai multe posibile), sau asociere implicit a caracteristicilor (stiluri logice, redate prin nume, ce au o singur valoare conform numelui). Marcajele utilizate vezi tabelul 3, 4. Exemple de explorarevezi nr 4-6. Tabelul 3. Marcaje de formatare a caracterelor i organizarea textului
Instruciune
<font atribute> </font>

Atribute
size = i color =

Descriere i exemple
Mrimea fontului: i = 1, 2,... 7; 1 = cel mai mic, 7 = cel mai mare Culoarea poate fi redat prin numele ei sau prin tripletul RGB (vezi p.4.2.2, tabelul 4 i 5)

41

O list de minimum 2 fonturi: face =" font1 = un font specific sistemelor Windows, font1, font2 = un font specific sistemelor Macintosh; font2,..." Dac navigatorul nu gsete instalat nici unul, va afia textul cu font proporional predefinit. <basefont atribute> </basefont> Mrimea fontului implicit al ntregii pagini: i = 1, 2,... 7; Dac nu este indicat - fontul implicit are mrimea 3; Nu are influen asupra textului din interiorul tabelelor Culoarea poate fi dat prin numele ei sau prin valoarea RGB Are influen i asupra instruciunii <hi> </hi>, dar nu i n interiorul tabelelor Centreaz textul pe orizontal. (text, imagine, tabel etc.) Textul este deplasat cu un tab fa de ambele margini (stnga i dreapta) ale spaiului disponibil (pagin, celul de tabel etc.), aa ca n prezenta celul Foreaz trecerea pe linie nou Left, right sau all: trece la linie nou cnd marginea din stnga (left), dreapta (right) sau ambele margini (all) ale ecranului sunt libere, de ex. pentru a aduce un text sub o imagine care nu ocup ntreaga lime a spaiului disponibil Paragraf (alineat) nou; este aliniat implicit la stnga, dac nu este n interiorul unui marcaj care face o alt aliniere

size = i

color =

<center> </center> <blockquote> </blockquote > sau <q></q> <br atribute>

clear =

<p atribute> </p>

42

align =

Paragraf aliniat la stnga (left) - este alinierea implicit, deci nu este necesar dect n interiorul unui marcaj care face o alt aliniere. Aliniat pe centru (center). Aliniat la dreapta (right). Pentru ambele margini aliniate (justify) Marcaj pentru blocuri de text (aliniat implicit la stnga dac nu este n interiorul unui marcaj care face o alt aliniere) Aliniat la stnga (left)- este alinierea implicit. Nu este necesar dect n interiorul unui marcaj care face o alt aliniere. Aliniat pe centru (center). Aliniat la dreapta (right). Observai spaiul din dreapta dintre text i marginea tabelului i distana dintre cuvinte, care este reglat astfel nct marginea din dreapta a textului s nu fie nereglat. Sesizai diferena fa de paragrafele cu align = right i fr align O linie orizontal, fr atribute:

<div atribute> </div>

align =

<hr atribute>

noshade Elimin umbra liniei: size=z Z = nlimea liniei (n pixeli); zmax = 7

X = limea liniei n pixeli sau procente din width=x spaiul disponibil (pagin, celul de tabel) aliniaz implicit pe centru; pentru x = 50%: Align = Alinierea liniei (n pagin, celul etc.). Pentru width =50% (n celula prezent) obinem: Left Center Right

43

Color = <body atribute> </body> bgcolor = backgro und = text = link = vlink = alink =

Culoarea (dat prin nume sau valoarea RGB), pentru color = #00ffff obinem: Definete nceputul i sfritul corpului documentului HTML Culoarea fondului paginii (dat prin nume sau valoarea RGB) Url - ul (adresa i numele) imaginii de fond a paginii Culoarea textului (nume culoare sau valoare RGB) Culoarea legturilor nevizitate (neactivate) din pagin (nume sau RGB) Culoarea legturilor vizitate din pagin (nume sau RGB) Culoarea legturilor n timpul click - ului (nume sau RGB)

leftmarg Deplasarea ntregului material din pagin fa de in = marginea din stnga (pixeli) rightmar Deplasarea ntregului material din pagin fa de gin = marginea din dreapta (pixeli) topmarg Deplasarea ntregului material din pagin fa de in = marginea de sus (pixeli) bgprope Primete doar valoarea "fixed"; dac derulm rties = pagina, fondul rmne fix <b> </b> <i> </i> <u> </u> Afieaz textul cu litere aldine (ngroate) Afieaz textul cu litere italice (nclinate) Afieaz textul subliniat

44

  <tt> </tt> <big> </big> <pre atribute> </pre>

Afieaz textul ca indice superior Afieaz textul ca indice inferior Text cu font monospaiu Text cu

font mrit + bold

Afieaz din linie nou textul preformatat, ca n codul surs, dar ia n considerare instruciunile HTML t e x t p r e f o r m a t a t, <b> adic aa cum arata el n</b> codul sursa din Notepad Afieaz din linie nou textul preformatat, ca n codul-surs, dar nu ia n considerare instruciunile HTML t e x t p r e f o r m a t a t, adic aa cum arat el n codul-surs din Notepad Afieaz textul taiat Evideniere logic puternic Stil logic de evideniere Informaii despre adres i autor Citare bibliografic Definiie de cuvn. Program sau variabil Listing de program

<xmp> </xmp> -

<strike> </strike> <strong> </strong> <em> </em> <address> </address> <cite> </cite> <dfn> </dfn> <var> </var> <code> </code>

45

<kbd> </kbd> <samp> </samp>

Text de la tastatur (keyboard) Exemplu de date introduse de utilizator

4.2.2. Redarea culorilor prin nume sau valoarea RGB Dup cum ai observat, elementele paginilor Web sunt colorate. Exist o serie de instruciuni HTML care au atribute prin care se specific culori (vezi tabelul 3). Culorile se pot specifica prin numele lor n englez: de ex.- red, white sau prin valoarea RGB - un grup de 6 cifre hexazecimale precedate de semnul # (de ex.: BODY BGCOLOR = "#FF0000" are ca rezultat un fond al paginii de culoare roie). R, G, B sunt iniialele culorilor de baza: R (Red = rou), G (Green = verde), B (Blue = albastru). Primele dou cifre din cele ase reprezint valoarea lui R, urmtoarele dou valoarea lui G, iar ultimele dou pentru B. Valorile pentru R, G, B variaz n diapazonul hexazecimal 00-FF (sau de la 000 pn la 256, n diapazonul zecimal). Tabelul 4 cuprinde numele a 16 culori (standardul de 16 culori) i echivalentul lor RGB. Pentru a obine culori care sunt afiate la fel pe orice platform (Windows, Macintosh etc), se recomand folosirea culorilor sigure Internet, redate prin numele lor. Tabelul 4. Atribute de fundal i culori
Destinaie (funcie) Instruciune HTML

Imagine fundal Culoare fundal Culoare text Culoare referin

<BODY BACKGROUND="URL"> <BODY BGCOLOR="#$$$$$$"> <BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$">

46

Link-uri vizitate Referine activate Culoare font Culoarea textului Linii de delimitare Culoare tabel Culoare i imagine fond celula Culoare chenar de cadru

<BODY VLINK="#$$$$$$"> <BODY ALINK="#$$$$$$"> <FONT COLOR="#$$$$$$"> <BODY TEXT="#$$$$$$"> <HR COLOR="#$$$$$$"> <TH BACKGROUND="URL"> <TH BGCOLOR="#$$$$$$"> <FRAMESET BORDERCOLOR="#$$$$$ $">

Tabelul 5. Culori exprimate prin nume i RGB

47

Albastru marin aqua #00FFFF Gri (sur) gray #808080 Bleumarin(albastr u nchis) navy #000080 Argintiu silver #C0C0C0

Negru black #000000 Verde nchis green #008000

Albastru blue #0000FF Verde citron lime #00FF00

Violet deschis fuchsia #FF00FF Maro (bordo) maroon #800000

Oliviu olive #808000

Violet purple #FF00FF

Rou red #FF0000

Verde inchis teal #008080

Alb white #FFFFFF

Galben yellow #FFFF00

4.2.3. Exemple de explorare Scop. Studierea marcajelor de formatare fizic i logic a caracterelor dimensiuni, culori i efecte speciale a fontelor. Aria de aciune a atributelor. Exemplul 4. Text preformatat
<HTML> <HEAD> <BODY BGCOLOR=PINK><FONT COLOR=#0000FF> <TITLE> Exemplul 4. Text preformatat </TITLE> <h4>Exemplul 4. Text preformatat<h4> </HEAD> <PRE> produs pret-cost transport valoare --------- ------------- ------------ ----------lapte 2.50 0.05 2.55
48

carne 42.00 oua 6.00 </PRE> </BODY> </HTML>

2.50 0.15

44.50 06.15

Rezultatul rulrii exemplului 4 vezi mai jos figura 3.

Figura 3. Rezultatul rulrii exemplului 4

Exemplul 5. Elemente de formatare caractere
<HTML> <BODY BGCOLOR="YELLOW">
<HEAD> <TITLE>Exemplul 5. Elemente de formatare caractere</TITLE> </HEAD> <B> Acest text </B> este ingrosat. <BR> <I> Acest text </I> este inclinat. <BR><U> Acest text </U> este subliniat. <BR><TT> Acest text </TT> este afiat cu caractere de tip monospaiu . <BR><S>Acest text</S> este barat. <BR>Acum este afiat un <SUB> indice </SUB>, iar acum un<SUP>exponent</SUP>.<BR> Acest<BIG>text este<BIG>afiat<BIG>tot mai<BIG>mare</BIG></BIG></BIG></BIG><BR> Acest text<SMALL>este afisat<SMALL>tot mai mic<SMALL></SMALL><BR>. <B><U>Acest text</U></B>este subliniat si ingrosat.<BR> Formula apei este<B>H<SUB>2</SUB>O</B> 49

</BODY> </HTML>

Rezultatul rulrii exemplului 5 vezi mai jos figura 4.

Figura 4. Rezultatul rulrii exemplului 5

Exemplu 6. Efecte aparente
<HTML> <HEAD> <BODY BGCOLOR="YELLOW"> <TITLE> Modelarea efectelor aparente </TITLE> </HEAD> <H3>Modelarea efectelor aparente<H3> <font size=1>U</font> <font size=2>R</font> <font size=3>C</font> <font size=4>A</font>
50

<font size=5>R</font> <font size=6>E</font> <font size=7>S</font> <font size=7>I</font> <font size=7>C</font> <font size=7>O</font> <font size=6>B</font> <font size=5>O</font> <font size=4>R</font> <font size=3>I</font> <font size=2>R</font> <font size=1>E</font> </BODY> </HTML>

Rezultatul rulrii exemplului 6 vezi mai jos figura 5

Figura 5. Rezultatul rulrii exemplului 6

4.2.4. ntrebri de autocontrol i exerciii 1. Care din marcaje se refer la organizarea textului? Aranjarea textului? 2. Care este aria de aciune a marcajului <font>? <basefont>? 3. Care este destinaia marcajului <font>? <basefont>? 4. Care este destinaia marcajului <p>? <div>? 5. Care este diferena dintre <pre> i <xmp>? 6. Care este diferena dintre marcajele <font>? <basefont>?

51

Care sunt posibilitile de formatare a caracterelor? 8. Care sunt posibilitile de formatare a alineatelor? 9. Care sunt caracteristicile implicite ale fonturilor? 10. Cte nuane se pot obine variind doar una din culori? Variind dou culori? Variind toate trei culori? 11. Ce caracteristici ale caracterelor pot fi indicate prin marcare, care sunt atributele? 12. Ce este o culoare sigur? Cte culori sigure se pot reda? 13. Ce semnific un stil fizic de formatare? 14. La ce servesc stilurile logice de formatare? 15. Prin ce difer divizorii P i DIV? 16. Prin ce difer stilurile logice de cele fizice? 17. Cum se poate ncepe un alineat imediat din urmtoarea linie, fr spaiere? 18. De ce n HTML culorile nu se redau doar prin tripletul de culori RGB? 19. Culegei exemplele 3-6, adugai noi atribute, schimbai valorile conform tabelelor 3-5, sesizai aciunea marcajelor i atributelor. 20. Exemplificai cteva marcaje de stiluri fizice cu diferite valori. 21. Exemplificai cteva marcaje de stiluri logice. 22. Explorai (numii) cteva moduri de indicare a mrimii fontelor. 23. Explorai cteva moduri de poziionare a textului n pagin (deplasare a marginilor). 24. Explorai cteva moduri de spaiere ntre alineate. 25. Explorai aciunea comenzilor XMP i PRE. 26. Alctuii propriul Curriculum Vitae (CV) conform Anexei nr 1. Fiecare compartiment s fie de o culoare diferit de celelalte.
7.

4.3. Alte organizri interne ale textului. Liste

52

Cnd n text sunt necesare careva enumerri ale datelor cu anumite caracteristici, se utilizeaz prezentri sintetizate sub form de listefiecare obiect din rnd nou, toate obiectele avnd aceeai ordine a caracteristicilor. Uneori aceste obiecte sunt ordonate n creterea sau descreterea unei caracteristici. Este posibil ordonarea inclus: n interiorul unei caracteristici dup o alt caracteristic. O atare organizare reprezint o form mai superioar a organizrii textului dect ca o lent nentrerupt de text; devine posibil parcurgerea selectiv a textului, vizavi de citirea lui consecutiv, regsirea rapid a anumitor obiecte din list etc. Listele pot fi incluse (ncapsulate) una n alta, pot fi modelate enumerri ierarhice. 4.3.1. Noiuni i marcaje utilizate List numerotat list de obiecte numerotate (numerotarea poate fi conform irului de numere naturale sau literelor alfabetului, sau numerelor romane). Se pot modela liste cu numerotri ierarhice. Liste marcateenumerri evideniate printr-un semn special. List de definiii (de termeni)amplasarea termenului pe linie separat, urmat de definiia lui, pe o linie nou. Marcajele utilizate vezi tabelul 6. Exemple de explorare vezi nr 7.

Tabelul 6. Marcaje de construire a listelor

Instruciune Atribute Liste de finiii <dl> </dl> <dt> nceputul sfritul listei de definiii Termen (de definiie) Descriere

53

<dd>

Descrierea termenului de definiie Liste neordonate (marcate)

<ul atribute> </ul>

type=

nceputulsfritul listei marcate Forma marcajului: circle, square, disc (implicit) Element de list Liste ordonate (numerotate)

<li>

<ol atribute> </ol>

type= start=

nceputulsfritul listei numerotate Tipul numerotrii: A, a, I, i, 1 (implicit) Cu ce valoare ncepe numerotarea (implicit cu prima) Element de list

<li>

4.3.2. Exemple de explorare Scop. Studierea marcajelor de organizare a listelor marcate, ordonate i listelor de definiii. Exemplul 7 Exemplul ce urmeaz const din patru liste. Numele - este o list numerotat cu cifre. Urmtoarea - seria paaportului i destinaia - este o list numerotat cu literele mici ale alfabetului latin. Caracteristica bagajelor este marcat cu un ptrat. Iar valorile caracteristicilor este o list numerotat cu A,B,C,...

54

Not: 1. Observai c elementele unui nivel al listelor se aliniaz la aceeai distan de la marginea stng. 2. Dac alineatul are mai multe linii - toate se afieaz la aceeai distan de la marginea stng. 3. Atragei atenia - listele pot fi ncadrate una n alta. Codul-surs al exemplului 7:
<HTML> <HEAD> <TITLE>Exemplu de liste</TITLE> </HEAD> <BODY BGCOLOR="fuchsia"> <H2 ALIGN="LEFT"><FONT COLOR=RED>LISTA BAGAJELOR <BR> PASAGERILOR RUTEI 7021</FONT></H2></FONT> <OL> <LI><I><B><U><FONTCOLOR=BLUE> AIOANEI PETRU</FONT></U></B> <FONT COLOR=MAROON> <UL TYPE=a> <LI>Serie la pasaport:A12763876 <LI>Punctul unde urmeaza:Moscova</FONT> <UL TYPE=SQUARE> <LI><B><FONTCOLOR=GREEN>DATE DESPRE BAGAJ:</FONT></B> <UL TYPE=A> <FONT COLOR=PURPLE> <LI>Nr.Biletului:AA-1209 <LI> Nr. Bagajului: 000001 <LI> Greutate: 25kg</FONT> </UL> </UL> </UL> <BR> <LI><I><B><U><FONTCOLOR=BLUE>BAGRIN ION</FONT></U></B> <FONT COLOR=MAROON> <UL TYPE=a> <LI>Serie la pasaport:A12700876 <LI>Punctul unde urmeaza:Moscova</FONT> <UL TYPE=SQUARE>

55

<LI><B><FONTCOLOR=GREEN>DATE DESPRE BAGAJ:</FONT></B> <UL TYPE=A> <FONT COLOR=PURPLE> <LI>Nr. Biletului:AB-0089 <LI>Nr. Bagajului:000698 <LI>Greutate:14kg</FONT> </UL> </UL> </UL> <BR> <LI><I><B><U><FONTCOLOR=BLUE>S.A.M.D... .</FONT></U></B> </OL> </BODY> </HTML>

Rezultatul afirii exemplului 7 vezi mai jos, figura 6. 4.3.3. ntrebri de autocontrol i exerciii 1. 2. 3. 4. 5. 6. 7. 8. Cnd este util organizarea textului n liste? Ce tipuri de liste sunt posibile de construit n HTML? Ce este o list ncorporat n alta? Care sunt marcajele de construire a listelor? Culegei exemplul nr 7. Vizualizai documentul HTML n Explorer. Verificai aciunea marcajelor, atributelor. Redefinii lista numerotat cu cifre arabe (numele de familie) ca list numerotat cu cifre romane. 9. Redefinii lista numerotat cu cifre arabe (numele de familie) ca list de definiii. 10. Aliniai datele despre bagaj (A,B,C) ntr-o linie, cu afiare din aceeai poziie, utiliznd marcajul PRE. 11. Modelai situaia exemplului conform p.10, dar cu mai multe bagaje pe un bilet. 12. Obinei afiarea liniilor de text fr spaii ntre linii. 13. Modelai situaia exemplului 11, dar n loc de marcajul PRE utilizai marcajul XMP. Sesizai diferena.
56

14. Efectuai alte transformri ale listelor n tipuri de liste, diferite de cele din exemplu.

Figura 6. Rezultatul rulrii exemplului 7 15. Conform numrului de ordine din registru construii o list specificat n anexa Nr. 2, care ar conine toate trei tipuri de
57

liste. Modelai liste ncadrate conform titlurilor de grup (ierarhice), utilizai comanda PRE pentru afiarea n coloane a elementelor listelor. 16. Structurai codul HTML aa ca s se deosebeasc fiecare element al fiecrei liste. 17. n cadrul realizrii sarcinii de explorare explicai ce ai studiat i cunoscut. 18. n cadrul realizrii sarcinii creative construii listele necesare. 4.4. Alte organizri interne ale textului. Tabele De cele mai multe ori este nevoie ca datele prezentate s fie sintetizate sub forma unui tabel, avnd astfel un impact mai mare asupra vizitatorului (o coloana lung de cifre i trei pagini de explicaii nu au acelai efect ca un mic tabel structurat i o imagine sugestiv !). Utilizarea tabelelor este foarte divers i frecvent. Marcajele de construire a tabelelor sunt folosite aproape n orice site, deoarece cu ajutorul lor: putem crea tabele propriu-zise; putem controla mult mai bine aranjarea n Web-pagin a elementelor (folosind tabele fr chenar, eventual tabele ncorporate n interiorul unor celule de tabel). 4.4.1. Noiuni i marcaje utilizate Limbajul HTML ia n considerare urmtoarele elemente pentru construirea unui tabel (unele sunt opionale): Titlul tabelului - un text explicativ care se refer la coninutul tabelului, instalat n prima linie a tabelului. Capul de tabeldenumirile (titlurile) colanelor (uneori a liniilor)un text ce sugereaz coninutul, unde se precizeaz ce fel de date sunt coninute n coloanele (liniile) respective.
58

Capul de tabel, amplasat ca regul imediat sub titlu, va fi scos n evident fa de restul liniilor prin ngroare ori n alt mod. Corpul de tabel (datele tabelului) reprezint coninutul propriu-zis al tabelului (valorile din celulele tabelului). Subsolul tabelului, amplasat ca regul sub corpul tabelului, reprezint liniile de sfrit cu date sumare, eventuale concluzii etc. Ca regul este evideniat. Titlul de coloane, de liniedenumirea coloanei sau a liniei. Denumirile pot fi ierarhicetitlul comun deasupra mai multor coloane sau din stnga, denumire comun a mai multor linii(exemplu - vezi tabelul de mai jos). In HTML, construirea unui tabel se face rnd cu rnd, specificnd celulele de pe fiecare linie. Liniile de tabel sunt orizontale. Coloanele sunt cele verticale. O celul de tabel este la intersecia unei linii cu o coloan. Se caracterizeaz de nlime, lime, culoare, fond, aliniere vertical, orizontal etc. Un tabel are frontiere externe delimitate de chenar i linii interne de demarcare a celulelor. ntr-o celul poate fi nscris un fragment de text, o imagine, un buton sau un alt tabel. Ultimul caz nu este prea recomandat. Ca regul, limea fiecrei celule (coloane) se definete o singur dat, la nceputul tabelului. Dac limea celulelor difer de la o linie la alta, atunci coloana capt limea celei mai mari celule. nlimea liniei este cea maximal dintre nlimile celulelor liniei. Atributele unor elemente de tabel (fond, culoare, grosime chenar etc) se definesc o singur dat. ns multe din elemente pot fi redefinite local pentru fiecare celul. Elementele definitorii, componentele unui tabel i marcajele utilizate vezi tabelul 7. Exemple de explorarevezi nr. 8, 9.

59

Tabelul 7. Marcaje de construire a tabelelor

Instruc-iune
<THEAD> </ THEAD> -

Atribute

Descriere
Titlul tabelului, un text explicativ asociat tabelului Culoarea de fond (a titlului) (valoare RGB sau nume culoare, vezi p.4.2.2, tabelul 4, 5) Corpul tabelului Culoarea de fond (a corpului tabelului) nceput /sfrit de tabel HTML Chenarul tabelului (liniile de frontier) (n pixeli) Culoarea fondului pentru tabel Imaginea de fond pentru tabel Spaiu ntre chenarul celulelor tabelului i coninutul lor (n pixeli)

BGCOLOR= <TBODY> </ TBODY> <TABLE ATRIBUTE> </ TABLE> BGCOLOR= BORDER= BGCOLOR= BACKGROU ND="URL" CELLPADDI NG =

CELLSPACIN Spaiu ntre celulele tabelului (n pixeli) G= WIDTH = Limea tabelului (n pixeli sau % din spaiul disponibil)

BORDERCOL Culoarea chenarului (nume culoare sau OR = valoare RGB) BORDERCOL Culoarea mai deschis a chenarului ORLIGHT= (stnga + sus) (nume culoare sau valoare RGB)

60

Culoarea mai nchis a chenarului BORDERCOL (dreapta + jos) (nume culoare sau ORDARK = valoare RGB) ALIGN = Aliniaz tabelul n dreapta (right) sau stnga (left) paginii; textul din jurul tabelului curge pe partea opus Spaiu pe orizontal n jurul tabelului (n pixeli) Spaiu pe vertical n jurul tabelului (n pixeli) Numrul de coloane ale unui tabel Ajustarea cadrelor n tabel - doar n IE Ajustarea riglelor n tabel - doar n IE Linie de tabel Culoarea fondului pentru ntreaga linie (valoare RGB sau nume culoare) Alinierea coninutului celulelor (left, center, right); implicit left nlimea liniei (n pixeli); n unele navigatoare nu funcioneaz, dar putei folosi height n TD Celul de tabel nlimea celulei; dac pe aceeai linie (TR) dai din greeal 2 valori diferite pentru height n TD, el va lua maximul pentru toate celulele liniei Limea celulei

HSPACE = VSPACE = COLS = FRAME = RULES = <TR ATRIBUTE> </ TR> BGCOLOR= ALIGN=

HEIGHT= <TD ATRIBUTE> </ TD> -

HEIGHT =

WIDTH=

61

BGCOLOR= BACKGROU ND = "URL" ALIGN = VALIGN =

Culoarea fondului pentru ntreaga celul (valoare RGB sau nume culoare) Imaginea de fond pentru celul Alinierea coninutului celulei pe orizontal (left, center, right); implicit left Alinierea coninutului celulei pe vertical: top (sus), middle (mijloc), bottom (jos); implicit middle Aliniaz celulele cu linia de baz a textului adiacent Aliniaz coloana fa de un anumit caracter (implicit caracterul ". ") Aliniaz marginile din stnga i dreapta ale textului Numrul de coloane pe care se ntinde celula Numrul de linii pe care se ntinde celula Nu permite desprirea textului pe linii n celul Poate fi folosit : - n loc de TD, dar coninutul va fi centrat i ngroat (bold); - mpreun cu TD pe aceeai linie Text explicativ asociat tabelului Alinierea textului (top = implicit, bottom, left, right)

ALIGN = BASELINE ALIGN = CARACTER ALIGN = JUSTIFY COLSPAN = ROWSPAN = NOWRAP

<TH> </ TH>

<CAPTION ATRIBUTE> </CAPTION>

ALIGN =

62

<COLGROUP> </COLGROUP > BGCOLOR = <COL ATRIBUTE> WIDTH = ALIGN = CHAR= BGCOLOR= <TFOOT> </ TFOOT> BGCOLOR =

mpreun cu marcajul <col> definete un set de definiii de coloane Culoarea de fond Fr atribute: aceeai lime pentru toate coloanele Limea coloanei, n pixeli, % sau "*" Alinierea textului pentru ntreaga coloan Alinierea textului fa de un anumit caracter Culoarea de fond Pentru liniile de sfrit ale tabelului Culoarea de fond a subsolului

Comentarii utile. Comenzile COLGROUP, THEAD, TBODY, TFOOT nu sunt neaprat necesare ntr-un tabel, dar uneori demarcarea fcut de ele este folosit de alte marcaje, de ex. <TABLE RULES = GROUPS>. Atributele de aliniere pot fi plasate n marcajele ce delimiteaz liniile i n marcajele ce definesc celulele. Dac plasm atributul ALIGN=left n marcajul TABLE, textul care urmeaz tabelului "curge" pe lng acesta (tabelul este aliniat n stnga ferestrei navigatorului, iar n dreapta sa se afieaz textul. Folosirea atributului ALIGN=right plaseaz tabelul n marginea dreapt, iar textul "curge" n partea stng a tabelului Atributele de culoare ale fondului pot fi diferite pentru orice element de tabel. Dac culoare se definete de cteva ori, atunci acioneaz ultima definiie.

63

4.4.2. Exemple de explorare Scop. Explorarea posibilitilor HTML de construiremodificare a tabelelor. Exemplul 8. Structurarea unui tabel
<HTML> <HEAD> <TITLE> Exemplul 8</TITLE> </HEAD> <H1>Cel mai simplu tabel din 2 coloane si 2 linii</H1> <TABLE BORDER=1> <!--nceputul tabelului --> <CAPTION> <!--Denumirea (titlul)tabelului --> TABELUL POATE AVEA UN TITLU </CAPTION> <TR> <!--nceputul primei linii de tabel--> <TD> <!--nceputul primei celule--> Prima linie, prima coloan (elementul a(1,1)) </TD> <!--Sfritul primei celule--> <TD> <!--nceputul celulei a doua--> Prima linie, a doua coloan (elementul a(1,2)) </TD> <!--Sfritul celulei a doua--> </TR> <!--Sfritul primei linii--> <TR> <!--nceputul liniei a doua de tabel--> <TD> <!--nceputul celulei a(2,1)--> Linia a doua, coloana nti (elementul a(2,1)) </TD> <!--Sfritul celulei a(2,1) --> <TD> <!--nceputul celulei a(2,2)--> Linia a doua, coloana a doua (elementul a(2,2)) </TD> <!--Sfritul celulei a(2,2)--> </TR> <!--Sfritul liniei a doua--> </TABLE> <!--Sfritul tabelei--> </BODY> </HTML>

Rezultatul afirii exemplului 8 vezi mai jos, figura 7.

64

Cel mai simplu tabel din 2 coloane si 2 linii

TABELUL POATE AVEA UN TITLU Prima linie, prima coloan Prima linie, a doua coloan (elementul a(1,1)) (elementul a(1,2)) Linia a doua, coloana nti Linia a doua, coloana a doua (elementul a(2,1)) (elementul a(2,2)) Figura 7. Rezultatul afirii exemplului 8 Exemplul 9. Un tabel mai sofisticat

<html> <head> <title> Exemplul 9.Un tabel mai sofisticat </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor=OLIVE text=MAROON> <table width="90%" border="20" BGCOLOR=PINK> <CAPTION><H2><FONT COLOR=RED>LISTA BAGAJELOR PASAGERILOR RUTEI 7021</FONT></H2></CAPTION> <tr> <td rowspan="2" width="4%">Nr.</td> <td colspan="3"> <div align="center">Date despre pasageri, destinatia</div> </td> <td colspan="4"> <div align="center">Identificare bagaj </div> </td> </tr> <tr> <td width="19%">Familia</td> <td width="16%">Seria Pas.</td> <td width="13%">Destinatia</td> <td width="11%">Nr. rutei</td> <td width="12%">Nr.biletului</td> <td width="12%">Nr.bagaj</td> <td width="13%">Greutatea(kg)</td> 65

</tr> <tr> <td>1</td> <td>Aioanei Petru</td> <td>A12763876 <br> </td> <td>Moscova </td> <td>7021</td> <td>AA-1209 </td> <td>000001 <br> </td> <td> 25</td> </tr> <tr> <td>2</td> <td>Bagrin Ion</td> <td>A12700876</td> <td>Moscova </td> <td>7021</td> <td>AB-0089 </td> <td>000698 <br> </td> <td>14</td> </tr> <tr> <td>3</td> <td>S.A.M.D</td> <td>...</td> <td>...</td> <td>...</td> <td>... </td> <td>... <br> </td> <td>...</td> </tr> </table> </body> </html>

Rezultatul afirii exemplului 9 vezi mai jos, figura 8.

66

LISTA BAGAJELOR PASAGERILOR RUTEI 7021

Date despre pasageri, destinatia Nr. 1 2 3 Familia Seria Pas. Destinatia Identificare bagaj Nr. Greutatea Nr.biletului Nr.bagaj rutei (kg) 000001 25 000698 14 ... ...

Aioanei A12763876 Moscova 7021 AA-1209 Petru Bagrin Ion A12700876 Moscova 7021 AB-0089 ... ... ...

S.A.M.D ...

Figura 8. Rezultatul afirii exemplului 9 4.4.3 ntrebri de autocontrol i exerciii 1. Care sunt elementele de baz ale unui tabel? 2. Care sunt caracteristicile comune pentru ntreg tabelul i comenzile de definire a lor? 3. Ce caracteristici poate avea o line de tabel? O coloan? O celul? 4. Ce este un titlu de tabel, de coloan, de linie i care sunt atributele de definire a lor? 5. Este sau nu necesar definirea limii fiecrei celule? Argumentai rspunsul. 6. Care sunt cele dou metode de dimensionare a tabelului? 7. Numii cteva metode de dimensionare a limii celulei, cnd sunt binevenite fiecare din ele? 8. Este definit imaginea de fond a tabelului i a celulei. Care din ele se va afia? 9. Este definit imaginea de fond a tabelului, a liniei de tabel i a celulei din linia data. Care din ele se va afia?

67

10. Care sunt posibilitile i comenzile de aliniere a datelor n celul? 11. Care poate fi coninutul unei celule? 12. Explorai comenzile de aliniere a coninutului unei celule. 13. Explorai comenzile de spaiere vertical i orizontal n jurul tabelului. 14. Explorai comenzile de spaiere vertical i orizontal a coninutului unei celule. 15. Explorai comenzile THEAD i CAPTION cu acelai text. Este vre-o diferen la afiare? Dac nuatunci care este sensul a dou comenzi similare? Dac dacare este diferena? 16. Construii un tabel ce conine toate nuanele culorii care se pot obine pentru R (din tripletul RGB). 17. Culegei exemplele nr 8 i 9. 18. Vizualizai documentele HTML n Explorer. 19. Verificai aciunea marcajelor, atributelor. 20. Variai valorile atributelor marcajelor comune pentru ntreg tabelul (culori i dimensiuni ale chenarului de sus, de jos, ale textului etc) i sesizai diferena. 21. Dup nr din registru selectai tabelul conform anexei 2, alctuii tabelul sub form de cod HTML. 22. Utilizai nume ierarhice de coloane - facei ca unele celule ale titlului s se extind pe mai multe coloane. 23. n cadrul realizrii sarcinii de explorare notificai marcajele HTML pentru construirea tabelelor. 24. n cadrul realizrii sarcinii creativerealizai tabelele proiectate. 25. Structurai codul HTML aa ca s se deosebeasc fiecare element al fiecrei celule de tabel. 4.5. Organizarea Site-ului. Referine

68

Una dintre caracteristicile de baz ale limbajului HTML este cea de structurare a publicaiilor ntr-o colecie de documente, ntre care exist legturi. n aa documente trecerea de la un document la altul se face prin intermediul legturilor (referinelor, linkurilor). HTML permite definirea de legturi i n interiorul unui document prin intermediul ancorelor. Un anumit cuvnt sau mai multe cuvinte consecutive pot fi marcate pentru a constitui o ancor de legtur. Textul marcat apare n alt culoare pe ecran i subliniat; selectndu-l cu mouse-ul (un click pe butonul din stnga), va determina afiarea pe ecran a poriunii de document sau a documentului asociat acestei legturi. 4.5.1. Legturile hipertext Legturile se realizeaz n general prin intermediul marcajului <A> </A>, cu urmtoarea sintax: <A HREF="nume fiier"> Text explicativ </A> unde: HREF este atributul ce conine calea ctre fiierul spre care arat legtura (HREF este o prescurtare de la Hypertext Reference); Nume fiier: numele fiierului sau ancorei ctre care se va efectua trecerea (saltul n cazul activrii); Text explicativ: Legtura cu fiierul solicitat se face prin selectarea textului (clic pe textul explicativ). Textul este afiat diferit fa de restul documentului (colorat diferit i subliniat). Acest mecanism asigur navigarea n serviciul WWW. Documentul la care se face trimiterea poate s fie att pe calculatorul curent, ct i pe oricare alt calculator din reea, n acest ultim caz trebuie s se specifice n faa numelui i adresa URL a serverului pe care se afl documentul. Tipuri i moduri de specificare a legturilor Localizarea specificarea: fiierului-int poate fi fcut prin

69

Referinelor absolute - specific ntreaga cale, de la directorul de nivelul cel mai nalt i pn la documentul cerut. Referinele absolute ncep ntotdeauna cu un slsh, urmat de succesiunea directoarelor pn la documentul referit. Referinelor relative - specific directoarele ctre documentul-int pornind de la documentul n care se afl referina (documentul de start). Specificarea caii se face ca n Unix, cu directoarele separate prin semnul /, indiferent de sistemul de operare n care lucrai. Prin ... se va specifica directorul aflat pe nivelul superior. Exemplu: HREF=".../imagini/buton.gif" specific o cale relativ ce ncepe din directorul printe al directorului curent, iar HREF=".../.../poze/poza1.jpg" specific o cale relativ ce ncepe dintr-un director aflat cu dou nivele mai sus dect directorul curent. Este recomandat utilizarea legturilor relative ori de cte ori este posibil, pentru ca documentele s fie portabile (mutarea unui document s nu afecteze legturile stabilite ntre fiierele componente). Legturi internereferine spre o ancor din acelai fiier; i legturi externe - spre un alt fiier. Legturi locale - dac fiierele se afl pe acelai calculator, eventual pe calculatoare din aceeai reea local. Legturi ndeprtate - dac fiierele legate se afl pe calculatoare din reele diferite (pe servere aflate la distan. n multe cazuri este nevoie s se creeze legturi ntre seciunile aceluiai document. Spre exemplu, atunci cnd documentul este o carte, un tutorial sau un curs vom simi nevoia crerii unui cuprins pentru fiecare capitol al documentului. Se va crea o legtur ntre fiecare tem din cuprins i seciunea din document care trateaz acea tem. Crearea legturilor interne se realizeaz prin utilizarea atributului NAME al marcajului <A>, care stabilete un cuvnt-cheie ce identific univoc paragraful-int:
70

<A NAME="cuvnt-cheie"> paragraf-int </A>. Folosirea marcajului cu atributul NAME poart numele de ancor. Atunci cnd se va face referin la aceast ancor, documentul va fi derulat n fereastra navigatorului pana cnd textul dintre <A> </A> ajunge n partea de sus a ecranului. Ancorele nu sunt afiate diferit fa de restul documentului ca n cazul legturilor. Referirea la o ancor n documentul de la care pleac legtura se face n acelai fel ca n cazul referirii unui ntreg document, adugndu-se simbolul # urmat de cuvntul-cheie din ancor: <A HREF="nume-fisier#cuvnt-cheie"> Text explicativ </A> Exemplul de mai sus arat c este posibil referirea la un anumit paragraf al documentului int, chiar dac acesta este local sau ndeprtat. Exemple de legturi. Legtura <a href="http://www.alt-server/alt-site/fiier.html">, plasat n orice fiier din site-ul nostru, indic o legtur absolut extern. Legtura <a-href="http://www.nume-server.com/numedirector/A/A1/a12.htm">, plasat n fiierul index.html, indic o legtura absolut spre fiierul a12.htm din site-ul dat. Legtura <a href = ".. /.. /index.html">, plasat n orice fiier din directorul A1 sau A2, indic o legtura spre fiierul index.html din site-ul dat. Legtura <a href = ".. /A /a.htm">, plasat n fiierul b.htm din directorul B, indic o legtur spre fiierul a.htm din directorul A. Legtura <a href = "A/A1/a12.htm">, plasat n fiierul index.html, indic o legtur spre fiierul a12.htm din site-ul dat.

71

De regul, dac documentul este prea lung, pentru parcurgerea lui rapid se poate defini un "cuprins" i selectarea unui element din cuprins va determina saltul direct n poriunea de text dorit (prin aa-numitele ancore):
<P><A HREF = "#1.">Introducere</A> <BR><A HREF ="#2.">Elemente HTML </A> <B><A NAME = "1.">1.</A.>Introducere</B> <P> Prezenta lucrare este un ghid de explorare HTML. <B><A NAME = "2.">2.</A> Elemente HTML</B>

Selectarea textului "Introducere"(ancora "#1.") va determina saltul n cadrul documentului n locul n care este definit ancora prin NAME. Marcajele utilizate vezi tabelul 8. Exemple de explorare vezi nr.10, 11. 4.5.2. Organizarea site-ului Organizarea Web site-ului (un ir de Web-pagini legate ntre ele). Site plat, cu topologia de stea complet legat, cu pagina de cap n centrul stelei, de regul conine un numr redus de pagini (ntre 5-9). Site liniar, numit i consecutiv, reprezint un ir nlnuit de pagini, care conine doar legturi nainte-napoi. Se utilizeaz mai rar. Arhitectura este binevenit pentru prezentri, instruciuni, manuale, n care materialul poate fi conceput doar n mod consecutiv. Site ierarhic (arborescent), structura cruia reflect structura fizic a arborelui documentelor. De regul aa site conine referine care leag diferite frunze, ramuri a arborelui, deci n form pur arborescent se utilizeaz rar. Site cu structur combinat. De regul la nivelul superior se utilizeaz structuri plate de documente (adnotri, cuprins etc.). Iar din acestea atrn struguri de documente

72

arborescente, care adesea au referine inverse (ctre prini). Frunzele acestor arbori pot fi documente plate sau liniare. Tabelul 8. Marcaje de legare a paginilor i referine
Instruciune <A ATRIBUTE> </A> Atribute Descriere Marcaj tip ancor Referin hipertext (legturi spre alte pagini folosind un text sau o imagine); ntre ghilimele nu trebuie s existe spaii; dac dorim s introducem legturi spre fiiere sau directoare al cror nume conine spaii (adic sunt formate din cel puin 2 cuvinte) trebuie s nlocuim spaiile cu %20. Definirea unei ancore

HREF = "URL"

NAME = "NUMEANCORA" HREF = "#NUMEANCORA " HREF = "URL # NUMEANCORA"

Referina ctre o ancor intern (din acelai fiier) Referina ctre o ancor extern (din alt fiier) Numele cadrului n care va fi afiat sursa definit cu HREF valori speciale: -top = ncarc pagina ntr-o fereastr nou, deasupra altor ferestre de pe ecran; -self = ncarc pagina n cadrul curent; este valoarea implicit; -parent = ncarc pagina n fereastra printe; -blank = ncarc pagina ntr-o fereastr noua, fr nume.

TARGET = " NUMECADRU"

73

<BASE ATRIBUTE> HREF = "ALT-URL"

"alt-URL"= "http://www.alteservere.com/alt-site/": putem specifica legturi relative spre fiiere situate pe alt site de pe alt server. Este folositor dac n fiier avem majoritatea legturilor relative spre celalalt site i site-ul este administrat tot de dvs. (altfel se poate schimba structura site-ului sau denumirea fiierelor sau directoarelor fr s tii i legturile vor deveni invalide)

Putem defini ancore i cu ajutorul instruciunii id = nume-ancor, care se poate ataa ca atribut aproape oricrei instruciuni. Mouse-ul plasat deasupra unei legturi face s apar pe bara de stare (deasupra butonului "start") adresa/directorul/ fiierului accesat de acea legtura.

Comentarii utile. Referinele relative au cteva avantaje: avem mai puin de tastat n codul surs: nu mai tastm http://www.nume-server.com/nume-director pentru fiecare legtur n parte; legturile vor funciona i n timp ce construim site-ul ntr-un director pe hard-disc; dac vom dori s mutm site-ul pe un alt server, nu trebuie s modificm nimic. Dac am avea legturi absolute pentru fiecare, ar trebui s nlocuim http://www.nume-server.com cu http://www. nume-nou-server.com. n cazul unui site de dimensiuni mici, care conine doar cteva pagini (fiiere), nu avem nevoie de o organizare mai complicat a site-ului (cu multe directoare). Am putea plasa toate fiierele n acelai director (pe hard-disc sau la adresa www.nume-server.com/nume-director/).

74

Pentru site-uri complicate, n scopul facilitrii administrrii, se recomand a avea cte un director pentru fiecare din tipurile de obiecte. 4.5.3. Exemple de explorare Scop. Recunoaterea structurilor de baz ale unui site, studierea marcajelor de organizare a referinelor, de legare a textelor. Planificarea site-ului individual. Exemplul 10. Cuprins (de primul nivel)
<html> <head> <title>Exemplul 10.Cuprins de primul nivel(index) </title> </head> <body bgcolor="#FFFFFF" text="#000000" background="back.jpg"> <h1 align="left"><font color="#0000CC">Compendu pe</font></h1> <h1>HTML</h1> <ol> <li><a href="c1.htm">Introducere</a></li> <li><a href="c2.htm">Elemente textuale</a></li> <li><a href="c3.htm">Crearea legaturilor si ancorelor</a></li> <li><a href="c4.htm">Formarea tabelelor</a></li> <li><a href="c5.htm">Introducerea imaginilor si sunetelor</a></li> <li><a href="c6.htm">Realizarea efectului marquee</a></li> <li><a href="c7.htm">Introducerea frame-urilor si formelor</a></li> </ol></center> </body> </html>

Rezultatul afirii exemplului 10 vezi mai jos, figura 9.

Compendu pe HTML
1.Introducere 2.Elemente textuale 3.Crearea legaturilor si ancorelor 4.Formarea tabelelor 5.Introducerea imaginilor si sunetelor 6.Realizarea efectului marquee 7.Introducerea frame-urilor si formelor

Figura 9. Rezultatul afirii exemplului 10

75

Exemplul 11. Cuprins de nivelul II, ancore

<html> <head> <title> Exemplul 11. Cuprins de nivelul II, ancore</title> </head> <body> <h3> 2. Elemente textuale </h3> <ul> <li><a href="#2.1"><b>Titlul paginii </b></a><b> </b></li> <li><a href="#2.2"><b>Blocuri de structura</b></a><b> </b><ul> <li><a href="#2.2.1"><b>Divizori</b></a><b> </b></li> <li><a href="#2.2.2"><b>Titluri si subritluri</b></a><b> </b></li> <li><a href="#2.2.3"><b>Alineate</b></a><b> </b></li> <li><a href="#2.2.4"><b>Liste </b></a></li> <li><a href="#2.2.5"><b>Tabele </b></a></li> </ul> </li> <li><a href="3"><b>Crearea legaturilor</b></a><b> </b><ul> <li><a href="#3.1"><b>Ancore</b></a><b> </b></li> <li><a href="#3.2"><b>Legare de texte </b></a><b> </b></li> </ul> </li> </ul> <h4><a name="2.">2.Elemente textuale</a> </h4> In continuare urmeaza textul sub titlul 2. <h4><a name="2.1">2.1.Titlui paginii </a> </h4> <p>:In general in antetul unei pagini Web, intre marcajele <BR> HEAD si /HEAD, exista mai multe marcaje META, <BR>cu atribute name - content perechi....</p> </body> </html>

Rezultatul afirii exemplului 11 vezi mai jos, figura 10.

76

2. Elemente textuale
Titlul paginii Blocuri de structura o Divizori o Titluri si subtitluri o Alineate o Liste o Tabele Crearea legaturilor o Ancore o Legare de texte

2.Elemente textuale
In continuare urmeaza textul sub titlul 2.

2.1.Titlui paginii
In general in antetul unei pagini Web, intre marcajele HEAD si /HEAD,exista mai multe marcaje META, cu atribute name-content perechi....

Figura 10. Rezultatul afirii exemplului 11 4.5.4 ntrebri de autocontrol i exerciii 1. 2. 3. 4. 5. 6. Ce este o legtur, o referin? Ce este o ancor? O referin local? Prin ce difer referinele interne de cele externe? Prin ce difer referinele absolute de cele relative? Care sunt avantajele referinelor relative? Comentai afirmaia Toate legturile ndeprtate sunt externe, dar nu i invers. 7. Care este comanda ce permite afiarea coninutului referinei ntr-o fereastr bine determinat? 8. Cum se va scrie un spaiu n identificarea referinei?
77

9. Ce este un site? 10. Care structuri de site-uri sunt rspndite? 11. Explorai posibilitile comenzii id = nume-ancor. 12. Alctuii cuprinsul site-lui de explorare a HTML n pagina index.htm. 13. Construii referinele din cuprins spre paginile site-ului i din fiecare pagin a site-ului spre cuprins. 14. n cadrul realizrii sarcinii de explorare completai compendiul cu marcaje i noiuni noi, conform temei curente. 15. n cadrul realizrii sarcinii creative - construii cuprinsul site-ului. 4.6. Operarea cu obiecte Scop. Familiarizarea cu problemele legate de includerea n componena site-ului a diverselor obiecte cum ar fi imagini, scheme, desene, fotografii, obiecte sonore(audio), filme (video), precum i pregtirea obiectelor, ataarea lor la site-ul creativ. 4.6.1. Introducerea imaginilor Cele mai spectaculoase efecte sunt obinute atunci cnd pagina conine imagini, ns nu numai ca aspect decorativ, ci i pentru a sublinia i mbunti mesajul transmis de publicaia electronic. Imaginile pot fi incluse intr-un document ca elemente de tip caracter, textul ncadrnd sau nu imaginea. Imaginea este un fiier de tip .gif sau .xbm (format X BitMap) care poate s se gseasc pe oricare din serverele WWW din reea. Textul care nsoete imaginea poate fi aliniat relativ la marginea superioar sau inferioar a imaginii sau n dreptul mijlocului imaginii (alinierea la marginea superioar este implicit).

78

ncrcarea imaginilor dureaz, din care cauz unele navigatoare permit setarea lor cu sau fr afiarea imaginilor. n ultimul caz n locul imaginii poate fi afiat un text alternativ (atributul alt), cu afiarea imaginii doar la cerina explicit a utilizatorului. O imagine poate fi declarat ca legtura ctre alt document HTML. De cele mai multe ori este preferabil s nu folosim imagini interne, deoarece, mai ales dac au o dimensiune mare, ncetinesc ncrcarea paginii, lucru contraindicat (nu e bine s abuzezi de timpul i aa limitat al vizitatorului). Imaginile externe se introduc prin stabilirea unui link ctre fiierul-imagine: <A HREF="tom3.jpg"> Poza extern </A> Se obine urmtorul link: Poza extern. Atunci cnd dorim s inserm n document mai multe imagini de mari dimensiuni (un album, de exemplu), este bine s folosim un tabel n celulele cruia s afim imaginile micorate (prin precizarea limii i nlimii), iar printr-un clic pe imaginea respectiv s se fac ncrcarea imaginii n mrime natural. Marcajele utilizate vezi tabelul 9. Exemple de explorare vezi nr 12. O serie de gif-uri animate interesante putei gsi pe site-ul www.animfactory.com.

Tabelul 9. Marcaje de includere a imaginilor

Instruciunea <img atribute> Atribute src = "url" alt = "text" Descriere Marcajul de includere a imaginii Adresa fiierului grafic (url absolut sau relativ) Textul alternativ care este afiat celor care navigheaz fr imagini

79

align =

Alinierea imaginii n pagin: right (dreapta), left (stnga = implicit); Alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos) nlimea imaginii (n pixeli sau %) Limea imaginii (n pixeli sau %) Mrimea chenarului din jurul imaginii (n pixeli), sau linia de contur Spaiu pe orizontal n jurul imaginii (n pixeli) Spaiu pe vertical n jurul imaginii (n pixeli)

height = width = border = hspace = vspace =

<caption>... Titlul imaginii </caption>

Not: Folosii ntotdeauna atributele width i height (exprimate n pixeli): ele rezerv n pagin un spaiu cu limea i nlimea specificate i permit afiarea paginii i a textului nainte de recepionarea imaginii de la server. 4.6.2. Introducerea sunetelor In documentele HTML se pot introduce i fiiere care conin sunete, folosindu-se marcajul <a> pentru crearea unui link spre fiierul extern. Formatele uzuale de reprezentare a sunetelor permit lucrul cu fiiere cu extensiile: .au, .wav, .mid .mp3. Aa-zisele mp3-uri sunt fiierele cele mai utilizate pentru stocarea melodiilor, pentru c asigur o compresie i o redare bun. De exemplu, o melodie de pe un CD audio obinuit necesit cam 30-60 MB, n timp ce aceeai melodie n format mp3 va avea 3-5 MB !!!

80

Dac dorim s includem o secven audio n paginile noastre, vom putea folosi unul dintre urmtoarele marcaje: Embed - permite inserarea unei secvene audio. n pagin va fi afiat un panou de control, de mrimi specificate, dotat cu butoane Play i Stop. Atributele marcajului sunt: SRC = "nume-fisier" - specifica numele fiierului (calea) ce conine secvena audio. Sunt permise formatele WAV, AU i MIDI. Width=mrime i Height=mrime - precizeaz limea, respectiv nlimea panoului de control. Autostart=true / false - dac valoarea este false, nu este redat melodia dect prin apsarea butonului Play. Controls=console / smallconsole - permite afiarea normal sau respectiv redus a panoului de control. Volume=numr - permite stabilirea volumului sunetului, valoarea permis fiind ntre 1 i 255. Loop=true / false - dac valoarea este true va reda sunetele la nefrit, altfel o singur dat. Bgsound - introduce n pagin sunete de fond; poate fi folosit doar n IE. 4.6.3. Introducere videoclipuri In documentele HTML se pot introduce i manipulri cu videoclipuri (doar n IE), folosind marcajul de baz img. Formatul uzual de reprezentare a videoclipurilor au extensia .avi. Dac dorim s rulm un videoclip n paginile noastre, vom putea folosi unul dintre urmtoarele atribute ale marcajului IMG: dynsrc="url.avi"- numele fiierului ce conine videoclipul; start=# - indic momentul startului clipului. Poate fi fileopen sau mouseover. Implicit este fileopen, dar se pot specifica amndou astfel <img start=fileopen, mouseover>; De exemplu:

81

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"

start=mouseover>. Loop = # - Bucla. Dac <loop=infinite> clipul va bucla

la nesfrit, dac <loop=1> - o singur dat. Este valoarea implicit. Un alt exemplu:
<img src="SAMPLE-S.GIF" dynsrc="SAMPLES.AVI" loop=3>; loopdelay=# - ntrzierea n milisecunde.

De exemplu:
<img src="SAMPLE-S.GIF" dynsrc="SAMPLES.AVI" loop=3 loopdelay=250>.

4.6.4 ntrebri de autocontrol i exerciii 1. Care sunt funciile instruciunii img? 2. Ce tipuri de obiecte pot fi ataate la site cu ajutorul comenzii img? 3. Cum poate fi poziionat o imagine? 4. Care este comanda de titlu a unei imagini? 5. Care este comanda liniei de contur a unei imagini? 6. Ce atribute se pot utiliza la redarea sunetelor, care sunt valorile posibile? 7. Ce atribute se pot utiliza la rularea videoclipurilor, care sunt valorile posibile? 8. Ce medii pot fi utilizate pentru construirea imaginilor, sunetelor, videoclipurilor? 9. Ce periferice sunt necesare pentru rularea clipurilor? 10. Explorai comanda de declarare a imaginii, imagini cu alinierea unui text la mijloc, la marginea de sus, de jos. 11. Modificai conturul imaginii, spaierea vertical i orizontal.
82

12. Explorai atributele comenzii de includere a unei melodii. 13. Explorai atributele comenzii de rulare a unui videoclip. 14. n cadrul realizrii sarcinii de explorare completai compendiul cu marcajele i noiunile noi, conform temei curente. 15. n cadrul realizrii sarcinii creative specificai/acordai obiectele pentru includerea lor n Web site-ul individual. 16. Construii obiectele specificate n mediile respective. 17. Ataai obiectele construite la site-ul construit. 4.7. Operarea cu formulare 4.7.1.Maracje utilizate Formularele (forme de colectare a datelor, forme de intrare) sunt destinate pentru introducerea unor informaii n timpul vizitrii paginii, care apoi se vor prelucra de o alt program, numit "script" care poate fi efectuat n cteva limbaje de programare ca: JavaScript, Java, Perl, C++ etc. n cadrul marcajului FORM operatorul are posibilitatea de a gsi tot ce dorete n afar de un alt operator FORM. Formularele sunt compuse din cmpuri de intrare n cadrul paragrafelor, listelor sau tabelelor. Completarea i nregistrarea unui astfel de formular determin memorarea intrun fiier a datelor introduse de utilizator n fiecare cmp sau, n cea mai mare parte expedierea datelor prin pota electronic, n funcie de mecanismul care a fost implementat n programul de tratare a formelor. Marcajele utilizate pentru construirea formularelor vezi tabelul 10. Exemple de explorarevezi nr 12-13. Colecii de
83

scripturi utile vezi referinele bibliografice, precum i la sfritul p.3.7.1.

Tabelul 10. Marcaje de operare cu formulare

Destinaia
Definirea formularului ncrcare fiier Definire cmp Input Nume cmp Valoare cmp Apsat? Dimensiune cmp Dimensiune maxim List de selecie Nume list Numr de opiuni Opiuni multiple Opiune Opiune implicit Dimensiune fereastr

Sintaxa
<FORM ACTION="URL" METHOD=GET|POST></FORM> <FORM ENCTYPE="multipart/formdata"> </FORM> <INPUT TYPE="TEXT|PASSWORD | CHECKBOX|RADIO|IMAGE| HIDDEN|SUBMIT|RESET> <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED> <INPUT SIZE=?> <INPUT MAXLENGTH=?> <SELECT></SELECT> <SELECT NAME="***"></SELECT> <SELECT SIZE=?></SELECT> <SELECT MULTIPLE> <OPTION> <OPTION SELECTED> <TEXTAREA ROWS=? COLS=? ></TEXTAREA> 84

Comentariu

Pentru checkbox i radiobutoane n caractere n caractere Lista din care se poate selecta opiunea dorit Cnd lista este definit separat

Elemente ce pot fi selectate Se afieaz Pentru Input text

Nume fereastr Spaiere text

<TEXTAREA NAME="***"></TEXTAREA> <TEXTAREA WRAP=OFF|VIRTU AL|PHYSICAL></TEXTAREA>

ACTION - indic unde se va transmite coninutul formei dup confirmare. METHOD - indic metoda utilizat pentru transmiterea coninutului formei pe server. Aceast metod depinde de cum lucreaz serverul. Implicit se folosete metoda POST. a. POST- la utilizarea acestei metode coninutul formei existente se transmite nu ca o parte a URL dar ca un corp al acestei utilizri. b. GET- aceast metod adaug coninutul la forma existent. ENCTYPE - specific tipul codificrii coninutului formei existente. Acest atribut funcioneaz numai n cazul utilizrii metodei POST. Pentru a realiza interfaa n cadrul lui FORM, se folosesc urmtoarele atribute: INPUT, SELECT, TEXTAREA. Fiecare cmp al formularului este definit printr-un element INPUT, i trebuie s aib un atribut de nume NAME unic ntr-un document. INPUT se caracterizeaz de asemenea de atributul TYPE. Denumirile celor mai rspndite obiecte sunt: a. INPUT de tip "checkbox" definete csue de tip on/off; b. INPUT de tip "submit" definete butoane prin care se lanseaz anumite programe (ex: rememorare formular); c. INPUT de tip selectafieaz o list din care se poate alege unul sau mai multe valori; d. INPUT de tip "image" - imagine pe care se poate de apsat un click i s se realizeze nemijlocit ceea ce trebuie s fac aceast form; e. INPUT de tip "text" aria de introducere a textului; f. INPUT de tip "password" aria de introducere a password-ului;
85

g. INPUT de tip "radio" buton ce poate lua starea fie on fie off; h. INPUT de tip "reset" butonul care se folosete pentru reiniializarea formularului. Atributul NAME este numele simbolic unicat al cmpului formei date. Atributul VALUE - valoarea pe care o are cmpul dat; VALUE poate fi utilizat pentru scrierea deasupra butoanelor. CHECKED - definirea nu e obligatorie, dar pentru checkbox i radiobutoane semnific apsarea lor. n cadrul <FORM>...</FORM>, poate fi inclus SELECT, (incluznd INPUT i TEXTAREA elemente). Spre deosebire de INPUT, SELECT are marcaje de nceput i sfrit. In cadrul SELECT se permite folosirea atributelor: a. NAME - numele (simbolic) al opiunii alese; b. SIZE - dimensiunea ferestrei de opiuni; c. MULTIPLE - indic c se pot selecta mai multe opiuni; d. OPTION pentru definirea elementelor de liste. TEXTAREA ne permite vizualizarea unei ferestre de introducere cu mai multe linii, eventual i cu linii de derulare. Atribute: NAME - numele simbolic al ariei de introducere; ROWS - numrul liniilor ariei de introducere(lungimea); COLS - numrul coloanelor (limea).
A

4.7.2. Exemple de explorare Scop. Explorarea posibilitilor HTML de colectare a datelor. Exemplu 12. Cea mai simpl form
<HTML> 86

<HEAD> <TITLE> Exemplul 12. Cea mai simpla forma </TITLE> </HEAD> <H1>Cea mai simpla forma </H1> <FORM ACTION="pr0008.html"> <!--Inceputul formei--> <INPUT TYPE=submit VALUE="Inapoi, la capitolul III..."> </FORM> <!--Sfirsitul formei--> </BODY> </HTML>

Rezultatul afirii exemplului 12 vezi mai jos, figura 11.

Cea mai simpla forma

Inapoi, la capitolul III...

Figura 11. Rezultatul executrii exemplului 12 Exemplul 13. Form de introducere a datelor
<HTML> <head> <title>Exemplul13. Introducere date</title> </head> <BODY bgcolor=pink> <big><font color=blue>Introduce-ti datele despre dvs.: </font></big> <font color=red> <P>Nume, prenume:<br><option><INPUT size=30> </B><BR><BR> Jenul: <INPUT TYPE=radio NAME=gender VALUE="male" checked>masculin <INPUT TYPE=radio NAME=gender VALUE="female">feminin<BR> <p>Data, luna si anul nasterii:<br><option><INPUT size=30> <P><I>Locul nasterii: <SELECT name=RAION> <OPTION selected>Basarabeasca<OPTION>Chisinsu<OPTION>Causeni<OPTION> Cahul<OPTION>Cainari<OPTION>Criuleni<OPTION>Calarasi <OPTION>Camenca<OPTION>Edinet<OPTION>Falesti<OPTION>

87

Floresti<OPTION>Dubasari<OPTION>Durlesti<OPTION>Leova<OPTIO N>Nisporeni<OPTION>Ungheni <OPTION>Alte</OPTION></SELECT> <P>Locul de studii: <BR><SELECT multiple name=VUZ> <OPTIONSELECTED>U.S.M.<OPTION>A.S.E.M.<OPTION>U.T.M<O PTION>USAM <OPTION>Acad.de Politie<OPTION>Acad. de transport<OPTION>ULIM <OPTION> Alta institutie </OPTION></SELECT> </font><BR><BR> <input type="submit" value="ok"> <input type="reset" value="cancel"> </FORM> </BODY> </HTML>

Rezultatul afirii exemplului 13 vezi mai jos, figura 12. 4.7.3. ntrebri de autocontrol i exerciii 1. 2. 3. 4. 5. 6. Care sunt elementele definitorii ale unui formular? La ce servesc formularele? Cine i cum stocheaz / prelucreaz datele colectate? Care sunt cele mai rspndite tipuri de INPUT? La ce servesc elemente SELECT? De ce n cadrul formei identificatoarele cmpurilor trebuie s fie unicate? 7. Prin ce difer un radio-buton de un buton checkbox? 8. Demonstrai nregistrarea vizitatorilor site-ului. 9. n cadrul realizrii sarcinii de explorare descriei marcajele HTML de construire a formularelor de introducerecolectare date. 10. n cadrul realizrii sarcinii creative elaborai codul HTML al formei de nregistrare a vizitatorilor site-ului dvs. (forma recomandatvezi compartimentul, Date generale, anexa nr.1.Colecii de scripturi utile vezi referinele bibliografice, precum i la sfritul p.3.7.1).

88

Figura 12. Rezultatul executrii exemplului 13 4.8. FERESTRE (CADRE, FRAME) O alt modalitate de structurare a unui document hypermedia este mprirea ferestrei navigatorului n mai multe zone distincte (framecadru, fereastr), n fiecare dintre acestea rulnd diferite documente (fiiere). O practic frecvent printre creatorii de site-uri este aceea de a utiliza dou frame-uri verticale: n fereastra stng se afl de obicei butoane, prin a
89

cror apsare se face legtura cu o anumit seciune a site-ului, afiarea fcndu-se n fereastra din dreapta. Scop: Explorarea posibilitilor divizrii ecranului n ferestre. Definitivarea (coninutului i formei) site-urilor de explorare i creativ. 4.8.1. Comenzi de construire a cadrelor Comenzile necesare pentru construirea ferestrelor vezi tabelul 11.

Tabelul 11. Marcaje de operare cu ferestre

Instruciune <frameset atribute> </frameset> Atribute cols = rows = Descriere Definirea mpririi paginii n cadre Numrul i mrimea relativ a coloanelor Numrul i mrimea relativ a liniilor Mrimea chenarului (pixeli); n general nu dorim chenar i folosim border =0 mpreun cu framespacing =0 i frameborder =no, pentru c nu tim ce browser (cu ce valori setate ca implicite) folosete vizitatorul, deci mai bine le specificai dvs. Specific dac cadrul definit cu FRAMESET are sau nu chenar: yes sau no; implicit yes Mrimea spaiului dintre cadre (pixeli); dac l folosii mpreun cu border, dar cu valori diferite, pentru unele browsere primeaz valoarea lui framespacing (ex. IE 5), iar pentru altele - valoarea lui border (ex. Netscape 4.51)

border =

frameborder =

framespacing =

90

<frame atribute>

src = " url " name =

Definiia unui cadru Sursa cadrului Numele cadrului, utilizat de marcajul <a href = "url" target = nume> Opiuni pentru bara de derulare: yes (da), no (nu), auto (dac este nevoie); implicit "auto" Pentru a nu redimensiona trgnd de chenar (doar dac exist chenar ) Spaiu deasupra i sub un cadru (pixeli) Spaiu la stnga i la dreapta unui cadru (pixeli) Seciunea de pagin afiat de ctre navigatoarele ce nu pot interpreta cadre Cadru intern (doar IE) Sursa cadrului Numele cadrului, utilizat de marcajul <a href = "url" target = nume> nlimea cadrului nglobat (pixeli sau %) Limea cadrului nglobat (pixeli sau %) Specific dac cadrul definit cu IFRAME are sau nu chenar (yes sau no; implicit yes) Opiuni pentru bara de derulare : yes (da), no (nu), auto (dac este nevoie); implicit "auto"

scrolling =

noresize marginheight = marginwidth = <noframes> </ noframes> <iframe atribute> </ iframe> src = " url " name = height = width = frameborder =

scrolling =

91

n continuare aducem unele comentarii asupra utilizrii. De exemplu: <FRAMESET COLS="30%,*"> <FRAME SRC="fisier1.htm"> <FRAME SRC="fisier2.htm"> </FRAMESET> n exemplul de mai sus s-au creat dou zone "verticale", prima ocupnd 30% din fereastra navigatorului, iar a doua restul. n primul frame se va afia coninutul fiierului fisier1.htm, iar in frame-ul drept se va afia fiierul fisier2.htm. Dac un document hypermedia este structurat folosind frameuri, atunci se va renuna la marcajele ce definesc corpul documentului <body>...</body>. Nu este obligatoriu s se foloseasc "*", aa cum apare n exemplu, corect fiind i forma: COLS="30%,70%". Se poate realiza mprirea documentului n mai multe frame-uri, specificnd procentul din aria ferestrei navigatorului: COLS="20%, 10%, 40%, 30%" (mprire n patru zone verticale). Dac se dorete mprirea documentului n zone aezate invers (pe linii), se va utiliza atributul ROWS n locul atributului COLS. Frame-ul poate fi redimensionat de vizitatorul paginii cu ajutorul mouse-ului, dac nu se specifica atributul NORESIZE, despre care vom vorbi mai tarziu. Marcajul <FRAMESET> poate fi utilizat n conjuncie cu urmtoarele atribute: FRAMEBORDER="yes|no" specific dac bordura (chenarul) frame-ului este sau nu vizibil. BORDER=numar-pixeli specific ce grosime s aib chenarul (valabil doar pentru Netscape) BORDERCOLOR=culoare specific ce culoare s aib chenarul. (valabil doar pentru Netscape)

92

SCROLLING="yes|no|auto" stabilete dac se afieaz sau nu bara de scroll ntr-un frame. Valoarea auto determin afiarea barei de derulare atunci cnd este cazul (adic informaia nu se poate ncadra n ntregime) NORESIZE - nu permite redimensionarea frame-ului de ctre utilizator. Not: Navigatoarele mai vechi, precum i navigatoarele "mod text" asemntoare cu lynx din Linux, nu puteau afia documente ce conin frame-uri. 4.8.2. ntrebri de autocontrol i exerciii 1. Cnd este binevenit mprirea ferestrei navigatorului n mai multe zone distincte (frame, cadre)? 2. Care este diferena dintre structurarea ferestrei navigatorului n cadre prin intermediul unui tabel i a marcajului FRAME 3. Chenarul cadrului este vizibil totdeauna sa nu? 4. Chenarul cadrului exist totdeauna sa nu? 5. Ce subtiliti pot aprea la utilizarea marcajului FRAME? 6. Cnd se afieaz bara de scrolling ntr-un frame? 7. Cum se poate interzice redimensionarea frame-ului? 8. n cadrul lucrrii de explorare notai marcajele principale pentru construirea cadrelor. 9. Afiai cuprinsul de nivelul I al compendiului ntr-un cadru de stnga, de 20%, iar coninutul - n cadrul de dreapta. 10. Definitivai structura site-ului creativ, realizai cadre, dac este necesar.

93

4.9. ALTE ELEMENTE 4.9.1. Realizarea efectului Marquee Efectul marquee reprezint un efect de micare a textului pe ecran de la stnga la dreapta i invers, de jos n sus i invers, ciclic cu o vitez stabilit. Textul are atributele de lungime i nlime: width si height, poate fi utilizat un fond special, se pot contura marginile afirii. Cea mai bun este nsuirea mecanismului funcionrii marcajului marquee pe baza exemplelor de mai jos, care pot fi executate separat, sau grupate n cadrul unei pagini, pentru a sesiza diferena.
Exemple. Elementul <marquee> ... </marquee> simplu <marquee>Bine ati venit!</marquee> Atribute de scroll Directia <direction=#> #=left(stnga), right(dreapta) <marquee direction=left>Bine ati venit!</marquee><P> <marquee direction=right>Bine ati venit!</marquee> Valoare Scroll <scrollamount=#>

Atributul scrollamount - are valorile aproximativ ntre 1 i 100, reprezint viteza cu care se va mica textul pe ecran. De exemplu:
<marquee scrollamount=50>Bine ati venit!</marquee> Intarziere Scroll <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>Bine ati venit! </marquee>

94

Comportamentul sau felul de micare a textului <behavior=#> #=scroll, slide, alternate

Scroll este micarea obinuit a textului dintr-un capt n altul. Slide este micarea textului dintr-un capt n altul oprindu-se n cel din urm. Alternate reprezint micarea textului de la o margine la alta.
<marquee behavior=scroll>Bine ati venit!</marquee><p> <marquee behavior=slide>Bine ati venit!</marquee><p> <marquee behavior=alternate>Bine ati venit!</marquee> Bucla <loop=#> #=numr sau infinit, indic numrul maximal de micare a textului <marquee loop=3 width=50% behavior=scroll>Bine ati venit! </marquee><P> <marquee loop=3 width=50% behavior=slide>Bine ati venit! </marquee><P> <marquee loop=3 width=50% behavior=alternate>Bine ati venit! </marquee> ] Aliniere <align=#> #=top(sus), middle(mijloc), bottom(jos) <font size=6> <marquee align=# width=200>Bine ati venit!</marquee> </font> Culoare fond <bgcolor=#> #=RRGGBB sau nume <marquee bgcolor=aaaaee>Bine ati venit!</marquee> Dimensiune text rulant <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa> Bine ati venit! </marquee> Marginile micrii <hspace=# vspace=#> Bine <marquee hspace=20 vspace=20 width=150 bgcolor=#ffaaaa align=middle> Ati Venit!</marquee> Salutari din Moldova.

95

4.9.2. Text clipitor Pentru a ateniona vizitatorul asupra unui fragment de text se poate utiliza clipirea lui. Marcajul utilizat are sintaxa <BLINK> text </BLINK> Exemplu: <BLINK> Pe curnd! </BLINK> va duce la clipirea textului inclus. Not: Nu v lsai prea mult atrai de patima clipirii! Mult clipire, de durat, poate fi suprtoare i duntoare. 4.9.3. Modele de stiluri n specificaiile HTML 4.0 au aprut specificaiile pentru modele de stiluri, cunoscute ca Modele de Stiluri n Cascad (Cascading Style Sheets - CSS). Pn la acea dat forma, culoarea i mrimea textului puteau fi date cu instruciunea "font" i cu atributele sale: "face", "color", "size". Modelele de stiluri pot fi aplicate aproape oricrei instruciuni, folosind atributele din tabelul 12,13. Modelele de stiluri pot fi aplicate n mai multe moduri: a) Intern: atributele din tabelul 12-13 sunt specificate n interiorul marcajului de deschidere al fiecrei instruciuni; este cel mai neeconomic mod. b) Specificate n antetul fiierului: specificm la nceputul unui fiier diverse atribute pentru mai multe stiluri de text; acele stiluri le putem folosi de mai multe ori n corpul acelui fiier fr a mai specifica i atributele. c) Extern: atributele pentru diverse stiluri sunt specificate ntr-un fiier special (pe care l putem construi cu un editor de texte (Notepad) i l salvm ca fiier de tip text cu extensia .css astfel nct poate fi apelat de orice alt fiier de pe

96

site. Este modul cel mai recomandat, mai ales pentru site-uri mari. Putem face chiar ca un anumit stil s poat fi aplicat numai cu o anumit instruciune, iar altele s poat fi aplicate cu mai multe instruciuni. Unele atribute din tabelul 12-13 pot fi specificate i sub o forma prescurtat. Se poate ntmpla ca unele caracteristici specificate sub forma prescurtat s nu funcioneze. n aa caz folosii forma explicit, nu cea prescurtat.

Tabelul 12. Comenzi de definire a stilurilor

Instruciune Atribute <style> </style> <span> </span> type= class= id= Descriere Specific n antet caracteristicile stilurilor n general Cascading Style Sheets: "text/css" Marcaj generic, numai pentru stiluri Specific un anumit stil Specific un anumit stil

Tabelul 13. Elementele stilurilor

Atribut background color font-family font-size Descriere Imagini sau culori de fundal Culoarea textului Tipul fontului Dimensiunea fontului Valori URL-ul (imaginii) sau culori date prin nume sau valoare RGB Nume sau valoare RGB Numele fontului sau al familiei de fonturi Dat n puncte(pt), inch(n), centimetri(cm), pixeli(px)

97

font-style font-weight

Text cursiv Grosimea fontului Distana dintre liniile de baz ale textului Distana fa de marginea din stnga a paginii Distana fa de marginea din dreapta a paginii Distana fa de textul precedent sau fa de marginea de sus a paginii Alinierea textului

Normal, italic Extra-light, light, demi-light, medium, demi-bold, bold, extrabold Dat n puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%) Dat n puncte(pt), inch(in), centimetri(cm), pixeli(px) Dat n puncte(pt), inch(in), centimetri(cm), pixeli(px)

line-height

margin-left

margin-right

margin-top

Dat n puncte(pt), inch(in), centimetri(cm), pixeli(px) Left(stnga), center(centru), right(dreapta), justify

text-align textdecoration

None (neevideniat), Evidenierea textului underline(subliniat), italic(cursiv), line-through(tiat) Distana primului rnd fa de marginea din stnga Tipul chenarului Dat n puncte(pt), inch(n), centimetri(cm), pixeli(px) None, groove, dotted, dashed, solid, double, ridge, inset, outset Dat n puncte(pt), inch(n), centimetri(cm), pixeli(px) Nume sau valoare RGB

text-indent

border-style

border-width Grosimea chenarului border-color Culoarea chenarului

98

Not: 72 pt=1 inch = 25,4 mm; un font de dimensiunea 14 pt nseamn c sunt 14 puncte ntre partea superioar a literei M sau h i partea inferioar a literei g sau y. Exemplul 14. Fiierul color.css (definirea culorilor)

a:link{color: rgb(102,102,51);} a:visited{color: rgb(51,51,102);} a:active{color: rgb(153,0,0);} body{color: rgb(0,0,0); background-color: rgb(255,255,255);} h1{ color: rgb(51,51,51);} h2, marquee{color: rgb(51,51,51);} h3{ color: rgb(51,51,51);} h4{ color: rgb(51,51,51);} h5{ color: rgb(51,51,51);} h6{ color: rgb(51,51,51);} HR{ color: rgb(51,51,51);} BUTTON{background-color: rgb(51,51,51); border-color: rgb(51,51,102); color: white;} TEXTAREA{border-color: rgb(0,0,0); color: black;} FIELDSET{border-color: rgb(0,0,0); color: black;} LEGEND{color: rgb(51,51,51);} SELECT{border-color: rgb(0,0,0); color: black;} TABLE{ table-border-color-light: rgb(51,51,102); table-border-color-dark: rgb(0,0,0); border-color: rgb(0,0,0); color: rgb(51,51,51);} CAPTION {color: rgb(51,51,51);} TH{ color: rgb(51,51,51); border-color: rgb(0,0,0);} TD{ border-color: rgb(0,0,0);}

n cadrul sarcinii de explorare i creative construii i utilizai un fiier CSS, care ar instala aceiai parametri pentru ambele site-uri. Demonstrai aciunea lui.

99

5. SFATURI UTILE 5.1. Accesibilitatea Web-paginii Accesibilitatea Web-paginii presupune c, dac nu toi, cel puin majoritatea covritoare a celor care ncearc s viziteze pagina, s poat s o i fac, fr erori sau alte impedimente. ntr-o reea att de eterogen cum este Internetul, pentru a fi accesibil tuturor potenialilor vizitatori, Webpagina trebuie s fie compatibil cu standardul HTML. Orice abatere presupune, n mod automat, pierderea unei pri din aceti vizitatori. 5.2. Aranjarea n pagin Cea mai bun experien se obine navignd pe Internet. n cazul n care la un moment dat o pagin v-a impresionat prin modul n care arat, nu v fie fric i salvai-o. Apoi n regim offline putei studia modul n care a fost fcut acea pagin, putei ctig ceva experiena. Oricum, e bine s cunoatei careva reguli la construirea Web-paginilor: Echilibrarea paginii. Senzaia de dezechilibru al unei pagini dat de aglomerarea ntr-o anumit zon a mai multor elemente i prezena n alte zone a unor spaii goale este destul de neplcut. Graficul cel mai mare trebuie s ocupe zona central a paginii. Diferena de tonalitate ntre diverse elemente trebuie riguros produs. Este inadecvat s atragem atenia spre un singur col al paginii prin folosirea, n acea zon, a unor culori puternic contrastante cu fondul. Aceste zone trebuie plasate ori n centrul paginii, ori uniform de-a lungul uneia dintre laturile paginii. Navigarea uoar i natural, fr o ierarhie prea adnc i fr fundturi.

100

Crearea unitii paginii. n general fiecare pagin are o anumit metafor, un anumit mod de a fi prezentat. Un mod n care toate imaginile i fonturile au un aspect tehnic e bun pentru o pagin ce se refer la calculatoare sau alte chestii tehnice .a.m.d, ns este necesar ca acest stil s se pstreze pn la sfritul paginii astfel nct vizitatorul s nu cread la un moment dat c a prsit pagina iniial printr-un link. 5.3. Navigarea n interiorul paginii Poate cel mai important lucru la un site Web, dar i dificil de realizat, este uurina cu care utilizatorul se deplaseaz n interiorul lui. n primul rnd, nu se cunoate intenia vizitatorului, ce caut el n pagin, care informaii l intereseaz mai mult .a.m.d. De aici i problema designer-ului: care legturi apar primele, care trebuie legate direct din pagina de logo, care nu. Nu exist o soluie unic, ns exist nite lucruri de care trebuie s inem cont. n primul rnd, este asigurarea unei coloane vertebrale a paginii, asigurarea unor ci uoare de acces n orice zon a site-ului i, nu n ultimul rnd, aplicarea unei structuri ierarhice n cadrul site-ului. Pentru c o pagin trebuie s transmit informaie, este necesar ca ea s fie subordonat informaiei pe care trebuie s o transmit, s fie concis, logic mprit i s in cont de publicul pe care l vneaz. Fiierele lungi ar fi bine s fie sparte n buci logice, pe idei. Cu toate c folosirea opiunii ALT a marcajului IMG este de multe ori benefic i recomandat, sunt i cazuri cnd aceasta este contraindicat, de exemplu n spatele enumerrilor sau a liniilor este de preferat s existe ceva de tipul "---" dect un cuvnt. n spatele imaginilor tag-ul ALT este preferabil s conin denumirea i nu descrierea link-ului respectiv.

101

Tot de legturile interioare depinde, de multe ori, i viteza de navigare n site. Pentru a o crete, iat cteva sfaturi succinte: 1. ncepe pagina cu text n locul unui grafic, astfel nct vizitatorul s-i dea seama repede unde se afl. 2. n fiecare pagin folosete i navigarea pe baz de text. 3. Nu pune prea mult text ntr-o celul de tabel, deoarece textul din tabel se ncarc dintr-o dat tot. 4. Sparge n mai multe tabelele mari, ocolete folosirea tabelelor imbricate. 5. Nu scala imaginile, redu-le efectiv dimensiunea. 6. Ocolete animaia. 7. Redu paleta gif-urilor, refolosete imaginile. 8. O legtur la un director subliniaz-o cu "/", altfel navigatorul va cuta iniial fiiere cu numele respectiv i abia apoi directoare. 9. Include tag-ul &ltlinkrel=next href=&quot urmtorul html">, unele navigatoare l ncarc n mod invizibil. 10. Nu lega o pagin de ea nsi, la nceput e derutant, ns poate deveni chiar i enervant. 11. Nu crea fundturi-pagini care nu au legturi spre nici o alt pagin. 12. Nu folosi ca text de navigare cuvintele napoi, nainte sau altele de acest gen. Pentru exactitate este bine a specifica napoi la cuprins, napoi la pagina principal. 13. Nu folosi ca text de legtur Click here sau Apas aici. Folosii ideea efectiv care face legtura, de genul: Vezi exemplu, Mai multe detalii etc. 14. Nu face imagini care arat ca nite butoane i care nu sunt legate la nimic. 15. Folosii metoda ierarhic de legare a paginilor. Nu le legai pe toate la pagina principal, n special dac site-ul e mare. 16. Din prima i pn n ultima pagin a site-ului este nevoie de prezena explicit a numelui sau adresei de e-mail, ca
102

metod de contact ntre cele doua pri. Include n fiecare pagin cele trei legturi obligatorii: cuprins, e-mail i legturi inverse. 5.4. Alte reguli pentru o pagin mai eficient Regula celor 20 de secunde. Prima pagin trebuie s se ncarce n cel mult 20 de secunde, dup aceste secunde 50% din vizitatori apas butonul BACK al navigatorului i prsesc site-ul. n cazul n care pagina se ncarc n mai mult de10-20 secunde e bine s avertizai vizitatorul printr-un mesaj i n plus secundele suplimentare trebuie s se justifice prin ceea ce pagina ofer n plus. Regula celor 3 click-uri. n orice loc din pagin trebuie s se poat ajunge prin maximum trei click-uri. n caz contrar vizitatorul se va simi rtcit n pagin, va uita pe unde a fost deja i nu va mai ti s revin la partea care l-a interesat. Datorit structurii ierarhice a unei pagini, aceasta poate fi realizat prin prezena fiierului de index al site-ului, fiier care trebuie s cuprind toate fiierele constituente ale site-ului. Regula celor cinci degete. Intr-o niruire de tip list, n structurri, este bine s existe cel mult 5 opiuni. 60% din vizitatori le vor citi, oricum, numai pe primele 5, restul fiind ignorate. Alte reguli. Fii documentat, ncearc prima dat s vezi cteva pagini, f-i o idee despre cum ar trebui s arate pagina ta nainte de a te apuca de ea. Daca i-ai realizat fiierele HTML cu un editor de tip WYSIWYG, ncearc apoi s vezi cum arat efectiv vizualizndu-le cu Notepad-ul i apoi terge din ele ceea ce este n plus. Ai grij la formatele grafice pe care le foloseti. Folosete GIF sau JPEG n funcie de tipul imaginii stocate.

103

n cazul JPEG-ului, nu l salva de mai mult de 4 ori n aceeai forma nainte de a-l pune n pagin, deoarece la acest tip de fiiere fiecare salvare nseamn pierdere de calitate. Verificai pagina cu opiunea VIEW IMAGES a navigator-ului pus pe OFF. ncearc-i pagina pe ct mai multe navigatoare diferite, din care s nu lipseasc NetScape i Internet Explorer. Toate elementele unei pagini, cele de grafic, de interactivitate etc, ar trebui s fie dictate de scopul paginii, de mesajul pe care pagina l are de comunicat. La atmosfera pe care o pagina trebuie s o aib, e necesar s concure toate elementele paginii respective, incluznd fondul, grafica, textul i culoarea lui, elementele de interactivitate i, n primul rnd, cuvintele, expresiile folosite n text. Pentru personalizarea ntr-o msur ct mai mare a paginii, este necesar s se renune la copierea oarb a mostrelor gsite pe Web, prin crearea unor pagini proprii. Nu toat lumea este ns capabil s realizeze cu totul ceva nou. ns crearea acestora poate pleca de la mbinarea unor exemple existente prin adaptarea lor la specificul sarcinilor concrete.

104

BIBLIOGRAFIE I REFERINE UTILE

1. 2. 3.

4. 5. 6. 7.
8. 9. 10.

11.
12.

13. 14. 15.

16.

17. 18.

A.Tanenbaum Reele de calculatoare.Agora, 1997. http://werbach.com/barebones. http://werbach.com/web/wwwhelp. http://www.cgi-resources.com/ - Cgi Resourcescea mai plin arhiv a CGI-scripturilor. http://www.clickxchange.com/- Web Host Directory. http://www.clickxchange.com/ - Script Locker- o colecie de CGI - scripturi. Este comod pentru nceptori - scripturi sunt multe i uor sesizabile. http://www.download.ru/ - posibil cea mai mare colecie a CGIscripturilor n limba rus. http://www.holm.ru - Hosting gratuit de la Agava Software. http://www.ici.ro/navigator/editlist/ -O list de editoare. http://www.ici.ro/navigator/navigatoare.shtml - Navigatoare. http://www.ncsa.uiuc.edu/SDG/Software/Mozaic/WebSGML.ht ml - SGML - SoftQuad - cuprinde legturi multiple ctre diverse resurse SGML. http://www.notiuni.html.go.ro. http://www.w3.org. http://www.webclub.ru/ - O serie de scripturi utile n limba rus. http://www.webtechs.com/sgml/wilbur/ALL- HTML 3.2 marcaje - este o list de legturi ctre toate marcajele versiunii HTML3.2. www.animfactory.com - O bibliotec de animaii. www.w3.org/hypertext/WWW/MarkUp/Wilbur/ HTML 3.2 Introducere - conine legturi pentru structura HTML 3.2. www.w3.org/pub/WWW/MarkUp/SGML/ - o list de legturi SGML: nvare, utilizare, grupuri de discuie, unelte i software.

105

Anexa 1. Forma recomandat a CV-ului

CURRICULUM VITAE
1. DATE GENERALE
1. Nume: 2. Prenume: 3. Sex: 4. Data naterii: 5. Starea social: 6. Domiciliul: 7. Telefon: ________8. Codul grupei ____.An de studii _________

2. STUDII
DENUMIRE SPECIALIZARE COALA ABSOLVIT, ANUL

3. LIMBI POSEDATE
(A enumera cu unul din calificativele Excelent / Bine / Suficient / Slab)

3.1.Romna

3.2.Rusa

3.3. Englez

3.4. German

4. CUNOATEREA MIJLOACELOR INFORMATICE

(a enumera domeniile i nivelul de cunoatere ) 4.1. SO Windows NT , WindosME la nivel de operare liber 4.2. SGBD Oracle, FoxPro 4.3. .......

5. DOMENIUL DE INTERESE
5.1.Management informaional, Informatizarea societii 5.2. Proiectarea - dezvoltarea sistemelor informatice 5.3. .......

6. Alte informaii
6.1. Supus militar, nr livretului ________________________ 6.2. ......

Data completrii_____________________

106

Anexa 2. Denumiri sugestive de tabele i liste

1. 2. 3. 4. Crile unei biblioteci, care conine Date despre carte (denumirea crii, anul ediiei, locul ediiei, codul, numrul de pagini); Date despre autor - (NPP, grad tiinific, titlu tiinific, locul de munc, telefon, E-mail.) Carte de telefoane, care conine Date despre abonat (NPP, data nateri), Adresa abonatului (ora, localitate, strad, nr. casei, nr. apartament, Email), Date despre telefon (nr. staie, nr. telefon, tip staie) Lista convorbirilor locale efectuate de persoana XXXXX - de la telefonul YYYYYY care conine Data convorbirii, nr. de telefon, Durata (minute), Taxa, Suma Lista convorbirilor interurbane efectuate de persoana XXXXX - de la telefonul YYYYYY care conine Data conectrii, nr. de telefon conectate, oraul; Durata convorbirii (minute), Costul unei minute, suma. Bagajele pasagerilor rutei XXXX: Date despre rut/bilet ( rut, bilet, bagaj, greutate, numr de locuri), Date despre pasager (NPP, paaport, punctul unde urmeaz). Abiturienii USM - NPP, data naterii, Adresa (Ora, localitate, strad, bloc, apartament), Studii (nr. document, data eliberrii, media), Specializarea selectat. Lista concursanilor - NPP, cod specializare, Rezultatele concursului (examen 1, examen 2, examen 3, media la examenele de admitere, media din documentul de studii, concurs) Reuita studenilor unei grupe la sesiune - NPP, cod specializare, Examene (disciplina 1, disciplina 2, disciplina 3, disciplina 4, media), Nr. colocvii (dup plan, susinute) Evidena frecvenei semestriale a studenilor grupei ZZZZ - NPP, cod specializare, Lipse (motivate, nemotivate, total, %) Atestarea studenilor grupei ZZZZ - NPP, cod specializare, Testri curente(disciplina1, nota, disciplina2, nota, disciplina3, nota, disciplina4, nota, disciplina5, nota) Lista profesorilor catedrei. Date despre profesor XXX: NPP, anul naterii, vechime munc, grad tiinific, titlu tiinific; Numr de publicaii (internaionale, republicane, universitare). Farmaciile oraului. Date despre Farmacie (, categorie, regim de lucru); Adresa (microraion, strada, bloc, telefon); Policlinicile oraului. Date despre Policlinic (, categoria, regim de lucru) Adresa (microraion, strada, bloc, telefon) Instituii de nvmnt superior: Denumire, categorie, Adresa(Ora, localitate, strad.), nr. Studeni(secia de zi, seral, fr frecven, total) 107

5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

15. Facultile USM: Denumire, nr. specializri, nr. catedre, nr. studeni(secia de zi, seral, fr frecven, total) 16. Filme ce ruleaz n cinematografele oraului: Denumire, adres, telefon; Film(denumire, data rulrii, ora, costul biletului). 17. Cafenele Internet n or. Chiinu: Denumire, adresa, telefon, regim de lucru (zi, noapte, 24/24); Tarife servicii prestate (Internet, CD-Writer, Scanare, instruire etc.) 18. Soldul materialelor la depozitul XXXX: Denumire material, cod, unitate de msur, pre unitar; Cantitate; Cost; Norma (minimal, maximal), Deviere de la norm. 19. Fondurile fixe ale ntreprinderii XXXXX: Denumire, cod, cantitate, Vechime (anul procurrii, anul transmiterii n exploatare); Suma uzurii. 20. Tehnica de calcul a USM: Denumire, caracteristici (frecvena procesor, memorie operativ, Wincester); Vechime (anul procurrii, anul transmiterii n exploatare, %uzurii)

108

Anexa 3. Exemplu sugestiv de structurare a site ului de explorare

Nr d/o 1.

Denumirea temei
Introducere. 1.1. Sintaxa comenzilor HTML. 1.2. Marcaje de structura documentului. 1.2.1. Marcaje descriptive 1.2.2. (Meta) - informaii pentru motoarele de cutare 1.2.3. Titluri, subtitluri. Mrimea fontelor. Alinierea Formatarea caracterelor. 2.1. Stiluri fizice (redate prin valorile parametrilor) 2.2. Stiluri logice (redate implicit prin nume) Formatarea alineatelor. 3.1. Alinierea paragrafelor (alineatelor) la stnga, dreapta, la ambele margini 3.2. ntreruperea forat a linei n cadrul alineatului. 3.3. Spaierea din stnga, dreapta. Tabularea 3.4. Texte preformatate Organizarea intern a textului. 4.1. Liste marcate 4.2. Liste numerotate 4.3. Liste de definiii 4.4. Aranjarea textului n coloane 4.5. ncadrarea (Frame) Operarea cu Tabele. 5.1 Tabeleleca mod de prezentare a web-paginilor 5.2 Structura general a unui tabel 5.3 Titlu comun deasupra mau multor coloane 5.4 Grupare de linii (titlu comun din stnga) .A.M.D

2. 3.

4.

5.

109

Anexa 4. Exemplu de structur a siteului creativ

TEMA: Reele infraroii i cu microunde

I. Reele infraroii

1.1. Introducere, scurt istoric 1.2. Descrierea tehnologiei Fizica proceselor Prioritile tehnologiei infrarou Neajunsurile tehnologiei 1.3. Domenii de utilizare

II. Reele cu microunde

2.1. Introducere, concepte generale 2.2. Caracteristica reelelor cu microunde 2.2.1. Fizica proceselor 2.2.2. Clasificarea aparaturii radio 2.2.2. Neajunsurile tehnologiei 2.3. Domenii de utilizare

110

Anexa 5. O list sugestiv de teme pentru site-urile creative la cursul REELE DE CALCULATOARE (vezi A.Tanenbaum. Reele de calculatoare.Agora, 1997; Bazele reelelor de calculatoare. Teora, 1999; CISCO Internetworking Technology Overview etc) 1. GENERALITI
1.1. CONCEPTUL REELELOR DE CALCULATOARE 1.1.1. Definiia reelelor de calculatoare 1.1.2. Structura fizic i componentele unei reele 1.1.3. Cerine fa de reelele moderne 1.1.4. Problemele proiectrii 1.2. UTILIZRILE REELELOR DE CALCULATOARE 1.2.1. Reele corporative (pentru persoane juridice) 1.2.2. Reele pentru persoane fizice 1.2.3. Sisteme deschise i problemele standardizrii 1.2.4. Organizaii internaionale de standardizare n telecomunicaii i Internet 1.3. TAXONOMIA REELELOR DE CALCULATOARE 1.3.1. Reele locale 1.3.2. Reele metropolitane 1.3.3. Reele larg rspndite geografic 1.3.4. Reele radio 1.3.5. Alte clasificri (dup topologie, modul de gestiune, de transmitere) 1.4. PROGRAMELE DE REEA 1.4.1. Ierarhiile de protocoale i funciile nivelurilor 1.4.2. Interfee i servicii. Relaia dintre servicii i protocoale 1.4.3. Servicii orientate pe conexiuni i servicii fr conexiuni 1.4.4. Primitive de serviciu 1.5. MODELE DE REFERIN 1.5.1. Modelul de referin OSI 1.5.2. Modelul de referin TCP/IP 1.5.3. Comparaia modelelor OSI i TCP/IP
111

1.6. TEHNOLOGII DE BAZ ALE REELELOR 1.6.1. Ethernet 1.6.2. Token BUS 1.6.3. Token Ring 1.7. EXEMPLE DE REELE 1.7.1. Novell NetWare 1.7.2. ARPANET 1.7.3. NSFNET 1.7.4. Internet 1.7.5. REELE DE MARE VITEZA 1.7.5.1. FDDI 1.7.5.2. UltraNet 1.7.5.3. HSSI (HIPI) 1.7.5.4. Fast Ethernet i 100VG-AnyLan 1.7.5.5. Gigabit Token Ring 1.8. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAII DE DATE 1.8.1. SMDSServiciul de Date Comutat Multimegabit 1.8.2. ReeleX-25. Comunicarea X-25 cu terminale neinteligente (X3, X-28, X-29) 1.8.3. Retransmiterea cadrelor 1.8.4. ISDN de band larg 1.8.5. Tehnologia ATM ca transport universal pentru reele locale i globale
2. NIVELUL

FIZIC

2.1. BAZELE TEORETICE I FIZICE ALE COMUNICRII DE DATE 2.1.1. Mesaje, semnale, linii i canale de comunicaii 2.1.2. Concentratoare i adaptoare de reea ca baz a structurii fizice a reelei 2.1.3. Echipamente de conversie a semnalelor -modem-uri. 2.1.4. Dou interfee uzuale pentru modem (RS-232-C i RS-449) 2.1.5. Structurarea reelelor 2.2. MEDII DE TRANSMISIE 2.2.1. Mediul magnetic 2.2.2. Cablul torsadat
112

2.2.3. Cablu coaxial n band de baz 2.2.4. Cablu coaxial de band larg 2.2.5. Fibre optice 2.3. COMUNICAIILE FR FIR 2.3.1. Spectrul electromagnetic 2.3.2. Transmisia radio 2.3.3. Transmisia prin microunde 2.3.4. Undele infraroii i milimetrice 2.3.5. Transmisia de unde luminoase (laser) 2.1. SISTEMULTELEFONIC 2.4.1. Structura sistemului telefonic 2.4.2. Buclele locale 2.4.3. Trunchiuri i multiplexare 2.4.4. Comutatoare 2.2. ISDN DE BAND INGUSTA 2.5.1. Servicii ISDN 2.5.2. Arhitectura sistemului ISDN 2.5.3. Interfaa ISDN. 2.5.4. Perspectivele N-ISDN 2.3. ISDN DE BAND LARG I ATM 2.6.1. Circuitele virtuale n comparaie cu circuitele comutate 2.6.2. Transmisia n reelele ATM 2.6.3. Comutatoare ATM 2.4. RADIO CELULAR 2.7.1. Telefoane fr fir 2.7.2. Telefoane celulare analogice 2.7.3. Telefoane celulare digitale 2.7.4. Servicii de comunicaii personale 2.5. SATELII DE COMUNICAIE 2.8.1. Satelii geosincroni 2.8.2. Satelii de joas altitudine 2.8.3. Satelii versus fibre optice

3. NIVELUL LEGTUR DE DATE

3.1. Servicii oferite nivelului reea. ncadrarea. Controlul erorilor. Controlul fluxului

113

3.2. Detectarea i corectarea erorilor. Coduri corectoare de erori. Coduri detectoare de erori 3.3. EXEMPLE DE PROTOCOALE ALE LEGTURII DE DATE 3.3.1. SDLC. HDLC - Controlul de nivel nalt al legturii de date 3.3.2. Nivelul legtur de date n Internet 3.3.3. SLIP-Serial Line IP 3.3.4. PPP - protocol punct-la-punct 3.3.5. Nivelul legtur de date la ATM

4. SUBNIVELUL DE ACCES LA MEDIU

4.1. PROTOCOALE CU ACCES MULTIPLU 4.1.1. ALOHA 4.1.2. Protocoale cu acces multiplu i detecie de purttoare CSMA 4.1.3. Protocoale fr coliziuni, protocoale cu conflict limitat 4.1.4. Protocoale cu acces multiplu cu divizarea frecvenei 4.1.5. Protocoale pentru reele LAN fr fir 4.1.6. Radioul celular digital 4.2. STANDARDUL IEEE 802 PENTRU LAN-URI I MANURI 4.2.1. Standardul IEEE 802-3 i ETHERNET 4.2.2. Standardul IEEE 802-4: LAN de tip jeton pe magistral 4.2.3. Standardul IEEE 802-5: LAN de tip jeton pe inel 4.2.4. Standardul IEEE 802-6: Magistral dual cu coad distribuit 4.2.5. Standardul IEEE 802-2: Controlul legturii logice 4.3. INTERCONECTAREA REELELOR CU AJUTORUL PUNILOR 4.3.1. Tipuri de puni 4.3.2. Puni de la 802-x la 802-y 4.3.3. Compararea punilor 802 4.3.4. Puni transparente 4.3.5. Puni cu dirijare de la surs
114

4.4. 5.1. 5.2. 5.3. 5.4.

4.3.6. Puni aflate la distant REELE DE SATELII

5. NIVELUL

REEA

Servicii fumizate nivelului transport Organizarea intern a nivelului reea Subreele bazate pe circuite virtuale i datagrame ALGORITMI DE DIRIJARE A PACHETELOR 5.1.1. Principiul optimalitii. Dirijarea pe calea cea mai scurt. Inundarea 5.1.2. Dirijarea bazat pe flux. Dirijare cu vectori distan. Dirijarea folosind starea legturilor 5.1.3. Dirijare ierarhic. Dirijarea pentru calculatoare gazd mobile 5.1.4. Dirijarea prin difuzare. Dirijarea cu trimitere multipl - multicast 5.2. ALGORITMI PENTRU CONTROLUL CONGESTIEI 5.2.1. Principii generale ale controlului congestiei. Politici pentru prevenirea congestiei 5.2.2. Formarea traficului. Specificarea fluxului 5.2.3. Controlul congestiei n subreelele bazate pe circuite virtuale. Pachete de oc 5.2.4. Controlul fluctuaiilor. Controlul congestiei la transmisia multicast 5.3. INTERCONECTAREA REELELOR 5.3.1. Circuite virtuale concatenate. Interconectarea reelelor fr conexiuni 5.3.2. Trecerea prin tunel. Dirijarea n reele interconectate. 5.3.3. Fragmentarea pachetelor. Ziduri de protecie. 5.4. NIVELUL REEA N INTERNET 5.4.1. Protocolul IP. Adrese IP. Subreele 5.4.2. Protocoale de control n Internet. Protocolul de dirijare folosit de porile interioare: OSPF; pentru pori externe: BGP 5.4.3. Trimiterea multipl n Internet. IP mobil. CIDR Dirijarea fr clase ntre domenii 5.5. NIVELUL REEA N REELE ATM 5.5.1. Formatele celulelor. Stabilirea conexiunii. Dirijarea i comutarea
115

5.5.2. Categorii de servicii. Calitatea serviciului. Modelarea traficului i politici de trafic 5.5.3. Controlul congestiei. LAN-uri ATM
6. NIVELUL

TRANSPORT

6.1. SERVICII FURNIZATE NIVELURILOR SUPERIOARE 6.2. Acordarea diverselor tehnologii de transport n reele eterogene 6.3. NOIUNI DE BAZ DESPRE PROTOCOALELE DE TRANSPORT 6.1.1. Adresarea. Stabilirea unei conexiuni. Eliberarea conexiunii 6.1.2. Controlul fluxului i memorarea temporar 6.1.3. Multiplexarea. Refacerea dup cdere 6.2. UN ROTOCOL DE TRANSPORT SIMPLU(SMTP) 6.3. PROTOCOALE DE TRANSPORT (TCP-UDP) 6.3.1. Modelul Serviciului TCP. Protocolul TCP 6.3.2. Antetul segmentului TCP. Administrarea conexiunii TCP 6.3.3. Politica TCP de Transmisie a datelor 6.3.4. Controlul congestiei n TCP 6.3.5. Administrarea contorului de timp n TCP 6.3.6. Protocolul de transport al datagramelor UDP 6.3.7. TCP i UDP fr fir 6.4. PROTOCOALELE AAL DE NIVEL ATM 6.4.1. Structura nivelului de adaptare ATM 6.4.2. AALl, AAL2, AAL3/4, AAL5 . O comparaie a protocoalelor AAL 6.4.3. SSCOP - protocol orientat pe conexiuni, specific serviciului 6.5. ELEMENTE DE PERFORMAN 6.5.1. Probleme de performan n reelele de calculatoare 6.5.2. Msurarea performanelor reelei 6.5.3. Proiectarea de sistem pentru performane superioare 6.5.4. Prelucrarea rapid a TPDU-urilor 6.5.5. Protocoale pentru reele gigabit

7. NIVELUL APLICAIE
116

7.1. SECURITATEA REELEI 7.1.1. Criptografia tradiional. Dou principii criptografice fundamentale. 7.1.2. Algoritmi cu cheie secret 7.1.3. Algoritmi cu cheie public 7.1.4. Protocoale de autentificare 7.1.5. Semnturi digitale 7.2. DNS - SISTEMUL NUMELOR DE DOMENII 7.3. Spaiul de nume DNS 7.3.1. nregistrri de resurse 7.3.2. Servere de nume 7.4. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REELEI 7.4.1. Modelul SNMP. Notaia sintactic abstract 7.4.2. SMI - Structura informaiei de administrare 7.4.3. MIB - Baza de informaii de administrare 7.4.4. Protocolul SNMP 7.5. POTA ELECTRONIC 7.5.1. Arhitectur i servicii 7.5.2. Agentul utilizator 7.5.3. Formatele mesajelor 7.5.4. Transfer de mesaje 7.5.5. Confidenialitatea potei electronice 7.6. TIRI USENET 7.6.1. USENET din punctul de vedere al utilizatorului 7.6.2. Cum este implementat USENET 7.7. WORLD WIDE Web 7.7.1. Aspectele privind clientul 7.7.2. Aspecte privind serverul 7.7.3. Scrierea unei pagini de Web n HTML. Java, Java Script 7.7.4. Regsirea informaiilor pe Web 7.8. MULTIMEDIA 7.8.1. Audio. Video 7.8.2. Compresia datelor 7.8.3. Video la cerere 7.8.4. MBone - Coloana vertebral pentru trimitere multipl
117

8. CALCULATOARELE- CENTRE DE PRELUCRARE A DATELOR N REELE

8.1. Taxonomia calculatoarelor conform funciilor n reea (calculatoare personale, staii de lucru, servere, superservere, mainframe, rutere) 8.2. Cerine generale fa de calculatoare 8.3. Arhitecturi de baz (RISC, CISC etc)

9. SISTEME DE OPERARE DE REEA

9.1. Generaliti 9.1.1. Structura SO de reea 9.1.2. nveliuri de reea i mijloace ncorporate 9.1.3. SO cu servere rezervate 9.1.4. SO de la egal la egal 9.2. Funciile SO de gestiune a resurselor locale 9.2.1. Definirea SO locale 9.2.2. Gestiunea proceselor i procesoarelor 9.2.3. Gestiunea memoriei 9.2.4. Funciile sistemului de fiiere 9.2.5. Funciile SO de intrare - ieire 9.3. Funciile SO de organizare a lucrului n reea 9.3.1. Primitive de transmitere a mesajelor 9.3.2. Lansarea procedurilor la distan 9.3.3. Servere i servicii de fiiere 9.3.4. Semantica distribuirii fiierelor 9.4. Problemele realizrii SO de reea. 9.4.1. Cerine fa de SO moderne 9.4.2. Tehnologii avansate de proiectare a SO 9.4.3. Criterii de selectare a SO de reea 9.5. Privire de sintez asupra familiilor SO de reea 9.5.1. SO NetWare a companiei Novell 9.5.2. Familia SO de reea Windows NT a companiei Microsoft 9.5.3. Familia SO de reea Unix

118

Autori: T.Bragaru, T.Sibirschi, V.Sibirschi Denumirea lucrrii: Explorarea HTML Tehnoredactare computerizat T Bragaru Bun de tipar 11-03-2002. Formatul 60 x 84 1/16 Coli editoriale 4,2. Coli de tipar 7,4. Comanda 62. Tirajul 50 Centrul editorial al Universitii de Stat din Moldova MD 2009, mun. Chiinu, str. Mateevici, 60

119