„RELAȚII METRICE ÎN TRIUNGHIUL DREPTUNGHIC” (PAGINĂ WEB) COORDONATOR: PROF. DR. TRANDAFIR ROMICĂ ABSOLVENT: TOADER VIOLETA MARIA – 2018 – Cuprins… [311627]

UNIVERSITATEA TEHNICĂ DE CONSTRUCȚII BUCUREȘTI

DEPARTAMENTUL DE PREGĂTIRE A PERSONALULUI DIDACTIC

SPECIALIZAREA: INFORMATICĂ

LUCRARE DE DISERTAȚIE

COORDONATOR:

PROF. DR. TRANDAFIR ROMICĂ

ABSOLVENT: [anonimizat] 2018 –

UNIVERSITATEA TEHNICĂ DE CONSTRUCȚII BUCUREȘTI

DEPARTAMENTUL DE PREGĂTIRE A PERSONALULUI DIDACTIC

SPECIALIZAREA: INFORMATICĂ

LUCRARE DE DISERTAȚIE

„RELAȚII METRICE ÎN TRIUNGHIUL DREPTUNGHIC”

(PAGINĂ WEB)

COORDONATOR:

PROF. DR. TRANDAFIR ROMICĂ

ABSOLVENT: [anonimizat] 2018 –

Cuprins

Motivația

Motto:

„Informatica restabilește nu numai unitatea matematicilor pure și a celor aplicate, a tehnicii concrete și a [anonimizat] a [anonimizat], [anonimizat]….”

[anonimizat] o mai mare receptivitate din partea elevilor. Conexiunea la Internet oferă o [anonimizat], cât și de către profesori. Învățarea devine eficientă în momentul în care atenția elevilor este sporită.

[anonimizat], [anonimizat]. Astfel, o [anonimizat], poate acapara elevilor foarte ușor atenția. [anonimizat], ei pot fi foarte ușor distrași de jocuri online sau de alte programe.

[anonimizat], [anonimizat].

[anonimizat], mă ajută la partea de transmitere și fixare a [anonimizat]. Acestea conțin o sinteză a noțiunilor predate precum și probleme rezolvate. Fiecare teoremă demonstrată sau problemă rezolvată este însoțită de imagini sugestive.

[anonimizat], [anonimizat]. [anonimizat] a-și face o evaluare a stadiului cunoștințelor dobândite. Rezultatele la test sunt furnizate instantaneu și sunt însoțite de mesaje de apreciere sau de recomandari.

[anonimizat], faptul că am reușit să îmi transpun ideile personale creând o astfel de aplicație care să combine partea teoretică a [anonimizat]. Consider că acesta este doar un început.

Dicționar

Partea I – Suportul teoretic

Capitolul I – Noțiuni introductive despre HTML

În lume există milioane de calculatoare în care sunt stocate cantități uriașe de informații. Pentru a [anonimizat], formând rețele de calculatoare. [anonimizat]-rețele. O rețea de rețele se numește internet („net” provine din limba engleză și înseamnă „rețea”). [anonimizat] (rețea de rețele de calculatoare cu acces public) este rețeaua Internet.

„Există mai multe metode de acces (servicii) la informația stocată pe un calculator prin intermediul rețelei Internet:

FTP (File Transfer Protocol) – este serviciul pentru transferul fișierelor;

Telnet- este serviciul pentru accesul de la distanță la resursele unui calculator;

Electronic Mail- este serviciul de mesagerie electronică;

News- este serviciul de știri;

World Wide Web – este o altă metodă (serviciu) de acces la informația stocată pe un calculator aflat oriunde în lume.” (Gugoiu, 2001)

„World Wide Web (sau simplu Web) reprezintă ansamblul documentelor de natură hypertext distribuite fie pe Internet, fie în rețelele locale. Aceste documente distribuite pe Web (numite și pagini web) sunt scrise în limbajul HTML.” (Onea, 2010)

World Wide Web-ul utilizează tehnologia client-server, care constă în:

1. Un calculator (clientul) formulează o cerere.

2. Cererea este expediată unui server.

3. Cererea parcurge un mediu până la server.

4. Serverul analizează cererea, o execută, formulează răspunsul și îl expediază clientului.

5. Răspunsul parcurge mediul înapoi către client.

6. Clientul recepționează răspunsul la cererea solicitată.

Un utilizator al serviciului WWW poate solicita vizualizarea prin intermediul browser-ului a unei pagini Web care poate fi localizată pe un calculator aflat oriunde în lume.

Browser-ul reprezintă acea aplicație folosită de către un utilizator pentru vizualizarea informațiilor din rețeaua Internet. El este un program de tip client.

O pagină Web este unic determinată prin adresa URL asociată. Uniform Resource Locator (URL) înseamnă Identificator Universal al Resurselor în Internet. Adresa URL a paginii curente vizualizate de browser apare în fereastra Address.

Un URL precizează: metoda de acces la pagină, calculatorul pe care se află și numele paginii.

Figura 1.1. – Principiul tehnologiei client-server

