CUPRINS

1. Importanţa realizării unei pagini WEB

2. Modul de realizarea a unei pagini WEB

3. Caracteristici structurale ale lanţurilor plane cu

trei grade de mobilitate
4. Prezentarea paginii WEB realizate

5. Concluzii

6. Bibliografie

1
 1. IMPORTANȚA UNEI PAGINI WEB

Lucrarea prezintă materiale teoretice şi practice pentru studierea limbajului HTML. In

esenţă, oferă cunoştinţe necesare pentru crearea paginilor web simple, dar şi cunoştinţe ce ţin de
regulile de bază in crearea site-urilor web. Se adresează in special studenţilor din invăţămantul
universitar de la specialităţile „Informatică”, „Tehnologii Informaţionale”, dar poate fi un ghid util
şi pentru cei interesaţi să studieze şi să-şi perfecţioneze cunoştinţele in domeniul creării paginilor
web. Datorită limbajului laconic a expunerii materialului, lucrarea va fi accesibilă tuturor
persoanelor indiferent de domeniul de activitate.HTML este un limbaj simplu pentru care nu sunt
necesare cunoştinţe deosebite de programare, cu atat mai mult că HTML nu este un limbaj de
programare ci un limbaj de descriere. Poate ar părea, la prima vedere, că HTML este un limbaj
sofisticat,insă acesta este destul de uşor de asimilat. Este suficientă cunoaşterea noţiunilor de bază
ale acestui limbaj pentru a putea crea un web site. Cunoaşterea limbajului HTML garantează
puterea de a crea site-uri simple şi insuşirea fundamentelor construirii unui site. Pentru crearea
siteurilor dinamice şi interactive sunt necesare cunoştinţe avansate in multe alte limbaje de
programare şi aplicaţii. Lucrarea poate fi utilă studenţilor, elevilor cat şi tuturor celor care doresc să
facă cunoştinţă cu acest limbaj. Lucrarea constă din 10 capitole. Primele nouă capitole
descriu,inclusiv prin exemple, crearea unui site web utilizand doar limbajul HTML. Ultimul capitol
„Elemente ale limbajului JavaScript” nu vă va da cunoştinţe incat să puteţi crea coduri JavaScript
sofisticate dar este suficient pentru a crea coduri simple şi de a inţelege şi poate de a redacta sau
modifica coduri Java, dat fiind faptul că există foarte multe site-uri web care permit download-area
codurilor Java gratis. Astfel cunoştinţele acumulate studiind capitolul 10 ar fi suficiente pentru a
conforma codurile Java existente, necesităţilor propriului site. Majoritatea materialului este restrans
in Anexe. Acestea fiind utile pentru verificarea corectitudinii scrierii tag-urilor, atributelor şi
valorilor pe care acestea le pot avea.

PAGINI ŞI LOCAŢII (SITE-URI) WEB.

World wide web, abreviat www sau, pur şi simplu web, este totalitatea documentelor
hipertext legate intre ele care pot fi accesate prin reţeaua mondială Internet. Mai amănunţit despre
hipertext vom vorbi in capitolul următor. Paginile web sunt documentele de bază in www, ele pot
conţine diverse informaţii in formă textuală, grafică sau video. Orice pagină web este unic
identificată prin adresa sa denumită URL (Uniform Resource Locator). O locaţie web (sau un web
site) constă din mai multe pagini web, ce rezidă la un server web sau la un calculator local, cu
legături atat intre ele cat şi către documente de la alte locaţii web.

CERINŢE GENERALE PRIVIND CREAREA PAGINILOR WEB.

Crearea unei pagini web reuşite necesită respectarea atat a unor cerinţe generale, cat şi a unor
cerinţe specifice fiecărei pagini web in parte, in funcţie de destinaţia acesteia. La cerinţe generale
putem enumera: - conţinutul şi aspectul prezentării informaţiei in pagină trebuie să trezească
interesul vizitatorilor; - titlul paginii trebuie să fie clar, concis şi sugestiv; - trebuie să existe o
logică in plasarea informaţiei in pagină – deoarece plasarea neordonată a informaţiei poate deruta
2
vizitatorul; - suficient loc liber in pagină pentru facilitatea perceperii informaţiei – o pagină
supraincărcată va indepărta utilizatorii; - folosirea raţională a graficii – pe langă faptul că grafica
face pagina atractivă, trebuie de ţinut cont şi de faptul că tot aceasta conduce la creşterea
dimensiunii paginii care, eventual, conduce la o incărcare mai lentă a paginii, ceea ce poate
indepărta utilizatorii; - dimensiuni nu prea mari pentru fiecare pagină – ceea ce va conduce la o
incărcare mai rapidă a acestora, spre fericirea utilizatorilor; - legăturile către documentele de mari
dimensiuni ar fi bine să fie insoţite de comentarii in privinţa acestor dimensiuni – pentru evitarea
incărcării documentelor de mari dimensiuni mai puţin utile utilizatorului respectiv; - folosirea in
pagină a unui set restrans de culori – ceea ce va permite accentuarea atenţiei asupra informaţiei
plasate in pagină; - se va lua in calcul dimensiunea ecranului – la folosirea denumirilor de prea mari
dimensiuni nu va rămane suficient loc pentru text şi atunci se va cere derularea inoportună a paginii;
- se va verifica aspectul paginii in diverse browser-e cum ar fi: Internet Explorer, Opera, Mozila
Firefox – deoarece aspectul paginilor diferă de la un browser la altul; - respectarea drepturilor de
autor a informaţiei plasate in pagină; - controlul regulat al legăturilor in scopul identificării celor
nefuncţionale; - alegerea limbii de comunicare in funcţie de tematica şi orientarea paginii, etc.
Cerinţele specifice sunt dictate de destinaţia paginii. Un aspect important este atragerea
utilizatorilor către locaţia web. In acest scop poate fi plasată informaţia despre pagina sau locaţia
web la mai multe servere populare şi in primul rand la acelea care sunt vizitate de potenţialii
vizitatori. La fel, o soluţie ar fi şi plasarea informaţiei despre locaţia web la serverele de căutare
cunoscute cum ar fi: Google, Yahoo, AltaVista, etc. Structura de navigare a locaţiei web indică
relaţiile de navigare intre paginile web ale acesteia. Structura de navigare este de formă ierarhică şi
conţine la nivelul superior pagina de bază şi paginile principale. Pagina de bază este prima pagină in
locaţia web şi este numită, de regulă, default.htm sau index.htm. Paginile principale sunt paginile de
nivel superior, dar fără a include şi o pagină de bază. Să examinăm structura locaţiei web prezentate
in exemplul de mai jos. Aici pagina de bază este Index.htm iar paginile principale sunt Despre noi şi
Contacte. Fiecare pagină poate avea ataşate pagini cu un nivel ierarhic mai jos, care sunt numite
pagini-copil (pagini de nivel copil), primele numindu-se pagini părinte. In exemplul analizat pentru
pagina părinte Proiecte paginicopil sunt Proiect 1, Proiect 2,..., Proiect n.Pagini de nivel părinte
pentru o pagină dată sunt: pagina părinte a paginii in cauză şi, de asemenea, paginile conectate
direct cu paginapărinte la acelaşi nivel. Pagini de acelaşi nivel se numesc paginile, care sunt la
acelaşi nivel in structură şi au aceiaşi pagină-părinte. Structura de navigare este folosită la stabilirea
legăturilor intre paginile web. O structură reuşită poate spori eficienţa folosirii resurselor locaţiei
web.

ETAPELE CREĂRII LOCAŢIILOR WEB.

Crearea şi asigurarea funcţionării unei locaţii web include, in general, următoarele etape:
1. concretizarea destinaţiei şi formularea cerinţelor către locaţia web;
2. elaborarea structurii site-ului;
3. elaborarea paginilor web;
4. integrarea paginilor in cadrul site-ului prin stabilirea legăturilor;
5. testarea şi definitivarea site-ului;
6. publicarea web site-ului in www;
7. administrarea web site-ului.

3
In cazuri particulare pot fi şi alte etape, in general la crearea unor site-uri complexe, cand este foarte
importantă alegerea instrumentelor pentru crearea locaţiei, a echipamentelor pentru instalare, etc. La
randul său, elaborarea paginilor web prevede următoarele etape:
1. elaborarea sau selectarea interfeţelor pentru grupuri de pagini sau
pagini aparte;
2. adăugarea informaţiei in pagină;
3. stabilirea legăturilor;
4. testarea şi definitivarea paginii;
5. publicarea paginii in cadrul site-ului;
6. administrarea paginii.

4
 2. MODUL DE REALIZAREA A UNEI PAGINI WEB

INTRODUCERE IN HTML. CE ESTE HTML?

Internetul este o retea de calculatoare interconectate intre ele, calculatoare care comunica
intre ele folosind un standard numit Internet Protocol si accesibila in mod public.Internetul, este
mai precis o retea de retele, acestea constand in milioane de utilizatori particulari sau nu care
comunica transmitand diverse informatii printr-o multitudine de posibilitati cum ar fi sistemul de
posta electronica, transferul de fisiere sau navigand in paginile de internet.

