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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.<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. <b> adică aşa cum arata el în</b> codul sursa din Notepad Afişează din linie nouă textul preformatat. ca în codul-sursă. ca în codul sursă. Program sau variabilă Listing de program <xmp> </xmp> - <strike> </strike> <strong> </strong> <em> </em> <address> </address> <cite> </cite> <dfn> </dfn> <var> </var> <code> </code> - 45 . 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.

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

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 .

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

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

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 . Rezultatul rulării exemplului 5 • Exemplu 6.</BODY> </HTML> Rezultatul rulării exemplului 5 vezi mai jos figura 4.

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

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

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

Caracteristica bagajelor este marcată cu un pătrat.seria paşaportului şi destinaţia .B.. Iar valorile caracteristicilor este o listă numerotată cu A.<dd> - Descrierea termenului de definiţie Liste neordonate (marcate) <ul atribute> </ul> type= Începutul–sfârşitul listei marcate Forma marcajului: circle.. 54 . 1 (implicit) Cu ce valoare începe numerotarea (implicit cu prima) Element de listă <li> - 4. Numele .2. disc (implicit) Element de listă Liste ordonate (numerotate) <li> - <ol atribute> </ol> type= start= Începutul–sfârşitul listei numerotate Tipul numerotării: A. I. • Exemplul 7 Exemplul ce urmează constă din patru liste. Studierea marcajelor de organizare a listelor marcate.este o listă numerotată cu literele mici ale alfabetului latin.. Următoarea .C.este o listă numerotată cu cifre. square. a. Exemple de explorare Scop.3. ordonate şi listelor de definiţii. 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. Codul-sursă al exemplului 7: <HTML> <HEAD> <TITLE>Exemplu de liste</TITLE> </HEAD> <BODY BGCOLOR="fuchsia"> <H2 ALIGN="LEFT"><FONT COLOR=RED>LISTA BAGAJELOR <BR> PASAGERILOR RUTEI 7021</FONT></H2></FONT> <OL> <LI><I><B><U><FONTCOLOR=BLUE> AIOANEI PETRU</FONT></U></B> <FONT COLOR=MAROON> <UL TYPE=a> <LI>Serie la pasaport:A12763876 <LI>Punctul unde urmeaza:Moscova</FONT> <UL TYPE=SQUARE> <LI><B><FONTCOLOR=GREEN>DATE DESPRE BAGAJ:</FONT></B> <UL TYPE=A> <FONT COLOR=PURPLE> <LI>Nr. 2.Biletului:AA-1209 <LI> Nr. Atrageţi atenţia .toate se afişează la aceeaşi distanţă de la marginea stângă. Dacă alineatul are mai multe linii . Observaţi că elementele unui nivel al listelor se aliniază la aceeaşi distanţă de la marginea stângă.Notă: 1.

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

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

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

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

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

implicit left Înălţimea liniei (în pixeli). center. dar puteţi folosi height în TD Celulă de tabel Înălţimea celulei. right). textul din jurul tabelului curge pe partea opusă Spaţiu pe orizontală în jurul tabelului (în pixeli) Spaţiu pe verticală în jurul tabelului (în pixeli) Numărul de coloane ale unui tabel Ajustarea cadrelor în tabel . î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. 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 .doar în IE Ajustarea riglelor în tabel .doar în IE Linie de tabel Culoarea fondului pentru întreaga linie (valoare RGB sau nume culoare) Alinierea conţinutului celulelor (left.

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

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

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

1)) (elementul a(1.</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.2)) Figura 7. prima coloană Prima linie. charset=iso-8859-1"> </head> <body bgcolor=OLIVE text=MAROON> <table width="90%" border="20" BGCOLOR=PINK> <CAPTION><H2><FONT COLOR=RED>LISTA BAGAJELOR PASAGERILOR RUTEI 7021</FONT></H2></CAPTION> <tr> <td rowspan="2" width="4%">Nr.bagaj</td> <td width="13%">Greutatea(kg)</td> 65 . Rezultatul afişării exemplului 8 • Exemplul 9.biletului</td> <td width="12%">Nr. Un tabel mai sofisticat <html> <head> <title> Exemplul 9.2)) Linia a doua.1)) (elementul a(2.Un tabel mai sofisticat </title> <meta http-equiv="Content-Type" content="text/html.</td> <td width="13%">Destinatia</td> <td width="11%">Nr. 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. a doua coloană (elementul a(1. coloana a doua (elementul a(2. rutei</td> <td width="12%">Nr.

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

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

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

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

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

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

71

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

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

72

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. Internet 1.5.5. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2. X-28.1. EXEMPLE DE REŢELE 1.1.3.2.4.1.8. Cablul torsadat 112 . NIVELUL FIZIC 2. HSSI (HIPI) 1.2.2.6.1.1.5. REŢELE DE MARE VITEZA 1.3.8.4.7. Token BUS 1.1. 2. ISDN de bandă largă 1. semnale.5.8.5. FDDI 1. Retransmiterea cadrelor 1.7.7.2.4.7.5. Mesaje.1. ARPANET 1.2. MEDII DE TRANSMISIE 2.2. Structurarea reţelelor 2. UltraNet 1. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2. Ethernet 1. Token Ring 1. Novell NetWare 1.7.1.1.3. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.7.3.1.2.7. Fast Ethernet şi 100VG-AnyLan 1.7.5.1.2. Comunicarea X-25 cu terminale neinteligente (X3. SMDS–Serviciul de Date Comutat Multimegabit 1.2.5. Echipamente de conversie a semnalelor -modem-uri.7.1. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.6. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2. X-29) 1. ReţeleX-25.8. NSFNET 1.1.5. Gigabit Token Ring 1.6. linii şi canale de comunicaţii 2.4. Mediul magnetic 2.3.6.8. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.7.7.

Arhitectura sistemului ISDN 2.5.4.2. Buclele locale 2.5. Sateliţi versus fibre optice 3.7. COMUNICAŢIILE FĂRĂ FIR 2.1.4. Undele infraroşii şi milimetrice 2. Încadrarea.4. Interfaţa ISDN. Telefoane fără fir 2. Trunchiuri şi multiplexare 2.6.3. Controlul erorilor.4.8. Transmisia radio 2. Structura sistemului telefonic 2. ISDN DE BANDĂ INGUSTA 2. SATELIŢI DE COMUNICAŢIE 2.6.2.3.5. Telefoane celulare digitale 2.2.1.4.7.8. 2. Telefoane celulare analogice 2.2.3. Circuitele virtuale în comparaţie cu circuitele comutate 2.2.5.2.4. Transmisia în reţelele ATM 2.4. NIVELUL LEGĂTURĂ DE DATE 3. Spectrul electromagnetic 2.4.1.1.5.2.3.1.5. Cablu coaxial de bandă largă 2. Transmisia de unde luminoase (laser) 2.7. Fibre optice 2. SISTEMULTELEFONIC 2.3.3.1.3.3. Sateliţi de joasă altitudine 2. Servicii de comunicaţii personale 2.3.6. Comutatoare 2.2.2.3. Cablu coaxial în bandă de bază 2.3. ISDN DE BANDĂ LARGĂ ŞI ATM 2.1. Comutatoare ATM 2. Servicii oferite nivelului reţea. RADIO CELULAR 2.2. Sateliţi geosincroni 2.3. Controlul fluxului 113 .3. Transmisia prin microunde 2.4.2. Perspectivele N-ISDN 2.4. Servicii ISDN 2.1.7.3.8.5.

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful