Competente Digitale Ramnic

Resurse-materiale utile T.I.C.



GHIDURI UTILE :

Alte materiale utile:

Competente digitale;Bacalaureat 2019

LIMBAJUL HTML

Coduri semne speciale în HTML

a) Coduri diacritice în HTML

ă = ă
Ă = Ă
â = â
 = Â
î = î
Î = Î
ș = ș
Ș = Ș
ț = ț
Ţ = Ț

 b) Coduri pentru semne speciale în HTML

  &
& (ampersand)
<
< (semnul mai mic)
&gt;
> (semnul mai mare)
&quot;
” (ghilimelele)
&nbsp;
inserează un spațiu care nu permite ruperea rândului în acel loc

Despre redimensionarea imaginilor în html

În HTML există o funcție care ne permite să modificăm dimensiunile imaginilor pe care le inserăm într-o pagină web prin simpla specificare a parametrilor HEIGHT și WIDTH în eticheta IMG SRC.
Dacă este recomandat să specifici dimensiunile reale ale imaginii cu ajutorul acestor parametri, nu e deloc indicat să-i folosești pentru a schimba dimensiunile în care este afișată imaginea, din două motive simple.
1.      Odată,pentru că îți forțezi vizitatorii sitului să descărce fișiere mai mari decât au nevoie. De cealaltă parte, imagini mai mici înseamnă fișiere mai mici și un timp de încărcare redus.
2.     Apoi, browserele nu fac întotdeauna o treabă bună cu redimensionarea imaginilor, mai ales în cazul imaginilor GIF. Chiar dacă Safari, de exemplu, se descurcă destul de bine, Firefox face varză o imagine micșorată prin codul html.
 Și totuși, cum ne redimensionăm atunci imaginile? Se zice că redimensionarea în Photoshop (și alte programe de editare foto) pierde din calitatea imaginii. Cât se poate de fals. În Photoshop de exemplu, se poate regla re-eșantionarea imaginii, așa încât să nu se piardă nimic din detaliu. 
         Trebuie doar să alegi opțiunea “bicubică mai precisă (optimă pentru reducere)” din partea de jos a casetei de redimensionare a imaginii, atunci când schimbi lățimea și/sau înălțimea imaginii. Exact așa ca în ilustrația de mai jos.

Apoi poți adăuga simplu imaginea în sit și fii sigur că va arăta la fel de bine, indiferent de browser.

