Ministerul Educatiei Nationale

Colegiul National Mihail Sadoveanu

PROIECT REALIZAT PENTRU SUSTINEREA

EXAMENULUI DE ATESTARE A
COMPETENTELOR PROFESIONALE LA
INFORMATICA

ANATOMIA SI FIZIOLOGIA UMANA

FILIERA: TEORETICA
PROFIL: REAL
SPECIALIZAREA: MATEMATICA-INFORMATICA, INTENSIV
INFORMATICA

NUME CANDIDAT:
CLASA: a XII-a D

PROFESOR COORDONATOR:

SESIUNEA: MAI 2014

Cuprins
I. Enunt tema......................................................................................................................................3
II.
Justificarea alegerii temei...........................................................................................................3
III.
Descrierea aplicaiei....................................................................................................................4
IV.
Listing sursa aplicatie...............................................................................................................10
V.
Despre softul utilizat.................................................................................................................16
Marcaje de baz...............................................................................................................................24
Marcaje pentru structurarea documentului......................................................................................25
Marcaje pentru formatarea textului si crearea listelor.....................................................................26
Marcaje pentru crearea hiperlegturilor...........................................................................................29
Marcaje pentru introducerea de obiecte...........................................................................................30
VI. Concluzii...................................................................................................................................34
VII. Bibliografie...............................................................................................................................35
VIII.
Anexe CD/DVD...................................................................................................................35

I.

Enunt tema

Sa se realizeze un website avand ca tema Anatomia si Fiziologia omului , site

ce contine informatii despre sisteme corului uman precum si anatomia acestuia.

II.

Justificarea alegerii temei

Am ales aceasta tema din dorinta de a crea un mediu online care sa permita ,
intr-un mod dinamic, accesul la informatii despre anatomia si fiziologia omului.
Felul in care sunt organizate paginile proiectului ii ofera utilizatorului
posibilitatea de a acumula cunostinte despre corpul uman intr-un mod placut si
interactiv.

III. Descrierea aplicaiei

Siteul contine o forma principala (home) alcatuita din mai multe butoane (linkuri
spre alte pagini ale siteului) precum:
- Categoria Home

- Categoria Anatomia

- Categoria Sisteme

-Categoria Galerie foto

Detalii tehnice
Introducerea imaginilor:
Se realizeaza prin accesarea iconului
insert image situat in bara de sus a
programului Macromedia Dreamweaver sau
accesand meniul insert ca in imaginea
alaturata . Apare apoi o fereastra de tip
pop-up care ne permite selectarea imaginii
pe care dorim sa o introducem in proiect.

Imaginea este introdusa implicit sub imaginea anterioara insa

modificand codul html prin introducerea imaginilor intro lista (tagul
<li>) se obtine pozitionarea actuala.
Crearea legaturilor:
Pentru ca prin simplul click pe imaginea introdusa anterior sa
se deschida o alta pagina trebuie creat un link. Acesta se face ca in
imaginea de mai jos fie accesand iconul din bara de sus fie din
meniul Insert/Hyperlink .
In fereastra nou deschisa se tasteaza un text ce se va afisa ca
link, adresa link-ului in cazul nostru tineretea.html, tipul link ului
(_target,_blank,_self,_top) in cazul de fata self (deschide noua
pagina in aceasi fereastra).

Animatia in flash:
Proiectul contine un
joc in flash care a fost
introdus in proiect ca in
imaginea alaturata
selectand meniul
insert/media/flash sau
apasand combinatia de
taste CTRL+ALT+F dupa
care se selecteaza fisierul
dorit. In cazul nostru se
selecteaza din directorul
/animatii fisiserele de
acolo .

Animatiile proiectului au fost realizate prin intermediul siteului

www.flashvortex.com

IV. Listing sursa aplicatie

Index.html (codul sursa al primei pagini)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Home Page</title>
<link type="text/css" href="documents/textstyles_nf.css" rel="stylesheet" />
<!--scripts-->
<!--menu_java-->
<!--/menu_java-->

