vineri, 30 octombrie 2015

30.10.2015



UNITATEA DE INVATARE: Instrumente de lucru pentru crearea site-urilor Web

HTML – elemente de baza


  • Elemente de marcare
  • Formatari
  • Organizarea textului
HTML (HyperText Markup Language) este un limbaj folosit pentru crearea paginilor Web. 
In general, HTML este usor de utilizat, fiind bazat pe un elemente numite tag-uri. 
HTML foloseste aceste elemente pentru introducerea imaginilor si a linkurilor, pentru a modifica fontul curent,etc.

Un tag consta dintr-o litera sau cuvant rezervat intre parantezele unghiulare < si >. 
Iata cateva exemple:
Tag
Efect
<b>
text
<i>
text
<p>
Creeaza paragraf nou
<img>
Insereaza o poza
Majoritatea comenzilor HTML sunt alcatuite din doua tag-uri:
 unul de inceput si unul de sfarsit, cu deosebirea ca tag-ul de sfarsit contine caracterul / dupa <. Codul de mai jos:
Acesta este un <b>exemplu</b>.
va aparea pe pagina astfel:    Acesta este un exemplu.

Structura unei pagini HTML
Majoritatea paginilor Web au cateva lucruri in comun, cum ar fi sectiunile head si body, marcate prin tag-urile: <head> si respectiv <body>. Anumite informatii despre pagina, cum ar fi titlul, se scriu in sectiunea head, iar continutul propriu-zis al paginii - in body. De asemenea, fiecare pagina HTML incepe si se termina cu tag-ul <html> (</html>).

Iata structura de baza a unei pagini HTML:
<html>
<head>
    (titlu, alte informatii....)
</head>
<body>
    (Continutul paginii - text, imagini)
</body>
</html>
Daca vizualizezi aceasta pagina intr-un browser, nu vei vedea nimic, deoarece pagina nu contine deocamdata text sau imagini.

Pentru a da paginii un titlu oarecare, vom folosi tag-ul <title>, inserat intre: <head> si:</head>.
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
</body>
</html>
In bara de sus a browserului va aparea textul: Pagina mea!

Inserarea textului
Daca vrei ca textul tau sa apara sub forma de paragrafe, in sectiunea <body> poti folosi tag-ul <p> (paragraph).
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
<p>Aceasta este prima mea pagina de web !</p>
</body>
</html>
Felicitari! Ai creat prima ta pagina Web.

Noi tag-uri
In continuare poti folosi tag-urile HTML pentru a imbunatati aspectul paginii.

De exemplu, tag-urile <b> .... </b> sau <strong> .... </strong> au ca efect ingrosarea textului (bold).
Aceasta este <b>prima</b> pagina construita de mine!
apare in felul urmator:

Aceasta este prima pagina construita de mine!

Pentru a centra textul, se foloseste tot tag-ul <p> cu atributul align="center":
<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>
Pentru a schimba culoarea de fundal (background) in negru si a textului in alb, in tag-ul body trebuie specificat bgcolor="#000000" si respectiv text="#FFFFFF".
<body bgcolor="#000000" text="#FFFFFF">
Codul HTML va arata astfel:
<html>
<head>
<title>Pagina mea !</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>
</body>
</html>
Incearca in continuare sa modifici pagina adaugand noi paragrafe si schimband culoarea de fundal sau culoarea textului.
<HTML> </HTML>
Defineşte un fişier în format Web
<HEAD> </HEAD>
Antetul documentului
<TITLE> </TITLE>
Tilul documentului
<BODY> </BODY>
Corpul paginii HTML
BGCOLOR = culoare
Culoarea de fond a paginii
TEXT=culoare
Culoarea textului pe pagină

<P>
Paragraf


<FONT> </FONT>
Specifică atribute ale textului încadrat
SIZE=n
Dimensiunea textului este 1-7
FACE="a,b"
Specifică fontul: a, dacă este disponibil, sau b
COLOR=s
Culoarea textului: fie un nume de culoare, fie o valoare RGB
<BR>
Linie nouă