(sursa:http://www.smash.ro/geeks/despre-redimensionarea-imaginilor-in-html/)

Competente Digitale

 TABELE IN PAGINILE WEB-Limbajul HTML

Inserarea unui tabel se realizeaza cu ajutorul etichetelor container <table>...</table>
Un tabel este format din randuri si coloane,intersectia lor formand o celula.
  •    Inserare rand intr-un tabel :  se folosesc etichetele <tr>...</tr> ( de la " table row "= rand de tabel ).    Eticheta de sfarsit </tr> este optionala.
  • Inserare celula de date :  se folosesc etichetele <td>...</td>.
obs.
celulele de date reprezinta, de fapt, coloanele de pe randul respectiv!
Atribute ale etichetei <table> 
  • border-se utilizeaza pentru a adauga chenar unui tabel
     Poate lua ca valoare orice numar intreg si reprezinta grosimea in pixeli a chenarului tabelului(daca ia valoarea 0 bordurile sunt nevizualizate iar daca nu ia nici o valoare, tabelul va avea o grosime prestabilita egala cu 1 pixel).

  • width, stabileste latimea tabelului(in pixeli sau procente din latimea paginii web)
  • height,  stabileste inaltimea tabelului(in pixeli sau procente din inaltimea paginii web)
  •  align -se foloseste pentru a alinia tabelul in cadrul paginii web;
 Valori posibile: " left " ( valoarea prestabilita ), " center " si "right ".
   Alinierea este importanta pentru textul ce inconjoara tabelul.
       
Astfel :
  1. secventa <table align="left">, va avea ca efect dispunerea textului care urmeaza dupa punctul de inserare al tabelului  in partea dreapta a tabelului.
  2. secventa  <table align="right">, va avea ca efect dispunerea textului care urmeaza dupa punctul de inserare al tabelului  in partea stanga a tabelului..
  3. secventa   <table align="center">, va avea ca efect dispunerea textului care urmeaza dupa punctul de inserare al tabelului  pe toata latimea paginii, imediat sub tabel.

  •  hspace si vspace ,stabilesc distanta dintre tabel si celelalte elemente din pagina Web (atributul hspace reprezinta distanta pe orizontala dintre tabel si celelalte elemente ale paginii Web si poate fi orice numar pozitiv, inclusiv 0, si atributul vspace reprezinta distanta pe verticala dintre tabel si celelalte elemente ale paginii Web).
  •  bgcolor, stabileste culoarea fundal pentru intregul tabel prin eticheta <table>, a unei linii prin eticheta <tr> sau unei celule de date prin eticheta <td>.
Obs.
La definirea mai multe atribute bgcolor prioritatea maxima o va avea eticheta <td>,apoi <tr> si <table> ( prioritatea minima ).
  • cellspacing, reprezinta distanta in pixeli dintre doua celule vecine(valori pozitive inclusiv 0;implicit  egala cu 2). 
  • cellpadding,reprezinta distanta dintre marginea unei celule si continutul ei(numere intregi pozitive;implicit este egala cu 1).
Eticheta   <caption>
 ( de la "table caption" = titlu tabel ). Aceasta eticheta trebuie plasata in interiorul etichetelor <table>...</table>, dar nu in interiorul etichetelor <tr> sau <td> .
Atributului  align al etichetei <caption> stabileste modul de aliniere al titlului tabelului fata de tabel,in cadrul paginii web.
        
Poate lua una dintre valorile:
  1. bottom " ( sub tabel );
  2. top " ( deasupra tabelului );
  3. left " ( la stanga tabelului );
  4. right " ( la dreapta tabelului ).
Eticheta <th> 
( de la " tabel header " = cap de tabel ) in loc de <td>. Poate avea ca atribute toate atributele  etichetei <td> 
      Continutul celulelor definite cu <th> este scris cu caractere aldine si centrat.
Atributului align al etichetelelor <td>,<th> si <tr>.
     
Poate lua valorile:
  • left " ( la stanga ); 
  • center " ( centrat , valoarea prestabilita );
  • right " ( la dreapta );
  • char " ( alinierea se face fata de un caracter ).
Atributului valign al etichetelelor <td>,<th> si <tr>.
      
 Poate lua valorile:
  • " baseline " ( la baza );
  • " bottom " ( jos );
  • " middle " ( la mijloc, valoarea prestabilita );
  • " top " ( sus ).
Atributele width pentru latime si height pentru inaltime ale etichetelor <td> si <th>
Pot lua ca valori numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiv a inaltimii unei celule sau procente din latimea , respectiv inaltimea tabelului.

Atributele colspanrowspan ale etichetelor <td> si <th>
    Stabilesc extinderea unei celule peste un numar de celule egal cu valoarea pe care aceste atribute o iau(pe orizontala respectiv pe verticala;Determina ,de fapt,numarul de celule care se unifica pe orizontala respectiv pe verticala).

Obs.
Se poate face extinderea simultana pe orizontala si pe verticala ,caz in care sunt prezente ambele atribute.
Atributul " nowrapal etichetelelor <td> si <th>
Interzice intreruperea unei linii de text.Astfel , in tabel pot aparea coloane cu o latime oricat de mare.
Afisare celule vide ale unui tabel
In scopul de a afisa un chenar pentru celule vide se pot utiliza fie eticheta <br> dupa <td>, fie se pune &nbsp; dupa <td>
      Caracterul &nbsp; ( no break space ) este de fapt caracterul spatiu - nu va fi ignorat de browser.

FERESTRE IN HTML (CADRE)

     Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului subferstre in care sa fie incarcate documente HTML diferite.
     Ferestrele sunt definite intr-un fisier HTML special , in care blocul <body>...</body> este inlocuit de blocul <frameset>...</frameset>.      In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
     Un atribut obligatoriu al etichetei <frame> este src, care primeste ca valoare adresa URL a documentului HTML care va fi incarcat in acel cadru (frame). Definirea cadrelor se face prin impartirea ferstrelor (si a subferestrelor) in linii si coloane:
  • impartirea unei ferstre intr-un numar de subferestre de tip coloana se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastra;
  • impartirea unei ferestre intr-un numar de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastra;
Valorile acestor atribute descriu modul in care se face impartirea in subferestre.
       Valorile pot fi:
1.      un numar intreg de pixeli;
2.      procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %);
3.      n* care inseamna n parti din spatiul ramas;

Observatii:
- daca mai multe elemente din lista sunt configurate cu * , atunci spatiul disponibil ramas pentru ele se va imparti in mod egal.
- o subfereastra poate fi un cadru (folosind <frame>) in care se va incarca un document HTML sau poate fi impartita la randul ei in alte subfereste (folosind <frameset>-cadre imbricate).

Atribute ale etichetei <frameset>:
  •  bordercolor 
 Acest atribut primeste ca valoare un nume de culoare in limba engleza sau codul culorii in sistem RGB.
obs.
  Stabileste culoarea tuturor chenarelor cadrelor incluse
Utilizat cu eticheta <frame> stabileste culoarea chenarului pentru un cadru individual.
  • border 
    Stabileste latimea chenarelor tuturor cadrelor la un numar dorit de pixeli. (implicit valoarea este de 5 pixeli).O valoare de 0 pixeli va defini un cadru fara chenar. In mod prestabilit, chenarul unui cadru este afisat si are aspect tridimensional.
  • frameborder 
    Stabileste afisarea sau neafisarea chenarului cadrului.Se poate utiza atat ca atribut al etichetei <frameset> cat si al etichetei <frame>.
 

 Poate lua ca valori:
  1. "yes" -echivalent cu 1;
  2. "no"  -echivalent cu 0; 
Atribute ale etichetei <frame> 
  • scrolling 
 Se utizeaza pentru a adauga unui cadru o bara de derulare care permite navigarea in interiorul documentului afisat in interiorul cadrului.
     
Poate lua ca valori:
  1. "yes"  - barele de derulare sunt adaugate intotdeauna;
  2. "no"    - barele de derulare nu sunt utilizabile;
  3. "auto" - barele de derulare sunt vizibile atunci cand este necesar
         noresize al etichetei <frame> - utilizatorul nu poate redimensiona cadrul cu ajutorul mouse-ului. 
name-stabileste numele cadrului
obs.
Exista browsere care nu suporta cadre.Se poate utiliza in interiorul blocului <frameset> eticheta <noframes>.
      Daca programul de navigare stie sa interpreteze cadre, va ignora ce se gaseste in aceasta portiune, iar daca nu, materialul cuprins in zona <noframes>...</noframes> va fi singurul care va fi inteles si afisat.
   
Cadre interne in HTML
Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>
Un cadru intern se insereaza intr-o pagina Web in mod asemanator cu o imagine sau in modul in care se specifica marcajul <frame>.

 Atributele ale etichetei <iframe> 
Se preiau de la eticheta <frame>:
  • src,
  • border,
  • frameborder,
  • bordercolor,
  • marginheight, 
  • marginwidth,
  • scrolling,
  • name,
  • noresize;
sau de la eticheta <img>:   
  •  vspace,
  • hspace,
  • align,
  • width,
  • height;

Tinte pentru legaturi

    In mod prestabilit, la efectuarea unui clic pe o legatura, noua pagina (catre care indica legatura) o inlocuieste pe cea curenta in aceeasi fereastra (acelasi cadru)
       
Putem schimba acest lucru in doua moduri:
  • utilizarea etichetei  <base> in antet ; atributul target stabileste numele ferestrei (cadrului) in care se va incarca pagina referita de legatura din pagina curenta .
  • utilizarea  etichetei <a> cu atributului target, ia ca valoare numele ferestrei (cadrului) in care se va incarca pagina nou referita de legatura.
Observatie:
- daca este prezent atat un atribut target in <base> cat si un atribut target in <a>, atunci cele precizate de atributul target din <a> sunt prioritare.

Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei:

<frame name="nume_frame">
Valori pentru atributul target
  • "_self" (incarcarea noii pagini are loc in cadrul curent);
  • "_blank" (incarcarea noii pagini are loc intr-o fereastra noua);
  • "_parent" (incarcarea noii pagini are loc in cadrul parinte al cadrului curent daca acesta exista, altfel are loc in fereastra browserului curent);
  • "_top" (incarcarea noii pagini are loc in fereastra browserului ce contine cadrul curent);

FORMULARE in HTML

     Un formular este un ansamblu de zone active.
Poate contine: butoane ,casete de selectie,campuri de editare etc.
      Acestea permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului.
      O sesiune cu o pagina web ce contine un formular cuprinde urmatoarele etape:
