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

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

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

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

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

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

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

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

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

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

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

avem o organizare de tip reţea a informaţiei. Învăţarea unei noţiuni noi se face prin asocierea ei cu altele vechi. 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. oferită de cartea scrisă. de cele mai multe ori. dar înlătură toate limitările contextuale. Hipertextul menţine capacitatea de stocare a unei mari cantităţi de informaţie. presupunând o căutare care. Detaliile sunt inserate în text. detalieri separate ale unor concepte. de asemenea. însă o organizare foarte versatilă. 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. în reţea. se poate spune că memoria noastră de lungă durată este de tip asociativ. În acest mod. Revenirea la subiectul anterior este. 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. "ştiute". este plictisitoare. Bineînţeles că cea mai adecvată formă de organizare a informaţiilor ştiinţifice este cea asociativă. abătând atenţia cititorului de la general către specific. În contrast cu liniaritatea 14 . 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ă. enunţuri şi demonstraţii. greoaie. Mutarea de la un subiect la altul este greoaie. stare de spirit. Altfel spus. care se modifică rapid în funcţie de factori psihologici (motivaţie. care este cea mai apropiată de modul uman de a gândi. stimuli externi) sau chiar fizici. în text există referiri la alte subiecte.pagina unde pot fi regăsite. formând o reţea complexă. Mai mult. definiţii. cititorul poate căuta direct un anumit subiect interesant. trimiteri în josul paginii la bibliografie sau la anexe. De asemenea.

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

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

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

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

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

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

Standardizarea oficială a limbajului HTML este făcută de Consorţiul WWW. de exemplu.org/. devine posibil ca orice program de navigare să poată să citească şi să formateze orice pagină Web. 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. Elemente de bază ale documentelor HTML 21 . păstrează informaţia în structuri de date separate. Posibilitatea formatării paginii recepţionate este foarte importantă. Procesoarele de text pentru Macintosh.6. 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.w3. Astfel de abordări îngreunează sarcina standardizării limbajului HTML.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. 3. care să interpreteze comenzile de marcare. Acest tip de sisteme pot să memoreze fişierele utilizând marcaje ascunse pentru ca formatarea să se poată reface ulterior. dar diferiţi furnizori de navigatoare şi programe de navigare au adăugat o serie de extinderi proprii. 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. Specificaţia curentă a limbajului HTML se poate consulta pe serverul http://www. 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. Nu toate procesoarele de texte funcţionează aşa. Prin standardizarea şi includerea comenzilor de marcaj în fiecare fişier HTML.

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

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

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

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

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

holm.http://www. va trebui să întreţineţi şi să actualizaţi site-ul. Promovarea site-ului Pentru ca site-ul dvs.3. dacă el nu este adus la cunoştinţa publicului.com/. Nici cel mai bine realizat site Web nu valorează nimic. şi aceşti paşi trebuie urmăriţi cu maximă atenţie. trebuie să începeţi o campanie de promovare. 3. să poată fi văzut de cât mai mulţi vizitatori.Hosting gratuit de la Agava Software. .7. Promovarea unui site Web este o acţiune complexă şi de durată. Unele planuri şi oferte de hosting vezi: . .clickxchange.ru/. 27 .În final. . 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.http://www.Web Host Directory. să revină. dacă vreţi ca vizitatorii dvs.

De exemplu. în funcţie de motorul de căutare ales. 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. de promovare.Creaţi o bază de date care să includă acţiunile dvs. 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. 28 .

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

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

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

sau IE) pentru a edita codul-sursă. &nbsp forţează spaţii multiple.â ă ä å ç ñ ø ß ¿ £ ¢ © ® &acirc. " &quot. 32 . se poate folosi pentru a scrie o serie de paragrafe cu alinieri constante ale elementelor ghilimele &nbsp..&#195. &ntilde. &aring. Modul de lucru 1. &ccedil. Caracterele speciale mai pot fi introduse prin codul lor hexazecimal în forma: &#+ codul hexazecimal+. &pound. De exemplu &#222. Notă.3. &copy. &reg. a mic cu accent circumflex a mic cu tildă a mic cu două puncte (umblaut) a mic cu inel (ring) c mic cu sedilă n mic cu tildă o mic barat (cu slash) s-z mic ligaturat semnul de întrebare inversat liră sterlină cent simbolul de copyright simbolul de marcă înregistrată chiar dacă în codul-sursă avem mai multe spaţii. &oslash. navigatorul afişează unul singur. Prima sarcină de explorare. &atilde.1. &auml. Pornim un editor de texte simplu (Notepad. &cent. &szlig. 4. &iquest.

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

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

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

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

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

