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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fondul rămâne fix <b> </b> <i> </i> <u> </u> Afişează textul cu litere aldine (îngroşate) Afişează textul cu litere italice (înclinate) Afişează textul subliniat 44 . dacă derulăm rties = pagina.Color = <body atribute> </body> bgcolor = backgro und = text = link = vlink = alink = Culoarea (dată prin nume sau valoarea RGB). pentru color = #00ffff obţinem: Defineşte începutul şi sfârşitul corpului documentului HTML Culoarea fondului paginii (dată prin nume sau valoarea RGB) Url .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".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 .

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 . 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.<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ă. adică aşa cum arată el în codul-sursă din Notepad Afişează textul taiat Evidenţiere logică puternică Stil logic de evidenţiere Informaţii despre adresă şi autor Citare bibliografică Definiţie de cuvân. <b> adică aşa cum arata el în</b> codul sursa din Notepad Afişează din linie nouă textul preformatat. ca în codul-sursă.

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

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

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

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

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

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

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

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

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

Bagajului: 000001 <LI> Greutate: 25kg</FONT> </UL> </UL> </UL> <BR> <LI><I><B><U><FONTCOLOR=BLUE>BAGRIN ION</FONT></U></B> <FONT COLOR=MAROON> <UL TYPE=a> <LI>Serie la pasaport:A12700876 <LI>Punctul unde urmeaza:Moscova</FONT> <UL TYPE=SQUARE> 55 . 3.listele pot fi încadrate una în alta. Observaţi că elementele unui nivel al listelor se aliniază la aceeaşi distanţă de la marginea stângă. Atrageţi atenţia .Biletului:AA-1209 <LI> Nr. 2.toate se afişează la aceeaşi distanţă de la marginea stângă. Codul-sursă al exemplului 7: <HTML> <HEAD> <TITLE>Exemplu de liste</TITLE> </HEAD> <BODY BGCOLOR="fuchsia"> <H2 ALIGN="LEFT"><FONT COLOR=RED>LISTA BAGAJELOR <BR> PASAGERILOR RUTEI 7021</FONT></H2></FONT> <OL> <LI><I><B><U><FONTCOLOR=BLUE> AIOANEI PETRU</FONT></U></B> <FONT COLOR=MAROON> <UL TYPE=a> <LI>Serie la pasaport:A12763876 <LI>Punctul unde urmeaza:Moscova</FONT> <UL TYPE=SQUARE> <LI><B><FONTCOLOR=GREEN>DATE DESPRE BAGAJ:</FONT></B> <UL TYPE=A> <FONT COLOR=PURPLE> <LI>Nr.Notă: 1. Dacă alineatul are mai multe linii .

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

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

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

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

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

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

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

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

figura 7. • Exemplul 8. coloana întâi (elementul a(2. Structurarea unui tabel <HTML> <HEAD> <TITLE> Exemplul 8</TITLE> </HEAD> <H1>Cel mai simplu tabel din 2 coloane si 2 linii</H1> <TABLE BORDER=1> <!--Începutul tabelului --> <CAPTION> <!--Denumirea (titlul)tabelului --> TABELUL POATE AVEA UN TITLU </CAPTION> <TR> <!--Începutul primei linii de tabel--> <TD> <!--Începutul primei celule--> Prima linie.2)--> Linia a doua.1)) </TD> <!--Sfârşitul primei celule--> <TD> <!--Începutul celulei a doua--> Prima linie.2)--> </TR> <!--Sfârşitul liniei a doua--> </TABLE> <!--Sfârşitul tabelei--> </BODY> </HTML> Rezultatul afişării exemplului 8 vezi mai jos. Explorarea posibilităţilor HTML de construiremodificare a tabelelor.1) --> <TD> <!--Începutul celulei a(2. coloana a doua (elementul a(2.4.2)) </TD> <!--Sfârşitul celulei a doua--> </TR> <!--Sfârşitul primei linii--> <TR> <!--Începutul liniei a doua de tabel--> <TD> <!--Începutul celulei a(2. Exemple de explorare Scop.1)) </TD> <!--Sfârşitul celulei a(2.2)) </TD> <!--Sfârşitul celulei a(2.2.1)--> Linia a doua. a doua coloană (elementul a(1.4. 64 . prima coloană (elementul a(1.

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

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

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

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

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

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

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

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

76 . intre marcajele <BR> HEAD si /HEAD.Titlui paginii </a> </h4> <p>:In general in antetul unei pagini Web.. ancore</title> </head> <body> <h3> 2.1"><b>Ancore</b></a><b> </b></li> <li><a href="#3. Cuprins de nivelul II. figura 10.5"><b>Tabele </b></a></li> </ul> </li> <li><a href="3"><b>Crearea legaturilor</b></a><b> </b><ul> <li><a href="#3. <BR>cu atribute name .Elemente textuale</a> </h4> In continuare urmeaza textul sub titlul 2.2.2.1"><b>Titlul paginii </b></a><b> </b></li> <li><a href="#2. Elemente textuale </h3> <ul> <li><a href="#2.2.1"><b>Divizori</b></a><b> </b></li> <li><a href="#2. Cuprins de nivelul II.2.content perechi.3"><b>Alineate</b></a><b> </b></li> <li><a href="#2. <h4><a name="2. ancore <html> <head> <title> Exemplul 11.1">2. exista mai multe marcaje META.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..4"><b>Liste </b></a></li> <li><a href="#2.2.2"><b>Blocuri de structura</b></a><b> </b><ul> <li><a href="#2.2"><b>Titluri si subritluri</b></a><b> </b></li> <li><a href="#2.Exemplul 11..1.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

implicit yes) Opţiuni pentru bara de derulare : yes (da). no (nu). utilizat de marcajul <a href = "url" target = nume> Opţiuni pentru bara de derulare: yes (da).<frame atribute> src = " url " name = Definiţia unui cadru Sursa cadrului Numele cadrului. auto (dacă este nevoie). implicit "auto" scrolling = noresize marginheight = marginwidth = <noframes> </ noframes> <iframe atribute> </ iframe> src = " url " name = height = width = frameborder = scrolling = 91 . auto (dacă este nevoie). 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 "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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.3. Introducere.1.3. Introducere. Domenii de utilizare II. concepte generale 2. Reţele infraroşii 1.2.1.2. Domenii de utilizare 110 .Anexa 4. Fizica proceselor 2. scurt istoric 1.2.2. Clasificarea aparaturii radio 2. Reţele cu microunde 2.2.2. Caracteristica reţelelor cu microunde 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. Neajunsurile tehnologiei 2.

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

TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.4.8.7.2. REŢELE DE MARE VITEZA 1.1. NIVELUL FIZIC 2.1.5.8. linii şi canale de comunicaţii 2. ISDN de bandă largă 1. FDDI 1.2.2.7.5.1.1.7. MEDII DE TRANSMISIE 2.4.5.3.7. Mediul magnetic 2.1.2.6.5.4.5.2.5.2.2. Novell NetWare 1. ARPANET 1.1.5. EXEMPLE DE REŢELE 1. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2. Token Ring 1.1.8.7.7. Token BUS 1. Internet 1. X-29) 1.1. Gigabit Token Ring 1.7. SMDS–Serviciul de Date Comutat Multimegabit 1.3.3. X-28.6. semnale. Ethernet 1.1.3. NSFNET 1.8.8.3.1.1.5.2. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2. Retransmiterea cadrelor 1. Echipamente de conversie a semnalelor -modem-uri.7.6.6.4. UltraNet 1. ReţeleX-25.2.5.7.7. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2. HSSI (HIPI) 1. Cablul torsadat 112 .1. 2. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.1. Comunicarea X-25 cu terminale neinteligente (X3.7. Structurarea reţelelor 2. Mesaje.8. Fast Ethernet şi 100VG-AnyLan 1.

SATELIŢI DE COMUNICAŢIE 2. ISDN DE BANDĂ LARGĂ ŞI ATM 2.3.5. Transmisia prin microunde 2. Controlul erorilor.1. RADIO CELULAR 2. Controlul fluxului 113 .5. Sateliţi de joasă altitudine 2.5.1. Cablu coaxial de bandă largă 2.1.5. Telefoane celulare digitale 2.5. Buclele locale 2. Undele infraroşii şi milimetrice 2.3.1.2.2.2.7.3. Sateliţi geosincroni 2. Comutatoare 2. Telefoane celulare analogice 2. Circuitele virtuale în comparaţie cu circuitele comutate 2.5. Perspectivele N-ISDN 2. Transmisia de unde luminoase (laser) 2. Telefoane fără fir 2. Încadrarea.3.2. Fibre optice 2.3. Spectrul electromagnetic 2. Cablu coaxial în bandă de bază 2.2.4.2.4.3.6.3. Servicii de comunicaţii personale 2.3.1.3.7.2.8.4.5.3. Transmisia în reţelele ATM 2.3.1.4.4. Trunchiuri şi multiplexare 2. COMUNICAŢIILE FĂRĂ FIR 2.4.4.2. Interfaţa ISDN.6. Comutatoare ATM 2.1.2.6. Structura sistemului telefonic 2.8. Arhitectura sistemului ISDN 2.3.3.2.4.4.7. Transmisia radio 2.4.8. 2. Sateliţi versus fibre optice 3.7. Servicii ISDN 2.3. NIVELUL LEGĂTURĂ DE DATE 3.2. ISDN DE BANDĂ INGUSTA 2. SISTEMULTELEFONIC 2.1. Servicii oferite nivelului reţea.

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

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

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

6.Structura informaţiei de administrare 7. Spaţiul de nume DNS 7. MIB . Protocoale de autentificare 7.Baza de informaţii de administrare 7.3.3.8. Semnături digitale 7.1.7. Înregistrări de resurse 7. Cum este implementat USENET 7.7. Notaţia sintactică abstractă 7. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7. Criptografia tradiţională.1. 7. DNS . Transfer de mesaje 7. Două principii criptografice fundamentale.1.7.1.2.2.7. MBone .4.3.SISTEMUL NUMELOR DE DOMENII 7. Regăsirea informaţiilor pe Web 7.6. Confidenţialitatea poştei electronice 7.4. Aspectele privind clientul 7.7.1.8.1. Modelul SNMP. Aspecte privind serverul 7. Algoritmi cu cheie publică 7.1.1. Arhitectură şi servicii 7.1.2.2. MULTIMEDIA 7.4.7.1.1. SECURITATEA REŢELEI 7. POŞTA ELECTRONICĂ 7.5.5.3.5. Algoritmi cu cheie secretă 7.8.5.8.5. SMI .4. Servere de nume 7. WORLD WIDE Web 7.3.1. Protocolul SNMP 7.8.4. Compresia datelor 7.5. Formatele mesajelor 7. Scrierea unei pagini de Web în HTML. Video la cerere 7. Java.2.4.5.4. Audio. Agentul utilizator 7.3. Video 7.2.4. USENET din punctul de vedere al utilizatorului 7.Coloana vertebrală pentru trimitere multiplă 117 .1.2.4.5.3.3. Java Script 7.4.2.6. ŞTIRI USENET 7.

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

Autori: T. T.Sibirschi. Formatul 60 x 84 1/16 Coli editoriale 4.Bragaru.2. Comanda 62. str. mun. Chişinău.4. V. Coli de tipar 7. Mateevici.Sibirschi Denumirea lucrării: Explorarea HTML Tehnoredactare computerizată T Bragaru Bun de tipar 11-03-2002. 60 119 . 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.