miercuri, 26 octombrie 2016

S7:24.10-28.10


Competente generale:
-   Utilizarea calculatorului şi prelucrarea informaţiei
Competente SPECIFICE:
-  Utilizează tehnologii IT multimedia (Web, comunicare) pentru crearea documentelor Web.

Unitatea de învăţare: Instrumente de lucru pentru crearea site-urilor Web
Tema proiectului: Realizarea unei pagini Web
 Durata proiectului:  4 ore

Tema lecţiei: Prezentarea proiectului
Tipul lecţiei: Fixare şi consolidare deprinderi şi priceperi
Durata lectiei: 1 ora

 Materiale didactice:

Fisa de documentare 0_portofoliu.pdf
Fise de lucru (in echipa2 elevi)0bilete proiect.pdf
Proiectul unitatii de invatare:0_ui_xii.pdf
Multimedia:0_prezentare.pptx

DESFASURAREA ACTIVITATII
  1. Momentul organizatoric
 pregătirea lecţiei
                                 - întocmirea proiectului didactic;
                                 - pregătirea proiectului;
                                 - pregătirea setului de întrebări din test;
                                 - pregătirea setului de aplicaţii din bilete;
 organizarea şi pregătirea clasei
                                 - verificarea frecvenţei elevilor;
                                 - verificarea  existenţei resurselor materiale; 
2. 18 min -Verificarea cunostintelor anterioare
- elevii sunt rugati sa completeze testul
- colegii de banca evalueaza testul conform baremului si grilei postate
3. 2 min - Captarea atenţiei clasei
                       - explicarea modului de desfăşurare  a activităţii si importanta derularii acesteia
            4. 25 min- Fixare şi consolidare deprinderi şi priceperi
                    
Etapele proiectului:
E1.Pregătirea proiectului - profesorul împreună cu elevii vor decide câteva repere care se pot formula prin întrebări ce pot dirija dimensiunea evaluativă;
 E2. Stabilirea ariei de interes şi a tematicii proiectului - discutată şi negociată între profesor şi elevi.
 E3. Împărțirea sarcinilor în cadrul grupului (se extrag biletele cu tema)
E4. Cercetare, creație, investigație (presupune studiul bibliografiei)
E5. Identificarea şi selectarea resurselor materiale (altele decât cele date suport).
E6. Prezentarea modului de evaluare a proiectului
5. 5 min - Feedback-ul

-se obține de la colegi, profesor și prin autoevaluare (se completeaza diagrama KWL)
la Niciun comentariu:

marți, 18 octombrie 2016

S6:18.09-21.10

HTML – inserarea listelor


Listele reprezintă unele dintre cele mai obişnuite elemente dintr-o pagină Web. Acestea sunt deseori folosite pentru a prezenta informaţiile în mod organizat, într-o manieră accesibilă şi uşor de parcurs.
Ele pot fi de trei tipuri: liste ordonate (marcate prin numere sau litere), liste neordonate (marcate prin cratime, buline sau alte simboluri), liste de definiţii, afişate fără nici un fel de marcaj.
                În interiorul etichetelor care delimitează o listă pot fi folosite orice alte etichete HTML, cum ar fi etichete de formatare a textului, legături, imagini, etc.

1. Liste neordonate. Acest tip de listă este de fapt un bloc de text delimitat de etichetele <UL> </UL> (unordered list=listă neordonată). Eticheta de închidere </UL> este obligatorie.

Fiecare element al listei este introdus prin eticheta <LI> (list item).  
Lista va fi afişată indentat faţă de restul paginii şi fiecare element al listei începe pe un rând nou. În mod prestabilit, fiecare element al listei va fi marcat (bulleted) cu "bulină". Etichetele <UL> şi <LI> pot avea definit atributul type care stabileşte caracterul afişat în faţa fiecărui element al listei. Valorile posibile al acestui atribut sunt: circle (cerc), disc (disc plin) - valoarea prestabilită, square (patrat).
Exemplul 1
<HTML>
<HEAD>
<TITLE> Liste neordonate</TITLE>
</HEAD>
<BODY>
<H1 align="center">Lista neordonata</H1><HR>
<UL type="square">Culori
<LI>Black
<LI>White
<LI>Red
<LI>Green
</UL>
</BODY>
</HTML>

2. Liste ordonate. O listă ordonată este un bloc de text delimitat de etichetele <OL> </OL> (ordered list - listă ordonată), eticheta de închidere fiind obligatorie.

