UNIVERSITATEA DE STAT DIN MOLDOVA

FACULTATEA STIINŢE ECONOMICE

DEPARTAMENTUL CONTABILITATE ŞI INFORMATICĂ ECONOMICĂ

Lucru individual

La disciplina “Limbaje pentru organizarea e-activităţi”

Studiu de caz

”Proiectarea unui site de prezentare a diferitor tipuri de sport

Conducător ştiinţific: Tîrşu Valentina, lector universitar

Autorul: Velicico Vasile, grupa M-CI 161

Chişinău - 2017

Cuprins
1. Analiza site-ului ....................................................................................................................................... 3
2. Scopul realizării site-ului ...................................................................................................................... 3
3. Conţinutul site-ului ...................................................................................................................... 3
4. Proiectarea site-ului.......................................................................................................................7
5. Coduri HTML, CSS şi JavaScript .................................................................................................... 15
5.1. Tag-uri HTML ........................................................................................................................ 15

5.2. Stiluri CSS ............................................................................................................................. 108

5.3. Scripturi JavaScript ............................................................................................................... 31

6. Testarea site-ului ...................................................................................................................... 36

7. Concluzii ..................................................................................................................................... 36
Bibliografie ......................................................................................................................................... 37
Anexa 1. .............................................................................................................................................. 38
Anexa 2. .............................................................................................................................................. 67

2
 1.Analiza site-ului

Site-ul constă din urmatoarele pagini:

1) Pagina principală
2) Home
3) Basket
4) Volei
5) Fotbal
6) Harta-Siteului

,,Am înţeles că un om poate avea totul neavând nimic şi nimic având totul.”

2.Scopul realizării site-ului

Site-ul,, Intersport.md” are menirea sa informeze spectatorii despre informația necesară,
să analizeze părerile spectatorilor despre sport pentru a imbunătățirea imaginii sportului
Moldovenesc cît și a paginei web . Acesta este foarte acesibil și clar, iar într-un final va permite
ca spectatorii să fie la curent cu toate noutățile , recomandările care îi vor permite să ramînă
mereu solicitate .

3.Conţinutul site-ului
Site-ul va conţine noutăți, informații, date de contact despre site. Astfel site-ul va fi
proiectat sub următoarea structură:

Imagine 1

3
La începutul paginii principale a site-ului este prezentă denumirea site-ului ”Intersport” (img.4),
pentru a evidenția domeniul care este promovat, în antetul acestei pagini este

stabilit și logoul site-ului ,, ,Si anume generatia tinară,care face ca sportul să capete viață
”(img.2) Acest citat are un sens profund cu scopul de a

pune utilizatorul pe gînduri,de a analiza sensul vieții, de a face un imbold pentru tineret să

citească și să meargă pe teren.

Imagine 2

Site-ul îmbină doar cîteva culori, simple pentru utilizatori. Unicele nuanțe aprinse siteul le
capătă de la imagini
Culori aprinse şi dar nu sunt obositoare pentru utilizatorii site-ului, astfel interfața site-ului va
arata în modul următor:

4
 Imagine 3

4.Proiectarea site-ului
1) Pagina principală - Imaginea 2
Informează despre tipurile de sport, dar si cele mai actuale stiri.
2) Istoric
Conține informații si date referitoare la istoria sportului, si genurile lui.

5
3) Harta siteului
Conține harta de navigare.

6
 4) Logotipul anului.

5.Coduri HTML şi CSS

5.1. Tag-uri HTML