Originile HTML

Unul din primele elemente, fundamentale de altfel, ale WWW (World Wide Web) este
HTML (HyperText Markup Language), standard ce descrie formatul primar in care documentele
sunt distribuite si vazute pe Internet. Multe din trasaturile lui, cum ar fi independenta fata de
platforma, structurarea formatarii si legaturile hipertext, fac din el un foarte bun format pentru
documentele Internet. Primele specificatii de baza ale Internet-ului au fost HTML, HTTP si URL.

Menirea HTML

HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML este un limbaj
bazat pe SGML (Standard Generalized Markup Language), o asa-numita aplicatie a acestuia. SGML
este un standard international (ISO-8879) aprobat în 1986. HTML a fost initial vazut ca o
posibilitate pentru fizicienii care utilizeaza computere diferite sa schimbe intre ei informatie prin
mijlocirea Internetului. Erau prin urmare necesare cateva conditii esentiale: independenta de
platforma, posibilitati hypertext si structurarea documentelor. Independenta de platforma semnifica
faptul ca un document poate fi afisat in mod asemanator (sau aproape identic) de computere diferite
(deci cu font, grafica si culori aidoma), lucru vital pentru o audienta numeroasa si extrem de variata.
Hypertext se traduce prin faptul ca orice cuvant, fraza, imagine sau element al documentului vazut
de un utilizator (client) poate face referinta la un alt document sau chiar la paragrafe din interiorul
aceluiasi document, ceea ce usureaza mult navigarea intre partile componente ale unui document
sau intre multiple documente. Structurarea riguroasa a documentelor permite convertirea acestora
dintr-un format in altul precum si interogarea unor baze de date ingloband aceste documente.

Inceputurile HTML

Nascut în urma cu aproximativ 30 de ani, intr-o tentativa de a rezolva unele probleme ivite
la transportul documentelor intre diferite computere, limbajul hypertext a evoluat incet. In primii
ani de evolutie HTML a demarat lent in principal pentru ca ii lipseau posibilitatile de a reda
publicatii electronice profesionale; limbajul permitea oarece control asupra fonturilor dar nu
permitea inserarea graficii. In 1993, NCSA a imbogatit limbajul pentru a permite inserarea graficii
si a construit primul navigator grafic: Mosaic. Au urmat apoi contributii ad hoc ale diverselor firme
care au adus tot felul de adaugiri limbajului HTML astfel incat, in 1994, limbajul parea scapat de
sub control. Urmarea a fost ca la prima conferinta WWW de la Geneva (Elvetia) s-a constituit un
grup de specialisti (HTML Working Group) a carui prima misiune a fost formalizarea HTML, lucru
care s-a concretizat in HTML 2.0. Importanta actiunii acestui grup consta in faptul utilizeaza
computere diferite sa schimbe intre ei informatie prin mijlocirea Internetului. Erau prin urmare
necesare cateva conditii esentiale: independenta de platforma, posibilitati hypertext si structurarea
documentelor. Independenta de platforma semnifica faptul ca un document poate fi afisat in mod
5
asemanator (sau aproape identic) de computere diferite (deci cu font, grafica si culori aidoma), lucru
vital pentru o audienta numeroasa si extrem de variata. Hypertext se traduce prin faptul ca orice
cuvant, fraza, imagine sau element al documentului vazut de un utilizator (client) poate face
referinta la un alt document sau chiar la paragrafe din interiorul aceluiasi document, ceea ce
usureaza mult navigarea intre partile componente ale unui document sau intre multiple documente.
Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum
si interogarea unor baze de date ingloband aceste documente.

Inceputurile HTML

 Nascut în urma cu aproximativ 30 de ani, intr-o tentativa de a rezolva unele probleme ivite
la transportul documentelor intre diferite computere, limbajul hypertext a evoluat incet. In
primii ani de evolutie HTML a demarat lent in principal pentru ca ii lipseau posibilitatile de
a reda publicatii electronice profesionale; limbajul permitea oarece control asupra fonturilor
dar nu permitea inserarea graficii. In 1993, NCSA a imbogatit limbajul pentru a permite
inserarea graficii si a construit primul navigator grafic: Mosaic. Au urmat apoi contributii ad
hoc ale diverselor firme care au adus tot felul de adaugiri limbajului HTML astfel incat, in
1994, limbajul parea scapat de sub control. Urmarea a fost ca la prima conferinta WWW de
la Geneva (Elvetia) s-a constituit un grup de specialisti (HTML Working Group) a carui
prima misiune a fost formalizarea HTML, lucru care s-a concretizat in HTML 2.0.
Importanta actiunii acestui grup consta in faptul ca, odata standardizat, limbajul a putut fi
apoi extins intr-un mod mai controlat la alte nivele. sa proiecteze formulare pentru realizarea
tranzactiilor cu servere aflate la distanta, pentru cautari de informatie sau pentru activitati
specifice comertului

 sa includa foi de calcul tabelar, clipuri video, sunete si alte aplicatii direct în documente.

Elementul esential diferit adus de versiunea 4.0 si mai ales 4.01 fata de versiunea 3.2 este
posibilitatea separarii structurii unui document de prezentarea lui prin introducerea „stilurilor de
documente“ (style sheet). Utilizînd limbajul HTML pentru structurarea unui document si style
sheet-urile pentru a stiliza prezentarea acestuia, proiectantii pot obtine mult mai usor independenta
de periferic/ computer/ platforma hard-soft, lucru care a facut HTML-ul atat de popular. Un
document cu o structura complexa poate fi prezentat in diferite moduri pe medii diferite, permitand
documentului insusi sa se adapteze mai usor noilor tehnologii (cum ar fi, de exemplu, browserele
capabile sa vorbeasca, cititoarele braille, etc...).

In plus, separarea continutului de partea de prezentare permite modificarea infatisarii chiar a

unui intreg site doar prin modificarea unui style-sheet (a unui document care descrie stilul).
Experienta a demonstrat ca o astfel de abordare poate reduce dramatic costurile de deservire a unui
spectru larg de platforme si probleme, facilitand si o intretinere ulterioara si modificari mult mai
usoare.

Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Astfel de
perechi de marcaje sau etichete (acolo unde sunt perechi) se numesc in literatura de specialitate
TAG-uri. Prin conventie, toate marcajele HTML incep cu o paranteza unghiulara deschisa "<" si se
termina cu o paranteza unghiulara inchisa ">". Marcajele dintre aceste paranteze transmit comenzi
catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit
de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:

6
- sectiunea de antet: <head>...</head>
- corpul documentului: <body>...</body>

Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi

afisat in ferastra browser-ului. Un marcaj poate fi scris atat cu litere mici, cat si cu litere mari. De
exemplu <BODY> = <BodY> = <body>. Caracterele "spatiu" si "CR/LF" ce apar intre tag-uri sunt
ignorate de catre browser.

Adaugarea primelor elemente de text

In primul rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head> urmatoarea
linie:

<title>Aceasta este titlul primei mele pagini de Web</title>

In plus, in sectiunea <body>...</body> putem scrie texte cat dorim. Daca nu se intalneste nici un
marcaj "<" sau ">", atunci interpretorul HTML le va lua ca texte simple si le va afisa pe
ecran.

Ce este un browser?

Un browser este o unealta software care permite utilizatorului sa poata vizualiza un site web
aflat pe un server.

Frames

Frame-urile ajuta programatorul sa prezinte documente in mai multe moduri folosind

ferestre sau subferestre independente.Tehnica se cheama MP adica Multiple Views si ofera
posibilitatea sa tina o anumita parte a informatiei vizibila in timp ce alte parti sunt afisate
pagina cu pagina sau inlocuite.De exemplu o pagina in dreapta afiseaza un meniu cu
butoane sau link-uri iar in partea dreapta dorim sa afisam continutul fiecarui link atunci cand
sunt apasate intr-un frame principal.

Lucrul cu Imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate de browsere pentru
fisierele imagine sunt:

1.GIF (Graphics Interchange Format) cu extensia .gif;

2. JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;

3. XPM (X PixMap) cu extensia .xmp; 4. XBM (X BitMap) cu extensia .xbm;

5. BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);

6. TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Adresa URL a unei imagini

7
 URL ("Uniform Resource Locator" = identificator unic al resursei) este un standard folosit in
identificarea unica a unei resurse in Internet. Toate imaginile cu care vom lucra vor avea adresa
URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine.

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la "image"=
imagine).

Pentru a putea identifica imaginea care va fi inserata se utilizeaza un atribut al etichetei

<img> si anume "src" (de la "source"= sursa). Daca imaginea se afla in acelasi director cu fisierul
HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele
imaginii, inclusiv extensia. Daca imaginea se afla intr-un subdirector al directorului paginii HTML
din care este apelata, de exemplu "images", atunci aceasta este apelata cu URL-ul:
"/images/imagine1.jpg" . In schimb, daca fisierul imagine este situat intr-un director "images"
dintr-un super director al directorului paginii HTML apelante, referirea se face cu URL-ul:
"../images/imagine1.jpg" .

Alinierea textului in jurul imaginii

Atributele "hspace" si "vspace" precizeaza distanta in pixeli pe orizontala, respectiv pe

verticala, dintre imagine si restul elementelor din pagina. Atributul "alt" admite ca valoare un text
care va fi afisat in locul imaginii, in functie de setarile browserului utilizatorului.

Imagini pentru fondul unei pagini

O imagine poate fi utilizata pe post de fundal al unei pagini Web. In acest scop se foloseste
atributul "background" al etichetei <body>, avand ca valoare adresa URL a imaginii. Imaginea se
multiplica pe orizontala si pe verticala pana umple intregul ecran.

Imagini folosite ca legaturi

O legatura (link) introduce in pagina Web o zona activa. Efectuand click cu butonul mouse-
ului pe aceasta zona, in browser se va incarca o alta pagina. Pentru a utiliza imaginea "legatura.jpg"
drept legatura catre pagina index.html utilizam sintaxa:
<a href ="index.html"><img src= "../../images/img1.jpg "></a> In mod prestabilit,
imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei legaturi.
Daca stabilim pentru atributul "border" al etichetei <img> la 0, acest chenar dispare.

Folosirea imaginilor drept link-uri

Imaginile pot fi folosite drept link-uri in pagini obisnuite sau in pagini care includ frameset-
uri.Mai exact atunci cand facem click pe o imagine, browser-ul sa ne redirectioneze catre o adresa
anume. Legaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web. Ele
transforma un text obisnuit in hypertext sau hiperlegatura, care permite trecerea rapida de la o
informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in
lume. Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran sensibile la apasarea
butonului stang al mouse-ului.

Legaturi intre pagini aflate in acelasi director

8
 O legatura de pe o pagina catre o alta aflata in acelasi director se formeaza cu ajutorul
etichetei <a> (de la "anchor"= ancora). Pentru a preciza pagina indicata de legatura se utilizeaza un
atribut al etichetei <a> numit "href", care ia ca valoare numele fisierului HTML aflat in acelasi
director. Zona activa care devine sensibila la apasarea butonului stang al mouse-ului este formata
din textul cuprins intre etichetele <a> si </a>. Prezenta etichtetei de sfarsit </a> este obligatorie.

Ancore

Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi. O ancora
se defineste de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaza atributul "name"
care primeste ca valoare un nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legatura
catre "leg1" definita in aceeasi pagina, se utilizeaza eticheta <a> avand atributul "href" la valoarea
"#leg1". Pentru a introduce o legatura catre o ancora definita in alta pagina aflata in acelasi director,
atributul "href" primeste de data aceasta o valoare de forma
"nume_fisier.html#nume_ancora" .

Legaturi catre fisiere oarecare

O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice servere din
Internet. Pentru aceasta se utilizeaza eticheta <a> avand valoarea atributului "href" egala cu adresa
URL a fisierului destinatie. Atunci cand se efectueaza clic pe legatura din exemplul urmator,
browserul deschide o caseta de dialog intitulata "File download" care permite:

1. sa se salveze pe discul local fisierul;

2. sa se lanseze in executie aplicatia capabila sa interpreteze corect fisierele de tipul respectiv.

Liste in HTML

Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de
definitii, referinte sau indexuri. Glosarele sunt exemple clasice in acest sens; cuvintele sunt listate in
ordine alfabetica, urmate de definitii ale termenilor respectivi. In HTML, intreaga sectiune a unui
glosar va fi gestoinata printr-o lista de definitii care este inclusa intr-o pereche de marcaje de tip
lista de definitii: <dl>...</dl> (de la "definition list" = lista de definitii).

Observatii:

- Un termen al listei este marcat de eticheta <dt> (de la "definition term"= termen definit);

- - Definitia unui termen este initiata de eticheta <dd> (de la "definition description"= descrierea
definitiei);

- - Definitia unui termen incepe pe o linie noua si este identata.

Liste neordonate

