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

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

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

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

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

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

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

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

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. ca teme individuale (conform anexei 5) pot fi titlurile de nivelul I. În funcţie de numărul de ore prevăzut cursului. 12 .tradiţională. sau titlurile de nivelul II cu tot ce este sub ele–ca plan al expunerii temei. Este necesar a utiliza posibilităţile avansate de hipertext şi hipermedia. cu plan de expunere conform titlurilor de nivelul II.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

în funcţie de motorul de căutare ales.Creaţi o bază de date care să includă acţiunile dvs. de promovare. 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 exemplu. pentru promovarea cu ajutorul motoarelor de căutare alcătuiţi un tabel care să cuprindă următoarele informaţii: • Numele motorului de căutare /directorului • Data înregistrării • Timpul necesar pentru realizarea înregistrării • Cuvintele cheie folosite • Codul care atestă că site-ul a fost înregistrat. 28 .

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

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

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

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

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

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

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

• Exemplul 2–Antete. 36 . 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. centrat)</H1> <H2 ALIGN=RIGHT> Salut lume !(titlul de nivelul 2.Figura 1.H1. alinierea antetelor şi paragrafelor <html> <head> <title> Exemplul 2 Antete. Rezultatul rulării exemplului 1.

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

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

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

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

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

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 .Color = <body atribute> </body> bgcolor = backgro und = text = link = vlink = alink = Culoarea (dată prin nume sau valoarea RGB). 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 .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". dacă derulăm rties = pagina. pentru color = #00ffff obţinem: Defineşte începutul şi sfârşitul corpului documentului HTML Culoarea fondului paginii (dată prin nume sau valoarea RGB) Url .

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ă.<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. 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. <b> adică aşa cum arata el în</b> codul sursa din Notepad Afişează din linie nouă textul preformatat. Program sau variabilă Listing de program <xmp> </xmp> - <strike> </strike> <strong> </strong> <em> </em> <address> </address> <cite> </cite> <dfn> </dfn> <var> </var> <code> </code> - 45 . adică aşa cum arată el în codul-sursă din Notepad Afişează textul taiat Evidenţiere logică puternică Stil logic de evidenţiere Informaţii despre adresă şi autor Citare bibliografică Definiţie de cuvân.

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

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

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

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

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

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

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

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

3. 2.Biletului:AA-1209 <LI> Nr.Notă: 1. Observaţi că elementele unui nivel al listelor se aliniază la aceeaşi distanţă de la marginea stângă. Atrageţi atenţia .toate se afişează la aceeaşi distanţă de la marginea stângă.listele pot fi încadrate una în alta. Bagajului: 000001 <LI> Greutate: 25kg</FONT> </UL> </UL> </UL> <BR> <LI><I><B><U><FONTCOLOR=BLUE>BAGRIN ION</FONT></U></B> <FONT COLOR=MAROON> <UL TYPE=a> <LI>Serie la pasaport:A12700876 <LI>Punctul unde urmeaza:Moscova</FONT> <UL TYPE=SQUARE> 55 . 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. Dacă alineatul are mai multe linii .

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

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

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

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

2. vezi p. un text explicativ asociat tabelului Culoarea de fond (a titlului) (valoare RGB sau nume culoare. tabelul 4.2.4.Tabelul 7. 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 . Marcaje de construire a tabelelor Instruc-ţiune <THEAD> </ THEAD> - Atribute Descriere Titlul tabelului.

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

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

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

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

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

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

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

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

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

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

<A NAME="cuvânt-cheie"> paragraf-ţintă </A>. Folosirea marcajului cu atributul NAME poartă numele de ancoră. Atunci când se va face referinţă la această ancoră, documentul va fi derulat în fereastra navigatorului pana când textul dintre <A> </A> ajunge în partea de sus a ecranului. Ancorele nu sunt afişate diferit faţă de restul documentului ca în cazul legăturilor. Referirea la o ancoră în documentul de la care pleacă legătura se face în acelaşi fel ca în cazul referirii unui întreg document, adăugându-se simbolul # urmat de cuvântul-cheie din ancoră: <A HREF="nume-fisier#cuvânt-cheie"> Text explicativ </A> Exemplul de mai sus arată că este posibilă referirea la un anumit paragraf al documentului ţintă, chiar dacă acesta este local sau îndepărtat. Exemple de legături. Legătura <a href="http://www.alt-server/alt-site/fişier.html">, plasată în orice fişier din site-ul nostru, indică o legătură absolută externă. Legătura <a-href="http://www.nume-server.com/numedirector/A/A1/a12.htm">, plasată în fişierul index.html, indică o legătura absolută spre fişierul a12.htm din site-ul dat. Legătura <a href = ".. /.. /index.html">, plasată în orice fişier din directorul A1 sau A2, indică o legătura spre fişierul index.html din site-ul dat. Legătura <a href = ".. /A /a.htm">, plasată în fişierul b.htm din directorul B, indică o legătură spre fişierul a.htm din directorul A. Legătura <a href = "A/A1/a12.htm">, plasată în fişierul index.html, indică o legătură spre fişierul a12.htm din site-ul dat.

71

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

Selectarea textului "Introducere"(ancora "#1.") va determina saltul în cadrul documentului în locul în care este definită ancora prin NAME. Marcajele utilizate vezi tabelul 8. Exemple de explorare– vezi nr.10, 11. 4.5.2. Organizarea site-ului Organizarea Web site-ului (un şir de Web-pagini legate între ele). Site plat, cu topologia de stea complet legată, cu pagina de cap în centrul stelei, de regulă conţine un număr redus de pagini (între 5-9). Site liniar, numit şi consecutiv, reprezintă un şir înlănţuit de pagini, care conţine doar legături înainte-înapoi. Se utilizează mai rar. Arhitectura este binevenită pentru prezentări, instrucţiuni, manuale, în care materialul poate fi conceput doar în mod consecutiv. Site ierarhic (arborescent), structura căruia reflectă structura fizică a arborelui documentelor. De regulă aşa site conţine referinţe care leagă diferite frunze, ramuri a arborelui, deci în formă pură arborescentă se utilizează rar. Site cu structură combinată. De regulă la nivelul superior se utilizează structuri plate de documente (adnotări, cuprins etc.). Iar din acestea atârnă „struguri” de documente

72

Definirea unei ancore HREF = "URL" NAME = "NUMEANCORA" HREF = "#NUMEANCORA " HREF = "URL # NUMEANCORA" Referinţa către o ancoră internă (din acelaşi fişier) Referinţa către o ancoră externă (din alt fişier) Numele cadrului în care va fi afişată sursa definită cu HREF valori speciale: -top = încarcă pagina într-o fereastră nouă. -blank = încarcă pagina într-o fereastră noua. deasupra altor ferestre de pe ecran. TARGET = " NUMECADRU" 73 . -parent = încarcă pagina în fereastra părinte. 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. Frunzele acestor arbori pot fi documente plate sau liniare. este valoarea implicită. Tabelul 8. care adesea au referinţe inverse (către părinţi).arborescente. 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). fără nume. -self = încarcă pagina în cadrul curent. între ghilimele nu trebuie să existe spaţii.

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

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

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

Rezultatul afişării exemplului 11 4. cu atribute name-content perechi. dar nu şi invers”.exista mai multe marcaje META. 4.1.5. 2. Elemente textuale • Titlul paginii • Blocuri de structura o Divizori o Titluri si subtitluri o Alineate o Liste o Tabele • Crearea legaturilor o Ancore o Legare de texte 2..4 Întrebări de autocontrol şi exerciţii 1. Figura 10. Care este comanda ce permite afişarea conţinutului referinţei într-o fereastră bine determinată? 8. 5.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.2. 2. Ce este o legătură.Elemente textuale In continuare urmeaza textul sub titlul 2. intre marcajele HEAD si /HEAD.. Cum se va scrie un spaţiu în identificarea referinţei? 77 . 3. 7. 6..

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

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

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

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

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

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

3.7. Tabelul 10.1. Marcaje de operare cu formulare Destinaţia Definirea formularului Încărcare fişier Definire câmp Input Nume câmp Valoare câmp Apăsat? Dimensiune câmp Dimensiune maximă Listă de selecţie Nume listă Număr de opţiuni Opţiuni multiple Opţiune Opţiune implicită Dimensiune fereastră Sintaxa <FORM ACTION="URL" METHOD=GET|POST></FORM> <FORM ENCTYPE="multipart/formdata"> </FORM> <INPUT TYPE="TEXT|PASSWORD | CHECKBOX|RADIO|IMAGE| HIDDEN|SUBMIT|RESET”> <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED> <INPUT SIZE=?> <INPUT MAXLENGTH=?> <SELECT></SELECT> <SELECT NAME="***"></SELECT> <SELECT SIZE=?></SELECT> <SELECT MULTIPLE> <OPTION> <OPTION SELECTED> <TEXTAREA ROWS=? COLS=? ></TEXTAREA> 84 Comentariu Pentru checkbox şi radiobutoane În caractere În caractere Lista din care se poate selecta opţiunea dorită Când lista este definită separat Elemente ce pot fi selectate Se afişează Pentru Input text . precum şi la sfârşitul p.scripturi utile vezi referinţele bibliografice.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Internet 1.7.1. MEDII DE TRANSMISIE 2.1.2.7. Structurarea reţelelor 2.6. SMDS–Serviciul de Date Comutat Multimegabit 1.3.2. NIVELUL FIZIC 2. UltraNet 1.6.1.5. EXEMPLE DE REŢELE 1. HSSI (HIPI) 1. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2.7.1. NSFNET 1. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.1.4.5.2.5.1.7.8. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2. Ethernet 1.4.1. Fast Ethernet şi 100VG-AnyLan 1.3. ARPANET 1. Gigabit Token Ring 1. linii şi canale de comunicaţii 2. FDDI 1.1. Cablul torsadat 112 .2. Retransmiterea cadrelor 1.2. Token BUS 1.2. semnale.6. X-28. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2. Mediul magnetic 2.5.6.3. Novell NetWare 1.5.2.5. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2. Mesaje.8.7.3.4.1.1.4.7.2. Echipamente de conversie a semnalelor -modem-uri.7. Comunicarea X-25 cu terminale neinteligente (X3. X-29) 1. 2.8.5.2.8.3. REŢELE DE MARE VITEZA 1.1.8. ReţeleX-25. ISDN de bandă largă 1.5.5.1.7. Token Ring 1. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.7.8.7.7.

5.1. Transmisia în reţelele ATM 2.2.2.7. Telefoane celulare digitale 2.3. Sateliţi versus fibre optice 3. Cablu coaxial de bandă largă 2. Telefoane fără fir 2. Telefoane celulare analogice 2.2. Controlul erorilor.3.7.3.3.5. SISTEMULTELEFONIC 2. Încadrarea.5. Buclele locale 2.6.4. COMUNICAŢIILE FĂRĂ FIR 2.2. Undele infraroşii şi milimetrice 2.3.2. Transmisia radio 2.5.6. Interfaţa ISDN. SATELIŢI DE COMUNICAŢIE 2. Comutatoare ATM 2. Comutatoare 2. ISDN DE BANDĂ LARGĂ ŞI ATM 2.4.7.4. Servicii oferite nivelului reţea.3.4.1. NIVELUL LEGĂTURĂ DE DATE 3.1. ISDN DE BANDĂ INGUSTA 2. Spectrul electromagnetic 2. Transmisia de unde luminoase (laser) 2.8. 2. Controlul fluxului 113 .3.2. RADIO CELULAR 2.3.4.5.6.5.4.2.3. Servicii ISDN 2.5. Perspectivele N-ISDN 2.2.1.3.4. Trunchiuri şi multiplexare 2.8.1. Transmisia prin microunde 2. Fibre optice 2. Cablu coaxial în bandă de bază 2.4.4. Circuitele virtuale în comparaţie cu circuitele comutate 2.2.2.1.1. Arhitectura sistemului ISDN 2.7.3.2.1.3. Sateliţi de joasă altitudine 2. Sateliţi geosincroni 2.4. Servicii de comunicaţii personale 2.8. Structura sistemului telefonic 2.3.3.

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

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

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

8.SISTEMUL NUMELOR DE DOMENII 7.1. Semnături digitale 7. Java.Coloana vertebrală pentru trimitere multiplă 117 . Criptografia tradiţională. Regăsirea informaţiilor pe Web 7. Scrierea unei pagini de Web în HTML.3.2.3. ŞTIRI USENET 7.4.1.2.7. Formatele mesajelor 7.5.5.5.2.5.7. Înregistrări de resurse 7.1. Confidenţialitatea poştei electronice 7.1.6.Structura informaţiei de administrare 7.1. SECURITATEA REŢELEI 7.3.6.1. Agentul utilizator 7.1.7. Compresia datelor 7.1. MULTIMEDIA 7.4.3.4.6.4. MIB .5.7.4.5. Algoritmi cu cheie publică 7. Audio.8.2.4. Servere de nume 7. Două principii criptografice fundamentale.8.1.5.1. Notaţia sintactică abstractă 7. Protocolul SNMP 7.Baza de informaţii de administrare 7.4. Video 7. Transfer de mesaje 7. Aspectele privind clientul 7.3. MBone . Cum este implementat USENET 7. DNS . SMI . Video la cerere 7. Aspecte privind serverul 7.4. Spaţiul de nume DNS 7.4. WORLD WIDE Web 7.8.4.3.2.7.1. Algoritmi cu cheie secretă 7. 7.1.8.7. USENET din punctul de vedere al utilizatorului 7. Modelul SNMP. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7. Java Script 7.2.2. Arhitectură şi servicii 7. Protocoale de autentificare 7.5.3.3. POŞTA ELECTRONICĂ 7.2.1.

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

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

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.