<!-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

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

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

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

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 . 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 .Color = <body atribute> </body> bgcolor = backgro und = text = link = vlink = alink = Culoarea (dată prin nume sau valoarea RGB).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 .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".

dar ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t. 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 . ca în codul-sursă. <b> adică aşa cum arata el în</b> codul sursa din Notepad Afişează din linie nouă textul preformatat. ca în codul sursă.<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. 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. dar nu ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t.

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

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 .

Aria de acţiune a atributelor.05 2.----------lapte 2.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.3. Exemple de explorare Scop.50 0. culori şi efecte speciale a fontelor. Text preformatat <HTML> <HEAD> <BODY BGCOLOR=PINK><FONT COLOR=#0000FF> <TITLE> Exemplul 4.------------. • Exemplul 4.55 48 . Studierea marcajelor de formatare fizică şi logică a caracterelor – dimensiuni. Text preformatat<h4> </HEAD> <PRE> produs pret-cost transport valoare --------.-----------. Text preformatat </TITLE> <h4>Exemplul 4.

<BR><TT> Acest text </TT> este afişat cu caractere de tip monospaţiu . <BR>Acum este afişat un <SUB> indice </SUB>. Figura 3.<BR> Formula apei este<B>H<SUB>2</SUB>O</B> 49 .<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>. iar acum un<SUP>exponent</SUP>. <BR> <I> Acest text </I> este inclinat. <BR><U> Acest text </U> este subliniat.50 06.15 Rezultatul rulării exemplului 4 vezi mai jos figura 3. Rezultatul rulării exemplului 4 Exemplul 5.50 0.00 oua 6.00 </PRE> </BODY> </HTML> 2.carne 42. <B><U>Acest text</U></B>este subliniat si ingrosat. Elemente de formatare caractere <HTML> <BODY BGCOLOR="YELLOW"> <HEAD> <TITLE>Exemplul 5. Elemente de formatare caractere</TITLE> </HEAD> <B> Acest text </B> este ingrosat.15 44. <BR><S>Acest text</S> este barat.

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

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

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

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

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

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

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

diferite de cele din exemplu.14. care ar conţine toate trei tipuri de 57 . 2. Rezultatul rulării exemplului 7 15. Figura 6. 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.

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

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

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 .2. 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. vezi p.Tabelul 7. tabelul 4.

