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

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

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

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

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

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

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

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

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

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. În funcţie de numărul de ore prevăzut cursului. ca teme individuale (conform anexei 5) pot fi titlurile de nivelul I. Este necesar a utiliza posibilităţile avansate de hipertext şi hipermedia. sau titlurile de nivelul III. cu plan de expunere conform titlurilor de nivelul II. 12 .tradiţională. Un exemplu sugestiv de cuprins al sarcinii creative la una din temele cursului „Reţele de calculatoare” vezi anexa 4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Culori exprimate prin nume şi RGB 47 .Link-uri vizitate Referinţe activate Culoare font Culoarea textului Linii de delimitare Culoare tabel Culoare şi imagine fond celula Culoare chenar de cadru <BODY VLINK="#$$$$$$"> <BODY ALINK="#$$$$$$"> <FONT COLOR="#$$$$$$"> <BODY TEXT="#$$$$$$"> <HR COLOR="#$$$$$$"> <TH BACKGROUND="URL"> <TH BGCOLOR="#$$$$$$"> <FRAMESET BORDERCOLOR="#$$$$$ $"> Tabelul 5.

Text preformatat <HTML> <HEAD> <BODY BGCOLOR=PINK><FONT COLOR=#0000FF> <TITLE> Exemplul 4. Studierea marcajelor de formatare fizică şi logică a caracterelor – dimensiuni.05 2.------------. Exemple de explorare Scop.3.55 48 . • Exemplul 4.Albastru marin aqua #00FFFF Gri (sur) gray #808080 Bleumarin(albastr u închis) navy #000080 Argintiu silver #C0C0C0 Negru black #000000 Verde închis green #008000 Albastru blue #0000FF Verde citron lime #00FF00 Violet deschis fuchsia #FF00FF Maro (bordo) maroon #800000 Oliviu olive #808000 Violet purple #FF00FF Roşu red #FF0000 Verde inchis teal #008080 Alb white #FFFFFF Galben yellow #FFFF00 4.50 0. culori şi efecte speciale a fontelor. Text preformatat </TITLE> <h4>Exemplul 4. Text preformatat<h4> </HEAD> <PRE> produs pret-cost transport valoare --------.----------lapte 2. Aria de acţiune a atributelor.2.-----------.

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

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

Care este diferenţa dintre <pre> şi <xmp>? 6.<font size=5>R</font> <font size=6>E</font> <font size=7>S</font> <font size=7>I</font> <font size=7>C</font> <font size=7>O</font> <font size=6>B</font> <font size=5>O</font> <font size=4>R</font> <font size=3>I</font> <font size=2>R</font> <font size=1>E</font> </BODY> </HTML> Rezultatul rulării exemplului 6 vezi mai jos figura 5 Figura 5. Care din marcaje se referă la organizarea textului? Aranjarea textului? 2. Care este diferenţa dintre marcajele <font>? <basefont>? 51 . Întrebări de autocontrol şi exerciţii 1. Rezultatul rulării exemplului 6 4.4. Care este aria de acţiune a marcajului <font>? <basefont>? 3. Care este destinaţia marcajului <font>? <basefont>? 4. Care este destinaţia marcajului <p>? <div>? 5.2.

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

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

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

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. 2. 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.Notă: 1. Atrageţi atenţia . 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ă.Biletului:AA-1209 <LI> Nr. Dacă alineatul are mai multe linii .

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

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

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

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

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

doar în IE Linie de tabel Culoarea fondului pentru întreaga linie (valoare RGB sau nume culoare) Alinierea conţinutului celulelor (left. right).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. el va lua maximul pentru toate celulele liniei Lăţimea celulei HSPACE = VSPACE = COLS = FRAME = RULES = <TR ATRIBUTE> </ TR> BGCOLOR= ALIGN= HEIGHT= <TD ATRIBUTE> </ TD> - HEIGHT = WIDTH= 61 .doar în IE Ajustarea riglelor în tabel . implicit left Înălţimea liniei (în pixeli). dar puteţi folosi height în TD Celulă de tabel Înălţimea celulei. în unele navigatoare nu funcţionează. dacă pe aceeaşi linie (TR) daţi din greşeală 2 valori diferite pentru height în TD. 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 . center.

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

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

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

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

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

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

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

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

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). î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ă. 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. -blank = încarcă pagina într-o fereastră noua. Tabelul 8. -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). este valoarea implicită.arborescente. TARGET = " NUMECADRU" 73 . deasupra altor ferestre de pe ecran. -self = încarcă pagina în cadrul curent. fără nume. Frunzele acestor arbori pot fi documente plate sau liniare.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<marquee behavior=scroll>Bine ati venit!</marquee><p> <marquee behavior=slide>Bine ati venit!</marquee><p> <marquee behavior=alternate>Bine ati venit!</marquee> Bucla <loop=#> #=număr sau infinit.Comportamentul sau felul de mişcare a textului <behavior=#> #=scroll. middle(mijloc). indică numărul maximal de mişcare a textului <marquee loop=3 width=50% behavior=scroll>Bine ati venit! </marquee><P> <marquee loop=3 width=50% behavior=slide>Bine ati venit! </marquee><P> <marquee loop=3 width=50% behavior=alternate>Bine ati venit! </marquee> ] Aliniere <align=#> #=top(sus). Alternate reprezintă mişcarea textului de la o margine la alta. slide. Slide este mişcarea textului dintr-un capăt în altul oprindu-se în cel din urmă. 95 . alternate Scroll este mişcarea obişnuită a textului dintr-un capăt în altul. 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Structurarea reţelelor 2. Gigabit Token Ring 1.1.2. Fast Ethernet şi 100VG-AnyLan 1. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.2.1. Echipamente de conversie a semnalelor -modem-uri.4. Novell NetWare 1. NIVELUL FIZIC 2. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2. 2.1.5.7.7.4.3. Mediul magnetic 2. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2. Ethernet 1. FDDI 1.1.2.5.7.8. Token Ring 1.2.8.1. REŢELE DE MARE VITEZA 1.1.7.1. EXEMPLE DE REŢELE 1.4.7.8.3.2.5. ReţeleX-25. ARPANET 1.1.6.7.3. semnale.5.4. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.2.3.3. Retransmiterea cadrelor 1.5.1.1. NSFNET 1.8.5. X-28.6. linii şi canale de comunicaţii 2.2.5. MEDII DE TRANSMISIE 2. ISDN de bandă largă 1.7.2. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1. UltraNet 1. Internet 1.7.6.1. HSSI (HIPI) 1. Mesaje. SMDS–Serviciul de Date Comutat Multimegabit 1.5. Cablul torsadat 112 .2.1.6.7. Token BUS 1.7. X-29) 1.8. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.5.1. Comunicarea X-25 cu terminale neinteligente (X3.8.7.

