MASTERAT TEHNOLOGII DIDACTICE ASISTATE DE CALCULATOR [600067]

MINISTERUL EDUCAȚIEI, CERCETĂRII, TINERETULUI ȘI SPORTULUI
UNIVERSITATEA TEHNICĂ DE CONSTRUCȚII BUCUREȘTI
DEPARTAMENTUL PENTRU PREGĂTIREA PERSONALULUI DIDACTIC

MASTERAT TEHNOLOGII DIDACTICE ASISTATE DE CALCULATOR

LUCRARE DE DISERTAȚIE
REALIZAREA SITE -ULUI DE PREZENTARE A LICEULUI
TEHNOLOGIC
“VINTIL Ă BRĂTIANU ” DRAGOMIREȘTI -VALE

Coordonator științific
Conf . univ. d r. Ion MIERLU Ș- MAZILU
Prof. univ. dr. Steliana TOMA

Absolvent: [anonimizat]. Nițu Marilena Cristina

Bucure ști, 2016

2
CUPRINS

Capitolul I. Introducere gener ală ………………………….. ………………………….. ……………………… 4
ARGUMENT ………………………….. ………………………….. ………………………….. …………………….. 5
ABSTRACT ………………………….. ………………………….. ………………………….. ………………………. 7
Capitolul II. Limbajul HTML ………………………….. ………………………….. ………………………….. . 9
2.1. Structura unui document HTML ………………………….. ………………………….. …………………. 9
2.1.1 Secțiunea HEA D ………………………….. ………………………….. ………………………….. ….. 10
2.1.2 Secțiunea BODY ………………………….. ………………………….. ………………………….. ….. 11
2.2.Etichete ( tag-uri) și atribute HTML ………………………….. ………………………….. ……………. 14
2.2.1. Etichete ( tag-uri) ………………………….. ………………………….. ………………………….. …. 14
2.2.2.Atribute ………………………….. ………………………….. ………………………….. ………………. 15
2.3. Formatarea textului ………………………….. ………………………….. ………………………….. …….. 15
2.4. Culorile HTML ………………………….. ………………………….. ………………………….. ………….. 18
2.4.1. Sistemul de definire a culorilor ………………………….. ………………………….. ………… 18
2.4.2. Culoarea fundalului ………………………….. ………………………….. ………………………… 19
2.4.3. Culoarea textului ………………………….. ………………………….. ………………………….. … 20
2.4.4. Culoarea legăturilor ………………………….. ………………………….. ………………………… 21
2.4.5. Culori "sigure" ………………………….. ………………………….. ………………………….. …… 22
CAPITOLUL III . Utilizarea avansată a limbajului HTML ………………………….. …………… 23
3.1. Imagini și elemente multimedia ………………………….. ………………………….. ………………… 23
3.1.1. Formatele fișierelor grafice ………………………….. ………………………….. ……………… 23
3.1.2. Inserarea unei imagini ………………………….. ………………………….. …………………….. 24
3.1.3. Alinierea imaginii și a textului ………………………….. ………………………….. …………. 26
3.1.4. Imaginile video ………………………….. ………………………….. ………………………….. ……. 27
3.1.5. Sunetele ………………………….. ………………………….. ………………………….. ……………… 27
3.2. Adăugarea cadrelor iframe ………………………….. ………………………….. ……………………….. 28
3.3. Legăturile (referințele) ………………………….. ………………………….. ………………………….. … 29

3
3.3.1. Legătura către o altă pagină – Link -urile ………………………….. ………………………. 29
3.3.2. Legătura către o secțiune de pagină – Ancorele ………………………….. …………….. 30
3.3.3. Legătura către o adresă de e -mail ………………………….. ………………………….. ……. 30
3.3.4. Utilizarea unei imagini ca legătură ………………………….. ………………………….. …… 30
3.4.Liste ………………………….. ………………………….. ………………………….. ………………………….. 30
3.4.1. Liste ordonate ………………………….. ………………………….. ………………………….. ……… 30
3.4.2. Liste neordonate ………………………….. ………………………….. ………………………….. …. 31
3.4.3. Liste de tip definiții ………………………….. ………………………….. …………………………. 32
3.4.4. Personalizarea listelor ………………………….. ………………………….. ……………………… 33
3.5. Tabele ………………………….. ………………………….. ………………………….. ……………………….. 34
3.6. Formulare ………………………….. ………………………….. ………………………….. ………………….. 38
3.6.1. Elementele unui formular ………………………….. ………………………….. ………………… 39
3.6.2. Trimiterea datelor dintr -un formular prin e -mail ………………………….. …………. 44
CAPITOLUL IV Aplicație ………………………….. ………………………….. ………………………….. ….. 45
4.1. Pagina web Liceul Tehnologic “Vintilă Brătianu” Dragomirești -Vale ……………… 45
4.2. Studiu de caz realizat în urma aplicării chestionarului ………………………….. ………. 70
CAPITOLUL V Metodică ………………………….. ………………………….. ………………………….. …… 82
5.1. Proiect de activitate didactic ă ………………………….. ………………………….. ………………… 82
5.2. Programă școlară CDS ………………………….. ………………………….. ………………………….. … 93
CONCLUZII ………………………….. ………………………….. ………………………….. ……………………….. 99
BIBLIOGRAFIE: ………………………….. ………………………….. ………………………….. …………….. 100

4
Capitolul I.
Introducere general ă

În societatea actuală, calculatorul câștigă tot mai mult teren, dezvoltând așa numita
”societate a cunoașterii” și îndepărtâ nd individul de procesul tradițional al învățării. Astfel,
calculatorul tinde să ocupe cât mai mult din timpul nostru liber, accesarea unei pagini de
internet deschizând o lume întreagă, nouă în fața noastră. Educaț ia este și ea influențată și
inflențabilă , mijloacele și metodele moderne substituindu -le pe cele tradiționale.
Printre obiectivele de bază ale învățământului modern se regăsește și acela de
îmbunătățire a procesului de predare -învățare, utilizând noile tehnologii multimedia. În acest
mod, se realizează lecții atractive și accesi bile elevilor sau studenților. În consecință, școala
trebuie să pună accent pe tehnologizare, având în vedere indispensabilitatea abilității de a
folosi un calculator pentru a intra pe piața muncii.
Totodată, părinții el evilor au din ce în ce mai puțin timp liber, copiii devenind singurul
intermediar între ei și școală. De cele mai multe ori, aceștia nu au timp pentru a se interesa de
situația școlară a învățăceilor, informațiile primite din partea școlarilor fiind uneori nerealiste.
În acest sens, realizarea unui site accesibil tuturor părinților poate fi cea bună metodă ca
aceștia să păstreze în permanență legătura cu școala, făcând parte chiar din demersul
instructiv -educativ. Site -ul poate contribui semnificativ la man iera în care școala realizează
schimbul de informații între copii și părinți, furnizând informații suficiente pentru a determina
un progres semnificativ al școlarului.
Prin urmare, calculatorul este indispensabil omului din societatea actuală, pe de -o
parte, antrenând elevii pentru a se integra pe piața muncii, iar pe de altă parte, menținând o
legătură permanentă între părinți și școală.

5
ARGUMENT

Lucrarea de față își propune atât o prezentare teoretică generală a limbajului HTML,
realizarea pag inii web a Liceului Tehnologic ”Vintilă Brătianu”, cât și evidențierea metodicii
de predare a limbajului informatic de specialitate în școală prin propunerea unui CDȘ, în
vederea aprofundării noțiunilor de HTML în liceu. La final, este adăugat un chestion ar pentru
a descoperi nevoile și dorințele elevilor în legătură cu realizarea paginii web a liceului.
În ceea ce privește alegerea temei, aceasta se justifică prin sesizarea nevoii de
actualizare a limbajului HTML într -o manieră accesibilă elevilor și de realizare a site -ului
Liceului Tehnologic ”Vintilă Brătianu”, având în vedere schimbările care apar în interiorul
sistemului atât la nivel de efectiv, cât și de specializare. Deși limbajul HTML este îndelung
discutat în scrierile de specialitate, lucrarea de față urmărește și utilitatea sa practică prin
realizarea site -ului, dar și posibilitățile multiple de a fi actualizat la nivelul școlii prin CDȘ –
uri.
Un suport teoretic important l -a constituit cartea lui Sabin Buruga, Proiectarea site –
urilor web , care detaliază pașii de realizare a unui site, oferind și un important cadru teoretic.
O altă lucrare ce discută limbajul programatic HTML este cea a autorilor Homorodean
Marcel Andrei și Iosupescu Irina , care prezintă, într -o manieră accesibilă, pentru iniț iați și nu
numai, noțiunile de bază din HTML.
Metodele principale de lucru folosite în cercetarea de față sunt descrierea, analiza ,
aplicația și chestionarul . Punctul de plecare al acesteia îl constituie încercarea de a defini
riguros conceptele, pe baza sintezei ideilor surprinse în diferite studii. Analiza conceptelor
teoretice a permis și realizarea practică a site -ului menționat. În acest sens, în prima parte a
lucrării , vom fixa cadrul teoretic, ce are în vedere delimitarea accepțiunilor termenilor fo losiți
în practică, în timp ce partea a doua va cuprinde aplicația propriu -zisă, iar partea finală,
propunerea CDȘ -ului și a chestionarului.
Lucrarea este structurată în șase capitole, dintre care primul capitol este unul
introductiv, iar ultimul va preze nta obs ervațiile finale. Celelalte patru capitole vor dezbate
tema propriu -zisă a studiului .

6
Capitolele II și III prezintă cadrul teoretic și metodologic al lucrării, incluzând referiri
la probleme generale , cum ar fi explicarea noțiunilor de „limbaj HT ML”, „pagină web”,
”tag”, „frame” etc., enunțând limitele teoretice și metodologice. De asemenea, tot în acest
capitol, ne vom exprima opțiunea pentru term inologia pe care o vom folosi în realizarea site –
ului.
Capitolul IV cuprinde crearea propriu -zisă a site -ului, aplicând noțiunile teoretice din
prima parte a lucrării și făcând trimiteri, prin intermediul site -ului realizat, la alte categorii de
site-uri, esențiale în domeniul educațional.
Capitolul V structurează partea de metodică, incluzând un pla n de lecție, în care sunt
menționați pașii urmați pentru realizarea unui site HTML, opționalul de aprofundare a
noțiunilor HTML, chestionarul aplicat elevilor și cadrelor didactice.

7
ABSTRACT

This paper proposes both a generally theore tical presentation of HTML, a web site of
“Vintilă Brătianu” High School and a highlighting of the methodology of teaching computer
language in school by offering a School Curriculum Decision, to deepen the concepts of
HTML in high school. In the end a qu estionnaire is in order to discover the needs and desires
of students regarding the designing the high school web site.
Regarding the choice of the theme, this is justified by sensing the need to update the
HTML in an accessible manner to students and achi eve the website of “Vintilă Brătianu”
High School, given the changes that occur within the system regarding both proportions and
specialization. Although HTML is discussed widely in the specialized works, this degree
dissertation pursues both its practical usefulness by making the site and also the multiple
opportunities to be updated at the school level through School Curriculum Decision.
An important theoretical support was offered by Sabin Buruga’s book, “Designing
Web sites”, both detailing the steps o f creating a site and providing an important theoretical
framework.
Another work discussing HTML is programming language belongs to Marcel Andrei
Homorodean and Irina Iosupescu presents, in a simple manner to initiate and the basic
concepts of HTML in a si mple manner to both the advanced and the beginners.
Description, analysis, application and questionnaire are the main methods of work
used in the present study. Its starting points is the attempt to define rigorous concepts based
on the synthesis of ideas captured in different studies. Analysis of the theoretical concepts
allowed the practical realization of mentioned site. In this regard, in the first part of this work
the theoretical framework will be presented, while the second part will include the app lication
itself, being followed by School Curriculum Decision and the questionnaire.
The paper is divided into six chapters, the first chapter being introductory and the last
will contain the comments. The other four chapters will analyze the theme of the study itself.
Chapters II and III present the theoretical and methodological background including
references to common problems, such as explaining the concepts of “HTML”, “web page”,
“tag”, “frame” etc and stating theoretical and methodological limitation s. Moreover, this
chapter will contain the concepts that will be used in designing the web side.

8
Chapter IV contains the design itself of the site, applying the theoretical concepts of
the first part of the work and referring to other categories of sites, important to the education
system.
Chapter V approaches the methodical structure, including a lesson plan, which lists the
steps for designing a HTML site, the optional course in order to study thoroughly HTML
notions and the questionnaire applied to bot h students and teachers.

9
Capitolul II.
Limbajul HTML

2.1. Structura unui document HTML
Un docume nt HTML are următoarea structură :
1. o linie conținând versiunea HTML;
2. secțiunea HEAD , delimitată de marcajele < HEAD ></HEAD >;
3. secțiune a BODY , delimitată de marcajele < BODY ></BODY > sau
<FRAMESET ></FRAMESET >
Paginile Web sunt fișiere cu simplu text construite folosind limbajul Hypertext
Markup Languag e (HTML ). Acesta este implementat ca o mulțime de tag -uri ușor de învățat.
Autorii pagini lor Web folosesc aceste tag -uri pentru a marca paginile de text, iar
browserele le folosesc pentru a ronda și afișa informațiile pentru a putea fi vizualizate.
Paginile Web pot să conțină legături hypertext la alte pagini.
EXEMPLU:
<HTML>
<HEAD>
<TITLE> Lucrare de diserta ție</TITLE>
</HEAD>
<BODY>
Introducere text … Introducere text… Introducere text
</BODY>
</HTML>
Un document HTML valid conține declarația versiunii HTML utilizate. Declarația se
face prin intermediul DTD (document type definition). Pe scurt , fișierul DTD conține
definițiile marcajelor din versiunea respectivă de HTML.

10
2.1.1 Secțiunea HEAD
Cuprinde informații care nu vor fi afișate în browser, cu excepția marcajului
<TITLE>
Marcajul <TITLE> este o bligatoriu și poate apare doar î n secțiunea HEAD. El va
conține un titlu relevant pentru pagină, fiind deosebit de important pentru motoarele de
căutare.
Alte marcaje care apar în secțiune HEAD :
 <STYLE> – cascading STYLE sheets – stiluri pentru formatarea textului din
documentul HTML.
<link href="css/ style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery -1.4.2.min.js"></script>
 <BASE> – stabileș te URL -ul de "baza" al documentului. Toate referinț ele (<a
href=""></a> , respectiv <img src=""> ) din documentul respectiv vor fi deschise relativ la
marcajul <base> .
<HEAD>
<a href="http://www.isjilfov.ro/" target="_blank">ISJ Ilfov</a>
</HEAD>
 <LINK> – stabilește o legătură cu un document extern, spre exemplu un fișier