1. Utilizatorul completeaza formularul si il expedieaza unui server.
2.  O aplicatie dedicata de pe server analizeaza formularul completat si (daca este necesar) stocheaza datele intr-o baza de date.
3. Daca este necesar serverul expedieaza un raspuns utilizatorului.

Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> si </form>.
Atribute ale etichetei <form>
Exista doua atribute esentiale ale elementului <form>:
  •  action precizeaza ce se va intampla cu datele formularului odata ce acestea ajung la destinatie.
     De regula ,valoarea atributului action este adresa URL a unui script aflat pe un server WWW care primeste datele formularului ,efectueaza o prelucrare a lor si expedieaza catre utilizator un raspuns.      
  •  method precizeaza metoda utilizata de browser pentru expedierea datelor formularului.
Sunt posibile urmatoarele valori:
  1. get (valoarea implicita).In acest caz ,datele din formular sunt adaugate la adresa URL precizata de atributul action
- nu sunt permise cantitati mari de date (maxim 1 Kb)
- intre adresa URL si date este inserat un "?".
        
Datele sunt adaugate conform sintaxei: nume_camp = valoare_camp. Intre diferite seturi de date este introdus un "&".

    2.  post

 In acest caz datele sunt expediate separat. Sunt permise cantitati mari de date (ordinul MB)
Pentru ca un formular sa fie functional, trebuie precizat ce se va intampla cu el dupa completare si expediere.
    Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (e-mail).
       Pentru aceasta se foloseste un atribut al etichetei <form> si anume 
action care primeste ca valoare " mailto: " concatenat cu o adresa valida de e-mail catre care se va expedia formularul completat.
Elementele unui formular

1.Campuri de editare 
          Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>
    Tipul elementului se stabileste cu ajutorul atributului type al etichetei <input>.
     Pentru un camp de editare, acest atribut primeste valoarea "text". 

    Alte atribute pentru un element <input> sunt:
    • name ,permite atasarea unui nume fiecarui element al formularului.
    •  value ,care permite atribuirea unei valori initiale unui element al formularului.
    • size specifica latimea campului de editare depaseste aceasta latime ,atunci se executa automat o derulare acestui camp;
    • maxlength specifica numarul maxim de caractere pe care le poate primi un camp de editare; caracterele tastate peste numarul maxim sunt ignorate.
    Observatii:
    - daca atributul type lipseste intr-un element <input> , atunci campul respectiv este considerat in mod prestabilit ca fiind de tip "text".
    - formularele cu un singur camp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea si apasarea tastei ENTER.

    Exemplu:
        <input type="text" name="numele" value="Numele si prenumele">

    2.Butonul Submit/ Reset
      Daca un element de tip <input> are atributul type configurat la valoarea "submit",atunci in formular se introduce un buton pe care scrie "submit" iar valorile respective ,din campurie de editare vor fi transmise serverului.
      Daca un element de tip <input> are atributul type configurat la valoarea "reset" ,atunci in formular se introduce un buton pe care scrie "Reset". La apasarea acestui buton ,toate elementele din formular primesc valorile prestabilite (definita odata cu formularul ), chiar daca aceste valori au fost modificate de utilizator.
         Un buton Submit/Reset poate primi un nume cu ajutorul atributului name si o valoare printr-un atribut value.
        Un asemenea buton afiseaza textul "Submit/Reset" daca atributul 
    value lipseste, respectiv valoarea acestui atribut in caz contar.
    Exemplu:
    <input type="reset" value="sterge"> <input type="submit">

    3.Camp de editare de tip "password"
    Daca se utilizeaza eticheta <input> avand atributul type configurat la valoarea "password" , atunci in formular se introduce un element asemanator cu un camp de editare obisnuit (introdus prin type="text").
    Toate atributele unui camp de editare raman valabile.
    Singura deosebire consta in faptul ca acest camp de editare nu afiseaza caracterele in clar,ci numai caractere *,care ascund de privirile altui utilizator aflat in apropiere valoarea introdusa intr-un asemenea camp.
    La expedierea formularului insa, valoarea tastata intr-un camp de tip "password" se transmite in clar.

             Exemplu:
       Password: <input type="password" name="parola" ><br>
    4.Butoane radio
      Butoanele radio permit alegerea ,la un moment dat , a unei singure variante din mai multe posibile
     Butoanele radio se introduc prin eticheta <input> cu atributul type avand valoarea "radio".
    Exemplu:
    <input type="radio" name="sex" value="f"><br>
    La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f",in functie de alegerea facuta de utilizator.

    5.Casete de validare
    O caseta de validare (checkbox)permite selectarea sau deselctarea unei optiuni.
    Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea "checkbox".
          

    Observatii:
    - fiecare caseta poate avea un nume definit prin atributul name.
    fiecare caseta poate avea valoarea prestabilita "selectat" definita prin atributul checked.

     Pizza<input type="checkbox" name="pizza" value="o portie">Nectar <input type="checkbox" name="nectar" value="un pahar"> 
    Bere
     <input type="checkbox" name="bere" value="o sticla"> 
    Cafea
     <input type="checkbox" name="cafea" value="o ceasca"><br>
    6.Casete de fisiere
    Intr-o pereche "name = value" a unui formular se poate folosi intregul continut al unui fisier pe post de valoare.
    Pentru aceasta se insereaza un element <input> intr-un formular , cu atributul 
    type avand valoarea "file" (fisier).
     

    Atributele pentru un element de tip caseta de fisiere:
    • atributul name permite atasarea unui nume
    • atributul value primeste ca valoare adresa URL a fisierului care va fi expediat o data cu formularul. Aceasta valoare poate fi atribuita direct atributului value, se poate fi tastata intr-un camp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete de tip File Upload sau Choose File care apare la apasarea butonului Browse... din formular;
    • atributul enctype precizeaza metoda utilizata la criptarea fisierului de expediat.Valoarea acestui atribut este "multipart/form-data".
    Exemplu:                                                                                                                                               Alegeti fisierul:<input type="file" name="fisier" enctype="multipart/form-data"><br>
   7.Campuri de editare multilinie