O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> ("ul" vine
de la "unordered list"= lista neordonata). Fiecare element al listei este initiat de eticheta <li> (list
item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand
nou.
9
Tag-urile <ul> si <li> pot avea un atribut " type" care sabileste caracterul asfisat in fata fiecarui
element al listei. Valorile posibile al acestui atribut sunt:

1. "circle" (cerc);
2. "disc" (disc plin) - valoarea implicita;
3. "square" (patrat);

Listele neordonate pot fi imbricate pe mai multe niveluri.

Liste ordonate

O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol>
("ol" vine de la "ordered list"= lista ordonata). Fiecare element al listei este initiat de eticheta <li>
(list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un
rand nou.

Tag-urile <ol> si <li> pot avea un atribut " type" care stabileste tipul de caractere utilizate pentru
ordonarea listei. Valorile posibile sunt:

1. "A" pentru ordonare de tipul A, B, C, D, etc. (litere mari);

2. "a" pentru ordonare de tipul a, b, c, d, etc. (litere mici);

3. "I" pentru ordonare de tipul I, II, III, IV, etc. (cifre romane mari);

4. "i" pentru ordonare de tipul i, ii, iii, iv, etc. (cifre romane mici);

5. "1" pentru ordonare de tipul 1, 2, 3, 4, etc. (cifre arabe - optiune prestabilita).

Tabele in HTML

Tabelele ne permit sa cream o retea dreptunghiulara de zone, fiecare zona avand propriile optiuni
pentru culoarea fondului, culoarea textului, alinierea textului, etc.

Pentru a insera un tabel se folosesc etichetele corespondente <TABLE>...</TABLE>. Un tabel este

format din randuri. Pentru a insera un rand intr-un tabel se folosesc etichetele <TR> ...</TR> (de la
"table row" = rand de tabel ). Folosirea etichetei de sfarsit este optionala. Un rand este format din
mai multe celule ce contin date. O celula de date se introduce cu etichetele<TD>...</TD>.

In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tabel, se utilizeaza un
atribut al etichetei numit "border". Acest atribut poate primi ca valoare orice numar intreg (inclusiv
0) si reprezinta grosimea in pixeli a chenarului tabelului. Daca atributul "border" nu este urmat de o
valoare, atunci tabelul va avea o grosime prestabilita egala cu 1 pixel. O valoare egala cu 0 a
grosimii semnifica absenta chenarului. Cand atributul "border" are o valoare nenula, chenarul unui
tabel are un aspect tridimensional.

Alinierea tabelului

Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul "align" al etichetei <TABLE>, cu
urmatoarele valori posibile: "left" (valoarea prestabilita), "center" si "right ". Alinierea este
importanta pentru textul ce inconjoara tabelul. Astfel:

10
- daca tabelul este aliniat stanga, atunci textul care urmeaza dupa punctul de inserare al tabelului
va fi dispus in partea dreapta a tabelului.
- daca tabelul este aliniat dreapta, atunci textul care urmeaza dupa punctul de inserare al
tabelului va fi dispus in partea stanga a tabelului.

- - daca tabelul este aliniat pe centru, atunci textul care urmeaza dupa punctul de inserare al
tabelului va fi afisat pe toata latimea paginii, imediat sub table

Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu ajutorul atributului "bgcolor", care poate fi atasat intregului
tabel prin specificarea in cadrul etichetei <table> sau numai celulor de date prin specificarea sa in
etichetele de celula (<td>). Valorile pe care le poate primi atributul "bgcolor" sunt cele cunoscute
pentru o culoare.

Dimensionarea celulei unui tabel

Distanta dintre doua celule vecine se defineste cu ajutorul atributului "cellspacing" al

etichetei <TABLE>. Valorile acestui atribut pot fi numere intregi pozitive, inclusiv 0, si reprezinta
distanta in pixeli dintre doua celule vecine. Valorea prestabilita a atributului "cellspacing" este 2.
Distanta dintre marginea unei celule si continutul ei poate fi definita cu ajutorul atributului
"cellpadding" al etichetei <TABLE>. Valorile acestui atribut pot fi numere intregi pozitive si
reprezinta distanta in pixeli dintre celule si continutul lor. Valorea prestabilita a atributului
"cellpadding" este 1.

Dimensionarea unui tabel

Dimensiunile unui tabel - latimea si inaltimea - pot fi stabilite exact prin intermediul a doua
atribute - "width" si "height" - ale etichetei <TABLE>. Valorile acestor atribute pot fi:

1. numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a tabelului;

2. numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea din latimea si
inaltimea totala a paginii.

Alinierea continutului unei celule

Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului "align" care poate
lua valorile:

1. "left" (la stanga);

1. "center" (centrat) - valoarea prestabilita;

3. "right" (la dreapta);

4. "char" (alinierea se face fata de un caracter).

Alinierea pe verticala a continutului unei celule se face cu ajutorul atributului "valign" care poate
lua valorile:

1. "baseline" (la baza);

11
2. "bottom" (jos);

3. "middle" (la mijloc, valoarea prestabilita);

4. "top" (sus).

Tabele cu forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale
etichetelor <TR> si <TD>, o celula se poate extinde peste celule vecine. Astfel:

1. extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului "colspan", a
carui valoare determina numarul de celule care se unifica.

2. extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului "rowspan", a carui
valoare determina numarul de celule care se unifica.

Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. In acest caz, in
etichete vor fi prezente ambele atribute "colspan" si "rowspan".

Standardul si tehnologia CSS. Stilurile

Stilurile pun la dispozitia creatorilor de site-uri web noi posibilitati de personalizare a

paginilor HTML. Un stil reprezinta un mod de formatare exacta a unui bloc de text (spre exemplu
anumite caracteristici pentru font, marime, culoare, aranjare in pagina, distantare fata de margini
etc).

Exista doua modalitati de a defini un stil:

1. sintaxa CSS (Cascading Style Sheets);

2. sintaxa Javascript.

Terminologia CSS - Cascading Style Sheets - desemneaza "foi in stilul cascada". Se explica acest
nume in continuare.

In primul rand aceasta denumire are la origine posibilitatile oferite de tehnica CSS

Practic, tehnologia CSS faciliteaza oricarui proiectant de pagini web posibilitatea de a creea un stil
pentru fiecare tag HTML intrebuintat la un moment dat, putand ulterior sa aplice implicit acest stil
in toate paginile site-ului pentru elementul de pagina respectiv (adica pentru tagul HTML stilizat).

Standardul CSS permite informatiilor cu privire la stil sa fie specificate si referite in mai multe
feluri.Stilurile pot fi specificate in interiorul fiecarui tag HTML in parte, in cadrul sectiunii HEAD a
documentelor HTML sau intr-un fiser extern cu extensia ".CSS". In interiorul aceluiasi document
HTML pot fi referite mai multe fisiere CSS externe.

12
Stiluri dedicate

Aceste stiluri se aplica blocurilor de text pentru care sunt definite si apelate pe loc. De exemplu:

<H3 style= "text-align:right; color:#429EF7;">

In acest exemplu, stilul va determina toate titlurile H3 din paginile HTML care fac apel la acest stil
sa apara in browser in culoarea specificata si aliniate la dreapta.

Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente-tag (de ex. "H2", "H3", "P" si
"DIV"), atunci fie se utilizeaza o lista cu aceste elemente (separate prin virgula) in sectiunea
<style>...</style> din header-ul documentului (delimitat de marcajele <HEAD>...</HEAD>),
asociindu-i-se elementele de stil comune, fie se va utiliza stilul in mod explicit in cadrul fiecarui
tag, ca mai sus.

Clase de Stiluri

Clasele de stiluri permit definirea unui stil general (aplicabil in mai multe locuri in cadrul aceleiasi
pagini sau in pagini diferite) in vederea inserarii lui oriunde este necesar prin intermediul
unei simple referiri. Sa presupunem ca dorim sa definim o clasa de stiluri "clasa-mea" (pe
care dorim sa o aplicam anumitor portiuni de text pentru a le face sa apara de culoare verde
si aliniate la stanga). Vom utiliza in acest sens blocul <style>...</style>, aflat la randul sau in
interiorul blocului <head>...</head> (reprezentand head-erul documentului HTML). Vom
realiza ceea ce ne-am propus in felul urmator:

<style>

all.clasa-mea {text-align:left; color:green;}

</style>

Cuvantul standard "all" aflat in fata clasei de stiluri "clasa-mea" indica faptul ca aceasta clasa este
aplicabila tuturor blocurilor de text, atunci cand este necesar. Practic clasa de stiluri "clasa-mea"
poate fi asociata tuturor tagurilor HTML care opereaza cu text (ca de exemplu: H2, H6, P, DIV,
etc...) utilizand in interiorul fiecarui tag vizat o referire explicita la aceasta clasa: <TAG
class=clasa-mea> .

Asadar, daca dorim sa aplicam aceasta clasa de stiluri unui titlu de ordinul 3 (specificat in codul
HTML prin tagul H3), atunci scriem:

<H3 class=”clasa-mea”> Acesta este un header de marime 3, aliniat la stanga si de

culoare verde </H3>

Dupa cum s-a vazut, pentru apelarea unei clase de stiluri in vederea aplicarii sale elementului tag
curent se foloseste atributul "class" avand ca valoare numele clasei de stil. Impreuna cu specificatia
"all" din definirea clasei de stiluri, atributul "class" devine un atribut universal, adica va putea fi
asociat tuturor tagurilor HTML carora li se poate aplica (in acest caz celor care opereaza cu text).

Observatii:

- In interiorul unui bloc <style>...</style>, comentariile sunt blocuri delimitate de /* si */ (ca si in

C, C++, Java si Javascript).
13
- Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului
(spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p"), atunci in
constructia clasei va aparea acest element (de exemplu "p.clasa-mea-2").

Stiluri Identificate

Absolut toate elementele tag ale unui document HTML admit un atribut universal numit "id". Acest
atribut "id" poate identifica prin valorile sale stilul utilizat de un tag HTML .

Pentru a utiliza un stil "identificat" se procedeaza astfel:

1. In blocul <style>...</style> se introduce definitia stilului conform sintaxei:

<style>

#rosu {color: red}

</style>

2. In elementul (tagul) in care dorim utilizarea locala a acestui stil, folosim atributul "id" care
primeste ca valoare numele identificator al stilului definit anterior. Exemplu:

<p id="rosu">Acesta este un paragraf de text de culoare rosie</p>

Daca dorim ca un stil "identificat" sa fie aplicabil numai pentru anumite elemente ale documentului
(de exemplu "H3"), atunci in constructia (definitia) identificatorului de stil va aparea acest element
(aici "H3")

Stiluri Inline

Stilurile in-line sunt acele stiluri definite chiar in eticheta HTML (marcajul) ce initiaza blocul in
care dorim sa se aplice aceste stiluri. Adica sunt ceea ce, la precedentele sectiuni dedicate
standardului CSS, am definit ca stil in interiorul tagurilor H2, P, etc...

Dupa cum am vazut deja, pentru a defini stiluri inline se utilizeaza atributul universal "style"
(comun practic tuturor etichetelor ce apar intr-un document HTML) in continuarea caruia apare
semnul egal, dupa care, intre ghilimele, urmeaza definirea stilului, practic valoarea atributului
"style".

Valoarea data atributului "style" este tocmai descrierea stilului, cuprinsa nu intre acolade {..} (ca la
definirea in HEAD sau in fiserul CSS extern - dupa cum va urma}, ci intre ghilimele "..." (dupa
cum s-a aratat si din exemplele anterioare).

Concret:

<H3 style= "color:red; text-align: center;">Acest header are marimea 2, este de

culoare rosie si se pozitioneaza in pagina centrat.</H3>

14
Daca se doreste utilizarea unui anumit stil pentru un fragment de text, atunci se va include acest text
intr-un bloc cu ajutorul delimitatorilor <span>...</span>, dupa care se poate utiliza atributul "style",
in cadrul etichetei <span>, inline

Stiluri in Fisiere Externe

Stilurile definite in interiorul unui bloc <style>...</style> pot fi transferate intr-un fisier extern
existand astfel posibilitatea asocierii lor mai multor fisiere HTML.

Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:

1. Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia ".css".
Continutul acestui fisier coincide cu continutul unui bloc <style>...</style>, fara ca acesti
delimitatori sa fie inclusi.

2. In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1, se include in blocul
<head>...</head> o eticheta <link>, avand trei atribute:

- atributul "rel" cu valoarea "stylesheet";

- atributul "type" cu valoarea "text/css".

- atributul "href" avand ca valoare adresa URL a fisierului creat la punctul 1;

Stilurile definite din fisierul CSS extern se activeaza ca si cum ar fi stiluri definite in fisierul HTML
curent intr-un bloc <style>...</style>.

Pseudo Clase de Stiluri

Pseudoclasele se utilizeaza pentru personalizarea legaturilor web, atat de tip text, cat de tip imagine.
Ele se definesc in interiorul unui bloc <style>...</style> sau intr-un fisier extern, Exemplul
de mai jos este edificator in acest sens:

a: link {color: blue; font-size: 15pt;}

a: hover {color: red; font-style: italic; text-decoration: none}

a: visited {color: magenta; font-size: 15pt; text-decoration: none}

a: active {color: cyan; font-size: 15pt; text-decoration: none}

Explicatii:

 a: link se refera la modul în care arata un link în mod normal;

 a: hover se refera la modul în care arata un link atunci când se trece cu mouse-ul peste el (în
Netscape functioneaza doar de la varianta 6);

 a: active se refera la modul în care arata un link atunci când se efectueaza click pe el;

 a: visited se refera la modul în care arata un link deja vizitat;

15
  specificatia "text-decoration: none" elimina sublinierea implicita cu o linie albastra a link-
ului.

Pentru ca numai anumite legaturi sa utilizeze un stil, se pot folosi urmatoarele trei metode:

1. a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>

2. a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>

3. a.CLASA1: link {...} combinat cu <a class = CLASA1 href=" "> ...</a>

Chestiune Auxiliara

In browsere cursorul mouse-ului are in general o forma simpla si binecunoscuta, luand pe parcursul
vizionarii paginii respective maximum doua infatisari diferite:

 Mana - atunci cand este pozitinat pe o legatura

 Sageata oblica din directia dreapta jos spre stanga sus - atunci cand este pozitionat pe alt
obiect decat o legatura.

Acestea sunt insa formele implicite. Exista insa si cazuri in care se doreste ca acel cursor sa ia o alta
forma decat cele doua predefinite. La fel ca multe alte probleme care privesc modul in care arata o
pagina, si aceasta problema isi gaseste rezolvarea in folosirea CSS ca limbaj de descriere a modului
de stilizare a unui document.

Proprietatea care manipuleaza forma cursorului se numeste simplu: "cursor" si poate fi introdusa in
orice element "style" al unui tag html.

De exemplu, pentru obtinerea unei imagini a cursorului de tipul unei sageti insotite de un semn de
intrebare la trecerea mouse-ului peste un link, iata codul care va trebui folosit:

<a href="fisier.html" style="cursor: help">Legatura</a>

16
 3. CARACTERISTICILE STRUCTURALE ALE LANŢURILOR CINEMATICE
ŞI MECANISMELOR PLANE CU TREI GRADE DE LIBERTATE

3.1. Consideraţii generale

Pentru sinteza structurală a mecanismelor plane, inclusiv a mecanismelor cu came se utilizează

soluţiile lanţurilor cinematice existente în literatura de specialitate. Acestea au constituit obiectul de
cercetare a mai multor generaţii şi au fost utilizate pentru diverse categorii de mecanisme
constituind totodată sursa unor soluţii constructive pentru roboţii seriali sau paraleli.
Lanţul cinematic sau sistemul cinematic este un ansamblu de elemente cinematice conectate
prin cuple cinematice.
Gradul său de libertate L se calculează prin diferenţa dintre gradele de libertate ale elementelor
considerate libere şi condiţiile de legătură impuse de cuplele cinematic.
Notând prin n numărul elementelor, prin c numărul cuplelor inferioare (de rotaţie sau
translaţie în cazul sistemelor plane) şi prin s numărul cuplelor superioare relaţia gradului de libertate
L cunoscută ca formula lui Cebâşev este
L  3n  2c  s (1.1)
In cazul mecanismelor monomobile relaţia (1.1) particularizată sub forma
2c  s  3n  4  0 (1.2)
se cunoaşte ca relaţia lui Grübler.
Transformarea unui lanţ cinematic având cuple superioare într-un lanţ cinematic echivalent
exclusiv cu cuple inferioare se face prin egalitatea
3n  2c  s  3(n  n' )  2 c  c ' (1.3)
astfel că c '   3n' s  / 2 (1.4)
unde c' , n' N sunt respectiv cuplele cinematice inferioare şi elementele cinematice adăugate în
lanţ. Relaţia (1.4) conduce prin particularizare la clasica teoremă de echivalare a cuplelor
superioare.

3.2. Teorema de echivalare a cuplelor superioare

Teorema de echivalare a cuplelor superioare este particularizarea relaţiei (1.4) pentru s 1,
n'  1 , ceea ce determină c'  2 astfel că teorema are următoarea formulare. O cuplă superioară
este echivalentă cu un element cinematic şi două cuple cinematice inferioare plasate în centrele de
curbură ale curbelor ce determină cupla superioară respectivă (Fig.1.1).
Cuplele cinematice inferioare sunt de rotaţie pentru centre de curbură situate la distanţă finită
(Fig.1.1.a) sau de translaţie pentru cele plasate la infinit (Fig.1.1.b,c). Echivalarea este instantanee
fiind dependentă de poziţia elementelor în contact.

17
 Teorema de echivalare este utilizată atât pentru analiza cât şi pentru sinteza structurală a
mecanismelor plane cu came.

i+1

i
Ki+1

i+1

Ki

a. Ki+1

K i 1

i
i+1

Ki
Ki
i+1

b. c.
Fig.1.1
Din soluţiile structurale ale lanţurilor cinematice fundamentale plane (care au numai cuple
cinematice inferioare) se pot obţine soluţii având cuple cinematice superioare, o cuplă superioară
impunând substituirea unui element şi a două cuple cinematice inferioare (de rotaţie şi/sau de
translaţie). Acesta este motivul pentru care atenţia cercetătorilor s-a focalizat către sinteza lanţurilor
fundamentale.

18
 3.3. Soluţii structurale pentru lanţurile cinematice cu grad de mobilitate nul. Grupe
modulare pasive

Pentru sinteza structurală a mecanismelor plane, inclusiv a mecanismelor cu came se utilizează

soluţiile lanţurilor cinematice existente.
Se acceptă în consecinţă ca relaţie a gradului de libertate L pentru lanţurile cinematice plane
fundamentale relaţia
L  3n  2c (1.5)
Elementele cinematice şi contururile independente sunt definite prin clasa dată de numărul cuplelor
cinematice adiacente. Astfel, un element de clasă i are i cuple cinematice inferioare.
Rezultă deci că pentru un lanţ cinematic fundamental plan cu n elemente cinematice şi c
cuple cinematice se pot scrie următoarele relaţii
n   ni (1.6)
i 2

 in i
c i (1.7)
2
L  n 2    i  3 n 2 (1.8)
i 4

1
N 1   i  2ni
2 i 3
(1.9)

N fiind numărul de contururi independente.

Relaţiile precedente evidenţiază următoarele:

- numărul total al elementelor de clase impare este par, adică n

k 1
2 k 1
 2h ;

- gradul de libertate nu este influenţat de numărul elementelor ternare n3 .

Din relaţiile anterioare se pot obţine ecuaţiile generale de sistematizare a lanţurilor cinematice
plane sub forma
n  2( N  1)  L  2 N  M  1
(1.10)
c  3( N  1)  L  3 N  M

n2  L   (i  3)ni
i4
(1.11)
n  L   (i  2) ni  2( N  1)
i 3

Ecuaţiile (1.11) se soluţionează în numere întregi pozitive şi deci

n  n2  L  0 (1.12)
 n L nL 
min n, 2 ,   ni  0 i  3 (1.13)
 i 3 i 2 
19
fiind utilizate în sinteza structurală a lanţurilor cinematice fundamentale plane.
Pentru lanţurile cinematice cu gradul de mobilitate nul, M=0 ceea ce corespunde unui grad de
libertate L=3 se deduc relaţiile
n  2N  1 c  3N (1.14)

astfel că n2  3   (i  3)ni n  3   (i  2)ni  2( N  1) (1.15)

i4 i 3

Relaţiile (1.10) pot fi rescrise ca

n  1  2N  M c  3N  M (1.16)
sau
m  2N  M c  3N  M (1.17)
m fiind numărul elementelor mobile  m  n  1 , iar N > 0 , M  0 .
Relaţiile (1.17) şi (1.15) au fost utilizate pentru sistematizarea lanţurilor cinematice cu M  0 şi
N  1,2,3,4 cunoscute ca fiind grinzile Baranov (Baranov trusses -BT) şi care sunt prezentate în

Tabelul 1.1. Acestea în număr de 33 sunt menţionate în literatura de specialitate.

Tabelul 1.1

20
 Din soluţiile grinzilor Baranov (Tabelul 1.1) prin eliminarea unui element, cuplele cinematice
ale acestuia devenind cuple potenţiale se obţin grupele modulare pasive.
21
 Grupa modulară pasivă este un lanţ cinematic deschis, nedecompozabil caracterizat printr-un
grad de mobilitate nul.
In literatura de specialitate sunt menţionate 13 astfel de grupe, în Tabelul 1.2 acestea fiind puse
în corelaţie cu grinzile Baranov. Grupele modulare pasive (GMP) se conectează într-un sistem prin
cuplele potenţiale, o cerinţă esenţială fiind aceea ca acestea să nu fie legate la acelaşi element
cinematic.
Tabelul 1.2
Grinda Baranov (BT) Grupa modulara pasiva
(GMP)

BT 1 GMP 1

GMP 2
BT 2
GMP 3

GMP 5

GMP 9
BT 3
GMP 11

GMP 6

GMP 8

GMP 10
BT 4

GMP 12

GMP 4

BT 5
GMP 7

22
 GMP 13

1.4. Soluţii structurale pentru lanţurile cinematice cu grad de mobilitate unitar. Grupe
modulare active monomobile

Lanţurile cinematice cu un grad de mobilitate (M=1), adică gradul de liberate (L=4) au ca relaţii
caracteristice (1.17, 1.15). Soluţiile acestora sunt redate în Tabelul 1.3 pentru lanţurile cu N=1,2,3.

Tabelul 1.3

Din aceste lanţuri, precum şi din cel cu N=0 generator al bipletei (ansamblu format din două
elemente conectate printr-o cuplă cinematică) se pot obţine grupele modulare active cu un grad de
mobilitate. Acestea se obţin analog celor pasive, adică prin eliminarea unui element cuplele acestuia
devenind cuple potenţiale, de legătura în diverse sisteme.
Grupa modulară activă cu un grad de mobilitate reprezintă un lanţ cinematic deschis,
nedecompozabil şi cu o cuplă cinematică activă.
Câteva dintre aceste grupe modulare active cu un grad de mobilitate sunt prezentate în Tabelul
1.4.

23
 Tabelul 1.4

Astfel prima grupă modulară se obţine din biletă, cea de a doua din lanţul patrulater,
următoarele două din lanţul cinematic Watt, iar ultimele din lanţul cinematic Stephenson.

1.5. Soluţii structurale pentru lanţurile cinematice bimobile. Grupe modulare active
bimobile

Pentru lanţurile cinematice bimobile (M=2, L=5) relaţiile caracteristice sunt

n  2N  3 c  3N  2 (1.18)
n2  5   (i  3)ni n  4   (i  2)ni (1.19)
i4 i 3

deduse din (1.10, 1.11).

Soluţiile acestor lanţurile cinematice bimobile pentru N=1,2,3 sunt redate în Tabelul 1.5.
Tabelul 1.5

24
25
 Din lanţurile menţionate se pot obţine grupe modulare active cu două grade de mobilitate.
Acestea sunt nedecompozabile cuplele potenţiale fiind cele ale elementului eliminat din structură.
Câteva dintre aceste grupe modulare sunt prezentate în Tabelul 1.6.
Tabelul 1.6

Lanţurile cinematice stau la baza proiectării structurale şi constructive a sistemelor mecanice cu

diverse grade de mobilitate.
Includerea soluţiilor în software-uri avansate de proiectare oferă avantaje deosebite în ceea ce
priveşte proiectarea, optimizarea, simularea şi animarea sistemelor.
In cazul sistemelor bimobile sau multimobile implementarea acestora ar presupune o serie de
etape de cercetare care includ:
 specificarea posibilelor baze şi efectori,
 verificarea acestora prin modelul structural invers caracterizat printr-un grad de mobilitate
instantaneu nul,
 selectarea soluţiilor optime structural-constructive pe baza acelor soluţii ce includ un număr
minim de grupe modulare pasive,
 amplasarea în structură a cuplelor cinematice active (actuatori),
 selectarea prin modele structurale directe a sistemelor optime structural-constructive, care să
conţină un număr minim de grupe modulare active şi pasive.
Astfel piciorul bimobil al platformei Stewart (Fig.1.2) are la bază lanţul cinematic bicontur şi cu
două grade de mobilitate (Fig.1.3), care este menţionat în Tabelul 1.5.

Fig.1.2 Fig.1.3

26
 Modelul structural invers (Fig.1.4) este constituit din trei grupe modulare pasive de tip diadă, iar
modelul structural direct (Fig.1.5) este compus din două grupe modulare active de tip RTRR.

RTR(1,2) RTR(4,5) RTRR(4,5,6)

RRR(3,6) RTRR(1,2,3)

Fig.1.4 Fig.1.5

1.6. Proiectarea structural-constructivă a unui sistem bimobil pentru piciorul unei

platforme păşitoare

Proiectarea unui astfel de picior numit şi pedipulator se face pe baza unui lanţ cinematic plan cu
gradul de libertate L= 5, ceea ce corespunde unui grad de mobilitate M=2 (gradul de mobilitate
exprimă numărul gradelor de libertate ale sistemului în raport cu unul dintre elementele sale).
Din cele 40 de lanţuri cinematice plane cu trei contururi independente stabilite în literatura de
specialitate şi prezentate în Tabelul 1.5 se selectează lanţul din Fig.1.6.
4

II
3 5
6
2
I III
9 7
1
8

Fig.1.6
Etapele de lucru sunt următoarele:

1. Stabilirea caracteristicilor structurale ale lanţului cinematic selectat

1.1. Caracteristrici structurale:
- număr total de elemente cinematice n = 9
- numărul cuplelor cinematice de inferioare (cuple de rotaţie sau de translaţie care sunt caracterizate
printr-un număr de restricţii k = 2 în plan) c = 11
- număr de contururi independente : N = c – n + 1 N = 11 – 9 + 1 = 3
- clasa contururilor independente: clI = 4 clII = 4 clIII = 5
27
 1.2. Determinarea gradului de mobilitate :
M = 3 (n-1) – 2 c M= 3x8 – 2x11 = 2
2. Selectarea posibilei baze şi a efectorului pentru soluţiile structurale
La selectarea bazei şi efectorului trebuie să se aibă în vedere următoarele teoreme:
T1. efectorul trebuie să aibă în raport cu baza o mişcare plan paralelă dependentă de doi parametrii
independenţi în conformitate cu gradul de mobilitate M=2 cerut sistemului;
T2. efectorul nu poate fi adiacent bazei;
T3. baza şi efectorului nu pot aparţine aceluiaşi lanţ patrulater (Fig.1.7.a), aceluiaşi lanţ Watt
(Fig.1.7.b) sau Stephenson (Fig.1.7.c).
2

1 3
a)
4

2 3 2 5
4

I II 1 I 3 II

1 6
6 5 4

b)
c)

Fig.1.7
2.1. Se realizează pe baza teoremelor anterioare matricea posibilelor baze şi efectori
elementul 1 2 3 4 5 6 7 8 9
1 0 0 0 0 0 1 1 1 0
2 0 0 0 0 0 1 1 1 0
3 0 0 0 0 0 1 1 1 0
4 0 0 0 0 0 1 1 1 0
5 0 0 0 0 0 0 1 1 0
6 1 1 1 1 0 0 0 1 1
7 1 1 1 1 1 0 0 0 1
8 1 1 1 1 1 1 1 0 1
9 0 0 0 0 0 1 1 0 0

Observaţie: Matricea este pătrată, simetrică şi cu elementele diagonalei principale nule (baza nu
poate fi în acelaşi timp efector).

2.2. Selectarea unei baze şi a unui efector din matricea anterioară

Se poate alege de exemplu drept bază elementul cinematic 1 şi efectorul elementul cinematic 6.

28
 2.3. Modelul structural invers
Modelul structural invers este caracterizat printr-un grad de mobilitate instantaneu M inst=0 ceea
ce corespunde impunerii a doi parametri pentru efector. Acest lucru se realizează prin conectarea
printr-o cuplă inferioară a bazei cu efectorul. In cazul menţionat modelul structural invers este redat
în Fig.1.8.
7 8

5
6
4 9

2
1

Fig.1.8

Modelul structural invers trebuie sa conţină exclusiv grupe modulare pasive, adică lanţuri
cinematice deschise, nedecompozabile şi grad de mobilitate zero.
In literatura de specialitate sunt menţionate 13 grupe modulare pasive, altele putând fi obţinute
din cele 33 grinzi Baranov.
Se remarcă faptul că efectorul trebuie să aparţină primei grupe modulare pasive conectată la
bază.
Un sistem este cu atât mai performant cu cât conţine un număr minim de grupe modulare
pasive.
In cazul menţionat se observă în Fig.1.9 grupele modulare pasive constituente ale modelului
invers.

29
 7 8

5
6
4 9

2
1

4
Fig.1.9
2
Se pun în evidenţă (Fig.1.9) grupa modulară pasivă GMP(2,3,4,5,6,9) identificată 6
3 5 (Fig.1.10) ca
GMP5 şi grupa modulară pasivă de tip diadă GMP(7,8).
4
9

2 6
3 5

7 8
9

7 8
Fig.1.9 Fig.1.10

30
 Modelul invers are conexiunea de grupe modulare prezentată în Fig.1.11.

GMP(7,8)

GMP(2,3,4,5,6,9)

1=0

Fig.1.11
3. Amplasarea cuplelor active în modelul structural direct
Amplasarea cuplelor active în sistem trebuie să satisfacă următoarele teoreme:
T1. într-un contur de clasa IV poate fi amplasată cel mult o cuplă activă;
T2. într-un lanţ cinematic Watt sau Stephenson poate fi amplasată cel mult o cuplă activă.
Modelul direct este optim construit cu un număr minim de grupe modulare.
Din examinarea lanţului cinematic (Fig.1.6) se observă următoarele:
- în conturul I (patrulater) poate fi inclusă cel mult o cuplă cinematică activă,
- în conturul I+II (structură Watt) poate fi amplasată cel mult o cuplă activă.
- în conturul III pot fi amplasate două cuple cinematice active, adică pentru o grupă modulară

activă cu M=2 acestea ar putea fi între elementele (5,6), (6,7), (7,8), (8,9) existând astfel C 42 = 6

soluţii, adică
(5,6)+(6,7)
(5,6)+(7,8)
(5,6)+(8,9)
(6,7)+(7,8)
(6,7)+(8,9)
(7,8)+(8,9)
In cazul în care se utilizează cuplele cinematice active (7,8) şi (8,9) modelul structural (Fig.1.12)
este constituit dintr-o singură grupă modulară activă cu M=2 (Fig.1.13), căreia i se pot asocia
modele cinematice sau dinamice adecvate.

31
 6
6
4 5
4 5 7
7

3
3 8
8 9
9
2 2
1= 0

Fig.1.12 Fig.1.13

Corespunzător modelului structural (Fig.1.12) se poate realiza un model constructiv ca acela din
Fig.1.14.

8 2

9 3

4
5

Fig.1.14
Mecanismul pedipulator bimobil are capacitatea de a atinge cu extremitatea efectorului (elementul
de execuţie 6) orice punct dintr-un domeniu plan determinat.

32
 PREZENTAREA PAGINII WEB REALIZATE

În orice calculator informaţia este stocată în unităţi numite fişiere. Aceste fişiere conţin: text,
programe, imagini, filme, sunete, etc. Pentru www sunt importante anumite fişiere speciale,
numite şi pagini Web. Acestea au extensia .htm sau html şi sunt scrise într-un limbaj specific numit
HyperText Markup Language (HTML), adică Limbajul de Marcare a Hipertextului, ceea ce
reprezintă de fapt limbajul pe care browserele de internet îl înţeleg şi cu ajutorul lui pot fi afişate
paginile web.
La CERCETAREA STIINTIFICA mi-am propus să realizez un site cu tema STUDIUL
PRIVIND CONSTRUCTIA UNEI PAGINI WEB PENTRU SELECTAREA LANTURILOR
CINEMATICE CU 3 GRADE DE LIBERTATE.. Tema se regăseşte în lecţiile studiate la
masterul de MODELARE SI SIMULARE A SISTEMELOR MECANICE MOBILE. Am considerat
că acest site îmi va fi deosebit de util în activitatea de cercetare deoarece, pe lângă faptul că
studentii sunt atraşi de modul de prezentare şi structurare al informaţiei, HTML-ul prin cele două
caracteristici esențiale ale sale: hipertextul și universalitatea, vor contribui la calitatea actului
învăţării. Hipertextul îmi permite să creez link-uri (legături) într-o pagină web, care direcționează
studentii către alte pagini web sau către orice alt site de pe internet. Cum site-ul poate fi făcut
public, aceasta înseamnă că informația poate fi accesată de către studenti din multe alte locuri, deci
noţiunile predate, pot fi oricând accesate şi revizuite. Universalitatea înseamnă că, orice calculator
poate citi o pagină web, deoarece documentele HTML sunt salvate ca fișiere text. Nu contează că
studentii utilizează calculatoare cu sisteme de operare diferite, cum ar fi: Macintosh, Windows,
Linux sau Unix. Web-ul este deschis tuturor.
Codificarea informaţiilor în HTML se bazează exclusiv pe informaţii de tip text (şiruri de
caractere ASCII). Dacă informaţia propriuzisă este un text acest sistem de codificare este natural.
Dacă însă informaţia este de altă natură (o imagine, o secvenţă video sau audio) documentul în
format HTML va include numele fişierului care conţine informaţia respectivă.
În realizarea acestui site am încercat să utilizez toate noţiunile prezentate pe parcursul orelor de
curs: de la formatări la nivelul textului şi al paragrafului, la liste ordonate, dezordonate sau
imbricate, întâlnite în prima pagină a site-ului; de la inserarea imaginilor şi crearea tabelelor, la
formatări la nivel de celule, întâlnite în paginile 2 şi 3; de la formularul utilizat în pagina testului de
evaluare, la cadrele întâlnite în pagina cu aplicaţii.

33
 Consider că lucrarea mea este utilă atât la orele de curs, din punct de vedere al conţinutului
teoretic, cât şi la orele din cadrul masterului ca exemplu de site şi pentru identificarea marcajelor
folosite.
Site-ul realizat de mine, prin care îmi propun să-i iniţiez pe studenti în tainele informaticii, cit si
in domeniul de specialitate, se compune din trei pagini prin care se poate naviga foarte uşor. În
prima pagină (pagina de Home) ilustrată mai jos, am stabilit o culoare de fundal (<body
bgcolor="#FFCC66">), am utilizat diferite tipuri de titluri (h1, h4), de stiluri de formatare a textului
(îngroşat, înclinat, subliniat), am inserat o linie orizontală pentru care am stabilit atributele: culoare,
grosime, aliniere (<hr align="center" size="20" color="red">), am stabilit anumite atribute pentru
paragrafe (fiecare paragraf începe cu alineat), am inserat o imagine aliniată la dreapta (<img
src="lthh.jpeg" align="right">), am inserat un link, deasemenea am folosit butoane cu trimitere
catre alte pagini si ancore.
Prima pagina a site-ului denumită “Grade de mobilitate” se axează foarte mult pe lucrul cu
tabele. Am încercat să utilizez cât mai multe şi mai variate taguri şi atribute pentru formatarea
tabelelor.
În prima parte a paginii vizibile în browser, am realizat un tabel fără liniatură în care se află
grupate titlul şi imaginea din colţul stânga sus aplicată ca imagine de fundal a celulei.
Tabelul cu capitolele utilizează atributul BORDER pentru evidenţierea liniaturii, tagul
CAPTION pentru a adăuga un titlu tabelului, cât şi o linie de antet. Textul liniilor de antet este
evidenţiat prin stilul bold.
Tabelul care grupează meniurile în coloana din stânga, foloseşte în plus atributele:
 FRAME - specificã afişarea bordurilor exterioare, iar aici are valoarea box - chenar complet.;
 RULES - controleazã afişarea liniilor interioare, iar aici are valoarea all - afişeazã toate
liniile interioare;
 BORDERCOLORDARK este culoarea umbrei dintr-o bordurã umbritã, iar aici are valoarea red;
 BORDERCOLORLIGHT este culoarea liniei luminoase dintr-o bordurã umbritã, iar aici are
valoarea #FFFF33-galben.
În coloana a doua a tabelului, în care se află conţinutul propriu-zis, am folosit mai multe tabele
imbricate pentru a organiza informaţiile şi imaginile.
Meniurile reprezintă atât legături câtre alte pagini web ale site-ului cât şi referinţe la documente
de tip Word sau PowerPoint pentru a pune în valoare şi alte modalităţi de reprezentare a informaţiei.
În partea de jos a paginii am realizat o legătură către testul de verificare a cunoştinţelor şi am
inserat un buton ca referinţă către pagina de aplicaţii a site-ul
Pentru inserarea imaginii video în documentul HTML am folosit alături de eticheta <IMG>
următoarele atribute:
34
  dynsrc - înlocuieşte atributul src şi permite inserarea în documentul HTML a unei
imagini video în acelaşi mod în care este inserată o imagine statică.
 controls - nu are alocată nici o valoare, prezenţa sa având doar scopul de a adăuga
butoanele de control asemănătoare celor de la aparatele video.
 loop - repetă redarea clipului de un anumit numar de ori (aici are valoarea infinite, caz
în care clipul este redat pâna când utilizatorul stopează derularea sa apăsând butonul
stop al ferestrei de vizualizare ( dacă fereastra conţine butoanele de control) sau
efectuează click dreapta cu mouse-ul în fereastra de vizualizare.
 start – aici are două valori combinate pentru a se realiza redarea imaginii mai întâi
imediat după încărcarea în pagină şi apoi de fiecare dată când mouse-ul este plasat
deasupra ei.
Atribut dynsrc este o extensie Internet Explorer si nu este recunoscut de browserele Netscape.
Pentru a vizualiza o imagine video in-line într-un browser Netscape, vizitatorul paginii trebuie să
instaleze un program auxiliar de tip plug-in. Dacă programul plug-in nu este disponibil pe
computerul vizitatorului, imaginea video nu va putea fi afişată.
Pagina de inceput a raportului de cercetare cuprinde butoane ,ancore butoane cum ar fi: Grupe
modulare pasive , Grad de mobilitate unitar ,Grad de mobilitate unitar, Grupe modulare active
bimobile.
În partea de jos a paginii am realizat o legătură către testul de verificare a cunoştinţelor şi am
inserat un buton ca referinţă către pagina de aplicaţii a site-ul
Prima pagina a site-ului denumită “Tipuri de grupe modulare” se axează foarte mult pe lucrul cu
tabele. Am încercat să utilizez cât mai multe şi mai variate taguri şi atribute pentru formatarea
tabelelor. În prima parte a paginii vizibile în browser, am realizat un tabel fără liniatură în care se
află grupate titlul şi imaginea din colţul stânga sus aplicată ca imagine de fundal a celulei.

35
36
A doua pagina apare in documentul HTML prin actiunea butonului “Grad de mobilitate”, in care
sunt explicatii referitoare la lanturile cinematice, gradele de mobilitate nul, unitar, lanturi cinematice
bimobile.

Un alt capitol foarte important in lucrare este despre GRINZILE BARANOV

(Baranov trusses -BT) şi care sunt prezentate în Tabelul 1.1. Acestea în număr de 33 sunt
menţionate în literatura de specialitate.

37
 Tabelul 1.1

38
 Din soluţiile grinzilor Baranov (Tabelul 1.1) prin eliminarea unui element, cuplele cinematice
ale acestuia devenind cuple potenţiale se obţin grupele modulare pasive.
Grupa modulară pasivă este un lanţ cinematic deschis, nedecompozabil caracterizat printr-un
grad de mobilitate nul.
In literatura de specialitate sunt menţionate 13 astfel de grupe, în Tabelul 1.2 acestea fiind puse
în corelaţie cu grinzile Baranov. Grupele modulare pasive (GMP) se conectează într-un sistem prin
cuplele potenţiale, o cerinţă esenţială fiind aceea ca acestea să nu fie legate la acelaşi element
cinematic.
Tabelul 1.2
Grinda Baranov (BT) Grupa modulara pasiva
(GMP)

BT 1 GMP 1

GMP 2

39
 GMP 3
BT 2

GMP 5

GMP 9
BT 3
GMP 11

GMP 6

GMP 8

GMP 10
BT 4

GMP 12

GMP 4

BT 5 GMP 7

40
41
 TEST DE VERIFICARE A CUNOŞTINŢELOR

Testul pentru verificarea cunoştinţelor se bazează pe utilizarea formularelor. Formularele

asigură construirea unori pagini Web care permit utilizatorilor să introducă efectiv informaţii şi să le
transmită serverului. Ele pot varia de la o simplă casetă de text, pentru introducerea unui şir de
caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor de căutare din Web -
până la o structură complexă, cu multiple secţiuni, care oferă facilităţi puternice de transmisie a
datelor.
În spaţiul delimitat de cele două linii orizontale, am creat casete text pentru identificarea celui care
dă testul şi o parolă. Atributul type al casetei de text determină tipul campului de text. De exemplu:
text, trimite, sau parolă.
Testul conţine CheckBox-uri care oferă posibilitatea de a alege unul, două sau mai multe
variante de răspuns şi Butoanele Radio ca să poata alege o variantă de răspuns dintr-un număr
limitat de posibilităţi.

În finalul paginii am inserat un buton de finalizare test care trimite testul către serverul de
e-mail prin sintaxa: <input type="Submit" name="verificare" value="Finalizare test"> şi
butonul de întoarcere în pagina de Home.

42
43
Ca resursa a acestui site, am folosit un document Word despre SOLUTIILE STRUCTURALE
PENTRU LANTURILE CINEMATICE, document care se afla in site, in resurse.

44
Documentul HTML a fost scris in Notepad, iar forma lui finala se deschide in INDEX, cu ajutorul
aplicatiei Internet Explorer sau Google Chrome.

45
 APLICAŢII

Cu HTML 4.0 au apărut specificaţiile pentru modele de stiluri, cunoscute ca Modele de Stiluri
în Cascada (Cascading Style Sheets - CSS). Acestea ajută la afişarea grafică şi încadrarea
conţinutului în pagină. Documentele HTML pot conţine reguli de stil direct în ele sau ele pot
importa foi de stil. Pentru valorificarea noţiunilor de CSS predate la acest curs, am realizat o pagină
web cu aplicaţii variate pe tema aleasă. Am editat pagina de aplicaţii cu Notepad, aşa cum am
procedat şi la celelalte pagini şi am salvat-o cu extensia html. În acest fişier am apelat stilurile şi
cadrele definite în fişierul extern editat tot cu Notepad, dar salvat cu extensia css.
Sintaxa <link rel="stylesheet" type="text/css" href="stil.css"/> adaugată în secţiunea
HEAD a documentului HTML, spune browser-ului că sunt adăugate elemente de stil CSS.
Avantajul folosirii fişierelor externe CSS este faptul că aceleaşi coduri de stil pot fi folosite de
mai multe pagini din site, chiar tot site-ul, fiind scrise o singură dată. În plus ajută la micşorarea ca
marime (în bytes) a documentului HTML care astfel se încarcă mai repede.
Stilul creat poate fi folosit doar de elementele unde vom adăuga comanda class="cuvant",
celelalte elemente nefiind afectate.
În pagina de mai jos am realizat patru cadre: antet, meniuri, conţinut şi subsol, pentru fiecare
folosind linii de grosimi şi stiluri diferite, după cum se poate observa.
Pentru animarea paginii am aplicat un efect de mişcare atât pe text (vezi antet), cât şi pe
imagine, cu tagul special <marquee> </marquee> cu atributele:
 direction - direcţia de mişcare (left, right, up, down) - (stânga, dreapta, sus, jos)
 behavior - defineşte cum se va mişca textul (scroll, slide, alternate).

46
 CONCLUZII

Pentru realizarea site-ului am ales tema “STUDIUL PRIVIND CONSTRUCTIA UNEI

PAGINI WEB PENTRU SELECTAREA LANTURILOR CINEMATICE CU 3 GRADE DE
LIBERTATE”, deoarece este o temă foarte importantă pentru cercetare la master.
Cred că acest site îmi va fi de un real ajutor în activitatea didactică pentru cercetare prin
conţinutul teoretic şi, mai ales, prin filmuleţele care pot fi accesate foarte uşor şi care ilustrează
efectiv noţiunile abstracte, cât şi prin exemplele concrete realizate într-o mare varietate de
programe care se studiază : documente Microsoft Word, PowerPoint, accesorii Windows (Paint,
Notepad), filme şi expuneri de diapozitive pe computer, completate de şi cu titluri ce au aspect
profesionist, tranziţii, efecte, muzică şi realizate cu softul Windows Movie Maker, care vine gata
instalat începând cu versiunile de Windows XP Profesional.
Un alt motiv care m-a determinat să optez pentru această temă, îl reprezintă legătura
acesteia cu cursurile studiate . Prin filmuleţele şi albumele foto de la cursuri, sper să-i conving pe
studenti de larga răspândire a acestei teme, de faptul , ca are continuitate şi aplicabilitate practică în
foarte multe domenii de activitate. Site-ul reprezintă şi un mod de informare .
Realizarea unui site necesită într-adevăr foarte multă muncă pentru editarea documentelor
HTML, organizarea şi structurarea paginilor web, a documentelor inserate in site, prelucrarea
imaginilor, butoanelor, filmelor, pentru căutarea diferitelor informaţii şi adrese utile.

47
 BIBLIOGRAFIE

 Cursul 1 - Informatica aplicata in educatie si formare

 Cursul 2- Medii si tehnologii educationale interactive
 HTML, XHTML, CSS şi XML prin EXEMPLE, Teodoru Gugoiu, editura Teora
 http://www.marplo.net/html/stiluri_css.html
 http://www.scritube.com/stiinta/informatica/html/
 http://profs.info.uaic.ro/~val/tabele.html
 http://www.marplo.net/html/crearea_pagini.html
 http://www.competentedigitale.ro/html/
 http://www.ghid-html.info/20-crearea-si-editarea-unei-pagini-web.html

 http://it-science.lufo.ro/en/activiti/itac-i-programare/74-cum-se-realizeaz-o-
pagin-web
 1. Comănescu, Adr., Comanescu, D., Dugăeşescu I., Boureci, A., Bazele
modelării mecanismelor, Editura Politehnica Press, Bucureşti, 2010;
 2. Pelecudi, Chr., Comanescu, Adr., s.a., Analiza cinematica a mecanismelor -
probleme, UPB, 1985.
 3. Comănescu, Adr., Grecu, B., Terme, D., Mecanisme – modele structurale şi
cinematice, Edit.Bren, Bucureşti, 2001, ISBN 973-8154-36-5
 4. Comănescu, Adr., Comanescu, D., Geogescu, L., Bazele analizei şi sintezei
mecanismelor cu memorie rigidă, Editura Politehnica Press, 2008;
 5. Tempea, I., Dugaesescu, I., Proiectarea Mecanismelor, Ed. Printech, 2005,
ISBN 973-718-246-4
 6. Tempea, I., Dugaesescu, I., Neacsa, M., Mecanisme, Ed. Printech, 2006, ISBN
(10) 973-718-560-9
 7. Manolescu N., Maroş, D., Teoria mecanismelor şi a maşinilor. Cinetostatica şi
dinamica, Editura tehnică, 1958;
 8. Manolescu, N.I., Teoria mecanismelor si a masinilor (Note de curs), 4 volume,
Litografia Institutului de Cai Ferate, Bucuresti, 1955-1956, ,
 9. Pelecudi, Chr., Precizia mecanismelor, Editura Academiei Republicii
Socialiste Romania, 1975,

48
 10. Pelecudi, Chr., Bazele analizei mecanismelor, Editura Academiei Republicii
Socialiste Romania,1967,

49