html lab rom

Universitatea de Stat din Moldova Facultatea de Matematic i InformaticT.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, 20023

CUPRINSCUPRINS......................................................................................................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 copiile9

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.

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 carte11

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.

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 cu13

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 liniaritatea14

"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

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

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.

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 implementat18

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.

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

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. Pot22

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.

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.

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.

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.

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 i . Instruciunile HTML (numite i marcaje sau tag-uri) ncep cu o parantez unghiular deschis . 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.

Limbajul HTML definete ase niveluri de titluri ntr-un document (vezi tabelul 1). Standardul HTML recomand (!) ca un document s conin o parte descriptiv (,) 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 documentInstruciune

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 pentru regsirea paginii i alte informaii; tot ce este n antet nu apare n fereastra navigatorului Marcajele pereche TITLE. Aici se scriu cteva cuvinte Titlul sugestive despre coninutul paginii. Aceste cuvinte vor apare paginiipe bara de titlu a navigatorului. Dac pagina este adugat ntr-o list favorit, aceste cuvinte apar ca nume al paginii Marcajul de nchidere a antetului paginii Marcajul de deschidere - ncepe corpul documentului propriu zis, afiat de navigator Marcarea unui antet (titlu, subtitlu) de document, de mrimile: ... ......... ... H4 H5 H6

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

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 specialeCaracter & < > Codul HTML & < > ampensand mai mic (less than) mai mare (greater than) Semnificaie

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

a mic cu accent grav

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

Not. Caracterele speciale mai pot fi introduse prin codul lor hexazecimal n forma: + codul hexazecimal+;. De exemplu 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 se va scrie n HTML &quotA&ampB&quot are valoarea &lt100&gt34

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. Exemplu 1(denumirea ferestrei, sau paginii) Notiuni generale despre HTML In HTML deosebim marcaje pare si
marcaje impare, care au doar marca de inceput. Totul ce se contine intre aceste marcaje -
reprezinta un alineat Marcajul P nu este obligatoriuggfgn. Acest fisier este de tip html, poate fi deschis si
redactat in orice editor de texte. Poate fi vizualizat
doarin editoare destinate HTML.

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

Figura 1. Rezultatul rulrii exemplului 1. Exemplul 2Antete, alinierea antetelor i paragrafelor Exemplul 2 Antete, Alinierea antetelor i paragrafelor Salut lume!(titlul cel mai semnificativ - H1, centrat) Salut lume !(titlul de nivelul 2, alineat la dreapta) Salut lume !(titlul cel mai mic H6,36

aliniat la stnga) Mai jos se demonstreaz alinierea textului alineatelor Textul alineatului, ca si in MS Word, poate fi alineat - alipit la marginea din stnga. Aceasta aliniere este implicit. la centru sau la marginea din dreapta. 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. 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.

Exemplul 3 ntreruperea forat a alineatului, comentarii37

Exemplul 3 - intrerupere fortata a liniei - BR BR Este comod, de exemplu, pentru afisarea versurilor Limba noastr&atilde-i o comoar&atilde
Din ad&acircncuri desfundat&atilde.
Un sirag de piatr&atilde rar&atilde
Pe mosie rev&atildersat&atilde.
(A.Mateevici) Fragmentul semnificativ al Web afirii vezi figura 2

Figura 2. Rezultatul rulrii exemplului 3.4.1.5. Informaii pentru motoarele de cutare

n general n antetul unei pagini Web, ntre marcajele i , exist mai multe marcaje META, cu atribute name - content perechi. Exemplu: Titlul dorit - indic navigatorului c este un fiier HTML; charset stabilete tipul de caractere (n general windows-1252), dar exist i altele. . 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. . 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. 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 etc)? 27. Ce trebuie fcut pentru ca semnele diacritice s fie afiate? 28. Schimbai titlul (numele) paginii exemplului 1.

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 textuluiInstruciune

Atributesize = i color =

Descriere i exempleMrimea 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)

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. 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 , 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 =

clear =

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:

align =

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

Color = 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 Afieaz textul cu litere aldine (ngroate) Afieaz textul cu litere italice (nclinate) Afieaz textul subliniat

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, adic aa cum arata el n 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

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 culoriDestinaie (funcie) Instruciune HTML

Imagine fundal Culoare fundal Culoare text Culoare referin

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

Tabelul 5. Culori exprimate prin nume i RGB

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 Exemplul 4. Text preformatat Exemplul 4. Text preformatat produs pret-cost transport valoare --------- ------------- ------------ ----------lapte 2.50 0.05 2.5548

carne 42.00 oua 6.00

2.50 0.15

44.50 06.15

Rezultatul rulrii exemplului 4 vezi mai jos figura 3.