Site-ul este proiectat prin intermediul limbajului de descriere a paginilor web – HTML. Fiind
un limbaj de marcare, limbajul HTML utilizează o mulțime de tag-uri de marcare şi text simplu
pentru descrierea paginilor web.
În proiectarea site-ului s-au utilizat tag-urile de baza ce se conțin într-un fişier html:
<html> - tag-ul cu care se începe orice document HTML. Prin folosirea acestui tag îi spunem
browser-ului că este vorba de un fişier HTML pentru a-l putea afişa. Tag-ul este folosit împreună
cu tag-ul său de încheere </html>, care este tag-ul de incheere a oricărui document HTML.
<head> şi </head> - între aceste tag-uri sunt introduse alte tag-uri utilizate pentru titlul paginii şi
adresa foii de stiluri externe, care permite redarea elementelor HTML într-un anumit mod.
<title> şi </title> - sunt utilizate în interiorul tag-urilor <head> pentru a da titlul paginii
descrise. In fiecare pagina a site-ului acesta este diferit, pentru a facilita navigarea utilizatorului
în cadrul site-ului, de exmplu: <title> Tentors | Acasa </title> sau <title> Tentors | Servicii
</title> .
<body> şi </body> - interiorul acestor tag-uri reprezintă conținutul paginii web, adică tot ce
este scris între aceste tag-uri este afişat, de browser, pe ecranul monitorului.
Alte tag-uri HTML utilizate în descrierea paginilor web a site-ului, prezente între tagurile
<body> şi </body>, sunt următoarele:
<p> şi </p> - sunt utilizate pentru a defini un paragraf, la utilizarea acestor tag-uri browser-ul
amplasează cîte un rînd liber înainte şi după fiecare paragraf, aceasta proprietate permite
aranjarea într-un mod mai clar a informațiilor în pagină.
<br /> - acest tag este utilizat pentru a trece din rînd nou în interiorul paragrafelor.
<img /> -este utilizat pentru a însera imaginile în paginile web. Acest tag este utilizat cu

7
următoarele atribute: ”src” – pentru a indica locația imaginii, imaginile plasate într-un alt
director de cît fişierul sursă, prin intermediul acestui atribut este specificată calea de acces la
imaginea dorită, de exemplu: <img src="images/1.png" alt="Emblema" atributul ”alt” este
folosit pentru a afişa un text în locul imaginii, în cazul în care browser-ul nu poate afişa
imaginea. Alte atribute folosite în interiorul acestui tag sunt ”height” şi ”width”, utilizate pentru
a stabili înălțimea şi lungimea dorită a imaginii, de exemplu: <img src="images/1.png"
alt="Emblema" width="128px" height="128px">
<a> şi </a> - această pereche de tag-uri este utilizată pentru a face legătura între paginile site-
ului şi a permite utilizatorului de a naviga în cadrul site-ului. Aceste tag-uri, numite anchor
(ancoră) sunt folosite împreună cu atributul ”href”, care creează legături hipertext, adică legături
spre alte pagini, de exemplu: <a href="istoric.html "> Istoric</a>

<ul> şi </ul> - tag-uri utilizate în crearea listelor neordonate, elementele listei fiind introduse
prin intermediul tagurilor <li> şi </li>. În proiectarea acestui site, listele sunt utilizate pentru a
crea bara orizontală de navigare cu doua niveluri (img.7):
<table>

<ul id="menu" align="center" cellspacing="0" cellpadding = "20" border = "1" bgcolor="#ffcc66">

<li> <a href="index.html "> Pagina Principala</a></li>

<li> <a href="istoric.html "> Istoric</a>

<ul>

<li> <a href="sport.html ">Sport</a></li>

<li> <a href="fotbal.html ">footbal</a></li>

<li> <a href="administratia.html "> Administratia</a></li>

</ul>

</li>

<li> <a href="contacte.html "> Contacte</a>

<ul>

<li> <a href="blogul.html "> Blogul</a></li>

<li> <a href="solicitari.html "> Solicitari</a></li>

</ul>

<li> <a href="http://intersport.md/?l=ro"> Pagina web a sportului autocton</a></li>

<li> <a href="http://intersport.md/?l=ro&a=14"> Foto si video</a></li>

<li> <a href="http://intersport.md/?l=ro&a=10"> In curind pe teren</a></li>

