Universitatea de Stat din Moldova Facultatea de Matematică şi Informatică

T.Bragaru, T.Sibirschi, V.Sibirschi

Aprobată de Consiliul Profesoral al Facultăţii de Matematică şi Informatică

Chişinău, 2002

2

CZU 004.55(075.8) B76 Bragaru T, Sibirschi T, Sibirschi V. Explorarea HTML. Chişinău: USM, 2002. – 118 p.
În lucrare sunt elucidate aspecte ale proiectării Web site-urilor. Pe baza unor exemple tipice se explorează posibilităţile limbajului HTML ca nucleu al Web tehnologiilor avansate. Totodată, lucrarea conţine un şir de întrebări de autocontrol şi exerciţii care ajută la o mai bună înţelegere a materialului. Se adresează celor cointeresaţi în construirea Web-paginilor, celor ce doresc să publice careva informaţii prin Internet şi/sau să dezvolte o afacere prin Internet. Dar în primul rând este destinată studenţilor-specialităţi de informatică, reţele de calculatoare, tehnologii informaţionale etc. Pentru a explora posibilităţile standarde ale HTML–lui, este necesară lansarea exemplelor. Pentru a afla mai multe informaţii decât cele prezentate în lucrare vizitaţi Web-paginile indicate în referinţe sau oricare alte izvoare de pe Internet. Sursa principală de inspiraţie a prezentei lucrări este Internet–ul. Referinţe 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 Ştiinţe a Republicii Moldova, şef catedră, doctor, conferenţiar, G. Secrieru.

Descrierea CIP a Camerei Naţionale a Cărţii Explorarea HTML/Bragaru T., Sibirschi T., Sibirschi V. - Chişinău: 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

..13 3.2...........6.............. OBIECTIVE URMĂRITE.7.......................................29 4.....1....5......................................1.......................9 2......1..............31 4.....53 4.... INTRODUCERE......CUPRINS CUPRINS.....................5................................6 1.....4...19 3.................................3...................................... Informaţii pentru motoarele de căutare........................52 4................ WORLD WIDE WEB...............................6....................................4 1.. CONCEPTE DE BAZĂ .................... CONŢINUTUL ŞI ORDINEA LUCRĂRILOR..38 4...........23 3............ EXPLORARE HTML.........................17 3................. Instrucţiuni HTML şi noţiuni de bază....... Modul de lucru.................46 4.........................2..1...........3.........2.29 4............................................7.......... Instrucţiuni şi atribute utilizate..2....1.39 4....................................2.............. Exemple de explorare ............1.................................................................. Exemple de explorare ...........48 4........1....2........................................................ HTML...........21 3.....................................2..........2...... Prima sarcină de explorare........................... Exemple de explorare.26 3........... SARCINA DE EXPLORARE (STUDIERE) HTML ...... LISTE....1................................1........ WEB DESIGN .......................................... Redarea culorilor prin nume sau valoarea RGB......2......................................................7...............16 3. DE CE E NECESAR A FI STUDIAT HTML ..............29 4.......3.....7 1..........6 1...................1......9 2..1.................................... Publicare........ ELEMENTE DE BAZĂ ALE DOCUMENTELOR HTML ........34 4................... Noţiuni şi marcaje utilizate...........................................................................................54 4 ...............41 4.. NAVIGAREA .....7............18 3................ Întrebări de autocontrol şi exerciţii.................3......................7 2..... Setul de caractere utilizat de HTML.. CE ESTE NECESAR A CUNOAŞTE PENTRU ATINGEREA SCOPULUI.............................................32 4................ HYPERTEXT ....................................................FORMATAREA CARACTERELOR.................1..13 3............... Promovarea site-ului ..........10 3........ SARCINA CREATIVĂ (CRISTALIZARE CUNOŞTINŢE)... Proiectarea unui Web-site..............................3.......2..............3..2.............................................27 4......................4........................ Întrebări de autocontrol şi exerciţii............ ALTE ORGANIZĂRI INTERNE ALE TEXTULUI.41 4.....................................................................................................................................................1..............4............2..... ORGANIZAREA TEXTULUI.....................24 3.........................................3...................................... EDITOARELE HTML ...................1....... STRUCTURA DOCUMENTULUI HTML............3..................................51 4.....

...80 4......................106 Anexa 2..........................93 4.......... ALTE REGULI PENTRU O PAGINĂ MAI EFICIENTĂ .....82 4.4..............58 4............72 4.. Legăturile hipertext...............................86 4...................6..............................100 5.4...................5..........2....2......4..........................................6.......3..................3........................... Exemplu de structură a site–ului creativ ..............83 4...............................................................................................................81 4......................................107 Anexa 3.....................9...1......56 4........................................................................................................................ Întrebări de autocontrol şi exerciţii... ACCESIBILITATEA WEB-PAGINII. Comenzi de construire a cadrelor.................... OPERAREA CU FORMULARE.. Întrebări de autocontrol şi exerciţii............Maracje utilizate ............................... NAVIGAREA ÎN INTERIORUL PAGINII........... Exemple de explorare ............9......75 4.............88 4.1.......................2........94 4......... O listă sugestivă de teme pentru site-urile creative la cursul „REŢELE DE CALCULATOARE”...1......................................110 Anexa 5................................................................3.5.........................................69 4.....100 5.............. Denumiri sugestive de tabele şi liste.7...............4..............7...................... REFERINŢE ........2...5......94 4......................................1.....................4................83 4.....7............................................................................78 4.3.........9.... OPERAREA CU OBIECTE ..... Introducere videoclipuri .... FERESTRE (CADRE........96 4..........9.....1.........6.....90 4....89 4...... Exemple de explorare ..... Forma recomandată a CV-ului....5.100 5.....................................3............... Text clipitor ................................. SFATURI UTILE........7......... FRAME) ..... ALTE ORGANIZĂRI INTERNE ALE TEXTULUI.................2........4 Întrebări de autocontrol şi exerciţii................................4 Întrebări de autocontrol şi exerciţii..................... Modele de stiluri............................................................2...................... ARANJAREA ÎN PAGINĂ .....64 4..........111 5 ..........4.................................................101 5........... Noţiuni şi marcaje utilizate.....................58 4........1......2... Organizarea site-ului........... Exemple de explorare ...........78 4.......................................3........1..........6......68 4... 109 Anexa 4........................8...... Exemplu sugestiv de structurare a site –ului de explorare.77 4. Întrebări de autocontrol şi exerciţii...........67 4.....................96 5....... Realizarea efectului Marquee.............................. ORGANIZAREA SITE-ULUI.........................3.....................................8...............103 BIBLIOGRAFIE ŞI REFERINŢE UTILE...........105 Anexa 1.......... TABELE............... ALTE ELEMENTE........3 Întrebări de autocontrol şi exerciţii. Introducerea sunetelor ......................................6.......................................... Introducerea imaginilor............................................8................5........

Editoarele „Microsoft Front Page". iar asemenea probleme fără cunoaşterea HTML sunt imposibil de soluţionat. precum şi corectarea unor documente simple ce funcţionează excelent sub navigatoarele (browser-ele) omonime . Codurile construite cu ajutorul editoarelor sunt mult mai lungi decât cele construite manual. De asemenea ele nu pot să realizeze reformatare pentru diferite dimensiuni de ferestre sau rezoluţii ale ecranelor. iar aceasta este costisitor. Unele editoare sunt orientate special la elaborarea codului HTML.Internet Explorer (IE) sau NetScape. Însă Web-paginile construite sub un anumit mediu de editare pot funcţiona prost sub alte navigatoare din cauza particularităţilor lor. „NetScape Composer" etc. durează. pe diferite platforme. precum şi a editoarelor. utilizând la păstrare convertoarele aferente. INTRODUCERE 1. iar uneori este chiar şi imposibil.1. calculatoare şi sisteme de operare. deoarece procesoarele de tip WYSIWYG nu sunt standardizate între furnizori. 6 . pentru a înlătura comenzile specifice unui mediu de elaborare sau unei platforme. au comenzi incorporate pentru verificarea corectitudinii codului (spre exemplu HoTMetaL). Există o serie de procesoare de texte care permit salvarea documentelor în format HTML în locul formatului propriu. Uneori poate fi mult mai uşor să elaborezi o pagină în HTML decât să înveţi un editor specific de Web-pagini.1. permit elaborarea rapidă. Paginile construite în medii speciale de editare necesită testarea rezultatelor pe cât mai multe din navigatoarele existente. De ce e necesar a fi studiat HTML Paginile Web (codurile HTML) pot fi construite-editate manual sau în diverse medii de editare. Adesea se cere revizuirea codului şi corectarea lui.

1. în primul rând. Pentru un Web designer profesionist este absolut necesară şi cunoaşterea unor editoare specializate a Web-paginilor. 7 . În al doilea rând. pentru asigurarea funcţionării lor corecte pe diferite platforme hardware . HTML este un limbaj simplu. care poate fi învăţat în maximum o săptămâna-două. pentru construirea unui asemenea site veţi avea nevoie de o serie vastă de tipuri de programe. Iniţiere în problematica creării Web-paginilor. orice pagină de Internet este scrisă în limbajul HTML (Hyper Text Markup Language).software. denumit navigator (browser). Dificultatea apare abia în momentul conceperii unui site şi se referă la conţinutul acestuia.3. Obiective urmărite 1. cunoaşterea HTML este absolut necesară pentru corectarea – modificarea unor Web-pagini.2. 2. la schema de organizare şi elementele de design aferente. Din orice navigator puteţi vedea codul-sursă al unei pagini de Web. un limbaj care este interpretat de către navigator în momentul încărcării unei pagini Web. Însuşirea marcajelor (tag-urilor) de bază a HTML.Deci. 4. 1. Web site-urilor. Acesta este scris în HTML. Crearea-modificarea unui Web site de prezentare a unei teme recomandate. Crearea-modificarea unui Web site sub genericul „Explorarea HTML”. studierea HTML urmăreşte. scopuri didactice şi instructive – pentru a înţelege mai bine arhitectura Web-paginilor şi a standardului SHTML. 3. Ce este necesar a cunoaşte pentru atingerea scopului Deşi pentru vizualizarea unei pagini de Internet este necesar un singur instrument. În primul rând.

În celelalte programe utilitare (de ex. Pentru site-uri mai sofisticate. O altă modalitate de creare a unei pagini Web este folosirea unui program utilitar. Avantajul constă în posibilitatea de a controla în totalitate codul absolut.O pagină HTML poate fi creată într-un program simplu de redactare a textului. HomeSite) se editează direct codul HTML. ca de exemplu. schemelor. 8 . obiectelor sonore. distribuit împreună cu Windows 9x. Pentru utilizarea programelor WYSWYG (de ex. Corell Draw şi altele). acţiuni . De asemenea sunt necesare cunoştinţe prealabile de construire a imaginilor.3. programul facilitând transformarea în codul HTML corespunzător. Utilitarele se împart în doua categorii: programe de tipul WYSWYG (vezi punctul 3. binecunoscutul NotePad. HotDog. Dezavantajul programelor de acest fel este codul HTML creat de acesta care este excesiv de mare. DHTML. CGI. Visio.este necesară programarea în Perl. al prezentei lucrări) sau programe ajutătoare. cu animaţie. Microsoft Front Page) nu este necesară cunoaşterea limbajului HTML. un posibil dezavantaj putând fi considerat necesitatea de a cunoaşte limbajul HTML. Crearea site-ului are loc în mod intuitiv. Respectivul cod uneori poate să fie de câteva ori mai mare decât codul optimizat. programarea unor scripturi şi apleturi în Java. programele oferind diverse unelte auxiliare. Java Script etc. videoclipurilor (PhotoShop.

egal cu numărul lucrărilor de laborator sau numărul compartimentelor explorate. precum şi găsirea răspunsurilor la întrebările formulate. sau mai instructiv. arborescentă. 2. sau de folos. Un exemplu sugestiv de cuprins al compendiului de explorare a HTML vezi anexa 3. Totodată. care conţine un număr de Web-pagini. a exerciţiilor. conform graficului de studii.2. Fiecare pagină este o prezentare succintă a marcajelor temei explorate. sub formă de Web site. pur şi simplu. în fond individual. este o condiţie de primă atestare a studentului. Fiecare îşi fixează ceea ce i-a fost mai interesant. se explorează posibilităţile HTML. sau stea. Sarcina de explorare (studiere) HTML Începând cu prima lucrare de laborator şi terminând cu ultima. sau. precum şi exemplul 10. care poate fi utilizată la susţinerea lucrărilor de laborator şi care la finele cursului va constitui un mini-conspect de studiere a HTML-lului. se recomandă efectuarea a două lucrări integrale care să ofere o evaluare mai adecvată a cunoaşterii disciplinei. Prezentarea acestui site.1. Ordinea executării lucrărilor nu este obligatorie. În paralel se creează un Web site de structură liniară. Însă pentru cei ce construiesc prima lor Web-pagină şi primul Web site se recomandă ordinea consecutivă de la simplu spre complexitate sporită. CONŢINUTUL ŞI ORDINEA LUCRĂRILOR Conţinutul lucrărilor de explorare se exprimă prin executarea exemplelor aduse în text. Utilizaţi copiile 9 . Notă: Păstraţi rezultatul lucrărilor de laborator pe harddisc şi salvaţi copiile pe o dischetă portabilă. ca note pentru memorare. sau ca exemple demonstrative etc.

se va studia şi înţelege (de dorit destul de bine) informaţia la temă. Cu fiecare lucrare site–ul iniţial se va complica. animaţie etc. La al doilea pas se evaluează materialele. grafice. schemelor etc. În primul rând. incluzând noi pagini. În scopul selectării informaţiilor utile pentru tema site-ului este recomandat studiul mai multor izvoare (studierea preliminară a literaturii. Pentru a obţine efectul dorit. Prin această lucrare se verifică aptitudinile de orientare a studentului în problematica construirii Web-paginilor. înainte ca pagina să existe. Dar poate fi propusă orice altă listă de lucrări creative. Sugestiv o listă de teme la cursul „Reţele de calculatoare” este prezentată în anexa 5. care vor intra în site. Această sarcină se va realiza după iniţierea în HTML. Lucrarea creativă poate fi efectuată în trei etape. în această lucrare sunt semnificative ideile de proiect.) Prima etapă se va finaliza cu o colecţie de materiale pentru tema selectată (pe hârtie şi/sau pe suporţi magnetici). de construire a imaginilor. se cristalizează cunoştinţele despre HTML. 10 . Sunt necesare anumite decizii de planificare–machetare a site–ului.2. ipotezele.pentru versiuni noi şi explorări ulterioare. este necesar să ne-o imaginam. imagini. precum şi după acumularea informaţiilor suficiente despre tema selectată. Totodată. 2. noţiuni. Stabilirea cu precizie a unei coloane vertebrale a paginii constituie esenţa proiectării Web-paginii. efecte etc. Sarcina creativă (cristalizare cunoştinţe) O altă lucrare integrală constă în crearea unui Web site pe o temă individuală. inclusiv teze anuale. regăsirea informaţilor pe Internet etc. marcaje. precum şi structurarea materialului expus sub formă de hipertext. Este necesar a selecta porţiuni potrivite de text.

după dorinţa şi nevoile asociative ale cititorului. eventual un glosar de termeni. liste. Deoarece când ai multe a spune. şi mai mult. Legăturile activate vor avea ca efect o desfăşurare a temei „în adâncime”. după necesităţi. Web site-ul va conţine texte. forme. tabele. Se evaluează utilizarea posibilităţilor lucide de expunere a temei sub formă de hipertext. scheme. scheme. în caz de necesitate. El trebuie să-şi selecteze mijloacele de realizare. în sfârşit. paragrafe). miezul. sau de examinare. dar dispui de puţin loc şi timp . cu referinţe directe şi inverse. Prezenţa materialelor grafice în site-ul creativ este recomandată insistent. plus posibilitatea de păstrare a atenţiei lui prin utilizarea legăturilor grafice. În cadrul evaluării este important a deosebi un Web site de o carte 11 .Şi. sau pentru admiterea la examene. să sesizeze principalul. cât şi forma prezentării. totodată. imagini etc. Pe de altă parte. „pe diagonală” ori combinat. trebuie să dezvăluie complet subiectul temei. dar care. să planifice etapele. structurarea materialului. iar. Prezentarea site-ului creativ la finele cursului este o condiţie necesară şi suficientă pentru atestarea la sfârşit de semestru. să-şi mobilizeze resursele personale şi cele ale mediului (de laborator) pentru a elabora site-ul planificat. studentul este impus a acţiona.o schemă înlocuieşte mii de cuvinte. Volumul maximal al site–ului este limitat la 10-15 pagini A4. cu mărimea maximală a fontului de 14 pt (puncte). este necesar a studia destul de profund tema. pentru a construi o schemă. capitole. de a utiliza medii de construire a schemelor. La susţinerea lucrării creative este important atât conţinutul. foto. Fiecare nivel va avea propriul său cuprins. în funcţie de cursul studiat şi obiectivele stabilite. referinţe în adâncime şi/sau înapoi. Şi anume aşa trebuie făcută prezentarea pe Internet. Structurarea temei va fi efectuată (cel puţin) în trei niveluri (temă. audio etc. imaginilor etc. inclusiv codul HTML.

În funcţie de numărul de ore prevăzut cursului. Este necesar a utiliza posibilităţile avansate de hipertext şi hipermedia. 12 .tradiţională. ca teme individuale (conform anexei 5) pot fi titlurile de nivelul I. sau titlurile de nivelul III. O temă creativă poate fi executată doar de o persoană a seriei de studii. sau titlurile de nivelul II cu tot ce este sub ele–ca plan al expunerii temei. cu plan de expunere conform titlurilor de nivelul II. Un exemplu sugestiv de cuprins al sarcinii creative la una din temele cursului „Reţele de calculatoare” vezi anexa 4.

pentru a putea obţine o imagine de ansamblu asupra ei. Internet Explorer. Indiferent de metoda de stocare (hârtie sau suport magnetic). CONCEPTE DE BAZĂ 3. pe lângă textul propriu-zis. Un hipertext poate fi gândit într-un spaţiu cu mai multe dimensiuni. informaţia se poate prezenta în una din următoarele forme de organizare: 1) Organizare liniară de tip "roman". În acest caz. audio. ordinea de parcurgere a textului în acest caz nu mai este strict consecutivă şi poate fi stabilită de creator. pe niveluri (de exemplu. procesor de texte etc) care conţine. secţiuni şi subsecţiuni). pe lângă text (conţinutul clasic al unui document).1. video. înregistrări audio. 3) Organizare asociativă. HYPERTEXT Prin hipertext se înţelege un document (evident în sensul utilizat în informatică: fişier creat printr-un editor. Spre deosebire de roman. informaţia trebuie parcursă în ordine. imagini. 2) Organizare sub forma ierarhică. Un roman nu poate fi citit decât succesiv. fiecare axă reprezentând un alt mijloc de comunicare: text. Harvest sau altele. de la început la sfârşit. în funcţie de scopurile urmărite.3. În acest caz. cunoaşterea domeniului etc. arborescentă. Conceptul de hipertext este deosebit de important şi esenţial în înţelegerea facilităţilor şi modului de utilizare a sistemelor de tip NetScape. legături cu alte documente. Cititorul se poate menţine la niveluri mai generale sau poate aprofunda acele noţiuni care i se par mai interesante prin parcurgerea doar a unor ramuri din arborele în care este organizat textul. animaţie. în capitole. în ordinea liniară. există o tabelă de indecşi în care sunt enumerate subiectele şi/sau conceptele importante din carte împreună cu 13 . grafică.