Intr-un formular campuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>.   

Eticheta are urmatoarele atribute:
  • atributul   cols, care specifica numarul de caractere afisate intr-o linie;
  • atributul rows, care specifica numarul de linii afisate simultan;
  • atributul name, care permite atasarea unui nume campului de editare multilinie;
  • atributul wrap, (de la "word wrap"=trecerea cuvintelor pe randul urmator, care determina comportamentul campului de editare fata de sfarsitul de linie.
    Acest atribut poate primi urmatoarele valori:

       a) " off "; in acest caz:
    • intreruperea cuvintelor la marginea dreapta a editorului se produce numai cand doreste utilizatorul;
    • caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul;
   b) " hard "; in acest caz:
    • se produce intreruperea cuvintelor la marginea dreapta a editorului ;
    • caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul;
   c) " soft "; in acest caz:
    • se produce intreruperea cuvintelor la marginea dreapta a editorului ;
    • nu se include caracterul de sfarsit de linie in textul transmis serverului o data cu formularul;
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial. 
</textarea>
      In exemplul urmator este prezentat un formular continand elemente prezentate anterior. Campurile formularului sunt incluse in celule unui tabel pentru a obtine o aliniere dorita.
8.Butoane
   Intr-un formular pot fi afisate butoane.Cand utilizatorul apasa un buton, se lanseaza in executie o functie de tratare a acestui eveniment.
limbajul HTML nu permite scrierea unor astfel de functii (acest lucru este posibil daca se utilizeaza limbajele Javascript sau Java).
    Pentru a insera un buton intr-un formular , se utilizeaza eticheta <input> avand atributul 
type configurat la valoarea "button".
Alte doua atribute ale elem entului "button" sunt:
  • atributul name, care permite atasarea unui nume butonului
  • atributul value, care primeste ca valoare textul ce va fi afisat pe buton.
Un buton pentru lansarea in executie a unei actiuni poate fi introdus intr-un formular prin elementul <input> avand atributul type configurat la valoarea "button", asa cum s-a vazut mai inainte.
Exista o a doua modalitate de a introduce intr-o pagina Web un buton de apasat, si anume prin intermediul blocului <button>...</button>.
Un astfel de buton poate fi inserat intr-un formular, in acest caz declansand actiuni legate de acel formular, sau poate fi introdus oriunde in pagina pentru initierea unor actiuni independente de formulare.

Atributele posibile ale elementului "button" sunt:
  • name acorda elementului un nume;
  • value precizeaza textul care va fi afisat pe buton;
  • type precizeaza actiunea ce se va executa la apasarea butonului daca acesta este inclus intr-un formular.Valorile posibile pentru acest atribut sunt: -"button" , -"submit" ,-"reset".
In corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei imagini.

Observatii finale:

- elementul <form> poate avea un atribut target, care primeste ca valoare numele unei ferestre a browserului in care va fi incarcat raspunsul trimis serverului WWW la expedierea unui formular.
- toate elementele cuprinse intr-un formular pot avea un atribut disabled care permite dezactivarea respectivului element.
- toate elementele de tip text cuprinse intr-un formular pot avea un atribut readonly care interzice modificarea continutului acestor elemente.


Trimiteți un comentariu