center. în unele navigatoare nu funcţionează. dar puteţi folosi height în TD Celulă de tabel Înălţimea celulei.doar în IE Linie de tabel Culoarea fondului pentru întreaga linie (valoare RGB sau nume culoare) Alinierea conţinutului celulelor (left. dacă pe aceeaşi linie (TR) daţi din greşeală 2 valori diferite pentru height în TD. implicit left Înălţimea liniei (în pixeli).doar în IE Ajustarea riglelor în tabel . 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 . 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 .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. 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 : . implicit left Alinierea conţinutului celulei pe verticală: top (sus). middle (mijloc). dar conţinutul va fi centrat şi îngroşat (bold).în loc de TD. implicit middle Aliniază celulele cu linia de bază a textului adiacent Aliniază coloana faţă de un anumit caracter (implicit caracterul ".împreună cu TD pe aceeaşi linie Text explicativ asociat tabelului Alinierea textului (top = implicit.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. right). bottom. bottom (jos). center. left. right) ALIGN = BASELINE ALIGN = CARACTER ALIGN = JUSTIFY COLSPAN = ROWSPAN = NOWRAP <TH> </ TH> - <CAPTION ATRIBUTE> </CAPTION> ALIGN = 62 . .

de ex. Folosirea atributului ALIGN=right plasează tabelul în marginea dreaptă. textul care urmează tabelului "curge" pe lângă acesta (tabelul este aliniat în stânga ferestrei navigatorului. iar textul "curge" în partea stângă a tabelului Atributele de culoare ale fondului pot fi diferite pentru orice element de tabel. Comenzile COLGROUP. în pixeli. <TABLE RULES = GROUPS>. % 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. Dacă plasăm atributul ALIGN=left în marcajul TABLE. atunci acţionează ultima definiţie. Atributele de aliniere pot fi plasate în marcajele ce delimitează liniile şi în marcajele ce definesc celulele. TBODY.<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. dar uneori demarcarea făcută de ele este folosită de alte marcaje. 63 . THEAD. iar în dreapta sa se afişează textul. Dacă culoare se defineşte de câteva ori. TFOOT nu sunt neapărat necesare într-un tabel.

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

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

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

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

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

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

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

-parent = încarcă pagina în fereastra părinte. Tabelul 8. fără nume. 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). -self = încarcă pagina în cadrul curent. Frunzele acestor arbori pot fi documente plate sau liniare.arborescente. -blank = încarcă pagina într-o fereastră noua. 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ă. între ghilimele nu trebuie să existe spaţii. 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. TARGET = " NUMECADRU" 73 . care adesea au referinţe inverse (către părinţi). deasupra altor ferestre de pe ecran. este valoarea implicită.

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. nume-nou-server.com/alt-site/": putem specifica legături relative spre fişiere situate pe alt site de pe alt server.com/nume-director pentru fiecare legătură în parte.com.nume-server.com/nume-director/).nume-server. Dacă am avea legături absolute pentru fiecare. În cazul unui site de dimensiuni mici. dacă vom dori să mutăm site-ul pe un alt server. nu trebuie să modificăm nimic. nu avem nevoie de o organizare mai complicată a site-ului (cu multe directoare). Este folositor dacă în fişier avem majoritatea legăturilor relative spre celalalt site şi site-ul este administrat tot de dvs.alteservere. • • • Comentarii utile. care conţine doar câteva pagini (fişiere).nume-server. Referinţele relative au câteva avantaje: avem mai puţin de tastat în codul sursă: nu mai tastăm http://www. 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 cu http://www.<BASE ATRIBUTE> HREF = "ALT-URL" "alt-URL"= "http://www. legăturile vor funcţiona şi în timp ce construim site-ul într-un director pe hard-disc. 74 . ar trebui să înlocuim http://www. care se poate ataşa ca atribut aproape oricărei instrucţiuni.

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

1"><b>Ancore</b></a><b> </b></li> <li><a href="#3. Cuprins de nivelul II. <BR>cu atribute name . Elemente textuale </h3> <ul> <li><a href="#2.1"><b>Divizori</b></a><b> </b></li> <li><a href="#2.2.1"><b>Titlul paginii </b></a><b> </b></li> <li><a href="#2.4"><b>Liste </b></a></li> <li><a href="#2..1">2.2.</p> </body> </html> Rezultatul afişării exemplului 11 vezi mai jos.3"><b>Alineate</b></a><b> </b></li> <li><a href="#2. ancore</title> </head> <body> <h3> 2.1.">2.2"><b>Legare de texte </b></a><b> </b></li> </ul> </li> </ul> <h4><a name="2. <h4><a name="2.2. figura 10.Elemente textuale</a> </h4> In continuare urmeaza textul sub titlul 2. Cuprins de nivelul II.5"><b>Tabele </b></a></li> </ul> </li> <li><a href="3"><b>Crearea legaturilor</b></a><b> </b><ul> <li><a href="#3.content perechi.Exemplul 11.Titlui paginii </a> </h4> <p>:In general in antetul unei pagini Web..2"><b>Titluri si subritluri</b></a><b> </b></li> <li><a href="#2. 76 . intre marcajele <BR> HEAD si /HEAD.2.2.. ancore <html> <head> <title> Exemplul 11.2"><b>Blocuri de structura</b></a><b> </b><ul> <li><a href="#2. exista mai multe marcaje META.

Titlui paginii In general in antetul unei pagini Web. intre marcajele HEAD si /HEAD. Care este comanda ce permite afişarea conţinutului referinţei într-o fereastră bine determinată? 8. 2. Ce este o legătură.1. 5. Figura 10. 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.4 Întrebări de autocontrol şi exerciţii 1. 2.5. cu atribute name-content perechi. dar nu şi invers”. 4.2...Elemente textuale In continuare urmeaza textul sub titlul 2. Cum se va scrie un spaţiu în identificarea referinţei? 77 .exista mai multe marcaje META. 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.. 7. Rezultatul afişării exemplului 11 4. 3. 6.

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

O serie de gif-uri animate interesante puteţi găsi pe site-ul www. Exemple de explorare– vezi nr 12. Tabelul 9. lucru contraindicat (nu e bine să abuzezi de timpul şi aşa limitat al vizitatorului). 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 . mai ales dacă au o dimensiune mare.com.Încărcarea imaginilor durează. 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. O imagine poate fi declarată ca legătura către alt document HTML. deoarece. încetinesc încărcarea paginii. din care cauză unele navigatoare permit setarea lor cu sau fără afişarea imaginilor. În ultimul caz în locul imaginii poate fi afişat un text alternativ (atributul „alt”). Marcajele utilizate vezi tabelul 9.animfactory. De cele mai multe ori este preferabil să nu folosim imagini interne.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. este bine să folosim un tabel în celulele căruia să afişăm imaginile micşorate (prin precizarea lăţimii şi înălţimii). de exemplu).

. Introducerea sunetelor In documentele HTML se pot introduce şi fişiere care conţin sunete. pentru că asigură o compresie şi o redare bună. folosindu-se marcajul <a> pentru crearea unui link spre fişierul extern. 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. bottom (jos) Înălţimea imaginii (în pixeli sau %) Lăţimea imaginii (în pixeli sau %) Mărimea chenarului din jurul imaginii (în pixeli). 4. left (stânga = implicit). 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>. ..6.mp3. 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.align = Alinierea imaginii în pagină: right (dreapta). De exemplu. în timp ce aceeaşi melodie în format mp3 va avea 3-5 MB !!! 80 . Formatele uzuale de reprezentare a sunetelor permit lucrul cu fişiere cu extensiile: .2.wav.mid . middle (mijloc). Alinierea elementelor din jurul imaginii: top (sus). .au.

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

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

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

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 .7.3.1. precum şi la sfârşitul p. Tabelul 10.scripturi utile vezi referinţele bibliografice.

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

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

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

S.Colecţii de scripturi utile vezi referinţele bibliografice.7. Demonstraţi înregistrarea vizitatorilor site-ului.de Politie<OPTION>Acad.M<O PTION>USAM <OPTION>Acad.M.<OPTION>U.T. În cadrul realizării sarcinii creative elaboraţi codul HTML al formei de înregistrare a vizitatorilor site-ului dvs. Prin ce diferă un radio-buton de un buton checkbox? 8. 88 . 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.3.1. Date generale. 2.3. 4. figura 12. precum şi la sfârşitul p. anexa nr.<OPTION>A. 10. 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.M. 5. (forma recomandată–vezi compartimentul.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. 6.7. 9. În cadrul realizării sarcinii de explorare descrieţi marcajele HTML de construire a formularelor de introducerecolectare date. 4.E.1). Întrebări de autocontrol şi exerciţii 1.S. 3.

prin a 89 . 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. FRAME) O altă modalitate de structurare a unui document hypermedia este împărţirea ferestrei navigatorului în mai multe zone distincte (frame–cadru.8. Rezultatul executării exemplului 13 4. fereastră). FERESTRE (CADRE. în fiecare dintre acestea rulând diferite documente (fişiere).Figura 12.

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

utilizat de marcajul <a href = "url" target = nume> Opţiuni pentru bara de derulare: yes (da). 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.<frame atribute> src = " url " name = Definiţia unui cadru Sursa cadrului Numele cadrului. auto (dacă este nevoie). implicit "auto" scrolling = noresize marginheight = marginwidth = <noframes> </ noframes> <iframe atribute> </ iframe> src = " url " name = height = width = frameborder = scrolling = 91 . no (nu). 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. auto (dacă este nevoie). implicit yes) Opţiuni pentru bara de derulare : yes (da). no (nu).

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

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

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

