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

T.Bragaru, T.Sibirschi, V.Sibirschi

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

Chişinău, 2002

2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38

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

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

40

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

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

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

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". 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 .Color = <body atribute> </body> bgcolor = backgro und = text = link = vlink = alink = Culoarea (dată prin nume sau valoarea RGB). dacă derulăm rties = pagina. 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

71

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

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

72

Frunzele acestor arbori pot fi documente plate sau liniare. -self = încarcă pagina în cadrul curent. fără nume. Tabelul 8. deasupra altor ferestre de pe ecran. 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ă. TARGET = " NUMECADRU" 73 . -blank = încarcă pagina într-o fereastră noua. 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). -parent = încarcă pagina în fereastra părinte. este valoarea implicită. între ghilimele nu trebuie să existe spaţii. care adesea au referinţe inverse (către părinţi). 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.arborescente.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.4. Ethernet 1. Mediul magnetic 2.3.2. Fast Ethernet şi 100VG-AnyLan 1.6. REŢELE DE MARE VITEZA 1. HSSI (HIPI) 1.6.7.8. ReţeleX-25.5.5. NIVELUL FIZIC 2.1.8.4. MEDII DE TRANSMISIE 2. Token BUS 1.5.2.5. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.2.1.4.2.1. Retransmiterea cadrelor 1. ISDN de bandă largă 1.7. SMDS–Serviciul de Date Comutat Multimegabit 1.1. UltraNet 1.4.5.7. FDDI 1.8. Internet 1.3.8. Mesaje.1.3. Token Ring 1.5. Novell NetWare 1. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.5. linii şi canale de comunicaţii 2. Cablul torsadat 112 . ARPANET 1.2.7.8.3. NSFNET 1.5.1.7. Gigabit Token Ring 1. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2.6.2. Structurarea reţelelor 2. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2.5.7. 2. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1. Echipamente de conversie a semnalelor -modem-uri. X-29) 1.1.2.7.7.7. semnale. EXEMPLE DE REŢELE 1.7.3.2. Comunicarea X-25 cu terminale neinteligente (X3.1.1.6.1.1.8.1.1.2. X-28.

2. Comutatoare ATM 2.3.3.1.3. Controlul erorilor. Cablu coaxial în bandă de bază 2.2.8.2. Telefoane celulare analogice 2.3.8.4. Transmisia radio 2. Circuitele virtuale în comparaţie cu circuitele comutate 2. Servicii oferite nivelului reţea.2.3. Transmisia prin microunde 2.5.7.1. Comutatoare 2.5. Fibre optice 2.7. ISDN DE BANDĂ INGUSTA 2. COMUNICAŢIILE FĂRĂ FIR 2.3.1. Sateliţi geosincroni 2.4. Cablu coaxial de bandă largă 2.2.7. SATELIŢI DE COMUNICAŢIE 2.3.6.2. Trunchiuri şi multiplexare 2.1.4.4. Structura sistemului telefonic 2.7.5. Servicii de comunicaţii personale 2.4. RADIO CELULAR 2. Încadrarea.3.4.2.1. Transmisia de unde luminoase (laser) 2.5.2. Transmisia în reţelele ATM 2.6.2.3. Telefoane celulare digitale 2.6.1.5.3.3. Sateliţi de joasă altitudine 2.3.1.3.5. Interfaţa ISDN. NIVELUL LEGĂTURĂ DE DATE 3.4. Servicii ISDN 2. Sateliţi versus fibre optice 3. Spectrul electromagnetic 2.8.5. Arhitectura sistemului ISDN 2.4. Perspectivele N-ISDN 2.4.2.4.2.3. Undele infraroşii şi milimetrice 2. ISDN DE BANDĂ LARGĂ ŞI ATM 2. SISTEMULTELEFONIC 2.2. Telefoane fără fir 2.1. Buclele locale 2. Controlul fluxului 113 .

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

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

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

3. Protocolul SNMP 7.2.1.2.8. Video 7.3. Java. Criptografia tradiţională.3. SECURITATEA REŢELEI 7.4.5.7.1. Cum este implementat USENET 7.7.4.1. MULTIMEDIA 7.4.1. Scrierea unei pagini de Web în HTML. Algoritmi cu cheie secretă 7.3.8.4.4.3. Algoritmi cu cheie publică 7. Aspecte privind serverul 7.6.5.3. Agentul utilizator 7.5.4. Notaţia sintactică abstractă 7. Aspectele privind clientul 7.Baza de informaţii de administrare 7.5.1.3. Confidenţialitatea poştei electronice 7. Două principii criptografice fundamentale. MBone .8. DNS .5.2. Spaţiul de nume DNS 7. Semnături digitale 7.6.1. Transfer de mesaje 7. WORLD WIDE Web 7. USENET din punctul de vedere al utilizatorului 7.Coloana vertebrală pentru trimitere multiplă 117 .7. ŞTIRI USENET 7. Modelul SNMP.4.1.1. Java Script 7.1.SISTEMUL NUMELOR DE DOMENII 7.4.1. Regăsirea informaţiilor pe Web 7.7.2. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7. 7. Compresia datelor 7.8.6. Înregistrări de resurse 7. Servere de nume 7.Structura informaţiei de administrare 7. Arhitectură şi servicii 7.2.7. SMI . Formatele mesajelor 7.4.3.7.1.5.5.2. MIB .4. Audio.1. Video la cerere 7.2.5.1. POŞTA ELECTRONICĂ 7. Protocoale de autentificare 7.8.2.

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

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

Cancel anytime.