de definiții CSS.
<link rel="stylesheet" type="text /css" href="css/coin -slider.css" />
EXEMPLU:
Secțiunea HEAD a unui document HTML poate arată în felul următor:
<HEAD>
<head>
<title>Liceul Tehnologic"Vintila Bratianu"</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="tex t/javascript" src="js/jquery -1.4.2.min.js"></script>
<style>

11
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
width: 120px;
}
ul#menu li a {
background -color: #254117;
color: white;
padding: 20px 30px;
text-decoration: none;
border -radius: 4px 4px ;
}
ul#menu li a:hover {
background -color: orange;
}
</style>
</head>
2.1.2 Secțiunea BODY
Este inclusă între marcajele <BODY>…… </BODY>
<body>
<ul id="menu" class="shadows">
</body>

12
Marcajul de sfârșit ( </BODY> ) nu este obligatoriu.
BODY încadrează informațiile propriu -zise ce vor fi afișate de browser (<BODY>….
</BODY> ).
Ca în orice limbaj de programare , în HTML există posibilitatea de a introduce
comentarii, folosind marcajul :
<!– …. textul comentariului –>
EXEMPLU :
<html>
<head>
<title>patrimoniul unitatii</title>
</head>
<body>
<a name="top"><marquee behavior= "alternate"><h2><font face="Monotype Corsiva"
color="#00FF00">Structuri patrimoniale Activ si Pasiv </FONT></h2></marquee></a>
<br>
<body bgcolor="#9F000F" text="#FFFF00" ></body>
<hr>
<center>
<ul>
<table>
<tr>
<td><i><center><h1>ACTIV PATRIMONIAL</h1></ center><br>
<font color="#B1FB17">
<ul>
<li><b><a href="#ACTIVE IMOBILIZATE"><font
color="#B1FB17">ACTIVE IMOBILIZATE</font></a></b></li>
<li><b><a href="#ACTIVE CIRCULANTE "><font
color="#B1FB17">ACTIVE CIRCULANTE</font></a></b></li>
<li><b><a hre f="#ACTIVE DE REGULARIZARE SI ASIMILATE "><font
color="#B1FB17">ACTIVE DE REGULARIZARE SI ASIMILATE </font></a></b></li>

</ul>

13
</body>
</html>
În exemplul de mai sus a apărut un nou marcaj <p> (paragraf). Alături de el trebuie
menționate marcajele <h1> , <h2>, <h3>, <h4>, <h5>, <h6> (HEADings – toate necesită
marcaj de închidere) care sunt folosite în general pentru evidențierea titlurilor.
Pentru formatarea textului pot fi folosite și marcajele:
 <b>…</b> – caractere îngroșate;
 <i>…</i> – caractere înclinate;
 <u>…</u> – caractere subliniate;
 <s>…</s> – caractere "tăiate";
 <pre>…</pre> – marcajul de informație preformatată ;
 conservă toata caracterele si spațierile de linii;
 utilizează un font diferit (Courier);
 ^… – exponent;
 _… – indice;
 <br> – "rupe" textul, trecând pe o linie nouă – poate apare oriunde in text;
 <hr> – trasează o linie subțire orizontală;
 <font>…</font> oferă posibilitatea modificării dimensiunii, culorii și a tipului
de font utilizat;
 <span> este un marcaj de tip "inline". Se folosește în general în interiorul
marcajelor de tip "block" (ex. <p>) în combinație cu stilurile CSS, pentru a impune o
formatare diferită de restul conținutului din marcajul "block" respective;
 spre deosebire de <span> , marcajul <div> este de tip "block". Se folosește în
general pentru poziționare în cadrul documentului și pentru specificarea unor proprietăți CSS
care să fie aplicate textului din interiorul lui.
<DIV [ ALIGN="left|center|right"] STYLE="..">
………. …………………..
</DIV>

14
2.2.Etichete ( tag-uri) și atribute HTML
2.2.1. Etichete ( tag-uri)
Tag-urile nu sunt altceva decât niște marcaje sau etichete pe care limbajul HTML le
folosește alături de texte pentru a ajuta browser -ul de Internet să afiș eze corect conținutul
paginii web.
Aceste tag -uri (etichete) pot fi de două feluri:
– tag-uri pereche (un tag de început și unul de încheiere). Exemple: <HTML> și
</HTML> ; <TITLE> și </TITLE> ; <HEAD> și </HEAD>;
– tag-uri singulare (nu au un tag de încheier e) Exemple: <HR>, <BR>.
Tag-urile de baza pe care trebuie să le conțină un document HTML:
<HTML> – cu acest tag î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.
<HEAD> – între aceste tag -uri sunt trecute, pe lângă titlul paginii, diverse informații
folositoare pentru browser -ul de Internet;
</HEAD> – acesta este tag -ul de încheiere al tag -ului <HEAD>;
<TITLE> – cu ajutorul acestei perechi de tag -uri se dă un titlu paginii web. Astfel,
textul scris între aceste tag -uri va fi afișat în bara de titlu a documentului.
</TITLE> – este tag -ul de încheiere al tag -ului <TITLE> . Arată sfârșitul titlului
documentului.
<BODY> – odată cu acest tag începe conținutul paginii web. Tot ce s e scrie între tag –
urile < BODY > și </ BODY > va fi afișat, de către browser, pe ecranul monitorului.
</BODY> – comunică browser -ului că s -a terminat de scris conținutul paginii. Tot
ceea ce se scrie după acest tag nu va mai fi afișat.
</HTML> – este tag -ul de încheiere al tag -ului < HTML >. Codul oricărui document
se termina cu acest tag.

15
2.2.2.Atribute
Atributele HTML oferă informații adiționale elementelor HTML.
Tagurile HTML pot avea atribute. Acestea sunt întotdeauna definite în tagul de început al
unui element HTML.
Sunt de forma: nume="valoare".
EXEMPLU:
Acest exemplu aliniază textul la centrul paginii web.
<th><center><img src="images/logo1.jpg" width="1235" height="110"
/></center></th>
EXEMPLU:
Acest exemplu aplică fundalului o c uloare portocalie.
<BODY bgcolor = "orange">
Acesta este un text
</BODY>
Pentru o mai bună diferențiere și evidențiere , etichetele ( tag-urile) HTML sunt
scrise cu majuscule , iar atributele asociate acestora sunt scrise cu litere mici. Valorile
atributelor trebuie să fie întotdeauna încadrate în ghilimele.
HTML nu este un limbaj case-sensitive , adică nu face distincția între literele mici și
cele mari (majuscule). Aceasta înseamnă că indiferent cum scriem etichetele, cu litere mari
sau cu litere mici, ele v or fi corect interpretate de browser.
2.3. Formatarea textului
Folosind etichete adecvate , textul poate fi formatat.
Spre exemplu , fonturilor li se poate modifica: mă rimea, culoarea, forma (normal,
bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontală sau vertical, iar
titlurile (header), d e la 1 la 6, sunt diferite ca mă rime (1 cel mai mare iar 6 cel mai mic).
EXEMPLU:
<FONT COLOR=”#6495ED”> Lucrare de disertație </FONT>
va afișa în cadrul browserului de Internet: Lucrare de disertație

16
La tipul fontului, la fel ca și la culori, este bine să se folosească un font care se află pe
majoritatea calculatoarelor, pentru ca dacă se folosește un font mai puțin utilizat, mulți
utilizatori nu vor putea vedea textele din cadrul paginil or prezentate cu același font. Cele mai
folosite fonturi pentru paginile web sunt următoarele:
Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost s cris cu fontul "verdana"
<FONT COLOR=”#000000” FACE=”Arial”>Acest text …</FONT>
Pentru a schimba dimensiunea implicită a fontului, vom folosi una din valorile
atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mică
dimens iune și 7 pentru cea mai mare):
<font color="#0CFF55"><b>ECHIPA MANAGERIALA</b></font>
size 7: Lucrare disertație size 6: Lucrare disertație
size 5: Lucrare disertație size 4 : Lucrare disertație
size 3: Lucrare disertație size 2: Lucrare disertaț ie
size 1: Lucrare disertație
Dacă vrem ca textul nostru să fie scris cu caractere îngroșate, folosim perechea de
etichete <B>și </B>.
<b>CATEDRA DE LIMBI MODERNE:</b>
CATEDRA DE LIMBI MODERNE:
Pentru ca textul să fie scris cu caractere italice, folosim p erechea de etichete <I> și
</I>.
<I>Text italic </I>
Text italic
Pentru ca textul să fie subliniat, folosim perechea de etichete <U> și </U> .

17
<U>Text subliniat </U>
Text subliniat
Dacă vrem ca textul să fie afișat în centrul paginii putem folosi perechea d e etichete
<CENTER > și </ CENTER >.
<CENTER>Text centrat</CENTER>
Text centrat
Atunci când vrem ca textul din cadrul paginii noastre web să fie afișat pe mai multe
rânduri vom folosi unul din tag -urile < BR> sau < P>. Tag -ul <BR> nu are tag de încheiere, în
timp ce tag -ul <P> are tag de încheiere, însă nu este obligatoriu.
Tag-ul <BR> vine de la line break (întrerupere de linie) și este folosit pentru a face
trecerea de la o linie la alta.
EXEMPLU:
Avem următorul cod HTML:
<HTML>
<BODY>
<td><fontcolor="#1AAB6 8"><b>Director:</b><font>< br><font color="#FFE87C"><b>dr.
ing. Chisa Eugen Adrian</b></font></td> .
</BODY>
</HTML>
Acest cod va avea ca rezultat:
Director:
dr. ing. Chisa Eugen Adrian
Tag-ul <P> vine de la cuvântul paragraf si se deosebește de tag -ul <BR> prin faptul
că prin utilizarea lui nu numai că se trece pe următorul rând, dar se și lasă un rând liber intre
texte. Revenind la exemplul de mai sus, se vor folosi ambele tag -uri, < BR> și < P>, pentru a
se vedea diferența dintre ele.
<HTML>
<BODY>

18
<p><img src="poze trecut/Clasa veterinara.jpg" alt="poze trecut" height="200"
width="250" /><br>
</BODY>
</HTML>
Acest cod va avea ca rezultat:

2.4. Culori le HTML
Culoarea reprezintă o caracteristică extrem de importantă a unei pagini Web. Utilizată
cu grijă și măsură, ea poate îmbunătăți substanțial aspectul paginii, făcând -o mai lizibilă și
mai atractivă, iar textul mai ușor de parcurs.
Pe de altă parte, utilizarea excesivă sau inadecvată a culorilor poate transforma un text
de calitate într -un fel de caleidos cop obositor, greu de urmărit, și care îi va determina pe mulți
vizitatori să renunțe la a -l mai parcurge.
Datorită faptului că ea reprezintă un atribut al multor elemente ale documentelor Web
(text, fundaluri, margini, link -uri), am optat pentru prezentar ea detaliată a modului de utilizare
al culorilor încă din această etapă a lucrării noastre.
2.4.1. Sistemul de definire a culorilor
Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate
pentru fiecare culoare care sunt ca ntitățile de roșu ( Red), verde ( Green ) și albastru ( Blue) care
o compun.
În HTML orice culoare este desemnată printr -un cod de 6 cifre hexazecimale, dintre
care primele două reprezintă cantitatea de roșu, cele două din mijloc, cantitatea de verde, iar
ultimele două cantitatea de albastru.
Pentru valoarea atributului de culoare se utilizează direct numele culorii, ca în
exemplul de mai jos, în care se setează culoarea magenta pentru linkurile vizitate:

19
<BODY vlink="magenta">
Numele și codul culorilor stabili te în standardul HTML3.2 sunt următoarele:
Nume
culoare Cod
hexazecimal Nume
culoare Cod
hexazecimal
Aqua #00FFFF Navy #000080
Black #000000 Olive #808000
Blue #0000FF Purple #800080
Fuchsia #FF00FF Red #FF0000
Gray #808080 Silver #C0C0C0
Green #0080 00 Teal #008080
Lime #00FF00 Yellow #FFFF00
Maroon #800000 White #FFFFFF

Se pot utiliza, pe lângă culori, 100 de nuanțe de gri ( gray). Ele sunt numerotate de la 1
la 100, "gray 1" fiind nuanța cea mai închisă, iar "gray 100" cea mai deschisă.
2.4.2. Culoarea fundalului
Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background
color ) al etichetei < BODY >, căruia îi atribuim o valoare astfel:
<BODY bgcolor="#RGB sau nume_culoare">
Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii
fie numele ei. Iată un exemplu de pagină cu fundal verde:
EXEMPLU:
<html>

20
<head>
<title>patrimoniul unitatii</title>
</head>
<br>
<body bgcolor="#9F000F" text="#FFFF00" ></body>
<hr>
<center> <h1 align="center"> Pagina cu fundal verde </h1><hr>
</BODY>
</html>
2.4.3. Culoarea textului
Pentru a seta culoarea textului din întreaga pagină se folosește atributul text al
etichetei < BODY >, conform sintaxei:
<BODY text="#RGB sau nume_culoare">
Dacă am stabilit o culoare pe ntru textul din pagină și dorim să utilizăm o altă culoare
pentru o anumită secțiune a textului (culoarea unui bloc de text), vom folosi eticheta < font>.
Aceasta este o etichetă container care cuprinde între etichetele de început și de final textul a
cărui culoare dorim să o modificăm. Stabilirea culorii se face folosind atributul color al
etichetei conform sintaxei:
<font color="#RGB sau nume_culoare">Text</font>
În EXEMPLU culoarea textului este albastru iar anumite cuvinte sunt colorate în
roșu.
EXEMPLU :
<html>
<head>
<title>patrimoniul unitatii</title>
</head>

21
<br>
<body text="#FFFF00" ></body>
<hr>
<center><h1 align="center"> Textul cu fundal galben </h1><hr>
</html>
2.4.4. Culoarea legăturilor
În general legăturile ( links ) dintr -o pagină Web au culori prestabilite ( default ), astfel:
blue (albastru) – pentru legături
red (roșu) – pentru legătura activă (cea pe care este fixat cursorul mouse -ului, cu
butonul stâng apăsat)
purple (violet) – pentru legăturile vizitate, cele pe care s -a efectuat cel puțin un click
Pentru a schimba culorile prestabilite se folosesc următoarele atribute ale etichetei
<BODY >:
LINK – indic ă culoarea textului corespunză tor unei hyperleg ături nevizitate
Ex: LINK=#FF0000 textul corespunzător unei hyperlegă turi nevizitate va fi de culoare
rosu pur (culoare scrisă în hexadecimal);
LINK=Yellow
textul de hyperlegatură nevizitată va fi de cu loare galben pur (culoare scrisă î n clar);
ALINK – indică culoarea textu lui corespunzător unei hyperlegă turi active (î n curs de
procesare)
Ex: ALINK=#FF0000 textul corespunzător unei hyperlegă turi active va fi de culoare roșu
pur (culoare scrisă î n hexadecimal);
ALINK=Yellow textul de hyperlegătur ă activă va fi de cu loare galben pur (culoare
scrisă î n clar);
VLINK – indică culoarea textului corespun zător unei hyperleg ături vizitate
Ex: VLINK=#FF0000 textul co respunzător unei hyperlegă turi vizitate va fi de culoare
rosu pur (culoare scrisă î n hexadecimal);
VLINK=Yellow textul corespunzător unei hyperlegă turi vizitate va fi de cu loare
galben pur (culo are scrisă î n clar);