Figura 3. Rezultatul rulrii exemplului 4Exemplul 5. Elemente de formatare caractere Exemplul 5. Elemente de formatare caractere Acest text este ingrosat.
Acest text este inclinat.
Acest text este subliniat.
Acest text este afiat cu caractere de tip monospaiu .
Acest text este barat.
Acum este afiat un indice , iar acum unexponent.
Acesttext esteafiattot maimare
Acest texteste afisattot mai mic
. Acest texteste subliniat si ingrosat.
Formula apei esteH2O 49

Rezultatul rulrii exemplului 5 vezi mai jos figura 4.

Figura 4. Rezultatul rulrii exemplului 5 Exemplu 6. Efecte aparente Modelarea efectelor aparente Modelarea efectelor aparente U R C A50

R E S I C O B O R I R E

Rezultatul rulrii exemplului 6 vezi mai jos figura 5

Figura 5. Rezultatul rulrii exemplului 64.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 ? ? 3. Care este destinaia marcajului ? ? 4. Care este destinaia marcajului ? ? 5. Care este diferena dintre i ? 6. Care este diferena dintre marcajele ? ?

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

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 listelorInstruciune Atribute Liste de finiii nceputul sfritul listei de definiii Termen (de definiie) Descriere

Descrierea termenului de definiie Liste neordonate (marcate)

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

type= start=

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

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,...

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: Exemplu de liste LISTA BAGAJELOR
PASAGERILOR RUTEI 7021 AIOANEI PETRU

Serie la pasaport:A12763876

Punctul unde urmeaza:Moscova

DATE DESPRE BAGAJ:

Nr.Biletului:AA-1209

Nr. Bagajului: 000001

Greutate: 25kg

BAGRIN ION

Serie la pasaport:A12700876

Punctul unde urmeaza:Moscova

55

DATE DESPRE BAGAJ:

Nr. Biletului:AB-0089

Nr. Bagajului:000698

Greutate:14kg

S.A.M.D... .

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 de57

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.

Tabelul 7. Marcaje de construire a tabelelorInstruc-iune -

Atribute

DescriereTitlul 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= 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)

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 = BGCOLOR= ALIGN=

HEIGHT= -

HEIGHT =

WIDTH=

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

ALIGN =

BGCOLOR = WIDTH = ALIGN = CHAR= BGCOLOR= BGCOLOR =

mpreun cu marcajul 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. . 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.

4.4.2. Exemple de explorare Scop. Explorarea posibilitilor HTML de construiremodificare a tabelelor. Exemplul 8. Structurarea unui tabel Exemplul 8 Cel mai simplu tabel din 2 coloane si 2 linii TABELUL POATE AVEA UN TITLU Prima linie, prima coloan (elementul a(1,1)) Prima linie, a doua coloan (elementul a(1,2)) Linia a doua, coloana nti (elementul a(2,1)) Linia a doua, coloana a doua (elementul a(2,2))

Rezultatul afirii exemplului 8 vezi mai jos, figura 7.

Cel mai simplu tabel din 2 coloane si 2 liniiTABELUL 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

Exemplul 9.Un tabel mai sofisticat LISTA BAGAJELOR PASAGERILOR RUTEI 7021 Nr. Date despre pasageri, destinatia Identificare bagaj Familia Seria Pas. Destinatia Nr. rutei Nr.biletului Nr.bagaj Greutatea(kg) 65

1 Aioanei Petru A12763876
Moscova 7021 AA-1209 000001
25 2 Bagrin Ion A12700876 Moscova 7021 AB-0089 000698
14 3 S.A.M.D ... ... ... ... ...
...

Rezultatul afirii exemplului 9 vezi mai jos, figura 8.

LISTA BAGAJELOR PASAGERILOR RUTEI 7021Date 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?

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

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 , cu urmtoarea sintax: Text explicativ 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

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 , care stabilete un cuvnt-cheie ce identific univoc paragraful-int:70

paragraf-int . 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 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: Text explicativ 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 , plasat n orice fiier din site-ul nostru, indic o legtur absolut extern. Legtura , plasat n fiierul index.html, indic o legtura absolut spre fiierul a12.htm din site-ul dat. Legtura , plasat n orice fiier din directorul A1 sau A2, indic o legtura spre fiierul index.html din site-ul dat. Legtura , plasat n fiierul b.htm din directorul B, indic o legtur spre fiierul a.htm din directorul A. Legtura , plasat n fiierul index.html, indic o legtur spre fiierul a12.htm din site-ul dat.

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):Introducere
Elemente HTML 1.Introducere Prezenta lucrare este un ghid de explorare HTML. 2. Elemente HTML

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

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 referineInstruciune 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"

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

html lab rom

Documents