8
<form> şi </form> - tag-uri utilizate în crearea formularului pentru obținerea informațiilor de la
vizitatori despre produsele şi serviciile oferite de întreprindere. Atributul ”action” din interiorul
tag-ului, este folosit pentru a trimite datele introduse de vizitator prin email la adresa respectivă
” infotnob@gmail.com” iar atributul ”method” precizează metoda de trimitere a datelor, în
formularul dat este utilizată metoda ”post” ce permite transmiterea unei cantități mari de date.
Elementul principal al tagu-ului <form> este <input> folosit pentru a introduce elementele
formularului, cum ar fi cîmpurile de introducere a datelor despre persoana ce scrie un comentariu
şi butoanele de ştergere şi expediere a informațiilor primite. Atributele utilizate împreună cu
acest tag sunt ”type” – pentru indicarea tipului elementului, cum ar fi ”text” în cazul introducerii
numelui sau prenumelui; ”reset” – pentru formarea butonului de ştergere; ”submit” – pentru
formarea butonului de expediere; un alt atribut utilizat este ”name” – pentru a indica numele
elementului şi ”value” – pentru a indica denumirea butoanelor utilizate.
Cîmpurile în care vor fi introduse comentariile cerute, sunt incluse cu ajutorul etichetei
<textarea> care are următoarele atribute: ” name” – pentru ataşarea unui nume câmpului de
editare; ”cols” – specifică numărul de caractere afişate într-o linie; ”rows”- specifică numărul
de linii afişate simultan; ”wrap” – determină comportamentul câmpului de editare față de
sfârșitul de linie, acest atribut are valoarea ”off” – întreruperea cuvintelor se produce la
marginea dreaptă a editorului, caracterul de sfârșit de linie este inclus în textul transmis
serverului odată cu formularul.
Cîmpurile formularului sunt incluse în celulele unui tabel, pentru a obține o aliniere
dorită:
<table>
<form action="mailto:info@infotnob@gmail.com " method="post">
<tr><th> Numele:<td><input type="text" name="nume">
<tr><th>Preumele: <td><input type="text" name="prenumele">
<tr><th>Telefonul: <td><input type="text" name="telefonul">
<tr><th>Comentarii:
<td>
<textarea name="comentarii" cols="30" rows="5" wrap="on">
Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre
</textarea>
<tr valign="top">
<td>
<input type="reset" value="Sterge"><td><input type="submit" value="Expedieaza">
</form>
</table>

9
 <hr /> - tag singular (nu are un tag de încheere), este utilizat pentru crearea unei linii
orizontale, este utilizat în paginile site-ului pentru a arăta sfîrşitul paginilor şi pentru a diviza
informaŢiile în pagină, creînd un aspect mai plăcut.

5.2. Stiluri CSS

CSS (Cascading Style Sheets) – foi de stil în cascadă, reprezintă grupuri de proprietăți care

definesc modul de afişare a elementelor, de a adăuga elemente de stil pentru un document web.
În proiectarea acestui site, este înserată o foaie de stil externă(fig.1), sunt anexate 5 pagini de stil
externe. Paginile site-ului fac legătura cu foaile de stil externă utilizînd marcatorul <style> în
secțiunea <head> </head> în modul următor:
<html>

<head>

<title>intersport - Solicitari</title>

<link rel="stylesheet" type="text/css" href="stil7.css"

</head>

<body >

</head>

unde atributul ”type” specifică tipul documentului legat, iar elementul href="stil7.css"specifică
adresa (URL) de unde se introduce fişierul foaie de stil.

10
 5.3. Scripturi JavaScript
JavaScript este un limbaj de scripting client-side (rulează la nivelul browser-ului). Acesta a
fost dezvoltat pentru a prelucra informaţiile din formulare şi a adaugă dinamism paginilor web;
JavaScript este un limbaj interpretat care este încorporat de regulă în paginile HTML.
Deoarece codul de program JavaScript este executat de interpretorul încorporat în browser,
execuţia programului depinde de momentul în care interpretorul primește controlul.
Prin analogie cu modul în care stilurile sunt conectate la pagina web folosind elementul link,
scenariile sunt conectate prin script, extensia de fișier este .js
Variabilele au fost utilizate pentru păstrarea datelor. Variabilele sunt declarate cu operatorul var,
(img) după care urmează numele variabilei. Numele unei variabile trebuie să înceapă cu o literă
latină sau simbolul de subliniere (underline). Numele poate să includă litere, cifre şi semnul de
subliniere.
Fiecare variabilă poate primi o valoare în momentul declarării ei sau în timpul execuţiei program
prin intermediul operatorului de atribuire (=). În cazul dat, el doar indică, că variabilei date îi este
atribuită valoarea.
</html>

11
12
6. Testarea site-ului
În urma testării site-ului pe diferite browsere si pe diferite rezoluții ale ecranului s-a constatat că
site-ul este compatibil cu:

Google Chrome

Mozilla Firefox

Opera

Internet Explorer, cu excepția tag-ului <hr />, pe care nu-l poziţionează la mijlocul paginii, şi a
tag-ului <nav>, browser-ul exclude nivelul doi al barei de navigare (img.7).
Rezoluția ecranului se referă la claritatea textului şi a imaginilor pe ecran. La ecranele cu o
rezoluție mai mare, elementele site-ului apar mai bine conturate având dimensiuni mai reduse,
deoarece spațiul disponibil pe ecran este mai mare. Dacă site-ul este vizitat la un ecran cu o
rezoluție mai scăzută, numărul elementelor de pe ecran va fi mai mic, însă elementele afişate la
ecran vor fi mai mari şi mai uşor de văzut, atunci când rezoluția ecranului este foarte scăzută,
imaginile pot avea margini zimțate.

13
 7.Concluzii
Astăzi, cel mai eficient şi mai facil mijloc de căpătare a informațiilor este internetul, de
aceea un bun mod de promovare a întreprinderii, este de a promova această interprindere
pe internet prin intermediul unui site.
La proiectarea unui site, trebuie să se ţină cont de potențialii vizitatori ai site-ului. Identificarea şi
înțelegerea nevoilor utilizatorilor duce la definirea scopului şi stabilirea obiectivelor principale
ale site-ului, de aceea, site-ul trebuie să conțină informații actuale, clare şi necesare
utilizatorului.
În proiectarea unui site, trebuie să se țină cont de cerințele beneficiarului acestuia, dar trebuie
proiectat în aşa mod ca să poată fi acceptat de o gama largă de utilizatori cu aptitudini diferite.
Atunci cînd scrim codurile ce stau în spatele interfeței site-ului, trebuie să luăm în considerare
compatibilitatea acestora cu diferite browsere, de aceea trebuie să încercăm să excludem tag-
urile care au fost create doar pentru un anumit browser. Astfel o interfață bine organizată, este
atunci cînd site-ul lucrează aşa cum se aşteaptă utilizatorii săi.

14
 Bibliografie

1. Curs Valentina Tîrșu

2. https://www.wikipedia.org

15
Codurile HTML
<html>
<head>
<LINK href="stail.css" rel="stylesheet" type="text/css">
</head>
<body>
<table border="1" width="800" cellpading="0" cellspacing="0" align="center"
bgcolor="white">
<tr>
<td colspan="2"><img src="imagini/sport.jpg"></td>
</tr>
<tr>
<td width="200" valign="top"><h2>
<a href="index.html">Home</a><br>
<a href="fotbal.html">Fotbal</a><br>
<a href="baschet.html">Baschet</a><br>
<a href="volei.html">Volei</a><br>
<a href="harta.html">Harta-Siteului</a>
</h2>
<br><imgsrc="imagini/ext.jpg"><ahref="http://www.sport.ro/sporturi"><h3
align="center">Stiri</h3></a>
<img src="imagini/tern.jpg"><a href="http://ro.wikipedia.org/wiki/Baschet#Terenul_de_joc"><h3
align="center">Teren de Baschet</h3></a>

</td>
<td valign="top"><p>Prima REACTIE a lui Cristi Borcea despre REVENIREA anuntata de un
oficial
de la Dinamo: "Iubesc si respect acest club"
<img src="imagini/ac.jpg"><br>
Ana Maria Prodan anunta veniri noi in Ghencea: "Poate ne intoarcem cu niste jucatori din
Brazilia!" Cand se face cel
mai important transfer al iernii la Steaua:
Banel, in fata unui transfer BOMBA! Dat afara de francezi, Nicolita ajunge in Premier League!
Una dintre cele mai
importante echipe din Londra il vrea:<br>
<img src="imagini/ddd.jpg"><br>

16
Dezvaluire incredibila de la negocierile dintre Messi si Barca: "a refuzat cateva KILOGRAME de
bani pentru a ramane!"
Ce oferta a refuzat in ULTIMUL moment:
</p>
</td>
</tr>
<tr>
<td colspan="2"><img src="imagini/j.jpg"></td>
</tr>
</table>
</body>
</html>

<head>

<LINK href="stail.css" rel="stylesheet" type="text/css">

</head>

<body>

<table border="1" width="800" cellpading="0" cellspacing="0" align="center"

bgcolor="white">

<tr>

<td colspan="2"><img src="imagini/sport.jpg"></td>

</tr>

<tr>

<td width="200" valign="top"><h2>

<a href="index.html">Home</a><br>

<a href="fotbal.html">Fotbal</a><br>

<a href="baschet.html">Baschet</a><br>

<a href="volei.html">Volei</a><br>

<a href="harta.html">Harta-Siteului</a>

</h2>

17
<br>

<img src="imagini/ext.jpg"><a href="http://www.sport.ro/sporturi"><h3

align="center">Stiri</h3></a>

<img src="imagini/tern.jpg"><a href="http://ro.wikipedia.org/wiki/Baschet#Terenul_de_joc">

<h3 align="center">Teren de Baschet</h3></a>

</td>

<td valign="top">

<h3 align="center">Fotbal</h3>

<p>Fotbalul este un sport de echipa ce se disputa intre doua echipe alcatuite din 11 jucatori
fiecare.

La inceputul secolului 21 era jucat de peste 250 de milioane de jucatori in peste 200 de ?ari,

ceea ce il face cel mai popular sport din lume.[1][2][3][4]

Se joaca cu o minge sferica pe un teren dreptunghiular, acoperit cu iarba, cu cate o poarta la

fiecare capat. Scopul jocului este de a inscrie goluri introducand mingea in poarta adversarului.

In afara portarului, ceilal?i jucatori nu se pot folosi de maini pentru a manevra mingea.
Ca?tigatorul

meciului este echipa care a inscris mai multe goluri la incheierea partidei.

Originile fotbalului se afla undeva in urma cu peste 2000 de ani. In 2004, forul ce guverneaza acest
sport

la nivel mondial FIFA (Federation Internationale de Football Association)[5] a recunoscut China

ca fiind locul

de na?tere al fotbalului. In jurul anului 200 i.e.n. chinezii jucau un sport asemanator numit cuju.
Regulile au

evoluat cu timpul, astfel ajungandu-se la sportul practicat astazi.

In primavara anului 2001, FIFA informa ca peste 240 de milioane de oameni joaca regulat fotbal,
in peste 200 de ?ari

de pe intreg globul. Regulile sale simple ?i echipamentul redus ?i ieftin, necesar practicarii
fotbalului au contribuit,

fara indoiala, la cre?terea popularita?ii sale. In multe zone ale lumii, fotbalul na?te pasiuni enorme
?i joaca un rol foarte

18
important in via?a fanilor, a comunita?ilor locale ?i chiar a na?iunilor; este deseori numit cel mai
popular sport

din lume. Este recunoscut in multe ?ari drept: sportul rege.

</p>

<h3 align="center">Natura jocului</h3>

<p>

Fotbalul se joaca dupa un set de reguli, cunoscute sub numele de Legile Jocului. Acestea sunt
dezvoltate in continuare:

Doua echipe de cate 11 jucatori fiecare incearca sa loveasca o minge rotunda (mingea de fotbal), cu
scopul de a o introduce in poarta adversa. Echipa care inscrie mai multe goluri pana la finalul
jocului este declarata ca?tigatoare; daca ambele echipe au marcat acela?i numar de goluri,

meciul este considerat egal. Una dintre primele reguli este interzicerea atingerii inten?ionate a
mingii cu mana in timpul jocului (excep?ie fac portarii). Singura data cand jucatorul se poate
folosi de maini este atunci cand arunca de la margine (executa un aut). In rest, jucatorii se pot
folosi de orice parte a corpului pentru a direc?iona mingea.

Cel mai bun fotbalist ai anilor 2008 ?i 2011

Jucatorii se pot apropia de poarta adversa astfel: prin dribling (alergarea cu mingea la picior);
prin pasarea mingii intre coechipieri ?i prin ?utarea acesteia spre poarta. Jucatorii adver?i pot
recupera mingea prin interceptarea unei pase sau prin deposedarea adversarului. Contactul fizic
este limitat.

Jocul se opre?te doar in momentul in care mingea parase?te cu intreaga circumferin?a o linie ce
marcheaza terenul (fie pe pamant, fie in aer) sau cand arbitrul fluiera. Jocul se reia prin diferite
metode, analizate in continuare.

De obicei, intr-un meci disputat la un nivel profesionist se inscriu pu?ine goluri. De exemplu, in
prima divizie engleza (Premier League), in sezonul 2005ñ2006, s-au marcat, in medie, 2,48 de
goluri pe meci.[7] In plus, 88% din jocuri s-au incheiat cu mai pu?in de 4 goluri marcate. Dar,
doar 8% dintre partidele disputate s-au terminat fara gol marcat.

</p></td>

</tr>

<tr>

<td colspan="2"><img src="imagini/j.jpg"></td>

</tr>

19
</table>

</body>

</html>

20