22
Documentul din EXEMPLU creează o pagină în care textul este negru iar legăturile
au culoarea verde, legăturile active culoarea albastru și cele vizitate, culoarea roșu. În
EXEMPLU este folosită eticheta < a> cu atributul href.

EXEMPLU:
<h3><font color="#FF6600"><center><i><b>Link -uri utile</b></i></center></h3></font>
<ul><font color="#FFFF33"><li><a href="http://www.isjilfov.ro/"
target="_blank">ISJ Ilfov</a></li>
<li><a href="http://www.edu.ro" target="_blank">Ministerul Educației
Naționale</a></li>
<li><a href="https://www.facebook.com/pages/Liceul -Tehnologic -Vintila –
Bratianu/262977760387799"target="_blank">Facebook</a></li>
<li><a href="http://www.edu.ro/index.php/articles/c5"target="_blank">ARACIP</a>
<li><a href="http://subiect e2015.edu.ro/2015/"target="_blank">Examene Nationale</a>
</ul>
</font>
2.4.5. Culori "sigure"
Sistemul hexazecimal este cel mai utilizal pentru crearea paginilor. Acesta este
compatibil cu majoritatea browser -elor, în acest fel interfaț a pagini web nu va fi distorsionată .
Pentru a adauga o notă de siguranță îți recomand să folosești culorile împerechiate (sau true
colors) precum: "#0011EE", "#44HHFF", sau "#117788. Conform statisticilor acestea nu vor
fi schimbate indiferent de browser.
Am alăturat mai jos un tabel cu codurile corespunză toare acestor culori sigure.
Pentru a simpl ifica tabelul de mai jos am afișat culorile sigure folosind coduri scurte.
În acest sub-capitol vorbim de culori împerechiate, de exemplu culoarea reprezentata ca fiind
369 este de fapt 33 66 99 iar FFC va fi FF FF CC.
*000 300 600 900 C00 *F00
*003 303 603 903 C03 *F03
*00F 30F 60F 90F C0F *F0F
*0F0 3F0 *6F0 9F0 CF0 *FF0
*0F6 *3F6 6F6 9F6 *CF6 *FF6

23

CAPITOLUL I II
Utilizarea avansată a limbajului HTML

3.1. Imagini și elemente mu ltimedia
Conținutul paginilor Web pot că păta un aspect atractiv și profesional dacă au incluse
fotografii, imagini animate, sunete sau imagini video.
3.1.1. Formatele fișierelor grafice
Se spune că o imagine valorează cât o mie de cuvinte. Într -adevăr, ima ginile
îmbogățesc paginile Web atâ t sub aspect decorativ, cât și prin sporirea nivelului de informații.
O condiție pentru ca imagin ile să poată fi parte componentă a unei pagini Web, este ca acestea
sa fie salvate într -unul din formatele GIF sau JPG. Două dintre cele mai utilizate tipuri de
fișiere grafice sunt JPEG (Joint Photographic Experts Group ) și GIF (Graphics Interchange
Format ).
3.1.1.1. Formatul GIF
Formatul GIF (Graphics Interchange Format) cu extensia .gif sunt fișiere folosite
pentru imagini si mple, fără cerințe prea mari în privința spațiului de lucru(8 biți pentru o
culoare, 256 culori posibile) și este recomandat să le folosiți pentru sigle, pentru benere,
pentru trasarea și delimitarea structurii grafice a paginii web, etc.
Deoarece majorita tea browserelor recunosc formatul GIF, acesta a devenit cel mai
frecvent utilizat în paginile Web.
Totuși, datorită numărului redus de culori, formatul GIF nu este potrivit pentru
fotografii sau imagini de calitate înaltă. Pentru acest tip de imagini, cel mai adecvat este
formatul JPEG.
3.1.1.2. Formatul JPEG
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg sunt fișiere
folosite pentru imaginile paginii web, deoarece au o calitate net superioară în raport cu
precedentele (24 biți pentru o culoare, 16777216 de culori posibile), suportă diverse
compresii și modificări de nuanțe și contraste
Formatul JPEG nu mai este limitat la 256 de culori ș i de aceea este folosit pentru
fotografii. Imaginile care aparț in acestui format au extensia .jpg sau .jpeg.

24
Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru
ilustrații, desene sau imagini de dimensiuni reduse.
EXEMPLU:
<p><img src="images/tel1.gif" height="30" width="30"
/><span>Telefon:</span><font color="#00FF00" >021 -4367190<br/></font></p>
3.1.2. Inserarea unei imagini
Pentru a introduce o imagine în documentul HTML este necesară folosirea
marcatorului IMG (image în engleză), al cărui atribut src(source) este folosit la identificarea
imagini în spațiul în care se află sau URL -ul acestuia:
<IMG src = "nume_imagine.gif">
Marcatorul IMG nu are marcaj de încheiere, deoarece marcatorul nu are conținut pe
care s ă-l includă și acceptă doar anumite tipuri de fișiere imagine compatibile cu HTML cum
ar fi gif, jpeg si png.
Dacă imaginea se află într -un alt director, URL -ul imaginii trebuie specificat fie prin
adresarea absolută , fie, preferabil, prin cea relativă.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Inserare imagine</TITLE>
</HEAD>
<BODY>
<table border="2" bordercolor="#9F000F" width="1235">
Acesta este un…<BR>
<img src="images/logo1.jpg" width="1235" height="110" />
</BODY>
</HTML>

25
Atributele etichetei <IMG>:
În cadrul etichetei <img> s-au folosit și atributele witdh și height pentru a specifica
dimensiunile imaginii.
Este bi ne ca aceste dimensiuni să fie specificate, astfel spațiul destinat imaginii va fi
rezervat când pagina web va fi încărcată. În cazul în care aceste atribute nu sunt specificate,
browser -ul nu va ști dimensiunea imaginii iar structura paginii poate fi schi mbată pe parcursul
încărcării paginii (mai ales în cazul unei conexiuni slabe la Internet).

EXEMPLU:
<HTML>
<HEAD>
<TITLE>Dimensionarea imaginilor</TITLE>
</HEAD>
<BODY>
<H1 align="center">Dimensionarea imaginilor</H1><HR>
<img src="images/logo1.jpg" width="1235" height="110" />
</BODY>
</HTML> Atribut Valoare Descriere
Src cale_imagine/nume_imagine – se specifică calea către imagine și numele
imaginii alături de extensia acesteia
Width Număr – se specif ică dimensiunea imaginii pe
orizontală
height Număr – se specifică dimensiunea imaginii pe
verticală
border Număr – se specifică dimensiunea chenarului
pozei
Alt denumire_poză – se specifică denumirea pozei

26
Atributul alt este folositor pentru motoarele de căutare pentru a indexa numele
imaginii respect ive.
În cazul în care imaginea nu este încărcată, datorită unor greșeli în declararea
atributului src, atributul alt va afișa numele imaginii ce ar fi trebuit să fie afișate de
browser. Dacă atributele de dimensionare nu sunt prezente, browserul va efectua niște pași
suplimentari pentru a calcula spațiul din pagină necesar afișării imaginii. Din acest motiv
afișarea textului nu va putea începe decât după ce imaginea este încărcată în întregime. Este
indicat să evitam o asemenea situație deoarece imaginile s e încarcă mai greu decât textul.

3.1.3. Alinierea imaginii și a textului
Alinierea unei imagini în raport cu textul din pagină se realizează prin intermediul
atributului align , care poate lua următoarele valori:
– left – aliniere la stânga; textul este încadrat în partea dreaptă a imaginii încadrând
imaginea;
– right – aliniere la dreapta; textul este încadrat în partea stânga a imaginii încadrând
imaginea;
– top – aliniere deasupra; partea de sus a imaginii se încadrează cu prima linie a
textului ce prece de imaginea;
– middle – aliniere la mijloc; mijlocul imaginii se încadrează cu prima linie a textului
ce precede imaginea;
– bottom – aliniere dedesubt, la bază; partea de jos a imaginii se încadrează cu prima
linie a textului.
Valorile left, right și bottom ale atributului align permit ca textul să fie dispus în jurul
imaginii, în vreme ce top și middle nu permit acest lucru.
EXEMPLU:
Modul de aliniere bottom :
<HTML>
<HEAD>
<TITLE>Alinierea imaginii si textului (bottom)</TITLE>
</HEAD>

27
<BODY>
<img alt= "" align="right" src="poze trecut/trecut si prezent.jpg" alt="poze trecut"
width="300" height="200"/> </BODY>
</HTML>
3.1.4. Imaginile video
Un fisier video se poate insera într -o pagina html de două moduri. Prima modalitate ar
fi cu ajutorul tagului <embe d/>. Acest ta g nu are nevoie de un altul de î nchidere,
functioneaza ă în mare masur ă la fel ca ș i un tag de introducere a unei fotografii.
Acestea sunt dup ă cum urmeaz ă:
 .swf – creat de Macromedia Flash
 .wmv – Microsoft Windows Media Video
 .mov – Quick Time Movie, apartine Apple
 .mpeg files – creat de Moving Pictures Expert Group.
Cele mai folosite find .mpeg , .mp4 ș i .swf, datorita formaului compact.
Exemplu
<center><video width="300" height="250" controls poster="">
<source src="video/Dragomi resti1.mp4" type="video/mp4">
</video></center>

3.1.5. Sunetele
Pentru a face o pagină web cât mai atractivă, putem adăuga o melodie pe fundalul
paginii. HTML suportă melodii în format .wav , .midi , .au . Se pot introduce și alte formate
(cum ar fi mp3), dar acestea nu vor fi recunoscute de browser dacă nu există plugin -ul instalat
pentru acel format.

Marcaj:
<EMBED src="nume.wav">…</EMBED>
Parametrii:
<autoplay=true> – dacă dorim ca sunetul să pornească automat
<hidden=true> – dacă dorim ca player -ul să nu fie afișat în pagină
<loop=true> – dacă dorim ca sunetul să se repete
<volume="valoare"> – pentru a stabili volumul sunetului
<width="valoare">
<height="valoare">

28

Exemplu:
<EMBED autoplay="true" hidden="false" loop="false" src="num e.wav">
Acesta este codul pentru care dorim ca sunetul să pornească automat, să fie afișat
player -ul în pagină și sunetul să nu se repete.

3.2. Adăugarea cadrelor iframe
Eticheta <IFRAME> se introduce în cadrul blocului <BODY> si în cazul folosirii ei
nu mai este necesar un document de definire a cadrelor. Pentru situatia când browserul nu
accepta cadre interne, am asigurat o versiune a paginii care nu conține astfel de cadre
introdusă prin eticheta <A>. Conținutul acestei pagini este foarte simplu, servin d doar la
ilustrarea modului în care poate fi construită o alternativă la pagina cu cadre interne .
Fiecare cadru din interiorul documentului este marcat cu ajutorul controalelor
<frame> și </frame> .
EXEMPLU:
<iframe
src="https://www.google.com/maps/embed?p b=!1m18!1m12!1m3!1d2846.8846408871905!2
d25.933460114975404!3d44.47653730681888!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3
m3!1m2!1s0x40b2068e8bb29f01%3A0x78e97623a754d76f!2sLiceul+Tehnologic+Vintil%C
4%83+Br%C4%83tianu!5e0!3m2!1sro!2sro!4v1447449427904" width ="500" height="494"
frameborder="0" style="border:0" allowfullscreen>
</iframe></b></td></tr>
 unde " iframe " este elementul principal care indic ă adaugarea unui frame în pagina.
 "url_pagina " e adresa paginii care va fi încarcată î n iframe, " width " și "height "
reprezinta lungimea respectiv înalțimea cadrului (exprimată î n procente sau pixeli),
"scrolling " reprezintă permisiunea de derulare a pagin ii din cadru ( yes sau no),
"frameborder " specifică dacă va fi sau nu afisată o margine (bordura) pentru cadru (1=da,
0=nu), iar " nume_frame " este numele cadrului (ne cesar pentru atributul"TARGET" în link –
uri sau câ nd frame -ul este folosit de JavaScript).

29
3.3. Legăturile (referințele)
Legăturile permit vizitatorului să acceseze alte pagini web, legate de cuvântul -cheie
selectat.
Legăturile sunt alcătuite din două părți: din textul activ, care este afișat,care în
momentul selecției sale determină încărcarea paginii de la adresa specificată de legătură,
precum și din adresa resursei ce va fi încărcată atunci când selectăm legătura.
3.3.1. Legătura către o altă pagină – Link -urile
În documentele HTML trecerea de la un fragment al textului la altul se realizeaz ă prin
tagurile: <A HREF= “[adresa de trecere]”>fragment text evidențiat</A>
Parametrul [adresa de trecere] poate fi de câteva tipuri. Cel mai simplu tip — numele
altui document HTML la care se face trecerea.
Forma generală: <A HREF= “nume fisier”>Comenta riu</A>
EXEMPLU:
Exemplul următor nu va afecta formatarea documentului:
<a>Aici</a> ar trebui sa fie un link !
Pentru activarea link -ului de mai sus vom adă uga atributul href.
Exemplul următor arată formatarea documentului:
Referințele pot fi absolute (ex<a href="poze trecut/drago1986.jpg"
target="_blank"/> sau relative (ex. <li><a href="Acasa.html">Acasa</a></li> ).
Referințele relative sunt folosite în interiorul siturilor. Ele funcționează pe baza
faptului că browserul adaugă automat numele domeniului la fiecare referință (presupunând că
există o pagină la adresa <a href="http://www.bazelecontabilitatii.ro">
Bazele contabilităț ii</a> și o referință relativă către acasa.html , browserul va construi
referința file:///G:/lucrare%20master/pg%20web%20buna/Acasa. html în momentul în care
acasa.html este solicitată)

30
3.3.2. Legătura către o secțiune de pagină – Ancorele
Limbajul HTML utilizează marcajul ancoră <a> (anchor = ancora) pentru a crea o
legatură spre u n alt document. Un marcaj ancoră poate ținti (indica) o rice resursă de pe Web:
un document HTML, o imagine (fiș ier grafic), fisier sunet, film, etc . O ancoră are următorul
format:
<a name="top">
<p><a href="#top"><font color="#FFA500">Inapoi</font></a></p>
Numele ancorelor nu poate conține spații și trebuie să fie unic în pagina respectivă.
3.3.3. Legătura către o adresă de e -mail
Forma generală a unei legături către o adresă de e -mail este următoarea:
<p><img src="images/mail.gif" height="30" width="30" /><span>E -mail:</span><a
href="mailto:grscvintilabratianu @yahoo.com"><font color="#00FF00">
grscvintilabratianu@yahoo.com </a></p></center></font></a></b></p>

3.3.4. Utilizarea unei imagini ca legătură
Pentru a folosi o imagine ca legatură între tag -urile <a> și </a>, va trebui scrisă adresa
imaginii:
<a href="poze2012.html"><img src="images/2012.jpg" alt="poze comenius"
align="right" height="60" width="213" /></a>
3.4.Liste
Listele reprezintă modalități de organizare mai simplă a datelor din pagina web și
servesc la prezentarea informațiilor în mod organizat, pentru a fi mai accesibile și ușor de
parcurs. Listele le regăsim și în alte aplicații, fiind foarte ușor de implementat în oricare
situație. Listele sunt organizate la rândul lor în trei categorii:
 liste ordonate (cu numere sau litere),
 liste neordonate (cu simboluri),
 liste de definiții , fără marcaje.
3.4.1. Liste ordonate
Listă ordonată este un porțiune de text delimitată de marcajele <OL> și</OL>
(ordered list – listă ordonată), ale cărei elemente se marchează cu numere. Fiecare
componentă a listei este descrisă de marcajul <LI> (list item – element de listă), iar lista este
indentată în raport cu pagina și orice element nou al listei, începe pe o linie nouă.

31
EXEMPLU:
</HEAD>
<BODY>
<p><ol>
<li>Imobilizari necorporale
<li>Imobilizari corporale
<li>Imobilizari financiare
</ol>
</p> </BODY>
</HTML>
3.4.2. Liste neordonate
O listă neordonată este o mulțime de componente asemănătoare, aranjate într -o ordine
oarecare. Lista este o porțiune de tex t delimitată de marcajele pereche <UL> și </UL>
(unordered list – listă neordonată). Fiecare componentă a listei este introdusă prin marcajul
simplu <LI> (list item – element listă ). Cu toate că eticheta <LI> este o etichetă container,
eticheta sa de înch idere, </LI> , este opțională. Dacă nu este prezentă, la întâlnirea unei noi
etichete <LI> se consideră că vechea etichetă este închisă.
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista neordonata</TITLE>
</HEAD>
<BODY>
<p>In HTML sunt disponibile 3 tipuri de liste:</p >
<ul>

32
<li><b><a href="#ACTIVE IMOBILIZATE"><font color="#B1FB17">
ACTIVE IMOBILIZATE</font></a></b></li>
<li><b><a href="#ACTIVE CIRCULANTE "><font color="#B1FB17">
ACTIVE CIRCULANTE</font></a></b></li>
<li><b><a href="#ACTIVE DE REGULARIZARE SI ASI MILATE "><font
color="#B1FB17">ACTIVE DE REGULARIZARE SI ASIMILATE </font></a></b></li>
</ul> </BODY>
</HTML>
3.4.3. Liste de tip definiții
Lista de definiții reprezintă un tip de listă cu componente ce nu sunt numerotate, cu
simboluri și care prezintă două nivele de indentare. Listele de definiții sunt porțiuni de text
incluse între marcajele <DL> și </DL> (definition list – listă de definiții ), cu marcaj de
închidere obligatoriu. Orice componentă a listei este introdusă prin marcajul <DT> (definition
term – termen de definiție) și conține un număr de elemente care îl definesc, introduse cu
marcajul <DD> (definition description – descriere definiție ).
EXEMPLU:
<HTML>
<HEAD>
<TITLE>Lista ordonata</TITLE>
</HEAD>
<BODY>
<DL>
<DT> antet 1</DT>
<DD>subantet 11 </DD>
<DD>subantet 12 </DD>
<DD>subantet 12 </DD>
<DT>antet 2</DT>
<DD>subantet 21 </DD>

33
</DL> </BODY>
</HTML>
3.4.4. Personalizare a listelor
În locul simbolurilor folosite în mod prestabilit pentru elementele listelor se pot afișa
propriile imagini. Pentru aceasta, în loc de tag -ul <li> cu care introducem fiecare element al
listei vom adăuga imaginea dorită cu ajutorul tag -ului <img> .
EXEMPLU :
Fiecare element al listei este introdus cu ajutorul unei imagini salvate sub denumirea
de desen în folderul Poze .
<HTML>
<HEAD>
<title>Liceul Tehnologic"Vintila Bratianu"</title>
</HEAD>
<BODY>
<img src="images/Comenius1.jpg" align="right" hei ght="260" width="313"
/></b></td>
<td><a href="poze2012.html"><img src="images/2012.jpg" alt="poze comenius"
align="right" height="60" width="213" /></a></td></tr>
<td><a href="poze2013.html"><img src="images/Grecia.jpg" alt="poze comenius"
align="right" height="60" width="213" /></a></td></tr>
<td><a href="poze2014.html"><img src="images/Franta.jpg" alt="poze comenius"
align="right" height="70" width="213" /></a></td></tr>
</BODY>
</htm>

34
3.5. Tabele
Avem foarte multe posibilități de a prezenta în int eriorul documentului informația într –
o formă structurată, iar folosirea tabelelor este utilă, mai ales în situația în care informația are
un grad mare de complexitate.
Ce este un tabel? Un tabel este o suprafață dreptunghiulară formată din linii și
coloan e. Elementul creat prin intersecția unei linii cu o coloană se numește celulă. O linie a
tabelului este realizată din mai multe celule aliniate pe orizontală, iar o coloană este realizată
din mai multe celule aliniate pe verticală. Celulele tabelului pot să conțină conțină text,
imagini, legături web, iar independent de celelalte celule, fiecare celulă poate avea propriile
caracteristici pentru culoarea de fundal, culoarea și alinierea textului.
Pentru a insera un tabel într -un document HTML se folosesc marcajele <TABLE> și
</TABLE> , marcajul de final este obligatoriu, deoarece absența lui nu permite afișarea
corectă a tabelului. Pentru inserarea unei linii într -un tabel se folosesc marcajele <TR> și
</TR> (table row). Pentru inserarea unei celule c u informații se folosesc marcajele <TD> și
</TD> (table data). Marcajele de închidere pentru inserarea unei linii sau celule sunt
opționale, deoarece fiecare linie și celulă este urmată de alta și acestea pot realiza închiderea
necesară.
Atributele:
 BORD ER – defineș te chenarul tabelului, exprimat î n pixeli
Ex: BORDER=2

 CELLSPACING – specifică spaț iul dintr e celulele tabelului, exprimat î n pixeli;
Ex: CELLSPACING=2

 CELLPADDING –specifica spațiul dintre marginile celulelor și continutul lor,
exprimat î n pixeli;
Ex: CELLPADDING=2

 WIDTH – specifică lățimea tabelului pe pagina, în pixeli sau în procente față de
lățimea totală a ecranului monitorului, exprimată î n pixeli.
Ex: WIDTH=500
WIDTH=75%

35
HTML.
Este recomandat să fie lăsat browserul să calculeze va loarea pentru " height " în funcție
de conținutul tabelului.
 bgcolor – specifică culoarea pentru fundalul tabelului.
 bordercolor – specifică culoarea chenarului.
 bordercolorlight , bordercolordark – sunt atribute utilizate pentru a crea un
efect 3D asupra chenarului. Este recomandată folosirea de culori complementare pentru a
obține efectul scontat. Sunt extensii Microsoft.
 background – URL -ul imaginii care va fi utilizată ca fundal al tabelului. În
cazul î n care dimensiunile imaginii sunt mai mici decât c ele ale tabelului, ea va fi repetată
astfel încât să acopere întregul fundal al tabelului
Tabelele sunt specificate în HTML râ nd cu r ând, fiecare r ând conținând definiț ii
pentru fiecare din celulele care î l formează. Pentru a defini un tabel se începe prin a defini
primul rând din partea de sus, celulă cu celulă, apoi se definește al doilea râ nd, ce lula cu
celula etc. Coloanele su nt calculate automat pe baza numărului de celule care formează
rândurile.
Alinierea datelor din tabel
Pentru estetica conț inutulu i tabelului exista câ teva atribute care permit alinierea
datelor în interiorul celulelor, atât pe orizontala, cât și pe verticală .
Implicit dat ele din celulele cap de tabel sunt centrate atât orizontal cât ș i vertical, iar
inform ațiile din celulele de date sunt centrate vertica l, dar aliniate orizontal la stâ nga.
Tabele simple
Tabelele simple sunt tabelele î n care celulele unei linii au aceeași înalț ime iar celulele
unei coloane au aceeași lăț ime.
TAG -ul <TR>
“Table Row” defineste o linie din tabel.
Sintaxa : <TR> continut -linie </TR>
TAG -ul <TH>
“Table Head” specifică o celulă de tip antet
Sintaxa: <TH> antet </TH>

36
TAG -ul <TD>
“Table Data” definește o celulă normală din tabel.
Sintaxa: <TD [ALIGN=left|center|right] [VALIGN=left |center|right]> conț inut-celula </TD>

Semnificațiile atributelor marcajului <table> sunt:
 <tHEAD>…</tHEAD> este un marcaj care conține unul sau mai multe
rânduri de celule care reprezintă antetul tabelului. Poate apărea o singură dată în cadrul unui
tabel.
 <tBODY>…</tBODY> este un marcaj care conține unul sau mai multe
rânduri de celule. Pot fi definite mai multe astfel de secțiuni în cadrul aceluiași tabel (ex. în
cazul în care există stiluri de formatare diferite pentru secțiuni diferite ale tabelului).
 <tfoot>…</tfoot> este un marcaj care conține unul sau mai multe rânduri de
celule care reprezintă subsolul tabelului. Poate apărea o singură dată în cadrul unui tabel. Este
obligatoriu să apără înaintea marcajului <tBODY> .
EXEMPLU:
Conținutul fiecărei celule poate fi formata t individual sau afișat cu chenar :
<table border="3">
<tr><br>
<th colspan="3">
<font color="#0CFF55"><b>CATEDRA DE LIMBA SI LITERATURA
ROMANA:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;
<b></font></th>
</tr>
<tr>
<td><font color="#1AAB68"><b>responsabilul catedrei:</b></font><br><font
color="#FFF8C6"><b>prof.Delighios Rucsanda: titular</b></font></td></tr>
<tr><td><font color="#FFF8C6"><b>prof.Duna Cora:</b></font>< br><font
color="#1AAB68"><b>titular</b></font></td></tr>

37
<tr><td><font color="#FFF8C6"><b>prof.Butiseaca Violeta:</b></font><br><font
color="#1AAB68"><b>titular</b></font></td></tr>
</tr>
</table>
Marcajul <tr> definește o linie intr -un tabel.
Are următoarea sintaxă:
<tr>
<td><font color="#FFF8C6"><b>prof.Nitu Marilena Cristina</b></font><br><font
color="#1AAB68"><b>titular(discipline economice)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Pavel Cornelia </b></font><br><font
color="#1AAB68"><b>titular(inginer agronom)</b></font></td>
</tr>
Poate avea următoarele atribute:
 align – specifică modul în care va fi aliniat pe orizontală conținutul liniei de
tabel.
 valign – specifică modul în care va fi aliniat pe verticală conținutul liniei de
tabel.
 bgcolor – specifică culoarea pentru fundalul liniei de tabel.
 bordercolor – specifică culoarea chenarului celulelor din linie de tabel.
 bordercolorlight , bordercolordark – sunt atribute utilizate pentru a create un
efect 3D asupra chenarului de tabel.
Marcajul <th> definește o celulă din antetul tabelului.
Sintaxa este:
<tr><br>
<th colspan="5"><font color="#0CFF55"><b>DEPARTAMENTE</b></font></th>
</tr>

Poate avea următoarele atribute:
 align, valign – indică a linierea orizontală și verticală a conținutului celule, în
celula.
 colspan – specifică numărul de coloane peste care se întinde celula curentă
spre dreapta.
 rowspan – specifică numărul de linii peste care se întinde celula curentă în jos.

38
 nowrap – împie dică "ruperea" textului din celulă pe mai multe linii.
 bgcolor, background, bordercolor, bordercolorlight, bordercolorlight – au
efecte similare celor menționate mai sus.
Marcajul <td> definește o celulă din tabel.
Are următoarea sintaxă:
<tr>
<td><fon t color="#1C95EA"><b>SECRETARIAT</b></font><br>
<td><font color="#FFF8C6"><b>Constantin Mariana</b></font>
</tr>
3.6. Formulare
Un formular este un ansamblu de zone active alcă tuit din butoane ,casete de
selectie,campuri de editare etc.
Formul arele vă as igură construirea unori pagini W eb care permit utilizatorilor să
introducă efectiv informații și să le transmită serverului. Form ularele pot varia de la o simplă
casetă de text , pentru introducerea unui ș ir de caractere pe post de cheie de că utare – eleme nt
caract eristic 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.
O sesiune cu o pagină web ce conține un formular cuprinde urmă toarele etape:
1. Utilizat orul completează formularul și îl expediază unui server.
2. O aplicație dedicată de pe server analizează formularul completat și (dacă este
necesar) stochează datele într -o bază de date.
3. Dacă este necesar serverul expedieaz ă un răspuns utilizatorului.
Un formular este definit î ntr-un bloc delimitat de etichetele
corespondente <form> și </form> .
Tag-ul <FORM> are două atribute foarte importante: action și method .
Cu ajutorul atributului action îi spunem browser -ului ce se va întâmpla cu datele
introduse î n formular. Astfel, valoarea atributului action poate fi o adresa URL a unui script,
scris într -un limbaj de programare, care va interpreta datele și le va introduce într -o bază de
date, dacă este cazul, sau poate fi o adresă de email, caz în care datele i ntroduse în formular
vor fi trimise prin email la adresa respectivă.

39
Atributul method , așa cum îi spune și numele, precizează metoda de trimitere a
datelor și poate avea două valori. Valoarea implicită a acestui atribut este get, cu ajutorul
acestei metod e putând fi trimise cantități mici de date, cea mai folosită metoda fiind post.
3.6.1. Elementele unui formular
Elementele unui formular trebuie introduse, în majoritatea cazurilor, cu ajutorul tag –
ului <input>. Atributele cele mai importante ale acestui t ag sunt următoarele:
– type – tipul elementului;
– name – numele elementului;
– value – valoarea elementului.
Elementele ale unui formular pot fi:
– câmpurile de editare;
– butoanele radio;
– casetele de validare;
– casetele de fișiere;
– listele de selecț ie;
– butoanele submit și reset.
3.6.1.1. Câmpurile de editare
Pentru a introduce în cadrul unui formular un câmp de editare, trebuie să folosim
pentru atributul type, al tag -ului <input>, valoarea text.
EXEMPLU:
Camp de editare

Atribut ele cele mai folosite pentru tagul <input> de tipul câmp de editare sunt:
• size, care reprezintă lățimea câmpului de editare;
• maxlength , specifică numărul maxim de caractere care pot fi introduse în câmpul de
editare;
• value , valoarea inițială a câmpul ui de editare.

40
De exemplu, pentru câmpul de editare de mai sus s -a folosit următoarea linie de cod:
<input name ="exemplu" type="text" value ="Camp de editare" size="20" maxlength
="30">
Dacă se dorește introducerea unui câmp de editare de tip "parolă", atr ibutul type va
avea valoarea "password". În acest caz, caracterele introduse în câmpul de editare, nu vor fi
vizibile.
Atunci când vrem să adăugam în cadrul formularului nostru un câmp de editare în care
să poată fi introduse mai multe rânduri, folosim câ mpurile de editare de tip multilinie. Pentru
a folosi un astfel de câmp de editare, avem nevoie de tag -urile <textarea> și </textarea> .
EXEMPLU:
<textareacols ="50" rows ="5" name ="exemplu"></ textarea >
Am folosit atributul cols pentru a stabili numărul de caractere al fiecărui rând,
atributul rows pentru numărul de rânduri al câmpului de editare, iar atributul name pentru
numele câmpului de editare.

3.6.1.2. Butoanele radio
Dacă avem o întrebare cu mai multe variant e de răspuns, vom folosi butoanele radio .
Pentru a introduce un buton radio, folosim tag -ul <input >, iar la atributul type, valoarea
"radio ".
EXEMPLU:
În ce categorie de vârstă vă încadrați?
sub 15 ani
15-20 ani
20-25 ani

41

25-35 ani
35-45 ani
peste 45 ani

Codul HTML al exemplului de mai sus este următorul:
&#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadra&#355;i? < br>
<input type ="radio" name ="raspuns" value ="a" checked >sub 15 ani< br>
<input type ="radio" name ="raspuns" value ="b">15 -20 ani< br>
<input type ="radio" name ="raspuns" value ="c">20 -25 ani< br>
<input type ="radio" name ="raspuns" value ="d">25 -35 ani< br>
<input type ="radio" name ="raspuns" value ="e">35 -45 ani< br>
<input type ="radio" name ="raspuns" value ="f">peste 45 ani

Cu ajutorul atributului checked , fără alte valori, pu tem selecta un buton radio în mod
prestabilit. Nu pot fi selectate mai multe butoane radio dintr -un grup, în același timp.
3.6.1.3. Casetele de validare
Pentru a introduce o casetă de validare ( checkbox ) se utilizează eticheta < input > cu
atributul type având valoarea " checkbox ". Casetele de validare permit selectarea sau
deselectarea uneia sau mai multor opțiuni.
EXEMPLU:
Legăturile paginii web sunt :
Foarte utile
Utile
Inutile

42

Codul HTML al exemplului de mai sus este următorul:
<h3> Legaturile paginii web sunt :</h3>
<ul style="list -style -type:lower -alpha;">
<li style="display:inline;">
<input value="4" name="raspuns[6][]" type="radio" /> Foarte utile
&nbsp;</li>
<li style="display:inline;">
<input value="5" name="raspuns[6][]" type="radio" />Utile
&nbsp;</li>
<li style="display:inline;">
<input value="4" name=" raspuns[6][]" type="radio" />Inutile
&nbsp;</li>
3.6.1.4. Casetele de fișiere
Pentru a trimite un fișier prin intermediul unui formular, folosim pentru atributul type
al tag -ului < input >, valoarea " file".
EXEMPLU:

Codul HTML al exemplului de mai sus est e următorul:
<input type ="file" name ="file">
3.6.1.5. Listele de selecție
O listă de selecție, așa cum îi spune și numele, permite utilizatorului să aleagă una sau
mai multe opțiuni dintr -o listă. Listele de selecție pot fi introduse în cadrul unui formula r cu
ajutorul tag -urilor < select > și </ select >.

43
Atributele cele mai folosite pentru tag -ul <select > sunt:
• name , atribuie listei de selecție un nume;
• size, specifică numărul de elemente din cadrul listei de selecție;
• value , atribuie o valoare de tip text care va fi expediată serverului, sub forma de
perechi "name = value";
• selected (fără alte valori), selectează în mod prestabilit un element al listei.
EXEMPLU:
Alege un județ din România:
Constanta

Pentru a selecta î n mo d implicit valoarea București, am folosit în dreptul acesteia
atributul selected .
Codul HTML al exemplului de mai sus este următorul:
<select >
<option value=Alba>Alba</ option >
<option value=Arad>Arad</ option >
<option value=Arges>Arges</ option >
<option value=Bacau>Bacau</ option >
<option value=Bucuresti selected >Bucuresti</ option >
<option value=Buzau>Buzau</ option >
…
</ select >
Pentru a putea selecta mai multe valori din cadrul unei liste de selecție trebuie să
folosim pentru tag -ul <select > atributul multip le, fără alte valori.

44
3.6.1.6. Butoanele de tip Submit și Reset
Pentru a putea expedia datele introduse în cadrul unui formular, fie prin e -mail, fie
către un script scris într -un limbaj de programare care va interpreta aceste date, trebuie să
folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag -ul <input >,
cu atributul type având valoarea " submit ". Putem modifica și valoarea butonului, care în mod
implicit este Submit , cu ajutorul atributului value .
Linia de cod pentru un buto n de tip submit va fi următoarea:
<input type ="submit" value ="Trimite">
Alături de butonul de tip Submit , putem folosi și un buton de tip Reset . Prin apăsarea
acestui buton toate elementele formularului vor reveni la valoarea lor prestabilită, indiferent
de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset , se procedează la
fel ca și la butonul de tip Submit , singura deosebire fiind că atributul type va avea valoarea
"reset ".
Linia de cod pentru un buton de tip reset va fi următoa rea:
<input type ="reset" value ="Sterge">
3.6.2. Trimiterea datelor dintr -un formular prin e -mail
Pentru ca datele introduse într -un formular să fie trimise prin e -mail trebuie să folosim
pentru atributul action al tag -ului < form >, valoarea mailto:email@domeniu.ro , în felul
acesta, datele introduse in formular vor fi trimise la adresa de e -mail specificată.
EXEMPLU:
Pentru a trimite datele dintr -un formular la adresa exemplu@yahoo.com vom folosi
următoarea linie de c od:
<form action ="mailto:exemplu@yahoo.com" method ="post">

45
CAPITOLUL IV
Aplica ție

4.1. Pagina web Liceul Tehnologic “Vintilă Brătianu” Dragomirești -Vale
Prima pagină web “Index”

Surs ă prima pagină web “Index”
<!DOCTYPE html>
<html>
<head>
<title>Liceul Tehnologic"Vintila Bratianu"</title>
<link rel="shortcut icon" type="images/png" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="css/coin -slider.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery -1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

46
<script type="text/javascript" src="js/coin -slider.min.js"></script>
<style>
ul#menu {
padding: 0;
}

