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

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

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

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

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

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

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

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

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

tradiţională. 12 . 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. Este necesar a utiliza posibilităţile avansate de hipertext şi hipermedia. sau titlurile de nivelul III. O temă creativă poate fi executată doar de o persoană a seriei de studii. 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 funcţie de numărul de ore prevăzut cursului.

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

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

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

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

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

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

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

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

de exemplu. devine posibil ca orice program de navigare să poată să citească şi să formateze orice pagină Web. Elemente de bază ale documentelor HTML 21 . păstrează informaţia în structuri de date separate. 3. 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.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.w3. 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. Nu toate procesoarele de texte funcţionează aşa. Specificaţia curentă a limbajului HTML se poate consulta pe serverul http://www. Posibilitatea formatării paginii recepţionate este foarte importantă. Procesoarele de text pentru Macintosh. 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. Astfel de abordări îngreunează sarcina standardizării limbajului HTML. Standardizarea oficială a limbajului HTML este făcută de Consorţiul 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.org/.6. 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. Prin standardizarea şi includerea comenzilor de marcaj în fiecare fişier HTML. care să interpreteze comenzile de marcare.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38

În general în antetul unei pagini Web, între marcajele <head> şi </head>, există mai multe marcaje META, cu atribute name - content perechi. Exemplu: <html><head><title>Titlul dorit</title> <meta content="text/html; charset=windows-1252" httpequiv = Content-Type> - indică navigatorului că este un fişier HTML; charset stabileşte tipul de caractere (în general windows-1252), dar există şi altele. <meta name=keywords content="o listă de cuvinte, separate prin virgulă">. Pagina va fi listată de un motor de căutare (la care a fost înscris site-ul) în cazul unei căutări în care s-au folosit cuvinte din această listă. <meta name=description content="O frază care descrie pe scurt conţinutul paginii">. În cazul unei căutări după cuvinte-cheie, motorul de căutare ne dă o listă de pagini. Pentru fiecare pagină (site) din listă apare titlul ei (dat cu marcajul TITLE) urmat de o frază (cea de la name=description content="o frază care descrie..."). Dacă nu avem în marcajul META acea frază, motorul va indexa după prima frază din pagină. Tot ea va fi afişată la o eventual căutare. <meta name=author content="numele dvs., e-mail etc"> numele autorului. Adresa e-mail. 4.1.6. Întrebări de autocontrol şi exerciţii. 1. Care este diferenţa dintre un Web document şi un fişier HTML? 2. Care este forma generală a unui fişier HTML? 3. Care este cauza elaborării a câtorva sute de editoare HTML? 4. Care este sensul cuvântului „de marcare” în HTML? 5. Care marcaje definesc partea descriptivă a Web documentului? 6. Care sunt elementele principale ale unui Web document?
39

