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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

care să interpreteze comenzile de marcare. 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.org/. 3.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. devine posibil ca orice program de navigare să poată să citească şi să formateze orice pagină Web. Standardizarea oficială a limbajului HTML este făcută de Consorţiul WWW. Posibilitatea formatării paginii recepţionate este foarte importantă. Prin standardizarea şi includerea comenzilor de marcaj în fiecare fişier HTML. Nu toate procesoarele de texte funcţionează aşa. 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. deoarece o pagină poate să fie construită utilizând un ecran cu 1024 x 768 pixeli utilizând culori codificate cu 24 de biţi. dar diferiţi furnizori de navigatoare şi programe de navigare au adăugat o serie de extinderi proprii. Procesoarele de text pentru Macintosh.w3.6. 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 . de exemplu. Astfel de abordări îngreunează sarcina standardizării limbajului HTML. Specificaţia curentă a limbajului HTML se poate consulta pe serverul http://www. Documentele scrise într-un limbaj de marcare pot să fie comparate cu cele obţinute utilizând procesoare de text de tip MS Word sau Word Perfect. păstrează informaţia în structuri de date separate.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fondul rămâne fix <b> </b> <i> </i> <u> </u> Afişează textul cu litere aldine (îngroşate) Afişează textul cu litere italice (înclinate) Afişează textul subliniat 44 .ul (adresa şi numele) imaginii de fond a paginii Culoarea textului (nume culoare sau valoare RGB) Culoarea legăturilor nevizitate (neactivate) din pagină (nume sau RGB) Culoarea legăturilor vizitate din pagină (nume sau RGB) Culoarea legăturilor în timpul click .ului (nume sau RGB) leftmarg Deplasarea întregului material din pagină faţă de in = marginea din stânga (pixeli) rightmar Deplasarea întregului material din pagină faţă de gin = marginea din dreapta (pixeli) topmarg Deplasarea întregului material din pagină faţă de in = marginea de sus (pixeli) bgprope Primeşte doar valoarea "fixed".Color = <body atribute> </body> bgcolor = backgro und = text = link = vlink = alink = Culoarea (dată prin nume sau valoarea RGB). pentru color = #00ffff obţinem: Defineşte începutul şi sfârşitul corpului documentului HTML Culoarea fondului paginii (dată prin nume sau valoarea RGB) Url . dacă derulăm rties = pagina.

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

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

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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

textul din jurul tabelului curge pe partea opusă Spaţiu pe orizontală în jurul tabelului (în pixeli) Spaţiu pe verticală în jurul tabelului (în pixeli) Numărul de coloane ale unui tabel Ajustarea cadrelor în tabel . în unele navigatoare nu funcţionează. implicit left Înălţimea liniei (în pixeli). dar puteţi folosi height în TD Celulă de tabel Înălţimea celulei. dacă pe aceeaşi linie (TR) daţi din greşeală 2 valori diferite pentru height în TD.doar în IE Linie de tabel Culoarea fondului pentru întreaga linie (valoare RGB sau nume culoare) Alinierea conţinutului celulelor (left. right). el va lua maximul pentru toate celulele liniei Lăţimea celulei HSPACE = VSPACE = COLS = FRAME = RULES = <TR ATRIBUTE> </ TR> BGCOLOR= ALIGN= HEIGHT= <TD ATRIBUTE> </ TD> - HEIGHT = WIDTH= 61 .doar în IE Ajustarea riglelor în tabel .Culoarea mai închisă a chenarului BORDERCOL (dreapta + jos) (nume culoare sau ORDARK = valoare RGB) ALIGN = Aliniază tabelul în dreapta (right) sau stânga (left) paginii. 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. center. right) ALIGN = BASELINE ALIGN = CARACTER ALIGN = JUSTIFY COLSPAN = ROWSPAN = NOWRAP <TH> </ TH> - <CAPTION ATRIBUTE> </CAPTION> ALIGN = 62 . left. bottom. dar conţinutul va fi centrat şi îngroşat (bold).împreună cu TD pe aceeaşi linie Text explicativ asociat tabelului Alinierea textului (top = implicit. implicit middle Aliniază celulele cu linia de bază a textului adiacent Aliniază coloana faţă de un anumit caracter (implicit caracterul ". ") Aliniază marginile din stânga şi dreapta ale textului Numărul de coloane pe care se întinde celula Numărul de linii pe care se întinde celula Nu permite despărţirea textului pe linii în celulă Poate fi folosit : . . implicit left Alinierea conţinutului celulei pe verticală: top (sus). middle (mijloc). bottom (jos). right).în loc de TD.

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

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

prima coloană Prima linie. Un tabel mai sofisticat <html> <head> <title> Exemplul 9.biletului</td> <td width="12%">Nr.</td> <td width="13%">Destinatia</td> <td width="11%">Nr. Rezultatul afişării exemplului 8 • Exemplul 9.1)) (elementul a(2.bagaj</td> <td width="13%">Greutatea(kg)</td> 65 .</td> <td colspan="3"> <div align="center">Date despre pasageri.1)) (elementul a(1. 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.Un tabel mai sofisticat </title> <meta http-equiv="Content-Type" content="text/html. coloana întâi Linia a doua. rutei</td> <td width="12%">Nr.2)) Figura 7.2)) Linia a doua. coloana a doua (elementul a(2.Cel mai simplu tabel din 2 coloane si 2 linii TABELUL POATE AVEA UN TITLU Prima linie. charset=iso-8859-1"> </head> <body bgcolor=OLIVE text=MAROON> <table width="90%" border="20" BGCOLOR=PINK> <CAPTION><H2><FONT COLOR=RED>LISTA BAGAJELOR PASAGERILOR RUTEI 7021</FONT></H2></CAPTION> <tr> <td rowspan="2" width="4%">Nr.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.1. Tabelul 10.3. precum şi la sfârşitul p.7.

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

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

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

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

Rezultatul executării exemplului 13 4. O practică frecventă printre creatorii de site-uri este aceea de a utiliza două frame-uri verticale: în fereastra stângă se află de obicei butoane. prin a 89 . 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.8. FERESTRE (CADRE. în fiecare dintre acestea rulând diferite documente (fişiere).

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

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

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

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

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

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

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

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. Este modul cel mai recomandat. Elementele stilurilor Atribut background color font-family font-size Descriere Imagini sau culori de fundal Culoarea textului Tipul fontului Dimensiunea fontului Valori URL-ul (imaginii) sau culori date prin nume sau valoare RGB Nume sau valoare RGB Numele fontului sau al familiei de fonturi Dată în puncte(pt). Putem face chiar ca un anumit stil să poată fi aplicat numai cu o anumită instrucţiune. numai pentru stiluri Specifică un anumit stil Specifică un anumit stil Tabelul 13. inch(în). În aşa caz folosiţi forma explicită. pixeli(px) 97 . Unele atribute din tabelul 12-13 pot fi specificate şi sub o forma prescurtată. Se poate întâmpla ca unele caracteristici specificate sub forma prescurtată să nu funcţioneze. Tabelul 12.site. mai ales pentru site-uri mari. nu cea prescurtată. iar altele să poată fi aplicate cu mai multe instrucţiuni. centimetri(cm).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.8. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.2.6.5.3.5.1.7. REŢELE DE MARE VITEZA 1.1.7.2.7.1. 2. ARPANET 1.6. Mesaje.1.1.4.2.2.2. HSSI (HIPI) 1.2.1.4. MEDII DE TRANSMISIE 2. ReţeleX-25. semnale.1.3. Gigabit Token Ring 1. Fast Ethernet şi 100VG-AnyLan 1. SMDS–Serviciul de Date Comutat Multimegabit 1. Retransmiterea cadrelor 1.1.5. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.4. Structurarea reţelelor 2.7.7. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.7.3.5.8. NIVELUL FIZIC 2. ISDN de bandă largă 1. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2.3.1.8.8. X-29) 1.1.2. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.7. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2. NSFNET 1. Internet 1. FDDI 1.5.7. EXEMPLE DE REŢELE 1. Novell NetWare 1.7.2. Comunicarea X-25 cu terminale neinteligente (X3. Mediul magnetic 2.7.5.1.2.7.8. Cablul torsadat 112 .8. Ethernet 1. X-28.5. Token BUS 1.1.5.1. UltraNet 1. Echipamente de conversie a semnalelor -modem-uri.5.6. linii şi canale de comunicaţii 2.4. Token Ring 1.3.

Structura sistemului telefonic 2.3.1. Spectrul electromagnetic 2.2. Sateliţi geosincroni 2.7. Transmisia de unde luminoase (laser) 2.1.2.3. Circuitele virtuale în comparaţie cu circuitele comutate 2.4.5. Comutatoare 2.2.8. Servicii oferite nivelului reţea. COMUNICAŢIILE FĂRĂ FIR 2. 2.4. Servicii de comunicaţii personale 2.1.3. Telefoane fără fir 2. Cablu coaxial în bandă de bază 2.3.3.5. RADIO CELULAR 2.3. SATELIŢI DE COMUNICAŢIE 2. Telefoane celulare analogice 2. Servicii ISDN 2.4.1. Undele infraroşii şi milimetrice 2.2. SISTEMULTELEFONIC 2.3.3. Transmisia radio 2.3. Perspectivele N-ISDN 2.2. Telefoane celulare digitale 2.6.3. Sateliţi de joasă altitudine 2.1. Buclele locale 2.2.1.6.4.7.2. Cablu coaxial de bandă largă 2.2.1. Interfaţa ISDN.4. Sateliţi versus fibre optice 3. Transmisia prin microunde 2.3.8. Controlul fluxului 113 . Fibre optice 2. Controlul erorilor.3.5.2.7. ISDN DE BANDĂ INGUSTA 2.5.2.7.6. Încadrarea.8.2.5. Comutatoare ATM 2. Transmisia în reţelele ATM 2.5.4. NIVELUL LEGĂTURĂ DE DATE 3.4.4. ISDN DE BANDĂ LARGĂ ŞI ATM 2.4. Trunchiuri şi multiplexare 2.5.3.3. Arhitectura sistemului ISDN 2.4.1.

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

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

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

8. Algoritmi cu cheie secretă 7. Compresia datelor 7.Coloana vertebrală pentru trimitere multiplă 117 .1.4. MULTIMEDIA 7.1.1. 7. WORLD WIDE Web 7.7. Algoritmi cu cheie publică 7.3.4.3.5.7.Structura informaţiei de administrare 7.2.3. Cum este implementat USENET 7.4.3. SMI .8. Transfer de mesaje 7.7. Criptografia tradiţională.6. Video la cerere 7.6.1.3. Aspecte privind serverul 7.4.5.1. Arhitectură şi servicii 7. Semnături digitale 7. DNS . SECURITATEA REŢELEI 7.1.1.4. Servere de nume 7. Regăsirea informaţiilor pe Web 7. Java. Două principii criptografice fundamentale.2. Modelul SNMP.1.2.6. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7.2.Baza de informaţii de administrare 7.5.3. MBone .5. Protocoale de autentificare 7.8.5. MIB .4. Înregistrări de resurse 7. Formatele mesajelor 7.8.8.1.SISTEMUL NUMELOR DE DOMENII 7. POŞTA ELECTRONICĂ 7.7. Agentul utilizator 7.5.1.3.1. ŞTIRI USENET 7. USENET din punctul de vedere al utilizatorului 7.2.4. Video 7. Notaţia sintactică abstractă 7.5.2.2.1.4.7.3.1.4. Protocolul SNMP 7. Aspectele privind clientul 7.2. Audio. Scrierea unei pagini de Web în HTML. Java Script 7.7. Spaţiul de nume DNS 7.5.4. Confidenţialitatea poştei electronice 7.

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

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

Cancel anytime.