PROIECT DIDACTIC

COLEGIUL NATIONAL ANASTASESCU, Rosiorii de Vede, jud. Teleorman

Disciplina: INFORMATICA
Clasa: a-XII-a C
Profesor: Popescu Floarea
Unitatea de invatare: Limbaj de marcare a hipertextului .
Tema: Formatare text, introducere culori si imagini, legaturi.
Tipul lectiei- recapitulare si sistematizarea cunostintelor.
Locul de desfasurare: Laboratorul de informatica.
Nivelul initial al clasei:
-elevii si-au insusit toate notiunile teoretice legate de proiectarea
unei pagini WEB .
-elevii utilizeaza corect notiunile invatate in realizarea paginilor
WEB.
Obiectiv cadru: -realizarea de
despre realizarea paginilor WEB.

aplicatii

utilizand

cunostintele

Obiective de referinta: - sa creeze si sa prelucreze o pagina WEB

intr-un program de editare;
- sa urmareasca etapele de realizare a unei
aplicatii WEB.
- sa depaneze programele in cazul unor
eventuale erori.
- sa afi seze pagina intr-un program de navigare;
Obiective educationale:

Obiective cognitive:
-sa dovedeasca trainicia notiunilor dobandite la disciplina
respectiva, in capitolul realizarea paginilor WEB;
-sa foloseasca corect etichetele, atributele specifi ce fi ecarei
etichete precum si valorile acestora;

Obiective psihomotorii:
-sa-si formeze deprinderi de lucru specifi ce temei de studiu;
-evaluarea deprinderilor de utilizare corecta a optiunilor puse la
dispozitia utilizatorului de limbajul HTML;

Obiective afective:
-formarea convingerilor ca utilizarea tehnologiei HTML permite
realizarea unor aplicatii cu pagini WEB intr-o forma utila si chiar
foarte rentabila;
-sa aprecieze corect solutiile oferite de colegi;
-sa se implice cu placere si interes la etapele lectiei;

-sa se bucure de rezultatele muncii depuse;

Obiective operationale:
O1: sa defi neasca notiunile de etichete, atribute,valori ale
atributelor;
O2: sa-si insuseasca modul de editare a elementelor srise in
pagini si de formatare a acestora;
O3:sa realizeze corect operatiile privind modifi carea culorii
textului si legaturilor, formatarea textului;
O4: sa-si insuseasca corect modul de realizare a listelor in
paginile WEB;
O5: sa scrie corect legaturile catre hiperspatiu si sa foloseasca
corect lucrul cu directoarele;
O6:sa realizeze corect lucrul cu imaginile;
Strategii didactice:

Principii didactice:
-principiul participarii si invatarii active;
-principiul asigurarii progresului gradat al performantei;
-principiul conexiunii inverse.

Metode de invatamant:
-conversatia;
-explicatia;
-exercitiul;
-demonstratia;

Procedee de instruire:
-explicatia in etapa de comunicare;
-invatarea prin descoperire, prin rezolvarea de exercitii;
-exercitii de consolidare ;

Forme de organizare: - frontala;

-individuala;
- pe grupe;

Forme de dirijare a invatarii :-dirijata de profesor prin

materiale didactice;
-independenta;

Resurse materiale: -fi se de lucru;

-set de aplicatii;
-calculator;

Material bibliografi c

Paul McFedries, Crearea paginilor WEB,Editura B.I.C.

ALL,Bucuresti;
Radu Marsanu-Manual pt. clasa a XII-a, Editura L&S
INFOMAT, Bucuresti 2001;

Metode de evaluare:
-evaluare sumativa;
-evaluare continua pe parcursul
calculator);
-evaluare formativa;

lectiei

