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

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

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

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

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

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

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

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

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

tradiţională. În funcţie de numărul de ore prevăzut cursului. sau titlurile de nivelul II cu tot ce este sub ele–ca plan al expunerii temei. ca teme individuale (conform anexei 5) pot fi titlurile de nivelul I. sau titlurile de nivelul III. cu plan de expunere conform titlurilor de nivelul II. Este necesar a utiliza posibilităţile avansate de hipertext şi hipermedia. 12 . 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.

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

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

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

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

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

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

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

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

păstrează informaţia în structuri de date separate.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. 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. Specificaţia curentă a limbajului HTML se poate consulta pe serverul http://www.org/. Astfel de abordări îngreunează sarcina standardizării limbajului HTML. devine posibil ca orice program de navigare să poată să citească şi să formateze orice pagină Web. Standardizarea oficială a limbajului HTML este făcută de Consorţiul WWW. 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. Acest tip de sisteme pot să memoreze fişierele utilizând marcaje ascunse pentru ca formatarea să se poată reface ulterior. Elemente de bază ale documentelor HTML 21 .w3. care să interpreteze comenzile de marcare. 3. dar s-ar putea să fie necesară afişarea într-o mică fereastră de pe un ecran cu 640 x 480 pixeli şi utilizând culori codificate pe 8 biţi. Procesoarele de text pentru Macintosh. de exemplu. 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. Posibilitatea formatării paginii recepţionate este foarte importantă.6. 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. Prin standardizarea şi includerea comenzilor de marcaj în fiecare fişier HTML.

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

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

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

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

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

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

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. 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.Creaţi o bază de date care să includă acţiunile dvs. de promovare. în funcţie de motorul de căutare ales. De exemplu. 28 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. el va lua maximul pentru toate celulele liniei Lăţimea celulei HSPACE = VSPACE = COLS = FRAME = RULES = <TR ATRIBUTE> </ TR> BGCOLOR= ALIGN= HEIGHT= <TD ATRIBUTE> </ TD> - HEIGHT = WIDTH= 61 . right). în unele navigatoare nu funcţionează. dar puteţi folosi height în TD Celulă de tabel Înălţimea celulei. dacă pe aceeaşi linie (TR) daţi din greşeală 2 valori diferite pentru height în TD.doar în IE Linie de tabel Culoarea fondului pentru întreaga linie (valoare RGB sau nume culoare) Alinierea conţinutului celulelor (left. implicit left Înălţimea liniei (în pixeli). 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 .doar în IE Ajustarea riglelor în tabel . center.

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

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

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

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

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

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

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

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

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

este valoarea implicită. Marcaje de legare a paginilor şi referinţe Instrucţiune <A ATRIBUTE> </A> Atribute Descriere Marcaj tip ancoră Referinţă hipertext (legături spre alte pagini folosind un text sau o imagine). între ghilimele nu trebuie să existe spaţii. -parent = încarcă pagina în fereastra părinte. Definirea unei ancore HREF = "URL" NAME = "NUMEANCORA" HREF = "#NUMEANCORA " HREF = "URL # NUMEANCORA" Referinţa către o ancoră internă (din acelaşi fişier) Referinţa către o ancoră externă (din alt fişier) Numele cadrului în care va fi afişată sursa definită cu HREF valori speciale: -top = încarcă pagina într-o fereastră nouă. Tabelul 8. Frunzele acestor arbori pot fi documente plate sau liniare. care adesea au referinţe inverse (către părinţi). deasupra altor ferestre de pe ecran.arborescente. -self = încarcă pagina în cadrul curent. -blank = încarcă pagina într-o fereastră noua. 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 . fără nume.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.5. ISDN de bandă largă 1. Fast Ethernet şi 100VG-AnyLan 1. NSFNET 1.1. Token Ring 1.5. ReţeleX-25. Gigabit Token Ring 1.2.3.7.1. NIVELUL FIZIC 2.4.1.3. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1.7.8.5. Cablul torsadat 112 .1.6.8.6. Echipamente de conversie a semnalelor -modem-uri.6. Mediul magnetic 2.2. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.7.8.5.3. Comunicarea X-25 cu terminale neinteligente (X3. 2.1.2. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.7.8.2.3.8.2. ARPANET 1. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.5.1.5.1.5.2. EXEMPLE DE REŢELE 1. Mesaje.8. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2.7. REŢELE DE MARE VITEZA 1. Ethernet 1.2.1. semnale.1. X-29) 1. HSSI (HIPI) 1.1.7.1. X-28.7. Novell NetWare 1.2.5.2.4.7. Token BUS 1.7. Internet 1. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2. Retransmiterea cadrelor 1.3. Structurarea reţelelor 2.4.1. linii şi canale de comunicaţii 2. MEDII DE TRANSMISIE 2. FDDI 1. UltraNet 1.7.4. SMDS–Serviciul de Date Comutat Multimegabit 1.5.7.1.

Telefoane celulare analogice 2. Perspectivele N-ISDN 2.4.3.2.2.2.7. Servicii ISDN 2.3.1.6.5. COMUNICAŢIILE FĂRĂ FIR 2. Transmisia radio 2. Buclele locale 2.4.2. Cablu coaxial de bandă largă 2.2. Controlul erorilor.3. Undele infraroşii şi milimetrice 2. Comutatoare ATM 2. Sateliţi geosincroni 2.3.3.6. NIVELUL LEGĂTURĂ DE DATE 3.4. Comutatoare 2.4.4.3.3.5.1.7. Interfaţa ISDN.1. Spectrul electromagnetic 2. Sateliţi versus fibre optice 3.1.3.4. Arhitectura sistemului ISDN 2. Trunchiuri şi multiplexare 2.5.6.7.8.3.3.3. Transmisia prin microunde 2.8. SATELIŢI DE COMUNICAŢIE 2. Cablu coaxial în bandă de bază 2. Încadrarea.4. 2.2. RADIO CELULAR 2.2.8.1.1.5. Sateliţi de joasă altitudine 2. ISDN DE BANDĂ INGUSTA 2.4. ISDN DE BANDĂ LARGĂ ŞI ATM 2.5. Controlul fluxului 113 .3. Fibre optice 2. Telefoane fără fir 2. Transmisia de unde luminoase (laser) 2. Circuitele virtuale în comparaţie cu circuitele comutate 2. Transmisia în reţelele ATM 2.2. Telefoane celulare digitale 2.2.4.4.2.1.1.5.3.3.2. SISTEMULTELEFONIC 2. Servicii de comunicaţii personale 2. Servicii oferite nivelului reţea.7.5. Structura sistemului telefonic 2.

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful