PROIECT DE ACTIVITATE DIDACTICĂ

Disciplina: Tehnologia informației și a comunicațiilor

Clasa: a IX-a –Filiera teoretică. Profil real. Specializarea-Științe ale naturii
Unitatea de învăţare: Pagini Web

Tema: Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline)
Durata: 50 min
 Tipul lecţiei: Lecție pentru dobândire de noi cunoștințe
 Locul de desfăşurare: Laboratorul de informatică

Nivelul inițial al clasei:

 Elevii și-au însușit toate noțiunile teoretice legate de arhitectura Internetului
 Elevii utilizează corect browserul pentru vizualizarea paginilor Web
 Elevii si-au format şi dezvoltat deprinderi de utilizare a editorului HTML
 Elevii utilizează corect interfața editorului HTML
 Elevii utilizează corect operaţiilor de bază necesare realizării unei pagini HTML
 Elevii au un nivel de cunștințe corespunzător programei și de utilizare a calculatorului.

Obiectiv cadru:
 aplicarea elementelor de formatare la nivel de text pentru crearea paginilor Web
Obiectiv referință:
 să recunoască situațiile care impun folosirea anumitor marcatori pentru formatarea textului;
1
  să urmărească rezultatele într-un browser ales;
Obiective educaționale:
 Obiective cognitive:
 să dovedească trăinicia noțiunilor dobândite la disciplina T.I.C., în capitolul pagini Web;
 să folosească corect marcatorii specifici limbajului HTML în aplicații concrete;
 Obiective afective:
 să-și formeze convingerea că utilizarea limbajului HTML permite realizarea unor pagini web într-o formă
atractivă;
 să aprecieze corect soluțiile oferite de colegi;
 să se implice cu plăcere și interes la toate etapele lecției;
 să se bucure de rezultatele muncii depuse;
 Obiective psihomotorii:
 să-și formeze deprinderi de utilizare corectă a facilităților puse la dispoziție de limbajul HTML
 Obiective operaționale:
 să utlilizeze operațiile de bază necesare realizării unei pagini Web
 să utilizeze corect marcatorii învățați;
 să realizeze o pagină Web în formatul cerut;

Strategii didactice:
 Principii didactice:
 principiul participării și învățării active;

2
  principiul asigurării progresului gradat al performanței și înlăturarea treptată a punctelor de sprijin;
 principiul conexiunii inverse;
 Metode de învăţământ:
 conversația, explicația, exercițiul, problematizarea, învățarea prin descoperire;
 Procedee de instruire:
 conversatia de recapitulare și consolidare a cunoştinţelor;
 învățarea prin descoperire, prin rezolvare de probleme;
 problematizarea prin crearea situaţiilor problemă;
 exerciții de consolidare;
 Forme de organizare:
 frontală, individuală, pe grupe;
 Forme de dirijare a învăţării:
 dirijată de profesor sau prin materiale didactice;
 independentă;
 Resurse materiale:
 manual, fișe de lucru, culegeri și reviste de specialitate;
 calculator conectat la Internet, videoproiector, imprimantă;

 Material bibliografic:
 CERCHEZ E., Internet. Manual pentru liceu.Filiera teoretica, Editura Polirom, Iași, 2000.
 MILOȘESCU M., Tehnologia Informației și a Comunicațiilor.manual pentru clasa a IX-a, Editura
Didactică și pedagogică, București, 2005;

3
  POPESCU C., PĂLTINEANU M.,Tehnologia Informației și a Comunicațiilor L&S Info-mat, București,
2009;
 Resurse Internet, materiale digitale specifice disciplinelor din aria curriculară a specializării:
http://www.w3schools.com/
http://ro.wikipedia.org/wiki/HyperText_Markup_Language

 Metode de evaluare:
 evaluare inițială (întrebări orale);
 evaluare formativă pe parcursul lecției (seturi de aplicaţii cu urmărirea atingerii performanţei,
autoevaluare);
 evaluare sumativă;

4
 DESFĂȘURAREA ACTIVITĂȚII DIDACTICE

Metode și
Etapele lecției Obiective Conţinutul lecţiei Evaluare
procedee
Activitatea profesorului Activitatea elevului
I. Moment Organizarea și pregătirea clasei
organizatoric -să fie pregătiți pentru -verificarea frecvenței, verificarea -pregătirea pentru
începerea activității didactice exitenței și operaționalității resurselor începerea activității Conversația
materiale; didactice
Captarea atenţiei prin formule
motivaționale
- anunțarea subiectului pentru tema
respectivă, anunțarea obiectivelor
urmărite, anunțarea modului de
desfășurare a activității.

II. Reactualizarea -să definească corect Reactualizarea unor cunoștințe -elevii răspund la -evaluare
cunoștințelor noțiunile de browser, limbaj necesare activității didactice- întrebările Tabelului Conversația de frontală
- se realizează prin chestionarul cu nr.1, reactualizându-se
HTML, etichetă HTML, întrebări referitoare la diferite servicii astfel cunoștințele
fixare
structura unui document Internet, semnițicația HTML, etichetă, necesare temei
HTML elemente la nivet de bloc(block-level) propuse
pentru consolidarea cunoștințelor
-să prezinte semnificația teoretice, conform Tabelului nr.1
HTML

5
 Metode și
Etapele lecției Obiective Conţinutul lecţiei Evaluare
procedee
Activitatea profesorului Activitatea elevului
-elevii primesc o fișă
Intensificarea reținerii și asigurării de lucru cu aplicații
III.Intensificarea transferului de informații: necesare fixării
reținerii și Profesorul va apela la o prezentare cunoștințelor și Exercițiul
-să utlilizeze operațiile de
asigurării cu ajutorul calculatorului şi a unui asigurării transferului introductiv
transferului de bază necesare realizării unei videoproiector, va accesa prin de informații
informații intermediul Internetului materiale Conversația de
pagini Web; -evaluare
digitale specifice siteuri-lor Web. - utilizând resurse consolidare
-să utilizeze corect marcatorii formativă
Astfel, va accesa Platforma online şi offline,
Lucrări practice (fișă de lucru)
învățați; http://www.w3schools.com, unul elevii vor căuta şi
dintre cele mai complete site-uri cu vor colecta de laborator
tutoriale Web. informaţiile necesare
realizării paginii Web
-se face pe baza activităților propuse din palicația ce
conform Tabelului nr.2. urmează a fi realizată.
-să utilizeze corect Obținerea performanței se realizează - pe parcursul lecţiei, -evaluare
IV.Obținerea cu setul de aplicații introductive, prin elevii vor rezolva Problematizarea formativă
elementele de formatare;
performanței care se urmărește utilizarea corectă a sarcinile cuprinse în (fișă de lucru)
-să utilizeze corect marcatorii marcatorilor prezentați Fișa de aplicație nr.2 Exercițiul de
–conform cu Tabelului nr.2. -elevii vor rescrie consolidare
învățați;
exemple noi pe care le
vor testa pe propria
stație de lucru
V. Asigurarea - să realizeze o pagină Web Pentru realizarea conexiunii inverse - elevii rezolvă fișa de Fișă de lucru
feedback-ului în formatul cerut; și evaluarea performanței se aplicații propusă în Problematizarea
propune spre rezolvare aplicația clasă
conținute în Fișa de aplicații nr.3 Brainstormingul

Concluzii:
-Se vor face aprecieri individuale și colective asupra activității desfășurate

6
Tabel nr.1
Întrebare
1.Care este principalul tip de document specific
serviciului WWW ?
a) Document HTML(.html)
c) Document Microsoft Office Word(.docx)
d) Adobe Portable Document Format (.pdf)
c) Text Document(.txt)
2.Care este semnificația HTML?
3.Care dintre aceste browsere este cel mai bun?
a)Microsoft Internet Explorer
b) Mozilla Firefox
c) Google Chrome
d )Apple Safari
e) Opera
4.Prin ce se caracterizează o etichetă HTML
(marcator sau tag)?
5.Care este structura unui document HTML?
6. Care sunt etichetele HTML specifice formatării
textului la nivel de bloc (block-level)?
7. Ce afișează următoarea secvență?
<p> Esenţa matematicii este </p> libertatea ei
Oservație: Evaluarea în etapa de reactualizare se realizează frontal.
7
Răspuns așteptat
Răspuns: a)
Toate celelalte fișiere pot exista pe Web, se pot realiza legături către ele, însă
documentul HTML este baza pentru tot ceea ce există pe Web.
HTML este acronimul corespunzător HyperText Markup Language, limbaj de marcare
utilizat de serviciul World Wide Web(WWW, Web) pentru crearea hipertext-elor(a
paginilor web) ce pot fi afișate într-un browser sau program de navigare.
-Consultarea informațiilor organizate sub formă de hipertexte se realizează cu ajutorul
unui program special denumit browser.
Nici unul nu este cel mai bun. Toate aceste browsere sunt diferite - nici unul nu este
perfect. Dacă ai o preferință pentru unul dintre aceste browsere nu înseamnă că și
ceilalți utilizatori sunt de acord. Poți să încerci ce browser vrei tu.
Eticheta reprezintă sintaxa folosită pentru a delimita începutul și sfârșitul unui element
HTML, <tag>…</tag>. Atributele unui element reprezintă perechi de forma
nume=valoare scrise în eticheta de început a unui element, imediat după numele
acestuia.
Un document HTML este delimitat de perechea de etichete <html>…</html> și este
constituit din: antetul documentului delimitat de perechea de etichete <head>…</head>
unde sunt descrise informații despre pagina respectivă și corpul documentului delimitat
de etichetele <body>…</body> în care se găsește conținutul efectiv al paginii web.
(2p)
-pentru formatarea paragrafelor <p>… </p>
-pentru utilizarea paragrafelor titlu <h1>..</h1>,…,<h6>…</h6>
-pentru gruparea elementelor la nivel de bloc <div>..</div>
Esenţa matematicii este
libertatea ei.
  Comunicarea noilor cunoștințe