Fiecare element al listei este iniţiat de eticheta <LI> (list item). Ca şi în cazul listelor neordonate, lista va fi indentată faţă de restul paginii Web şi fiecare element al listei va începe pe o linie nouă.
Diferenţa faţă de listele neordonate este aceea că în acest caz marcarea elementelor se face prin cifre, nu prin simboluri. Pentru etichetele <OL> şi <LI> se poate seta atributul type, care stabileşte tipul de caractere utilizate pentru ordonarea listei. Valorile posibile ale acestui atribut sunt:  A - pentru ordonare de tipul A , B , C...(litere mari); a - pentru ordonare de tipul a , b , c...(litere mici); I - pentru ordonare de tipul I , II , III , IV...(cifre romane mari); i - pentru ordonare de tipul i , ii , iii , iv...(cifre romane mici); 1 - pentru ordonare de tipul 1 , 2 , 3...(cifre arabe - opţiune prestabilită). De asemenea eticheta <OL> poate avea setat atributul start, care stabileşte valoarea iniţială a secvenţei de ordonare. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.
Exemplul 2
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<H1 align="center">Lista ordonata</H1><HR>
<OL type=”I”>Castigatorii concursului sunt:
<LI >Popescu Maria
<LI>Ionescu Ion
<LI>Bratu Ana
</OL>
</BODY>
</HTML>

3. Liste de definiţii. Reprezintă un tip special de liste în care elementele listei nu sunt nici numerotate (ca în listele ordonate), nici marcate prin buline (ca în listele neordonate) şi care prezintă două nivele de indentare. Listele de definiţii sunt blocuri de text incluse între etichetele <DL> </DL> (definition list), eticheta de închidere fiind obligatorie.
Fiecare element al listei este introdus prin eticheta <DT> (definition term). Fiecare element introdus prin eticheta <DT> conţine la rândul său un număr de elemente care îl definesc, introduse prin eticheta <DD> (definition description).



Exemplul 3
<HTML>
<HEAD>
<TITLE>Liste de definitii</TITLE>
</HEAD>
<BODY>
<H1 align="center">Liste de definitii</H1><HR>
<DL>
<DT>Iarna
<DD>Ninge
<DD>E frig
<DD>Ziua e mai scurta decât noaptea
<DT>Primavara
<DD>Natura se trezeste la viata
<DD>Infloresc pomii
<DD>Se intorc pasarile calatoare
<DT>Vara
<DD>Totul e verde
<DD>E foarte cald
<DD>Ziua e mai lunga decât noaptea
<DT>Toamna
<DD>Se coc fructele
<DD>Se strange recolta
<DD>Cad frunzele
</DL>
</BODY>
</HTML>

4. Imbricarea listelor. În cadrul unei liste, fie ea ordonată sau neordonată, se pot include alte liste, procedeu numit imbricare. Fiecare listă nou inclusă în precedenta se va afişa indentat faţă de nivelul listei anterioare.
Exemplul 4
<HTML>
<HEAD>
<TITLE>Liste imbricate</TITLE>
</HEAD>
<BODY>
<H1 align="center">Liste imbricate</H1><HR>
<UL>
<LI>Bulina 1
<OL>
<LI>Numarul 1
<LI>Numarul 2
</OL>
<LI>Bulina 2
<LI>Bulina 3
<UL type="square">
<LI>Patrat 1
<LI>Patrat 2
<LI>Patrat 3
</UL>
<LI>Bulina 4
</UL>
</BODY>
</HTML>

Exercitiu Realizaţi o pagină web care să cuprindă  listele următoare:

PROBE BACALAUREAT 2017
                                1 Probe de evaluare a competentelor
        • de comunicare în limba romana
        • de comunicare într-o limbă străină
        • digitale
                                2 Probe scrise

        • Limba şi literatura română
        • Istorie
        • Logica
la Niciun comentariu:

marți, 11 octombrie 2016

S5:11.10-14.10


FISE DE LUCRU:
HTML-elemente avansate - tabele

Tabelele permit organizarea informaţiilor într-un document HTML.
Inserarea unui tabel se face prin intermediul tag-urilor <TABLE> şi </TABLE>.
Tag-ul TABLE admite următoarele atribute:
  • SUMARRY = text – specifică  o descriere a rolului şi structurii tabelului, aceste informaţii nu sunt vizualizate în pagina Web;
  • ALIGN =  LEFT │ RIGHT │CENTER  – specifică alinierea tabelului în document;
  • WIDTH = valoare – specifică lăţimea întregului tabel; valoarea poate fi specificată în număr de pixeli sau în procente;
  • HEIGHT = valoare – specifică înălţimea întregului tabel; valoarea poate fi specificată în număr de pixeli sau în procente;
  • BORDER = valoare – specifică în număr de pixeli grosimea liniei chenarului din jurul tabel;
  • COLS = valoare – specifică numărul de coloane ale tabelului;
  • CELLSPACING = valoare – specifică spaţiul dintre celule şi spaţiul dintre celule şi marginea tabelului; 
  • CELLPADING = valoare – specifică spaţiul dintre chenarul celulei şi spaţiul conţinutul ei; valoarea poate fi specificată în număr de pixeli sau în procente;
Conţinutul elementului TABLE este constituit din liniile tabelului. Specificarea unei linii se realizează cu ajutorul elementului TR (Table Row), între eticheta de început <TR> şi cea de sfârşit </TR> (opţională) fiind descrise celulele de pe linia respectivă.

Exemplu:

<TABLE>
  <TR> continutul primei linii
  <TR> continutul celei de a doua linii </TR>
</TABLE>

Specificarea celulelor care constituie o linie se realizează prin intermediul elementelor TH (Table Header), pentru celulele care constituie antetul tabelului (capul de tabel), respectiv TD (Table Data) pentru celulele care conţin informaţiile din tabel.
Elementele TH şi TD admit următoarele atribute:
  • ROWSPAN = număr_de_linii – specifică numărul de linii acoperite de celula respectivă; valoarea implicită este 1; valoarea 0 semnifică faptul că această celulă acoperă toate liniile începând cu cea curentă;
  • COLSPAN = număr_de_coloane – specifică numărul de coloane acoperite de celula respectivă; valoarea implicită este 1; valoarea 0 semnifică faptul că această celulă acoperă toate coloanele începând cu cea curentă;
  • WIDTH =  valoare  –  specifică lăţimea celulei în număr de pixeli;
  • HEIGHT =  valoare  –  specifică înălţimea celulei în număr de pixeli;
<html>
<head>
<title> Tabel HTML</title>
</head>
<body>
  <table border="2" width="50%" align="center">
    <tr>
      <th colspan="5" bgcolor="#AAFFFF"><b>ORAR</b></th>
    </tr>
    <tr>
      <th>Luni</th>
      <th>Marti</th>
      <th>Miercuri</th>
      <th>Joi</th>
      <th>Vineri</th>
    </tr>
    <tr>
      <td>Matematica</td>
      <td>E</td>
      <td>Geografie</td>
      <td>Desen Tehnic</td>
      <td rowspan="2">Informatica-TAC</td>
    </tr>
    <tr>
      <td>Fizica</td>
      <td rowspan="2">LB. Romana</td>
      <td>B</td>
      <td>D</td>
    </tr>
    <tr>
      <td>M</td>
      <td>I</td>
      <td>E</td>
      <td>B</td>
    </tr>
    <tr>
      <td>L</td>
      <td>C</td>
      <td>B</td>
      <td>I</td>
      <td>B</td>
    </tr>
   </table>
</body>
</html>

Sarcina de lucru:
 1.       Realizati o pagina web cu numele "TABEL HTML" si salvat tabel.html cu urmatorul continut:
Hobby-uri
sport
muzica
pictura
dans
2.       Formatati tabelul astfel:
a.       Borduraalbastra, grosime7;
b.      Inaltime tabel 50%;
c.       Aliniati tabelul la dreapta paginii;
  
3.       Realizati o pagina web cu numele "TABEL HTML" si salvat tabel.html cu urmatorul continut:
Hobby-uri
sport
muzica
dans
4.       Formatati tabelul astfel:
a.       Bordura rosie, grosime 5;
b.      Latime tabel 50%;
c.       Aliniati tabelul in centrul paginii;


la Niciun comentariu:

marți, 4 octombrie 2016

S4:4.10-7.10

  FISE DE LUCRU:
Parcurgeti secventele din softul educational Pagini web. Notati in caiete notiunile intalnite.