<!-- -->
Comenatriu HTML
<CENTER> </CENTER>
Centrează materialul în pagină
<HR>
Riglă orizontală
SIZE=x
Înălţimea riglei în pixeli
WIDTH=x
Lăţimea riglei în pixeli sau în procente
NOSHADE
Dezactivează afişarea umbrei pentru rigla orizontală
ALIGN=x
Alinierea riglei orizontale în pagina (left, center, right)
COLOR=x
Culoarea riglei orizontale (numai pentru IE)


<sup></sup>
Text exponenţial, superscript. Exp: 23 se scrie 2<sup>3</sup>
<sub></sub>
Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O
Formatarea caracterelor
<B> </B>
Afişează text cu caractere aldine
<I> </I>
Afişează text cu caractere cursive
<U> </U>
Afişează text subliniat
<TT> </TT>
Text cu font monospaţiu
<CITE> </CITE>
Citare bibliografică
<CODE> </CODE>
Listing de program
<EM> </EM>
Stil logic de evidenţiere
<KBD> </KBD>
Text de la tastatură
<STRONG> </STRONG>
Evidenţiere logică puternică
<VAR> </VAR>
Program sau variabilă
<BASEFONT SIZE = n>
Specifică dimensiunea implicită a fontului din pagină


Tabel diacritice
Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ş, ţ. Aspectul şi denumirea acestor semne sunt arătate în tabelul de mai jos.
Ă ă căciulă
 â Î î accent circumflex;
ş Ş ţ Ţ virgulă, plasată sub literele corespunzătoare s, S, t, T.

valoarecod
ă&#259;
Ă&#258;
â&#226;
Â&#194;
î&#238;
Î&#206;
ş&#351;
Ş&#350;
ţ&#355;
Ţ&#354;

joi, 15 octombrie 2015

Corectura test initial











In conformitate cu actualele reglementari, proba de evaluare pentru  competente digitale se va finaliza cu acordarea unui punctaj astfel:


a) 0-   25  puncte            utilizator incepator
b) 26 -50  puncte            utilizator de nivel mediu
c) 51- 74  puncte            utilizator avansat
d) 75-100 puncte           utilizator experimentat


Va recomandam sa accesati si site-ul Ministerului Educatiei Nationale,www.edu.ro,  pentru ultimile modificari ale legislatiei.

Barem de corectare varianta_2_2014 <<descarca>>
Barem de corectare varianta_3_2014 <<descarca>>
Barem de corectare varianta_5_2014 <<descarca>>
Barem de corectare varianta_13_2013 <<descarca>>
Barem de corectare varianta_10_2013 <<descarca>>
Barem de corectare varianta_10_2012 <<descarca>>
Barem de corectare varianta_1_2012 <<descarca>>

joi, 8 octombrie 2015

9.10.2015

 SOFT EDUCATIONAL UTILIZAT PENTRU PREDAREA LECTIEI:

UNITATEA DE INVATARE: Instrumente de lucru pentru crearea site-urilor Web

HTML – elemente de baza


  • Elemente de marcare
  • Formatari
  • Organizarea textului
HTML (HyperText Markup Language) este un limbaj folosit pentru crearea paginilor Web. 
In general, HTML este usor de utilizat, fiind bazat pe un elemente numite tag-uri. 
HTML foloseste aceste elemente pentru introducerea imaginilor si a linkurilor, pentru a modifica fontul curent,etc.

Un tag consta dintr-o litera sau cuvant rezervat intre parantezele unghiulare < si >. 
Iata cateva exemple:
Tag
Efect
<b>
text
<i>
text
<p>
Creeaza paragraf nou
<img>
Insereaza o poza
Majoritatea comenzilor HTML sunt alcatuite din doua tag-uri:
 unul de inceput si unul de sfarsit, cu deosebirea ca tag-ul de sfarsit contine caracterul / dupa <. Codul de mai jos:
Acesta este un <b>exemplu</b>.
va aparea pe pagina astfel:    Acesta este un exemplu.

Structura unei pagini HTML
Majoritatea paginilor Web au cateva lucruri in comun, cum ar fi sectiunile head si body, marcate prin tag-urile: <head> si respectiv <body>. Anumite informatii despre pagina, cum ar fi titlul, se scriu in sectiunea head, iar continutul propriu-zis al paginii - in body. De asemenea, fiecare pagina HTML incepe si se termina cu tag-ul <html> (</html>).

Iata structura de baza a unei pagini HTML:
<html>
<head>
    (titlu, alte informatii....)
</head>
<body>
    (Continutul paginii - text, imagini)
</body>
</html>
Daca vizualizezi aceasta pagina intr-un browser, nu vei vedea nimic, deoarece pagina nu contine deocamdata text sau imagini.

Pentru a da paginii un titlu oarecare, vom folosi tag-ul <title>, inserat intre: <head> si:</head>.
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
</body>
</html>
In bara de sus a browserului va aparea textul: Pagina mea!

Inserarea textului
Daca vrei ca textul tau sa apara sub forma de paragrafe, in sectiunea <body> poti folosi tag-ul <p> (paragraph).
<html>
<head>
<title>Pagina mea !</title>
</head>
<body>
<p>Aceasta este prima mea pagina de web !</p>
</body>
</html>
Felicitari! Ai creat prima ta pagina Web.

Noi tag-uri
In continuare poti folosi tag-urile HTML pentru a imbunatati aspectul paginii.

De exemplu, tag-urile <b> .... </b> sau <strong> .... </strong> au ca efect ingrosarea textului (bold).
Aceasta este <b>prima</b> pagina construita de mine!
apare in felul urmator:

Aceasta este prima pagina construita de mine!

Pentru a centra textul, se foloseste tot tag-ul <p> cu atributul align="center":
<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>
Pentru a schimba culoarea de fundal (background) in negru si a textului in alb, in tag-ul body trebuie specificat bgcolor="#000000" si respectiv text="#FFFFFF".
<body bgcolor="#000000" text="#FFFFFF">
Codul HTML va arata astfel:
<html>
<head>
<title>Pagina mea !</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center"> Aceasta este  <b>prima</b> pagina construita de mine!</p>
</body>
</html>
Incearca in continuare sa modifici pagina adaugand noi paragrafe si schimband culoarea de fundal sau culoarea textului.
<HTML> </HTML>
Defineşte un fişier în format Web
<HEAD> </HEAD>
Antetul documentului
<TITLE> </TITLE>
Tilul documentului
<BODY> </BODY>
Corpul paginii HTML
BGCOLOR = culoare
Culoarea de fond a paginii
TEXT=culoare
Culoarea textului pe pagină

<P>
Paragraf


<FONT> </FONT>
Specifică atribute ale textului încadrat
SIZE=n
Dimensiunea textului este 1-7
FACE="a,b"
Specifică fontul: a, dacă este disponibil, sau b
COLOR=s
Culoarea textului: fie un nume de culoare, fie o valoare RGB
<BR>
Linie nouă


<!-- -->
Comenatriu HTML
<CENTER> </CENTER>
Centrează materialul în pagină
<HR>
Riglă orizontală
SIZE=x
Înălţimea riglei în pixeli
WIDTH=x
Lăţimea riglei în pixeli sau în procente
NOSHADE
Dezactivează afişarea umbrei pentru rigla orizontală
ALIGN=x
Alinierea riglei orizontale în pagina (left, center, right)
COLOR=x
Culoarea riglei orizontale (numai pentru IE)