ul#menu li {
display : inline;
width: 120px;
}
ul#menu li a {
background -color: #254117;
color: white;
padding: 20px 30px;
text-decoration: none;
border -radius: 4px 4px ;
}

ul#menu li a:hover {
background -color: orange;
}
</style>
</head>
</style>

47
<table border="2" bordercolor="#9F000F" width="1235">
<tr>
<th><center><img src="images/logo1.jpg" width="1235" height="110" /></center></th>
</tr>
<tr>
<td><body>
<ul id="menu" class="shadows">
</body>
<li><a href="Index.html">Acasa</a></li>
<li><a href="Despre noi.html">Despre noi</a></li>
<li><a href="Profesori.html">Profesori</a></li>
<li><a href="Documente.html">Documente</a></li>
<li><a href="Contact.html">Contact Us</a></li>

</tr>
</ul>
<td>
<table border="3" b gcolor="#254117" >
<tr><td ><div class="slider"><left>
<div id="coin -slider"> <img src="images/slide11.jpg" width="520" height="110" />
<img src="images/slide22.jpg" width="520" height="110" />
<img src="images/slide3.jpg" width="520" height= "110" /> </div></td>
</left></td>
<td><a href="images/Afis_2016.png" target="_blank">

48
<img src="images/Afis_2016.png" alt="Oferta scolara" align="right"
height="300" width="250" /></a></td>
<td><center><iframe
src="http://free.timeanddate.com/clock /i4zxxsmj/n49/tlro32/fn6/fs16/fcff0/tc254117/pcff0/ftb
/bas2/bat1/bacfff/pa8/tt0/tw1/th1/ta1/tb4" width="230" height="60"></iframe></center>
<h3><font color="#FFFF00"><center><i><b>Link -uri utile</b></i></center></h3></font>
<ul><font color="#FFFF33"><li ><a href="http://www.isjilfov.ro/"
target="_blank">ISJ Ilfov</a></li>
<li><a href="http://www.edu.ro" target="_blank">Ministerul
Educa&#539;iei Na&#539;ionale</a></li>
<li><a
href="https://www.facebook.com/pages/Liceul -Tehnologic -Vintila –
Bratianu/262977760387799" target="_blank">Facebook</a></li>
<li><a
href="http://www.edu.ro/index.php/articles/c5"target="_blank">ARACIP</a>
<li><a
href="http://subiecte2015.edu.ro/2015/"target="_blank">Examene Nationale< /a>
</ul>
</font>
</td>
</tr>
</table>
<table style="width:100%"> <left>
<tr>
<td><a href="images/calendar examene nationale.jpg" target="_blank">
<img src="images/c.e.n.2016.jpg" alt="Calendar bacalaureat" height="300"
width="250" /></a></t d>

49
<td><a href="images/structura.png" target="_blank">
<img src="images/structura.png" alt="Structura an scolar" height="300"
width="250" /></a></td>
<td><a href="images/misiune.png" target="_blank">
<img src="images/misiune.png" alt="Misiune" he ight="300" width="470"
/></a></td>
<td><a href="absolvire.html">
<img src="images/absolvire.jpg" alt="poze comenius" align="right"
height="300" width="250" /></a></td></left>
</tr>
</table>
<div id="subsol">
<font color="#800000"><b>Conta ct</b></font><br>
<span>Telefon:</span> <font color="#21138F">021 -4367190<br/></font>
<span>FAX:</span> <font color="#21138F">021 -4367190<br/></font>
<span>Cod postal:</span> <font color="#21138F">077095<br/></font>
<span>E -mail:</span><a href="mailto: grscvintilabratianu@yahoo.com"><font
color="#21138F"> grscvintilabratianu@yahoo.com</a> </p></center></font></a></b>
</div>
</body>
</html>

50
A doua pagină web “ Despre noi ”

Sursă a doua pagină web “ Despre noi ”
<!DOCTYPE html>
<html>
<head>
<title>Liceul Tehnologic"Vintila Bratianu"</title>
<link rel="shortcut icon" type="images/png" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="css/coin -slider.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cufon -yui.js"></script>
<script type="text/javascript" src="js/cufon -titillium -600.js"></script>
<script type="text/javascript" src="js/jquery -1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></s cript>

51
<script type="text/javascript" src="js/coin -slider.min.js"></script>
<style>
ul#menu {
padding: 0;
}

ul#menu li {
display: inline;
width: 120px;
}
ul#menu li a {
background -color: #254117;
color: white;
padding: 20px 30px;
text-decoration: none;
border -radius: 4px 4px ;
}
ul#menu li a:hover {
background -color: orange;
}
</style>
</head>
</style>
<table border="2" bordercolor="#9F000F" width="1235">

52
<tr>
<th><center><img src="images/logo1.jpg" width="1235" height="11 0" /></center></th>
</tr>
<tr>
<td><body>
<ul id="menu" class="shadows">
</body>
<li><a href="Index.html">Acasa</a></li>
<li><a href="Despre noi.html">Despre noi</a></li>
<li><a href="Profesori.html">Profesori</a></li>
<li><a href="Documente.html">Documente</a></li>
<li><a href="Contact.html">Contact Us</a></li>
</td>
<div align="right">
</tr>
</ul>
<td>
<div id="container">
<div id="parteastanga1"><br>
<center><video width="300" height="250" controls poste r="">
<source src="video/Dragomiresti1.mp4" type="video/mp4">
</video></center><br>
<center>
<a href="poze trecut/Clasa veterinara.jpg" target="_blank" />

53
<p><p><img src="poze trecut/Clasa veterinara.jpg" alt="poze tr ecut" width="250"
/><br>
<br>
<a href="poze trecut/promotia 1987.jpg" target="_blank"/>
<p><p><img src="poze trecut/promotia 1987.jpg" alt="poze trecut" width="250"
/></a><br>
<br>
<br>
<a href="poze trecut/drago1986.jpg" target="_blank"/ >
<p><p><img src="poze trecut/drago1986.jpg" alt="poze trecut" width="250"
/></a><br>
<br>
<br>
<a href="poze trecut/colegi -vet a X a 1985.jpg" target="_blank"/>
<p><p><img src="poze trecut/colegi -vet a X a 1985.jpg" alt="poze trecut"
width="250" /></a><br>
<br>
</center>
</div>
</div>
<div id="continut">
<div id="coloana1">
<a name="top"><marquee behavior="alternate"> <h2><font face="Monotype Corsiva"
color="#00FF00">Povestea noastra </FONT></h2></marquee></a>
<img alt="" align="right" src="poze trecut/trecut si prezent.jpg" alt="poze trecut"
width="400" height="200"/></a></em>

54
<h4 style="text -align: justify;"><em> Terenul pe care se afla azi scoala a fost cumparat de
Casa Rurala in 1908 de la fostul proprietar , general Boteanu. Boteanu folosea pentru
administrarea mosiei un arman boeresc, asezat in mijlocul satului, in locul unde se afla astazi
scoala. <br>
Suprafata cumparata a fost de 593 hectare, impreuna cu conacul vechi compus din: 2 case de
locuit, 1 buc atarie in paianta, un grajd pentru 8 vite, 2 cosare pentru porumb, 1 magazie de
scinduri pe soclu de zid si curte. </em>
<h4 style="text -align: justify;"><em>&nbsp;&nbsp;&nbsp;Armanul era imprejmuit cu gard
de nuiele. Mosia a fost exploatata in dijma si b ani pina la 1910, cind dupa propunerea lui
Maximilian Popovici si a lui Vintila Bratianu, consiliul de administratie al Casei Rurale a
aprobat infiintarea pe o parte din ea a unei scoli de gradinarit, avind de scop instruirea fiilor
de sateni improprieta riti in urma rascoalei din 1907. Pe linga invatarea meseriei gradinaritului
si a cultivarii pomilor scoala furniza seminte de legume si pomi la toate mosiile Casei
Rurale.In primavara anului 1911 s -au inceput lucrarile culturale iar in toamna s -au deschis
cursurile. </em>
<h4 style="text -align: justify;"><em>&nbsp;&nbsp;&nbsp;Terenul de cultura s -a exploatat in
regie, dijma, si bani pina in 1915 cind s -a dat o parte din mosie (aproximativ 522 ha), in loturi
la sateni si pentru islazul comunal; raminind res tul de 70,30 ha pe seama scolii. Mosia a fost
impartita in loturi de 5 ha, situate pe 2 trupuri de mosie.Prin faptul ca Casa Rurala a impartit
aceste loturi prin tragere la sorti, loturile scolii au ramas izolate in 16 parcele.
<h4 style="text -align: justi fy;"><em>&nbsp;&nbsp;&nbsp;In timpul razboiului scoala nu a
functionat. Dupa razboi (1919) scoala a fost redeschisa dupa intelegerea dintre Casa Rurala,
Casa Centrala a Cooperatiei si Improprietaririi, Directia Obstilor Satesti si cu aprobarea
Ministerul ui Instructiei Publice cu Ord. nr. 124.490/1919, fiind transformata din scoala de
gradinarit cu durata de 2 ani in scoala inferioara de horticultura cu durata de 4 ani, din care
unul de practica de specialitate in scoala. Ea a depins de Directia Obstilor pina la 1924, cind a
trecut la Directia Invatamintului Agricol din Ministerul Agriculturii si Domeniilor si
functioneaza tot ca scoala inferioara de horticultura insa cu o durata de 3 ani curs teoretic si
un an si jumatate de practica de specialitate.
<h4 style="text -align: justify;"><em>&nbsp;&nbsp;&nbsp;In anul scolar 1947 -1948 vechea
Scoala Inferioara de Horticultura se transforma in Liceul Tehnic Horticol de fete care in
august 1948, prin Legea de reforma a invatamintului devine Scoala Medie Tehnica Horticola