Test din materia aceasta. Notele se trec in catalog.
  • 1 - Elementele principale, cod HTML
  • 2 - Crearea si editarea pagini HTML
  • 3 - Titluri, Paragrafe, Un nou rand, Linie orizontala
  • 4 - Formatul textului

  • HTML – organizarea textului

    1. Elementul de bloc    <p>……</p>
    Creează un paragraf; comunică browserului să insereze o linie liberă în text şi să înceapă o nouă linie. Atributul align specifică alinierea textului şi poate fi: left, right, center, justify. Implicit textul este aliniat la stânga.

    Exerciţiul 1. Scrieţi următorul cod într-un document Notepad şi vizualizaţi în browser.
    <HTML>
    <HEAD>
    <TITLE>Paragrafe</TITLE>
    </HEAD>
    <BODY>
    <P align="center">Paragrafe</P>
    <P> Acesta este un paragraf aliniat la stanga. </P>
    <P align="right"> Acesta este un paragraf aliniat la dreapta. </P> 
    <P align="center"> Acesta este un paragraf aliniat la centru. </P>
    </BODY>
    </HTML>

    1. Elementele heading <h1>……</h1> <h2>……</h2> <h3>……</h3> ….. <h6>……</h6>
    Eticheta <H1> defineşte titlul de dimensiunea maximă, iar <H6> pe cel de dimensiune minimă. Etichetele de titlu acceptă atributul align cu valorile left, center şi right pentru alinierea titlului blocului de text la stânga (în mod prestabilit), în centru şi respectiv la dreapta.

    Exerciţiul 2. Scrieţi următorul cod într-un document Notepad şi vizualizaţi în browser.
    <HTML>
    <HEAD>
    <TITLE>Titluri de diferite mărimi</TITLE>
    </HEAD>
    <BODY>
    <H1 align="center">Titlu H1</H1>
     <H2>Titlu H2</H2>
    <H3>Titlu H3</H3>
    <H4 align="center">Titlu H4</H4>
    <H5>Titlu H5</H5>
    <H6>Titlu H6</H6>
    </BODY>
    </HTML>

    1. Linii orizontale <hr>
    Pot fi inserate în pagină linii orizontale care au rolul de a delimita diferitele zone ale paginii sau de a îmbunătăţi aspectul ei estetic. Pentru a configura o linie orizontală se utilizează următoarele atribute ale etichetei <HR>:
     align - permite alinierea liniei orizontale. Valorile posibile sunt left, center şi right
     width - specifică lungimea liniei - lungimea poate fi stabilită în pixeli sau în procente din lăţimea ecranului.
     size - specifică grosimea liniei, exprimată în pixeli
     color - permite definirea culorii liniei

    Exerciţiul 3. Scrieţi următorul cod într-un document Notepad şi vizualizaţi în browser.
    <HTML>
    <HEAD>
    <TITLE>Linii orizontale</TITLE>
    </HEAD>
    <BODY>
    <H1 align="center"> Linii orizontale </H1>
    Linie aliniata la stanga, lungime 100%, grosime 2 <HR>
    Linie aliniata in centru , lungime 50%, grosime 5 pixeli.
    <HR align="center" width="50%" size="5" color="black">
    Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12 pixeli , de culoare rosie.
    <HR align="right" width=150 size=12 color="red">
    </BODY>
    </HTML>

    4.       Inserarea unei adrese poştale <address> …….</address>.

    Eticheta <ADDRESS> este o etichetă logică şi are drept efect, în cele mai multe browsere, afişarea textului cu caractere italice.

    Exerciţiul 4. Scrieţi următorul cod într-un document Notepad şi vizualizaţi în browser.
    <HTML>
    <HEAD>
    <TITLE>Inserarea unei adresa</TITLE>
    </HEAD>
    <BODY>
    <H1 align="center"> Adresa </H1>
    <HR>
    Adresa firmei noastre este
    <ADDRESS>
    GoldenWeb Consult <BR>
    Str. Paradisului, Nr. 1<BR>
    Bucuresti
    </ADDRESS>
    </BODY>
    </HTML>

    Exerciţiul 5.
    1. Creaţi o pagină Web în care să introduceţi următorul text:
    Plumb
    ______________________________

    Dormeau adânc sicriele de plumb,
    Şi flori de plumb şi funerar vestmânt --
    Stam singur în cavou... si era vânt...
    Şi scârţiiau coroanele de plumb.

    Dormea întors amorul meu de plumb
    Pe flori de plumb, şi-am început să-l strig -
    Stam singur lângă mort... si era frig...
    Şi-i atârnau aripile de plumb.

    2. Efectuaţi următoarele modificări:
    a)       fontul textului să fie Arial
    b)       adăugaţi documentului titlul „George Bacovia”
    c)       aplicaţi stilul „îngroşat” pentru fiecare cuvânt plumb şi stilul înclinat pentru cuvântul flori
    d)       setaţi grosimea liniei la 12 pixeli şi culoarea roşie
    e)       formataţi titlul poeziei astfel încât să reprezinte un titlu de nivel 3 (H3)
    f)        aliniaţi centrat paragraful care conţine titlul poeziei
   
la Niciun comentariu:
Abonați-vă la: Postări (Atom)