95 . 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. Alternate reprezintă mişcarea textului de la o margine la alta.Comportamentul sau felul de mişcare a textului <behavior=#> #=scroll. middle(mijloc). bottom(jos) <font size=6> <marquee align=# width=200>Bine ati venit!</marquee> </font> Culoare fond <bgcolor=#> #=RRGGBB sau nume <marquee bgcolor=aaaaee>Bine ati venit!</marquee> Dimensiune text rulant <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa> Bine ati venit! </marquee> Marginile mişcării <hspace=# vspace=#> Bine <marquee hspace=20 vspace=20 width=150 bgcolor=#ffaaaa align=middle> Ati Venit!</marquee> Salutari din Moldova. slide. alternate Scroll este mişcarea obişnuită a textului dintr-un capăt în altul. 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).

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

Tabelul 12.site. Putem face chiar ca un anumit stil să poată fi aplicat numai cu o anumită instrucţiune. centimetri(cm). numai pentru stiluri Specifică un anumit stil Specifică un anumit stil Tabelul 13. inch(în). mai ales pentru site-uri mari. iar altele să poată fi aplicate cu mai multe instrucţiuni. Este modul cel mai recomandat. 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ă. Se poate întâmpla ca unele caracteristici specificate sub forma prescurtată să nu funcţioneze. Unele atribute din tabelul 12-13 pot fi specificate şi sub o forma prescurtată. pixeli(px) 97 . 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. În aşa caz folosiţi forma explicită.

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