(fi sa

de

lucru

si

Desfasurarea activitatii:
moment organizatoric :

o pregatirea lectiei: -intocmirea proiectului didactic

-pregatirea setului de intrebari;
-pregatirea setului de aplicatii;
-pregatirea temei;
o organizarea si pregatirea clasei:
-verifi carea frecventei;
-verifi carea existentei si operationalitatii
resurselor materiale;
o captarea atentiei clasei:
-anuntarea subiectului pentru tema respectiva;
-anuntarea obiectivelor urmarite;
-anuntarea modului de desfasurare a activitatii;
reactualizarea cunostintelor:
Se realizeaza un set de intrebari pentru reactualizarea cunostintelor
teoretice , ca mai jos:
Tabelul nr.1
Pentru fi xarea cunostintelor
urmatorul continut:

elevii

primesc

Fisa nr. 1
Fisa dupa care se desfasoara lectia este urmatoarea:

fi sa

de

lucru

cu

Fisa nr. 2
Identificati un fisier grafic in format oarecare in calculatorul tau si daca este cazul
converteste acest format grafic pentru a-l putea folosi intr-o pagina WEB.
Introduceti aceasta imagine intre doua linii orizontale in pagina voastra WEB cu
titlul Test.
Realizarea conexiunii inverse:
Obtinerea performantei se realizeaza prin utilizarea fi sei cu
continutul urmator, propusa pentru elevii capabili de performanta
care o pot realiza in clasa si constituind tema pentru acasa pentru
ceilalti elevi.
Fisa nr. 3
Scrieti un program HTML care insereaza o imagine 50%,50% din
pagina incadrata de text.
Concluzii:
Se vor face aprecieri individuale si colective asupra activitatii
desfasurate.

INTREBARE
RASPUNS ASTEPTAT
1.
Ce
intelegeti
prin Eticheta este un cod (de regula
etichete(tags sau marcatori)- o prescurtare de una sau doua
numite si elemente HTML?
litere dar uneori poate fi si un
cuvant intreg) care specifi ca
tipul de efect pe care il doresti.
Sintaxa:
<ETICHETA>Hipertext</ETICHE
TA>
Intotdeauna
vom
inconjura
aceste coduri cu paranteze
unghiulare; parantezele spun
browser-ului WEB ca a intalnit
un element de limbaj HTML si
nu un text oarecare.
2.Care este structura formala a <HTML>
unui program HTML?
<HEAD>
<TITLE>Text<TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3.Ce modalitati de formatare a <B></B> -scriere bold
textului cunoasteti?
<I></I>
italic
<U></U>
subliniat
<TT><TT>
monospatiu
<PRE></PRE>
preformatat
<H1></H1>
<H7></H7> -antet
<CENTER></CENTER>
-centrat
<LEFT></LEFT> -alin. stanga
<RIGHT></RIGHT>
-alin.
dreapta
<P></P> -aliniat nou
<P ALIGN=
></P>-alin.
nou
<BR> sfarsit de rand
<H1 ALIGN=
>
-antet
aliniat
4.Cum
inseram
liniile <HR> -linie
orizontale?
<HR WIDTH=y%> lat. linie %
fer.
<HR WIDTH=x> lat. linie in
pixeli
<HR SIZE=n> grosime in

6.Cum introducem culoarea pt. Culoare text:

text, pt. fundal si pt. legaturi.
<FONT COLOR=COLOR> Text</FONT>
<BODY TEXT=color >
Culoare legaturi:
<BODY
LINK=color
VLINK=color
ALINK=COLOR>
Culoare fundal:
<BODY BGCOLOR=color >
7.Ce tipuri de liste cunoasteti?
Liste numerotate:
Care sunt etichetele pt. liste?
<OL> <OL TYPE=1,a,A,I,i>
<LI>Text</LI>
<LI>Text</LI>
<OL>
Liste marcate:
<UL>
<UL TYPE=disc,circle,square>
<LI>Text<LI>
<LI>Text<LI>
<UL>
Liste de defi nitii
<DL>
<DT>Termen<DT><DD>Defi nitie
termen<DD>
<DT>Termen<DT><DD>Defi nitie<DD>
<DL>
Combinatii de liste.
8. Cum introducem legaturile:
Sintaxa:
-catre o pagina WEB?
1. <A HREF=URL>Text legatura</A>
-catre o ancora in text?
URL
-catre o adresa de e-mail?
http://nume gazda/director/fi sier

2.

<A NAME=nume><A>
<A
HREF=#nume>Text
legatura</A>
3.
<A
HREF=mailto:adresa>Text</A>
9.Cum introducem imagini <IMG SRC=numefi sier >
in paginile WEB?

ITEM
1.Formatele grafice folosite in paginile WEB sunt
de tip:
a. GIF
b. JPEG
c. BMP
d. TGA
2.Browser-ul nu afiseaza imaginile. Cauzele pot fi:
a. nu ai scris corect literele mari si pe cele mici
(de ex. in loc de imagine.gif ai scris
IMAGINE.GIF).
b. ai omis ghilimelele la atributul SRC al
etichetei <IMG>.
c. Eticheta <AHREF> nu este scrisa corect.
d. Fisierul grafic nu este in acelasi director cu
fisierul tau HTML.
3. Daca imaginea pentru pagina ta WEB nu este in
format GIF sau JPEG:
a. nu o poti folosi in pagina WEB.
b. O poti folosi dupa convertirea sa (cu ajutorul
unui program de grafica) in format GIF sau
JPEG.
c. O poti folosi dupa obtinerea permisiunii
proprietarului, in special daca pagina ta are
scopuri comerciale.
4.Gasiti erorile din programul de mai jos si dupa
corectarea lor precizati ce afiseaza browser-ul:
<HTML>
<HEAD>
<TITLE> MY HOME PAGE</TITLE>
<BODY>
<HR>
Pagina mea de WEB <BR>
<P>este foarte buna</p>
</BODY>
</HTML>
5. Ce va afisa programul de mai jos:
<HTML>
<HEAD>
<TITLE> Test</TITLE>
</HEAD>
</BODY>
<FONT SIZE=14 COLOR=red>
Urmeaza prezentarea grafica:</FONT>
<HR>
<IMG SRC=imagine.jpeg WIDTH=50% >
<HR>
<FONT SIZE=16 COLOR=green>Am prezentat
grafica.</FONT>

RASPUNS ASTEPTAT

a,b

a,b

b, c

Lipseste
eticheta
</HEAD>.
S-a folosit in mod
incorect eticheta <BR> si
eticheta <P> cu efecte
contrarii.

Programul
afisat
browser
-o
pagina
WEB
TITLUL
Test
urmatorul cuprins:

pe
CU
cu

Urmeaza
prezentarea
grafica:
(marime font 14, culoare
text rosu).
(Afisare
fisier
grafic
imagine.jpeg-centrat)
Am prezentat grafica.