(http://www.scrigroup.com/calculatoare/Internetul-Comunicarea-client-34376.php)

Paginile Web au următoarele caracteristici:

sunt multimedia, adică ele conțin informații sub formă de text, imagini, sunete, filme etc;

sunt independente de platforma hardware și software, adică se văd la fel pe orice calculator, având instalat orice sistem de operare și utilizând orice browser;

sunt interactive, adică răspund la cererile utilizatorului.

Hypertextul este un conținut (text și imagine) interconectat într-o manieră complexă, nesecvențială de asociații, în care utilizatorul poate naviga, căuta informații referitoare la un obiect.

Hypermedia este o noțiune care implică prezența unor elemente care nu sunt de tip text, cum ar fi animații, secvențe sonore sau secvențe video.

Browser-ul este o aplicație (client) care permite unui utilizator să vizualizeze documente HTML de pe Web, să navigheze urmărind legăturile dintre ele și să transfere fișiere. Aceste aplicații afișează atât textul cât și grafica din aceste documente, redau fișierele audio și video înglobate în documente. Cele mai cunoscute browser-e sunt Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, etc. Browser-ele nu sunt identice ca mod de tratare a paginilor web.

„HTML (HyperText Markup Language) este un limbaj de marcare (formatare, aranjare) a documentelor cu conținut hypertext (hypermedia), adică a paginilor web. El utilizează etichete pentru a marca textul și grafica dintr-o pagină web, indicând astfel browser-ului cum să afișeze pagina web și cum să răspundă la acțiunile utilizatorului. Fișierele HTML sunt fișiere ASCII cu extensia .HTM sau .HTML.” (Onea, 2010)

Documentele HTML sunt formate din succesiuni de blocuri informative, care pot fi incluse unul în altul. Un bloc este delimitat de simboluri speciale, numite tag-uri (etichete).

Etichetele HTML sunt elementele cu care sunt marcate blocurile de informație. Fiecare etichetă este încadrată de semnele mai mic, la stânga, și mai mare, la dreapta.

Majoritatea etichetelor au o etichetă corespunzătoare de sfârșit, cu aceeași structură, singura deosebire fiind că după semnul mai mic urmează caracterul " / ".

(exemplu: eticheta <html> are ca etichetă de sfârșit pe </html>).

O mulțime organizată de pagini web, de obicei cu aceeași tematică, formează un site web.

Capitolul II – Structura generală a unui site Web

2.1. Proiectarea unui site Web

Site–ul Web cuprinde un ansamblu de pagini referitoare la aspectele specifice unui anumit domeniu, precum filele unei cărți. Unificarea elementelor componente ale site-ului este realizată cu ajutorul hyper legăturilor sau a legăturilor (link-uri). Legatura oferă posibilitatea de a adresa orice pagină din site-ul respectiv sau orice altă pagină sau site Web. Acest lucru se realizează prin intermediul tehnologiei URL.

Pagina de start (home page), este prima pagină care se afișează atunci când un utilizator accesează site-ul Web și constituie punctul de plecare pentru toate paginile site-ului. Pagina de start trebuie să ofere o serie de informații despre conținutul și structura site-ului. Ea trebuie să includă legături către principalele secțiuni ale site-ului sau, dacă acesta include un număr mic de pagini Web, direct către ele.

Modul în care sunt realizate legăturile între paginile site-ului trebuie stabilit înainte de construirea lui propriu-zisă.

Conform cu Cojocaru, 2003, structura unui site poate fi:

structură în stea – este aplicabilă acelor site-uri formate dintr-un număr mic de pagini. Prin intermediul hyperlegăturilor se corelează pagina de bază cu celelalte pagini și vice-versa;

structura liniară – este mai puțin folosită și presupune existența unor hyperlegături care facilitează trecerea succesivă dintr-o pagină în alta. De asemenea, fiecare pagină conține un hyperlink către pagina principală;

structura ierarhică (arborescentă) – este aplicabilă site-urilor ceva mai complexe si presupune existența unei ierarhii in cadrul paginilor site-ului. Primul nivel al ierarhiei conține doar pagina de start. Nivelul al doilea este format din acele pagini corelate direct prin hyperlegături cu pagina de start și vice-versa. Nivelul al treilea este format din paginile corelate direct cu paginile de pe nivelul al doilea si vice-versa, etc.

structura ierarhică de tip compozit – este aplicabilă site-urilor complexe, formate dintr-un număr mare de pagini. În cadrul acestei structuri pagina de start este cea mai importantă, însă, celelalte pagini nu mai sunt corelate strict ierarhic. Această structură are aspectul unei încrengături de legături între paginile care formează site-ul.

Figura 2.1. – Structură în stea (Cojocaru, 2003)

Figura 2.2. – Structură liniară (Cojocaru, 2003)

Figura 2.3. – Structură ierarhică (arborescentă) (Cojocaru, 2003)

Figura 2.4. – Structură ierarhică de tip compozit (Cojocaru, 2003)

În proiectarea unui site, elementele structurale trebuie fixate cu precizie de la început. Această proiectare trebuie sa conțină următoarele etape:

Definirea scopului site-ului. El va determina aspectul și modul de organizare a informației în site.

Inventarierea informațiilor care vor apărea în site. Aceste informații se vor grupa în paginile site-ului.

Stabilirea structurii generale a site-ului. Aceasta depinde de volumul informației. Se optează pentru un anumit tip de structură sau pentru o combinație de mai multe structuri.

Stabilirea conținutului paginii de start. Se stabilesc informațiile ce vor fi afișate în pagina de start, precum și link-urile ce vor figura în ea, adică ce pagini vor fi accesibile direct prin pagina de start.

2.2. Elementele standard ale unui document HTML

Crearea unui document HTML (pagină Web) presupune parcurgerea următorilor pași:

editarea fișierului HTML cu ajutorul unui editor de texte (simplu sau dedicat).

salvarea fișierului editat folosind extensia ".html"

vizualizarea paginii cu ajutorul unui browser.

Orice pagină Web constă dintr-un bloc <html>…</html>, care include alte două subblocuri: <head>…</head> și <body>…</body>.

Blocul <body>…</body>cuprinde conținutul propriu-zis al paginii Web, adică ceea ce va fi afișat în fereastra browser-ului.

O etichetă poate fi scrisă atât cu litere mari, cât și cu litere mici. Caracterele „spațiu” și „tab”ce apar între etichete sunt ignorate de către browser.

Astfel, structura generală a unei pagini Web trebuie să conțină minim următoarele etichete:

<html>

<head>…</head>

<body>…</body>

</html>

Acțiunea unor anumite etichete poate fi particularizată prin intermediul unor atribute. Aceste atribute apar în interiorul parantezelor ce delimitează eticheta după sintaxa:

<etichetă atribut = valoare>.

O etichetă poate avea mai multe atribute. De exemplu, o etichetă cu trei atribute arată astfel:

<etichetă atribut_1 = valoare_1 atribut_2 = valoare_2 atribut_3 = valoare_3>.

Fiecare pagină Web poate avea un titlu, acesta nefiind obligatoriu. El se adaugă cu ajutorul etichetei <title>…</title>, inserată în blocul <head>…</head>.

Conținutul blocului <title>…</title> va apărea în bara de titlu a ferestrei browser-ului, iar dacă acesta lipsește, atunci în bara de titlu a ferestrei browser-ului va apărea numele fișierului.

Exemplul 2.1. :

<head>

<title>Relatii metrice in triunghiul dreptunghic</title>

</head>

Trecerea pe o linie nouă se face cu o comandă explicită, care trebuie să apară în pagina Web. Această comandă este eticheta <br> („line break” – întrerupere de linie).

Pentru ca browser-ul să intrepreteze corect caracterele „spațiu” și „tab” ce apar în cadrul unui text, se folosește preformatarea blocului de text. Astfel, acest text trebuie inclus într-un bloc <pre> … </pre>.

Exemplul 2.2. :

<pre>

COORDONATOR: ABSOLVENT:

PROF. DR. TRANDAFIR ROMICA TOADER VIOLETA MARIA

</pre>

Odată creat fișierul HTML (fișierul sursă), un browser îl încarcă, interpretează marcajele conținute în document, iar rezultatul este afișat în fereastra browser-ului respectiv. Acest rezultat al interpretării se numește pagină Web.

Capitolul III – Formatarea documentelor HTML

Culoarea de fond

Culoarea de fond a unei pagini Web se precizează prin intermediul atributului bgcolor aplicat etichetei <body>.

Exemplul 3.1. :

<html>

<head>…</head>

<body bgcolor="blue"> …</body>

</html>

O culoare poate fi precizată în două moduri:

printr-un nume de culoare. Sunt disponibile cel puțin următoarele 16 nume de culori: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white și yellow.

prin construcția „#rrggbb” unde r, g sau b sunt cifre hexazecimale și pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f sau F; se pot defini astfel 65.536 de culori. S-a folosit aici modelul de culoare RGB (Red, Green, Blue). Conform acestui model, o culoare se obține din amestecul a trei culori fundamentale: roșu, verde și albastru.

Culoarea textului

Definirea culorii textului se face prin intermediul atributului text aplicat etichetei <body>, după sintaxa:

<body text = "culoare">,

unde culoare se precizează ca la culoarea de fond.

Stabilirea caracteristicilor textului de bază

Textul afișat este caracterizat de următoarele atribute: mărime (size), culoare (color) și font (face). Toate aceste atribute sunt aplicate etichetei <font>. Sintaxa utilizată este:

<font size = număr color = culoare face = font>

unde:

număr poate fi 1, 2, 3,4,5,6 sau 7; (1 pentru fontul cel mai mic și 7 pentru fontul cel mai mare);

culoare este o culoare precizată prin nume sau printr-o construcție RGB;

font poate fi un font generic ca „serif”, „sans serif”, sau un font specific instalat pe calculatorul clientului, ca „Times New Roman”, „Comic Sans MS” sau „Arial”.

Dacă eticheta <font> lipsește, atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul utilizat. Atributele prestabilite sunt: size = 3, color = „black” și face = „Times New Roman”.

Exemplul 3.2. :

<font color=”white” face=”arial black” size=”6”>RELATII METRICE IN TRIUNGHIUL DREPTUNGHIC (PAGINA WEB)</font>

Stabilirea marginilor paginii Web

Poziționarea conținutului paginii Web față de marginile ferestrei browserului se poate face cu ajutorul a două atribute ale etichetei <body>:

leftmargin (stabilește distanța dintre marginea din stânga a ferestrei browserului și marginea din stânga a conținutului paginii);

topmargin (stabilește distanța dintre marginea de sus a ferestrei browserului și marginea de sus a conținutului paginii).

Ambele atribute pot primii următoarele valori:

un număr întreg pozitiv reprezentând o distanță măsurată în pixeli;

un procent din lățimea, respectiv înălțimea ferestrei browserului.

Blocuri de text

Toate etichetele referitoare la blocurile de text realizează în mod automat trecerea la un rând nou și adăugarea unui spațiu suplimentar. Aceste etichete nu se referă la particularitățile caracterelor ce compun textul, ci la funcțiile pe care le poate avea un bloc de text în cadrul paginii Web.

inserarera unei adrese: se realizează cu eticheta <address>…</address>. Browserele afișează textul adresei cu caractere cursive.

Exemplul 3.3. :

<html>

<head>

<address>

Universitatea Tehnica de Constructii Bucuresti<br>

Bulevardul Lacul Tei 124, București <br>

Telefon: 021.242.1208<br>

</address>

</head>

<body></body>

</html>

Blocuri diviziune: modalitatea cea mai eficientă de delimitare și de formatare a unui bloc de text este folosirea delimitatorilor <div> și </div>. Un atribut foarte util pentru stabilirea caracteristicilor unui bloc diviziune este align (aliniere). Valorile posibile ale acestui atribut sunt: „left” (aliniere la stânga), „center” (aliniere centrală); „right” (aliniere la dreapta).

Blocuri paragraf: paragraful se inserează prin intermediul <p>…</p>. Această etichetă permite inserarea unui spațiu suplimentar înainte de blocul paragraph precum și a unui spațiu suplimentar după blocul paragraf, dacă se folosește delimitatorul </p> (acesta fiind opțional), precum și alinierea textului cu ajutorul atributului align, având valorile posibile „left” (aliniere la stânga), „center” (aliniere centrală); „right” (aliniere la dreapta).

Blocuri de titlu: într-un text sunt necesare titluri (headers) de capitole (paragrafe) de diferite dimensiuni. Acestea pot fi introduse cu ajutorul etichetelor <h1>, <h2>, <h3>, <h4>, <h5> și <h6>. Toate aceste etichete se referă la un bloc de text și trebuie însoțite de o etichetă de încheiere similară. Etichetele acceptă atributul align pentru alinierea titlului blocului de text la stânga, în centru și la dreapta. Eticheta <h1>…</h1> permite scrierea unui titlu cu caracterele cele mai mari și aldine, pe când <h6>…</h6> folosește caracterele cele mai mici. De asemenea, browserele introduc un spațiu suplimentar înainte de a afișa un titlu.

Exemplul 3.3. :

<html>

<head></head>

<body>

<h1>Teorema inaltimii</h1>

<h2>Suport teoretic</h2>

<h2>Test de evaluare</h2>

</body>

</html>

Stiluri pentru blocurile de text

caractere aldine:blocul de text trebuie să fie inclus între delimitatorii <b> și </b> (b vine de la „bold” = îndrăzneț);

caractere cursive: blocul de text trebuie să fie inclus într-un bloc delimitat de etichetele <i> și </i> (i vine de la „italic”);

caractere „indice” și „exponent”:pentru a insera secvențe de text aliniate ca indice (sub-script) sau ca exponent (super-script), aceste fragmente trebuie delimitate de etichetele _…, respectiv ^…;

caractere subliniate si caractere sectionate:pentru a insera secvențe de text subliniate sau secționate, aceste fragmente trebuie delimitate de etichetele <u>… </u>, respectiv <strike> … </strike> sau <s> … </s>. Secționarea caracterelor se realizează cu o linie orizontală la mijloc.

Exemplul 3.4. :

<html>

<head>

<title>Relatii metrice in triunghiul dreptunghic</title>

</head>

<body bgcolor="blue">

<font color="white" face="arial" size="5">

<B>DEPARTAMENTUL DE PREGATIRE A PERSONALULUI DIDACTIC</b><br>

SPECIALIZAREA: <I>INFORMATICA</I><br>

<U>LUCRARE DE DIZERTATIE</U><br>

<S>RELATII METRICE IN TRIUNGHIUL DREPTUNGHIC (PAGINA WEB)</S>

</body>

</html>

Capitolul IV – Elemente specifice limbajului HTML

4.1. Utilizarea imaginilor

Paginile Web permit inserarea diferitelor imagini, de la embleme până la fotografii. Imaginile plasate apar automat atunci când vizitatorul deschide pagina, cu condiția ca browserul să fie configurat pentru a le afișa. Cele mai utilizate tipuri de imagini sunt GIF, JPEG sau PNG.

Inserarea unei imagini se realizează cu ajutorul etichetei <img>. Eticheta <img> trebuie să fie întotdeauna însoțită de atributul src, acesta indicând locația pe server a fișierului imaginii.

Exemplul 4.1. :

<img src="img/Pitagora.jpg">

Pentru ca imaginea să fie plasată în propriul său rând se poate adăuga eticheta <p> sau <br> înainte. Prin intermediul atributului border se adaugă un chenar în jurul imaginii (border=„n”, unde n reprezintă grosimea chenarului exprimată în pixeli).

În cazul în care imaginea nu apare, dintr-un motiv oarecare, se poate adăuga un text descriptiv, care va apărea în locul acestei. Pentru aceasta se folosește atributul alt aplicat etichetei<img>, el primind ca valoare un text ce va fi afișat (alt=„text”).

Exemplul 4.2. :

<img src="img/Pitagora.jpg" alt="Teorema lui Pitagora">

Pentru a specifica dimensiunea imaginii, în vederea unei vizualizări mai rapide se folosesc atributele width și height, ambele aplicate etichetei <img>. Cele două atribute primesc ca valori numere naturale (pixeli) sau procente.

Exemplul 4.3. :

<img src="img/Pitagora.jpg" alt="Teorema lui Pitagora" width=300 height =250>

Nu este neapărat necesar ca atributele width și height să reflecte dimensiunile reale ale imaginii. De asemenea, se poate preciza doar una dintre dimensiuni, în acest caz browserul modifică în mod proportional cealaltă dimensiune.

Exemplul 4.4. :

<img src="img/Pitagora.jpg" title="Teorema lui Pitagora" width=270>

Utilizarea atributului align realizează alinierea imaginilor împreună cu textul. Imaginile pot fi aliniate în diverse moduri în cadrul unui rând din paragraf. În cazul mai multor imagini pe același rând, opțiunile diferite pentru atributul align au efecte diverse, în funcție de imaginea care este mai înaltă și cea care apare prima.

Atributul align se aplică etichetei <img> și primește ca valoare una din valorile: texttop, top, middle, absmiddle, bottom sau absbotton.

Exemplul 4.5. :

<img src="img/Pitagora.jpg" align=top>

4.2. Crearea legăturilor

Legăturile reprezintă o caracteristică a rețelei World Wide Web. În cadrul unei pagini Web pot exista porțiuni de text sau imagini care, la executarea unui clic pe ele, permit încărcarea altor pagini, a unor imagini, apelarea unui film sau descărcarea de fișiere prin protocolul FTP.

Conform lui Castro, 2003, orice hyperlegătură este formată din trei părți:

destinația – precizează ce se întâmplă cand utilizatorul dă clic pe legătura respectivă. Se poate face legătura către o imagine, un fișier media sau de altă natură, o altă pagină Web, etc. destinațiile sunt definite printr-o adresă URL.

eticheta – este partea vizibilă, pe care utilizatorul dă clic pentru a ajunge la destinație. Eticheta poate fi de tip text sau imagine.

ținta – are rolul de a determina locul unde va fi afișată pagina de destinație. Ea poate fi un cadru sau o fereastră separată.

Crearea unei legături la o altă pagină Web

Într-un site care conține mai multe pagini Web, este necesară crearea legăturilor de la o pagină la următoarea (și, din nou, înapoi). De asemenea, se pot crea legături către pagini Web concepute de alte persoane, aflate pe alte servere.

Crearea unei legături către o altă pagină Web se folosește eticheta <a>…</a>, întotdeauna însoțită de atributul href (provine de la hypertext reference, adică referință la hipertext). Acest atribut va primi ca valoare adresa URL a paginii Web de destinație. Blocul de text delimitat de etichetele <a>…</a> reprezintă textul etichetei, care este evidențiat (de obicei, apare albastru și subliniat) și care, atunci când se dă clic pe el, va încărca pagina indicată prin atributul href.

Exemplul 4.6.  de legătură la o pagină din alt site:

<a href="http://www.utcb.ro/utcb">UNIVERSITATEA TEHNICA DE CONSTRUCTII BUCURESTI</a>

În cazul legăturii către o pagina Web situată în același director cu pagina care conține legătura respective se poate omite calea, precizându-se doar numele paginii respective.

Exemplul 4.7.  de legătură la o pagină din același director:

<a href="Lectii.html" >Lectii</a>

Crearea unei legături către o ancoră

În general, un clic pe o legătură duce vizitatorul în partea superioară a paginii Web corespunzătoare. Dacă se dorește ca utilizatorul să ajungă la o anumită secțiune din pagina, atunci este necesară crearea unei ancore și apoi introducerea acesteia în legătură.

Pentru crearea unei ancore se parcurg etapele:

se fixează cursorul în locul din pagina Web la care se dorește să se facă saltul.

se utilizează eticheta <a name="nume_ancora">, unde nume_ancora este textul utilizat pentru identificarea acelei secțiuni din pagina Web.

Exemplul 4.8. de ancoră

<a name="ancora1">Teorema catetei (Test)</a>

După crearea ancorei, se definește legătura astfel încât clicul unui utilizator îl va duce direct la sectiunea din document care conține ancora, și nu în partea superioară a acelui document, folosind sintaxa:

<a href="#nume ancora">Text etichetă</a>

Exemplul 4.9.  de legătură către ancoră

<a href="#ancora1">Reia testul</a>

4.3. Crearea listelor

Se pot crea liste simple, cu marcaje sau numerotate. De asemenea, se pot imbrica un tip de listă în altul.

Conform lui Castro, 2003, o listă prezintă două caracteristici principale:

tipul listei, precizat prin etichetele <ol> (pentru listă ordonată) sau <dl> (pentru listă de definiții);

elementele listei, enumerate prin etichetele <li> (pentru articol din listă) sau <dt> (pentru termen de definiție).

Crearea listelor ordonate

Listele ordonate se pot crea oriunde în secțiunea <body> a documentului HTML. Ele se realizează cu ajutorul etichetei <ol>…<ol>. Fiecare element al listei se inserează cu eticheta <li> (primele două litere din cuvântul list), urmată de textul care va fi inclus în element.

Dacă nu se specifică, elementele din listele ordonate vor fi numerotate cu cifre arabe (1, 2, 3 etc.).

Se poate crea o listă în interiorul alteia, chiar amestecând și potrivind liste ordonate și neordonate. Trebuie doar să fie imbricate corespunzător fiecare listă, folosind toate etichetele de deschidere și de închidere dorite.

Listele sunt automat indentate față de marginea din stânga (40 de pixeli este indentarea tipică pentru dimensiunea textului de 16 pixeli).

Alegerea tipului de numerotare

Când se creează o listă ordonată se poate selecta și tipul de numerotare care va apărea în stânga fiecărui elemental listei.

Pentru a alege tipul de numerotare se utilizează atributul type aplicat etichetei <ol> pentru a specifica stilul de numerotare pentru întreaga listă sau etichetelor <li> individuale, respectiv pentru elementele individuale din listă. Atributul type din cadrul unei etichete <li> îl anulează pe cel din cadrul etichetei <ol>. Atributul type poate primi una din următoarele valori: 1, a, A, I, i.

Alegerea valorii de incepere

Se poate stabili valoarea de pornire a numerotării listei (poate fi și o altă valoare decât 1 (valoarea implicită ).

Pentru a stabili valoarea inițială a schemei de numerotare a întregii liste se folosește atributul start aplicat etichetei <ol> (start="n", unde n reprezintă valoarea inițială din listă).

Pentru a schimba numerotarea unui anumit element din listă se folosește atributul value aplicat unei anumite etichete <li> (value="n", unde n reprezintă valoarea din enumerare corespunzătoare elementului respectiv din listă. Atributul value anulează valoarea start.

Atunci când se schimbă numărul unui anumit element din listă prin atributul value, elementele următoare din listă sunt renumerotate în consecință. Valoarea atributului start este întotdeauna numerică, indiferent de schema de numerotare.

Exemplul 4.10. :

Crearea listelor neordonate

Listele neordonate sunt, probabil, cele mai utilizate pe Web. Se pot utiliza pentru a enumera orice serie de elemente care nu au o anumită ordine. Se pot crea oriunde în secțiunea <body> a documentului HTML.

Ele se realizează cu ajutorul etichetei <ul>…<ul>. Fiecare element al listei se inserează cu eticheta <li>, urmată de textul care va fi inclus în element. Elementele din listele neordonate au implicit marcaje de forma unor discuri compacte.

La fel ca la listele ordonate, și listele neordonate se pot imbrica, indentarea făcându-se tot în mod automat.

Alegerea tipului de numerotare

Când se creează o listă neordonată se poate selecta și tipul de marcator care va apărea în stânga fiecărui elemental listei.

Pentru a alege marcajele se utilizează atributul type aplicat etichetei <ul> pentru a specifica stilul de numerotare pentru întreaga listă sau etichetelor <li> individuale, respectiv pentru elementele individuale din listă. Atributul type din cadrul unei etichete<li> îl anulează pe cel din cadrul etichetei <ul>. Atributul type poate primi una din următoarele valori: disc, circle, square.

Exemplul 4.11. :

4.4. Tabele

Tabelele sunt zone din document în care a fost inserat un control ce permite organizarea informațiilor sub formă de rânduri și coloane. Numărul de celule din fiecare rând determină forma tabelului.

Pentru a insera un tabel se folosesc etichetele <table>…</table>. Fiecare rând al tabelului se inserează cu ajutorului etichetelor <tr>…</tr>, în timp ce fiecare celulă a rândului se inserează cu etichetele <td>…</td>. Conținutul fiecărei celule are următoarea sintaxă:

<td> conținut_celulă </td>

Eticheta </table> nu este opțională, browserele neafișând tabelele în absența acestuia. De asemenea, cu etichetele <th>…</th> (care înlocuiesc etichetele <td>…</td>) se creează un capăt de tabel (în general celulele situate în primul rând al tabelului). Aceste etichete centrează conținutul celulei și formatarea aldină a acesteia.

Adăugarea unui chenar

Chenarul ajută la diferențierea tabelului de restul paginii. Pentru a crea un chenar cu ajutorul limbajului HTML se folosește atributul border, aplicat etichetei <table>.

Acest atribut primește ca valoare un număr natural, acesta reprezentând grosimea chenarului, exprimată în pixeli. (<table border=3>). De asemenea, atributul border se poate aplica și celulelor pe care tabelul le conține. Utilizat fără nici o valoare (border="border"), se obține un chenar cu lățimea de 1 pixel.

Stabilirea lățimii celulelor sau a tabelului

Lățimea celulelor este determinată în mod automat de către browser-ul cu care este vizualizată pagina. Celulele vor fi redimensionate automat până la marginea conținutului lor sau până la marginea ferestrei, respectiv, în cazul imaginilor, marginile vor coincide (marginea imaginii cu marginea celulei). (Castro, 2003)

Lățimea unei celule sau unui tabel se stabilește folosind atributul width, aplicat etichetelor <table>sau <td>(<table width="n">, unde n reprezintă lățimea dorită pentru întregul tabel sau pentru celulă, exprimată în pixeli. De asemenea lățimea se poate exprima și în procente (<table width="n%">, unde n este procentul din fereastra browserului pe care trebuie să o ocupe tabelul.

Centrarea tabelului în pagină

Pentru a centra tabelul în pagină se utilizează atributul align, aplicat etichetei <table>.Acest atribut primește valoarea center (<table align="center">). Nu se poate alinia un tabel deasupra sau în mijlocul unui rând de text, ca în cazul imaginilor.

Alinierea conținutului celulei

Conținutul celulei este aliniat implicit după două direcții: pe orizontală – la stânga, iar pe verticală – în mijloc.

Pentru a alinia conținutul celulelor pe orizontală se folosește atributul align, aplicat etichetei corespunzătoare celulei (<td>) sau rândului (<tr>). El poate primi valorile: left, center sau right.

Pentru a alinia conținutul celulelor pe verticală se folosește atributul valign, aplicat etichetei corespunzătoare celulei (<td>) sau rândului (<tr>). El poate primi valorile: top, middle sau bottom.

Schimbarea fundalului

Culoarea de fundal a uneia sau mai multor celule se poate schimba, adăugând tabelului o mai bună claritate vizuală.

Pentru a schimba culoarea de fundal se folosește atributul bgcolor, aplicat uneia din etichetele <table>, <tr> sau <td>. Acest atribut poate primi ca valoare un nume de culoare sau o construcție RGB. Atributul bgcolor, aplicat etichetei corespunzătoare rândului (<tr>), anulează culoarea specificată tabelului, iar dacă este aplicat etichetei corespunzătoare celulei (<td>), anulează culoarea specificată randului.

Se poate folosi și o imagine de fundal, folosind atributul background. Acesta se poate aplica uneia din etichetele <table>, <tr> sau <td>și primește ca valoare adresa URL a imaginii dorite ca fundal.

Exemplul 4.12. :

4.5. Cadre

Pentru ca vizitatorii unui site sa poată vizualiza în același timp mai multe pagini în același timp, utilizatorul poate apela la „fragmentarea paginii în cadre” (Castro, 2003). Astfel, fiecare cadru va afișa o altă pagină Web, ea putând fi vizualizată și într-o fereastră proprie, separată.

Crearea unui set de cadre

Cadrele pot fi definite ca o fereastră formată din panouri individuale, în fiecare dintre ele fiind afișate informații diferite. Structura de panouri, inclusiv dimensiunile acestora, rămân la latitudinea celui care creează pagina Web respective.

Cadrele ne permit să definim în fereastra browserului subferestre (cadre) în care să fie încărcate documente HTML diferite.

Cadrele sunt definite intr-un fisier HTML special, în care blocul <body>…</body> este înlocuit de blocul <frameset>…</frameset>.

In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>. Un atribut obligatoriu al etichetei <frame> este src, care primește ca valoare adresa URL a documentului HTML care va fi încărcat în acel frame. Definirea cadrelor se face prin împărțirea ferestrelor (și a subferestrelor) în linii și coloane:

împărțirea unei ferestre într-un număr de subferestre de tip coloană se face cu ajutorul atributului cols aplicat etichetei <frameset> ce descrie acea fereastra;

împărțirea unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul atributului rows aplicat etichetei <frameset> ce descrie acea fereastra.

Valoare atributelor cols și rowseste o listă de elemente separate prin virgulă, care descriu modul în care se face împărțirea. Elementele listei pot fi:

un număr întreg de pixeli;

procente din dimensiunea ferestrei (număr între 1 și 99 terminat cu %);

n* care înseamnă n părți din spațiul rămas.

Exemplul 4.13. :

a) cols=200,*,50%,*- înseamnă o împărțire în 4 subferestre de tip coloană, dintre care prima are 200 pixeli , a treia ocupa jumatate din spatiul total disponibil, iar a doua și a patra ocupă în mod egal restul de spațiu rămas disponibil.

b) rows=200,1*,50%,2*- înseamnă o împărțire în 4 subferestre de tip linie, dintre care prima are 200 pixeli , a treia ocupă jumătate din spațiul total disponibil, iar a doua și a patra ocupă în mod egal restul de spațiu rămas disponibil, care se împarte în trei părți egale: a doua fereastră ocupă o parte, iar a patra ocupă 2 părți.

Exemplul 4.14. : împărțirea unei ferestre în 3subferestre de tip linie

<frameset rows="14%,*,12%">

<frame src="Antet.html" name="titlu"></frame>

<frame src="Centru.html" name="centru"></frame>

<frame src="Subsol.html" name="subsol"></frame>

</frameset>

Exemplul 4.15. : împărțirea unei ferestre în 2 subferestre de tip coloană

<frameset cols="18%,*">

<frame src="meniu.html"></frame>

<frame src="centru.html"></frame>

</frameset>

Pentru a crea un rând cu un anumit număr de cadre, iar un altul cu alt număr de cadre, va trebui să combinăm mai multe seturi de cadre. Acest efect se obține prin inserarea unor seturi de cadre suplimentare în rândurile respective.

Este absolut necesar să se adauge eticheta de închidere </frameset> pentru fiecare etichetă de deschidere <frameset> creată. În caz contrar, browserul nu va afișa nimic.

Nu este necesar ca fiecare rând să fie divizat în coloane. Pentru rândurile cu un singur cadru (adică, acelea care ocupă întreaga fereastră, de la stânga la dreapta) este suficient să se utilizeze eticheta <frame>. Pentru rândurile divizate în coloane, se utilizează un set de cadre interior.

Exemplul 4.16. : împărțirea unei ferestre în 3 subferestre de tip linie, a doua linie fiind împărțită in 2 subferestre de tip coloană

<frameset rows="14%,*,12%">

<frame src="Antet.html"></frame>

<frameset cols="18%,*">

<frame src="Meniu.html"></frame>

<frame src="Centru.html"></frame>

</frameset>

<frame src="Subsol.html"></frame>

</frameset>

Afișarea sau ascunderea barelor de derulare

Se poate opta pentru ca fiecare cadru individual să aibe o bară de derulare permanent, niciodată sau numai atunci când este nevoie (barele de derulare vor apărea numai dacă în cadru există mai multe informații decât pot fi afișare la un moment dat).

Dacă vizitatorul face fereastra destul de mare, atunci aceste bare de derulare vor ajunge să dispară. Pentru a afișa / ascunde permanent barele de derulare se folosește atributul scrolling, aplicat etichetei <frame> corespunzătoare ferestrei respective. Acesta va primi una din valoarile "yes" / "no".

Exemplul 4.17. :

<frame scrolling="yes"> sau <framescrolling="no">

În mod implicit barele de derulare apar doar atunci când este nevoie, adică, atunci când există mai multe informații decât pot încăpea în cadru.

Schimbarea culorii chenarului

Pentru a ajusta culoarea tuturor chenarelor din setul de cadre, se folosește atributul bordercolor, aplicat etichetei <frameset> aflată cel mai sus. El primește ca valoare un nume de culoare sau o construcție RGB.

(<frameset bordercolor="culoare">)

Pentru a schimba culoarea rândurilor, coloanelor sau cadrelor individuale se folosește același atribut, bordercolor, aplicat etichetei <frameset> sau <frame> corespunzătoare. Atributul borderceolor dintr-un cadru individual anulează același atribut dintr-un rând sau dintr-o coloană, care, la rândul lui, îl anulează pe cel definit în eticheta <frameset> aflată cel mai sus.

Exemplul 4.18. :

<frameset rows="14%,*,12%" bordercolor="red">

<frame src="Antet.html" ></frame>

<frameset cols="18%,*">

<frame src="Meniu.html"></frame>

<frame src="Centru.html"></frame>

</frameset>

<frame src="Subsol.html"></frame>

</frameset>

Ajustarea chenarului cadrului

Browserul vizitatorului va trasa chenare în jurul fiecărui cadru din setul de cadre. Atributul border permite controlarea lățimii spațiului dintre cadre. Primește ca valoare un număr natural care reprezintă lățimea dorită, exprimată în pixeli (<frameset border="n">). Atribuind valoarea 0 lui n, chenarele vor dispărea complet. Lățimea implicită a chenarului este de 5 pixeli.

Interzicerea redimensionării cadrelor de către vizitatori

Pentru a nu permite vizitatorilor să redimensioneze cadrele se folosește atributul noresize aplicat etichete<frame>corespunzătoare cadrului dorit. Acest atribut nu primește nicio valoare.

4.6. Formulare

Formularul reprezintă un ansamblu de zone active alcătuit din butoane, casete de selecție, câmpuri de editare etc.

Formularele permit construirea unor pagini Web prin care utilizatorii pot să introducă efectiv informații și să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru introducerea unui șir de caractere pe post de cheie de căutare – element caracteristic tuturor motoarelor de căutare din Web – până la o structură complexă, cu multiple secțiuni, care oferă facilități puternice de transmisie a datelor.

O sesiune cu o pagină web ce conține un formular cuprinde următoarele etape:

utilizatorul completează formularul și îl expediează unui server;

o aplicație dedicată de pe server analizează datele transmise și, eventual, le stochează într-o bază de date;

în anumite situații, serverul expediează un răspuns utilizatorului.

Un formular se creează folosind etichetele <form>…</form>.

Atribute esențiale ale elementului <form>

Există două atribute esențiale ale etichetei <form>:

action – precizează ce se întamplă cu datele din formular după ce acestea ajung la destinație. De obicei, atributul action primește ca valoare adresa URL a unui script (aflat pe un server) care primește datele formularului, iar după prelucrare expediează un răspuns către utilizator.

(<form action="URL_script">).

method – precizează metoda utilizată de browser pentru expedierea datelor formularului. El poate lua una din următoarele valori:

get (valoarea implicita) – datele din formular sunt expediate la adresa URL asociată atributului action; sunt permise cantități care nu depășesc 1 Kb;

post – datele sunt expediate separat. Sunt permise cantități mari de date (ordinul MB).

Pentru ca un formular să fie funcțional, trebuie precizat ce se va întâmpla cu el după completare și expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poșta electronică (e-mail). Pentru aceasta se folosește un atribut al etichetei <form> și anume action care primește ca valoare "mailto: " concatenat cu o adresă validă de e-mail către care se va expedia formularul completat.

(<form action="mailto: toadervioletamaria@yahoo.com" method="post">)

Elementele unui formular

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Atributul type aplicat etichetei <input> indică tipul elementului. De asemenea, asupra etichetei <input> se mai pot aplica atribute precum name (permite atașarea unui nume fiecărui element al formularului) și atributul value (permite atribuirea valorii inițiale a unui element al formularului).

buton de expediere- atributul type aplicat etichetei <input> primește valoarea "submit". Acest element poate fi denumit prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value , dacă aceasta valoare a fost stabilită.

Exemplul 4.19. :

<input type="submit" value="expedieaza">

câmp de editare-atributul type aplicat etichetei <input> primește valoarea "text". Pentru elementul de tip câmp de editare, alte două atribute pot fi utile: size (precizează lățimea câmpului de editare) și atributul maxlength (numarul maxim de caractere pe care le poate primi un câmp de editare.

Exemplul 4.20. :

Nume si prenume: <input type="text" name="nume" size="30">

butonul Reset- atributul type aplicat etichetei <input> primește valoarea "reset". La apăsarea acestui buton, toate elementele din formular primesc valorile prestabilite, chiar dacă aceste valori au fost între timp modificate. Butonul Reset poate fi denumit cu ajutorul atributului name. Pe buton apare scris "Reset" sau valoarea atributului value, dacă aceasta valoare a fost stabilită.

Exemplul 4.21. :

<input type="reset" value="Anuleaza rezultate">

camp de editare de tip "password"- atributul type aplicat etichetei <input> primeștea valoarea "password". El permite introducerea unui element asemănător cu un camp de editare obisnuit, cu deosebirea că nu afișează caracterele în clar, ci numai caractere *. La expedierea formularului însă, valoarea tastată se transmite în clar.

Exemplul 4.22. :

Tasteaza parola: <input type="password" name="parola">

butoane radio – atributul type aplicat etichetei <input> primește valoarea "radio". Ele permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. (<input type="radio" name="group1" value="corect">). La expedierea formularului se va transmite una dintre perechile de forma "group1=valoare", unde valoare poate fi, în acest caz, corect sau gresit.

Exemplul 4.23. :

1. Intr-un triunghi dreptunghic, o cateta reprezinta pentru proiectia ei pe ipotenuza si ipotenuza, media:

<input type="radio" name="group1" value="gresit">aritmetica<br>

<input type="radio" name="group1" value="gresit">armonic<br>

<input type="radio" name="group1" value="corect" >geometrica<br>

casete de validare- atributul type aplicat etichetei <input> primește valoarea "checkbox". Ele permit selectarea sau deselectarea unei opțiuni. Fiecare casetă poate avea un nume definit prin atributul name, respectiv o valoarea prestabilită "selectat", definită prin atributul checked. (<input type="checkbox" name="patrulater" value="romb">)

casete de fisiere- atributul type aplicat etichetei <input> primește valoarea "file". Ele permit folosirea întregului conținut al unui fișier pe post de valoare. Se pot folosi atributele: name (permite atasarea unui nume), value (primește ca valoare adresa URL a fișierului care va fi expediat).

Exemplul 4.24. :

Selecteaza fisierul: <input type="file" name="fisier">

butoane-atributul type aplicat etichetei <input> primește valoarea "button", sau prin intermediul blocului <button>…</button>. Intr-un formular pot fi afisate butoane. Când utilizatorul apasă un buton, se lansează în execuție o funcție de tratare a unui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcții (acest lucru este posibil dacă se utilizează limbajele Javascript sau Java). Atributele posibile ale etichetei "button" sunt: name (atribuie elementului un nume), value (precizează textul care va fi afișat pe buton), type precizează acțiunea ce se va executa la apăsarea butonului.

Exemplul 4.25. :

<button onclick="return handleClick();" type="submit">Calculeaza nota</button>

liste de selecție – se inserează cu ajutorul etichetelor <select>…</select>. O listă de selecție permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă finită. Poate avea următoarele atribute: name (atașează listei un nume), size (precizează câte elemente din listă sunt vizibile la un moment dat. Elementele unei liste de selecție sunt incluse în listă cu ajutorul etichetei <option>.

Exemplul 4.26. :

Alege universitatea:

<select name="universitate" size="1">

<option value="UTCB" selected> Universitatea Tehnica de Constructii Bucuresti

<option value="ASE" > Academia de Studii Economice Bucuresti

<option value="UNIBUC"> Universitatea Bucuresti

</select>

Capitolul V – Utilizarea aplicației (site-ului) în cadrul procesului instructiv – educativ

Utilizarea resurselor de natură tehnologică (calculatoare, videoproiectoare, Internet, etc.) în procesul de predare-evaluare a devenit o necesitate a perioadei actuale. Acest lucru a stat la baza proiectării și realizării site-ului meu.

Pagina pricipală, denumită în aplicație Prima pagină, am structurat-o în trei subferestre de tip linie, cea din mijloc fiind, la rândul ei structurată în două subferestre de tip coloană. Ea conține hyperlegături către celelalte pagini ale site-ului: Cuprins, Lecții și Teste interactive.

Figura 5.1. – Pagina principala a site-ului

Prin pagina Lecții, le ofer elevilor suportul teoretic pentru lecțiile cuprinse în unitatea de învățare „Relații metrice în triunghiul dreptunghic”, respectiv:

Teorema înălțimii;

Teorema catetei;

Teorema lui Pitagora.

Acest suport teoretic este structurat sub forma unor prezentări Power Point ce pot fi descărcate și vizualizate de către elevi. Fiecare lecție conține enunțul teoremei respective, demonstrarea ei, reciproca teoremei, cât și o problemă rezolvată. Suportul teoretic este însoțit de figuri geometrice sugestive, facilitând astfel înțelegerea de către elevi a conținutului prezentat.

Fiecare prezentare Power Point poate fi utilizată în cadrul orei de predare, fie folosind un videoproiector, fie în cadrul unui laborator de informatică, prin intermediul rețelei de calculatoare.

Figura 5.2. – Pagina „Lecții” din cadrul site-ului

Figura 5.3. – Descărcarea unei lecții de pe site-ului prin intermediul hyperlegăturilor

Figura 5.4. – Suport teoretic pentru o lecție sub formă de prezentare Power Point

Prin pagina Teste interactive le pun la dispoziție elevilor trei teste de autoevaluare pentru cele trei lectii anterioare:

Teorema înălțimii;

Teorema catetei;

Teorema lui Pitagora.

Figura 5.5. – Pagina „Teste interactive” din cadrul site-ului

Testele le-am conceput pe baza unor formulare, ele fiind formate din câte nouă itemi. Punctajul începe de la nota 1, nota maximă fiind, evident, 10. Fiecare item este de tip buton radio ce permite alegerea unei singure valori din mai multe posibile.

Figura 5.6. – Modele de itemi (sub forma unor butoane radio)

Fiecare test conține un buton Calculează nota folosit pentru calcularea și afișarea instantanee a rezultatului la test, respectiv a unui mesaj aflat în concordanță cu natura rezultatului.

Testul poate fi reluat folosind butoanele Anulează rezultate, respectiv Reia testul. In cazul obținerii unui rezultat nesatisfăcător, am folosit o hyperlegătură (Suport teoretic), care permite elevului să revadă partea teoretică a lecției respective.

Figura 5.7. – Butonul „Calculează nota”, respectiv mesajul însoțitor

Figura 5.8. – Butonul de tip Reset (”Anulează rezultate”) și hyperlinkul către o ancoră („Reia testul” – mută cursorul în partea de sus a paginii)

Figura 5.9. – Hyperlegătura ce poate fi folosita pentru a revedea partea teoretica a lecției

Partea II – Partea metodică

Capitolul I – Proiecte de lecție

1.1.Lecția 1

Școala: Data:

Clasa: Mediul de instruire: Laborator

Nr. elevi: 20 Profesor: Gherghișan ( Toader) Violeta-Maria

Disciplina: Informatică Durata: 50’

PROIECT DE LECȚIE

Titlul lecției: Tabele în HTML

Necesitatea studierii temei

Tabelul reprezinta varianta cea mai des folosită pentru gruparea optimă a datelor în funcție de diferite criterii. Utilizarea cadrelor (frame-uri), permite vizitatorilor să vizualizeze simultan mai multe pagini. De asemenea, utilizatorul își poate forma rapid o părere despre conținutul datelor din tabelul respectiv.

Structurarea logică a conținutului lecției

Contextul

Obiectivele operaționale

EVALUARE

Proba de evaluare

Oficiu 1p 1p

Total 7p 10p

Fișa de laborator (Proba practică)

Strategii didactice

Anexa 1

FIȘA DE REACTUALIZAREA CUNOȘTINȚELOR

REBUS-Inserarea imaginilor în HTML

Definiții:

1. Cel mai folosit instrument al limbajului de programare HTML

2. Eticheta cu care se inserează o imagine

3. Corespondentul etichetei în limba engleză

4.Atributul care stabilește înălțimea imaginii

5. Atributul care stabilește lățimea imaginii

6. Atributul care aliniază textul în raport cu imaginea

7. Atributul care creează un chenar imaginii

Anexa nr. 2

Fișa de evaluare

Ce este tabelul? 2p

Care sunt perechile de etichete cu care se definește un tabel? 2p

Enumerați trei atribute care se pot aplica etichetei cu care se definește tabelul. 3p

Stabiliti valoarea de adevăr a următoarelor propoziții prin incercuirea literei A (adevărat) sau F(fals)

după caz: 2p (1px2)

Celula unui tabel poate să conțină o imagine. A F

Tabelul poate fi rotit la un anumit număr de grade. A F

Fișa de laborator

Aplicația 1.

În directorul Tabele (pe Desktop), să se realizeze o pagină Web (info.html), care să conțină un tabel având următoarea structură:

Aplicația 2.

Să se formateze tabelul astfel:

1) Să se creeze un chenar de grosime 4 pixeli;

2) Să se stabilească lățimea coloanelor la 50, 250, respectiv 150 pixeli;

3) Să se coloreze fundalul tabelului cu albastru.

4) Să se centreze tabelul.

VII. Bibliografie

Mihaela Garabet (2015) – Tehnologia informației și a comunicațiilor (manual pentru clasa a XII-a), Ed. ALL, București

Onea, Emil, (2010) – Ghid de pregătire pentru examene de competențe digitale, Ed. Nomina,Pitești

Toma, Steliana, (2017) – Metodica predării informaticii, Note de curs, DPPD-UTCB, București

1.2. Lectia 2

Școala: Data:

Clasa: Mediul de instruire: Laborator

Nr. elevi: 20 Profesor: Gherghișan ( Toader) Violeta-Maria

Disciplina: Informatică Durata: 50’

PROIECT DE LECȚIE

Titlul lecției: Cadre în HTML

Necesitatea studierii temei

Utilizarea cadrelor (frame-uri), permite vizitatorilor să vizualizeze simultan mai multe pagini. Fiecare cadru conține propria sa pagină Web, utilizatorul putându-și forma o părere despre domeniul informațiilor conținute în cadrul site-ului.

Structurarea logică a conținutului lecției

Contextul

Obiectivele operaționale

Evaluare

Proba de evaluare

Oficiu 1p 1p

Total 8p 10p

Proba practica- fisa de laborator

Strategii didactice

Anexa 1

Fișa de lucru pentru reactualizarea cunoștințelor teoretice

Ciorchinele- Crearea tabelelor în HTML

Anexa nr. 2

Fișa de evaluare

Ce sunt cadrele? (2p)

Care sunt perechile de etichete cu care se definesc cadrele? (1p x 2)

Care este atributul care precizează pagina Web ce va fi deschisă în cadrul respectiv? (1p)

Asociați termenii coloanei A cu cei ai coloanei B: (1p x 4)

Fișa de laborator

Aplicația 1.

În directorul ABC, aflat pe Desktop, să se realizeze o pagină Web cu numele info.html, fără conținut, dar cu un fundal de culoare roșie. (0,5p)

Aplicația 2.

În același director, ABC, să se realizeze o pagină Web cu numele cadre.html, care să conțină cadre dispuse în felul următor:

Fiecare cadru va afișa aceeași pagină Web, info.html. (1,5p)

Aplicația 3.

Să se formateze pagina Web astfel:

a) Să se stabilească lățimea primei coloane din prima linie la 40% din lățimea paginii, iar înălțimea celei de-a doua linii la 30% din înălțimea paginii. (1p)

b) Să se creeze chenare pentru toate cadrele din pagină de grosime 10 pixeli , respectiv de culoare albă (1p)

Bibliografie

Mihaela Garabet (2015) – Tehnologia informației și a comunicațiilor (manual pentru clasa a XII-a), Ed. ALL, București

Onea, Emil, (2010) – Ghid de pregătire pentru examene de competențe digitale, Ed. Nomina,Pitești

Toma, Steliana, (2017) –Metodica predării informaticii, Note de curs, DPPD-UTCB, București

Capitolul II – Organizatori cognitivi

Lecția – etapele rezolvării unei probleme cu ajutorul calculatorului

1. Harta conceptuală

2. Lista structurată

3. Diagrame arbore

4. Diagrama arbore – orizontală

5. Diagrame Venn

Capitolul III – Norme de protecție

Accesul elevilor în laborator se face numai în prezența profesorului sau cu acordul acestuia.

Calculatoarele și echipamentele periferice din laborator nu se vor muta și nu vor fi lovite sau expuse unor condiții necorespunzătoare de lucru.

Este interzisă demontarea aparatelor, detașarea carcaselor, efectuarea reglajelor sau accesul la componentele interne ale calculatoarelor (activitate rezervată administratorului de rețea).

Este interzisă utilizarea, de către elevi, a unităților floppy, a CD-ROM-urilor și a discurilor amovibile, fără acordul explicit al profesorului, justificat de necesități didactice obiective.

Este interzisă modificarea fișierelor de configurare și a celor al căror rol nu este foarte bine cunoscut.

Este interzisă utilizarea altor programe în afara celor impuse de conținutul disciplinei de studiu sau indicate de profesor.

Este interzisă navigarea pe Internet, în timpul orelor de curs, precum și descărcarea de programe și fișiere (jocuri, poze ș.a.), fără acordul explicit al profesorului.

Nu este admisă intervenția la tablouri electrice, prize, ștechere, mufe etc.

Se va respecta, cu strictețe, distribuția pe posturi de lucru efectuată de profesor.

Fiecare elev răspunde de postul de lucru la care își desfășoară activitatea (mobilier și sistem de calcul).

Elevii sunt obligați să verifice, la începutul lucrului, integritatea mobilierului și a sistemului de calcul de care răspund și să semnaleze profesorului neregulile (modificările) depistate, semnând pentru aceasta în fișa postului.

La sfârșitul unei sesiuni de lucru, elevul este obligat să predea postul la care a lucrat profesorului sau administratorului de rețea, completând în mod corespunzător fișa postului.

Orice deteriorare a mobilierului sau a sistemului de calcul de la un post de lucru este imputată financiar titularului postului respectiv (conform distribuției pe posturi făcută de profesor).

În timpul orelor, suporturile de informație necesare procesului instructiv-educativ vor fi manevrate doar de către profesor (sau cu acordul acestuia).

