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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

De exemplu. de promovare. pentru promovarea cu ajutorul motoarelor de căutare alcătuiţi un tabel care să cuprindă următoarele informaţii: • Numele motorului de căutare /directorului • Data înregistrării • Timpul necesar pentru realizarea înregistrării • Cuvintele cheie folosite • Codul care atestă că site-ul a fost înregistrat.Creaţi o bază de date care să includă acţiunile dvs. După ce aţi completat formularul online de înregistrare a site-ului trebuie să aşteptaţi câteva zile sau câteva săptămâni pana când el va fi înregistrat. 28 . în funcţie de motorul de căutare ales.

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

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

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

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

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

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

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

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

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

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

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

38

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

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

40

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

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

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

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

dar ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t. Program sau variabilă Listing de program <xmp> </xmp> - <strike> </strike> <strong> </strong> <em> </em> <address> </address> <cite> </cite> <dfn> </dfn> <var> </var> <code> </code> - 45 . 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. <b> adică aşa cum arata el în</b> codul sursa din Notepad Afişează din linie nouă textul preformatat. ca în codul-sursă. dar nu ia în considerare instrucţiunile HTML t e x t p r e f o r m a t a t. ca în codul sursă.<sup> </sup> <sub> </sub> <tt> </tt> <big> </big> <pre atribute> </pre> - Afişează textul ca indice superior Afişează textul ca indice inferior Text cu font monospaţiu Text cu font mărit + bold - Afişează din linie nouă textul preformatat.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.5. 4..1. Care este comanda ce permite afişarea conţinutului referinţei într-o fereastră bine determinată? 8.4 Întrebări de autocontrol şi exerciţii 1. 2.Elemente textuale In continuare urmeaza textul sub titlul 2.. 7.exista mai multe marcaje META.Titlui paginii In general in antetul unei pagini Web. o referinţă? Ce este o ancoră? O referinţă locală? Prin ce diferă referinţele interne de cele externe? Prin ce diferă referinţele absolute de cele relative? Care sunt avantajele referinţelor relative? Comentaţi afirmaţia „Toate legăturile îndepărtate sunt externe. cu atribute name-content perechi. Rezultatul afişării exemplului 11 4. 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. dar nu şi invers”. Ce este o legătură. 3. Cum se va scrie un spaţiu în identificarea referinţei? 77 . 6. intre marcajele HEAD si /HEAD.. Figura 10. 2.2.

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

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

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

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

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

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

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

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

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

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

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

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