Servicii ISDN 2.5. Transmisia de unde luminoase (laser) 2.5.4. Perspectivele N-ISDN 2.5.3. Controlul fluxului 113 . NIVELUL LEGĂTURĂ DE DATE 3. 2. Cablu coaxial de bandă largă 2. Circuitele virtuale în comparaţie cu circuitele comutate 2. Transmisia radio 2.3. Buclele locale 2. ISDN DE BANDĂ INGUSTA 2.1. Telefoane fără fir 2.5.3.5. Transmisia prin microunde 2. Structura sistemului telefonic 2.2. Sateliţi versus fibre optice 3.7.3. COMUNICAŢIILE FĂRĂ FIR 2. Cablu coaxial în bandă de bază 2.2.3.2. Încadrarea. Sateliţi de joasă altitudine 2.4. Transmisia în reţelele ATM 2. Spectrul electromagnetic 2. Arhitectura sistemului ISDN 2. Comutatoare 2.3.3.7. Servicii oferite nivelului reţea.5.8.4.2.6.1.4.4. Controlul erorilor.2.2.3. SISTEMULTELEFONIC 2. Telefoane celulare digitale 2. Servicii de comunicaţii personale 2.2.1.1. Comutatoare ATM 2.2. ISDN DE BANDĂ LARGĂ ŞI ATM 2. Telefoane celulare analogice 2.3. Interfaţa ISDN.7.2.6. Sateliţi geosincroni 2. Undele infraroşii şi milimetrice 2.8.3.7.8.3.6.2.2.4. RADIO CELULAR 2. SATELIŢI DE COMUNICAŢIE 2.1.4.3.4.3.1. Trunchiuri şi multiplexare 2.4.1.3.4. Fibre optice 2.5.1.

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

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

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

POŞTA ELECTRONICĂ 7. Audio.5. Scrierea unei pagini de Web în HTML.5.1. DNS .3.2. Înregistrări de resurse 7.2. Protocoale de autentificare 7.7.3.4. Aspecte privind serverul 7.4.2. MIB .3. Transfer de mesaje 7.3. WORLD WIDE Web 7. Aspectele privind clientul 7.1.5.5. MBone . Algoritmi cu cheie secretă 7.2.2. Regăsirea informaţiilor pe Web 7. Modelul SNMP.1. Cum este implementat USENET 7. MULTIMEDIA 7.7. Spaţiul de nume DNS 7.8.6.5. ŞTIRI USENET 7. Arhitectură şi servicii 7. Confidenţialitatea poştei electronice 7.2.1. Java Script 7. SECURITATEA REŢELEI 7.2.3.7. Java. Algoritmi cu cheie publică 7. Servere de nume 7.6.5.7.4.4.3.3. Două principii criptografice fundamentale.1.1.4. Formatele mesajelor 7.4.SISTEMUL NUMELOR DE DOMENII 7. 7.7.4.5. USENET din punctul de vedere al utilizatorului 7.4. Agentul utilizator 7.7.3.1. Compresia datelor 7.1. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7.5.8. Notaţia sintactică abstractă 7.2.8. Protocolul SNMP 7. Semnături digitale 7.Baza de informaţii de administrare 7.Structura informaţiei de administrare 7.1.1.1.4.8.4.8.1.1.6. Criptografia tradiţională. Video la cerere 7.Coloana vertebrală pentru trimitere multiplă 117 . Video 7. SMI .

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

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

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