AFIȘUL NR. 1

Accesul elevilor în laborator se face numai în prezența profesorului sau cu acordul acestuia.

AFIȘUL NR. 2

Nu este admisă intervenția la tablouri electrice, prize, ștechere, mufe etc.

AFIȘUL NR. 3

Este interzisă utilizarea, de către elevi, a CD-ROM-urilor și a USB-urilor, fără acordul explicit al profesorului.

Concluzii

Pagină Web, internet, calculator sunt doar câțiva termeni din cei folosiți de elevi frecvent, ca să nu spun că mulți dintre elevi sunt înconjurați de noile tehnologii, iar tot ceea ce nu folosește noile tehnologii este învechit și neinteresant.

Scopul aplicației pe care am creat-o este de a corecta acest lucru, de a aduce o contribuție la educație prin mijloace moderne.

Aplicația pe care am realizat-o îmbină materia pe care o predau în prezent – matematica și noțiunile de informatică pe care am avut șansa să le deprind urmând cursurile de informatică, puse la dispoziție de Departamentul de Pregătire a Personalului Didactic din cadrul Universității Tehnice de Construcții din București.

Cum bine se știe matematica este o materie pe care mulți elevi o consideră grea, de aceea ținând cont de faptul că majoritatea elevilor au acces la internet, iar tot mai multe dispozitive le acaparează atenția, am încercat cu ajutorul acestei aplicații să îi apropii mai mult de matematică.