7. Ce este un alineat, o linie de document? 8. Ce este un hipertext? 9. Ce este Web designul? 10. Care este semnificaţia Web designului? 11. Ce este un Web document? 12. Ce este un Web document multimedia? 13. Ce este un Web site? 14. Ce reprezentă HTML, care este mecanismul lui de acţiune? 15. Ce tipuri de elemente sunt prezente în limbajul HTML? 16. Cum se introduc ghilimelele, parantezele unghiulare şi alte semne speciale în codul-sursă al HTML? 17. De ce este necesar HTML, care este destinaţia sa, ce probleme soluţionează? 18. De ce sunt necesare Esc - caracterele în HTML? 19. Este oare raţională studierea HTML, când există atâtea editoare specializate? Dacă da–care sunt motivele? 20. Pentru ce se utilizează termenii „fişier HTML”, „cod-sursă HTML”, „Web document”? Ce reflectă aceşti termini? 21. Prin ce diferă un document obişnuit de un hipertext, care sunt avantajele hipertextului? 22. La ce serveşte instrucţiunea „meta name”, care sunt perechile cele mai utilizate? 23. Cum se poate face ca o pagină să fie regăsită cât mai des? 24. Culegeţi exemplele 1-3, modificaţi valorile atributelor şi sesizaţi acţiunea marcajelor. 25. Obţineţi afişarea semnelor diacritice ale limbii române Ăă, Ââ, Îî, Şş, Ţţ. 26. De ce nu întotdeauna se afişează caracterele diacritice ale limbii române (&Scedil, &Tcedil, codurile hexazecimale &#186; &#195; &#227; &#238; &#254 etc)? 27. Ce trebuie făcut pentru ca semnele diacritice să fie afişate? 28. Schimbaţi titlul (numele) paginii exemplului 1.

40

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

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

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

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". 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 . dacă derulăm rties = pagina.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 . 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).

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

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

Culori exprimate prin nume şi RGB 47 .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.

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

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

Figura 4. Rezultatul rulării exemplului 5 • Exemplu 6. Efecte aparente <HTML> <HEAD> <BODY BGCOLOR="YELLOW"> <TITLE> Modelarea efectelor aparente </TITLE> </HEAD> <H3>Modelarea efectelor aparente<H3> <font size=1>U</font> <font size=2>R</font> <font size=3>C</font> <font size=4>A</font> 50 .</BODY> </HTML> Rezultatul rulării exemplului 5 vezi mai jos figura 4.

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

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

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

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

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

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

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

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

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

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

dar puteţi folosi height în TD Celulă de tabel Înălţimea celulei. dacă pe aceeaşi linie (TR) daţi din greşeală 2 valori diferite pentru height în TD.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. în unele navigatoare nu funcţionează. implicit left Înălţimea liniei (în pixeli). 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 .doar în IE Linie de tabel Culoarea fondului pentru întreaga linie (valoare RGB sau nume culoare) Alinierea conţinutului celulelor (left.doar în IE Ajustarea riglelor în tabel . center. 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 . right).

împreună cu TD pe aceeaşi linie Text explicativ asociat tabelului Alinierea textului (top = implicit.în loc de TD. dar conţinutul va fi centrat şi îngroşat (bold). . center. bottom (jos). implicit left Alinierea conţinutului celulei pe verticală: top (sus). right) ALIGN = BASELINE ALIGN = CARACTER ALIGN = JUSTIFY COLSPAN = ROWSPAN = NOWRAP <TH> </ TH> - <CAPTION ATRIBUTE> </CAPTION> ALIGN = 62 . middle (mijloc). bottom. ") 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 : . left. right).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. implicit middle Aliniază celulele cu linia de bază a textului adiacent Aliniază coloana faţă de un anumit caracter (implicit caracterul ".

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

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

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

.</td> </tr> </table> </body> </html> Rezultatul afişării exemplului 9 vezi mai jos...A.</tr> <tr> <td>1</td> <td>Aioanei Petru</td> <td>A12763876 <br> </td> <td>Moscova </td> <td>7021</td> <td>AA-1209 </td> <td>000001 <br> </td> <td> 25</td> </tr> <tr> <td>2</td> <td>Bagrin Ion</td> <td>A12700876</td> <td>Moscova </td> <td>7021</td> <td>AB-0089 </td> <td>000698 <br> </td> <td>14</td> </tr> <tr> <td>3</td> <td>S....</td> <td>.. </td> <td>...D</td> <td>..M. figura 8. <br> </td> <td>.</td> <td>.</td> <td>.. 66 ..

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

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

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

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

între ghilimele nu trebuie să existe spaţii. -parent = încarcă pagina în fereastra părinte. Frunzele acestor arbori pot fi documente plate sau liniare. 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ă. -self = încarcă pagina în cadrul curent. Tabelul 8. TARGET = " NUMECADRU" 73 . deasupra altor ferestre de pe ecran. este valoarea implicită. Marcaje de legare a paginilor şi referinţe Instrucţiune <A ATRIBUTE> </A> Atribute Descriere Marcaj tip ancoră Referinţă hipertext (legături spre alte pagini folosind un text sau o imagine). -blank = încarcă pagina într-o fereastră noua.arborescente. care adesea au referinţe inverse (către părinţi). fără nume. 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.

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

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

. exista mai multe marcaje META.1"><b>Titlul paginii </b></a><b> </b></li> <li><a href="#2.2. Cuprins de nivelul II. Elemente textuale </h3> <ul> <li><a href="#2.5"><b>Tabele </b></a></li> </ul> </li> <li><a href="3"><b>Crearea legaturilor</b></a><b> </b><ul> <li><a href="#3. figura 10. ancore <html> <head> <title> Exemplul 11. intre marcajele <BR> HEAD si /HEAD.2.1"><b>Ancore</b></a><b> </b></li> <li><a href="#3. Cuprins de nivelul II. ancore</title> </head> <body> <h3> 2. <BR>cu atribute name ..2"><b>Blocuri de structura</b></a><b> </b><ul> <li><a href="#2.2"><b>Legare de texte </b></a><b> </b></li> </ul> </li> </ul> <h4><a name="2. 76 .Elemente textuale</a> </h4> In continuare urmeaza textul sub titlul 2. <h4><a name="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.2.Exemplul 11.content perechi.">2.1"><b>Divizori</b></a><b> </b></li> <li><a href="#2.2.Titlui paginii </a> </h4> <p>:In general in antetul unei pagini Web.1.4"><b>Liste </b></a></li> <li><a href="#2.1">2.2"><b>Titluri si subritluri</b></a><b> </b></li> <li><a href="#2.

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

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

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

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

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

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

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

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

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

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

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

<OPTION>U.M. 6. Demonstraţi înregistrarea vizitatorilor site-ului. Date generale. 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.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. anexa nr. 4. 88 .1. În cadrul realizării sarcinii de explorare descrieţi marcajele HTML de construire a formularelor de introducerecolectare date.S. În cadrul realizării sarcinii creative elaboraţi codul HTML al formei de înregistrare a vizitatorilor site-ului dvs. 3.Colecţii de scripturi utile vezi referinţele bibliografice.7.E. Prin ce diferă un radio-buton de un buton checkbox? 8.T.3.M.S.1).M<O PTION>USAM <OPTION>Acad. de transport<OPTION>ULIM <OPTION> Alta institutie </OPTION></SELECT> </font><BR><BR> <input type="submit" value="ok"> <input type="reset" value="cancel"> </FORM> </BODY> </HTML> Rezultatul afişării exemplului 13 vezi mai jos. figura 12.<OPTION>A. Întrebări de autocontrol şi exerciţii 1. precum şi la sfârşitul p. (forma recomandată–vezi compartimentul. 9.3. 2.7. 4. 10.de Politie<OPTION>Acad. 5.

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

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

utilizat de marcajul <a href = "url" target = nume> Înălţimea cadrului înglobat (pixeli sau %) Lăţimea cadrului înglobat (pixeli sau %) Specifică dacă cadrul definit cu IFRAME are sau nu chenar (yes sau no. implicit "auto" scrolling = noresize marginheight = marginwidth = <noframes> </ noframes> <iframe atribute> </ iframe> src = " url " name = height = width = frameborder = scrolling = 91 . no (nu).<frame atribute> src = " url " name = Definiţia unui cadru Sursa cadrului Numele cadrului. auto (dacă este nevoie). no (nu). utilizat de marcajul <a href = "url" target = nume> Opţiuni pentru bara de derulare: yes (da). implicit yes) Opţiuni pentru bara de derulare : yes (da). auto (dacă este nevoie). 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.

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

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

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

alternate Scroll este mişcarea obişnuită a textului dintr-un capăt în altul. 95 . middle(mijloc). Alternate reprezintă mişcarea textului de la o margine la alta. slide. 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. 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). Slide este mişcarea textului dintr-un capăt în altul oprindu-se în cel din urmă.Comportamentul sau felul de mişcare a textului <behavior=#> #=scroll. <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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.2. UltraNet 1. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1. ISDN de bandă largă 1.7. Retransmiterea cadrelor 1.7. X-28.1.7.3.1. FDDI 1.7.2. Structurarea reţelelor 2.2. Echipamente de conversie a semnalelor -modem-uri.5.6.4. Token Ring 1.1. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2.5. EXEMPLE DE REŢELE 1.4.2.3.7.2. SMDS–Serviciul de Date Comutat Multimegabit 1.4.7. ReţeleX-25. Ethernet 1. NIVELUL FIZIC 2. semnale.5. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.1. Mesaje.5.2. Internet 1.7.1. Comunicarea X-25 cu terminale neinteligente (X3.6.8. Gigabit Token Ring 1.6.1.7.8. NSFNET 1.1.1.8.5.1. REŢELE DE MARE VITEZA 1.1.7.3.3.5.7.2. Novell NetWare 1.1.5.1.6. MEDII DE TRANSMISIE 2. Token BUS 1.1.4. ARPANET 1.3. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2.2. HSSI (HIPI) 1. X-29) 1. Cablul torsadat 112 .2. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.8.8. linii şi canale de comunicaţii 2. 2.7. Fast Ethernet şi 100VG-AnyLan 1.8. Mediul magnetic 2.5. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.