Elementele de bloc(block-level)- titlurile, paragrafele, listele sau tabelele-sunt structuri mari care conțin alte blocuri,
elemente de linie sau de text.
Elementele de linie sau elementele de text (text-level sau inline)- hiperlegăturile, citatele sau imaginile –sunt
structuri mici ce reprezintă sau descriu secvențe de text sau de date.

 Trecere la linie nouă-Inline vs. Block

Caracterele albe(whitespaces) sunt practic ignorate de browser-ul care afișează o pagină Web, de aceea avem nevoie
de etichete speciale pentru a trece la o linie nouă. Cea mai folosită astfel de etichetă este <br>(break) care nu face
altceva decât să informeze browser-ul că textul care urmează va fi afișat pe o linie nouă. Eticheta <br> va genera un
marcaj de sfârșit de linie (caracterele ASCII Carriage Return / Line Feed). Această etichetă nu are closing-tag.
Deci, eticheta <br> se folosește dacă dorim trecerea la linie nouă, fără a începe un alt paragraf.
Eticheta <p> are ca efect tratarea textului care urmează după ea ca un paragraf nou.
Singura diferență reală dintre <p> și <br> este că <p> afișează o linie vidă, menită să separe paragrafele.
Tag-ul <br> face parte din categoria elemente goale(empty tags). Aceste elemente nu necesită tag de sfârșit.

Exemplu:

Cod HTML Efect

Ce nu poţi explica simplu <br> nu înţelegi suficient. Ce nu poţi explica simplu
nu înţelegi suficient.
Ce nu poţi explica simplu <br> nu înţelegi <br> suficient. Ce nu poţi explica simplu
nu înţelegi
suficient.

8
 Pentru evidențierea textului se folosesc efectele de formatare specifice editoarelor de text.

 Elemente generale. Etichete HTML de formatare a unui text

Tag Descriere
<b>…</b> Definește text îngroșat
<i>…</i> Definește text înclinat
<big>…</big>- a fost șters din HTML 5 Definește text mărit
<small>…</small> Definește text micșorat
<strong>…</strong> Definește text puternic evidențiat
<em>…</em> Definește text evidențiat
^… Definește text superscript
_…. Definește text subscript
<del>…</del> Definește text șters
<ins>…</ins> Definește text inserat
<mark>- a apărut în HTML 5 Definește un text marcat

<strong>…</strong>
Provine de la strong emphasis-subliniere, evidențiere puternică.Convențional se dispune textul îngroșat.
<em>…</em>
Provine de la emphasis-subliniere, evidențiere. Convențional se dispune textul înclinat.
<del>…</del>
Text șters; textul apare tăiat cu o linie (strikethrough):Text șters
<ins>…</ins>
Text inserat se folosește de obicei pentru a marca înlocuirea textului șters.Textul este afișat subliniat:Text inserat

9
  Etichete HTML pentru afișarea codului

Aceste elemente sunt folositoare pentru documentarea dezvoltării codului sursă și se referă la:

Tag Descriere
<code>…</code> Definește codul sursă
<samp>…<samp> Definește rezultatul execuției codului.
<tt>…</tt>-a fost șters din HTML 5 Definește text de tip “telex”
<var>…</var> Definește o variabilă
<kbd>…</kbd> Definește un text introdus de la tastatură

Etichetele <code>…</code>, <samp>…<samp>, <tt>…</tt>, <kbd>…</kbd> au ca efect schimbarea fontului pentru