Acestă aplicație cuprinde conținuturi matematice prezentate sub un aspect atractiv cu imagini sugestive, dar și teste de autoevaluare, prin care se pot autoevalua și prin care elevii pot învăța jucându-se.

Acesta este un motiv în plus care mă ambiționează să adaug și alte lecții la cele pe care le-am făcut deja, precum îmi dă și posibilitatea de ai atrage și pe elevii doritori să creeze și ei ceva asemănător sub formă de proiecte personale sau în cadrul unei echipe.

Capitolul pe care l-am ales pentru realizarea aplicație este unul foarte important pentru matematică-geometrie în special, dar de asemeni noțiunile învățate în acest capitol au multiple aplicații și în alte domenii cum ar fi fizica, dar și în aplicații practice cotidiene, un motiv în plus de a insista pe noțiunile din acest capitol.

De aceea îmi doresc ca pe viitor elevii să vină cu propuneri de aplicații practice pe care ei le întâlnesc în realitatea înconjurătoare și care pot fi transformate în probleme cu caracter practic, iar prin implicarea lor să reușesc astfel să îi apropii mai mult de matematica de care poate că până atunci nu li se părea interesantă.

Aplicația în sine este un mijloc de apropiere între elevi- profesori și de ce nu chiar și un instrument pentru părinți de a-și evalua copii cu această aplicație la care ar putea avea acces părinții interesați, poate fi astfel un instrument care să eficientizeze procesul instructiv- educativ.

Deasemenea nu exclud o colaborare și cu alți profesori cu ajutorul cărora să creăm pagini web și pentru alte discipline în afară de matematică, și de ce nu să le postăm pe pagina oficială a școlii unde să le poată folosi toți cei interesați.

Bibliografie

Castro, E. (2003). HTML pentru World Wide Web. București: Corint.

Cojocaru, S. Ș. (2003). Un site Web la îndemâna tuturor! București: Compania.

Gugoiu, T. (2001). HTML prin exemple. București: Teora.

Onea, E. (2010). Ghid de pregătire pentru examene de competențe digitale. Pitești: Nomina.

Mihaela Garabet (2015) – Tehnologia informației și a comunicațiilor (manual pentru clasa a XII-a), Ed. ALL, București

Onea, Emil, (2010) – Ghid de pregătire pentru examene de competențe digitale, Ed. Nomina,Pitești

Toma, Steliana, (2017) – Metodica predării informaticii, Note de curs, DPPD-UTCB, București