3.3. NIVELUL LEGĂTURĂ DE DATE 3. Transmisia de unde luminoase (laser) 2. Perspectivele N-ISDN 2. 2. Transmisia radio 2. Telefoane fără fir 2. Sateliţi de joasă altitudine 2.7.4. ISDN DE BANDĂ INGUSTA 2. RADIO CELULAR 2.4. Controlul erorilor.2. SATELIŢI DE COMUNICAŢIE 2.2.8.8.3. COMUNICAŢIILE FĂRĂ FIR 2.6.2.3. Circuitele virtuale în comparaţie cu circuitele comutate 2.5. Spectrul electromagnetic 2. Fibre optice 2.1. Trunchiuri şi multiplexare 2.2. SISTEMULTELEFONIC 2.3. Sateliţi geosincroni 2. Undele infraroşii şi milimetrice 2.1. Cablu coaxial de bandă largă 2.4.5. Cablu coaxial în bandă de bază 2. Arhitectura sistemului ISDN 2.1.3.4. Transmisia prin microunde 2.2.8. Interfaţa ISDN. Comutatoare 2.4.4.2.2. Comutatoare ATM 2.1.3. Servicii ISDN 2. Încadrarea.5. Telefoane celulare digitale 2.4. Transmisia în reţelele ATM 2.1. Telefoane celulare analogice 2.5.2.6. Controlul fluxului 113 . Servicii oferite nivelului reţea.2.3.4.3.3.1. Sateliţi versus fibre optice 3.7.3. Structura sistemului telefonic 2.4. Buclele locale 2.3.1.4.5.1.3.5. Servicii de comunicaţii personale 2.5.7.3.2.2.6. ISDN DE BANDĂ LARGĂ ŞI ATM 2.7.

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful