Universitatea de Stat din Moldova Facultatea de Matematică şi Informatică

T.Bragaru, T.Sibirschi, V.Sibirschi

Aprobată de Consiliul Profesoral al Facultăţii de Matematică şi Informatică

Chişinău, 2002

2

CZU 004.55(075.8) B76 Bragaru T, Sibirschi T, Sibirschi V. Explorarea HTML. Chişinău: USM, 2002. – 118 p.
În lucrare sunt elucidate aspecte ale proiectării Web site-urilor. Pe baza unor exemple tipice se explorează posibilităţile limbajului HTML ca nucleu al Web tehnologiilor avansate. Totodată, lucrarea conţine un şir de întrebări de autocontrol şi exerciţii care ajută la o mai bună înţelegere a materialului. Se adresează celor cointeresaţi în construirea Web-paginilor, celor ce doresc să publice careva informaţii prin Internet şi/sau să dezvolte o afacere prin Internet. Dar în primul rând este destinată studenţilor-specialităţi de informatică, reţele de calculatoare, tehnologii informaţionale etc. Pentru a explora posibilităţile standarde ale HTML–lui, este necesară lansarea exemplelor. Pentru a afla mai multe informaţii decât cele prezentate în lucrare vizitaţi Web-paginile indicate în referinţe sau oricare alte izvoare de pe Internet. Sursa principală de inspiraţie a prezentei lucrări este Internet–ul. Referinţe utile vezi pe parcursul textului. O listă integră a adreselor de referinţă vezi în bibliografie. Recomandată de catedra Informatică şi Optimizare Discretă Recenzent: Catedra Informatică a Academiei de Ştiinţe a Republicii Moldova, şef catedră, doctor, conferenţiar, G. Secrieru.

Descrierea CIP a Camerei Naţionale a Cărţii Explorarea HTML/Bragaru T., Sibirschi T., Sibirschi V. - Chişinău: USM, 2002. – 118 p. Bibliogr. p.104 (18 tit.) ISBN 9975-70-13-2 50 ex. 004.55(075.8)

ISBN 9975-70-13-2 © Universitatea de Stat din Moldova, 2002
3

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

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

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

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

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

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

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

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

O temă creativă poate fi executată doar de o persoană a seriei de studii. Este necesar a utiliza posibilităţile avansate de hipertext şi hipermedia. cu plan de expunere conform titlurilor de nivelul II. sau titlurile de nivelul II cu tot ce este sub ele–ca plan al expunerii temei.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. sau titlurile de nivelul III. 12 . În funcţie de numărul de ore prevăzut cursului.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38

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

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

40

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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.toate se afişează la aceeaşi distanţă de la marginea stângă.Notă: 1.listele pot fi încadrate una în alta. 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. 2. Atrageţi atenţia .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

71

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

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

72

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

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

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

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

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

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

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

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

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

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

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

1. precum şi la sfârşitul p.3.scripturi utile vezi referinţele bibliografice. Tabelul 10.7. 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ARPANET 1.5.7. Mediul magnetic 2. Fast Ethernet şi 100VG-AnyLan 1. ISDN de bandă largă 1.5. UltraNet 1.4.3. FDDI 1.1.1. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2.2.1. 2. Cablul torsadat 112 .1.8.7. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.6.7. Ethernet 1. SMDS–Serviciul de Date Comutat Multimegabit 1.2.5. linii şi canale de comunicaţii 2. semnale. NIVELUL FIZIC 2.2. Comunicarea X-25 cu terminale neinteligente (X3. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2. Token BUS 1.5.7.2.6.8.3.6. REŢELE DE MARE VITEZA 1.8.7. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.7.2. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.1.1.8.5. EXEMPLE DE REŢELE 1. Retransmiterea cadrelor 1.3.8.7.2. HSSI (HIPI) 1.7. Mesaje. Echipamente de conversie a semnalelor -modem-uri.5.2. MEDII DE TRANSMISIE 2.1.7.1. Novell NetWare 1.3. Token Ring 1.1.1. X-29) 1.5.8. Gigabit Token Ring 1. ReţeleX-25. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2.3.5.4. Structurarea reţelelor 2.2.7. NSFNET 1. Internet 1.7.6. X-28.1.2.5.1.4.1.4.

Fibre optice 2.7.3.1. Transmisia în reţelele ATM 2.4.3. Circuitele virtuale în comparaţie cu circuitele comutate 2. Comutatoare ATM 2.3. Trunchiuri şi multiplexare 2.4.4.3. Cablu coaxial în bandă de bază 2. Spectrul electromagnetic 2.2.4.5.6. COMUNICAŢIILE FĂRĂ FIR 2. Perspectivele N-ISDN 2. Sateliţi de joasă altitudine 2.3. Transmisia radio 2.2.5. Comutatoare 2. Telefoane celulare digitale 2. Buclele locale 2.8. SISTEMULTELEFONIC 2.1.6.3.8.3.3.1. NIVELUL LEGĂTURĂ DE DATE 3.4.2.5.4.3.1. Sateliţi versus fibre optice 3.3.7. Servicii oferite nivelului reţea.5. Telefoane fără fir 2. Transmisia prin microunde 2. Controlul erorilor.3. RADIO CELULAR 2.6. Interfaţa ISDN.5.4.2. ISDN DE BANDĂ INGUSTA 2.2.2. Servicii ISDN 2.5.2.3.2.8. Cablu coaxial de bandă largă 2. ISDN DE BANDĂ LARGĂ ŞI ATM 2.3. Arhitectura sistemului ISDN 2.2. Servicii de comunicaţii personale 2.4. 2.2. Structura sistemului telefonic 2.1.7.1. Încadrarea.2.4.5.4.1.3. Undele infraroşii şi milimetrice 2. Telefoane celulare analogice 2. Sateliţi geosincroni 2. Controlul fluxului 113 . Transmisia de unde luminoase (laser) 2.7.1. SATELIŢI DE COMUNICAŢIE 2.

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

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

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

Modelul SNMP.2.5.2.3. Două principii criptografice fundamentale.2.3.6.5.3.1. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7. Aspectele privind clientul 7.5.Coloana vertebrală pentru trimitere multiplă 117 .2. Algoritmi cu cheie publică 7. WORLD WIDE Web 7.1.6.6.1. SMI . Înregistrări de resurse 7. Transfer de mesaje 7. Video la cerere 7.3. Criptografia tradiţională.4.1.7. USENET din punctul de vedere al utilizatorului 7. Regăsirea informaţiilor pe Web 7.4.8.4. Confidenţialitatea poştei electronice 7.Baza de informaţii de administrare 7. DNS . Cum este implementat USENET 7. 7.1. Java Script 7.8.1.5. Arhitectură şi servicii 7.2. Protocoale de autentificare 7. MIB . Scrierea unei pagini de Web în HTML.4. Semnături digitale 7.1.1.5.8. MULTIMEDIA 7. Agentul utilizator 7.3. Servere de nume 7. Notaţia sintactică abstractă 7. MBone .1. Algoritmi cu cheie secretă 7. Video 7. Java. Protocolul SNMP 7. Aspecte privind serverul 7.4. Audio.4.1.7.2.7. POŞTA ELECTRONICĂ 7.8.1.3. Compresia datelor 7. Formatele mesajelor 7.1. Spaţiul de nume DNS 7.1.4.7.3.7.7.Structura informaţiei de administrare 7.8. SECURITATEA REŢELEI 7.3.5.5.5.4.4.2.SISTEMUL NUMELOR DE DOMENII 7.4. ŞTIRI USENET 7.2.

Gestiunea proceselor şi procesoarelor 9. Tehnologii avansate de proiectare a SO 9. Privire de sinteză asupra familiilor SO de reţea 9.2. Structura SO de reţea 9.4.4.1. Funcţiile SO de intrare . Problemele realizării SO de reţea.3.2. staţii de lucru.2.2.3.2.5. Definirea SO locale 9. Funcţiile SO de organizare a lucrului în reţea 9. Primitive de transmitere a mesajelor 9.2.5. Cerinţe faţă de SO moderne 9.4.8. superservere.1. Învelişuri de reţea şi mijloace încorporate 9.2. Arhitecturi de bază (RISC. Cerinţe generale faţă de calculatoare 8.4.3. mainframe.3.CENTRE DE PRELUCRARE A DATELOR ÎN REŢELE 8.3. Criterii de selectare a SO de reţea 9. Generalităţi 9. CISC etc) 9.5. Lansarea procedurilor la distanţă 9.ieşire 9.3.2.1. SISTEME DE OPERARE DE REŢEA 9. Familia SO de reţea Windows NT a companiei Microsoft 9. rutere) 8.3.1.2. servere.3.1. Semantica distribuirii fişierelor 9. Funcţiile SO de gestiune a resurselor locale 9.5.1. Funcţiile sistemului de fişiere 9.2.3. Servere şi servicii de fişiere 9.1.4.2. SO cu servere rezervate 9.1. SO de la egal la egal 9. CALCULATOARELE.1.4.1. Familia SO de reţea Unix 118 .2.4.1.3.3. SO NetWare a companiei Novell 9.5. Taxonomia calculatoarelor conform funcţiilor în reţea (calculatoare personale. 9. Gestiunea memoriei 9.

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

Sign up to vote on this title
UsefulNot useful