însă o organizare foarte versatilă. Plecând de la analizele şi experimentele făcute asupra memoriei şi a modalităţilor de reprezentare şi prelucrare a cunoştinţelor de către om. este plictisitoare. abătând atenţia cititorului de la general către specific.pagina unde pot fi regăsite. Avantajele hipertextului devin evidente atunci când se iau în considerare dezavantajele inerente ale mediului de informare tradiţional: cartea tipărită în care prezentarea informaţiei este exclusiv liniară. Mai mult. Sistemele dezvoltate conform acestei direcţii sunt aşa-numitele sisteme hipertext şi hipermedia. cunoştinţele noastre sunt foarte strâns legate unele de altele. Hipertextul menţine capacitatea de stocare a unei mari cantităţi de informaţie. dar înlătură toate limitările contextuale. de asemenea. trimiteri în josul paginii la bibliografie sau la anexe. În acest mod. Învăţarea unei noţiuni noi se face prin asocierea ei cu altele vechi. în reţea. avem o organizare de tip reţea a informaţiei. Mutarea de la un subiect la altul este greoaie. se poate spune că memoria noastră de lungă durată este de tip asociativ. Detaliile sunt inserate în text. detalieri separate ale unor concepte. Scheletul pe care sunt organizate informaţiile într-un astfel de sistem îl reprezintă un graf ale cărui noduri sunt conceptele importante ale domeniului şi ale cărui arce sunt relaţii între aceste concepte. formând o reţea complexă. care se modifică rapid în funcţie de factori psihologici (motivaţie. cititorul poate căuta direct un anumit subiect interesant. definiţii. greoaie. Altfel spus. De asemenea. care este cea mai apropiată de modul uman de a gândi. stimuli externi) sau chiar fizici. Bineînţeles că cea mai adecvată formă de organizare a informaţiilor ştiinţifice este cea asociativă. stare de spirit. oferită de cartea scrisă. "ştiute". în text există referiri la alte subiecte. de cele mai multe ori. În contrast cu liniaritatea 14 . Revenirea la subiectul anterior este. enunţuri şi demonstraţii. presupunând o căutare care.

Nodurile unei reţele hipermedia pot conţine imagini. Legăturile activate produc o desfăşurare a documentului în adâncime. definite de cel care a creat hipertextul. după nevoile utilizatorului plus posibilitatea de păstrare a atenţiei cititorului prin utilizarea legăturilor grafice. sau orice combinaţie a acestora. cu menţiunea că anumite limitări de parcurgere ar fi totuşi necesare pentru a asigura o citire coerentă a documentului. pe diagonală etc. Rezultă deci că decizia privind ordinea prezentării informaţiei trece din sarcina celui care elaborează documentul în sarcina celui care îl citeşte. pagină după pagină etc. Hipertextul permite evitarea modului tradiţional de citire a unui document: linie după linie. aceasta din urmă fiind o sarcină a creatorului. chiar acţiuni. sistemul hipertext oferă utilizatorului o liniaritate "subiectivă". în loc să urmeze cursul normal (consecutiv) al documentului. unei legături i se pot asocia acţiuni dintre cele mai diverse. Aceasta înseamnă că. sunete. noţiunea de hipertext s-a extins în mod natural spre cea de hipermedia (un subdomeniu al aplicaţiilor multimedia). cum ar fi afişarea unei fotografii însoţită de un text explicativ."obiectivă" a informaţiei tipărite. a revenirii în starea anterioară sau a continuării explorării prin alegerea unei alte legături. Nodurile pot cuprinde 15 . derularea unui microfilm sau a unei melodii. după cum a gândit-o creatorul hipertextului. audio etc. utilizatorul poate alege o anumită cale de explorare dintr-o mulţime de astfel de căi posibile. Sunt porţiuni de text a căror semnificaţie este mai mult sau mai puţin unitară. În cazul acestor sisteme.. toate cu posibilitatea stopării. texte. Principalele elemente ale unui sistem hipertext sunt: 1) Nodurile (paginile) Nodul (pagina) este un bloc de informaţii cuprins în reţeaua sistemului hipertext. Pe măsură ce performanţele calculatoarelor au sporit.

2) Ţintele Ţinta ("target") este o parte dintr-un nod care constituie originea unei legături către alt nod. care permit vizualizarea Web documentelor.2. un grup de cuvinte sau o altă informaţie din nod (de exemplu o porţiune dintr-o imagine). În pofida standardului SHTML. există o mare diversitate de navigatoare ce rulează pe diferite platforme hardwaresoftware. ceea ce permite utilizatorului să treacă de la un nod la altul. 3. create de diferiţi producători. Pe ecran. acţiuni executabile sau orice combinaţie a acestora. NAVIGAREA O serie de firme producătoare de software au elaborat browsere . un cuvânt. fapt care îngreunează standardizarea Web tehnologiilor pe Internet. ViolaWWW pot fi utilizate pe platforma X Windows 16 . 3) Legăturile Fiecare nod este legat de alte noduri din reţeaua hipertextului. Păstrând analogia cu cartea scrisă. se colorează altfel decât restul ţintelor). Este de obicei. Clienţii WWW sunt navigatoare interactive tipice aflate sub controlul utilizatorului.aşa numitele navigatoare–nişte programe. secvenţe de sunete. Atunci când cursorul atinge o astfel de ţintă. legăturile pot fi privite ca nişte "semne de carte" marcate la care cititorul se poate transfera oricând. ţintele apar cu o culoare sau strălucire diferită de cea a textului obişnuit ("highlighted"). scheme.fragmente de text. Existenţa unei legături între două noduri A şi B ale hipertextului oferă utilizatorului aflat în nodul A posibilitatea de a accesa direct nodul B. imagini. ea devine activă şi capătă un aspect special (de exemplu. fără a mai trece prin alte noduri. De exemplu: • Navigatoarele Mosaic.

acea şi este) cum ar fi Netscape Navigator Gold. În decurs de câţiva ani a apărut şi continuă progresul numit „webomania”. codul documentului. 3.3.ceea ce vezi. Multe din procesoarele de texte cu destinaţie generală. O altă clasă răspândită de editoare destinate pentru elaborarea de documente . au fost elaborate circa 200 editoare HTML. Multe din editoarele HTML sunt gratuite şi se pot copia de pe Internet. cum ar fi Microsoft Word. au convertoare ce permit salvarea documentelor sub formă de cod HTML. majoritatea dintre care sunt de tipul WYSIWYG. El lucrează la fel cum lucrează procesoarele de texte cu destinaţie generală. 17 . Altele costă până la 200$. Cele mai cunoscute firme Microsoft cu Internet Explorer şi NetScape cu produsul omonim şi-au creat propriile extensii şi practic au acaparat piaţa. Utilizatorul nu vede "conţinutul intern". OS2. Word Perfect sau altele.shtml. Unele sunt dependente de platformă. Ele apar ca ciupercile după ploaie. ici. EDITOARELE HTML În prezent se utilizează pe larg editoare HTML de tip WYSIWYG (What You See Is What You Get . Ken Nesbitt Web Editor etc) funcţionează similar cu mediile de programare interactivă de genul Visual Basic sau Borland Delphi. altele nu. Microsoft Front Page şi altele. Astăzi nu este cunoscut numărul exact al editoarelor HTML. Pentru mai multe informaţii (o lista de navigatoare care se modifică continuu şi caracteristicile lor) vezi: http://www. dar vede numai rezultatul Web afişării. WinWeb sunt pentru platforma MS Windows.ro/navigator/navigatoare.• Navigatoarele Cello.HTML (HotDog. inclusiv cel mai răspândit Microsoft Word.

Mac. posibilităţi de "undo" multiple. conţin fişiere de acces pentru colaborare autorizată. sau WWW. FrontPage. NeXTstep. Hypertext Master. HoTMetaL şi HoTMetaL PRO.vezi o listă completă de utilitare de editare HTML cunoscute până la această oră şi împărţită pe platforme: http://www. Există editoare HTML independente de platformă. Hippie.4. HTMLjive). Cel mai mare număr de editoare (peste 100) este pe platforma Windows şi numărul lor creşte continuu (4W Publisher. au suport pentru câteva versiuni HTML. CGI*Star. editoare mici şi mari. pentru extensii Netscape. cu servicii avansate. 3. cu interfaţa intuitivă. E-Publish Internet. VMS şi Windows. sunt bazate pe tehnologia SGML. preferenţial destinate pentru forme sau tabele. Unix. sau pentru platforme multiple (Easy HTML. WebMania!). sau doar pentru o platformă. HotDog Professional. Actualmente sub UNIX sunt cunoscute circa 25 editoare (WebMagic Phoenix HoTMetaL şi HoTMetaL PRO). OS/2. şabloane (template-uri) HTML. când cercetătorii de la CERN (Laboratorul European pentru fizica particulelor) au dezvoltat o reţea pentru a avea acces mai uşor la documentele produse de diverse laboratoare.ro/navigator/editlist. sau W3 a apărut la sfârşitul anilor '80. WebElite. construire pas cu pas a paginii etc. În 1990 ei au introdus un navigator doar pentru texte şi au dezvoltat HTML.ici. Editoarele HTML sunt împărţite pe platforme: Amiga. Pentru mai multe informaţii . World Wide Web World Wide Web. sau Web. În 1991 au implementat 18 . Aspire. Multe din editoarele HTML combină funcţiile complete ale unui navigator şi ale unui editor WYSIWYG. accesul la codul-sursă HTML etc. sau Explorer.Există editoare care pot edita simultan mai mult de 100 de pagini. DOS.

îi dă acestuia certitudinea că totul este potrivit intereselor lui. HTML este bazat pe SGML (Standard Generalized Markup Language) 19 .Hypertext Markup Language . care în mare măsură a determinat succesul Web tehnologiilor şi a cauzat webomania. Capacitatea de a accesa informaţia univoc în pofida unei mari varietăţi a tipurilor de calculatoare şi a software-ului rulat de acestea. HTML HTML . fişiere Postcript şi alte formate. Este compus dintr-un set de elemente care definesc un document şi ghidează afişarea acestuia. Toate documentele accesibile în Web sunt legate între ele.este un limbaj de marcare pentru hipertext care este înţeles de toţi clienţii de WWW. de la un subiect la altul. În 1992 cercetătorii de la CERN au introdus Web în comunitatea Internet şi cu aceasta a început revoluţia.• • • Web la CERN. Capacitatea de a încorpora o mare varietate de tehnologii şi tipuri de documente. filme MPEG. Cele trei componente majore pe care le conţine sistemul WWW: Interfaţa utilizator consistentă. indiferent de serverul pe care sunt memorate şi indiferent de locul geografic unde sunt amplasate. Documentele HTML oferă mijloace pentru furnizarea de legături hipertext la o varietate de medii: de la text la imagini. de la un loc la altul etc produce o impresie puternică asupra utilizatorului. Trecerea de la un document la altul. potrivit ritmului propriu de înţelegere. şi aceasta într-un mod cât mai simplu din punctul de vedere al utilizatorului. Cea mai importantă caracteristică a Web-ului o constituie simplitatea modului de acces la resurse. 3.5. Ceea ce deosebeşte WWW de celelalte componente ale Internetului este tocmai hipertextul. care şi-a găsit în Web calea ideală de exprimare. sunete.

Este de menţionat că HTML este un limbaj în continuă evoluţie şi că diferite navigatoare WWW pot recunoaşte diferite seturi de HTML. un limbaj care descrie cum trebuie să fie formatate textele. introdus în 1996.0 şi extensii Netscape. HTML conţine comenzi explicite pentru formatare.m. Framemaker. introdus în 1996. 20 . încorporând o serie de marcaje din HTML 3. Ea conţine 49 de marcaje. bannere etc.şi reprezintă elemente de document la nivel logic.0.0 şi HTML+ au apărut în 1990. HTML a fost proiectat să poată opera cu funcţionalităţi multimedia ale WWW. cum ar fi marcaje pentru notaţii matematice.2. Un document făcut public poate fi văzut din orice punct al Internetului. este considerat ca succesorul versiunii 2. Se pot crea documente HTML direct sau utilizând programe de conversie din alte formate ca LaTex.0 a apărut în 1995. cum vor apărea paginile documentului etc. Un document HTML poate fi făcut public. HTML este un limbaj de marcare.a. dacă este amplasat pe un calculator care are acces la Internet. Versiunea cuprindea extensii importante. HTML 3. HTML 3.0 şi extensii Netscape. HTML 1.0. respectiv 1993.în acele timpuri un om .ce font-uri să folosească ş.0. când editorii făceau marcaje pe documente pentru a indica tipografului . este considerat ca succesorul versiunii 2. a fost prima versiune standardizată. HTML 4. HTML 2. În prezent nu mai este utilizat.0.d. apărut în 1994. Word pentru Windows şi altele. încorporând o serie de marcaje din HTML 3. precum şi comenzi care vor indică modul cum se efectuează legăturile documentului. Termenul de "marcare" provine din timpurile vechi.

păstrează informaţia în structuri de date separate. Documentele scrise într-un limbaj de marcare pot să fie comparate cu cele obţinute utilizând procesoare de text de tip MS Word sau Word Perfect. Prin standardizarea şi includerea comenzilor de marcaj în fiecare fişier HTML. devine posibil ca orice program de navigare să poată să citească şi să formateze orice pagină Web. dar diferiţi furnizori de navigatoare şi programe de navigare au adăugat o serie de extinderi proprii. de exemplu.Avantajul utilizării 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. Nu toate procesoarele de texte funcţionează aşa. dar s-ar putea să fie necesară afişarea într-o mică fereastră de pe un ecran cu 640 x 480 pixeli şi utilizând culori codificate pe 8 biţi. Specificaţia curentă a limbajului HTML se poate consulta pe serverul http://www.w3. 3. Procesoarele de text pentru Macintosh. Aceşti furnizori speră ca cei care construiesc pagini de Web să utilizeze aceste extensii astfel încât cei care vor să citească aceste pagini să aibă nevoie de programe de navigare care ştiu să interpreteze extensiile respective. Elemente de bază ale documentelor HTML 21 . Astfel de abordări îngreunează sarcina standardizării limbajului HTML. Standardizarea oficială a limbajului HTML este făcută de Consorţiul WWW. Posibilitatea formatării paginii recepţionate este foarte importantă. care să interpreteze comenzile de marcare. deoarece o pagină poate să fie construită utilizând un ecran cu 1024 x 768 pixeli utilizând culori codificate cu 24 de biţi.org/.6. Acest tip de sisteme pot să memoreze fişierele utilizând marcaje ascunse pentru ca formatarea să se poată reface ulterior.

