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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

în funcţie de motorul de căutare ales.Creaţi o bază de date care să includă acţiunile dvs. După ce aţi completat formularul online de înregistrare a site-ului trebuie să aşteptaţi câteva zile sau câteva săptămâni pana când el va fi înregistrat. 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 . de promovare. De exemplu.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. 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. <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 . dar ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t. ca în codul-sursă. dar nu ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

64 .2)) </TD> <!--Sfârşitul celulei a(2.1)--> Linia a doua.1)) </TD> <!--Sfârşitul celulei a(2.2. Exemple de explorare Scop. prima coloană (elementul a(1. coloana întâi (elementul a(2.2)--> Linia a doua.4. a doua coloană (elementul a(1.1)) </TD> <!--Sfârşitul primei celule--> <TD> <!--Începutul celulei a doua--> Prima linie. • Exemplul 8. coloana a doua (elementul a(2. Explorarea posibilităţilor HTML de construiremodificare a tabelelor.2)--> </TR> <!--Sfârşitul liniei a doua--> </TABLE> <!--Sfârşitul tabelei--> </BODY> </HTML> Rezultatul afişării exemplului 8 vezi mai jos. 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.4.1) --> <TD> <!--Începutul celulei 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)) (elementul a(1.Cel mai simplu tabel din 2 coloane si 2 linii TABELUL POATE AVEA UN TITLU Prima linie.2)) Linia a doua.2)) Figura 7. Rezultatul afişării exemplului 8 • Exemplul 9.bagaj</td> <td width="13%">Greutatea(kg)</td> 65 .</td> <td width="13%">Destinatia</td> <td width="11%">Nr. rutei</td> <td width="12%">Nr. a doua coloană (elementul a(1.1)) (elementul a(2. coloana a doua (elementul a(2. 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.Un tabel mai sofisticat </title> <meta http-equiv="Content-Type" content="text/html.biletului</td> <td width="12%">Nr. coloana întâi Linia a doua. Un tabel mai sofisticat <html> <head> <title> Exemplul 9.</td> <td colspan="3"> <div align="center">Date despre pasageri.

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

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

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

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

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

care adesea au referinţe inverse (către părinţi). -blank = încarcă pagina într-o fereastră noua.arborescente. -self = încarcă pagina în cadrul curent. dacă dorim să introducem legături spre fişiere sau directoare al căror nume conţine spaţii (adică sunt formate din cel puţin 2 cuvinte) trebuie să înlocuim spaţiile cu %20. TARGET = " NUMECADRU" 73 . Frunzele acestor arbori pot fi documente plate sau liniare. fără nume. este valoarea implicită. deasupra altor ferestre de pe ecran. Tabelul 8. între ghilimele nu trebuie să existe spaţii. 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ă. -parent = încarcă pagina în fereastra părinte. 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).

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

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

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

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

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

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

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

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

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

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

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

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

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

Introducere date</title> </head> <BODY bgcolor=pink> <big><font color=blue>Introduce-ti datele despre dvs.."> </FORM> <!--Sfirsitul formei--> </BODY> </HTML> Rezultatul afişării exemplului 12 vezi mai jos.. Cea mai simpla forma Inapoi..html"> <!--Inceputul formei--> <INPUT TYPE=submit VALUE="Inapoi. Formă de introducere a datelor <HTML> <head> <title>Exemplul13. la capitolul III. la capitolul III. prenume:<br><option><INPUT size=30> </B><BR><BR> Jenul: <INPUT TYPE=radio NAME=gender VALUE="male" checked>masculin <INPUT TYPE=radio NAME=gender VALUE="female">feminin<BR> <p>Data.: </font></big> <font color=red> <P>Nume.. Cea mai simpla forma </TITLE> </HEAD> <H1>Cea mai simpla forma </H1> <FORM ACTION="pr0008. Rezultatul executării exemplului 12 • Exemplul 13. Figura 11. luna si anul nasterii:<br><option><INPUT size=30> <P><I>Locul nasterii: <SELECT name=RAION> <OPTION selected>Basarabeasca<OPTION>Chisinsu<OPTION>Causeni<OPTION> Cahul<OPTION>Cainari<OPTION>Criuleni<OPTION>Calarasi <OPTION>Camenca<OPTION>Edinet<OPTION>Falesti<OPTION> 87 .<HEAD> <TITLE> Exemplul 12. figura 11.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Telefoane fără fir 2. Sateliţi versus fibre optice 3.6.1. Buclele locale 2.3.4. Cablu coaxial de bandă largă 2.1. Transmisia de unde luminoase (laser) 2.6.4. Comutatoare ATM 2. Servicii de comunicaţii personale 2.4.5. Spectrul electromagnetic 2. Controlul fluxului 113 .3.5.7.3.4.3.5.4. Transmisia prin microunde 2.3.7. Încadrarea. Fibre optice 2.3.4.1.3.2.8.3.2.3.5. Sateliţi geosincroni 2. Perspectivele N-ISDN 2. ISDN DE BANDĂ LARGĂ ŞI ATM 2. Sateliţi de joasă altitudine 2. Servicii ISDN 2.1. Undele infraroşii şi milimetrice 2. Controlul erorilor. Transmisia în reţelele ATM 2. RADIO CELULAR 2.2.3. Comutatoare 2. Circuitele virtuale în comparaţie cu circuitele comutate 2. Structura sistemului telefonic 2. Cablu coaxial în bandă de bază 2.6.2.2. 2. Interfaţa ISDN. Trunchiuri şi multiplexare 2.1.8.2.1.2.4. ISDN DE BANDĂ INGUSTA 2.5.3.2.7. SATELIŢI DE COMUNICAŢIE 2.3. Servicii oferite nivelului reţea.7.5.4.2.2.1. SISTEMULTELEFONIC 2.3. Telefoane celulare digitale 2.3. COMUNICAŢIILE FĂRĂ FIR 2. Transmisia radio 2.1. Telefoane celulare analogice 2. Arhitectura sistemului ISDN 2. NIVELUL LEGĂTURĂ DE DATE 3.8.2.4.5.

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

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

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

7.1.4. SMI . Două principii criptografice fundamentale.3.1. Modelul SNMP. 7. Cum este implementat USENET 7.3.5. POŞTA ELECTRONICĂ 7. Confidenţialitatea poştei electronice 7.3.6.4.1.3.5.Coloana vertebrală pentru trimitere multiplă 117 . Video la cerere 7.2.3.SISTEMUL NUMELOR DE DOMENII 7. Regăsirea informaţiilor pe Web 7. Audio.2. USENET din punctul de vedere al utilizatorului 7.1.8. SECURITATEA REŢELEI 7.8.3.6.8. DNS .5.1.1.1.8. Servere de nume 7.1.4.4. Video 7. Scrierea unei pagini de Web în HTML. Algoritmi cu cheie publică 7. WORLD WIDE Web 7.5. Notaţia sintactică abstractă 7. ŞTIRI USENET 7. Agentul utilizator 7.7.2. Arhitectură şi servicii 7.4. Transfer de mesaje 7.7.4.5.1.4.3.4. Aspecte privind serverul 7. MULTIMEDIA 7.4. Înregistrări de resurse 7.5.7.1.2. Protocolul SNMP 7.7. Spaţiul de nume DNS 7.1.4. MIB .6. Formatele mesajelor 7. Compresia datelor 7. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7.2. Java Script 7.Structura informaţiei de administrare 7.2. MBone .8. Semnături digitale 7.5.2.7. Java. Aspectele privind clientul 7.3.2. Protocoale de autentificare 7.1. Criptografia tradiţională.5.1.Baza de informaţii de administrare 7. Algoritmi cu cheie secretă 7.

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

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

Cancel anytime.