55
cu durata de 4 ani, tip de scoala care functioneaza pina in 1955. Incepind cu anul scolar 1955 –
1956, aceasta se transforma in Scoala Profesionala de Legumicultura cu durata de 3 ani si se
infiinteaza in paralel si Scoala Tehnica de Maistri Legumi coli cu durata de 3 ani, cursuri de zi
si fara frecventa.
<h4 style="text -align: justify;"><em>&nbsp;&nbsp;&nbsp;Intre anii 1961 -1963 s -a introdus
al treilea tip de scoala – Scoala Tehnica pentru personalul tehnic agricol, pentru absolventii
liceelor de cu ltura generala, tip de scoala care a dat o singura promotie cu 26 de absolventi.La
1 iulie 1963 prin dispozitia Consiliului suprem al agriculturii Centrul Scolar Agricol
Bucuresti (cu profil de veterinara si contabilitate), se unifica cu cel din Dragomir esti Vale si
constituie Centrul Scolar Agricol Dragomiresti Vale cu 2 profiluri de specialitate: horticultura
si veterinara. Iar din 1964 si in mod experimental si scoala profesionala de mecanici agricoli,
care functioneaza pina in 1966. Numarul celor car e puteau frecventa cursurile a fost destul de
modest in primii ani de functionare. Scoala, dupa cum s -a aratat mai sus, a functionat din
primavara anului 1911 cu un numar de 9 elevi, care au absolvit in octombrie 1913; in 1915 –
11 elevi si in 1916 – 9 elevi.
<h4 style="text -align: justify;"><em>&nbsp;&nbsp;&nbsp;Dupa razboi elevii au fost primiti
la scoala iar situatia frecventei este urmatoarea: <br>
*9 elevi au frecventat cururile in anii 1914 -1919 <br>
*8………………………………………19 15-1916 si 1919 -1920 <br>
*6……………………………………… 1919 -1921 <br>
*13…………………………………….. 1920 -1921 <br>
*17…………………………………….. 1921 -1923 <br>
<h4 style="text -align: justify;"><em>&nbs p;&nbsp;&nbsp;Numarul elevilor pe clase in
1922 -1923 a fost de 42 din care au promovat 34 iar 8 s -au retras. Scoala avea in anul scolar
1923 -1924, 46 elevi bursieri din care 27 in cl I, 8 in cl a -II-a, 9 in cl a -III-a si 2 auditori liberi.
Toti au trecut i n stagiul de practica. In acea perioada nu exista material didactic decit din
punct de vedere intuitiv -botanic, planse si colectii de seminte. Scoala se ocupa cu agricultura,
pomicultura, viticultura, cultura legumelor si floricultura.Pe parcursul anilor i n scoala au
existat profile de: zootehnie, protectia plantelor, topografie, tehnician veterinar, tehnician
activitati economice.

56
</center>
</div>
</div>
<div id="subsol">
<font color="#800000"><b>Contact</b></font><br>
<span>Telefon:</span> <font co lor="#21138F">021 -4367190<br/></font>
<span>FAX:</span> <font color="#21138F">021 -4367190<br/></font>
<span>Cod postal:</span> <font color="#21138F">077095<br/></font>
<span>E -mail:</span><a href="mailto:grscvintilabratianu@yahoo.com"><font
color="#2113 8F"> grscvintilabratianu@yahoo.com</a> </p></center></font></a></b>
</div>
</table>
</body>
</html>
A treia pagină web “ Profesori ”

57
Sursă a treia pagină web “ Profesori ”
<!DOCTYPE html>
<html>
<head>
<title>Liceul Tehnologic"Vintila Bratianu"</tit le>
<link rel="shortcut icon" type="images/png" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="css/coin -slider.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/culoaresir .js"></script>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background -color: #254117;
color: white;
padding: 20px 30px;
text-decoration: none;
border -radius: 4px 4px ;
}
ul#menu li a:hover {

58
background -color: orange;
ul#menu {
padding: 0;
}
</style>
</head>
</style>
<table border="2" bordercolor="#9F000F" width="1235">
<tr>
<th><center><img src="images/logo1.jpg" width="1235" height="110" /></center></th>
</tr>
<tr>
<td><body>
<ul id=" menu" class="shadows">
</body>
<li><a href="Index.html">Acasa</a></li>
<li><a href="Despre noi.html">Despre noi</a></li>
<li><a href="Profesori.html">Profesori</a></li>
<li><a href="Documente.html">Documente</a></li>
<li>< a href="Contact.html">Contact Us</a></li> </td>
</tr>
</ul>
<td>
<div id="continutdoc1" class="shadows"><center>

59
<table border="3">
<tr><br>
<script type="text/javascript">
var message="ECHIPA MANAGERIALA"
var culoare1="#0CFF55" // Culoarea de baza
var culoare2="#FFFB00"
var flashspeed=100 // viteza de colorare
// Colorarea sirului
var n=0
if (document.all||document.getElementById) {
document.write('')
for (m=0;m<message.length;m++)
document.write('<span id="colorare'+m+'">'+message. charAt(m)+'</span>')
document.write('')
}
else
document.write(message)
function crossref(number) {
var crossobj=document.all? eval("document.all.colorare"+number) :
document.getElementById("colorare"+number)
return crossobj
}
function neon() {
// Schimba toate caracterele la culoarea initiala

60
if (n==0) {
for (m=0;m<message.length;m++)
crossref(m).style.color=culoare1
}
crossref(n).style.color=culoare2
if (n<message.length -1)
n++
else {
n=0
clearInterval(flashing)
setTimeout("beginneon()",800)
return
}
}
function beginneon() {
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</tr>
<tr>
<td><font color="#1AAB68"><b>Director:</b><font><b r><font
color="#FFE87C"><b>dr. ing. Chisa Eugen Adrian</b></font></td>

61
<td><font color="#1AAB68"><b>Director adjunct:</b></font><br><font
color="#FFE87C"><b>prof.Dragut Alexandra</b></font></td>
</tr>
</table>
<table border="3">
<tr><br>
<th c olspan="3">
<font color="#0CFF55"><b>CATEDRA DE LIMBA SI LITERATURA
ROMANA:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b></font></th>
</tr>
<tr>
<td><font co lor="#1AAB68"><b>responsabilul catedrei:</b></font><br><font
color="#FFF8C6"><b>prof.Delighios Rucsanda: titular</b></font></td></tr>
<tr><td><font color="#FFF8C6"><b>prof.Duna Cora:</b></font><br><font
color="#1AAB68"><b>titular</b></font></td></tr>
<tr><td><font color="#FFF8C6"><b>prof.Butiseaca Violeta:</b></font><br><font
color="#1AAB68"><b>titular</b></font></td></tr>
</tr>
</table>
<table border="3">
<tr><br>
<th colspan="5"><font color="#0CFF55"><b>CATEDRA DE LIMBI
MODERNE:</b></font ></th>
</tr>

62
<tr>
<td><font color="#1AAB68"><b>responsabilul catedrei:</b></font><br><font
color="#FFF8C6"><b>prof.Gutu Maria:titular(lb.engleza)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Popescu
Ciresica:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;</b></font><br>
<font color="#1AAB68"><b>(lb.franceza)</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Ignat Liliana:</b></font><br><font
color="#1AAB68"><b>(lb.engleza)</b></ font></td>
<td><font color="#FFF8C6"><b>prof.Petre Tina:</b></font><br><font
color="#1AAB68"><b>suplinitor(lb.franceza)</b></font></td>
</tr>
<tr><td><font color="#FFF8C6"><b>prof.Petre Lazarescu:</b></font><br><font
color="#1AAB68"><b>(lb.engleza)</b ></font></td></tr>
</table>
<table border="3">
<tr><br>
<th colspan="5"><font color="#0CFF55"><b>MATEMATICA SI
STIINTE</b></font></th>
</tr>
<tr>
<td><font color="#1C95EA"><b>CATEDRA MATEMATICA</b></font><br></td>
<td><font color="#1C95 EA"><b>CATEDRA STIINTE</b></font><br></td>
</tr>

63
<tr>
<td><font color="#1AAB68"><b>responsabilul catedrei:</b></font><br><font
color="#FFF8C6"><b>prof.Albisoru Violeta:titular</b></font></td>
<td><font color="#1AAB68"><b>responsabilul catedrei:</b ></font><br><font
color="#FFF8C6"><b>prof.Barladeanu Raluca:titular(fizica)</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Ardelean Camelia</b></font><br><font
color="#1AAB68"><b>titular</b></font></td>
<td><font color="#FFF8C6"><b>prof .Dovlete Catalina</b></font><br><font
color="#1AAB68"><b>(fizica)</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Georgescu Laura</b></font><br><font
color="#1AAB68"><b>titular</b></font></td>
<td><font color="#FFF8C6"><b>prof.Dragut Ale xandra dr.adj.</b></font><br><font
color="#1AAB68"><b>titular(chimie)</b></font></td>
</tr>
<tr>
<td></td>
<td><font color="#FFF8C6"><b>prof.Negreanu Carmen</b></font><br><font
color="#1AAB68"><b>titular(chimie)</b></font></td>
</tr>
<tr>
<td> </td>

64
<td><font color="#FFF8C6"><b>prof.Fratila Lica</b></font><br><font
color="#1AAB68"><b>titular(biologie)</b></font></td>
</tr>
</table></center>
<br><br><br><br>
</div>
<div id="continutdoc2" class="shadows"><center>
<table border="3">
<tr><br>
<th colspan="5"><font color="#0CFF55"><b>OM SI SOCIETATE</b></font></th>
</tr>
<tr>
<td><font color="#1AAB68"><b>responsabilul catedrei:</b></font><br><font
color="#FFF8C6"><b>prof.Dumitrescu Anisoara:titular(istorie)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Oglindoiu Camelia
&nbsp;&nbsp;&nbsp;</b></font><br><font
color="#1AAB68"><b>titular(geografie)</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Ciobanu Camelia</b></font><br><font
color="#1AAB68"><b>socio -umane</b></font></td>
<td><font color="#FFF8C6"><b>prof.Dolha Teodor</b></font><br><font
color="#1AAB68"><b>preot(religie)</b></font></td>
</tr>
<tr>

65
<td><font color="#FFF8C6"><b>prof.Mares Mirela</b></font><br><font
color="#1AAB68"><b>titular(educat ie fizica)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Popescu Stefan</b></font><br><font
color="#1AAB68"><b>antrenor rugby</b></font></td>
</tr>
<tr>
<td></td>
<td><font color="#FFF8C6"><b>Vasiliu Simina</b></font><br><font
color="#1AAB68">< b>prof.psiholog</b></font></td>
</tr>
</table>
<table border="3">
<tr><br>
<th colspan="5"><font color="#0CFF55"><b>ARIA TEHNOLOGII</b></font></th>
</tr>
<tr>
<td><font color="#1AAB68"><b>responsabilul catedrei:</b></font><br><font
color ="#FFF8C6"><b>prof.Ivanof Florenta:titular(ing.agronom)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Antonescu Vasilica</b></font><br><font
color="#1AAB68"><b>titular:bio -agricultura</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>pro f.Nitu Marilena Cristina</b></font><br><font
color="#1AAB68"><b>titular(discipline economice)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Pavel Cornelia</b></font><br><font
color="#1AAB68"><b>titular(inginer agronom)</b></font></td>

66
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Duta Silvia</b></font><br><font
color="#1AAB68"><b>titular(discipline economice)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Alpoianis Eugenia</b></font><br><font
color="#1AAB68"><b>titular(inginer agronom)</b></fon t></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Nastaila Paula</b></font><br><font
color="#1AAB68"><b>(discipline economice)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Chisa Eugen -dir</b></font><br><font
color="#1AAB68"><b>titular(ingine r zootehnist)</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Popa Viorica</b></font><br><font
color="#1AAB68"><b>titular(TIC)</b></font></td>
<td><font color="#FFF8C6"><b>prof.Dan Florina</b></font><br><font
color="#1AAB68"><b>titular( inginer zootehnist)</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Udrescu Georgeta</b></font><br><font
color="#1AAB68"><b>titular(inginer zootehnist);TIC</b></font></td>
<td><font color="#FFF8C6"><b>prof.Mihalcea Florin</b></font><br>< font
color="#1AAB68"><b>medic veterinar</b></font></td>
</tr>
<tr>

67
<td><font color="#FFF8C6"><b>prof.Nicolae Rodica</b></font><br><font
color="#1AAB68"><b>maistru instructor electromecanica</b></font></td>
<td><font color="#FFF8C6"><b>prof.Alboaie Co tuna Simona</b></font><br><font
color="#1AAB68"><b>ing.frigotehnist</b></font></td>
</tr>
<tr>
<td><font color="#FFF8C6"><b>prof.Trandafir Costel</b></font><br><font
color="#1AAB68"><b>maistru instructor conducator auto</b></font></td>
</tr>
</tab le>
<table border="3">
<tr><br>
<th colspan="5"><font color="#0CFF55"><b>DEPARTAMENTE</b></font></th>
</tr>
<tr>
<td><font color="#1C95EA"><b>SECRETARIAT</b></font><br>
<td><font color="#FFF8C6"><b>Constantin Mariana</b></font>
</tr>
<tr>
<td><font color="#1C95EA"><b>CONTABILITATE</b></font><br>
<td><font color="#FFF8C6"><b>Radu Niculina -contabil</b></font><br>
<font color="#FFF8C6"><b>Nastaila Viorica -casier</b></font>
</tr>
<tr>
<td><font color="#1C95EA"><b>BIBLIOTECA</b></ font>

68
<td><font color="#FFF8C6"><b>Pieptea Gina</b></font>
</tr>
<tr>
<td><font color="#1C95EA"><b>INFORMATIZARE</b></font>
<td><font color="#FFF8C6"><b>Constantin Bogdan</b></font>
</tr>
<tr>
<td><font color="#1C95EA"><b>CEAC</b></font></td>
<td><font color="#FFF8C6"><b>Dumitrescu Anisoara -responsabil</b></font><br>
<font color="#FFF8C6"><b>Popa Viorica</b></font><br>
<font color="#FFF8C6"><b>Nitu Marilena</b></font><br>
</td>
</tr>
</table></center>
<br>
</div>
<div id="subsol ">
<font color="#800000"><b>Contact</b></font><br>
<span>Telefon:</span> <font color="#21138F">021 -4367190<br/></font>
<span>FAX:</span> <font color="#21138F">021 -4367190<br/></font>
<span>Cod postal:</span> <font color="#21138F">077095<br/></font>
<span>E -mail:</span><a href="mailto:grscvintilabratianu@yahoo.com"><font
color="#21138F"> grscvintilabratianu@yahoo.com</a> </p></center></font></a></b>
</div>

69
</body>
</html>
A patra pagină web “ D ocumente ”

A cincea pagină web “ Contact Us ”

70
4.2. Studiu de caz realizat în urma aplicării chestionarului

CHESTIONAR ELEVI
Va multumim ca ati acceptat sa participati in cercetarea noastra! Cercetarea de fata
isi propune sa contribuie la imbunatatirea siteului liceului
Chestionarul este anonim, iar raspun surile furnizate de dumneavoastra vor fi
folosite exclusiv in scopul prezentei cercetari.
1. Sunt elev(a) in clasa a:
IX­a X­a XI­a XII­a Parinte
2. Sex:
M F
3. Varsta :
14­16
4. Sunteti elev in cadrul liceului :
DA Vreau sa devin NU
5. Adresa web site­ului www.liceulvintilabratianu.ro este usor de
memorat :
Total de acord De acord Dezacord Total dezacord
6. Cat de utile vi se par informatiile postate pe site
Foarte importante Importante Lipsite de interes
7. Legaturile paginii web sunt :
Foarte utile Utile Inutile
8.Ce informatii ati dori sa gasiti pe site:

9. Cum vi se pare aspectul paginii web :
Foarte atractiv Atractiv Lipsit de interes d i v e r s e

71
În cadrul Liceului Tehnologic “Vintilă Brătianu”, Dragomirești -Vale , au fost aplicate
chestionare de opinie privind părerea elevilor și cadrel or didactice cu privire la pagina web a
liceului.
Scopul aplicării acestor chestionare a fost de evidențiere a promovării imaginii
liceului.
Acest studiu a fost realizat pe un eșantion de 64 repondenți din care 10 cadre didactice
iar restul de 54 fiind ele vi atât din cadrul liceului cât și posibili viitori elevi.
Instrumentul utilizat în acest studiu este un “chestionar de opinie”.
Chestionarul, ca instrument de lucru, reprezintă un set de întrebări, bine organizate și
structurate pentru a obține date cât m ai exacte cu privire la o persoană sau a unui grup de
personae, și ale căror răspunsuri sunt construite în scris.
Chestionarul de opinie aplicat reprezintă acel instrument de colectare a datelor, care se
bazează pe autoraportările repondenților la propriil e lor percepții, atitudini sau
comportamente. Elevii pot fi investigați în legătură cu percepțiile lor asupra unor situații,
activități, acțiuni.
Chestionarul de opinie aplicat este alcătuit din 9 itemi dintre care:
 Itemii: 1, 3, 4, 5, 6, 7, 8, 9 – sunt i temi obiectivi cu alegere multiplă,
 Itemul: 2 – este item obiectiv cu alegere duală de tip DA/NU (itemi închiși).
Itemii obiectivi solicit ă din partea elevului selectarea răspunsului corect, sau a celui
mai bun răspuns, dintr -o serie de variante existente și oferite, itemii din această catogorie
sunt larg utilizați în practica evaluativă datorită unor proprietăți caracteristice ca :
– pot fi acoperiți și notați în mod obiectiv, în comparație cu toate celelalte tipuri de
itemi;
– por acoperi o plajă largă d e obiective de evaluare și de elemente de conținut într -un
interval de timp relative scurt;
– permit feedback rapid și utilizarea informațiilor

72
Itemi obiectivi cu alegere multiplă: sunt itemi care solicită subiectului investigat
alegerea răspunsului core ct sau a celui mai bun răspuns dintr -un număr de variante construite
deja. Această categorie de itemi este contruită dintr -o premisă – reprezentând partea
introductivă a itemului, în care sarcina este clar formulate, cât și un număr de variante,
răspunsuri posibile dintre care unul este corect, iar restul răspunsurilor fiind numite
distractori.
Itemii obiectivi cu alegere multiplă sunt itemi care permit obținerea răspunsului într –
un interval de timp scurt, acoperind un larg eșantion din aria conținuturilor într-un interval
scurt de testare, având o fidelitate ridicată. Sunt itemi flexibili putând fi proiectați practice
pentru orice nivel al abilităților și obiectivelor vizate.
Itemi obiectivi cu alegere duală : sunt itemi pentru care elevul investigat este
solicitat să selecteze un răspuns corect din două răspunsuri posibile oferite.
Această categorie de itemi poate fi utilizată pentru evaluarea unei game destul de largi
de abilități vizate, asigură o fidelitate mare, având un singur răspuns correct care poa te fi
apreciat și notat fără riscul unor erori sau diferențe între corectori. Itemi obiectivi cu alegere
duală au ca scop reducerea riscului de oferire a unor răspunsuri la întâmplare.
În continuare, se va face analiza din punct de vedere calitativ a răsp unsurilor la
chestionarul privind designul și informațiile care se doresc a fi găsite pe pagina web a
Liceului Tehnologic “Vintilă Brătianu” Dragomirești -Vale.

73
Numărul total de repondenți este de 64, majoritatea fiind elevi în cadrul liceului.

1.Sunt elev(ă) în clasa a:
IX-a 9
X-a 14
XI-a 17
XII-a 14
Cadru didactic 10

74
La cercetare au participat în total 6 4 de subiecți, dintre care 42 de femei, adică 66%, și
22 de bărbați, adică 44%. Distribuția subiecților în funcție de sex este reprezentată în graficul
următor:

2. Sex
Feminin 42
Masculin 22

75
De asemenea, distribuția în funcție de vâr stă, este următoarea: 13 subiecț i cu vârsta
cuprinsă între 14 -16 de an i (20%); 34 subiecți cu vârsta cuprinsă ȋntre 16 -18 de ani, adică
53%, 8 subiecți cu vârsta cuprinsă ȋntre 18 -30 de ani, adică 13%, 3 subiecți cu vârsta cuprinsă
ȋntre 30 -40 de ani, adică 5%, 6 subiecți cu vârsta mai mare de 40 de ani, ceea ce înseamnă
9%. Reprezentarea grafică este următoarea:

3. Vârsta :
14-16 13
16-18 34
18-30 8
30-40 3
peste 40 6

76
La studiu, au participat atât elevi din cadrul liceului, c ât și din afară. Majoritatea
repondenților, în proporție de 78%, au fost din cadrul liceului.

4. Sunteți elev în cadrul liceului :
DA 50
Vreau să devin 4
NU ––
Altele 10

77
În proporție de 47%, re pondenții au fost totalmente de acord cu adresa web site -ului,
părându -li-se ușor de reținut, restul re pondenților, în număr de 32 (50%), fiind de acord.

5. Adresa web site -ului www.liceulvintilabratianu.ro este ușor de
memorat ?
Total de acord 30
De acord 32
Dezacord 2
Total dezacord ––-

78
În același timp, 28 din re pondenți au apreciat ca fiind foarte importante informațiile
postate pe site, restul de 31 părându -li-se importante, doar 5 răspunzând că sunt lipsite de
interes.

6. Cât de utile vi se par in formațiile postate pe site
Foarte importante 28
Importante 31
Lipsite de interes 5

79
În același timp, la 52% dintre respondenți li se par utile legăturile postate pe site,
ușurându -le căutarea pe diverse site -uri în domeniu .

7. Legăturile paginii web sunt :
Foarte utile 25
Utile 33
Inutile 6

80
56% dintre respondenți au dorit ca pe site -ul liceului să poată găsi informații diverse,
din toate domeniile, inclusiv cele extrașcolare.

8. Ce informații ați dori să găsiți pe site:
Diverse 36
Despre cadrele didactice 7
Despre admitere la liceu 5
Despre situația elevilor 5
Toate cele de mai sus 11

81

82
CAPITOLUL V
Metodică

5.1. Proiect de activ itate didactic ă
Liceul Tehnologic’’Vintilă Brătianu’’ Dragomirești -Vale
Prof. Nițu Marilena Cristina
Data: 20.02.2016
Disciplina: TIC
Clasa a IX -a
Mediul de instruire: Laboratorul de informatic ă;
Unitatea de învățare: pagini WEB
Nr de elevi: 21

PROIECT DE LECȚIE

Titlul lecției: Întocmirea unei pagini web personale
A.Necesitatea studierii temei : Pagini web personalizate poate reprezent a cartea de
vizită a unei companii, instituții etc. Dacă reușește încă de la început să creeze un impact în
mintea clientului , și anume să -l determine să caute mai multe despre acea companie, putem
spune că acea pagină web și -a îndeplinit deja una din cele mai importante funcții.
B. Structura logică a conținutului lecție i

83

C. Contextul în care se desfășoară lecția:

Experiența anterioară de
învățare a elevilor Cuvinte „cheie”
Resurse
materiale Lb. Română Lb. Engleză
* Elevii cunosc :
-notiun ile teoretice referitoare
la tagurile HTML ;
– utilizează corect tagurile
învațate atunci când realizeză
pagini web ;
* Elevii au :
– diferite fișe
*Elevii pot:
– să identifice etapele de
realizare ale unui proiect
web
– să identifice tagurile
folosite – antetul documentului
– titlul documentului
– corpul paginii html
– imagine de fond
pentru
pagina

– dimnesiunea textului

– lățime

– înălțime – head
– title
– body
– background

– size

– width

– height

– imagini
– manual
– fișe de l ucru
– prezentare
ppt

84

D. Obiectivele lecției:
Capacitatea care se
urmărește a se forma la
elevi prin învățare Comportamentul prin
care elevii vor proba
capacitatea respectivă Condițiile în care vor
lucra elevii pentru a
realiza comportamentul Criterii
de
realizare
(limita
min.
admisă)
O1- Deprinderea realizării
unei pagini web Elevul aplică operațiile
de bază necesare unei
pagini HTML Elevii vor aplica operațiile
de bază pentru realizare unei
pagini web 90%
O2- Deprinderea de a insera
și încadra un text în limbaj
HTML. Elevul inserează și
încadrează un text
HTML Elevii inserează un text și in
vor încadra întrun
chenar(frame) 80%
O3- Deprinderea de a
realiza o legătură între
pagini Elevul inserează o
legătură între pagini Elevii identifică legăturile
între pagi ni 90%

85
E. Strategii didactice

Timp Etape de instruire Arii de conținut Metode de
învățământ Mijloace de
învățământ Forme de organizare a activității
Profesor Elevi Profesor Elevi

2′ 1. Secvența introductivă
( discuții p regătitoare)
2. Crearea contextului :
– se dau cuvintele „cheie”:
antetul documentului , corpul
paginii HTML,dimensiunea
textului , imagine de fond,
lățime, înălțime
-se caută corespondente în
altă limbă ( engleză)

-scriu cuvintele cheie în
caiete

conv ersația
frontal

colectiv

individual

5′ 3. Transmiterea noilor cu –
noștințe
– elaborează schema logică a
conținutului lecției
– ajută la elaborarea sche –
mei logice a conținutului
Pagini WEB observația
descoperirea
conversația tabla

frontal
indiv idual
colectiv

86

33′

4. Fixarea ( feed -back)
– împarte clasa în grupe de
câte 4 elevi;
-trasează sarcini fiecărei
grupe:
1. identificarea etapelor
stabilirii
planului
2. identificarea tagurilor
speciale pentru realizarea
unui frame
3. identificare a legăturilor
între pagini

Lansarea în execuț ie a
procesorului de texte
Notepad:
Start ->Programs –
>Accessories ->
Notepad++
Crearea unui document
File -> New sau folosind
tastele Alt+F, apoi tasta
N
Salvarea unui document
ca document HTML
File ->Save sau folosind
tastele Alt+F, apoi tasta S

În fereastra Save
parcurgeți urmă toarele
etape:

1.Noț iuni
introductive
2.Editarea și
vizualizarea unui
document HTML
3.HTML de bază
tag-uri perec he
3.1. Structura unui
document HTML
<HTML>
<HEAD>
<TITLE> structura
paginii mele
</TITLE>
</HEAD>
<BODY>
Acesta este
conținutul paginii
</BODY>
</HTML> observația
descoperirea

conversația
metoda
ciorchinelui

Fișe de
documentare
Computerul

Frontal

Pe echipe de
lucru

87

Pas1: din lista ascunsă
Save In alegeți directorul
în care salvați documentul

Pas2: scrieți în zona de
editare File name numele
pe care doriți să îl dați
documentului adaugând
extensia html sau htm

Pas3: actionați
declansatorul Save
Deschiderea unui
document HTML
File ->Open sau Alt+F
dupa care tasta O

Fișe de
documentare
Computerul

Frontal

Pe echipe de
lucru

88
5′ 5. Proba de evaluare
– se distribuie fișa de
evaluare
– elevii completează fișa
Exercițiul
fișa de
evalu are
frontal
individual
5′ 6. Secvența finală
– notarea elevilor, tema
pentru acasă
– elevii își notează tema
pentru acasă
F. Desfășurarea lecției:
Nr
crt Secvențele
instruirii Obiec –
tive Activități desfășurate Arii de
conținut Timp
(min) Metode ș i
procedee Mijloace
didactice Forme de
organizare Obser –
vații
De profesor De elevi
0 1 2 3 4 5 6 7 8 9 10
1.
Secvența
introductivă Stalileste ordinea și
disciplina în clasă
Notează absenții Pregătesc cele
cerute.
2 Conversația Frontal
2.
Captarea
atenției Adresează elevilor o
întrebare legată de subiectul
lecției

Elevii răspund

2 Conversația

Imagini

Frontal

89

Cere elevilor să vorbească
despre o situație în care s -au
confruntat cu noțiunea
HTML

Elevii răspund
problematiza
rea

Planș e
3. Anunțarea
titlului lec –
ției și a
obiectivelor
operaționale
Notează pe tablă titlul lecției
și prezintă pe scurt scopul
acesteia
Elevii notează în
caiete titlul
lecției
Elaborarea
unei pagini
HTML

3
Expunerea
Frontal

4.
Organizarea
situațiilor
de învățare
pentru
realizarea
obiectivelor
O1- O3 O1

O2

O3

Organizează clasa în grupe
de câte 4 elevi
Împarte fișele de docu –
mentare și explică metoda
de lucru
Se grupează

Ascultă
explicații -le
profesorului

33
Expune rea,
conversația

Conversația

Fișe de
documen –
tare

Pe grupe .

90

5.

Conexiunea
inversă Solicită elevilor comple –
tarea fișelor de evaluare
Evaluează activitatea
elevilor
Prezintă fișele rezolvate.
Oferă lămuriri și trage
concluzii.
Completează
fișele evaluare

Ascultă

Pun întrebări
7
Conversația

Conversația

Fișe de
lucru Frontal Studiu
pe grupe
6. Tema
pentru acasă Realizați o pagina HTML a
unu site de liceu Notează tema.
Cer lămuriri.
3 Explicația

91
Fișă de lucru HTML

Observaț ie: Subiectele se realizează folosind limbajul HTML, în editorul de text
Notepad
Subiecte:
I. Se dă textul de mai jos:

Șoapta vântului

Vântul iernii de la munte
Într-o seară ne -a adus
Praful stelelor mărunte
Și la geamuri ni l -a pus.

Efectuați următoarele cerințe asupra textului:
a. Scrieți titlul poeziei ”Șoapta vântului” folosind Titlul 1(heading 1) și centrați -l.
b. Scrieți primele două versuri folosind fontul ”Tahoma”, dimensiunea 5 și
culoarea verde; centrați primele două versuri
c. Scrieți ultimele două versur i folosind fontul ”Arial”, dimensiunea 2 și culoarea
albastră; aliniați la dreapta ultimele două versuri

II. Transformați textul de mai jos într -o listă neordonată, folosind ca marcator simbolul
”pătrat”.
Câmpul nume poate conține 256 de caractere.
Câmpul ext ensie poate conține 3 sau 4 caractere.

III. Creați un tabel cu două linii și două coloane și efectuați asupra lui următoarele
prelucrări:

Celula 1 Celula 2
Celula 3 Celula 4

92

a. Umpleți celula 1 cu culoarea verde și bordați celula 1 cu culoare roșie.
b. Redime nsionați celulele 3 și 4 astfel: lătimea (width) să aibă valoarea 50 și
înălțimea (height) să aibă valoarea 100.
c. Textul ”Celula 3” să poziționat în centrul celulei iar textul ”Celula 4” să fie
poziționat în dreapta -jos.
IV. Salvați documentul în folderul clase i creat pe partiția D:/, cu numele personal.html

Barem

Subiectul I Subiectul II Subiectul III
a=0,5 b=2
c=2 1 Creare
tabel=1 a=1 b=1 c=0,5
4,5 1 3,5

obs. Se acordă 1 punct din oficiu

93
5.2. Programă școlară CDS
PAGINI WEB IN HTML
OBIE CTIVELE PROGRAMEI
• Folosirea tehnologiei pentru a dezvolta competențele necesare elevilor în utilizarea
limbajului HTML.
• Identificarea căilor prin care elevii pot utiliza tehnologia pentru a stimula procesul de
învățare prin cercetare, com unicare și colaborare.
• Dezvoltarea gândirii critice pentru cei care vor lucra în acest limbaj, în vederea rezolvării de
aplicații.
• Promovarea lucrului în echipă pentru optimizarea instruirii.
Acestea derivă din competențele generale și compet ențele specifice dobândite prin
diferite tipuri de activități.
COMPETENȚE GENERALE
• Competențe de comunicare — Înțelegerea și realizarea unei comunicări eficiente verbale,
scrise și multimedia, într -o varietate de forme și contexte.
• Creativitate și curiozi tate intelectuală — Dezvoltarea, implementarea și comunicarea ideilor
noi altor persoane ; deschidere și receptivitate la nou.
• Gândire critică și gândire sistemică — Exersarea gândirii în ce privește înțelegerea și realizarea
unor alegeri complexe ; înțeleg erea conexiunilor dintre sisteme.
• Informații și abilități HTML — Analizarea, accesarea, administrarea, integrarea, evaluarea, și
crearea de informații în limbajul HTML.
• Capacități de colaborare și interpersonale — Demonstrarea capacităților de lucru în ech ipă și
de conducere; adaptarea la diverse roluri și responsabilități; colaborarea productivă cu ceilalți;
conduită empatică; respectarea altor puncte de vedere.
• Identificarea, formularea și soluționarea problemelor — capacitatea de a depista, formula,
analiza și rezolva probleme.
• Auto -formare — Monitorizarea propriilor nevoi de înțelegere și învățare; localizarea resurselor
corespunzătoare ; transferul cunoștințelor dintr -un domeniu în altul.

94
ASPECTE METODOLOGICE
STRUCTURA MODULARA : 36 ore an -1 ora pe săpt ămână
Nr
crt MODUL DENUMIREA MODULUI Nr ore
alocate
1
INIȚIAL UTILIZAREA SERVICIULUI INTERNET ÎN
COMUNICARE ȘI ÎN ACTIVITATEA DE
ÎNVĂȚARE
4
2 DISCIPLINAR CREAREA DE PAGINI WEB – HTML 32

MODUL 1 – UTILIZAREA SERVICIULUI INTERNET ÎN COMUNICARE ȘI
ÎN
ACTIVITATEA DE ÎNVĂȚARE
Descriere: Internetul este o rețea globală formată prin interconectarea mai mult or
calculatoare , ce facilitează comunicarea î ntre utilizatori prin transferul de date de pe un
calculator pe altul .
O rețea este formată dintr -un grup de calculatoare care utilizează în comun
echipamente , date și aplicații , adică resurse hardware și software .
Internetul este:
– un sistem cu o dezvoltare foarte rapidă care cuprinde computere interconectate și care
facilitează serviciile de transfer de date cum ar fi poșta electronică, World Wide Web,
transferul de fisiere și stiri;
– rețea globală de computere, care leagă guverne, universități, companii și multe alte
rețele și utilizatori;
Fiecare computer din Internet, numit gazdă sau host, este in dependent.
Competențele specifice modulului:
1. Utilizarea și înțelegerea critică a internetului, în funcție de vârstă și de gen
2. Identificarea modului de redactare și expediere a unei scrisori prin poșta electronică
3. Diferențiere între realizarea unui proie ct cu ajutorul informațiilor sigure de pe internet
și nesigure

95
Nr
crt Denumirea
competenței Abilități Cunoștințe Atitudini

1.

Creativitate și
curiozitate
intelectuală *Exerciții de
identificare a
oportunității utilizării
tehnologiei informației
pentr u îmbogățirea
cunoștințelor și mărirea
eficienței activităților
desfășurate în cadrul
altor discipline; 1.1 Internetul. Începuturile
Internetului.
Definirea noțiunii de
Internet;
 Utilizarea și
înțelegerea critică a
internetului

 Identificarea
modului de redactare și
expediere a unei
scrisori prin poșta
electronică

 Diferențierea
între realizarea unui
proiect cu ajutorul
informațiilor sigure de
pe internet și nesigure

1.2 Servicii oferite de
Internet

2. Competențe
de
comunicare *Redactarea une i
scrisori, expedierea ei
prin poșta electronică;
1.3 Poșta electronică (E –
MAIL)
1.4 Navigarea pe Internet

3.
Capacități de
colaborare și
interpersonale *Utilizarea internet –
ului ca sursă de
informare la scară
mondială;
*Realizarea unui
proie ct utilizând
informații după
Internet; 1.5 Conversații prin
Internet

1.6 Realizarea unui proiect
folosind informații după
Internet

Metode de predare utilizate pe parcursul orelor de curs :
– prelegerea -dezbatere, dezbaterea, demonstrația, problem atizarea, explicația, metode și
tehnici de învățare prin cooperare etc.

Mijloace de învățământ utilizate :
– suport de curs, fișe de lucru, videoproiector, laptop, surse Internet, laborator virtual,
etc

Metode și instrumente de evaluare utilizate :
– Portofol iu, fișe, teste grilă

96
MODUL 2 – CREAREA DE PAGINI WEB – HTML
Descriere: Modulul prezintă materiale teoretice și practice pentru studierea limbajului
HTML. În esență, oferă cunoștințe necesare pentru crearea paginilor web simple, dar și
cunoștințe ce țin de regulile de bază în crearea site -urilor web.
HTML este un limbaj simplu pentru care nu sunt necesare cunoștințe deosebite de
programare, cu atât 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, însă 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 însușirea
fundamentelor construirii unui site. Pentru crearea site – urilor dinamice și interactive sunt
necesare cunoștințe avansate în multe alte limbaje de programare și aplicații.
Modulul poate fi util elevilor cât și tuturor celor care doresc să facă cunoștință cu acest
limbaj.
Competențele specifice modulului:
1. Cunoașterea și utilizarea structurii de bază a unei pagini Web;
2. Utilizarea operațiilor de bază în procesarea textului dintr -o pagină;
3. Aplicarea diferitelor modalități de formatare a textului din tr-o pagină Web;
4. Crearea unor liste ordonate și neordonate;
5. Folosirea link -urilor către alte pagini
6. Inserarea și formatarea tabelelor folosind limbajul HTML
7. Realizarea unor aplicații practice

97
Nr
crt Denumirea
competentei Abilități Cunoștiințe Atitudin i

1. Informații și
abilități în
limbajul
HTML *Prezentarea
noțiunilor legate
de Web;
2.1. Ce este World Wide
Web?

Inserare a unei imagini
într-o pagină Web și
stabilirea unei legături;

Crearea unui tabel
folosind comenzile HTML;

Creare de formulare și
introducerea lor în pagina
HTML;

Utilizarea și crearea
paginilor folosind
instrcțiunile din limbajul
HTML

Realizarea unor aplicații
practice
2.2. Nașterea Web -ului

2.
Informații și
abilități în
limbajul
HTML *Căutarea a
diferite informații
pe Web;
* Exerciții de
creare a unei
pagini Web
simple;
2.3. La ce folosește Web –
ul?

2.4 Ce se poate găsi pe
Web ?

3.
Capacități de
colaborare și
interpersonale *Căutarea
informațiilor pe
Web folosind
URL;

2.5 Despre URL -uri

4.

Identificarea,
formularea și
soluționarea
problemelor
* Exerciții de
formatare la nivel
de text: font,
dimensiune, stil,
culoare
* Aplicarea de
fundal unei pagini;
* Exerciții de
creare a unor liste
ordonate și
neordonate;

2.6 Structura unui
document Html. Noțiuni
de bază

2.7 Crearea și editarea
paginii HTML
2.8 Fonturi, Linii
orizontale,
Liste

98

5.
Informații și
abilități
HTML
*Exerciții de
împărțire a paginii
în diferite cadre;
* Exerciții de
creare a
formularelor;

2.9 Imagini, legături
Utilizarea și crearea
paginilor folosind
instrcțiunile din limbajul
HTML

Realizarea unor aplicații
practice 2.10 Tabele și cadre
HTML

2.11 Formulare

Metode de preda re utilizate pe parcursul orelor de curs :
– prelegerea -dezbatere, dezbaterea, demonstrația, problematizarea, explicația, metode și
tehnici de învățare prin cooperare etc.

Mijloace de învățământ utilizate :
– suport de curs, fișe de lucru, videoproiector, l aptop, surse Internet, laborator virtual,
etc

Metode și instrumente de evaluare utilizate :
– Portofoliu, fișe, teste grilă

99
CONCLUZII

Pornind de la ideea că intern etul a devenit principalul mijloc de comunicare în
societatea actuală, am reali zat o prezentare generală a unuia dintre cele mai importante ș i cele
mai complexe limbaje de programare regăsite în programa școalară și nu numai – limbajul
HTML. Astfel, pe baza unei structu ri personale , în urma parcurgerii bibliografiei , am definit
noțiu nile cheie specifice acestui limbaj, cum ar fi: ”p agină web”, ”tag”, ”frame” etc.
În ceea ce privește partea practică, am realizat site -ul Liceului Tehnologic ”Vintilă
Brătianu”, pentru a demonstra utilitatea noțiunilor teoretice prezentate. În aplicație, am
dovedit complexitatea limbajului, având numeroase ramificații, fiind necesari pași mărunți
până la obținerea rezultatului final.
Pentru ca site -ul să fie cât mai util, acoperind toate nevoile utilizatorilor, am aplicat un
chetionar elevilor, profesori lor, dar și altor subiecți, care și -au exprimat opinia în legătură cu
aspectul paginii, cu informațiile ce pot fi postate și link -urile de specialitate.
Totodată, am întocmit un CDȘ pentru aprofundarea limbajului HTML în școală,
uneori marginalizat, în favoarea altor programe. CDȘ -ul vizează prezentarea pașilor necesari
pentru crearea unei pagini web. În realizarea paginii, a fost folosit editorul de text Notepad
++, având în vedere atât structurile de bază ale limbajului, cât și structuri cu un grad de
dificultate ridicat.
Pentru a demonstra utilitatea limbajului în cadrul orelor de curs, am propus un plan de
lecție , în care elevii aplică operațiile de bază ale HTML -ului, inserând și încadrând un text
într-un chenar, urmărind totodată legăturile reali zate între pagini pe baza unei fișe de lucru
date.
Așadar, limbajul HTML își dovedește utilitatea atât în școală, cât și în afara ei, având
în vedere societatea modernă și postmodernă, dominată de tehnologie. Apariția unei game
largi de site -uri, oficial e sau personale, oferă o imagine de ansamblu asupra spațiului www,
dar, de multe ori, acestea nu țin cont de nevoile utilizatorilor, urmărind doar interesul propriu.
Lucrarea de față însă a vizat prezentarea HTML -ului într -o manieră accesibilă atât elevilo r,
cât și tuturor celor interesați de a păstra o legătură permanentă cu mediul virtual, realizând un
site din domeniul educațional.

100
BIBLIOGRAFIE:

1. Sabin Buruga (2006 ) – Proiectarea S ite-urilor Web, Editura Polirom;
2. Simion Ionel (2007 )– Proiectarea pag inilor Web, Editura Teora ;
3. Homorodean Marcel Andrei, Iosupescu Irina (2007 ) – Internet si pagini Web.pentru
începători și inițiați, Editura Niculescu ;
4. Tudor Sorin și Vlad Huțanu (2004 ) – Crearea și programarea pagini lor WEB,
București, L&S Infomat ;
5. Vlad Hu țanu și Carmen Popescu (2007 ) – Manual de Informatică Intensiv pentru clasa
a XII -a, București, L&S Infomat ;
6. Prof. dr. Toma S. – “COORDONATE ALE UNUI NOU CADRU DE REFERINȚĂ
AL CURRICULUMULUI NAȚIONAL ” Note de curs ;
7. http://www.marplo.net/html/ – HTML