Fişierul color.} h5{ color: rgb(51.0.51.102). color: white.51).102).} h3{ color: rgb(51.} SELECT{border-color: rgb(0.51.} BUTTON{background-color: rgb(51.0). color: black.255. table-border-color-dark: rgb(0. color: rgb(51.} a:visited{color: rgb(51.} CAPTION {color: rgb(51.51.0.51).} HR{ color: rgb(51.0).0).} TEXTAREA{border-color: rgb(0. border-color: rgb(0.0).} TABLE{ table-border-color-light: rgb(51.102).51).51).51.51.51).} a:active{color: rgb(153.51).51. color: black.0).51).51.51.} TH{ color: rgb(51.51). color: black.} h4{ color: rgb(51.css (definirea culorilor) a:link{color: rgb(102.} h2.51).0).51.0.102.0.4 mm.0).} În cadrul sarcinii de explorare şi creative construiţi şi utilizaţi un fişier CSS.} TD{ border-color: rgb(0. background-color: rgb(255.51.} LEGEND{color: rgb(51.0. Demonstraţi acţiunea lui. border-color: rgb(51.51.51.51).Notă: 72 pt=1 inch = 25. care ar instala aceiaşi parametri pentru ambele site-uri.0.0. un font de dimensiunea 14 pt înseamnă că sunt 14 puncte între partea superioară a literei M sau h şi partea inferioară a literei g sau y. • Exemplul 14.0.255).} h1{ color: rgb(51.51).51. marquee{color: rgb(51. border-color: rgb(0.51.} body{color: rgb(0.0).51.51). 99 .0.} h6{ color: rgb(51.} FIELDSET{border-color: rgb(0.51).0).

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

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

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

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

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

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

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

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

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

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

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

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

7.5.1. Mediul magnetic 2. ARPANET 1.2. Novell NetWare 1.1.2.3.6. Token BUS 1. ReţeleX-25. Cablul torsadat 112 . Token Ring 1.1. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2. Echipamente de conversie a semnalelor -modem-uri. ISDN de bandă largă 1. FDDI 1. linii şi canale de comunicaţii 2.1. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2. X-28.2. X-29) 1.5. REŢELE DE MARE VITEZA 1.1.5. Fast Ethernet şi 100VG-AnyLan 1. NSFNET 1.5.6.7.1.2. MEDII DE TRANSMISIE 2. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.3.2.5.8.8. 2. NIVELUL FIZIC 2.4. Gigabit Token Ring 1. SMDS–Serviciul de Date Comutat Multimegabit 1. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1. Comunicarea X-25 cu terminale neinteligente (X3.7.7.5. Mesaje.4.7.4.1.5.7.6.7.6.2.7.1. semnale.5. HSSI (HIPI) 1.8. Structurarea reţelelor 2.3. EXEMPLE DE REŢELE 1.2.3.2.1.1.2.7.8.4. Retransmiterea cadrelor 1. Ethernet 1.8. Internet 1.7.3.7. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2.1.1.8.1. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1. UltraNet 1.5.

3.3. Structura sistemului telefonic 2.4. Cablu coaxial de bandă largă 2.1.4. SISTEMULTELEFONIC 2.1. Sateliţi de joasă altitudine 2.4.4.5.2. Buclele locale 2. Servicii de comunicaţii personale 2. Transmisia în reţelele ATM 2.2.5. 2.3.1.4.1. Circuitele virtuale în comparaţie cu circuitele comutate 2.3. COMUNICAŢIILE FĂRĂ FIR 2. Undele infraroşii şi milimetrice 2.7.2.8. Fibre optice 2. Perspectivele N-ISDN 2. Telefoane fără fir 2.5.4. Spectrul electromagnetic 2. Telefoane celulare analogice 2.7.2. Transmisia de unde luminoase (laser) 2.2.2.3. Sateliţi versus fibre optice 3.3.1. ISDN DE BANDĂ INGUSTA 2.2.3. Telefoane celulare digitale 2.4.6. SATELIŢI DE COMUNICAŢIE 2.3. Comutatoare ATM 2. Controlul erorilor.1. Transmisia radio 2.4.2. Cablu coaxial în bandă de bază 2.4. Transmisia prin microunde 2.5.7. Servicii oferite nivelului reţea.2.6. RADIO CELULAR 2.4.2.5.3. Trunchiuri şi multiplexare 2.3.5.3.8.3.3. ISDN DE BANDĂ LARGĂ ŞI ATM 2. Comutatoare 2.1.6. Încadrarea.8.7.1. Arhitectura sistemului ISDN 2.3.5. NIVELUL LEGĂTURĂ DE DATE 3. Sateliţi geosincroni 2. Servicii ISDN 2. Controlul fluxului 113 . Interfaţa ISDN.2.

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

3. Protocolul de dirijare folosit de porţile interioare: OSPF.3. NIVELUL REŢEA ÎN REŢELE ATM 5. Stabilirea conexiunii. Dirijarea bazată pe flux.1. 5.1.4.4. CIDR Dirijarea fără clase între domenii 5.1. Principiul optimalităţii.3.2.multicast 5. Dirijarea pentru calculatoare gazdă mobile 5. Formatele celulelor. Punţi aflate la distantă REŢELE DE SATELIŢI 5.4. INTERCONECTAREA REŢELELOR 5. Principii generale ale controlului congestiei.4.3.2. 5. 4. Controlul congestiei la transmisia multicast 5.2.2.2.3. Adrese IP. pentru porţi externe: BGP 5. Interconectarea reţelelor fără conexiuni 5. Controlul congestiei în subreţelele bazate pe circuite virtuale. Circuite virtuale concatenate. Fragmentarea pachetelor. NIVELUL REŢEA ÎN INTERNET 5.2.3. 5. Dirijarea şi comutarea 115 . Controlul fluctuaţiilor.4. Dirijarea cu trimitere multiplă .1.4.5. 5. Inundarea 5.2.2. Protocoale de control în Internet. Ziduri de protecţie. Pachete de şoc 5. IP mobil.3. 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. Dirijarea în reţele interconectate.4. Dirijarea pe calea cea mai scurtă. 5. Politici pentru prevenirea congestiei 5.1. Subreţele 5. Dirijarea folosind starea legăturilor 5. Dirijare cu vectori distanţă. Trecerea prin tunel.2.3.6.1. Protocolul IP.1. Dirijarea prin difuzare.3.3.2.5. Dirijare ierarhică.1.4.4. Trimiterea multiplă în Internet.1. Specificarea fluxului 5.1. ALGORITMI PENTRU CONTROLUL CONGESTIEI 5. Formarea traficului.

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

7.4.4.1. Compresia datelor 7.3.Baza de informaţii de administrare 7.1. Semnături digitale 7.1.2. Transfer de mesaje 7. Java. Aspecte privind serverul 7. Protocolul SNMP 7.2. Două principii criptografice fundamentale. WORLD WIDE Web 7. DNS . Agentul utilizator 7. Cum este implementat USENET 7. Modelul SNMP.8.2. Înregistrări de resurse 7.3.1.3.1.1.8.2.5.5. Protocoale de autentificare 7.7. Java Script 7.7.4. Criptografia tradiţională.5.4. Arhitectură şi servicii 7. Algoritmi cu cheie publică 7. SMI .4. POŞTA ELECTRONICĂ 7.8.8.6. ŞTIRI USENET 7. MBone . SECURITATEA REŢELEI 7.7.1.2.6.1.4.1.2.1.3.8.4. 7.3.5.5. Aspectele privind clientul 7.5. Regăsirea informaţiilor pe Web 7. Audio.5. Scrierea unei pagini de Web în HTML. Video la cerere 7.7.4.3.4.5.3.1. Confidenţialitatea poştei electronice 7. Spaţiul de nume DNS 7. MIB .2.7. MULTIMEDIA 7.SISTEMUL NUMELOR DE DOMENII 7.1. Algoritmi cu cheie secretă 7. Video 7.3. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7. Formatele mesajelor 7.Structura informaţiei de administrare 7.2.Coloana vertebrală pentru trimitere multiplă 117 . USENET din punctul de vedere al utilizatorului 7.1.4. Servere de nume 7. Notaţia sintactică abstractă 7.6.

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

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

Cancel anytime.