joi, 17 noiembrie 2016

S10:14.11-18.11

Formulare

Pentru a crea un formular in HTTML se foloseşte elementul <form> ... </form>, in cadrul acestuia se vor adauga celelalte elemente specifice.
Elementul <form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele atribute:

  • action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI), program care trebuie sa accepte datele din FORM , le proceseaza si trimite înapoi raspunsul la browser.
  • method - aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va fi folosita pentru a trimite continutul formularului la server.
  • enctye - determina mecanismul folosit pentru a codifica continutul transmis din formular.
  • name - Este numele formularului, folosit de scripturi VB (Visula Basic) sau JavaSript.
  • target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea datelor din form.
Cele mai importante atribute ale etichetei <form> sunt action si method.action metioneaza adresa scriptului (aflat pe server) care va interpreta formularul. 

Aceste scripturi pot fi scrise in limbajele PHP sau Pearl.method indica metoda folosita de browser pentru transmiterea formularului. 
Poate lua valorile get si post.
  • get - datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mici cantitati de date.
  •  post - datele sunt trimise separat si sunt permise cantitati mari de date.
In continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea diferite campuri, casete, butoane in pagina web, necesare pentru a aduna datele care vor fi trimise la aplicatie pe server.
Cele mai multe se creaza prin atributul type al elementului <input> ... </input>

Proprietatile elementului <input> ... </input>

  • type - tipul de FORM folosit (caseta text, buton si altele ...)
  • name - numele elementului respectiv de formular, folosit de scripturile la care sunt trimise datele
  • value - datele (valoarea) asociate acelui element de formular si care sunt trimise, impreuna cu numele, catre scripturi (PHP, CGI, JavaScript)
  • size - specifica numarul de caractere care dau lungimea zonei de text
  • maxlength - numarul maxim de caractere acceptate
  • checked - specifica daca un buton sau alta forma va fi initial selectata (bifata).
  • readonly - folosit pentru campuri de tip text, impedica modificarea valorii (textului) din acel camp
  • disabled - impedica folosirea campului care are aceasta proprietate. Va fi vizibil dar nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.

Constructia select introduce un meniu derulant (lista de selectie), valorile fiind declarate prin option.
In campul textarea se poate introduce text, avand atributele cols (numar de coloane) si rows (numar de randuri).
Daca doriti puteti particulariza butoanele din formular folosind atributul type=image in cadrul etichetei input si indicand fisierul imagine.

S9

APLICATIE PRACTICA
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: Analiza 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
 SOFT EDUCATIONAL UTILIZAT PENTRU PREDAREA LECTIEI:

marți, 1 noiembrie 2016

S8:01.11-4.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: Analiza 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
 SOFT EDUCATIONAL UTILIZAT PENTRU PREDAREA LECTIEI:




DESFASURAREA ACTIVITATII
  Cadre in HTML
Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre
Suport  didactic: Marcaje pentru cadre

Caracteristic acestor pagini este ca perechea de etichete <body> </body> este inlocuita de <frameset> </frameset>, iar in interiorul lor cadrele sunt delimitate de <frame> si </frame>.


Atributele etichetei frameset sunt:

  • cols imparte pagina in coloane si are valori exprimate in procente din dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas
  • rows imparte pagina in randuri cu aceleasi valori ca la cols
  • bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
  • frameborder inhibarea afisarii chenarelor cu valorile yes sau no

Cadrele sunt introduse prin perechea de etichete <frame> </frame>, si suporta atributele:

  • src fisierul sau adresa fisierului introdus
  • bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
  • noresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrul
  • scrolling adauga cadrului bare de defilare cu valorile yes no si auto

Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimea totala. Pagina de sus are chenarul rosu iar cea de jos are scroll. 

<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frameset rows="20%,80%">
<frame src="exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>


Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimea totala, fara posibilitatea de redimensionare a cadrelor 
<html>
<head>
<title>Exemplul 8_2</title>
</head>
<frameset cols="40%,60%">
<frame src="exemplu8_2_1.html">
<frame src="exemplu8_2_2.html" noresize>
</frameset>
</html>



Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini care se vor deschide in cadrul din dreapta (se poate verifica functionarea atributului target al legaturii). Cadrul din stanga va avea scroll.
In situatia in care browserul folosit nu suporta pagini care contin cadre, imaginea afisata va fi goala. Pentru a evita acest lucru vom introduce un mesaj incadrat de <body> si </body> intre etichetele <noframes> si </noframes> prin care informam vizitatorul ca foloseste un browser care nu suporta cadre. 

<frameset cols = "30%, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
<frame src ="pag2.html">
<frame src ="pag3.html">
</frameset>



REALIZATI URMATOAREA ACTIVITATE
  1. Inserati in paginile proiectului dvoastra coduri HTML care sa contina toate tag-urile studiate la ora, insotite de  atributele prezentate mai sus.
  2. Trimiteti prin e-mail lucrarea sau o predati personal profesorului pe stik, termen de predare 9.11.2016.



Bibliografie suplimentara:

  1. Structura documentului HTML
  2. Formatarea caracterelor, organizarea textului
  3. Blocuri de text
  4. Liste. Noţiuni şi marcaje utilizate
  5. Tabele. Noţiuni si marcaje utilizate
  6. Operarea cu obiecte. Inserarea imaginilor, sunetelor şi videoclipurilor
  7. Referinţe. Referinţe interne şi externe.
  8. Documentarea unei pagini WEB.
  9. Operarea cu formulare. Marcaje utilizate
  10. Ferestre in HTML. Comenzi de construire a ferestrelor(cadrelor)