pentru unele browsere primează valoarea lui framespacing (ex. implicit yes Mărimea spaţiului dintre cadre (pixeli). pentru că nu ştim ce browser (cu ce valori setate ca implicite) foloseşte vizitatorul. deci mai bine le specificaţi dvs. 4. În general nu dorim chenar şi folosim border =0 împreună cu framespacing =0 şi frameborder =no.1. dacă îl folosiţi împreună cu border. afişarea făcându-se în fereastra din dreapta. Specifică dacă cadrul definit cu FRAMESET are sau nu chenar: yes sau no. Tabelul 11. Scop: Explorarea posibilităţilor divizării ecranului în ferestre.căror apăsare se face legătura cu o anumită secţiune a site-ului. Netscape 4. dar cu valori diferite.valoarea lui border (ex.51) border = frameborder = framespacing = 90 .8. Comenzi de construire a cadrelor Comenzile necesare pentru construirea ferestrelor vezi tabelul 11. IE 5). iar pentru altele . Definitivarea (conţinutului şi formei) site-urilor de explorare şi creativ. 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 "auto" Pentru a nu redimensiona trăgând de chenar (doar dacă există chenar ) Spaţiu deasupra şi sub un cadru (pixeli) Spaţiu la stânga şi la dreapta unui cadru (pixeli) Secţiunea de pagină afişată de către navigatoarele ce nu pot interpreta cadre Cadru intern (doar IE) Sursa cadrului Numele cadrului. auto (dacă este nevoie).<frame atribute> src = " url " name = Definiţia unui cadru Sursa cadrului Numele cadrului. implicit "auto" scrolling = noresize marginheight = marginwidth = <noframes> </ noframes> <iframe atribute> </ iframe> src = " url " name = height = width = frameborder = scrolling = 91 . implicit yes) Opţiuni pentru bara de derulare : yes (da). no (nu). auto (dacă este nevoie). utilizat de marcajul <a href = "url" target = nume> Opţiuni pentru bara de derulare: yes (da). utilizat de marcajul <a href = "url" target = nume> Înălţimea cadrului înglobat (pixeli sau %) Lăţimea cadrului înglobat (pixeli sau %) Specifică dacă cadrul definit cu IFRAME are sau nu chenar (yes sau no. no (nu).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8.5.5. NIVELUL FIZIC 2.5.7. FDDI 1.1. Echipamente de conversie a semnalelor -modem-uri.8.1. Novell NetWare 1. Structurarea reţelelor 2.1.8.1.3.7.7. Token BUS 1.5. ReţeleX-25. Retransmiterea cadrelor 1. linii şi canale de comunicaţii 2. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.4.8. Mesaje.7.7. Ethernet 1.5.7. Internet 1.1.2.3. 2.3.1. X-28.5. Mediul magnetic 2. UltraNet 1.2. X-29) 1.5.1.6. semnale.3. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2.1. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1. ARPANET 1.2.1.6.7. SMDS–Serviciul de Date Comutat Multimegabit 1.1.4.2. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2. MEDII DE TRANSMISIE 2.1. Cablul torsadat 112 . Comunicarea X-25 cu terminale neinteligente (X3.4.7.2.2.5.8. REŢELE DE MARE VITEZA 1.2. EXEMPLE DE REŢELE 1.4.1.1.5. Gigabit Token Ring 1.3.6. NSFNET 1.6.2.7.7. Fast Ethernet şi 100VG-AnyLan 1. Token Ring 1.7.8. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2. HSSI (HIPI) 1. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.2. ISDN de bandă largă 1.

Telefoane fără fir 2.4.1.6. Comutatoare 2.3.2. Telefoane celulare digitale 2.5.5.3.7.7. Încadrarea.4.4. Buclele locale 2.4. Transmisia radio 2.3.8.3. Arhitectura sistemului ISDN 2.3. Undele infraroşii şi milimetrice 2. Perspectivele N-ISDN 2. SATELIŢI DE COMUNICAŢIE 2. Transmisia prin microunde 2.7. Spectrul electromagnetic 2. Telefoane celulare analogice 2.4.2. Controlul fluxului 113 .1.2.3.8.2.4. Sateliţi geosincroni 2. Transmisia de unde luminoase (laser) 2. Servicii oferite nivelului reţea.4.5.3. Cablu coaxial în bandă de bază 2. Transmisia în reţelele ATM 2. Circuitele virtuale în comparaţie cu circuitele comutate 2.3.1.3. NIVELUL LEGĂTURĂ DE DATE 3.6. ISDN DE BANDĂ INGUSTA 2. SISTEMULTELEFONIC 2. ISDN DE BANDĂ LARGĂ ŞI ATM 2.5.4.1. Fibre optice 2.6.1. RADIO CELULAR 2. Sateliţi de joasă altitudine 2.1. Cablu coaxial de bandă largă 2. Sateliţi versus fibre optice 3.1. 2.2. Servicii de comunicaţii personale 2. Servicii ISDN 2.2.2.3.8.4.5.3.7. Interfaţa ISDN. COMUNICAŢIILE FĂRĂ FIR 2.2. Comutatoare ATM 2.2. Trunchiuri şi multiplexare 2.2.3.3. Structura sistemului telefonic 2.5.2. Controlul erorilor.3.4.1.5.

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

INTERCONECTAREA REŢELELOR 5.2. Protocoale de control în Internet.2. Dirijarea cu trimitere multiplă .1. 5.3. Dirijarea prin difuzare. Dirijarea în reţele interconectate. 5. Adrese IP. Dirijarea pentru calculatoare gazdă mobile 5. Dirijare ierarhică.2. Inundarea 5. Dirijare cu vectori distanţă. Formarea traficului.2. Pachete de şoc 5. ALGORITMI PENTRU CONTROLUL CONGESTIEI 5. Specificarea fluxului 5.2.3.3.4. pentru porţi externe: BGP 5. Dirijarea pe calea cea mai scurtă.multicast 5. 5. NIVELUL REŢEA Servicii fumizate nivelului transport Organizarea internă a nivelului reţea Subreţele bazate pe circuite virtuale şi datagrame ALGORITMI DE DIRIJARE A PACHETELOR 5. 5.2. NIVELUL REŢEA ÎN INTERNET 5. NIVELUL REŢEA ÎN REŢELE ATM 5.1. 5. Circuite virtuale concatenate.5.2. Fragmentarea pachetelor.2.1.2.4. Interconectarea reţelelor fără conexiuni 5.4.1.1. Trimiterea multiplă în Internet.4.3. CIDR Dirijarea fără clase între domenii 5.5. Dirijarea şi comutarea 115 .1. 5.3. Controlul congestiei în subreţelele bazate pe circuite virtuale.2.3.4. Protocolul de dirijare folosit de porţile interioare: OSPF.4. Dirijarea folosind starea legăturilor 5.1.4.3. Politici pentru prevenirea congestiei 5. Punţi aflate la distantă REŢELE DE SATELIŢI 5. Principii generale ale controlului congestiei. Trecerea prin tunel. Dirijarea bazată pe flux.3.3. Controlul congestiei la transmisia multicast 5. Controlul fluctuaţiilor. Formatele celulelor. Stabilirea conexiunii. IP mobil.1. Principiul optimalităţii. Protocolul IP.1.3.6.4. Ziduri de protecţie.4.1. Subreţele 5. 4.

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

2. WORLD WIDE Web 7. Aspectele privind clientul 7.4.1.1.1.7.8. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7.3. Compresia datelor 7. 7. SMI . SECURITATEA REŢELEI 7. Spaţiul de nume DNS 7.6.8.5. Aspecte privind serverul 7.1.1. Java.5.1.7. Confidenţialitatea poştei electronice 7.1.1.3.2. Algoritmi cu cheie publică 7.1.2.2.2.5.2.Coloana vertebrală pentru trimitere multiplă 117 .4.4.3.4.6.5. Algoritmi cu cheie secretă 7.3.7. Protocolul SNMP 7.Baza de informaţii de administrare 7.4.1. Regăsirea informaţiilor pe Web 7. Transfer de mesaje 7. Video 7. Agentul utilizator 7. Scrierea unei pagini de Web în HTML.1.6.3.5.4.8. USENET din punctul de vedere al utilizatorului 7.Structura informaţiei de administrare 7. Servere de nume 7.2.5. Arhitectură şi servicii 7. POŞTA ELECTRONICĂ 7. MBone .3.8.3. Formatele mesajelor 7.4.SISTEMUL NUMELOR DE DOMENII 7.2.4. Două principii criptografice fundamentale.3.1. MULTIMEDIA 7. Criptografia tradiţională. Cum este implementat USENET 7.4. Înregistrări de resurse 7. Video la cerere 7. DNS . Modelul SNMP.5.1.4.7. MIB . Notaţia sintactică abstractă 7. Audio.8.7.5. Protocoale de autentificare 7.7. Java Script 7. Semnături digitale 7. ŞTIRI USENET 7.

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

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

Cancel anytime.