<sup></sup>
Text exponenţial, superscript. Exp: 23 se scrie 2<sup>3</sup>
<sub></sub>
Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O
Formatarea caracterelor
<B> </B>
Afişează text cu caractere aldine
<I> </I>
Afişează text cu caractere cursive
<U> </U>
Afişează text subliniat
<TT> </TT>
Text cu font monospaţiu
<CITE> </CITE>
Citare bibliografică
<CODE> </CODE>
Listing de program
<EM> </EM>
Stil logic de evidenţiere
<KBD> </KBD>
Text de la tastatură
<STRONG> </STRONG>
Evidenţiere logică puternică
<VAR> </VAR>
Program sau variabilă
<BASEFONT SIZE = n>
Specifică dimensiunea implicită a fontului din pagină



Marcaje pentru liste
<DD>
Descriere definiţie
<DL> </DL>
Lista de tip definiţie
<DT>
Termen de definiţie
<LI>
Element de listă
<OL>
Listă ordonată (numerotată)
TYPE=tip
Tipul numerotării. Valori posibile: A, a, I, i, 1
START=x
Numărul de început al listei ordonate
<UL>
Listă neordonată (marcată)
TYPE=formă
Forma marcajului. Valori posibile: circle, square, disc.

Marcaje pentru cadre
<FRAMESET> </FRAMESET>Definirea redactării paginii
COLS=xNumărul şi mărimea relativă a coloanelor
ROWS=xNumărul şi mărimea relativă a liniilor
BORDER=xSpecifică starea "on" (activă) sau "off" (inactivă) pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = xSpecifică mărimea chenarului
FRAMESPACING = xMărimea spaţiului dintre două cadre adiacente
<FRAME>Definiţia unui anumit cadru
SRC=urlURL-ul sursă pentru cadru
NAME=numeNumele cadrului (utilizat împreună cu TARGET=nume ca parte componentă a marcajului de tip ancoră<a>
SCROLLING=scrlDefineşte opţiunea barei de derulare.Valori posibile: on(activă), off(inactivă), auto (automat)
FRAMEBORDER=xMărimea chenarului din jurul cadrului
MARGINHEIGHT=xSpaţiul suplimentar de deasupra şi dedesubtul unui anumit cadru
MARGINWIDTH=xSpaţiu suplimetar la stânga şi la dreapta unui anumit cadru
<NOFRAMES> </NOFRAMES>Secţiunea de pagină afişată pentru utilizatorii care nu pot vedea un cadru
<IFRAME>Cadru intern (numai pentru IE)
SRC=urlSursa cadrului
NAME=sNumele ferestrei (util pentru TARGET)
HEIGHT=xÎnăţtimea cadrului înglobat
WIDTH=xLăţimea cadrului înglobat

Marcaje pentru tabele
<TABLE> </TABLE>Tabel HTML
BORDER=xChenarul tabelului
CELLPADDING=xSpaţiul suplimentar în cadrul celulelor tabelului
CELLSPACING=xSpaţiul suplimentar între celulele tabelului
WIDTH=xLăţimea impusă tabelului
FRAME=valoareAjustarea fină a tabelului
RULES=valoareAjustarea fină a riglelor tabelului
BORDERCOLOR = culoareSpecifică culoarea chenarului tabelului
BORDERCOLORLIGHT = culoareCea mai deschisă culoare din cele două culori specificate
BORDERCOLORDARK = culoareCea mai închisă culoare din cele două culori specificate
ALIGN=leftAliniază tabelul la marginea din stânga a paginii, iar textul curge în partea dreaptă
ALIGN=rightAliniază tabelul la marginea din dreapta a paginii, iar textul curge în partea stângă
HSPACE=xSpaţiu suplimetar pe orizontală în jurul tabelului
VSPACE=xSpaţiu suplimetar pe verticală în jurul tabelului
COLS=xSpecifică numărul de coloane ale unui tabel
<COLGROUP> </COLGROUP>Defineşte un set de definiţii de coloane cu ajutorul marcajului <col>
<COL WIDTH=x>Defineşte lăţimea unei coloane exprimată în pixeli
<THEAD> </THEAD>Defineşte titlul tabelului
<BODY> </TBODY>Defineşte corpul tabelului
<TR> </TR>Linie de tabel
BGCOLOR=culoareSpecifică culoarea de fond pentru întreaga linie
ALIGN=aliniereAlinierea celulelor de pe linia curentă (left, center, right)
<TD> </TD>Celula de date a tabelului
BGCOLOR=culoareSpecifică culoarea de fond pentru celula de date
COLSPAN=xNumărul de coloane pe care se întinde celula curentă de date
ROWSPAN=xNumărul de linii pe care se întinde celula curentă de date
ALIGN=aliniereAlinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center)
VALIGN=aliniereAlinierea pe verticală a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle)
BACKGROUND=urlSpecifică imaginea de fond pentru celula tabelului
NOWRAPNu permite despărţirea textului pe linii în cadrul unei celule
ALIGN=baselineAliniază celule de date cu linia de bază a textului adiacent
ALIGN=caracterAliniază o coloană faţă de un anumit carcater (caracterul prestabilit este ".")
ALIGN=justifyAliniază atât marginea din stânga cât şi marginea din dreapta a unui text

