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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

pentru promovarea cu ajutorul motoarelor de căutare alcătuiţi un tabel care să cuprindă următoarele informaţii: • Numele motorului de căutare /directorului • Data înregistrării • Timpul necesar pentru realizarea înregistrării • Cuvintele cheie folosite • Codul care atestă că site-ul a fost înregistrat. De exemplu. 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. 28 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1)) (elementul a(2. 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.Un tabel mai sofisticat </title> <meta http-equiv="Content-Type" content="text/html. Un tabel mai sofisticat <html> <head> <title> Exemplul 9. Rezultatul afişării exemplului 8 • Exemplul 9.1)) (elementul a(1. coloana a doua (elementul a(2. coloana întâi Linia a doua. a doua coloană (elementul a(1.bagaj</td> <td width="13%">Greutatea(kg)</td> 65 . rutei</td> <td width="12%">Nr.2)) Linia a doua.Cel mai simplu tabel din 2 coloane si 2 linii TABELUL POATE AVEA UN TITLU Prima linie.2)) Figura 7. prima coloană Prima linie.</td> <td colspan="3"> <div align="center">Date despre pasageri. charset=iso-8859-1"> </head> <body bgcolor=OLIVE text=MAROON> <table width="90%" border="20" BGCOLOR=PINK> <CAPTION><H2><FONT COLOR=RED>LISTA BAGAJELOR PASAGERILOR RUTEI 7021</FONT></H2></CAPTION> <tr> <td rowspan="2" width="4%">Nr.biletului</td> <td width="12%">Nr.</td> <td width="13%">Destinatia</td> <td width="11%">Nr.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Este modul cel mai recomandat. Unele atribute din tabelul 12-13 pot fi specificate şi sub o forma prescurtată. iar altele să poată fi aplicate cu mai multe instrucţiuni. Tabelul 12. nu cea prescurtată. numai pentru stiluri Specifică un anumit stil Specifică un anumit stil Tabelul 13. Putem face chiar ca un anumit stil să poată fi aplicat numai cu o anumită instrucţiune. Se poate întâmpla ca unele caracteristici specificate sub forma prescurtată să nu funcţioneze. inch(în). pixeli(px) 97 . centimetri(cm). Comenzi de definire a stilurilor Instrucţiune Atribute <style> </style> <span> </span> type= class= id= Descriere Specifică în antet caracteristicile stilurilor În general Cascading Style Sheets: "text/css" Marcaj generic. 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. În aşa caz folosiţi forma explicită. mai ales pentru site-uri mari.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Internet 1.1.4. Comunicarea X-25 cu terminale neinteligente (X3.1.6. Fast Ethernet şi 100VG-AnyLan 1.5. Concentratoare şi adaptoare de reţea ca bază a structurii fizice a reţelei 2.1. MEDII DE TRANSMISIE 2. REŢELE DE MARE VITEZA 1.4.2.7.7.2. HSSI (HIPI) 1. ISDN de bandă largă 1.8. X-29) 1.5.5. EXEMPLE DE SERVICII GLOBALE PENTRU COMUNICAŢII DE DATE 1.5. linii şi canale de comunicaţii 2.6.3. EXEMPLE DE REŢELE 1.7. Structurarea reţelelor 2.1.8.5.5.8. Tehnologia ATM ca transport universal pentru reţele locale şi globale 2.2.2.1. X-28.2.8.1.1. Mediul magnetic 2. NSFNET 1.1.2. Gigabit Token Ring 1.4.7. NIVELUL FIZIC 2. TEHNOLOGII DE BAZĂ ALE REŢELELOR 1. BAZELE TEORETICE ŞI FIZICE ALE COMUNICĂRII DE DATE 2. Ethernet 1.7.3. Token BUS 1. Cablul torsadat 112 .3. Mesaje.8.7.7.2. Retransmiterea cadrelor 1. ReţeleX-25.7.1.4. Token Ring 1. Două interfeţe uzuale pentru modem (RS-232-C şi RS-449) 2.3.5.1.1.8.6. ARPANET 1. semnale.7.6.5.5. UltraNet 1. Novell NetWare 1. Echipamente de conversie a semnalelor -modem-uri.2.3.7. SMDS–Serviciul de Date Comutat Multimegabit 1. 2.1. FDDI 1.1.2.7.

7. Undele infraroşii şi milimetrice 2. NIVELUL LEGĂTURĂ DE DATE 3. Circuitele virtuale în comparaţie cu circuitele comutate 2. Perspectivele N-ISDN 2.4.2.2.2. Sateliţi versus fibre optice 3.3.6.7. ISDN DE BANDĂ LARGĂ ŞI ATM 2. Comutatoare 2. Telefoane fără fir 2.4.2.8.2.7.7. Transmisia radio 2. COMUNICAŢIILE FĂRĂ FIR 2.3. Interfaţa ISDN. Controlul erorilor.1.3.6. RADIO CELULAR 2.5.1.3.3.4. Sateliţi de joasă altitudine 2.4.5.2.4. SISTEMULTELEFONIC 2.4. ISDN DE BANDĂ INGUSTA 2. Transmisia prin microunde 2. Structura sistemului telefonic 2.2.3. Servicii ISDN 2.1.3.8. Transmisia de unde luminoase (laser) 2. Spectrul electromagnetic 2. Controlul fluxului 113 .5.4.5. Arhitectura sistemului ISDN 2.4.3.8.4.3. Fibre optice 2.3.2. SATELIŢI DE COMUNICAŢIE 2.1. Telefoane celulare analogice 2.1. Cablu coaxial în bandă de bază 2.5.5.5.2.1.3. Sateliţi geosincroni 2.1. Transmisia în reţelele ATM 2. Cablu coaxial de bandă largă 2. Încadrarea. Trunchiuri şi multiplexare 2.1.4.2. 2.3. Servicii oferite nivelului reţea. Buclele locale 2.3.3.6.2. Comutatoare ATM 2. Servicii de comunicaţii personale 2. Telefoane celulare digitale 2.

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

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

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

6.4. Notaţia sintactică abstractă 7.Coloana vertebrală pentru trimitere multiplă 117 . Cum este implementat USENET 7. Înregistrări de resurse 7.8.5.8. Regăsirea informaţiilor pe Web 7. Semnături digitale 7. Algoritmi cu cheie secretă 7.3.2. MULTIMEDIA 7.1. Algoritmi cu cheie publică 7.2.6.1.2.2.1. Servere de nume 7.SISTEMUL NUMELOR DE DOMENII 7. MIB .5.4. Java.7. Aspecte privind serverul 7. SECURITATEA REŢELEI 7.4. DNS . Formatele mesajelor 7.1.4.5.7.Structura informaţiei de administrare 7.4.3.6.8.4. Video la cerere 7. 7.5.1.3. WORLD WIDE Web 7. Agentul utilizator 7.1.3. Video 7.4. Audio. Protocoale de autentificare 7.5. Modelul SNMP. Java Script 7. Spaţiul de nume DNS 7.1.Baza de informaţii de administrare 7. ŞTIRI USENET 7.1. POŞTA ELECTRONICĂ 7. Transfer de mesaje 7. Două principii criptografice fundamentale. MBone .5.7.1.2.4.2.1.3.2.2.8. SMI .5. Confidenţialitatea poştei electronice 7. USENET din punctul de vedere al utilizatorului 7. Compresia datelor 7.7.1. Scrierea unei pagini de Web în HTML.5.3.4.7.7. SNMP-PROTOCOL SIMPLU DE ADMINISTRARE A REŢELEI 7. Criptografia tradiţională.1.3.3. Aspectele privind clientul 7. Arhitectură şi servicii 7. Protocolul SNMP 7.4.8.1.

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

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

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

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

Cancel anytime.