coloanelor. H2. BR.. SUP ş. CITE. titluri şi subtitluri: H1. DIV. tabele. SCRIPT. colorarea (liniilor. are un fundal. ş. I. STRIKE. ferestre. linii de demarcare etc Textul constă din alineate (paragrafe). Fonturile utilizate pot fi de diferite tipuri. H6. BASE META. ADRESS. despărţirea prin linii HR ş. Listele pot fi definite ca liste numerotate. În mod general un Web-document utilizează un set de caractere. Tabelul poate avea un titlu. cu spaţierea dorită (de la margini) cu afişarea în una sau mai multe coloane. STYLE. ISINDEX. SAMP. OL. SMALL.a).a. sau la ambele margini. H5. liste (UL.. U. prin marcare logică sau fizică. tabele). text preformatat (afişat cu caracteristicile sale în modul în care este cules). definite implicit (ca în antete–H1. marcate. B. liste de definiţii. LINK. dimensiuni şi culori. VAR. Blocuri de structură. tabele (TABLE). BIG. text sau caractere marcate prin stiluri fizice (TT. DFN. fără marcaje şi stiluri. blockquote).. liste. încapsulate una în alta. la dreapta. KBD. afişarea textului în tabel. CODE. text sau caractere marcate prin stiluri logice (EM. sau liste mixte. DL). care pot fi centrare în pagină sau alipite (alineate) la marginea stânga. forme (FORM). poate conţine texte. obiecte audiovizuale sau legături spre ele. aranjarea în pagină şi spaţierea (center. imagini. Pot 22 . cum ar fi împărţirea în paragrafe (alineate) (Divizori–P. H2. Elementele unui tabel permit dimensionarea şi aranjarea tabelului în pagină. Elementele de text pot fi de tipul text simplu.Vom deosebi mai multe categorii de elemente ale unui document HTML (Web-pagină): Elemente de titlu şi descriptive ce conţin date despre document şi pentru motoarele de căutare HEAD.a).H6). dimensionarea şi colorarea chenarului (liniilor de frontieră). care specifică structura documentului. HR). celulelor). STRONG. H3. texte preformatate (PRE). H4. SUB. TITLE. cadre. Pot fi grupări de text (liste.

SELECT. paragrafe. Instrucţiunile de declarare a imaginilor permit poziţionarea lor în pagină. SCRIPT. afişarea liniei de contur. În structura unui formular intră elemente de checkbox şi radio. În continuare. TEXTAREA. 23 . subliniat etc. formulare de colectare a datelor: INPUT. imaginilor. 3. sunt descrise elementele de bază ale unui Web document (sau document HTML). BASEFONT. A determina lista tabelelor.7. întitularea imaginii. precum şi tabele încorporate (unul în altul. Stilurile fizice indică navigatorului cum să afişeze textul conţinut. Web design • • • • • • Înainte de a elabora orice Web-pagină este necesar: A formula scopul. prezentate exemple şi sarcini de explorare. A aranja elementele în pagină etc. Marcajele pentru stilurile caracterelor afectează modul în care sunt afişate cuvintele conţinute: cursiv. cadre sau ferestre (FRAME). A perfecta cuprinsul. modul de plasare al legăturilor. în compartimentul 4 al prezentei lucrări. Marcajele pentru titluri. A alege tipul şi a determina structura site-ului. fundalului. În pagină de asemenea pot fi şi elemente speciale: A(ancoră). IMG (imagine).fi grupări de tabele. dar nu se prea recomandă). A determina legăturile interne şi externe. APPLET. tabele afectează blocul de text conţinut în ansamblul sau. efectul de mişcare (Marquee) etc. elemente ascunse. schemelor. liste. schimbând fonturile şi spaţierea verticală. meniuri de selectare a valorilor din nişte liste fixate. îngroşat.

Însă şi aceasta e puţin. timpul mediu acceptabil fiind nu mai mare de 10-20 secunde. • Imaginile şi graficele trebuie reduse la minimum pentru a permite o încărcare rapidă. Este necesară o continuă administrare a site–ului. finanţe etc). • Promovare . Pagina Web trebuie structurată astfel încât să permită vizitatorilor o navigare uşoară. dar şi de câteva principii generale (reguli). a structurii conţinutului şi aspectului grafic. 3. Planificarea include stabilirea scopurilor.aducerea la cunoştinţa publicului. • E necesar a folosi un header (antet) şi footer (notă de subsol) standard pentru fiecare pagină.realizarea efectivă a paginilor Web-pe propriul calculator. pe calculatorul dvs. introducerea modificărilor sugerate.7. Pentru acest lucru este nevoie de imaginaţie. înnoirea lor. • Paginile Web trebuie să se încarce repede. cum ar fi: • Pagina Web trebuie să aibă un scop bine definit. asigurarea ţinerii la zi a informaţiilor de pe site. precum şi altor resurse (timp-termene.1.Programare. Pentru realizarea efectivă a unui site Web (proiectare).amplasarea site-ului construit pe o gazdă Web. desăvârşirea site-ului şi altele.mail ar trebui inclusă în fiecare pagină. Prin proiectarea unui site se înţelege procesul de realizare efectivă a paginilor Web pe calculatorul dvs. 24 • . mijloacelor de construire a site-ului. trebuie să parcurgem trei etape principale: • Proiectare .Machetare . • Publicare (pe Internet) .Pentru ca un site Web să poată fi accesat de toate persoanele interesate. • Adresa E . Proiectarea unui Web-site. trebuie să parcurgeţi următorii paşi: Planificare .

Este de menţionat faptul că există o serie de servere ce conţin scripturi şi appleturi utile pentru cele mai multe cazuri de Web design. conţine multe scripturi şi în ele te poţi uşor orienta.clickxchange. http://www. Însă programarea este un subiect aparte. unde ele sunt adunate şi descrise cu mare grijă. Machetul este un set de reguli pentru amplasarea elementelor Web-paginii. Pentru realizarea propriului site nu este necesar „a inventa din nou bicicleta”. efectele potrivite etc. distanţei dintre elemente etc. De ce –aceasta este o altă temă. comod pentru percepere. care se utilizează pentru anumite tipuri de prezentări pe Internet. care asigură unitatea. Programarea (cel puţin a unor scripturi şi aplleturi) se utilizează de regulă pentru parolarea site-ului. Principalul este că puteţi selecta funcţia necesară în una din arhivele indicate mai jos.• Machetarea. coloanelor de text.Script Locker. prelucrarea datelor colectate etc.com/. o colecţie de CGI-scripturi. e-comerţ. produsului. 25 . . butoanele. În calitate de „şablon” al Web-paginii create se poate utiliza o pagină din cele existente. Este un schelet (o coloană vertebrală) pe care se vor „îmbrăca” elementele de design şi elementele informaţionale ale paginii. Utilizaţi Web-paginile accesate care vă impresionează ca exemple demne de urmat pentru elaborările proprii. face documentul uşor lizibil. În fond s-au stabilit mai multe şabloane de Web-pagini. integritatea ei. Machetul (şablonul) este un element de bază al stilului paginii. cum ar fi prezentarea firmei. este comodă pentru începători. Pentru aceasta este suficient să le salvaţi pe calculatorul dvs. cu utilizarea lor gratuită şi cu condiţia referinţei la autor. crearea bazelor de date. folosind forma. şi să le adaptaţi la necesităţile proprii. cum ar fi mărimea fonturilor. e-marketing etc.

În continuare. Dacă aţi folosit un editor HTML (Microsoft Front Page sau Macromedia Dreamweaver. aveţi de ales între obţinerea unei gazde Web gratuite sau o găzduire (Web hosting) contra cost. Apoi urmează etapa de transfer efectiv al fişierelor (prin FTP) între calculatorul dvs. .• • • http://www. aveţi posibilitatea să folosiţi opţiunile de transfer de fişiere incluse în aceste programe. Câtre începutul etapei de publicare se presupune ca aţi terminat realizarea efectivă a site-ului Web pe calculatorul dvs. http://www. 3. 26 . va rula reclama companiei ce va oferit gazda. http://www.O serie de scripturi utile în rusă. După ce aţi realizat transferul fişierelor. cum ar fi: găzduire. urmează etapa de publicare a site-ului şi parcurgerea altor paşi importanţi. .cgi-resources.webclub. transfer.ru/. Publicare Deoarece site-ul proiectat şi creat va trebui să fie accesibil tuturor vizitatorilor. de exemplu).Posibil cea mai mare colecţie a CGI-scripturilor în limba rusă. va trebui să vă gândiţi la alegerea unui nume de domeniu pentru site-ul respectiv. Acest nume trebuie să fie sugestiv şi să simbolizeze afacerea dvs. Trebuie precizat că verificările paginilor Web vor trebui să fie efectuate şi ca etape intermediare. pe parcursul realizării efective a site-ului Web.download. În cazul gazdei gratuite pe site-ul dvs. şi gazda Web-pe care aţi ales-o. în schimbul unor facilitaţi suplimentare. verificare. .7. La fel ca şi numele de domeniu. După aceea va trebui să alegeţi o gazdă Web.com/.2.ru/. sunt obligatorii operaţiunile de verificare finală şi validare HTML.Cgi Resources – cea mai plină arhivă a CGI-scripturilor.

Web Host Directory. .http://www. 3. Promovarea site-ului Pentru ca site-ul dvs.clickxchange. şi aceşti paşi trebuie urmăriţi cu maximă atenţie.com/.3. Promovarea unui site Web este o acţiune complexă şi de durată. 27 .holm.Hosting gratuit de la Agava Software. să revină. dacă vreţi ca vizitatorii dvs.În final. dacă el nu este adus la cunoştinţa publicului. . trebuie să începeţi o campanie de promovare. va trebui să întreţineţi şi să actualizaţi site-ul.ru/.http://www. Ea se poate face folosind una sau mai multe metode de promovare: • Motoare de căutare • Directoare • Marketing prin email • Ziare electronice • Anunţuri publicitare • Liste de discuţii • Newsgroup • Schimb de banere • Schimb de legături • Inele Web • Fişiere semnătură • Autoresponder • Pagini FFA • Premii • Promovare offline.7. Unele planuri şi oferte de hosting vezi: . să poată fi văzut de cât mai mulţi vizitatori. . Nici cel mai bine realizat site Web nu valorează nimic.

de promovare.Creaţi o bază de date care să includă acţiunile dvs. în funcţie de motorul de căutare ales. 28 . De exemplu. pentru promovarea cu ajutorul motoarelor de căutare alcătuiţi un tabel care să cuprindă următoarele informaţii: • Numele motorului de căutare /directorului • Data înregistrării • Timpul necesar pentru realizarea înregistrării • Cuvintele cheie folosite • Codul care atestă că site-ul a fost înregistrat. După ce aţi completat formularul online de înregistrare a site-ului trebuie să aşteptaţi câteva zile sau câteva săptămâni pana când el va fi înregistrat.

şi/sau între atributele marcajelor. se convertesc de navigator într-un singur spaţiu. Lungimea unui titlu nu este limitată. acestea variind prin mărime şi "îngroşare". Notă. Între parantezele unghiulare şi numele instrucţiunilor nu se admit spaţii. EXPLORARE HTML 4. Pentru ierarhizarea secţiunilor documentului se pot utiliza diferite niveluri de titluri (antete). 29 . Instrucţiunile HTML (numite şi marcaje sau tag-uri) încep cu o paranteză unghiulară deschisă <urmată imediat de numele instrucţiunii. apoi de o paranteză unghiulară închisă>. Cea de început se numeşte marcaj de deschidere.marcaj de închidere. iar cea de sfârşit . Mai mute spaţii între cuvinte în codul HTML.1. Navigatorul ignoră marcajele pe care nu le înţelege şi pe cele scrise greşit. spre deosebire de cel de deschidere. (HTML-cod.4. Atributele au forma „nume atribut” = “valoare atribut”.document scris în limbajul de marcare a hipertextului (HTML). nu conţine atribute sau spaţii. Instrucţiuni HTML şi noţiuni de bază HTML-document.1. sau cod-sursă. al documentului HTML) . Structura documentului HTML 4. Majoritatea instrucţiunilor sunt perechi. Titlurile nu sunt numerotate. dar navigatoarele afişează titlurile astfel încât să iasă în evidenţă faţă de textul obişnuit.1. Marcajul de închidere. Se conţine între marcajele <html> şi </html>. unul sau mai multe atribute ale instrucţiunii (opţional). cu excepţia preformatării.

afişat de navigator Marcarea unui antet (titlu. Aici se scriu câteva cuvinte <title>Titlul sugestive despre conţinutul paginii.<title>) şi una funcţională (corpul documentului).</p> Aranjarea textului în paragrafe (alineate) .. <h6>.. în unele cazuri potrivite. Următorul text se va afişa de la începutul rândului Marcajul BODY de închidere – indică sfârşitul corpului 30 <br> </body> . conţin şi exemple ale acţiunii marcajelor. Marcajul </p> este opţional. de mărimile: <h1>. Dacă nu se foloseşte marcajul în forma container. subtitlu) de document. Dacă pagina este adăugată într-o listă favorită.. suplimentar mai conţine cuvinte-cheie.antetul paginii. </h1> .. care se utilizează de motoarele de căutare <head> pentru regăsirea paginii şi alte informaţii. exemple Marcajul HTML de deschidere ... şi alte tabele cu instrucţiunile HTML. Tabelul 1.. Aceste cuvinte vor apare paginii</title>pe bara de titlu a navigatorului. Tabelul 1.. aceste cuvinte apar ca nume al paginii </head> Marcajul de închidere a antetului paginii Marcajul de deschidere . </h6> H4 H5 H6 H1 H2 H3 <p>.Limbajul HTML defineşte şase niveluri de titluri într-un document (vezi tabelul 1). se utilizează de navigatoare Marcajul HEAD .lasă o linie liberă şi începe textul de la început de rând. tot ce este în antet nu apare în fereastra navigatorului Marcajele pereche TITLE. Forma recomandată a unui HTML document Instrucţiune <html> Descriere... Astfel forma de bază a unui document HTML este prezentată în tabelul 1. Standardul HTML recomandă (!) ca un document să conţină o parte descriptivă (<head>.indică faptul că documentul este scris în limbajul HTML.. paragraful se va termina la întâlnirea unui alt marcaj <p> Întrerupe linia de text în locul marcajului.începe corpul documentului propriu <body> zis....

&lt. Tabelul 2. La fel se scriu în codul HTML o parte din caracterele utilizate de HTML ca elemente de sintaxă.: &Acirc. ghilimelele etc.</html> documentului Marcajul HTML de închidere 4. = Â á à &aacute. ampensand mai mic (less than) mai mare (greater than) Semnificaţie Pentru a obţine majuscule. care lipsesc din acest set. Caractere speciale Caracter & < > Codul HTML &amp. le folosim în codul-sursă în locul literelor mici. precum nici lista menţionată nu este aceiaşi pentru diverse versiuni ale HTML–lului. Setul de caractere utilizat de HTML Documentele HTML cuprind caractere de 8 biţi din setul de caractere Latin-1 (ISO 8859).2.1. a mic cu accent ascuţit (acute) &agrave. a mic cu accent grav 31 . Notă.2). Nu toate navigatoarele afişează orice caractere speciale din tabelul 2. Aceste caractere sunt definite într-un mod tipic: "&" + litera mare sau mică + semnul diacritic (care lipseşte în ISO 8859). &gt. Pentru a face să apară în navigator caracterul din coloana Caracter (tab. cum ar fi parantezele unghiulare. Pentru caractere speciale. precum şi pentru cele care se pot confunda cu elementele de comandă s-au stabilit codificări ca în tabelul 2.2). în codulsursă trebuie să avem Codul HTML (tab. Ex.

&oslash. &iquest. Caracterele speciale mai pot fi introduse prin codul lor hexazecimal în forma: &#+ codul hexazecimal+.. &ccedil. 4.1. navigatorul afişează unul singur. &szlig. &nbsp forţează spaţii multiple. &ntilde. Notă. 32 . sau IE) pentru a edita codul-sursă.3.&#195. Modul de lucru 1.â ă ä å ç ñ ø ß ¿ £ ¢ © ® &acirc. &auml. &cent. &aring. De exemplu &#222. " &quot. Prima sarcină de explorare. Pornim un editor de texte simplu (Notepad. &pound. se poate folosi pentru a scrie o serie de paragrafe cu alinieri constante ale elementelor ghilimele &nbsp. &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 spaţii. &atilde. &copy.

. daţi Cancel. Unele marcaje de închidere pot fi înlocuite prin cele de deschidere. fără să fie închis pentru vizualizarea rezultatelor. în continuare IE. apoi OK.SAVE AS. 4. Extrageţi câte un exemplu din marcajele HTML utilizate (pentru prima sarcină). Windows Commander sau alt utilitar similar. 8. Exemplele din prezenta lucrare au fost probate pe Internet Explorer. apoi folosim butonul Refresh . Dacă încearcă stabilirea conexiunii la reţea. 33 . 3. Apoi FILE-OPEN din meniul navigatorului.. Trebuie să apară o pagină cu textul explicativ conform exemplului 1. Lansăm Windows Explorer. mergem în directorul unde am salvat exemplul şi îl deschidem cu dublu-click pe mouse. Care sunt ele (verificaţi pe exemple). 5. Pentru acesta selectaţi WIEW şi opţiunea respectivă. 7. Salvăm fişierul cu FILE . Va porni navigatorul care este setat ca navigator implicit (dacă avem instalate mai multe). Verificaţi acţiunea marcajelor-perechi prin ştergereamodificarea celui de sfârşit sau/şi de început. Însăşi IE permite editarea codului-sursă. 9. 10. 6. Sau pornim navigatorul IE. pentru a le putea vedea în navigator trebuie salvat fişierul. Editorul codului-sursă poate fi deschis pentru întreaga sesiune de lucru.reafişare. Notă. BROWSE deschidem directorul în care am salvat exemplu şi selectăm fişierul necesar OPEN. Dacă vom face modificări în codul-sursă. Explicaţi pentru ce servesc fiecare din marcajele din exemplele aduse.htm (FILESAVE).2.5. Vizualizaţi documentul. versiunea 5. Putem continua să dezvoltăm această pagină. examinaţi codul HTML. Culegem exemplul 1.

Studierea marcajelor obligatorii de structură a documentelor. Exemple de explorare Scop.com/web/wwwhwelp. 12. Pentru a vedea rezultatul. sau . La editarea textelor.1. Alături de marcajele utilizate mai există şi altele. comentarii etc.htm. păstraţi fişierul sub formă de text simplu. • • • • • • Indicaţii suplimentare Între parantezele unghiulare şi denumirile marcajelor nu trebuie să avem spaţii decât dacă spaţiile separă numele marcajului de atributele lui sau atributele între ele.4. • 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 . http://werbach. Divizarea textului în alineate.com/barebones. cu extensia fişierului . Fiecare marcaj poate fi combinat cu atribute. copiere. Culegeţi şi exploraţi exemplele 2 şi 3. În ultimul caz salvaţi fişierul utilizând filtrul respectiv (cod HTML sau Web-pagină). Pentru editarea Web-paginilor pot fi utilizate editoare speciale HTML (vezi p. Mai multe detalii despre HTML vezi Ghidul programatorului http://werbach. nu este nevoie să fim conectaţi la Internet. antete.3.11. Încercaţi să programaţi Web-afişarea codului-sursă al exemplului 1.html.3) sau MS Word. explorarea şi modificarea lor utilizaţi comenzile de editare. Întreruperea forţată a alineatului. 4. Dacă utilizaţi editorul de texte MS Word pentru editarea codului HTML sau oricare alt editor. mutare blocuri etc.

precum şi fragmentele afişării lor la ecran.Diacriticile Ââ.<BR> reprezinta un alineat </P> Marcajul P nu este obligatoriuggfgn. în scop de claritate şi transparenţă. 35 . Poate fi vizualizat <BR> doarin editoare destinate HTML.Îî se vor scrie astfel „&Acirc&acirc. <html> <head> <title> Exemplu 1(denumirea ferestrei. • Exemplul 1–cel mai simplu document Notă: Codul-sursă al exemplelor. <P> Acest fisier este de tip html. sau paginii)</title> </head> <body> <H1> Notiuni generale despre HTML</H1> <P> In HTML deosebim marcaje pare si<BR> marcaje impare. figura 1. nu vor conţine diacriticele limbii rămâne. </P> </body> </html> Fragmentul semnificativ al Web afişării vezi mai jos. poate fi deschis si<BR> redactat in orice editor de texte. care au doar marca de inceput. &Icirc&icirc”. </P> <P> Totul ce se contine intre aceste marcaje .

36 . • Exemplul 2–Antete.H1.Figura 1. centrat)</H1> <H2 ALIGN=RIGHT> Salut lume !(titlul de nivelul 2. Rezultatul rulării exemplului 1. alineat la dreapta)</H2> <H6 ALIGN=LEFT> Salut lume !(titlul cel mai mic H6. Alinierea antetelor şi paragrafelor </title> <H1 ALIGN=CENTER> Salut lume!(titlul cel mai semnificativ . alinierea antetelor şi paragrafelor <html> <head> <title> Exemplul 2 Antete.

ca si in MS Word. Pentru un mai bun control vizual. </DIV> <P ALIGN=JUSTIFY> Observaţi diferenţa dintre ultimul si penultimul paragraf alinierea la ambele margini . Dar acest lucru nu este deloc obligatoriu. ce redă structura marcajelor. marcajele pot fi structurate ca in prezentul exemplu. cu spaţiere de început. </P> </body> </html> • Exemplul 3 întreruperea forţată a alineatului.</DIV> <DIV> Pentru un mai bun control vizual . mai ales la depănarea Web-paginii. Aceasta aliniere este implicită. Se recomandă pentru comoditate. dar şi pentru introducerea modificărilor în cadrul limitei lungimii liniei ecranului. fiecare din rând nou. Se recomandă pentru comoditate. cu o spaţiere de la începutul rândului. Dar acest lucru nu este deloc obligatoriu. mai ales la depănarea Web-paginii. ce redă structura marcajelor. poate fi alineat .aliniat la stânga)</H6> </head> <body> <P> Mai jos se demonstrează alinierea textului alineatelor </P> <DIV> Textul alineatului. dar şi pentru introducerea modificărilor în cadrul limitei lungimii liniei ecranului.se obţine prin mărirea spaţiilor dintre cuvinte la afişarea textului de către IE. fiecare din rând nou. </DIV> <DIV ALIGN=CENTER> la centru </DIV> <DIV ALIGN=RIGHT> sau la marginea din dreapta. comentarii 37 .marcajele pot fi structurate ca in prezentul exemplu.alipit la marginea din stânga.

<!-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 afişării vezi figura 2

Figura 2. Rezultatul rulării exemplului 3.
4.1.5. Informaţii pentru motoarele de căutare

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 fişier HTML; charset stabileşte 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 căutare (la care a fost înscris site-ul) în cazul unei căutări în care s-au folosit cuvinte din această listă. <meta name=description content="O frază care descrie pe scurt conţinutul paginii">. În cazul unei căutări după cuvinte-cheie, motorul de căutare 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 afişată la o eventual căutare. <meta name=author content="numele dvs., e-mail etc"> numele autorului. Adresa e-mail. 4.1.6. Întrebări de autocontrol şi exerciţii. 1. Care este diferenţa dintre un Web document şi un fişier HTML? 2. Care este forma generală a unui fişier HTML? 3. Care este cauza elaborării a câtorva sute de editoare HTML? 4. Care este sensul cuvântului „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 semnificaţia 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 acţiune? 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 destinaţia sa, ce probleme soluţionează? 18. De ce sunt necesare Esc - caracterele în HTML? 19. Este oare raţională studierea HTML, când există atâtea editoare specializate? Dacă da–care sunt motivele? 20. Pentru ce se utilizează termenii „fişier HTML”, „cod-sursă HTML”, „Web document”? Ce reflectă aceşti termini? 21. Prin ce diferă un document obişnuit de un hipertext, care sunt avantajele hipertextului? 22. La ce serveşte instrucţiunea „meta name”, care sunt perechile cele mai utilizate? 23. Cum se poate face ca o pagină să fie regăsită cât mai des? 24. Culegeţi exemplele 1-3, modificaţi valorile atributelor şi sesizaţi acţiunea marcajelor. 25. Obţineţi afişarea semnelor diacritice ale limbii române Ăă, Ââ, Îî, Şş, Ţţ. 26. De ce nu întotdeauna se afişează caracterele diacritice ale limbii române (&Scedil, &Tcedil, codurile hexazecimale &#186; &#195; &#227; &#238; &#254 etc)? 27. Ce trebuie făcut pentru ca semnele diacritice să fie afişate? 28. Schimbaţi titlul (numele) paginii exemplului 1.

40

7. Marcajele utilizate vezi tabelul 3. 1 = cel mai mic.29. Asocierea caracteristicilor poate fi efectuată prin marcarea fizică. 4. cu indicarea directă a valorilor din mai multe posibile). sau asociere implicită a caracteristicilor (stiluri logice. Marcaje de formatare a caracterelor şi organizarea textului Instrucţiune <font atribute> </font> Atribute size = i color = Descriere şi exemple Mărimea fontului: i = 1.. Afişaţi textul „BUNA ZIUA. centru. fundalul etc.2. tabelul 4 şi 5) 41 . dar cu aranjarea succesivă a fiecărui titlu la stânga. 2.1.. Repetaţi sarcina 29... înainte.2. Instrucţiuni şi atribute utilizate Porţiunilor de text dintr-un document le pot fi asociate atribute. culoarea textului. LUME!!!” sub formă de titluri în descreştere h1. h6 şi invers. Tabelul 3. cum ar fi dimensiunea fontelor. cu spaţierea din stânga.Formatarea caracterelor.4. redate prin nume. dreapta.2. care definesc aspectul lor. după alineat sau prin trasarea unei linii orizontale intre ele.. cu indicarea valorilor atributelor (stiluri fizice. 4. de la h6 spre h1 (în creştere).2. organizarea textului 4.. ce au o singură valoare conformă numelui). Exemple de explorare–vezi nr 4-6. 7 = cel mai mare Culoarea poate fi redată prin numele ei sau prin tripletul RGB (vezi p. dreapta în cel mai econom mod de scriere (a codului HTML). Secţiuni din text pot fi separate ca alineate. 30.

tabel etc. font2 = un font specific sistemelor Macintosh.. dar nu şi în interiorul tabelelor Centrează textul pe orizontală.. 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 . Dacă nu este indicat . imagine. aşa ca în prezenta celulă Forţează trecerea pe linie nouă Left. va afişa textul cu font proporţional predefinit. 7. (text.). 2.. font1.. <basefont atribute> </basefont> Mărimea fontului implicit al întregii pagini: i = 1. right sau all: trece la linie nouă când marginea din stânga (left). Nu are influenţă asupra textului din interiorul tabelelor Culoarea poate fi dată prin numele ei sau prin valoarea RGB Are influenţă şi asupra instrucţiunii <hi> </hi>." Dacă navigatorul nu găseşte instalat nici unul. pentru a aduce un text sub o imagine care nu ocupă întreaga lăţime a spaţiului disponibil Paragraf (alineat) nou... de ex.fontul implicit are mărimea 3. celulă de tabel etc.) Textul este deplasat cu un tab faţă de ambele margini (stânga şi dreapta) ale spaţiului disponibil (pagină. dreapta (right) sau ambele margini (all) ale ecranului sunt libere.O listă de minimum 2 fonturi: face =" font1 = un font specific sistemelor Windows. font2. este aliniat implicit la stânga.

Sesizaţi diferenţa faţă de paragrafele cu align = right şi fără align O linie orizontală. Observaţi spaţiul din dreapta dintre text şi marginea tabelului şi distanţa dintre cuvinte. Aliniat la dreapta (right). fără atribute: <div atribute> </div> - align = <hr atribute> - noshade Elimină umbra liniei: size=z Z = înălţimea liniei (în pixeli).este alinierea implicită. Pentru ambele margini aliniate (justify) Marcaj pentru blocuri de text (aliniat implicit la stânga dacă nu este în interiorul unui marcaj care face o altă aliniere) Aliniat la stânga (left). Aliniat pe centru (center). care este reglată astfel încât marginea din dreapta a textului să nu fie nereglată. zmax = 7 X = lăţimea liniei în pixeli sau procente din width=x spaţiul disponibil (pagină. deci nu este necesar decât în interiorul unui marcaj care face o altă aliniere.). celulă etc.align = Paragraf aliniat la stânga (left) . celulă de tabel) aliniază implicit pe centru. Pentru width =50% (în celula prezentă) obţinem: Left Center Right 43 . Aliniat pe centru (center).este alinierea implicită. pentru x = 50%: Align = Alinierea liniei (în pagină. Nu este necesar decât în interiorul unui marcaj care face o altă aliniere. Aliniat la dreapta (right).

Color = <body atribute> </body> bgcolor = backgro und = text = link = vlink = alink = Culoarea (dată prin nume sau valoarea RGB). dacă derulăm rties = pagina. pentru color = #00ffff obţinem: Defineşte începutul şi sfârşitul corpului documentului HTML Culoarea fondului paginii (dată prin nume sau valoarea RGB) Url .ului (nume sau RGB) leftmarg Deplasarea întregului material din pagină faţă de in = marginea din stânga (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 Primeşte doar valoarea "fixed". fondul rămâne fix <b> </b> <i> </i> <u> </u> Afişează textul cu litere aldine (îngroşate) Afişează textul cu litere italice (înclinate) Afişează textul subliniat 44 .ul (adresa şi numele) imaginii de fond a paginii Culoarea textului (nume culoare sau valoare RGB) Culoarea legăturilor nevizitate (neactivate) din pagină (nume sau RGB) Culoarea legăturilor vizitate din pagină (nume sau RGB) Culoarea legăturilor în timpul click .

dar ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t. ca în codul sursă. ca în codul-sursă. 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 . adică aşa cum arată el în codul-sursă din Notepad Afişează textul taiat Evidenţiere logică puternică Stil logic de evidenţiere Informaţii despre adresă şi autor Citare bibliografică Definiţie de cuvân.<sup> </sup> <sub> </sub> <tt> </tt> <big> </big> <pre atribute> </pre> - Afişează textul ca indice superior Afişează textul ca indice inferior Text cu font monospaţiu Text cu font mărit + bold - Afişează din linie nouă textul preformatat. <b> adică aşa cum arata el în</b> codul sursa din Notepad Afişează din linie nouă textul preformatat. dar nu ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t.

Valorile pentru R. Pentru a obţine culori care sunt afişate la fel pe orice platformă (Windows. G. B variază în diapazonul hexazecimal 00-FF (sau de la 000 până la 256.. Macintosh etc). se recomandă folosirea culorilor sigure Internet.: BODY BGCOLOR = "#FF0000" are ca rezultat un fond al paginii de culoare roşie).red. G. Primele două cifre din cele şase reprezintă valoarea lui R. R. elementele paginilor Web sunt colorate. G (Green = verde). Culorile se pot specifica prin numele lor în engleză: de ex. iar ultimele două pentru B. B (Blue = albastru).2.<kbd> </kbd> <samp> </samp> - Text de la tastatură (keyboard) Exemplu de date introduse de utilizator 4. următoarele două valoarea lui G. în diapazonul zecimal). white sau prin valoarea RGB .un grup de 6 cifre hexazecimale precedate de semnul # (de ex. Tabelul 4. Există o serie de instrucţiuni HTML care au atribute prin care se specifică culori (vezi tabelul 3).2. Atribute de fundal şi culori Destinaţie (funcţie) Instrucţiune HTML Imagine fundal Culoare fundal Culoare text Culoare referinţă <BODY BACKGROUND="URL"> <BODY BGCOLOR="#$$$$$$"> <BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$"> 46 . redate prin numele lor. Redarea culorilor prin nume sau valoarea RGB După cum aţi observat. B sunt iniţialele culorilor de baza: R (Red = roşu). Tabelul 4 cuprinde numele a 16 culori (standardul de 16 culori) şi echivalentul lor RGB.

Link-uri vizitate Referinţe 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 .

55 48 . Aria de acţiune a atributelor. culori şi efecte speciale a fontelor.2.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 Roşu red #FF0000 Verde inchis teal #008080 Alb white #FFFFFF Galben yellow #FFFF00 4.50 0. • Exemplul 4. Text preformatat </TITLE> <h4>Exemplul 4. Studierea marcajelor de formatare fizică şi logică a caracterelor – dimensiuni.------------.05 2. Text preformatat <HTML> <HEAD> <BODY BGCOLOR=PINK><FONT COLOR=#0000FF> <TITLE> Exemplul 4. Exemple de explorare Scop.-----------. Text preformatat<h4> </HEAD> <PRE> produs pret-cost transport valoare --------.----------lapte 2.3.

50 06. <B><U>Acest text</U></B>este subliniat si ingrosat. <BR><TT> Acest text </TT> este afişat cu caractere de tip monospaţiu . <BR>Acum este afişat un <SUB> indice </SUB>.<BR> Acest<BIG>text este<BIG>afişat<BIG>tot mai<BIG>mare</BIG></BIG></BIG></BIG><BR> Acest text<SMALL>este afisat<SMALL>tot mai mic<SMALL></SMALL><BR>. Elemente de formatare caractere</TITLE> </HEAD> <B> Acest text </B> este ingrosat.<BR> Formula apei este<B>H<SUB>2</SUB>O</B> 49 . Rezultatul rulării exemplului 4 Exemplul 5. <BR> <I> Acest text </I> este inclinat. iar acum un<SUP>exponent</SUP>. Figura 3. <BR><S>Acest text</S> este barat.carne 42.50 0.00 </PRE> </BODY> </HTML> 2.00 oua 6. Elemente de formatare caractere <HTML> <BODY BGCOLOR="YELLOW"> <HEAD> <TITLE>Exemplul 5. <BR><U> Acest text </U> este subliniat.15 44.15 Rezultatul rulării exemplului 4 vezi mai jos figura 3.

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 . Figura 4. Rezultatul rulării exemplului 5 • Exemplu 6.</BODY> </HTML> Rezultatul rulării exemplului 5 vezi mai jos figura 4.

<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 rulării exemplului 6 vezi mai jos figura 5 Figura 5. Care este aria de acţiune a marcajului <font>? <basefont>? 3. Care este destinaţia marcajului <font>? <basefont>? 4.4. Întrebări de autocontrol şi exerciţii 1. Care este diferenţa dintre marcajele <font>? <basefont>? 51 . Care din marcaje se referă la organizarea textului? Aranjarea textului? 2. Care este diferenţa dintre <pre> şi <xmp>? 6.2. Care este destinaţia marcajului <p>? <div>? 5. Rezultatul rulării exemplului 6 4.

Culegeţi exemplele 3-6. La ce servesc stilurile logice de formatare? 15. 23. 21. schimbaţi valorile conform tabelelor 3-5. Cum se poate începe un alineat imediat din următoarea linie. care sunt atributele? 12. Exploraţi câteva moduri de poziţionare a textului în pagină (deplasare a marginilor). Care sunt caracteristicile implicite ale fonturilor? 10. Exemplificaţi câteva marcaje de stiluri fizice cu diferite valori.Care sunt posibilităţile de formatare a caracterelor? 8. Exploraţi câteva moduri de spaţiere între alineate. Liste 52 .3. sesizaţi acţiunea marcajelor şi atributelor. Ce semnifică un stil fizic de formatare? 14. Exemplificaţi câteva marcaje de stiluri logice. Exploraţi acţiunea comenzilor XMP şi PRE. Prin ce diferă stilurile logice de cele fizice? 17. adăugaţi noi atribute. 20. Câte nuanţe se pot obţine variind doar una din culori? Variind două culori? Variind toate trei culori? 11. Alcătuiţi propriul Curriculum Vitae (CV) conform Anexei nr 1. 25. Exploraţi (numiţi) câteva moduri de indicare a mărimii fontelor. Prin ce diferă divizorii P şi DIV? 16. Ce caracteristici ale caracterelor pot fi indicate prin marcare. De ce în HTML culorile nu se redau doar prin tripletul de culori RGB? 19. 24. Ce este o culoare sigură? Câte culori sigure se pot reda? 13. fără spaţiere? 18. Alte organizări interne ale textului. 7. 26. 22. Fiecare compartiment să fie de o culoare diferită de celelalte. 4. Care sunt posibilităţile de formatare a alineatelor? 9.

urmat de definiţia lui. regăsirea rapidă a anumitor obiecte din listă etc. se utilizează prezentări sintetizate sub formă de liste–fiecare obiect din rând nou. vizavi de citirea lui consecutivă. Listă de definiţii (de termeni)–amplasarea termenului pe linie separată. toate obiectele având aceeaşi ordine a caracteristicilor. O atare organizare reprezintă o formă mai superioară a organizării textului decât ca o lentă neîntreruptă de text. Noţiuni şi marcaje utilizate Listă numerotată – listă de obiecte numerotate (numerotarea poate fi conform şirului de numere naturale sau literelor alfabetului. Liste marcate–enumerări evidenţiate printr-un semn special. Este posibilă ordonarea inclusă: în interiorul unei caracteristici după o altă caracteristică. 4.1. Listele pot fi incluse (încapsulate) una în alta. Exemple de explorare– vezi nr 7. pe o linie nouă. Tabelul 6.Când în text sunt necesare careva enumerări ale datelor cu anumite caracteristici. devine posibilă parcurgerea selectivă a textului. Marcaje de construire a listelor Instrucţiune Atribute Liste de finiţii <dl> </dl> <dt> Începutul –sfârşitul listei de definiţii Termen (de definiţie) Descriere 53 . pot fi modelate enumerări ierarhice. Uneori aceste obiecte sunt ordonate în creşterea sau descreşterea unei caracteristici.3. Se pot modela liste cu numerotări ierarhice. sau numerelor romane). Marcajele utilizate vezi tabelul 6.

. Următoarea .este o listă numerotată cu literele mici ale alfabetului latin. a. disc (implicit) Element de listă Liste ordonate (numerotate) <li> - <ol atribute> </ol> type= start= Începutul–sfârşitul listei numerotate Tipul numerotării: A.seria paşaportului şi destinaţia .2. Studierea marcajelor de organizare a listelor marcate... 54 . square.este o listă numerotată cu cifre. i.3.B. 1 (implicit) Cu ce valoare începe numerotarea (implicit cu prima) Element de listă <li> - 4. I. Iar valorile caracteristicilor este o listă numerotată cu A. ordonate şi listelor de definiţii.C.<dd> - Descrierea termenului de definiţie Liste neordonate (marcate) <ul atribute> </ul> type= Începutul–sfârşitul listei marcate Forma marcajului: circle. • Exemplul 7 Exemplul ce urmează constă din patru liste. Caracteristica bagajelor este marcată cu un pătrat. Numele . Exemple de explorare Scop.

3.Notă: 1. Observaţi că elementele unui nivel al listelor se aliniază la aceeaşi distanţă de la marginea stângă. 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. Dacă alineatul are mai multe linii . 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 . Atrageţi atenţia .toate se afişează la aceeaşi distanţă de la marginea stângă.listele pot fi încadrate una în alta. 2.

12. Modelaţi situaţia exemplului conform p. Sesizaţi diferenţa. 13. cu afişare din aceeaşi poziţie. 4..B. 9.3.3. 7.C) într-o linie. 56 . utilizând marcajul PRE. 8. Obţineţi afişarea liniilor de text fără spaţii între linii. atributelor. 5. Biletului:AB-0089 <LI>Nr.10. figura 6. dar în loc de marcajul PRE utilizaţi marcajul XMP. Bagajului:000698 <LI>Greutate:14kg</FONT> </UL> </UL> </UL> <BR> <LI><I><B><U><FONTCOLOR=BLUE>S. 4. 10. 3. Redefiniţi lista numerotată cu cifre arabe (numele de familie) ca listă numerotată cu cifre romane. 2. 6. Verificaţi acţiunea marcajelor. dar cu mai multe bagaje pe un bilet.A. Când 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? Culegeţi exemplul nr 7.. Redefiniţi lista numerotată cu cifre arabe (numele de familie) ca listă de definiţii. . Vizualizaţi documentul HTML în Explorer.<LI><B><FONTCOLOR=GREEN>DATE DESPRE BAGAJ:</FONT></B> <UL TYPE=A> <FONT COLOR=PURPLE> <LI>Nr. Întrebări de autocontrol şi exerciţii 1. Modelaţi situaţia exemplului 11.M.D.</FONT></U></B> </OL> </BODY> </HTML> Rezultatul afişării exemplului 7 vezi mai jos. Aliniaţi datele despre bagaj (A. 11.

care ar conţine toate trei tipuri de 57 . diferite de cele din exemplu.14. Rezultatul rulării exemplului 7 15. Figura 6. 2. Conform numărului de ordine din registru construiţi o listă specificată în anexa Nr. Efectuaţi alte transformări ale listelor în tipuri de liste.

18. având astfel un impact mai mare asupra vizitatorului (o coloana lungă de cifre şi trei pagini de explicaţii nu au acelaşi efect ca un mic tabel structurat şi o imagine sugestivă !). Tabele De cele mai multe ori este nevoie ca datele prezentate să fie sintetizate sub forma unui tabel.4.1. Capul de tabel–denumirile (titlurile) colanelor (uneori a liniilor)–un text ce sugerează conţinutul. Noţiuni şi marcaje utilizate Limbajul HTML ia în considerare următoarele elemente pentru construirea unui tabel (unele sunt opţionale): Titlul tabelului . utilizaţi comanda PRE pentru afişarea în coloane a elementelor listelor. 17. 58 • • .liste. Marcajele de construire a tabelelor sunt folosite aproape în orice site. 16. 4. Utilizarea tabelelor este foarte diversă şi frecventă. instalat în prima linie a tabelului. Modelaţi liste încadrate conform titlurilor de grup (ierarhice). unde se precizează ce fel de date sunt conţinute în coloanele (liniile) respective. putem controla mult mai bine aranjarea în Web-pagină a elementelor (folosind tabele fără chenar. eventual tabele încorporate în interiorul unor celule de tabel). În cadrul realizării sarcinii de explorare – explicaţi ce aţi studiat şi cunoscut. Structuraţi codul HTML aşa ca să se deosebească fiecare element al fiecărei liste.4. Alte organizări interne ale textului. deoarece cu ajutorul lor: putem crea tabele propriu-zise. 4. În cadrul realizării sarcinii creative construiţi listele necesare.un text explicativ care se referă la conţinutul tabelului.

vezi tabelul de mai jos). Ultimul caz nu este prea recomandat. lăţime. Elementele definitorii. 9. de linie–denumirea coloanei sau a liniei. In HTML. Ca regulă. Subsolul tabelului. Un tabel are frontiere externe delimitate de chenar şi linii interne de demarcare a celulelor. Titlul de coloane. o imagine. eventuale concluzii etc. 59 . Denumirile pot fi ierarhice–titlul comun deasupra mai multor coloane sau din stânga. lăţimea fiecărei celule (coloane) se defineşte o singură dată. amplasat ca regulă sub corpul tabelului. Însă multe din elemente pot fi redefinite local pentru fiecare celulă. la începutul tabelului. Se caracterizează de înălţime. reprezintă liniile de sfârşit cu date sumare. Ca regulă este evidenţiat. O celulă de tabel este la intersecţia unei linii cu o coloană. culoare. Înălţimea liniei este cea maximală dintre înălţimile celulelor liniei. 8. va fi scos în evidentă faţă de restul liniilor prin îngroşare ori în alt mod. culoare. atunci coloana capătă lăţimea celei mai mari celule. componentele unui tabel şi marcajele utilizate vezi tabelul 7. specificând celulele de pe fiecare linie. Liniile de tabel sunt orizontale.Capul de tabel. Atributele unor elemente de tabel (fond. orizontală etc. Corpul de tabel (datele tabelului) reprezintă conţinutul propriu-zis al tabelului (valorile din celulele tabelului). amplasat ca regulă imediat sub titlu. un buton sau un alt tabel. denumire comună a mai multor linii(exemplu . construirea unui tabel se face rând cu rând. grosime chenar etc) se definesc o singură dată. Dacă lăţimea celulelor diferă de la o linie la alta. Într-o celulă poate fi înscris un fragment de text. fond. aliniere verticală. Exemple de explorare–vezi nr. Coloanele sunt cele verticale.

2. vezi p. 5) Corpul tabelului Culoarea de fond (a corpului tabelului) Început /sfârşit de tabel HTML Chenarul tabelului (liniile de frontieră) (în pixeli) Culoarea fondului pentru tabel Imaginea de fond pentru tabel Spaţiu între chenarul celulelor tabelului şi conţinutul lor (în pixeli) BGCOLOR= <TBODY> </ TBODY> <TABLE ATRIBUTE> </ TABLE> BGCOLOR= BORDER= BGCOLOR= BACKGROU ND="URL" CELLPADDI NG = CELLSPACIN Spaţiu între celulele tabelului (în pixeli) G= WIDTH = Lăţimea tabelului (în pixeli sau % din spaţiul disponibil) BORDERCOL Culoarea chenarului (nume culoare sau OR = valoare RGB) BORDERCOL Culoarea mai deschisă a chenarului ORLIGHT= (stânga + sus) (nume culoare sau valoare RGB) 60 .Tabelul 7. tabelul 4. 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.2.4.

right). în unele navigatoare nu funcţionează.Culoarea mai închisă a chenarului BORDERCOL (dreapta + jos) (nume culoare sau ORDARK = valoare RGB) ALIGN = Aliniază tabelul în dreapta (right) sau stânga (left) paginii.doar în IE Ajustarea riglelor în tabel . textul din jurul tabelului curge pe partea opusă Spaţiu pe orizontală în jurul tabelului (în pixeli) Spaţiu pe verticală în jurul tabelului (în pixeli) Numărul de coloane ale unui tabel Ajustarea cadrelor în tabel . implicit left Înălţimea liniei (în pixeli).doar în IE Linie de tabel Culoarea fondului pentru întreaga linie (valoare RGB sau nume culoare) Alinierea conţinutului celulelor (left. dar puteţi folosi height în TD Celulă de tabel Înălţimea celulei. center. el va lua maximul pentru toate celulele liniei Lăţimea celulei HSPACE = VSPACE = COLS = FRAME = RULES = <TR ATRIBUTE> </ TR> BGCOLOR= ALIGN= HEIGHT= <TD ATRIBUTE> </ TD> - HEIGHT = WIDTH= 61 . dacă pe aceeaşi linie (TR) daţi din greşeală 2 valori diferite pentru height în TD.

BGCOLOR= BACKGROU ND = "URL" ALIGN = VALIGN = Culoarea fondului pentru întreaga celulă (valoare RGB sau nume culoare) Imaginea de fond pentru celulă Alinierea conţinutului celulei pe orizontală (left. middle (mijloc). bottom. implicit left Alinierea conţinutului celulei pe verticală: top (sus). . bottom (jos). left.în loc de TD. center. right) ALIGN = BASELINE ALIGN = CARACTER ALIGN = JUSTIFY COLSPAN = ROWSPAN = NOWRAP <TH> </ TH> - <CAPTION ATRIBUTE> </CAPTION> ALIGN = 62 .împreună cu TD pe aceeaşi linie Text explicativ asociat tabelului Alinierea textului (top = implicit. right). ") Aliniază marginile din stânga şi dreapta ale textului Numărul de coloane pe care se întinde celula Numărul de linii pe care se întinde celula Nu permite despărţirea textului pe linii în celulă Poate fi folosit : . dar conţinutul va fi centrat şi îngroşat (bold). implicit middle Aliniază celulele cu linia de bază a textului adiacent Aliniază coloana faţă de un anumit caracter (implicit caracterul ".

% sau "*" Alinierea textului pentru întreaga coloană Alinierea textului faţă de un anumit caracter Culoarea de fond Pentru liniile de sfârşit ale tabelului Culoarea de fond a subsolului Comentarii utile. iar textul "curge" în partea stângă a tabelului Atributele de culoare ale fondului pot fi diferite pentru orice element de tabel. TFOOT nu sunt neapărat necesare într-un tabel.<COLGROUP> </COLGROUP > BGCOLOR = <COL ATRIBUTE> WIDTH = ALIGN = CHAR= BGCOLOR= <TFOOT> </ TFOOT> BGCOLOR = Împreună cu marcajul <col> defineşte un set de definiţii de coloane Culoarea de fond Fără atribute: aceeaşi lăţime pentru toate coloanele Lăţimea coloanei. Dacă plasăm atributul ALIGN=left în marcajul TABLE. iar în dreapta sa se afişează textul. Comenzile COLGROUP. textul care urmează tabelului "curge" pe lângă acesta (tabelul este aliniat în stânga ferestrei navigatorului. dar uneori demarcarea făcută de ele este folosită de alte marcaje. Folosirea atributului ALIGN=right plasează tabelul în marginea dreaptă. THEAD. Atributele de aliniere pot fi plasate în marcajele ce delimitează liniile şi în marcajele ce definesc celulele. TBODY. Dacă culoare se defineşte de câteva ori. în pixeli. 63 . <TABLE RULES = GROUPS>. atunci acţionează ultima definiţie. de ex.

coloana a doua (elementul a(2. coloana întâi (elementul a(2.4.2)) </TD> <!--Sfârşitul celulei a doua--> </TR> <!--Sfârşitul primei linii--> <TR> <!--Începutul liniei a doua de tabel--> <TD> <!--Începutul celulei a(2. 64 .1)) </TD> <!--Sfârşitul primei celule--> <TD> <!--Începutul celulei a doua--> Prima linie.1)) </TD> <!--Sfârşitul celulei a(2.2)--> </TR> <!--Sfârşitul liniei a doua--> </TABLE> <!--Sfârşitul tabelei--> </BODY> </HTML> Rezultatul afişării exemplului 8 vezi mai jos.4.2)--> Linia a doua.2. figura 7.1)--> Linia a doua. Exemple de explorare Scop. 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> <!--Începutul celulei a(2. Explorarea posibilităţilor HTML de construiremodificare a tabelelor. • Exemplul 8. a doua coloană (elementul a(1.2)) </TD> <!--Sfârşitul celulei a(2.

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.2)) Linia a doua. Rezultatul afişării exemplului 8 • Exemplul 9. Un tabel mai sofisticat <html> <head> <title> Exemplul 9. 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.</td> <td width="13%">Destinatia</td> <td width="11%">Nr. coloana întâi Linia a doua.1)) (elementul a(1.2)) Figura 7. a doua coloană (elementul a(1. prima coloană Prima linie.biletului</td> <td width="12%">Nr.Cel mai simplu tabel din 2 coloane si 2 linii TABELUL POATE AVEA UN TITLU Prima linie.bagaj</td> <td width="13%">Greutatea(kg)</td> 65 . coloana a doua (elementul a(2. rutei</td> <td width="12%">Nr.1)) (elementul a(2.Un tabel mai sofisticat </title> <meta http-equiv="Content-Type" content="text/html.

....M.</td> </tr> </table> </body> </html> Rezultatul afişării exemplului 9 vezi mai jos...... <br> </td> <td>.A.</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.</td> <td>. 66 . figura 8.. </td> <td>.D</td> <td>.</td> <td>...</td> <td>.

A. . Este definită imaginea de fond a tabelului. a liniei de tabel şi a celulei din linia data.M.3 Întrebări de autocontrol şi exerciţii 1. Aioanei A12763876 Moscova 7021 AA-1209 Petru Bagrin Ion A12700876 Moscova 7021 AB-0089 . . .. Este sau nu necesară definirea lăţimii fiecărei celule? Argumentaţi răspunsul. de linie şi care sunt atributele de definire a lor? 5.....biletului Nr. Numiţi câteva metode de dimensionare a lăţimii celulei. 6.. Ce caracteristici poate avea o line de tabel? O coloană? O celulă? 4. destinatia Nr.bagaj rutei (kg) 000001 25 000698 14 . Ce este un titlu de tabel. Greutatea Nr. de coloană.. când sunt binevenite fiecare din ele? 8.D . 1 2 3 Familia Seria Pas. S.. Destinatia Identificare bagaj Nr. Care sunt caracteristicile comune pentru întreg tabelul şi comenzile de definire a lor? 3.LISTA BAGAJELOR PASAGERILOR RUTEI 7021 Date despre pasageri. Figura 8.. Care din ele se va afişa? 67 . Care din ele se va afişa? 9. Care sunt cele două metode de dimensionare a tabelului? 7. Este definită imaginea de fond a tabelului şi a celulei. Care sunt elementele de bază ale unui tabel? 2. Rezultatul afişării exemplului 9 4..4...

Exploraţi comenzile de spaţiere verticală şi orizontală a conţinutului unei celule. Variaţi valorile atributelor marcajelor comune pentru întreg tabelul (culori şi dimensiuni ale chenarului de sus. Culegeţi exemplele nr 8 şi 9. Organizarea Site-ului. 17. Utilizaţi nume ierarhice de coloane . Structuraţi codul HTML aşa ca să se deosebească fiecare element al fiecărei celule de tabel. ale textului etc) şi sesizaţi diferenţa. Care sunt posibilităţile şi comenzile de aliniere a datelor în celulă? 11.5. 4. 24. În cadrul realizării sarcinii de explorare notificaţi marcajele HTML pentru construirea tabelelor. 20. de jos. Exploraţi comenzile THEAD şi CAPTION cu acelaşi text. 15. 14.faceţi ca unele celule ale titlului să se extindă pe mai multe coloane. Exploraţi comenzile de aliniere a conţinutului unei celule. Exploraţi comenzile de spaţiere verticală şi orizontală în jurul tabelului. Vizualizaţi documentele HTML în Explorer. Verificaţi acţiunea marcajelor. 25.10. 21. 23. 19. Care poate fi conţinutul unei celule? 12. atributelor. alcătuiţi tabelul sub formă de cod HTML. 13. 22. Construiţi un tabel ce conţine toate nuanţele culorii care se pot obţine pentru R (din tripletul RGB). Este vre-o diferenţă la afişare? Dacă nu–atunci care este sensul a două comenzi similare? Dacă da–care este diferenţa? 16. În cadrul realizării sarcinii creative–realizaţi tabelele proiectate. Referinţe 68 . 18. După nr din registru selectaţi tabelul conform anexei 2.

Un anumit cuvânt sau mai multe cuvinte consecutive pot fi marcate pentru a constitui o ancoră de legătură. selectându-l cu mouse-ul (un click pe butonul din stânga). cât şi pe oricare alt calculator din reţea. Documentul la care se face trimiterea poate să fie atât pe calculatorul curent. 4. între care există legături. Nume fişier: numele fişierului sau ancorei către care se va efectua trecerea (saltul în cazul activării). În aşa documente trecerea de la un document la altul se face prin intermediul legăturilor (referinţelor. Legăturile hipertext Legăturile se realizează în general prin intermediul marcajului <A> </A>. linkurilor). Tipuri şi moduri de specificare a legăturilor Localizarea specificarea: fişierului-ţintă poate fi făcută prin • • • 69 . Text explicativ: Legătura cu fişierul solicitat se face prin selectarea textului (clic pe textul explicativ). cu următoarea sintaxă: <A HREF="nume fişier"> Text explicativ </A> unde: HREF este atributul ce conţine calea către fişierul spre care arată legătura (HREF este o prescurtare de la Hypertext Reference). HTML permite definirea de legături şi în interiorul unui document prin intermediul ancorelor. Acest mecanism asigură navigarea în serviciul WWW. Textul marcat apare în altă culoare pe ecran şi subliniat. va determina afişarea pe ecran a porţiunii de document sau a documentului asociat acestei legături.1. în acest ultim caz trebuie să se specifice în faţa numelui şi adresa URL a serverului pe care se află documentul.5. Textul este afişat diferit faţă de restul documentului (colorat diferit şi subliniat).Una dintre caracteristicile de bază ale limbajului HTML este cea de structurare a publicaţiilor într-o colecţie de documente.

Referinţelor absolute - specifică întreaga cale, de la directorul de nivelul cel mai înalt şi până la documentul cerut. Referinţele absolute încep întotdeauna cu un slăsh, urmat de succesiunea directoarelor până la documentul referit. Referinţelor relative - specifică directoarele către documentul-ţintă pornind de la documentul în care se află referinţa (documentul de start). Specificarea caii se face ca în Unix, cu directoarele separate prin semnul „/”, indiferent de sistemul de operare în care lucraţi. Prin „...” se va specifica directorul aflat pe nivelul superior. Exemplu: HREF=".../imagini/buton.gif" specifică o cale relativă ce începe din directorul părinte al directorului curent, iar HREF=".../.../poze/poza1.jpg" specifică o cale relativă ce începe dintr-un director aflat cu două nivele mai sus decât directorul curent. Este recomandată utilizarea legăturilor relative ori de câte ori este posibil, pentru ca documentele să fie portabile (mutarea unui document să nu afecteze legăturile stabilite între fişierele componente). Legături interne–referinţe spre o ancoră din acelaşi fişier; şi legături externe - spre un alt fişier. Legături locale - dacă fişierele se află pe acelaşi calculator, eventual pe calculatoare din aceeaşi reţea locală. Legături îndepărtate - dacă fişierele legate se află pe calculatoare din reţele diferite (pe servere aflate la distanţă. În multe cazuri este nevoie să se creeze legături între secţiunile aceluiaşi document. Spre exemplu, atunci când documentul este o carte, un tutorial sau un curs vom simţi nevoia creării unui cuprins pentru fiecare capitol al documentului. Se va crea o legătură între fiecare temă din cuprins şi secţiunea din document care tratează acea temă. Crearea legăturilor interne se realizează prin utilizarea atributului NAME al marcajului <A>, care stabileşte un cuvânt-cheie ce identifică univoc paragraful-ţintă:
70

<A NAME="cuvânt-cheie"> paragraf-ţintă </A>. Folosirea marcajului cu atributul NAME poartă numele de ancoră. Atunci când se va face referinţă la această ancoră, documentul va fi derulat în fereastra navigatorului pana când textul dintre <A> </A> ajunge în partea de sus a ecranului. Ancorele nu sunt afişate diferit faţă de restul documentului ca în cazul legăturilor. Referirea la o ancoră în documentul de la care pleacă legătura se face în acelaşi fel ca în cazul referirii unui întreg document, adăugându-se simbolul # urmat de cuvântul-cheie din ancoră: <A HREF="nume-fisier#cuvânt-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 îndepărtat. Exemple de legături. Legătura <a href="http://www.alt-server/alt-site/fişier.html">, plasată în orice fişier din site-ul nostru, indică o legătură absolută externă. Legătura <a-href="http://www.nume-server.com/numedirector/A/A1/a12.htm">, plasată în fişierul index.html, indică o legătura absolută spre fişierul a12.htm din site-ul dat. Legătura <a href = ".. /.. /index.html">, plasată în orice fişier din directorul A1 sau A2, indică o legătura spre fişierul index.html din site-ul dat. Legătura <a href = ".. /A /a.htm">, plasată în fişierul b.htm din directorul B, indică o legătură spre fişierul a.htm din directorul A. Legătura <a href = "A/A1/a12.htm">, plasată în fişierul index.html, indică o legătură spre fişierul 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 porţiunea de text dorită (prin aşa-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ă conţine un număr redus de pagini (între 5-9). Site liniar, numit şi consecutiv, reprezintă un şir înlănţuit de pagini, care conţine doar legături înainte-înapoi. Se utilizează mai rar. Arhitectura este binevenită pentru prezentări, instrucţiuni, manuale, în care materialul poate fi conceput doar în mod consecutiv. Site ierarhic (arborescent), structura căruia reflectă structura fizică a arborelui documentelor. De regulă aşa site conţine referinţe 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 (adnotări, cuprins etc.). Iar din acestea atârnă „struguri” de documente

72

Definirea unei ancore HREF = "URL" NAME = "NUMEANCORA" HREF = "#NUMEANCORA " HREF = "URL # NUMEANCORA" Referinţa către o ancoră internă (din acelaşi fişier) Referinţa către o ancoră externă (din alt fişier) Numele cadrului în care va fi afişată sursa definită cu HREF valori speciale: -top = încarcă pagina într-o fereastră nouă. TARGET = " NUMECADRU" 73 .arborescente. -blank = încarcă pagina într-o fereastră noua. Frunzele acestor arbori pot fi documente plate sau liniare. -self = încarcă pagina în cadrul curent. între ghilimele nu trebuie să existe spaţii. Tabelul 8. fără nume. deasupra altor ferestre de pe ecran. este valoarea implicită. Marcaje de legare a paginilor şi referinţe Instrucţiune <A ATRIBUTE> </A> Atribute Descriere Marcaj tip ancoră Referinţă hipertext (legături spre alte pagini folosind un text sau o imagine). dacă dorim să introducem legături spre fişiere sau directoare al căror nume conţine spaţii (adică sunt formate din cel puţin 2 cuvinte) trebuie să înlocuim spaţiile cu %20. -parent = încarcă pagina în fereastra părinte. care adesea au referinţe inverse (către părinţi).

nume-server.com/nume-director/).nume-server. ar trebui să înlocuim http://www. În cazul unui site de dimensiuni mici.com. Referinţele relative au câteva avantaje: avem mai puţin de tastat în codul sursă: nu mai tastăm http://www. care conţine doar câteva pagini (fişiere). legăturile vor funcţiona şi în timp ce construim site-ul într-un director pe hard-disc. Este folositor dacă în fişier avem majoritatea legăturilor relative spre celalalt site şi site-ul este administrat tot de dvs.<BASE ATRIBUTE> HREF = "ALT-URL" "alt-URL"= "http://www. dacă vom dori să mutăm site-ul pe un alt server. 74 .com cu http://www. care se poate ataşa ca atribut aproape oricărei instrucţiuni. nu avem nevoie de o organizare mai complicată a site-ului (cu multe directoare). nume-nou-server.alteservere. Am putea plasa toate fişierele în acelaşi director (pe hard-disc sau la adresa www. (altfel se poate schimba structura site-ului sau denumirea fişierelor sau directoarelor fără să ştiţi şi legăturile vor deveni invalide) Putem defini ancore şi cu ajutorul instrucţiunii id = nume-ancoră.com/alt-site/": putem specifica legături relative spre fişiere situate pe alt site de pe alt server. nu trebuie să modificăm nimic. Dacă am avea legături absolute pentru fiecare.nume-server. Mouse-ul plasat deasupra unei legături face să apară pe bara de stare (deasupra butonului "start") adresa/directorul/ fişierului accesat de acea legătura. • • • Comentarii utile.com/nume-director pentru fiecare legătură în parte.

Realizarea efectului marquee 7. în scopul facilitării administrării.Introducere 2. figura 9.Pentru site-uri complicate. Cuprins (de primul nivel) <html> <head> <title>Exemplul 10.jpg"> <h1 align="left"><font color="#0000CC">Compendu pe</font></h1> <h1>HTML</h1> <ol> <li><a href="c1.htm">Elemente textuale</a></li> <li><a href="c3.htm">Formarea tabelelor</a></li> <li><a href="c5. de legare a textelor.5. studierea marcajelor de organizare a referinţelor. Compendu pe HTML 1. Exemplul 10. Recunoaşterea structurilor de bază ale unui site. Planificarea site-ului individual.3.Introducerea frame-urilor si formelor Figura 9.Crearea legaturilor si ancorelor 4.htm">Realizarea efectului marquee</a></li> <li><a href="c7. se recomandă a avea câte un director pentru fiecare din tipurile de obiecte.htm">Crearea legaturilor si ancorelor</a></li> <li><a href="c4.htm">Introducerea frame-urilor si formelor</a></li> </ol></center> </body> </html> Rezultatul afişării exemplului 10 vezi mai jos. Exemple de explorare Scop.Cuprins de primul nivel(index) </title> </head> <body bgcolor="#FFFFFF" text="#000000" background="back. Rezultatul afişării exemplului 10 75 .Formarea tabelelor 5.htm">Introducerea imaginilor si sunetelor</a></li> <li><a href="c6.htm">Introducere</a></li> <li><a href="c2.Elemente textuale 3. 4.Introducerea imaginilor si sunetelor 6.

2.2"><b>Blocuri de structura</b></a><b> </b><ul> <li><a href="#2. exista mai multe marcaje META.3"><b>Alineate</b></a><b> </b></li> <li><a href="#2..4"><b>Liste </b></a></li> <li><a href="#2..2. figura 10. <h4><a name="2.2.1"><b>Titlul paginii </b></a><b> </b></li> <li><a href="#2.1"><b>Divizori</b></a><b> </b></li> <li><a href="#2.Exemplul 11.Elemente textuale</a> </h4> In continuare urmeaza textul sub titlul 2. <BR>cu atribute name . Cuprins de nivelul II.</p> </body> </html> Rezultatul afişării exemplului 11 vezi mai jos. Elemente textuale </h3> <ul> <li><a href="#2. 76 .2.">2. ancore</title> </head> <body> <h3> 2.2"><b>Titluri si subritluri</b></a><b> </b></li> <li><a href="#2.2.1"><b>Ancore</b></a><b> </b></li> <li><a href="#3.5"><b>Tabele </b></a></li> </ul> </li> <li><a href="3"><b>Crearea legaturilor</b></a><b> </b><ul> <li><a href="#3.2"><b>Legare de texte </b></a><b> </b></li> </ul> </li> </ul> <h4><a name="2.Titlui paginii </a> </h4> <p>:In general in antetul unei pagini Web. ancore <html> <head> <title> Exemplul 11.. Cuprins de nivelul II.1.content perechi. intre marcajele <BR> HEAD si /HEAD.1">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. dar nu şi invers”. 2. 4.1. o referinţă? Ce este o ancoră? O referinţă locală? Prin ce diferă referinţele interne de cele externe? Prin ce diferă referinţele absolute de cele relative? Care sunt avantajele referinţelor relative? Comentaţi afirmaţia „Toate legăturile îndepărtate sunt externe. 2.Titlui paginii In general in antetul unei pagini Web.Elemente textuale In continuare urmeaza textul sub titlul 2. 3.5. intre marcajele HEAD si /HEAD. Care este comanda ce permite afişarea conţinutului referinţei într-o fereastră bine determinată? 8.exista mai multe marcaje META. 6..4 Întrebări de autocontrol şi exerciţii 1. 7.2. 5.. Rezultatul afişării exemplului 11 4. Ce este o legătură. Cum se va scrie un spaţiu în identificarea referinţei? 77 .. cu atribute name-content perechi. Figura 10.

Exploraţi posibilităţile comenzii id = nume-ancoră. Imaginea este un fişier de tip . Introducerea imaginilor Cele mai spectaculoase efecte sunt obţinute atunci când pagina conţine imagini. precum şi pregătirea obiectelor.construiţi cuprinsul site-ului.htm. Construiţi referinţele din cuprins spre paginile site-ului şi din fiecare pagină a site-ului spre cuprins. Textul care însoţeşte imaginea poate fi aliniat relativ la marginea superioară sau inferioară a imaginii sau în dreptul mijlocului imaginii (alinierea la marginea superioară este implicită). În cadrul realizării sarcinii creative .gif sau . conform temei curente.6. filme (video). însă nu numai ca aspect decorativ. 78 .6. În cadrul realizării sarcinii de explorare completaţi compendiul cu marcaje şi noţiuni noi. 4.9.1. ci şi pentru a sublinia şi îmbunătăţi mesajul transmis de publicaţia electronică. 13.xbm (format X BitMap) care poate să se găsească pe oricare din serverele WWW din reţea. textul încadrând sau nu imaginea. Familiarizarea cu problemele legate de includerea în componenţa site-ului a diverselor obiecte cum ar fi imagini. Operarea cu obiecte Scop. 15. 12. scheme. fotografii. 4. 14. obiecte sonore(audio). Alcătuiţi cuprinsul site-lui de explorare a HTML în pagina index. Ce este un site? 10. Imaginile pot fi incluse intr-un document ca elemente de tip caracter. ataşarea lor la site-ul creativ. desene. Care structuri de site-uri sunt răspândite? 11.

Încărcarea imaginilor durează. În ultimul caz în locul imaginii poate fi afişat un text alternativ (atributul „alt”). O imagine poate fi declarată ca legătura către alt document HTML. deoarece. Imaginile externe se introduc prin stabilirea unui link către fişierul-imagine: <A HREF="tom3. cu afişarea imaginii doar la cerinţa explicită a utilizatorului. Exemple de explorare– vezi nr 12. mai ales dacă au o dimensiune mare. este bine să folosim un tabel în celulele căruia să afişăm imaginile micşorate (prin precizarea lăţimii şi înălţimii). din care cauză unele navigatoare permit setarea lor cu sau fără afişarea imaginilor. de exemplu). Tabelul 9. lucru contraindicat (nu e bine să abuzezi de timpul şi aşa limitat al vizitatorului).com.jpg"> Poza externă </A> Se obţine următorul link: Poza externă. Atunci când dorim să inserăm în document mai multe imagini de mari dimensiuni (un album. iar printr-un clic pe imaginea respectivă să se facă încărcarea imaginii în mărime naturală. Marcaje de includere a imaginilor Instrucţiunea <img atribute> Atribute src = "url" alt = "text" Descriere Marcajul de includere a imaginii Adresa fişierului grafic (url absolut sau relativ) Textul alternativ care este afişat celor care navighează fără imagini 79 . O serie de gif-uri animate interesante puteţi găsi pe site-ul www. Marcajele utilizate vezi tabelul 9. încetinesc încărcarea paginii.animfactory. De cele mai multe ori este preferabil să nu folosim imagini interne.

2.6..au. pentru că asigură o compresie şi o redare bună. De exemplu. folosindu-se marcajul <a> pentru crearea unui link spre fişierul extern. Alinierea elementelor din jurul imaginii: top (sus). .align = Alinierea imaginii în pagină: right (dreapta). 4. o melodie de pe un CD audio obişnuit necesită cam 30-60 MB. Aşa-zisele mp3-uri sunt fişierele cele mai utilizate pentru stocarea melodiilor. în timp ce aceeaşi melodie în format mp3 va avea 3-5 MB !!! 80 . . Titlul imaginii </caption> Notă: Folosiţi întotdeauna atributele width şi height (exprimate în pixeli): ele rezervă în pagină un spaţiu cu lăţimea şi înălţimea specificate şi permit afişarea paginii şi a textului înainte de recepţionarea imaginii de la server. bottom (jos) Înălţimea imaginii (în pixeli sau %) Lăţimea imaginii (în pixeli sau %) Mărimea chenarului din jurul imaginii (în pixeli).mp3.. Formatele uzuale de reprezentare a sunetelor permit lucrul cu fişiere cu extensiile: .wav. sau linia de contur Spaţiu pe orizontală în jurul imaginii (în pixeli) Spaţiu pe verticală în jurul imaginii (în pixeli) height = width = border = hspace = vspace = <caption>. Introducerea sunetelor In documentele HTML se pot introduce şi fişiere care conţin sunete. middle (mijloc).mid . left (stânga = implicit).

permite inserarea unei secvenţe audio.dacă valoarea este „false”. de mărimi specificate. folosind marcajul de bază img. vom putea folosi unul dintre următoarele marcaje: Embed . poate fi folosit doar în IE.specifica numele fişierului (calea) ce conţine secvenţa audio. Atributele marcajului sunt: SRC = "nume-fisier" . mouseover>. Width=mărime şi Height=mărime .Dacă dorim să includem o secvenţă audio în paginile noastre.dacă valoarea este „true” va reda sunetele la neşfârşit. Controls=console / smallconsole .3. De exemplu: 81 . Bgsound . În pagină va fi afişat un panou de control. Autostart=true / false . respectiv înălţimea panoului de control. Dacă dorim să rulăm un videoclip în paginile noastre. Implicit este fileopen. Sunt permise formatele WAV. 4. Poate fi fileopen sau mouseover.permite afişarea normală sau respectiv redusă a panoului de control. vom putea folosi unul dintre următoarele atribute ale marcajului IMG: dynsrc="url. dotat cu butoane Play şi Stop. altfel o singură dată. start=# . dar se pot specifica amândouă astfel <img start=fileopen. Loop=true / false .numele fişierului ce conţine videoclipul. Volume=număr .avi". Introducere videoclipuri In documentele HTML se pot introduce şi manipulări cu videoclipuri (doar în IE).introduce în pagină sunete de fond.indică momentul startului clipului. Formatul uzual de reprezentare a videoclipurilor au extensia . nu este redată melodia decât prin apăsarea butonului Play.6.avi.permite stabilirea volumului sunetului. valoarea permisă fiind între 1 şi 255.precizează lăţimea. AU şi MIDI.

Întârzierea în milisecunde.AVI" start=mouseover>. care sunt valorile posibile? 7. Dacă <loop=infinite> clipul va bucla la nesfârşit. Ce periferice sunt necesare pentru rularea clipurilor? 10. De exemplu: <img src="SAMPLE-S. 4. loopdelay=# . Ce tipuri de obiecte pot fi ataşate la site cu ajutorul comenzii img? 3. videoclipurilor? 9. Modificaţi conturul imaginii. 82 . Loop = # . la marginea de sus. dacă <loop=1> . sunetelor. Ce atribute se pot utiliza la rularea videoclipurilor. de jos.AVI" loop=3>.GIF" dynsrc="SAMPLE-S. Care sunt funcţiile instrucţiunii img? 2. Este valoarea implicită. Ce atribute se pot utiliza la redarea sunetelor. 11. Ce medii pot fi utilizate pentru construirea imaginilor. care sunt valorile posibile? 8. Care este comanda de titlu a unei imagini? 5.AVI" loop=3 loopdelay=250>.GIF" dynsrc="SAMPLES.<img src="SAMPLE-S.o singură dată.4 Întrebări de autocontrol şi exerciţii 1. Un alt exemplu: <img src="SAMPLE-S.6. spaţierea verticală şi orizontală.GIF" dynsrc="SAMPLES. Cum poate fi poziţionată o imagine? 4. Care este comanda liniei de contur a unei imagini? 6. Exploraţi comanda de declarare a imaginii. imagini cu alinierea unui text la mijloc.Bucla.

În cadrul marcajului FORM operatorul are posibilitatea de a găsi tot ce doreşte în afară de un alt operator FORM. 4. forme de intrare) sunt destinate pentru introducerea unor informaţii în timpul vizitării paginii.12. 14. 13. Completarea şi înregistrarea unui astfel de formular determină memorarea intrun fişier a datelor introduse de utilizator în fiecare câmp sau. Construiţi obiectele specificate în mediile respective. care apoi se vor prelucra de o altă programă. Exemple de explorare–vezi nr 12-13. În cadrul realizării sarcinii de explorare completaţi compendiul cu marcajele şi noţiunile noi. C++ etc. Java. În cadrul realizării sarcinii creative– specificaţi/acordaţi obiectele pentru includerea lor în Web site-ul individual. Ataşaţi obiectele construite la site-ul construit. listelor sau tabelelor. Colecţii de 83 . 17. Operarea cu formulare 4.1. conform temei curente. Exploraţi atributele comenzii de includere a unei melodii. Formularele sunt compuse din câmpuri de intrare în cadrul paragrafelor.Maracje utilizate Formularele (forme de colectare a datelor. Perl. 15. Exploraţi atributele comenzii de rulare a unui videoclip. Marcajele utilizate pentru construirea formularelor vezi tabelul 10.7. 16. numită "script" care poate fi efectuată în câteva limbaje de programare ca: JavaScript. în cea mai mare parte expedierea datelor prin poşta electronică.7. în funcţie de mecanismul care a fost implementat în programul de tratare a formelor.

3.scripturi utile vezi referinţele bibliografice. Marcaje de operare cu formulare Destinaţia Definirea formularului Încărcare fişier Definire câmp Input Nume câmp Valoare câmp Apăsat? Dimensiune câmp Dimensiune maximă Listă de selecţie Nume listă Număr de opţiuni Opţiuni multiple Opţiune Opţiune 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 opţiunea dorită Când lista este definită separat Elemente ce pot fi selectate Se afişează Pentru Input text . precum şi la sfârşitul p.1.7. Tabelul 10.

imagine pe care se poate de apăsat un click şi să se realizeze nemijlocit ceea ce trebuie să facă această formă. e. Fiecare câmp al formularului este definit printr-un element INPUT. INPUT de tip select–afişează o listă din care se poate alege unul sau mai multe valori. INPUT de tip "checkbox" defineşte căsuţe de tip on/off. INPUT de tip "password" –aria de introducere a password-ului.indică metoda utilizată pentru transmiterea conţinutului formei pe server. c. INPUT de tip "image" . 85 . Pentru a realiza interfaţa în cadrul lui FORM. POST. şi trebuie să aibă un atribut de nume NAME unic într-un document. TEXTAREA. Acest atribut funcţionează numai în cazul utilizării metodei POST. INPUT de tip "text" –aria de introducere a textului. GET. Denumirile celor mai răspândite obiecte sunt: a.Nume fereastră Spaţiere text <TEXTAREA NAME="***"></TEXTAREA> <TEXTAREA WRAP=OFF|VIRTU AL|PHYSICAL></TEXTAREA> ACTION . METHOD .la utilizarea acestei metode conţinutul formei existente se transmite nu ca o parte a URL dar ca un corp al acestei utilizări.această metodă adaugă conţinutul la forma existentă. SELECT.indică unde se va transmite conţinutul formei după confirmare. a. Implicit se foloseşte metoda POST. b. b. f. d. se folosesc următoarele atribute: INPUT. Această metodă depinde de cum lucrează serverul. INPUT se caracterizează de asemenea de atributul TYPE. ENCTYPE . INPUT de tip "submit" defineşte butoane prin care se lansează anumite programe (ex: rememorare formular).specifică tipul codificării conţinutului formei existente.

numărul liniilor ariei de introducere(lungimea). COLS . dar pentru checkbox şi radiobutoane semnifică apăsarea lor. Explorarea posibilităţilor HTML de colectare a datelor. • Exemplu 12. SIZE . c.numărul coloanelor (lăţimea). SELECT are marcaje de început şi sfârşit. NAME . În cadrul <FORM>.indică că se pot selecta mai multe opţiuni. MULTIPLE .definirea nu e obligatorie. A 4. OPTION pentru definirea elementelor de liste. Cea mai simplă formă <HTML> 86 . INPUT de tip "reset" –butonul care se foloseşte pentru reiniţializarea formularului. Exemple de explorare Scop.2.g. (incluzând INPUT şi TEXTAREA elemente). In cadrul SELECT se permite folosirea atributelor: a. VALUE poate fi utilizat pentru scrierea deasupra butoanelor. Atribute: NAME . Spre deosebire de INPUT. TEXTAREA ne permite vizualizarea unei ferestre de introducere cu mai multe linii. h.numele (simbolic) al opţiunii alese.dimensiunea ferestrei de opţiuni. d. eventual şi cu linii de derulare.valoarea pe care o are câmpul dat. b.</FORM>. Atributul NAME este numele simbolic unicat al câmpului formei date.7. Atributul VALUE .numele simbolic al ariei de introducere.. poate fi inclus SELECT. ROWS .. CHECKED . INPUT de tip "radio" –buton ce poate lua starea fie on fie off.

. Cea mai simpla forma Inapoi. la capitolul III. Formă de introducere a datelor <HTML> <head> <title>Exemplul13.. Rezultatul executării exemplului 12 • Exemplul 13. la capitolul III.<HEAD> <TITLE> Exemplul 12.: </font></big> <font color=red> <P>Nume.. Cea mai simpla forma </TITLE> </HEAD> <H1>Cea mai simpla forma </H1> <FORM ACTION="pr0008. Introducere date</title> </head> <BODY bgcolor=pink> <big><font color=blue>Introduce-ti datele despre dvs.html"> <!--Inceputul formei--> <INPUT TYPE=submit VALUE="Inapoi. Figura 11. 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 .. 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. figura 11."> </FORM> <!--Sfirsitul formei--> </BODY> </HTML> Rezultatul afişării exemplului 12 vezi mai jos.

anexa nr.E. Demonstraţi înregistrarea vizitatorilor site-ului.T. Întrebări de autocontrol şi exerciţii 1. 3.de Politie<OPTION>Acad.S.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.3. 4.1).<OPTION>A.<OPTION>U. precum şi la sfârşitul p.M<O PTION>USAM <OPTION>Acad. În cadrul realizării sarcinii creative elaboraţi codul HTML al formei de înregistrare a vizitatorilor site-ului dvs. 5.M. 88 .1. 6. În cadrul realizării sarcinii de explorare descrieţi marcajele HTML de construire a formularelor de introducerecolectare date. Prin ce diferă un radio-buton de un buton checkbox? 8. (forma recomandată–vezi compartimentul.3. Care sunt elementele definitorii ale unui formular? La ce servesc formularele? Cine şi cum stochează / prelucrează datele colectate? Care sunt cele mai răspândite tipuri de INPUT? La ce servesc elemente SELECT? De ce în cadrul formei identificatoarele câmpurilor trebuie să fie unicate? 7. 4.7.S.Colecţii de scripturi utile vezi referinţele bibliografice. 9. 10. 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 afişării exemplului 13 vezi mai jos. 2. Date generale.M.7. figura 12.

Rezultatul executării exemplului 13 4.8. prin a 89 . fereastră). FRAME) O altă modalitate de structurare a unui document hypermedia este împărţirea ferestrei navigatorului în mai multe zone distincte (frame–cadru. FERESTRE (CADRE. O practică frecventă printre creatorii de site-uri este aceea de a utiliza două frame-uri verticale: în fereastra stângă se află de obicei butoane. în fiecare dintre acestea rulând diferite documente (fişiere).Figura 12.

Netscape 4. dar cu valori diferite. Scop: Explorarea posibilităţilor divizării ecranului în ferestre. iar pentru altele .căror apăsare se face legătura cu o anumită secţiune a site-ului. Definitivarea (conţinutului şi formei) site-urilor de explorare şi creativ. În general nu dorim chenar şi folosim border =0 împreună cu framespacing =0 şi frameborder =no. afişarea făcându-se în fereastra din dreapta. dacă îl folosiţi împreună cu border. pentru că nu ştim ce browser (cu ce valori setate ca implicite) foloseşte vizitatorul.1. implicit yes Mărimea spaţiului dintre cadre (pixeli). 4. deci mai bine le specificaţi dvs. Comenzi de construire a cadrelor Comenzile necesare pentru construirea ferestrelor vezi tabelul 11. Marcaje de operare cu ferestre Instrucţiune <frameset atribute> </frameset> Atribute cols = rows = Descriere Definirea împărţirii paginii în cadre Numărul şi mărimea relativă a coloanelor Numărul şi mărimea relativă a liniilor Mărimea chenarului (pixeli).8.51) border = frameborder = framespacing = 90 .valoarea lui border (ex. pentru unele browsere primează valoarea lui framespacing (ex. Tabelul 11. IE 5). Specifică dacă cadrul definit cu FRAMESET are sau nu chenar: yes sau no.

auto (dacă este nevoie). no (nu). implicit yes) Opţiuni pentru bara de derulare : yes (da). auto (dacă este nevoie). no (nu).<frame atribute> src = " url " name = Definiţia unui cadru Sursa cadrului Numele cadrului. utilizat de marcajul <a href = "url" target = nume> Opţiuni pentru bara de derulare: yes (da). implicit "auto" scrolling = noresize marginheight = marginwidth = <noframes> </ noframes> <iframe atribute> </ iframe> src = " url " name = height = width = frameborder = scrolling = 91 . utilizat de marcajul <a href = "url" target = nume> Înălţimea cadrului înglobat (pixeli sau %) Lăţimea cadrului înglobat (pixeli sau %) Specifică dacă cadrul definit cu IFRAME are sau nu chenar (yes sau no. implicit "auto" Pentru a nu redimensiona trăgând de chenar (doar dacă există chenar ) Spaţiu deasupra şi sub un cadru (pixeli) Spaţiu la stânga şi la dreapta unui cadru (pixeli) Secţiunea de pagină afişată de către navigatoarele ce nu pot interpreta cadre Cadru intern (doar IE) Sursa cadrului Numele cadrului.

htm"> </FRAMESET> În exemplul de mai sus s-au creat două zone "verticale". despre care vom vorbi mai tarziu. aşa cum apare în exemplu. 30%" (împărţire în patru zone verticale). De exemplu: <FRAMESET COLS="30%. BORDER=numar-pixeli specifică ce grosime să aibă chenarul (valabil doar pentru Netscape) BORDERCOLOR=culoare specifică ce culoare să aibă chenarul. iar in frame-ul drept se va afişa fişierul fisier2. (valabil doar pentru Netscape) 92 .</body>. dacă nu se specifica atributul NORESIZE.În continuare aducem unele comentarii asupra utilizării. Dacă un document hypermedia este structurat folosind frameuri.*"> <FRAME SRC="fisier1. se va utiliza atributul ROWS în locul atributului COLS. 10%. atunci se va renunţa la marcajele ce definesc corpul documentului <body>. 40%.htm.htm. În primul frame se va afişa conţinutul fişierului fisier1..70%". Dacă se doreşte împărţirea documentului în zone aşezate invers (pe linii). Marcajul <FRAMESET> poate fi utilizat în conjuncţie cu următoarele atribute: FRAMEBORDER="yes|no" specifică dacă bordura (chenarul) frame-ului este sau nu vizibilă. Frame-ul poate fi redimensionat de vizitatorul paginii cu ajutorul mouse-ului.. Se poate realiza împărţirea documentului în mai multe frame-uri.htm"> <FRAME SRC="fisier2. prima ocupând 30% din fereastra navigatorului. iar a doua restul. specificând procentul din aria ferestrei navigatorului: COLS="20%. Nu este obligatoriu să se folosească "*". corectă fiind şi forma: COLS="30%.

93 . Chenarul cadrului este vizibil totdeauna sa nu? 4. 4. precum şi navigatoarele "mod text" asemănătoare cu lynx din Linux.în cadrul de dreapta. iar conţinutul . realizaţi cadre.2. Care este diferenţa dintre structurarea ferestrei navigatorului în cadre prin intermediul unui tabel şi a marcajului FRAME 3. Când este binevenită împărţirea ferestrei navigatorului în mai multe zone distincte (frame. Întrebări de autocontrol şi exerciţii 1.8. 9. nu puteau afişa documente ce conţin frame-uri. În cadrul lucrării de explorare notaţi marcajele principale pentru construirea cadrelor. dacă este necesar. Ce subtilităţi pot apărea la utilizarea marcajului FRAME? 6. Afişaţi cuprinsul de nivelul I al compendiului într-un cadru de stânga. Valoarea auto determină afişarea barei de derulare atunci când este cazul (adică informaţia nu se poate „încadra” în întregime) NORESIZE .nu permite redimensionarea frame-ului de către utilizator. 10.SCROLLING="yes|no|auto" stabileşte dacă se afişează sau nu bara de scroll într-un frame. Chenarul cadrului există totdeauna sa nu? 5. cadre)? 2. Definitivaţi structura site-ului creativ. Cum se poate interzice redimensionarea frame-ului? 8. de 20%. Notă: Navigatoarele mai vechi. Când se afişează bara de scrolling într-un frame? 7.

Textul are atributele de lungime şi înălţime: width si height. ciclic cu o viteză stabilită. pentru a sesiza diferenţa. right(dreapta) <marquee direction=left>Bine ati venit!</marquee><P> <marquee direction=right>Bine ati venit!</marquee> Valoare Scroll <scrollamount=#> Atributul scrollamount . reprezintă viteza cu care se va mişca textul pe ecran..4. Cea mai bună este însuşirea mecanismului funcţionării marcajului marquee pe baza exemplelor de mai jos.9. poate fi utilizat un fond special. Exemple. De exemplu: <marquee scrollamount=50>Bine ati venit!</marquee> Intarziere Scroll <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>Bine ati venit! </marquee> 94 . Realizarea efectului Marquee Efectul marquee reprezintă un efect de mişcare a textului pe ecran de la stânga la dreapta şi invers. sau grupate în cadrul unei pagini. ALTE ELEMENTE 4. se pot contura marginile afişării. de jos în sus şi invers..1. </marquee> simplu <marquee>Bine ati venit!</marquee> Atribute de scroll Directia <direction=#> #=left(stânga). Elementul <marquee> .are valorile aproximativ între 1 şi 100.9. care pot fi executate separat.

Slide este mişcarea textului dintr-un capăt în altul oprindu-se în cel din urmă. <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=#> #=număr sau infinit. middle(mijloc). indică numărul maximal de mişcare 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).Comportamentul sau felul de mişcare a textului <behavior=#> #=scroll. slide. Alternate reprezintă mişcarea textului de la o margine la alta. alternate Scroll este mişcarea obişnuită a textului dintr-un capăt în altul. 95 . 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 mişcării <hspace=# vspace=#> Bine <marquee hspace=20 vspace=20 width=150 bgcolor=#ffaaaa align=middle> Ati Venit!</marquee> Salutari din Moldova.

Notă: Nu vă lăsaţi prea mult atraşi de patima clipirii! Multă clipire. de durată. acele stiluri le putem folosi de mai multe ori în corpul acelui fişier fără a mai specifica şi atributele.CSS). Până la acea dată forma.4.css astfel încât poate fi apelat de orice alt fişier de pe 96 .9. 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 fiecărei instrucţiuni. 4. "color".13. b) Specificate în antetul fişierului: specificăm la începutul unui fişier diverse atribute pentru mai multe stiluri de text. Text clipitor Pentru a atenţiona vizitatorul asupra unui fragment de text se poate utiliza clipirea lui. folosind atributele din tabelul 12. este cel mai neeconomic mod.3. c) Extern: atributele pentru diverse stiluri sunt specificate într-un fişier special (pe care îl putem construi cu un editor de texte (Notepad) şi îl salvăm ca fişier de tip text cu extensia . Modele de stiluri În specificaţiile HTML 4.9. cunoscute ca Modele de Stiluri în Cascadă (Cascading Style Sheets .0 au apărut specificaţiile pentru modele de stiluri. "size". poate fi supărătoare şi dăunătoare.2. Marcajul utilizat are sintaxa <BLINK> text </BLINK> Exemplu: <BLINK> Pe curând! </BLINK> va duce la clipirea textului inclus. culoarea şi mărimea textului puteau fi date cu instrucţiunea "font" şi cu atributele sale: "face". Modelele de stiluri pot fi aplicate aproape oricărei instrucţiuni.

site. Se poate întâmpla ca unele caracteristici specificate sub forma prescurtată să nu funcţioneze. 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). nu cea prescurtată. numai pentru stiluri Specifică un anumit stil Specifică un anumit stil Tabelul 13. Unele atribute din tabelul 12-13 pot fi specificate şi sub o forma prescurtată. pixeli(px) 97 . mai ales pentru site-uri mari. În aşa caz folosiţi forma explicită. iar altele să poată fi aplicate cu mai multe instrucţiuni. centimetri(cm). Tabelul 12. Putem face chiar ca un anumit stil să poată fi aplicat numai cu o anumită instrucţiune. Comenzi de definire a stilurilor Instrucţiune Atribute <style> </style> <span> </span> type= class= id= Descriere Specifică în antet caracteristicile stilurilor În general Cascading Style Sheets: "text/css" Marcaj generic. Este modul cel mai recomandat. inch(în).

solid. light. outset Dată în puncte(pt). centimetri(cm). bold. pixeli(px) None. demi-bold. inch(in). inch(în). Evidenţierea textului underline(subliniat). centimetri(cm). groove. centimetri(cm). justify text-align textdecoration None (neevidenţiat). inch(în). italic(cursiv). pixeli(px) line-height margin-left margin-right margin-top Dată în puncte(pt). right(dreapta). line-through(tăiat) Distanţa primului rând faţă de marginea din stânga Tipul chenarului Dată în puncte(pt). procent(%) Dată în puncte(pt). ridge. pixeli(px). centimetri(cm). inset. inch(in). dashed. inch(in). double. centimetri(cm). pixeli(px) Dată în puncte(pt). dotted. center(centru). pixeli(px) Left(stânga). inch(in). extrabold Dată în puncte(pt). medium. centimetri(cm). demi-light. italic Extra-light. pixeli(px) Nume sau valoare RGB text-indent border-style border-width Grosimea chenarului border-color Culoarea chenarului 98 .font-style font-weight Text cursiv Grosimea fontului Distanţa dintre liniile de bază ale textului Distanţa faţă de marginea din stânga a paginii Distanţa faţă de marginea din dreapta a paginii Distanţa faţă de textul precedent sau faţă de marginea de sus a paginii Alinierea textului Normal.

} h5{ color: rgb(51.51).51.0).} LEGEND{color: rgb(51.51.0.} h1{ color: rgb(51.51.51).51.} TD{ border-color: rgb(0.} a:active{color: rgb(153. color: white.0).51.51).51.51).255.51). border-color: rgb(0.51).51).0. care ar instala aceiaşi parametri pentru ambele site-uri.51.102. background-color: rgb(255.0).0.51).102).0).} h3{ color: rgb(51.51.0). 99 .255).} CAPTION {color: rgb(51.} h2. marquee{color: rgb(51.0). color: black. border-color: rgb(51.} a:visited{color: rgb(51.0). Demonstraţi acţiunea lui.0.51).51).} h6{ color: rgb(51.51).51.} În cadrul sarcinii de explorare şi creative construiţi şi utilizaţi un fişier CSS.51.51. Fişierul color.0).0).51). table-border-color-dark: rgb(0.} TH{ color: rgb(51.0.} BUTTON{background-color: rgb(51.Notă: 72 pt=1 inch = 25. 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. color: black.} TEXTAREA{border-color: rgb(0.102).} SELECT{border-color: rgb(0.51.} HR{ color: rgb(51.0.51. color: black.0.4 mm.51).51.} TABLE{ table-border-color-light: rgb(51.css (definirea culorilor) a:link{color: rgb(102.} FIELDSET{border-color: rgb(0. color: rgb(51. border-color: rgb(0.} body{color: rgb(0. • Exemplul 14.0.102).} h4{ color: rgb(51.51.0.

Într-o reţea atât de eterogenă cum este Internetul. Graficul cel mai mare trebuie să ocupe zona centrală a paginii. Aranjarea în pagină Cea mai bună experienţă se obţine navigând pe Internet. Navigarea uşoară şi naturală. 100 .2. Diferenţa de tonalitate între diverse elemente trebuie riguros produsă. în acea zonă. Apoi în regim offline puteţi studia modul în care a fost făcută acea pagină. Accesibilitatea Web-paginii Accesibilitatea Web-paginii presupune că. e bine să cunoaşteţi careva reguli la construirea Web-paginilor: Echilibrarea paginii. Este inadecvat să atragem atenţia spre un singur colţ al paginii prin folosirea. pentru a fi accesibilă tuturor potenţialilor vizitatori. ori uniform de-a lungul uneia dintre laturile paginii. cel puţin majoritatea covârşitoare a celor care încearcă să viziteze pagina. Webpagina trebuie să fie compatibilă cu standardul HTML. fără o ierarhie prea adâncă şi fără fundături. fără erori sau alte impedimente. În cazul în care la un moment dat o pagină v-a impresionat prin modul în care arată. a unor culori puternic contrastante cu fondul. Orice abatere presupune. 5. SFATURI UTILE 5. Aceste zone trebuie plasate ori în centrul paginii. Senzaţia de dezechilibru al unei pagini dată de aglomerarea într-o anumită zonă a mai multor elemente şi prezenţa în alte zone a unor spaţii goale este destul de neplăcută.5.1. dacă nu toţi. pierderea unei părţi din aceşti vizitatori. să poată să o şi facă. puteţi câştigă ceva experienţa. în mod automat. Oricum. nu vă fie frică şi salvaţi-o.

un anumit mod de a fi prezentată. este uşurinţa cu care utilizatorul se deplasează în interiorul lui. de exemplu în spatele enumerărilor sau a liniilor este de preferat să existe ceva de tipul "---" decât un cuvânt. 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 ş. însă este necesar ca acest stil să se păstreze până la sfârşitul paginii astfel încât vizitatorul să nu creadă la un moment dat că a părăsit pagina iniţială printr-un link.m. nu în ultimul rând. Navigarea în interiorul paginii Poate cel mai important lucru la un site Web. care nu. să fie concisă.d. logic împărţită şi să ţină cont de publicul pe care îl vânează. În spatele imaginilor tag-ul ALT este preferabil să conţină denumirea şi nu descrierea link-ului respectiv. pe idei. Nu există o soluţie unică. În primul rând. dar şi dificil de realizat.m. este asigurarea unei coloane vertebrale a paginii. Fişierele lungi ar fi bine să fie sparte în bucăţi logice.a. este necesar ca ea să fie subordonată informaţiei pe care trebuie să o transmită. ce caută el în pagină.a. asigurarea unor căi uşoare de acces în orice zonă a site-ului şi. Cu toate că folosirea opţiunii ALT a marcajului IMG este de multe ori benefică şi recomandată. care informaţii îl interesează mai mult ş.3. aplicarea unei structuri ierarhice în cadrul site-ului.Crearea unităţii paginii. De aici şi problema designer-ului: care legături apar primele. însă există nişte lucruri de care trebuie să ţinem cont. În general fiecare pagină are o anumită metaforă. sunt şi cazuri când aceasta este contraindicată.d. Pentru că o pagină trebuie să transmită informaţie. 5. nu se cunoaşte intenţia vizitatorului. 101 . În primul rând. care trebuie legate direct din pagina de logo.

„Înainte” sau altele de acest gen. 4. Pentru a o creşte. Nu le legaţi pe toate la pagina principală. refoloseşte imaginile. Folosiţi metoda ierarhică de legare a paginilor. În fiecare pagină foloseşte şi navigarea pe bază de text. Nu folosi ca text de navigare cuvintele „Înapoi”. redu-le efectiv dimensiunea. O legătură la un director subliniaz-o cu "/". unele navigatoare îl încarcă în mod invizibil. 6. 3. Redu paleta gif-urilor. Ocoleşte animaţia. Include tag-ul &ltlinkrel=next href=&quot următorul html">. 13. Începe pagina cu text în locul unui grafic. astfel încât vizitatorul să-şi dea seama repede unde se află. de genul: „Vezi exemplu”. şi viteza de navigare în site. Nu face imagini care arată ca nişte butoane şi care nu sunt legate la nimic. Nu lega o pagină de ea însăşi. 10. Nu scala imaginile. Folosiţi ideea efectivă care face legătura. de multe ori. ca 102 . Sparge în mai multe tabelele mari. 5. 12. 11. 7. 2. în special dacă site-ul e mare. altfel navigatorul va căuta iniţial fişiere cu numele respectiv şi abia apoi directoare. 14.Tot de legăturile interioare depinde. Nu pune prea mult text într-o celulă de tabel. 16. însă poate deveni chiar şi enervant. „Înapoi la pagina principală”. Pentru exactitate este bine a specifica „Înapoi la cuprins”. 9. Nu crea fundături-pagini care nu au legături spre nici o altă pagină. ocoleşte folosirea tabelelor imbricate. la început e derutant. 15. Nu folosi ca text de legătură „Click here” sau „Apasă aici”. „Mai multe detalii” etc. iată câteva sfaturi succinte: 1. Din prima şi până în ultima pagină a site-ului este nevoie de prezenţa explicită a numelui sau adresei de e-mail. 8. deoarece textul din tabel se încarcă dintr-o dată tot.

Regula celor cinci degete. Daca ţi-ai realizat fişierele HTML cu un editor de tip WYSIWYG. este bine să existe cel mult 5 opţiuni. 103 .4.metodă de contact între cele doua părţi. Fii documentat. numai pe primele 5. după aceste secunde 50% din vizitatori apasă butonul BACK al navigatorului şi părăsesc site-ul. Include în fiecare pagină cele trei legături obligatorii: cuprins. Regula celor 3 click-uri. În caz contrar vizitatorul se va simţi rătăcit în pagină. restul fiind ignorate. e-mail şi legături inverse. va uita pe unde a fost deja şi nu va mai şti să revină la partea care l-a interesat. Intr-o înşiruire de tip listă. Alte reguli. Datorită structurii ierarhice a unei pagini. aceasta poate fi realizată prin prezenţa fişierului de index al site-ului. fă-ţi o idee despre cum ar trebui să arate pagina ta înainte de a te apuca de ea. În cazul în care pagina se încarcă în mai mult de10-20 secunde e bine să avertizaţi vizitatorul printr-un mesaj şi în plus secundele suplimentare trebuie să se justifice prin ceea ce pagina oferă în plus. Alte reguli pentru o pagină mai eficientă Regula celor 20 de secunde. în structurări. Foloseşte GIF sau JPEG în funcţie de tipul imaginii stocate. 60% din vizitatori le vor citi. Ai grijă la formatele grafice pe care le foloseşti. 5. încearcă apoi să vezi cum arată efectiv vizualizându-le cu Notepad-ul şi apoi şterge din ele ceea ce este în plus. încearcă prima dată să vezi câteva pagini. În orice loc din pagină trebuie să se poată ajunge prin maximum trei click-uri. fişier care trebuie să cuprindă toate fişierele constituente ale site-ului. oricum. Prima pagină trebuie să se încarce în cel mult 20 de secunde.

Verificaţi pagina cu opţiunea VIEW IMAGES a navigator-ului pusă pe OFF. este necesar să se renunţe la copierea oarbă a mostrelor găsite pe Web. de mesajul pe care pagina îl are de comunicat.În cazul JPEG-ului. de interactivitate etc. 104 . La atmosfera pe care o pagina trebuie să o aibă. din care să nu lipsească NetScape şi Internet Explorer. nu îl salva de mai mult de 4 ori în aceeaşi forma înainte de a-l pune în pagină. deoarece la acest tip de fişiere fiecare salvare înseamnă pierdere de calitate. expresiile folosite în text. Însă crearea acestora poate pleca de la îmbinarea unor exemple existente prin adaptarea lor la specificul sarcinilor concrete. Pentru personalizarea într-o măsură cât mai mare a paginii. prin crearea unor pagini proprii. incluzând fondul. e necesar să concure toate elementele paginii respective. Nu toată lumea este însă capabilă să realizeze cu totul ceva nou. în primul rând. elementele de interactivitate şi. ar trebui să fie dictate de scopul paginii. cele de grafică. Toate elementele unei pagini. Încearcă-ţi pagina pe cât mai multe navigatoare diferite. cuvintele. grafica. textul şi culoarea lui.

scripturi.posibil cea mai mare colecţie a CGIscripturilor în limba rusă.ht ml .w3. 7.animfactory. www. http://www.HTML 3. 9. http://werbach. http://www. A.download. 16. http://www. 8.Cgi Resources–cea mai plină arhivă a CGI-scripturilor.Script Locker.com/.edu/SDG/Software/Mozaic/WebSGML.com/web/wwwhelp.clickxchange.com/ . 5.ru . 15. unelte şi software.2.org/hypertext/WWW/MarkUp/Wilbur/ HTML 3.2.ro. http://www.uiuc.conţine legături pentru structura HTML 3.go. grupuri de discuţie.o colecţie de CGI .este o listă de legături către toate marcajele versiunii HTML3.org/pub/WWW/MarkUp/SGML/ .com/barebones.Tanenbaum Reţele de calculatoare. 4. 1997. www.ru/ .SoftQuad . utilizare.w3.ru/ .Hosting gratuit de la Agava Software.o listă de legături SGML: învăţare.org. www. http://www. 6. 10.cuprinde legături multiple către diverse resurse SGML.BIBLIOGRAFIE ŞI REFERINŢE UTILE 1.2 marcaje .O bibliotecă de animaţii.webclub.scripturi sunt multe şi uşor sesizabile. 13.ro/navigator/editlist/ -O listă de editoare.clickxchange. http://www.Web Host Directory. 18. http://www. 2.Navigatoare.2 Introducere . 17. http://www.com/sgml/wilbur/ALL. 3.Agora. 11. 105 . 14. http://www.notiuni.com .ncsa.webtechs.w3.SGML .shtml . 12.ici.cgi-resources. http://www.com/ . http://werbach.html.ro/navigator/navigatoare. http://www. Este comodă pentru începători .ici. http://www.O serie de scripturi utile în limba rusă.holm.

An de studii _________ 2..2. Informatizarea societăţii 5. Data naşterii: 5... LIMBI POSEDATE (A enumera cu unul din calificativele Excelent / Bine / Suficient / Slab) 3. SGBD „Oracle”. Codul grupei ____.Româna 3. ANUL 3. Domiciliul: 7..1.. Data completării_____________________ 106 . WindosME la nivel de operare liberă 4. CUNOAŞTEREA MIJLOACELOR INFORMATICE (a enumera domeniile şi nivelul de cunoaştere ) 4. 6. . Proiectarea . nr livretului ________________________ 6.1.2.. Nume: 2.1.4.Anexa 1. SO Windows NT . Supus militar. .. Alte informaţii 6. Starea socială: 6.Rusa 3. STUDII DENUMIRE SPECIALIZARE ŞCOALA ABSOLVITĂ. 5. ...1.. Forma recomandată a CV-ului CURRICULUM VITAE 1. Engleză 3. Germană 4. Sex: 4.3...... DATE GENERALE 1.Management informaţional.dezvoltarea sistemelor informatice 5.3. Telefon: ________8..2.. „FoxPro” 4.3. DOMENIUL DE INTERESE 5. Prenume: 3.2.

media la examenele de admitere. localitate. nr. 6. locul ediţiei. Adresa (microraion. categorie. nota. disciplina4. nr. bloc. număr de locuri). 4. paşaport. Cărţile unei biblioteci. examen 2. categoria. bloc. grad ştiinţific. 11. Adresa abonatului (oraş. Date despre Farmacie (№. titlu ştiinţific. Studii (nr. stradă. Suma Lista convorbirilor interurbane efectuate de persoana XXXXX . Denumiri sugestive de tabele şi liste 1. data naşteri). Nr. disciplina3. telefon). numărul de pagini). nota. telefon. examen 3. serală. № bilet. titlu ştiinţific.NPP. telefon. susţinute) Evidenţa frecvenţei semestriale a studenţilor grupei ZZZZ . disciplina 2. Specializarea selectată.NPP. nota. Examene (disciplina 1. disciplina2. localitate. colocvii (după plan. anul ediţiei. Bagajele pasagerilor rutei XXXX: Date despre rută/bilet (№ rută. nr. localitate. cod specializare. Farmaciile oraşului. total) 107 5. Date despre Policlinică (№.). 2. Taxa. Adresa(Oraş. de telefon conectate. strada. № bagaj. greutate. media). .NPP. disciplina 3.) Carte de telefoane. Lista concursanţilor . Email). 10. Costul unei minute. care conţine Date despre carte (denumirea cărţii. cod specializare. vechime muncă. nr. nr.NPP. concurs) Reuşita studenţilor unei grupe la sesiune . anul naşterii. Adresa (Oraş. apartament. disciplina 4. casei. media). stradă. tip staţie) Lista convorbirilor locale efectuate de persoana XXXXX . nr. locul de muncă.de la telefonul YYYYYY care conţine Data conectării. Abiturienţii USM . Lipse (motivate. telefon) Instituţii de învăţământ superior: Denumire. Rezultatele concursului (examen 1. staţie. Testări curente(disciplina1. Durata convorbirii (minute). total. stradă. 8. apartament). document. E-mail. republicane. Date despre pasager (NPP. Date despre telefon (nr. de telefon. data eliberării. %) Atestarea studenţilor grupei ZZZZ . care conţine Date despre abonat (NPP.Anexa 2. bloc. 13. Policlinicile oraşului. regim de lucru) Adresa (microraion. cod specializare. regim de lucru). codul. cod specializare. fără frecvenţă. Durata (minute). Număr de publicaţii (internaţionale. 12.(NPP. oraşul. 3. nota) Lista profesorilor catedrei. grad ştiinţific. universitare). 9. strada. Date despre profesor XXX: NPP. nemotivate. Date despre autor . media din documentul de studii. punctul unde urmează). nota. categorie. data naşterii. disciplina5. 7.de la telefonul YYYYYY care conţine Data convorbirii. Studenţi(secţia de zi. 14. suma.NPP.

24/24). anul transmiterii în exploatare). Cafenele Internet în or. Film(denumire. unitate de măsură. regim de lucru (zi. Chişinău: Denumire. telefon. Scanare. Deviere de la normă. Cost. ora. serală. Norma (minimală. Vechime (anul procurării.) 18. caracteristici (frecvenţa procesor. adresă. fără frecvenţă. Wincester). cod. Suma uzurii. adresa. noapte. cod. preţ unitar. 20. 17. cantitate. Soldul materialelor la depozitul XXXX: Denumire material. data rulării. telefon. maximală). 19. studenţi(secţia de zi. anul transmiterii în exploatare. Facultăţile USM: Denumire. catedre. Vechime (anul procurării. Tehnica de calcul a USM: Denumire. specializări. total) 16. memorie operativă. %uzurii) 108 . nr. Tarife servicii prestate (Internet. instruire etc. Fondurile fixe ale întreprinderii XXXXX: Denumire. Filme ce rulează în cinematografele oraşului: Denumire. CD-Writer. costul biletului). nr.15. nr. Cantitate.

2. Alinierea Formatarea caracterelor.2.2.3. Denumirea temei Introducere. 5.4. Marcaje descriptive 1. 1.1 Tabelele–ca mod de prezentare a web-paginilor 5. 1.1. Titluri.Anexa 3. Spaţierea din stânga.2. Încadrarea (Frame) Operarea cu Tabele.1.3. Texte preformatate Organizarea internă a textului.1. Mărimea fontelor. 2.A. Marcaje de structura documentului. subtitluri. 3. 3.2.3. 5. Stiluri logice (redate implicit prin nume) Formatarea alineatelor. 3.2.1. 4.2 Structura generală a unui tabel 5.1.2. Alinierea paragrafelor (alineatelor) la stânga. Stiluri fizice (redate prin valorile parametrilor) 2. Exemplu sugestiv de structurare a site –ului de explorare Nr d/o 1.D 2. Liste marcate 4. dreapta. Aranjarea textului în coloane 4. 1. Întreruperea forţată a linei în cadrul alineatului. 109 .5.4 Grupare de linii (titlu comun din stânga) Ş.informaţii pentru motoarele de căutare 1. dreapta. 4.4.3 Titlu comun deasupra mau multor coloane 5. Sintaxa comenzilor HTML. la ambele margini 3. Liste numerotate 4.M.2. Liste de definiţii 4. (Meta) . Tabularea 3.

3.2.2.2.1. Descrierea tehnologiei Fizica proceselor Priorităţile tehnologiei infraroşu Neajunsurile tehnologiei 1. Clasificarea aparaturii radio 2. Reţele infraroşii 1.1. Domenii de utilizare II. Introducere.3. Exemplu de structură a site–ului creativ TEMA: Reţele infraroşii şi cu microunde I.2. Caracteristica reţelelor cu microunde 2.2. Domenii de utilizare 110 . Fizica proceselor 2. Introducere. scurt istoric 1. Reţele cu microunde 2.1. concepte generale 2. Neajunsurile tehnologiei 2.Anexa 4.2.2.

4. UTILIZĂRILE REŢELELOR DE CALCULATOARE 1. Reţele corporative (pentru persoane juridice) 1.2.1.3. modul de gestiune. Reţele locale 1.3.2.3.2.3.2. Primitive de serviciu 1.4. Relaţia dintre servicii şi protocoale 1. Reţele radio 1. Problemele proiectării 1. 1999.5.Anexa 5.2.4. PROGRAMELE DE REŢEA 1.3. Reţele larg răspândite geografic 1.2.5.1.4.1.2.3.4.1. Bazele reţelelor de calculatoare. GENERALITĂŢI 1.3.1.4.3. CONCEPTUL REŢELELOR DE CALCULATOARE 1. Comparaţia modelelor OSI şi TCP/IP 111 . O listă sugestivă de teme pentru site-urile creative la cursul „REŢELE DE CALCULATOARE” (vezi A. Sisteme deschise şi problemele standardizării 1.1.1.5. Ierarhiile de protocoale şi funcţiile nivelurilor 1. TAXONOMIA REŢELELOR DE CALCULATOARE 1. Structura fizică şi componentele unei reţele 1.4. Modelul de referinţă OSI 1.Agora.4. CISCO Internetworking Technology Overview etc) 1. Reţele pentru persoane fizice 1. Reţele de calculatoare.3.3. Modelul de referinţă TCP/IP 1. 1997.3.2.1. Definiţia reţelelor de calculatoare 1. Teora.5. Cerinţe faţă de reţelele moderne 1. Reţele metropolitane 1.Tanenbaum.2.5.1. Alte clasificări (după topologie.2.4.1. de transmitere) 1. Interfeţe şi servicii. Servicii orientate pe conexiuni şi servicii fără conexiuni 1. Organizaţii internaţionale de standardizare în telecomunicaţii şi Internet 1. MODELE DE REFERINŢĂ 1.

3.7.8.2. 2.1.6. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2.2.7. Fast Ethernet şi 100VG-AnyLan 1.7.7. EXEMPLE DE REŢELE 1.6. X-29) 1. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.5.7.5.2.1. SMDS–Serviciul de Date Comutat Multimegabit 1. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2. ARPANET 1.2.1.1. NIVELUL FIZIC 2.5. Cablul torsadat 112 . ISDN de bandă largă 1. Retransmiterea cadrelor 1. X-28.8. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.6.7. semnale.4.5. Mediul magnetic 2. Structurarea reţelelor 2. REŢELE DE MARE VITEZA 1.1.2.5.8.1.3.7. linii şi canale de comunicaţii 2.1.8. MEDII DE TRANSMISIE 2. HSSI (HIPI) 1.1.7. Comunicarea X-25 cu terminale neinteligente (X3.3.2.1. Novell NetWare 1. FDDI 1. Token Ring 1. UltraNet 1.1.4.3.5.3.7. Internet 1.4.7.1.1.2.5. Gigabit Token Ring 1.2.2. Mesaje. Echipamente de conversie a semnalelor -modem-uri. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.6. NSFNET 1. ReţeleX-25. Ethernet 1.8.1.5. Token BUS 1.5.4. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2.7.8.

4. ISDN DE BANDĂ INGUSTA 2.3. SISTEMULTELEFONIC 2. Servicii de comunicaţii personale 2.4.5. Comutatoare 2.3.3. Fibre optice 2.2.4.3. Servicii oferite nivelului reţea. ISDN DE BANDĂ LARGĂ ŞI ATM 2.1. Telefoane celulare digitale 2. Încadrarea.2. Sateliţi de joasă altitudine 2.6. Arhitectura sistemului ISDN 2.5.3. COMUNICAŢIILE FĂRĂ FIR 2. Perspectivele N-ISDN 2.3.5.2. Trunchiuri şi multiplexare 2.3. Sateliţi versus fibre optice 3. Controlul fluxului 113 . Transmisia radio 2. 2. Spectrul electromagnetic 2. Circuitele virtuale în comparaţie cu circuitele comutate 2.2. Transmisia prin microunde 2.5.3.6.1. SATELIŢI DE COMUNICAŢIE 2.7.3.5.1.3.2.4.2.7. Controlul erorilor.1.4. Structura sistemului telefonic 2.6. Interfaţa ISDN.4.3.2.5.2. Transmisia de unde luminoase (laser) 2.8.8. Cablu coaxial de bandă largă 2. Transmisia în reţelele ATM 2. RADIO CELULAR 2.2.8.2. Undele infraroşii şi milimetrice 2.2. Comutatoare ATM 2. Cablu coaxial în bandă de bază 2. Telefoane fără fir 2. Sateliţi geosincroni 2. Telefoane celulare analogice 2.1.1. NIVELUL LEGĂTURĂ DE DATE 3.4.3. Servicii ISDN 2.4.3.4. Buclele locale 2.1.3.7.1.7.4.5.

Protocoale cu acces multiplu şi detecţie de purtătoare –CSMA 4.2. Coduri corectoare de erori.3.4. Punţi de la 802-x la 802-y 4. SUBNIVELUL DE ACCES LA MEDIU 4.2.3. Radioul celular digital 4.1. Protocoale pentru reţele LAN fără fir 4.1.3.4. EXEMPLE DE PROTOCOALE ALE LEGĂTURII DE DATE 3.2.1. Punţi cu dirijare de la sursă 114 .4. Nivelul legătură de date la ATM 4.5.2.3.3. Standardul IEEE 802-6: Magistrală duală cu coadă distribuită 4.3.5.1. Compararea punţilor 802 4.2.3. Tipuri de punţi 4.Controlul de nivel înalt al legăturii de date 3. protocoale cu conflict limitat 4. Detectarea şi corectarea erorilor. Standardul IEEE 802-2: Controlul legăturii logice 4. SLIP-Serial Line IP 3.3. Nivelul legătură de date în Internet 3.2. STANDARDUL IEEE 802 PENTRU LAN-URI ŞI MANURI 4.1.3.2.5. Standardul IEEE 802-4: LAN de tip jeton pe magistrală 4. Standardul IEEE 802-3 şi ETHERNET 4.3.3.2.1.6.3.1.3. Protocoale cu acces multiplu cu divizarea frecvenţei 4.2.3.3. SDLC. INTERCONECTAREA REŢELELOR CU AJUTORUL PUNŢILOR 4. Standardul IEEE 802-5: LAN de tip jeton pe inel 4. Coduri detectoare de erori 3.3.5. PPP . ALOHA 4.1.3. PROTOCOALE CU ACCES MULTIPLU 4.1.2.1. HDLC .4.2.protocol punct-la-punct 3. Protocoale fără coliziuni.1. Punţi transparente 4.

4. Trimiterea multiplă în Internet.4. Protocolul IP. 5.3.3. IP mobil.2. Subreţele 5. Controlul congestiei la transmisia multicast 5. ALGORITMI PENTRU CONTROLUL CONGESTIEI 5. Inundarea 5. NIVELUL REŢEA ÎN INTERNET 5. 5.2.1.3.1. Dirijarea în reţele interconectate.4. Principii generale ale controlului congestiei.3. Dirijarea pe calea cea mai scurtă. Formatele celulelor. Ziduri de protecţie. Protocoale de control în Internet.4.3.3.4. 5.1. pentru porţi externe: BGP 5. Adrese IP. Specificarea fluxului 5. Trecerea prin tunel. 4. Dirijarea bazată pe flux.4.2. Interconectarea reţelelor fără conexiuni 5. Dirijarea folosind starea legăturilor 5.1.multicast 5.1.4. Dirijarea pentru calculatoare gazdă mobile 5. Controlul congestiei în subreţelele bazate pe circuite virtuale. Pachete de şoc 5. Dirijare ierarhică.2. Formarea traficului. 5. Controlul fluctuaţiilor.4. NIVELUL REŢEA ÎN REŢELE ATM 5. Dirijarea şi comutarea 115 . Punţi aflate la distantă REŢELE DE SATELIŢI 5.2.2.6.5.2.3.2. Dirijarea prin difuzare. Protocolul de dirijare folosit de porţile interioare: OSPF.2.1. Principiul optimalităţii.3. Circuite virtuale concatenate. Fragmentarea pachetelor. NIVELUL REŢEA Servicii fumizate nivelului transport Organizarea internă a nivelului reţea Subreţele bazate pe circuite virtuale şi datagrame ALGORITMI DE DIRIJARE A PACHETELOR 5.5.1. Stabilirea conexiunii.1.3. 5. Politici pentru prevenirea congestiei 5.3.1. Dirijarea cu trimitere multiplă . 5.2. Dirijare cu vectori distanţă. CIDR Dirijarea fără clase între domenii 5. INTERCONECTAREA REŢELELOR 5.1.4.

3. AAL2.3.5. Administrarea conexiunii TCP 6. Probleme de performanţă în reţelele de calculatoare 6.1.1.5. Categorii de servicii. Modelarea traficului şi politici de trafic 5. Modelul Serviciului TCP. Eliberarea conexiunii 6.7.5. UN ROTOCOL DE TRANSPORT SIMPLU(SMTP) 6. Acordarea diverselor tehnologii de transport în reţele eterogene 6.5. Calitatea serviciului. AALl.3. Antetul segmentului TCP.1.4.4. Prelucrarea rapidă a TPDU-urilor 6.1.2. AAL3/4. Măsurarea performanţelor reţelei 6.3.2. NOŢIUNI DE BAZĂ DESPRE PROTOCOALELE DE TRANSPORT 6.1.3.4. Protocolul de transport al datagramelor UDP 6.5. LAN-uri ATM 6.protocol orientat pe conexiuni. TCP şi UDP fără fir 6. Proiectarea de sistem pentru performanţe superioare 6.5.3.5.5.3. Politica TCP de Transmisie a datelor 6. Refacerea după cădere 6.2. Controlul fluxului şi memorarea temporară 6.1. Protocoale pentru reţele gigabit 7.3. Adresarea.5.6. Controlul congestiei în TCP 6.4.3.5. NIVELUL TRANSPORT 6.3. AAL5 . NIVELUL APLICAŢIE 116 . SERVICII FURNIZATE NIVELURILOR SUPERIOARE 6. Structura nivelului de adaptare ATM 6. PROTOCOALELE AAL DE NIVEL ATM 6. Stabilirea unei conexiuni. Multiplexarea.5. ELEMENTE DE PERFORMANŢĂ 6.4. Administrarea contorului de timp în TCP 6.2.3. PROTOCOALE DE TRANSPORT (TCP-UDP) 6. specific serviciului 6.3.1. Controlul congestiei.2.4.2. O comparaţie a protocoalelor AAL 6.3. SSCOP .2.1.3. Protocolul TCP 6.

Înregistrări de resurse 7.8.6.7. Cum este implementat USENET 7.1. Agentul utilizator 7.7.6.5.5.4. Algoritmi cu cheie publică 7.1. USENET din punctul de vedere al utilizatorului 7.2. Compresia datelor 7. MBone .2. Algoritmi cu cheie secretă 7. POŞTA ELECTRONICĂ 7.5. MIB .3.4.2. Formatele mesajelor 7.2. DNS . Notaţia sintactică abstractă 7.1.1. MULTIMEDIA 7. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7.5. Criptografia tradiţională.8.3.Coloana vertebrală pentru trimitere multiplă 117 . Video 7.5.4. Aspectele privind clientul 7.4.5. Java Script 7. Scrierea unei pagini de Web în HTML.1.3.1. Java.SISTEMUL NUMELOR DE DOMENII 7.8. Modelul SNMP. ŞTIRI USENET 7.1. Arhitectură şi servicii 7. Audio. Regăsirea informaţiilor pe Web 7.4.7.7.4.3.7.Structura informaţiei de administrare 7.3.2.Baza de informaţii de administrare 7.7.1.4.5.3. Protocoale de autentificare 7.1.1.4.1. WORLD WIDE Web 7.8.6.4. SECURITATEA REŢELEI 7.1.5. Semnături digitale 7. Confidenţialitatea poştei electronice 7. Spaţiul de nume DNS 7.2.2.2. Aspecte privind serverul 7. 7.4.1. Video la cerere 7. SMI . Servere de nume 7. Transfer de mesaje 7. Protocolul SNMP 7. Două principii criptografice fundamentale.8.3.3.

Arhitecturi de bază (RISC. Gestiunea proceselor şi procesoarelor 9. servere. 9. mainframe.2.3.2.5. Criterii de selectare a SO de reţea 9. Gestiunea memoriei 9.3.2.4.3. Generalităţi 9.4.ieşire 9.2.2. Învelişuri de reţea şi mijloace încorporate 9. rutere) 8. superservere. Familia SO de reţea Unix 118 . Lansarea procedurilor la distanţă 9. SISTEME DE OPERARE DE REŢEA 9.2.1.1.2. Tehnologii avansate de proiectare a SO 9. Servere şi servicii de fişiere 9.5.1. Cerinţe faţă de SO moderne 9. SO de la egal la egal 9.5. CALCULATOARELE. Cerinţe generale faţă de calculatoare 8.1.3.8. Semantica distribuirii fişierelor 9.5.2.3.4.3.1.3.1.1.3.1.2.2.1.2. Funcţiile SO de intrare .CENTRE DE PRELUCRARE A DATELOR ÎN REŢELE 8. Taxonomia calculatoarelor conform funcţiilor în reţea (calculatoare personale.4.3. SO cu servere rezervate 9. Structura SO de reţea 9. Primitive de transmitere a mesajelor 9. Problemele realizării SO de reţea. Definirea SO locale 9. Privire de sinteză asupra familiilor SO de reţea 9.5. staţii de lucru.2. Funcţiile SO de organizare a lucrului în reţea 9.1.4. SO NetWare a companiei Novell 9.3. CISC etc) 9. Funcţiile sistemului de fişiere 9. Familia SO de reţea Windows NT a companiei Microsoft 9.4.1.4. Funcţiile SO de gestiune a resurselor locale 9.3.

T. V. Chişinău. 60 119 . Comanda 62. Coli de tipar 7.4. Tirajul 50 Centrul editorial al Universităţii de Stat din Moldova MD 2009.Sibirschi Denumirea lucrării: Explorarea HTML Tehnoredactare computerizată T Bragaru Bun de tipar 11-03-2002.2.Sibirschi.Autori: T. Formatul 60 x 84 1/16 Coli editoriale 4. Mateevici. str.Bragaru. mun.

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer: Get 4 months of Scribd and The New York Times for just $1.87 per week!

Master Your Semester with a Special Offer from Scribd & The New York Times