textul respectiv la Courier New, cu observația că <samp>…<samp> mărește textul față de celelalte etichete. Același
efect de mărire al textului îl are și eticheta <var>…</var> care afișează textul înclinat.

 Imbricarea elementelor
Elementele HTML se pot imbrica. Imbricarea elementelor reprezintă încadrarea unor marcatori în interiorul altor
marcatori, fără să afecteze integritatea HTML. Codul HTML este considerat valid dacă acești marcatori sunt închiși în
ordinea inversă în care au fost deschiși.

Exemplu:

Cod HTML Efect

Tocmai învăț să <b> scriu un cod </b> HTML Tocmai învăț să scriu un cod HTML

Tocmai învăț să <em> scriu </em> un <b> cod </b> HTML Tocmai învăț scriu un cod HTML

Tocmai învăț să <em> scriu un <b> cod </b> HTML</em> Tocmai învăț să scriu un cod HTML.

10
Tabel nr.2- pentru evaluarea performanței (5p)
ÎTEM
Accesează pagina web http://www.w3schools.com
-secțiunea HTML Paragraphs- HTML Line Breaks
Urmărește exemplul afișat în fereastra Try it yourself>>
Editează un exemplu asemănător. Accesează Edit and Click Me>>
Urmărește rezultatul.
Scrieți secvența de cod HTML necesară afișării următorului text pe 3
linii, folosind eticheta <p>.
Cel mai uşor tip de relaţie este cel cu zeci de mii de oameni.
Cel mai greu este cu unul singur.
Joan Baez
Scrieți secvența de cod HTML necesară afișării următorului text pe 3
linii folosind eticheta <br> . Ce observați?
Cel mai uşor tip de relaţie este cel cu zeci de mii de oameni.
Cel mai greu este cu unul singur.
Joan Baez
Accesează pagina web http://www.w3schools.com
-secțiunea HTML Formating - HTML Text Formating Tag.
Selectează etichetele învățate.
Urmărește exemplele afișate în fereastra Try it yourself>>
Editează un exemplu asemănător. Accesează Edit and Click Me>>
Urmărește rezultatul.
Accesează pagina web http://www.w3schools.com
11
Răspuns așteptat
Acesta este un <br> para <br> graf cu întreruperi de linie
(1p)
<p>Cel mai uşor tip de relaţie este cel cu zeci de mii de oameni.</p>
<p>Cel mai greu este cu unul singur.</p>
<p>Joan Baez<p>
(1p)
Cel mai uşor tip de relaţie este cel cu zeci de mii de oameni. <br>
Cel mai greu este cu unul singur.<br>
Joan Baez<br>
Este nevoie de trei etichete <br>. Nu sunt inserate linii vide.
(1p)
<b> Acest text este îngroșat </b> <br>
<i> Acest text este inclinat </i> <br>
<big> Acest text este mărit </big> <br>
<strong> Acest text este evidentiat </strong> <br>
<small> Acest text este micsorat </small> <br>
<em> Acest text este evidențiat </em> <br>
Acest text contine _subscript <br>
Acest text contine ^superscript<br>
Acest text este <del> sters </del> <br>
Acest text este <del> marcat </del>
(1p)
<code> O parte din cod sursa</code> <br>
 -secțiunea HTML Formating - HTML "Computer Output" <samp> Rezultatele executiei codului </samp><br>
Tags <tt> Un text de tip teletex </samp><br>
Selectează etichetele învățate. <var> O variabila</var><br>
Urmărește exemplele afișate în fereastra Try it yourself>> <kbd> Text introdus de la tastatura</kbd><br>
Editează un exemplu asemănător. Accesează Edit and Click Me>>
Urmărește rezultatul. (1p)

Tabel nr.3-pentru asigurarea feedback-ului și evaluarea performanței (5p)

Realizați folosind limbajul HTML următoarea pagină WEB:

<html>
<head>
<title>O pagina web</title>
</head>
<body>
<h2>Incalzirea globala</h2>

12
<p> Incalzirea globala este fenomenul de <b>crestere continua</b> a temperaturilor medii inregistrate ale atmosferei <em> in imediata apropiere
a solului</em>, precum si a <b>apei <em>oceanelor</em></b> ,constatata in ultimile doua secole, dar mai ales in ultimile doua decenii.</p>
<p>Temperatura medie in <del>pe</del> <ins>apropierea</ins> suprafetei Pamantului a crescut in ultimul secol cu
<b>0,74+_0,18^o</b>.</p>
</body>
</html>

13