Adăugarea imaginilor
<IMG >Marcajul de introducere a imaginilor
SRC=urlSursa fişierului grafic
ALT=textTextul alternativ de afişat, dacă este necesar
ALIGN=aliniereAlinierea imaginii în pagină. Valori posibile: top (sus), middle (în mijloc), bottom (jos), left (în stânga), right (la dreapta)
HEIGHT=xÎnălţimea imaginii (în pixeli)
WIDTH=xLăţimea imaginii
BORDER=xChenarul din jurul imaginii, atunci când aceasta este utilizată ca hiperlegătură
HSPACE=xSpaţiul suplimentar pe orizontală din jurul imaginii (în pixeli)
VSPACE=xSpaţiul suplimentar pe verticală din jurul imaginii (în pixeli)

Tabel diacritice
Limba română foloseşte cinci litere cu semne diacritice: ă, â, î, ş, ţ. Aspectul şi denumirea acestor semne sunt arătate în tabelul de mai jos.
Ă ă căciulă
 â Î î accent circumflex;
ş Ş ţ Ţ virgulă, plasată sub literele corespunzătoare s, S, t, T.

valoarecod
ă&#259;
Ă&#258;
â&#226;
Â&#194;
î&#238;
Î&#206;
ş&#351;
Ş&#350;
ţ&#355;
Ţ&#354;

joi, 1 octombrie 2015

2.10.2015 Test initial

SUBIECT NR.1
1. Descarcati  fisa si pachetele de fisiere pe desktop intr-un folder cu numele Test initial 2015 
2. Rezolvati Subiectul II, Subiectul III pe foia de test.
3. Rezolvati Subiectul IV punctul 1, 2, 3, 5.
4. Postati arhiva folderului cu numele Test initial 2015, la sfarsitul testului, pe grupul clasei.


SUBIECT NR.2
1. Descarcati  fisa si pachetele de fisiere pe desktop intr-un folder cu numele Test initial 2015
2. Rezolvati Subiectul II, Subiectul III pe foia de test.
3. Rezolvati Subiectul IV punctul 1, 2, 3, 5.
4.  Postati arhiva folderului cu numele Test initial 2015, la sfarsitul testului, pe grupul clasei.

SUBIECT NR.3
1. Descarcati  fisa si pachetele de fisiere pe desktop intr-un folder cu numele Test initial 2015 
2. Rezolvati Subiectul II, Subiectul III pe foia de test.
3. Rezolvati Subiectul IV punctul 1, 2, 3, 5. 
4. Postati arhiva folderului cu numele Test initial 2015, la sfarsitul testului, pe grupul clasei