<!--[if lt IE 7]>
<script defer type="text/javascript" src="documents/pngfix.js"></script>
<![endif]-->
<script src="documents/AC_RunActiveContent.js" language="JavaScript"
type="text/javascript"></script><!--endscripts-->
</head>
<body>
<div id="container">
<div id="sitename1">Anatomia Si Fiziologia Omului</div>
<div id="sitename2"></div>
<div id="search"><!----></div>
<img id="top" src="images/top.png" alt="" />
<div id="xm1"><div align="left" id="xm2"><!--page--><div class="pageheader"><img
src="H_Home_Page_23.gif" alt="Home Page" /></div>&nbsp;<div align="center"><script
type="text/javascript">
AC_FL_RunContent("minversion","8,0,0,0","allowScriptAccess","sameDomain","movie","extdocs/
anatomia3","quality","high","src","extdocs/anatomia3","width","468","height","60","wmode","opaq
ue","bgcolor","#FFFFFF");
</script>
<noscript><object type="application/x-shockwave-flash" data="extdocs/anatomia3.swf"
width="468" height="60"><param name="movie" value="extdocs/anatomia3.swf" /><param
name="quality" value="high" /><param name="wmode" value="opaque" /><param name="bgcolor"
value="#FFFFFF" /></object></noscript>
</div>
<br />
<p class="rvps1"><img style="margin:5px;float:right;float:right;width:191px;height:185px;" alt=""
title="NULL" src="Medical_Symbol.jpg" /></p>
<br />
<br />
<br />
<p> &nbsp; &nbsp; &nbsp; &nbsp;<span class="rvts48"><b>Oamenii</b></span><span
class="rvts48">&nbsp;(denumire stiintifica:&nbsp;Homo sapiens sapiens) sunt
fiinte&nbsp;vii&nbsp;inteligente. Biologii considera ca toti oamenii de azi sunt membri ai aceleiasi

subspecii numite&nbsp;Homo sapiens sapiens. Generic, oamenii sunt denumiti rasa umana&#8221;
sau umanitatea&#8221;, iar membrii sai sunt cunoscuti ca oameni&#8221; sau fiinte
umane&#8221;.</span></p>
<br />
<br />
<br />
<br />
<br />
<br />
<p> &nbsp; &nbsp; &nbsp; &nbsp;<span class="rvts48">Umanitatea moderna (nu cea
contemporana) este, macar n parte, contemporana cu H. sapiens fossilis. Ipoteza unei succesiuni
cronologice ntre cele doua specii s-a nascut din situatia speciala europeana. ntr-adevar, H. sapiens
sapiens patrunde n Europa cndva n jurul anului 40.000 .Hr. Dar originile sale se plaseaza n
grupul din Orientul Apropiat (Qafzeh, Tabun, Skhul etc.), aflat mai aproape de H. s. sapiens dect
deneanderthalienii europeni. Evolutia n timp a oamenilor moderni duce la aparitia raselor moderne un fenomen relativ recent, poate chiar de la sfrsitul paleoliticului, si reprezentnd ultima forma de
adaptare biologica a fiintei umane la mediu. Rasele actuale sunt deosebite anatomic, uneori foarte
evident. Numai amanuntele biologice cu rol adaptativ sunt cele care dau un aspect diferit raselor (de
ex., tendinta corpurilor umane de compactare n zonele reci, pentru a limita pierderea de caldura,
respectiv alungirea membrelor pentru un efect invers, accentuarea tesuturilor adipoase pentru
mentinerea umiditatii, aparitia pliului ocular pentru protejarea globului ocular etc.). Potentialul
intelectual este identic, iar apartenenta raselor la o singura specie este demonstrata de posibilitatea
metisajului.</span></p>
<!--footer--><br /><!--/footer--><!--/page--></div></div>
<div id="side">
<img id="menu_top" src="images/m_top_image.png" alt="" />
<ul id="mmenu"><!--mmenu--><li><a id="ma" class="mmenu" href="index.html"
target="_self">Home</a></li>
<li><a class="mmenu" href="anatomia/anatomia.html" target="_self">Anatomia</a></li>
<li><a class="mmenu" href="sisteme/endocrin.html" target="_self">Sisteme</a></li>
<li><a class="mmenu" href="galerie_foto/galerie_foto.html" target="_self">Galerie foto</a></li>
<li><a class="mmenu" href="autor/autor.html" target="_self">Autor</a></li>
<!--/mmenu--></ul>
<img id="menu_mid" src="images/m_bot_image.png" alt="" />
<ul id="smenu"><!--smenu--><li><a id="sa" class="smenu" href="index.html">Home
Page</a></li>
<!--/smenu--></ul>
<img id="menu_bot" src="images/s_bot_image.png" alt="" />
<div id="earea"><!--%areap(area1,202px,)%--><!--areaend--></div>
</div></div></body></html>

V.

Despre softul utilizat

Prezentarea programului in care a fost realizat proiectul

Macromedia Dreamweaver este o unealta destinata creatorilor de pagini web. Dreamweaver
a fost creat de Macromedia (acum Adobe Systems) si momentan a ajuns la versiunea
9.Primele versiuni ale produsului serveau doar ca simple editoare HTML de tipul

WYSIWYG ,dar in versiunile recente au fost implementate functii de editare avansate si

support pentru alte tehnologii web cum ar fi CSS ,JavaScript etc.
Dreamweaver s-a bucurat de un larg success inca de la sfarsitul anilor 90 si momentan
detine aproximativ 80% din piata editoarelor HTML.Produsul poate di rulat pe variante
platforme software: Mac , Windows, dar suporta in acelasi timp si platforme UNIX cu
ajutorul unor emulatoare software,cum ar fi Wine.
Ca orice alt editor WYSIWYG,Dreamweaver poate ascunde detaliile de implementare a
paginilor HTML, facand astfel posibila crearea cu usurinta a paginilor web de catre
utulizatorii neexperimentati.
Unii creatori de pagini web critica aceste tipuri de editoare deoarece produc pagini de
dimensiuni mult mai mari decat ar fi necesar ,ceea ce conduce la o functionare
neperformanta a browserelor web.Aceasta afirmatie este in mare parte adevarata deoarece
paginile web produse folosesc design-ul pe baza de table. In plus, produsul a mai fost criticat
in trecut si pentru producerea de coduri care adesea nu erau conform standardelor W3C, dar
acest aspect a fost mult imbunatatit in versiunile recente.Cu toate acestea,Macromedia a
crescut suportul pentru tehnologia CSS si alte modalitati de design fara a fi necesara
folosirea design-ului pe baza de tabel.
Dreamweaver pemite folosirea majoritatii browserelor instalate pe calculatorul
utilizatorului ,pentru a previzualiza website-ul creat. De asemenea contine si cateva utulitare
pentru administrarea site-urilor ,cum ar fi cele pt a gasi si a modifica un paragraf sau o linie
de cod,in intregul web site, pe baza oricaror parametri specificati de catre utilizator. Cu
ajutorul panourilor de stare se poate crea cod JavaScript fara a avea cunostinte de
programare.
Odata cu aparitia versiunii MX, Macromedia a incorporate utilitare de generare dinamica a
continutului.De asemenea ,este oferit suport pentru conectarea la baze de date (cum ar fi
MySQL si Microsoft Access) pentru a filtra si afisa continutul script-ului de genul PHP,
ColdFusion, Active Server Pages(ASP) si ASP.NET, fara a avea nevoie de o prealabila
experienta in programare.

Un aspect foarte laudat al Dreamweaver-ului il reprezinta arhitectura sa extensibila.

Extensiile,asa cum sunt ele cunoscute ,sunt mici programe,pe care orice dezvoltator le poate
scrie (de obicei in HTML si JavaScript ) sip e care le poate descarca si instala , acestea
aducand un spor de performanta si functionalitate imbunatatita programului .Exista o
comunitate de dezvoltatori care produc extensii si le publica (atat commercial , cat si
gratuit ) pentru probleme de dezvoltare web ,de la simple efecte rollover pana la solutii
complete de vanzare online.

10

Meniul programul Macromedia Dreamweaver 8

Meniurile File si Edit sunt standard pentru majoritatea programelor.Meniul File contine
comenzi de deschidere, salvare , import si export de fisiere. Meniul edit contine comenzile
Cut , Copy si Paste ,alaturi de comenzile Find si Replace si comanda Preferences.Multe
elemente din interfata Dreamweaver si din operarea sa pot fi configurate in Preferences.

11

Meniul View activeaza si dezactiveaza vizualizarea continutului sectiunii de antet(head); a

elementelor inviziblile;a straturilor ,tabelelor si limitelor cadrelor,a barei de stare si a hartilor
de imagine.

Meniul View are de asemenea comenzi de activare a riglei si a grilei,de executare a pug-inurilor si pentru afisarea de imagini de trasare. Comanda Prevent Layer Overlaps(Prevenirea
suprapunerii de straturi) este si ea pozitionata in meniul View.

Meniul View

12

Meniul Insert este aproape echivalent cu bara de inserari.Din acest meniu se poate insera
optional toate elementele disponibile pe bara de inserari. Bara de inserari contine un numar
total de sectiuni din care putem sa alegem diferite categorii de obiecte disponibile. Exista
douasprezece sectiuni in bara de inserari: Common,
Layout,Text,Tables,Frames,Forms,Templates,Characters,Media,Head,Script si Application.
Pentru a afisa butoanele obiectelor dintr-o anumita categorie trebuie sa dam click pe
sectiunea categoriei.

13

Meniul Modify ne permite sa modificam proprietatile obiectului selectat la un moment dat.

14

Meniul Text ne ofera acces la mai multe modalitati de finisare a aspectului textului din
pagina Web. Cel mai important pentru cei care scriu cu greseli este ca meniul text contine
comanda Check Spelling (verificarea ortografiei). Putem indenta un text,crea o lista si
modifica proprietatile fontului.

15

Meniul Commands ofera comenzi utile cum ar fi Clean up HTML (curatarea codului
HTML) si Clean Up Word HTML ( Curatarea cuvintelor din codul HTML).

Elementele limbajului HTML

Toate obiectele HTML sunt introduse ntre marcaje care le definesc; majoritatea
acestora sunt de forma <tip_obiect> (la nceput) si </tip_obiect> (la sfrsit). Tipul
standard al obiectului poate fi specificat cu majuscule sau minuscule; totusi, se
recomand utilizarea majusculelor fiindc astfel marcajele ies n evident.

16

Majoritatea navigatoarelor permit vizualizarea paginii curente n formatul surs

HTML (forma pe care o interpreteaz pentru afisarea paginii). La interpretare,
programele de navigare ignor spatiile si <Enter>-urile, aplicnd formatarea
specificat.
Exist ns si marcaje cu parametri; acestea au forma <tip_obiect param1=valoare1
param2=valoare2 >. De exemplu, obiectele de tip imagine sunt introduse cu
delimitatorul <IMG>, care are diversi parametri. Pentru definirea hiperlegturilor se
foloseste marcajul <A>, care are de asemenea parametri proprii.
Codurile de marcare HTML pot fi clasificate n urmtoarele categorii:
1. marcaje de baz - cele care delimiteaz pagina / documentul HTML, titlul
acesteia si corpul paginii;
2. marcaje pentru structurarea documentului - care permit introducerea de
subtitluri, paragrafe, linii de delimitare;
3. marcaje pentru formatarea textului si crearea listelor;
4. marcaje pentru crearea hiperlegturilor (hyperlinks);
5. marcaje pentru introducerea de obiecte - tabele, formule, imagini sau obiecte
multimedia preluate din fisiere, formulare.
Vom descrie n paragrafele urmtoare, elementele caracteristice fiecreia din aceste
categorii.
Pentru structurarea si organizarea informatiilor din paginile web se pot utiliza
frame-uri (marcajul <FRAME>), prin care la un moment dat se afiseaz mai multe
ferestre continnd fiecare cte o pagin. Introducerea si gestiunea frame-urilor se
realizeaz foarte convenabil folosind editoarele HTML.
Mai mentionm faptul c n ultimele versiuni ale limbajului HTML si ale browserelor s-a introdus posibilitatea integrrii, respectiv lansrii n executie prin navigator, a
unor aplicatii. Acestea sunt scrise n limbajul Java, un limbaj cu caracteristici
distribuite si obiectuale, adaptat programrii n Web; ele se numesc "applet"-uri si se
introduc n sursele HTML cu marcajul <APP> sau <APPLET> . Ultimele versiuni de
editoare HTML permit introducerea interactiv a applet-urilor Java.
Marcaje de baz
O pagin Web este delimitat de marcajele <HTML> si </HTML> care indic
nceputul si finalul documentului si contine:

zon de antet cuprins ntre marcajele: <HEAD> </HEAD> si

un corp delimitat de marcajele:
<BODY> </BODY>.

17

Zona de antet este utilizat de ctre programele de cutare pe site-urile web si

permite specificarea titlului paginii care va fi afisat de navigator (nu apare propriu-zis
n continutul paginii).
titlul, introdus n antet, este cuprins ntre marcajele <TITLE> </TITLE>.
Astfel, o form extrem de simpl a unui document HTML ar putea fi cea din
urmtorul exemplu:
<HTML>
<HEAD> <TITLE>Titlul documentului </TITLE>
</HEAD>
<BODY>Document HTML foarte simplu</BODY>
</HTML>
Marcaje pentru structurarea documentului
Programele de navigare asigur afisarea diferentiat a unot titluri si subtitluri
pentru sectiunile paginii, dup criteriile implementate n acest scop la conceperea sa
(litere mai mari sau mai mici, diverse culori, litere aldine sau simple, unul sau mai
multe rnduri libere dup titlu etc.).
Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n
este o cifr ntre 1 si 6 care specific nivelul titlului (1 este titlul principal iar 6
corespunde celui mai sczut nivel). Astfel:
<H1> </H1> indic un subtitlu de nivelul 1

<H6> </H6> indic un subtitlu de nivelul 6.

Pentru separarea zonelor paginii se pot folosi treceri la:

linie nou - cu marcajul <BR>, eventual cu desenarea unei linii orizontale marcajul <HR>;
paragraf nou - cu marcajul <P> (se insereaz o linie nou si eventual se face o
indentare). Marcajul </P> desemneaz sfrsitul de paragraf dar este mai rar
folosit (se poate omite).

Marcaje pentru formatarea textului si crearea listelor

Formatrile uzuale de texte permit scrierea cu caractere:

aldine - n acest scop pentru acel text se aplic marcajele <B> </B>;
cursive (italice) - pentru acel text se aplic marcajele <I> </I>;
subliniate - textul se introduce ntre marcajele <U> </U>.

18

Unele programe mai vechi de navigare nu permiteau reprezentarea acestor formate;

n acest caz, se aplicau alte moduri de evidentiere a textelor respective (culori, video
invers).
Alte tipuri de formatri de caractere care se pot defini se refer la:
dimensiunea fonturilor si culori - se va utiliza marcajul cu parametri:
<FONT SIZE=x COLOR=y> </FONT> , care indic utilizarea unui font de
dimensiune x si culoare y.

x poate fi un numr ntre 1 si 12, indicnd mrimea exact, sau un numr cu

semn, indicnd mrimea relativ la dimensiunea curent.
y poate fi numele unei culori standard, specificat n limba englez si ntre
ghilimele, sau, eventual, descompunerea unei culori n componentele RGB, sub
form hexazecimal (cte dou cifre hexa pentru fiecare component).

Suplimentar, se pot crea pagini de stiluri, n care s se defineasc stiluri logice,

modificabile ulterior; n acest scop, se folosesc marcajele <DN> - definitie, <EM> punere n evident, <STRONG> - accentuare puternic.
Pentru tastaturile care suport numai codurile ASCII, caracterele speciale se pot crea
folosind formatul &nume_caracter - de exemplu, &egrave; pentru e. Avnd n vedere
semnificatia special a caracterelor <, > si &, aparitia lor n documente trebuie
specificat sub forma caracterelor speciale: &lt; , &gt; , respectiv &amp; .
Prezentm n continuare un exemplu de document HTML, precum si modul n
care acesta este afisat de Netscape Navigator.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Pagina simpla</title>
</head>
<body>
<p>Acesta este un exemplu simplu de o
pagina HTML. Ea arata cum
pot aparea caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai mici</font>,
respectiv insera
o mica imagine
19

<img src="Handshake8114.gif"
width="20" height="14">.
</p>
</body>
</html>

n figura, se observ c textul propriu-zis al documentului poate fi delimitat fat de

codurile de marcare, iar formatarea textului din documentul HTML nu corespunde cu
cea afisat de programul de vizualizare:

textul este extins pentru a ocupa ntregul ecran si este afisat cu un corp de liter
diferit fat de sursa HTML;
terminatorii de linie nu sunt respectati;
spatiile albe suplimentare din documentul surs sunt ignorate.

Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliat mai jos.
Limbajul HTML permite definirea mai multor tipuri de liste si imbricarea lor
(includerea unor liste n altele), caz n care trebuie verificat cu atentie corespondenta
dintre marcajele de nceput si sfrsit pentru fiecare list. Formatarea listelor la afisarea
paginii (introducerea bulinelor, numerotrii etc.) se face de ctre programul de
navigare.
Elementele listelor se introduc ntre marcajele <LI> </LI> ("list item").
Modul de aparitie al elementelor depinde de tipul de list n care sunt incluse (cu
buline, numerotate etc.), determinat de marcajul specific.
Astfel, listele pot fi:

neordonate (cu buline) - delimitate de marcajele <UL> </UL> ("unordered

list"); elementele lor se afiseaz cu buline;
ordonate (numerotate) - delimitate de marcajele <OL> </OL> ("ordered
list"); elementele lor se vor numerota;
de tip meniu - delimitate de marcajele <MENU> </MENU>; elementele
acestor liste apar ntr-o reprezentare compact pe ecran (multicoloan);
20

glosare (liste de definitii) delimitate de marcajele <DL> </DL> ("definition

list"); elementele acestora au cte dou componente, introduse respectiv cu
marcajele <DT> (pentru nume) si <DD> (pentru semnificatia asociat);
tabele scurte - create cu marcajul <DIR>.

Listele utilizate cel mai frecvent sunt cele ordonate si neordonate. Prezentm n
continuare un exemplu simplu de pagin HTML care contine aceste tipuri de liste.
<html>
<head>
<title>Pagina cu liste</title>
</head>
<body>
<p>Aceasta pagina exemplifica crearea listelor</p>
<p>Cele mai uzual folosite tipuri de liste sunt:
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<p>O lista ordonata este o lista numerotata:
<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>

21

Exemple de liste ntr-o pagin HTML

Marcaje pentru crearea hiperlegturilor
Hiperlegturile ("hyperlinks") se introduc cu marcajele <A> </A> ("anchor")
aplicate asupra unui text sau a unei imagini. Ele se pot crea ctre:

adrese URL - astfel se asigur accesul n cadrul procesului de navigare (prin

protocoale specifice), nu numai la paginile web, ci si la diverse servicii Internet;
fisiere / resurse locale adic aflate pe acelasi calculator cu pagina creat - linkuri locale ; acestea ar putea fi accesate si printr-un URL cu protocolul "file" dar
pentru mai mult simplitate, este suficient specificarea numelui si cii
fisierului local;
o zon din documentul HTML curent - link-uri interne.

n fiecare din aceste cazuri, un click pe textul sau imaginea respectiv va determina
activarea legturii si afisarea prin intermediul navigatorului a resursei asociate linkului.
Resursa asociat unei legturi este descris prin parametrii marcajului <A>:

HREF - permite asocierea unei adresei URL, crearea unei legturi locale prin
specificarea numelui si cii fisierului corespunztor sau a unei legturi interne
documentului; este cel mai important parametru pentru construirea de
hiperlegturi;
NAME - numele hiperlegturii sau al zonei dintr-o pagin ctre care se face
referirea, n cazul unui link intern;
METHODS - metodele de acces (acest parametru se utilizeaz doar n
prelucrri speciale).

22

Astfel, un link local sau ctre o adres URL se poate defini pe un text cu: <A
HREF="resursa"> text </A>.
O legtur intern ctre o zon a documentului curent se indic folosind marcajul <A
NAME="nume-zona">.
Marcaje pentru introducerea de obiecte
Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a
informatiilor formatate. Asemenea obiecte trebuiau create formatat si introduse ca
obiect deja formatat, cu marcajele <PRE>, </PRE>. Aceste marcaje indicau
navigatorului c textul inclus trebuia afisat caracter cu caracter, fr vreo interventie
de formatare. n versiunile ulterioare ale limbajului HTML, s-au introdus ns facilitti
elegante de formatare, de includere a tabelelor si a altor obiecte.
n HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii orizontale si
coloane verticale la a cror intersectie se formeaz celulele. Acestea pot contine intrri
diverse: texte, figuri sau chiar alte tabele. Se pot realiza reuniri de celule (de exemplu,
pentru titluri mai lungi). Atributele de formatare a tabelului (aliniere, stilul chenarului
si marginilor etc.) se definesc n proiectarea paginii dar modul lor de afisare va
depinde si de programul de navigare.
Tabelele se introduc ntre marcajele <TABLE> </TABLE>, crora li se pot
atasa (optional) parametrii BORDER si RULES. Un titlu pentru tabel se poate
introduce cu marcajul <CAPTION>. Fiecare coloan se defineste cu marcajul
<COL>, avnd ca parametru ALIGN - modul de aliniere a informatiilor din acea
coloan (LEFT, CENTER, RIGHT).
Antetul tabelului se poate indica ntre marcajele <TH></TH> ("Table
Header"), pentru trecerea la o linie nou se utilizeaz marcajul <TR> ("Table Row")
iar celulele individuale se marcheaz cu <TD> ("Table Data"), eventual cu parametru
de aliniere. Se mai pot specifica alinieri orizontale sau verticale ale celulelor, grupri
de celule etc. Aceste marcaje permit navigatorului s afiseze diferentiat informatiile
din tabel.
Prezentm n continuare un exemplu simplu de tabel.
<HTML>
<HEAD>
<TITLE>Pagina cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui tabel</H1>
<H3>Vanzari anuale:</H3>
23

<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231 milioane
lei</TD>
</TABLE>
</BODY>
</HTML>

Exemplu de tabel ntr-o pagin HTML

Mrimea liniilor si a coloanelor poate fi controlat suplimentar prin marcajele
<ROWSPAN=x> si respectiv <COLSPAN=y>, fiecare indicnd mrimea n "celule
normale". n plus, se poate indica trasarea unei margini pentru tabel, prin marcajul
<TABLE BORDER>.
Includerea imaginilor se face folosind marcajul <IMG>, care are parametri specifici:

SRC indic (dup semnul '=') URL-ul imaginii, respectiv calea fisierului dac
acesta este local; uzual, se accept fisiere n format GIF sau JPEG;
ALLIGN controleaz alinierea imaginii fat de limita inferioar a textului (TOP,
MIDDLE sau BOTTOM); este un parametru optional;
ALT furnizeaz textul afisat n locul imaginii dac utilizatorul dezactiveaz
optiunea de afisare a imaginilor (parametru optional);
ISMAP este un indicator optional pentru imaginile care sunt hrti selectabile.

Astfel, introducerea simpl a unei imagini se poate realiza cu <IMG

SRC="specificare-imagine">. Un exemplu de imagine inserat ntr-o pagin HTML
este prezentat n figura de mai sus.
Remarcm faptul c, utiliznd parametri specifici, marcajul <IMG> se poate folosi si
pentru inserarea unor fisiere multimedia, cum ar fi secventele video. Avnd n vedere
c aceste operatii se realizeaz mai usor folsind un editor HTML.
Formulare. HTML 1.0 permitea uzual doar transferarea informatiilor de la furnizori
ctre utilizatori, transferul n sens invers fiind foarte dificil. Odat cu dezvoltarea
24

Web-ului si mai ales cu utilizarea sa n scopuri comerciale si n diverse alte domenii,

s-a fcut simtit necesitatea comunicrii n dublu sens pentru preluri de comenzi,
completarea unor fise de nregistrare, distribuirea de produse soft, administrarea de
chestionar, transmiterea unor informatii personale etc. Acestea au fost motivatiile
introducerii formularelor n HTML 2.0.
Formularele contin obiecte de control care permit utilizatorilor introducerea de
informatii prin completarea unor cmpuri specifice (casete de text), prin selectarea sau
activarea unor optiuni (comutatoare, grupuri sau liste de optiuni). Aceste informatii
vor fi transmise, dup activarea butonului SUBMIT (echivalent cu tastarea lui
<Enter>) proprietarului paginii, introduse n baze de date dedicate si prelucrate cu
aplicatii specifice.
Formularele se introduc prin marcajelele <FORM> ... </FORM> , crora li se
ataseaz parametri specifici care definesc metodele de transmitere si tratare a datelor.
Un formular poate contine obiecte de control de diverse tipuri, definite cu marcajul
<INPUT> si o varietate de parametri care stabilesc, pentru obiectul definit, tipul,
dimensiunea si modul lui de afisare. Astfel, se pot crea cmpuri de text (care vor fi
completate cu texte de ctre utilizator), liste de alternative, comutatoare, grupuri de
optiuni, butoane, hrti active etc.
Datele preluate prin intermediul formularelor se trateaz conform standardului CGI
(Common Gateway Interface) prin intermediul unor programe sau script-uri CGI. n
plus, un asemenea script poate interactiona cu baza de date creat pentru realizarea
unor actiuni specifice (de exemplu, hrtile active folosesc script-uri CGI pentru a
executa diferite actiuni, n functie de zona selectat de utilizator).
Script-urile CGI pot executa si alte operatii dect prelucrarea formularelor,
producnd iesiri convenabile. Dac o hiperlegtur indic spre un script CGI, la
selectarea legturii se va executa script-ul (cu anumite variabile de context care retin
diverse informatii de stare). Script-ul va produce un fisier, de exemplu o pagin web,
care va fi interpretat() de navigator. Acest mecanism permite script-urilor s
genereze, aproape instantaneu, pagini web care s satisfac diverse cerinte ale
utilizatorilor, furniznd anumite rspunsuri asteptate n urma unor actiuni.
Crearea interactiv a formularelor, folosind produse soft specializate n realizarea
de pagini Web este relativ accesibil pentru utilizatorii familiarizati cu caracteristicile
obiectelor de control specifice aplicatiilor soft dar tratarea ulterioar a informatiilor
transmise necesit cunostinte de specialitate.

Numele, simbolurile si procedura de introducere interactiv dintr-un editor HTML

(de exemplu, Microsoft Front Page) a obiectelor de control sunt extrem de apropiate
25

de cele asociate obiectelor similare din formularele sau rapoartele Microsoft Access.
Pentru utilizatorii mai putin avizati ns, crearea, chiar interactiv, a formularelor este
mai dificil.

VI. Concluzii
HTML (Hypertext Markup Language) este un limbaj creat n scopul de a descrie,
n mod text, formatul paginilor Web; fisierele create n acest limbaj vor fi interpretate
de navigatoare, care vor afisa paginile n forma dorit (cu texte formatate, liste, tabele,
formule, imagini, hiperlegturi, obiecte multimedia etc.). HTML a aprut ca o
aplicatie ISO standard (apartine standardului SGML - Standard Generalized Markup
Language, specializat pentru hipertext si adaptat la Web).
Asa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de
format ale elementelor incluse prin procedee de marcare. Acestea pot fi asemnate
intuitiv cu marcajele folosite n tipografie pentru a indica scrierea unui text cu un
anumit tip de caractere. Fiecare element va fi introdus ntre dou marcaje ("tags", n
limba englez) - de nceput si sfrsit - (uzual) de forma <marcaj> </marcaj>.
Caracterele speciale de delimitare a marcajelor "<", ">" permit deosebirea acestora de
textul propriu-zis. De exemplu, pentru textele aldine (ngrosate), marcajul de nceput
este <B> iar de sfrsit - </B>.
n informatic, limbajele de marcare sunt foarte convenabile fiindc comenzile lor
pot fi interpretate simplu. LaTeX-ul, de exemplu, este tot un limbaj de marcare; prin
interpretarea fisierelor .tex descrise n acest limbaj se va genera formatul dorit al
documentelor pe diverse tipuri de sisteme de calcul (n cazul, LaTeX-ului, se obtine
uzual format PostScript sau PDF). n schimb, procesoarele de documente uzuale nu au
un limbaj de marcare standardizat, care s ofere compatibilitate ntre diverse tipuri de
calculatoare si sisteme de operare. Astfel, se poate spune c avantajele aplicrii

26

limbajelor de marcare constau n portabilitate si flexibilitate: fisierele create cu

ajutorul lor pot fi transferate pe orice tip de sistem, unde vor fi interpretate cu ajutorul
unor programe specifice.

VII. Bibliografie

http://www.google.ro
http://anatomie.romedic.ro/
http://ro.wikipedia.org/wiki/Anatomie_umana
http://anatomia-omului-2012.blogspot.ro/
http://www.corpul-uman.com/

VIII.

Anexe CD/DVD

CD proiect

27