Anunt!

Atentie! Anunt!

In perioada de evaluare primiti 3 note pentru:
1. Documente realizate in HTML ora de ora, vor fi trimise simultan pe adresele padurariuemanuela12@yahoo.ro,

padurariuemanuela12@yahoo.com ;

2. Lucrarile si fisele de recapitulare atestat;
3. Evaluare activitate la ora:
Activitatea nr.1: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.2: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.3: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.4: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.5: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.6: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.7: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.8: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.9: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
Activitatea nr.10: 0,50 p (in caiete verific: data, titlul, subiecte discutate, sarcina de lucru)
2,50 p =1p existenta blog+1p argumentari per lectie - blog personal (ce am invatat, ce as fi vrut sa invat, aprecieri, probleme...)+ 0,50 comentarii la sf fiecarei lectii pe blogul profesorului
1.50p rezolvare tema +teme pentru acasa  (in caiet)
1p oficiu

Atentie!Termenul de predare caiete - profesor, miercuri, 30 noiembrie 2011.

Stimati  elevi,

imi exprim regretul ca spre deosebire de clasele a IX-a si a X-a, voi nu va exprimati sugestiile, aprecierile  ora de ora pe blog. 

Astfel am comunica mult mai bine si as identifica mai usor problemele voastre. 

Cred ca daca vizitati blogul claselor indicate ati intelege rolul acestor postari. 

Ati obseva si modul de notare identic cu particularitatile specifice anului de studiu.

Va multumesc!

ATESTAT - Activitatea nr.4

Studiu individual  

 Aplicatia 1 – creare, mutare, stergere de directoare

Pe discul C:\ creati un director cu numele STUDENT.
1.1. În Directorul STUDENT creati urmatoarea structura arborescenta de directoare:

 

1.2. Mutati directorul LABORATOR 1 în directorul DOCUMENTE.
1.3. În directorul LABORATOR 1 creati un fisier cu numele MEMORIE.TXT în care scrieti care este spatiul disponibil pe discul C al calculatorului dvs.
1.4. Copiati fisierul MEMORIE.TXT în directorul DANA.
1.5. Schimbati numele directorului DANA în ANA. Schimbati numele fisierului MEMORIE.TXT din directorul ANA în MEM.TXT

1.6. Stergeti directorul LABORATOR BIE.
1.7. În directorul CV creati un fisier TXT cu numele CV.TXT, în care faceti un scurt CV al dvs. Salvati modificarile facute în fisier.
1.8. În directorul ANA creati directorul FINAL. Copiati în acest director fisierele CV.TXT si MEM.TXT.

 Aplicatia 2 – creare, copiere, cautare de fisiere si directoare

În directorul STUDENT creati urmatoarea structura arborescenta de directoare:

2.1. Cautati pe calculator cinci fisiere cu extensia DOC si copiati-le în directorul DOCUMENTE WORD. În acest director creati fisierul CONTINUT1.TXT în care scrieti numele tuturor fisierelor copiate.

2.2. Cautati pe calculator cinci fisiere cu extensia TXT si copiati-le în directorul FISIERE TXT. În acest director creati fisierul CONTINUT2.TXT în care scrieti numele tuturor fisierelor copiate.

2.3. Cautati pe calculator cinci fisiere cu extensia BMP si copiati-le în directorul IMAG BMP. În acest director creati fisierul CONTINUT3.TXT în care scrieti numele tuturor fisierelor copiate.

2.4. Cautati pe calculator cinci fisiere cu extensia GIF si copiati-le în directorul IMAG GIF. În acest director creati fisierul CONTINUT4.TXT în care scrieti numele tuturor fisierelor copiate

2.5. Cautati pe calculator cinci fisiere cu extensia JPG si copiati-le în directorul IMAG JPG. În acest director creati fisierul CONTINUT5.TXT în care scrieti numele tuturor fisierelor copiate.

2.6. Copiati fisierele CONTINUT1, CONTINUT2, CONTINUT3, CONTINUT4, CONTINUT5 în directorul ANA.

Aplicatia 3 – creare, copiere, cautare avansata de fisiere

În directorul STUDENT creati urmatoarea structura arborescenta de directoare:

3.1. Cautati pe calculator cinci fisiere cu extensia DOC, si care sa înceapa cu litera A. Copiati cele cinci fisiere în directorul DOCUMENTE A. În acest director creati fisierul CONTINUT1.TXT în care scrieti numele tuturor fisierelor copiate.

3.2. Cautati pe calculator cinci fisiere cu extensia DOC, si care au mai mult de 300 KB. Copiati cele cinci fisiere în directorul DOCUMENTE MARI. În acest director creati fisierul CONTINUT2.TXT în care scrieti numele tuturor fisierelor copiate.

3.3. Cautati pe calculator cinci fisiere cu extensia DOC, si care au mai putin de 200 KB. Copiati cele cinci fisiere în directorul DOCUMENTE MICI. În acest director creati fisierul CONTINUT3.TXT în care scrieti numele tuturor fisierelor copiate.

3.4.. Cautati pe calculator cinci fisiere cu extensia EXE, si care sa fie create în ultimul an. Copiati cele cinci fisiere în directorul PROGRAME NOI. În acest director creati fisierul CONTINUT4.TXT în care scrieti numele tuturor fisierelor copiate.

3.5. Cautati pe calculator cinci fisiere cu extensia EXE, si care sa contina în nume litera s. Copiati cele cinci fisiere în directorul PROGRAME S. În acest director creati fisierul CONTINUT5.TXT în care scrieti numele tuturor fisierelor copiate.

3.6. Cautati pe calculator cinci fisiere cu extensia EXE, si care sa aiba ultimele 2 litere din nume, literele U si P. Copiati cele cinci fisiere în directorul PROGRAME UP. În acest director creati fisierul CONTINUT6.TXT în care scrieti numele tuturor fisierelor copiate.

3.7. Copiati fisierele CONTINUT1, CONTINUT2, CONTINUT3, CONTINUT4, CONTINUT5 în directorul MARIA.

Aplicatia 4  – creare, mutare, stergere de directoare si fisiere

Pe discul C:\ creati un director cu numele STUDENT.
4.1. În Directorul STUDENT creati urmatoarea structura arborescenta de directoare:

4.2. Mutati directorul LABORATOR 1 în directorul DOCUMENTE.

4.3. În directorul LABORATOR 1 creati un fisier cu numele MEMORIE.TXT în care scrieti care este spatiul disponibil pe discul C al calculatorului dvs.

4.4. Copiati fisierul MEMORIE.TXT în directorul DANA.

4.5. Schimbati numele fisierului MEMORIE.TXT din directorul ANA în MEM.TXT

4.6. Stergeti directorul LABORATOR BIE.

4.7. În directorul CV creati un fisier TXT cu numele CV.TXT, în care faceti un scurt CV al dvs. Salvati modificarile facute în fisier.

4.8. În directorul DANA creati directorul FINAL. Copiati în acest director fisierele CV.TXT si MEM.TXT.

4.9. Cautati cinci fisiere cu extensia DOC pe care le copiati în directorul DANA

4.10. În directorul DANA creati directorul COPIE. În acest director copiati toate fisierele din DANA.

4.11. Comparati din punct de vedere al continutului de fisiere directoarele DANA si COPIE. Bazele informaticii economice 37

4.12. Modificati fisierul CV.TXT din directorul DANA, adaugând informatie. Comparati fisierele CV.TXT din directoarele DANA si COPIE.

Activitatea nr.11: 02.12 - 06.12

 Foi de stiluri 

Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a paginilor Web.

Ce sunt foile de stiluri

Un stil este un set de caracteristici de formatare aplicabile unei etichete HTML. 

O foaie de stiluri (CSS - Cascade Style Sheet) este o colectie de stiluri si se poate afla fie in pagina web, fie intr-un fisier separat. 

Conceptul de stil a fost introdus incepand cu HTML 4 si este intalnit atat in editoarele de text moderne (ex. Word), cat si in editoarele HTML (ex. Dreamweaver - vezi figura). 

Lucrul cu stiluri faciliteaza foarte mult crearea si intretinerea unui site, oferind o serie de avantaje:

• stabilirea unui aspect unitar pentru toate paginile din site
• schimbarea aspectului mai multor pagini, prin modificarea foii de stiluri pe care se bazeaza
• reducerea dimensiunii paginilor - deoarece instructiunile de formatare se transfera intr-o foaie de stil externa (fisier cu extensia .css) apelata din paginile respective
• operatii de formatare dificile in HTML-ul obisnuit - cum ar fi: marimea fontului = 80 puncte, imagine de fundal pentru cuvinte si altele

In exemplul urmator, grupam intr-un stil cateva caracteristici de formatare pentru eticheta <P>.
Ca rezultat, toate paragrafele vor avea aspectul precizat:
<html>
<head>
<style>
   p {border: thin dotted lime; color: green}
</style>
</head>
<p>Filozoful Blagomirea</p><p>Tine-n mana adevarul</p><p>Si de-aceea se munceste</p><p>A seca tot calimarul</p>
                                            </html>

Modificand doar stilul din linia a 4-a, se schimba aspectul paragrafelor:

<html>
<head>
<style>
   p {background: #0077ff; color: white}
</style>
</head>
<p>Filozoful Blagomirea</p><p>Tine-n mana adevarul</p><p>Si de-aceea se munceste</p><p>A seca tot calimarul</p>
</html>

Browserele actuale, cu mici exceptii, suporta foile de stiluri. Browserele care nu suporta stiluri afiseaza pur si simplu instructiunile de stil in pagina, ceea ce este neplacut. Pentru a preveni aceasta situatie, se inchid instructiunile de stil intre comentarii: <!-- si -->:

<style>
<!--
   p {font-size: 21; color: blue}
-->
</style>

Definirea stilului

Definirea stilului se face conform sintaxei:

selector{proprietate1:valoare1; proprietate2:valoare2, ...}

unde selector este eticheta HTML (neincadrata intre acolade) careia i se aplica stilul. In exemplul de mai sus: p {font-size:21; color:blue}. Daca stilul se aplica la mai multe etichete HTML, acestea se precizeaza prin: selector1, selector2, ... :

selector1, selector2, ... {proprietate1: valoare1; proprietate2:valoare2; ...}

De exemplu, definitia: p, h1, h2 {color:blue} determina aplicarea la paragrafe si la titlurile de rang 1 si 2, a proprietatii color:blue.

COMENTARII. Se pot introduce comentarii in codul CSS, cu rol de explicatie. Textul comentariului se incadreaza intre /* si */ - de exemplu: /* acesta este un comentariu */ - si nu este vizibil in browser.

Inserarea foilor de stiluri in pagina

Exista trei nivele de stiluri. In ordinea prioritatii, acestea sunt:

1. stilul inline, definit in interiorul etichetelor HTML. Acesta are prioritate maxima - anuleaza efectul stilurilor de nivel 2 si 3 pentru eticheta HTML respectiva.
2. foaia de stiluri interna (embedded) - definita in antetul paginii (sectiunea HEAD)
3. foaia de stiluri externa - definita intr-un fisier extern cu extensia .css.

Prezentam in continuare metodele de inserare a stilurilor si situatiile in care se recomanda fiecare dintre ele

Foaia de stiluri interna

Se recomanda pentru aplicarea instructiunilor de stil unei singure pagini, prin definirea stilului implicit cu care apar elementele din pagina. Se insereaza in antetul paginii (in sectiunea HEAD), cu eticheta <style type="text/css">, sau simplu <style>, dupa modelul:

<html> <head>
<style type="text/css">
   <!--
   definitiile de stil
   -->
</style>
</head>
<body> ... restul paginii ... </body></html>
Foaia de stiluri din exemplul urmator precizeaza: aspectul legaturilor nevizitate (a:link), al celor vizitate (a:visited), un efect hover (care apare cand mouse-ul este deasupra legaturii), si aspectul legaturii active (a:active):
<html>
<head>
   <style type="text/css">
      <!--
         a:link {text-decoration: none; color: green}
         a:visited {text-decoration: none; color: magenta}
         a:hover {text-decoration: underline; font-size:30; color: lime}
                                                             a:active {text-decoration: none; color: red}
                                                          -->
                                                       </style>
                                                    </head>
                                                    <body>
                                                        <a href="http://www.webshots.com"> noutati webshots </a>
                                                    </body> </html>

Foaia de stiluri externa

Se foloseste daca dorim aplicarea stilurilor pentru mai multe pagini si este un fisier cu extensia .css care contine definitiile de stil. Paginile se "leaga" la foaia externa cu eticheta <LINK> in antetul fiecareia dintre ele, dupa modelul:

<html> <head>
<link rel = "stylesheet" type = "text/css" href = "numele fisierului .css" >
</head>
<body> ... restul paginii ... </body></html>

Fisierul .css contine numai definitiile de stil (aceleasi ca in cazul foii de stil interne), neinsotite de etichete HTML. Prin simpla modificare a fisierului .css, se modifica in cascada oricat de multe pagini.

Stilul inline

Se foloseste daca dorim sa aplicam alt stil pentru o anumita portiune din pagina, ignorand stilul implicit (definit in foaia interna sau externa de stiluri).

Pentru aceasta, adaugam atributul STYLE:

a) in eticheta HTML, daca este vorba de o singura eticheta. De exemplu, dorim sa apara cu rosu si marime 50 puncte primul paragraf, iar restul sa respecte stilul implicit, cu scris albastru, din antetul paginii:

<html> <head>
<style>
   p {font-size: 21; color: blue}
</style> </head>
<p STYLE="font-size:50; color=red">Filozoful Blagomirea</p>
<p>Tine-n mana adevarul</p> <p>Si de-aceea se munceste</p>
<p>A seca tot calimarul</p> </html>

b) in eticheta <SPAN>, daca dorim sa aplicam stilul unui cuvant sau unei fraze din text. De exemplu, evidentiem cuvantul "adevarul":

<html> <head>
<style>
   p {font-size: 21; color: blue}
</style> </head>
<p>Filozoful Blagomirea</p> <p>Tine-n mana <SPAN STYLE="font-size:50; color:red">adevarul</SPAN></p> <p>Si de-aceea se munceste</p> <p>A seca tot calimarul</p> </html>

c) in eticheta <DIV>, daca aplicam stilul unei sectiuni din pagina, continand diferite etichete HTML. De exemplu, dorim sa apara o imagine de fundal pentru primele doua titluri din pagina:

<html>
<head>
<style>
   body {color:blue}
</style></head>
<div style="background-image: url(star.gif)">
   <h1> La steaua </h1>
   <h2> de Mihai Eminescu </h2>
</div>
La steaua care-a rasarit<br>E-o cale-atat de lunga<br>Ca mii de ani au trebuit<br>Luminii sa ne-ajunga<br>
Poate demult s-a stins din drum<br>In departari albastre<br>Iar raza ei de-abia acum<br>Luci vederii noastre
</html>
Pentru functionarea exemplului de mai sus, trebuie sa existe imaginea star.gif in acelasi director cu pagina.

Clasa de stiluri

O clasa de stiluri este un set de instructiuni de stil aplicabile uneia sau mai multor etichete HTML. Astfel, putem aplica fie clase diferite la aceeasi eticheta HTML, fie aceeasi clasa pentru mai multe etichete HTML. 

Avantajul acestei metode, fata de simpla folosire a stilurilor inline, este ca daca ulterior dorim modificarea stilurilor, este suficient sa modificam clasa/clasele de stiluri.

Definirea unei clase se face conform sintaxei: .nume {instructiune1; instructiune2; ...}, unde nume este numele clasei, iar instructiune1, instructiune2, ... sunt instructiunile de stil. Clasele pot fi definite atat intern (in antetul paginii), cat si extern, intr-un fisier .css.

In etichetele HTML care folosesc clasa de stiluri se adauga atributul class = "numeleclasei" (sau class = "nume1 nume2 ... " daca eticheta foloseste mai multe clase)

Exemplu: definim doua clase numite "banda1" si "banda2" si le aplicam la primul titlu si la paragrafele nr. 1 si 3, respectiv la al doilea titlu si la paragrafele nr. 2 si 4:
<html>
<head>
<style>
   .banda1 {color:green; background: moccasin}
   .banda2 {color:white; background: orange}
</style>
</head>
<h1 class="banda1"> La steaua </h1>
<h2 class="banda2"> de Mihai Eminescu </h2>
<hr>
<p class="banda1">La steaua care-a rasarit</p>
<p class="banda2">E-o cale-atat de lunga</p>
<p class="banda1">Ca mii de ani au trebuit</p>
<p class="banda2">Luminii sa ne-ajunga</p>
</html>

Proprietati CSS

Pentru mai multe informatii despre proprietatile CSS, vizitati: 

http://htmlhelp.com/reference/css/all-properties.html ,

http://www.drogoreanu.ro/tutorials/css.php

Font-family

Permite setarea fontului pentru texte, asemanator atributului FACE din eticheta <FONT>. Proprietatea font-family este o lista de familii de fonturi pentru afisarea unui element. Browser-ul parcurge lista si alege prima valoare pe care o poate folosi (fontul respectiv trebuie sa fie instalat pe calculatorul client) - in caz contrar, foloseste fontul implicit. Valorile font-family sunt de doua tipuri:

• family-name: numele familiei de fonturi dorita (ex: "arial", "courier", etc.)
• nume generice: "serif", "sans-serif", "cursive", "fantasy", "monospace".

Valorile din lista se separa cu virgula, iar daca sunt formate din mai multe cuvinte se inchid intre ghilimele (ex. "Times New Roman") sau, daca apar deja in cadrul ghilimelelor, intre apostrofuri (ex: "font-family: 'Courier New'"). Se recomanda, ca ultima alternativa, sa precizam la sfarsitul listei un nume generic de familie.

Exemplu:

<html> <head>
<style type="text/css">
   h3 {font-family: times}    p {font-family: pepsi, courier}    p.sansserif {font-family: impact, sans-serif}
</style> </head><body>
<h3>Titlu 3 cu font din familia times</h3>
<p>Paragraf cu font din familia courier (fontul pepsi nu a fost gasit)</p>
<p class="sansserif">Paragraf cu font din familia impact</p> </body></html>

Font-variant

Afiseaza textul cu small-caps.

Exemplu: 

<html><head><style>p {font-variant: small-caps}</style></head><p>Majuscule Mici</p></html>

Font-size

Stabileste marimea fontului (orice marime).

Exemplu:  

<html><head><style>p {font-size: 100}</style></head><p>100 puncte </p></html>

Color

Stabileste culoarea unui element HTML.
Culoarea se specifica cu color: culoare, in urmatoarele moduri:

• prin numele culorii - exemple: aqua , blue , fuchsia , green , si altele
• prin #rrggbb - unde rr, gg si bb sunt numere hexazecimale intre 0 si ff inclusiv, reprezentand intensitatea surselor de lumina rosie, verde respectiv albastra, care compun culoarea
• prin rgb(x,y,z) unde x, y si z sunt numere intregi intre 0 si 255 inclusiv, cu aceeasi semnificatie ca mai sus
• prin rgb(x%, y%, z%) unde x, y, z reprezinta procentual intensitatea surselor de lumina rosie, verde respectiv albastra fata de intensitatile maxime

De exemplu, specificatiile: rgb( 255,69,0), # ff4500 si OrangeRed desemneaza toate aceeasi culoare:

<html><head><style>
h1 {color: orangered}
h2 {color: #ff4500}
hr {color: rgb(255,69,0)}
</style></head>
<h1> La steaua </h1> <h2> de Mihai Eminescu </h2> <hr>
La steaua care-a rasarit<br>E-o cale-atat de lunga<br>Ca mii de ani au trebuit<br>Luminii sa ne-ajunga<br> Poate demult s-a stins din drum<br>In departari albastre<br>Iar raza ei de-abia acum<br>Luci vederii noastre</html>

Pentru lista completa cu numele de culori, codurile RGB si mostrele de culoare, accesati pagina: http://www.w3schools.com/html/html_colornames.asp

Background-color

Seteaza culoarea de background pentru un element HTML - vezi exemplul dat mai sus la Clase de stiluri.

Background-image

Seteaza imaginea de background pentru un element HTML - vezi exemplul dat mai sus la Stilul inline - c) eticheta <DIV>. Se foloseste dupa modelul: background-image: url(imagine) unde imagine este calea catre fisierul imagine folosit.

Background-position

Stabileste pozitia de start pentru imaginea de background (fata de coltul stanga-sus al elementului HTML). Se foloseste dupa modelul: background-position: pozitie_verticala pozitie_orizontala, unde:

• pozitie_verticala poate fi: top, center, bottom sau o valoare numerica sau procentuala
• pozitie_orizontala poate fi: left, center, right sau o valoare numerica sau procentuala

Background-repeat

Stabileste daca imaginea se repeta in cadrul elementului HTML. Se foloseste dupa modelul: background-repeat: mod_de_repetare, unde mod_de_repetare poate fi: repeat-x (repetare pe orizontala), repeat-y (repetare pe verticala), repeat (repetare pe orizontala si pe verticala) si no-repeat (fara repetare).

Background-attachment

Stabileste daca imaginea de background este fixa sau se deruleaza odata cu pagina: background-attachment: fixed sau background-attachment: scroll

Exemplu pentru proprietatile Background de mai sus: stabilim imaginea de fundal  pentru pagina, care sa fie: fixa (background-attachment: fixed), cu repetare numai pe orizontala (background-repeat: repeat-x) si sa inceapa cu 81 de puncte mai jos decat coltul stanga-sus al paginii, cu aliniere la stanga (background-position: 81px left).

<html> <head>
<style>
   <!--
   body {
      color: blue;
      background-attachment: fixed;
      background-image: url(star.gif);
      background-repeat: repeat-x;
      background-position: 81px left;
   }
   -->
</style> </head>
<body><h1> La steaua </h1> <h2> de Mihai Eminescu </h2> <hr>
<p>La steaua care-a rasarit</p><p>E-o cale-atat de lunga</p><p>Ca mii de ani au trebuit</p><p>Luminii sa ne-ajunga</p><br><p>Poate demult s-a stins din drum</p><p>In departari albastre</p><p>Iar raza ei de-abia acum</p><p>Luci vederii noastre</p><br><p>Tot astfel cand al nostru dor</p><p>Pieri in noapte-adanca</p><p>Lumina stinsului amor</p><p>Mai straluceste inca</p></body></html>

Pentru a va convinge ca imaginea este fixa, micsorati fereastra browser-ului pana cand apare bara de derulare verticala, apoi derulati pagina !

List-style-image

Stabileste o imagine ca marcator in liste, dupa modelul: list-style-image: url('fisierul imagine folosit').

Pentru ca exemplul urmator sa functioneze, trebuie sa existe in acelasi director cu pagina, imaginea arrow.gif:

<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('arrow.gif')
}
</style> </head> <body> <ul> <li>Lamai</li> <li>Portocale</li> <li>Mandarine</li> </ul> </body> </html>

Border

Stabileste o bordura in jurul unui element HTML, dupa modelul: border: grosime stil culoare. Se pot preciza numai o parte din aceste valori

- in exemplul urmator, stilul de bordura si culoarea:

<html> <head>
<style>
   .bordura {border: double orangered}
</style> </head>
<div class="bordura"> <p>La steaua care-a rasarit</p><p>E-o cale-atat de lunga<p>Ca mii de ani au trebuit</p><p>Luminii sa ne-ajunga</p> </div> </html>

Text-indent

Indenteaza prima linie dintr-un text, dupa modelul: text-indent: x, unde x este distanta pana la marginea din stanga a elementului parinte din care face parte textul (pagina, o celula de tabel, etc.) si poate fi exprimata in unitati de masura, in puncte sau procente din latimea elementului parinte.

Exemplu:

<html> <head>
<style type="text/css">
p {text-indent: 1cm}
</style> </head>
<body> <p>La steaua care-a rasarit/E-o cale-atat de lunga/Ca mii de ani au trebuit/Luminii sa ne-ajunga/Poate demult s-a stins din drum/In departari albastre/Iar raza ei de-abia acum/Luci vederii noastre/Tot astfel cand al nostru dor/Pieri in noapte-adanca/Lumina stinsului amor/Mai straluceste inca</p> </body></html>

Margin

Stabileste marginile unui element HTML, dupa modelul: margin: margini , unde margini este o lista de 1-4 valori separate prin spatiu.

• Daca precizam o valoare (ex: margin: 10px} - toate patru marginile vor fi de 10 puncte.
• Daca precizam doua valori (ex: margin: 30px 10px} - marginile sus si jos vor fi de 30, iar stanga si dreapta de 10 puncte
• Daca precizam trei valori (ex: margin: 30px 10px 20px}- marginea de sus va fi de 30, marginile stanga si dreapta de 10, iar marginea de jos de 20 puncte
• Daca precizam patru valori, atunci acestea se refera, in ordine, la marginile: sus, dreapta, jos si stanga.

Marginile pot fi: procente din latimea/inaltimea paginii, puncte (margine fixa) sau auto (browser-ul stabileste marginea).

In exemplul urmator se stabileste marginea paginii de 50 puncte peste tot (sus-jos-stanga-dreapta). Puteti incerca si alte optiuni in locul celei folosite (din cele patru de mai sus)

<html> <head>
<style type="text/css">
.margine {margin: 50}
</style> </head>
<body class="margine"> La steaua care-a rasarit/E-o cale-atat de lunga/Ca mii de ani au trebuit/Luminii sa ne-ajunga/Poate demult s-a stins din drum/In departari albastre/Iar raza ei de-abia acum/Luci vederii noastre/Tot astfel cand al nostru dor/Pieri in noapte-adanca/Lumina stinsului amor/Mai straluceste inca</body></html>

:Hover

Precizeaza cum sa apara un element HTML cand il indicam cu mouse-ul - vezi exemplul prezentat mai sus la Foaia de stiluri interna.

:First-letter

Aplica un stil special pentru prima litera dintr-un text

:First-line

Aplica un stil special pentru prima linie dintr-un text.

Exemplu pentru :first-letter si :first-line:

<html> <head>
<style type="text/css">
h1:first-letter { color: #ff0000 }
p:first-line {color: orangered}
</style> </head>
<body> <h1>La steaua</h1> <h2>de Mihai Eminescu</h2> <p>La steaua care-a rasarit/E-o cale-atat de lunga/Ca mii de ani au trebuit/Luminii sa ne-ajunga/Poate demult s-a stins din drum/In departari albastre/Iar raza ei de-abia acum/Luci vederii noastre/Tot astfel cand al nostru dor/Pieri in noapte-adanca/Lumina stinsului amor/Mai straluceste inca</p></body></html>

Activitatea nr.10: 25.11-29.11

Tema nr.5:  Formulare  HTML

Unitatea de invatare:

Instrumente de lucru pentru crearea site-urilor Web

Tipul lectiei: Dobandire de noi cunostinte

Bibliografie indicata:
  

Formulare  

De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte programe si scripturi web, cum sunt PHP, JavaScript si altele.

 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.

 Elementele de formular

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.

Casete de text

• - este folosit pentru a crea in pagina un camp pentru text (cu o singura linie).
• - Codul este <input type="text"></input>
  In browser va apare:  
• - Acest element foloseste urmatoarele atribute:
  • type - text
  • name - numele casutei de text, folosit de scriptul la care sunt trimise datele
  • value - va reprezenta propriul context ca valoare aleasa. Un sir de text care apare in casuta de text
  • size - specifica numarul de caractere care dau lungimea casutei de text (default 20)
  • maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator

Camp textarea

• - "textarea" este un element ce creaza un camp in pagina, in care utilizatorul poate adauga mai multe linii de text.
• - Codul este <textarea></textarea>
  In browser va apare:  
• - Acest element foloseste urmatoarele atribute:
  • name - numele campului de text, folosit de scriptul la care sunt trimise datele
  • rows - numarul de linii a zonei de text
  • cols - numarul de coloane a zonei de text
  • wrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau "PHYSICAL", astfel ca textul wraps in browser sa fie prezentat exact cum este scris de utilizator.

Casete pentru parole

• - "password" este folosit pentru a permite adaugarea de parole. Caracterele adaugate in aceasta caseta nu sunt afisate cu valoarea lor reala, pentru a nu se vedea parola scrisa.
• - Codul este <input type="password"></input>
  In browser va apare:  
• - Acest element foloseste urmatoarele atribute:
  • type - password
  • name - numele casutei pentru parole, folosit de scriptul la care sunt trimise datele
  • value - de obicei nu este adaugat. Daca este scris, va reprezenta parola default din acea caseta.
  • size - specifica numarul de caractere care dau lungimea casutei pt. adaugarea parolei (default 20)
  • maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator

Casete de formular ascunse

• - "hidden" este folosit pentru a adauga in formular date care sa nu fie vizibile in browser si care sunt trimise la scripturi impreuna cu celelalte date din formular.
• - Codul este <input type="hidden"></input>
• - Acest element foloseste urmatoarele atribute:
  • type - hidden
  • name - numele casutei ascunse, folosit de scriptul la care sunt trimise datele
  • value - valoarea care se doreste sa fie transmisa prin acea caseta ascunsa.

Check box

• - este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege (oricate din ele) prin bifarea lor
• - Codul este <input type="checkbox"></input>
  In browser va apare:  
• - Acest element foloseste urmatoarele atribute:
  • type - checkbox
  • name - numele casutei checkbox, folosit de scriptul la care sunt trimise datele
  • value - valoarea casetei checkbox respective, care poate fi selectata (bifata)
  • checked - daca este adaugat acest atribut, caseta checkbox respectiva este selectata (bifata).

Radio button

•  este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege una singura
•  Codul este <input type="radio"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - radio
  • name - numele casutei radio, folosit de scriptul la care sunt trimise datele
  • value - valoarea casetei radio respective, care poate fi selectata (bifata)
  • checked - daca este adaugat acest atribut, caseta radio respectiva este selectata (bifata).

Casete pentru upload

• - "file upload" este folosit pentru a permite utilizatorului sa incarce alte documente pe serverul web. Aceasta caseta este insotita de un buton "Browse" prin care se alege documentul care va fi transferat pe server. (upload-ul se face tot prin intermediul unui script (PHP, CGI)
• - Codul este <input type="file"></input>
  In browser va apare:  
• - Acest element foloseste urmatoarele atribute:
  • type - file
  • name - numele casutei upload, folosit de scriptul la care sunt trimise datele
  • size - specifica numarul de caractere care dau lungimea casutei upload.

Buton simplu

•  acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune când este apasat
•  Codul este <input type="button" value="Buton"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - button
  • name - numele butonului, necesar pentru a fi folosit de script
  • value - textul care apare pe buton.

Buton Submit

•  acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea tuturor celorlalte elemente din formular la scriptul de pe server
•  Codul este <input type="submit" value="Trimite"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - submit
  • name - numele butonului, poate fi folosit de scriptul la care se trimit datele
  • value - textul care apare pe buton.

Imagine pentru buton Submit

•  permite aplicarea unei imagine in locul butonului Submit standard
•  Codul este <input type="image" src="locatie_imagine"></input>
•  Acest element foloseste urmatoarele atribute:
  • type - image
  • name - numele butonului, poate fi folosit de scriptul la care se trimit datele
  • src - locatia imaginii folosite.

Buton Reset

•  permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente din formular
•  Codul este <input type="reset" value="Sterge"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - reset
  • value - textul care apare pe buton.

Elemente select

•  pentru acest element se foloseste tag-ul "<select></select>", care formeaza o lista, un meniu, cu date ce pot fi selectate.
•  Atributete elementului "<select>" sunt:
  • name - numele acestui element, necesar pentru a fi folosit de scriptul la care sunt trimise datele
  • size - seteaza inaltimea elementului Select, care reprezinta si numarul de optiuni din lista care vor fi vizibile initial
  • multiple - prezenta acestui atribut specifica faptul ca utilizatorul poate selecta mai multe optiuni.
•  "<select></select>" este folosit impreuna cu elemente "<option> </option>" care reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare.
•  <option> </option> foloseste doua atribute:
  • selected - cand acesta este adaugat, optiunea respectiva este selectata când pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este indicat folosirea acestui atribut doar cu una singura.
  • value - specifica valoarea variabilei numita in optiunea respectiva (necesara pt. scriptul care va primi datele).
•  sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE
•  Cele doua tipuri de elemente Select sunt:
  1. Drop Down List (Lista de derulare)
  •  Codul este:
      <select name="select">
        <option>Optiune 1</option>
        <option>Optiune 2</option>
    </select>
  •  unde "name" este atributul care defineste numele acestui tag SELECT, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
    In browser va apare:  
• 2. List Box
  • - Codul este:
      <select name="select" size="4">
        <option>Optiune 1</option>
        <option>Optiune 2</option>
    </select>
  •  unde "name" este atributul care defineste numele acestui tag SELECT, atributul "size" determina inaltimea elementului select care determina si numarul de optiuni vizibile initial, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
    In browser va apare:  

Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!

Activitatea nr.9: 18.11-22.11

Tema nr.4:  Cadre/frame  HTML

Unitatea de invatare:

Instrumente de lucru pentru crearea site-urilor Web

Tipul lectiei: Dobandire de noi cunostinte

Bibliografie indicata:
  

Cadre 

În tot ceea ce s-a prezentat în sectiunile anterioare s-a presupus cã utilizatorul vede pe ecran un document HTML într-o fereastrã atasatã acelui document.
Acest lucru - o fereastrã, un document - este de multe ori deranjant prin aceea cã se pierde "firul" drumului parcurs iar întoarcerile sunt mai dificil de efectuat.
Pentru a se rezolva aceastã problemã, cât si pentru reducerea timpilor de încãrcare, mãrirea atractivitãtii prezentãrilor etc., s-a introdus tehnica "subferestrelor", uzualã în procesãrile de texte (sau în mediul Windows, în general), de divizare a ferestrei principale a browserului în sectiuni.
Fiecare asemenea "ochi de geam" este considerat o nouã fereastrã, poate sã fie atasatã unui document HTML, astfel încât simultan pe ecran putem vizualiza mai multe documente. Între ferestre putem naviga, putem trece dintr-o fereastrã într-un document pe care-l vizualizãm în altã fereastrã, astfel încât legãturile dintre documente rãmân mereu vizibile. Vom numi o asemenea fereastrã cadru, sau vom utiliza termenul englezesc frame.

Definirea unei structuri de cadre este relativ simplã, similarã definirii unui tabel. Deosebirea importantã este aceea cã structura generalã a documentului HTML, care introduce structura de cadre, este modificatã fatã de structura unui document care nu contine cadre.

În documentele care definesc o structurã de cadre containerul BODY este înlocuit cu containerul FRAMESET, tagul care este dedicat structurii de cadre.
Documentele care vor fi vizualizate într-un cadru nu trebuie sã fie modificate în nici un fel, cu exceptia cazului în care se doreste includerea atributului de fereastrã tintã.

Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite 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>.
Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie afisate mai multe pagini in aceeasi fereastra de browser.
Un frame (cadru) este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta în interior un document propriu (in general un document HTML).
De exemplu puteti creea doua cadre intr-o fereastra, in primul cadru puteti incarca un document HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex. doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.

Structura generalã a unui document cu frame-uri este prin urmare:

<HTML>
    <HEAD>
 ...
    </HEAD>
    <FRAMESET>
 ...
    </FRAMESET>
</HTML> 

Containerul FRAMESET poate sã includã alte containere FRAMESET încât structura definitã poate deveni suficient de complexã.
Exemplul disponibil pentru un document cu cadre este pagina de fatã. Fiecare parte a ferestrei principale este un frame, fiecare cu afisajele sale. Se observã cã fiecare cadru suportã orice actiune posibilã pentru o fereastrã "întreagã". Se poate deci accepta ideea cã un document fãrã cadre este de fapt un document cu un singur cadru.
O ultima observatie este aceea cã ideea de cadre este o extensie Microsoft si Netscape. Alte browsere nu vor accepta structurile de cadre, dar este mai mult ca sigur ca viitoarele standarde HTML vor asimila ideile privind cadrele.

Definirea structurii de cadre

O structurã de cadre se defineste similar unui tabel:

1. se stabilesc un numãr de linii (sau de coloane) si
2. pentru fiecare linie (respectiv coloanã):
   • se stabileste continutul sãu sau
   • o altã structurã de cadre.

Tagul principal este FRAMESET (reamintim cã el înlocuieste, la nivelul cel mai exterior, tagul BODY).  

<FRAMESET [ ROWS="structura-linii"]
[ COLS="structura-coloane"]
[ FRAMEBORDER=1|0] [ FRAMESPACING=interspatiu]>
continut-cadre
</FRAMESET> 

introduce o structurã de cadre pentru documentul curent.

• ROWS si COLS definesc structura initialã de linii si coloane, interpretând fiecare celulã drept un cadru. Nu este obligatorie prezenta ambelor atribute, lipsa fiind consideratã ca valoare implicitã 1. Structura liniilor/coloanelor este datã ca o listã de valori, separate prin virgule. Mãsurile pentru spatiul ocupat de respectiva structurã pot fi absolute sau relative. 

Un element al listei poate fi

• numãr absolut de pixeli;
• un procent - cât la sutã din fereatra utilizatorului sã fie ocupatã de linia/coloana respectivã;
• caracterul * - cu semnificatia "ce rãmâne" dupã ce s-au alocat dimensiunile fixe sau relative. Dacã sunt mai multe valori *, atunci se distribuie spatiul rãmas între ele; dacã o valoare * este precedatã de un numãr, cum ar fi 2*, atunci, la împãrtirea pãrtii rãmase, aceastã linie/coloana va participa cu ponderea indicatã de coeficientul asteriscului.

De exemplu, o lista de genul ROWS="120, 10%, *, 3*" va produce o serie de patru linii: prima cu o înãltime fixã de 120 de pixeli, a doua va avea 10% din fereastra utilizator, iar ceea ce rãmâne dupã aceste douã atribuiri se va repartiza între urmãtoarele douã linii în raportul 1 la 3. Utilizarea unor valori absolute necesitã mai multã atentie deoarece s-ar putea ca spatiul alocat sã nu poatã include informatia atasatã. Oricum browserul face o scalare încât sã fie folosit tot spatiul de pe ecranul utilizatorului.

Alocarea datã prin COLS si/sau ROWS este valabilã doar pentru afisarea initialã a paginii: utilizatorul are, în general, posibilitatea sã o modifice potrivit nevoilor de consultare.

• FRAMEBORDER specificã prezenta sau absenta chenarului: 1 = prezentã; 0 = absentã. Valoarea prezentã devine implicitã pentru toate tagurile FRAMESET ulterioare. Aceasta este o optiune Microsoft (nu si Netscape). FRAMESPACING indicã prezenta unui spatiu suplimentar între cadre. Valoarea este în pixeli. Aceasta este o optiune Microsoft (nu si Netscape).

continut-cadre contine descrierea cadrelor, realizatã prin taguri FRAME si/sau FRAMESET.
De remarcat, încã o datã, cã prin FRAMESET se introduce o structurã de cadre. Acest tag se va utiliza doar atunci când se doreste structurarea ecranului sau a unei zone din ecran.

<FRAME [ SRC="adresa-URL"] [ NAME="nume-cadru"] [ NORESIZE] [ SCROLLING="yes"|"no"|"auto"] [ MARGINWIDTH="lãtime"] [ MARGINHEIGHT="&înãltime"] [ ALIGN=top|middle|bottom|left|right] [ FRAMEBORDER=0|1]> 

defineste continutul si atributele unui cadru.

• SRC precizeazã adresa absolutã sau relativã a documentului HTML care va fi inserat în cadrul respectiv. De remarcat cã dacã noul document este structurat pe cadre, structurarea are loc doar pentru "ochiul de geam" detinut de document.

• NAME precizeazã numele cadrului. Acesta este numele cu care poate fi referit cadrul atunci când se doreste încãrcarea unui document în cadrul respectiv (se realizeazã prin utilizarea atributului TARGET din tagul A).

• NORESIZE aratã cã dimensiunile cadrului nu pot fi modificate de utilizator. În lipsa acestei optiuni utilizatorul poate sã modifice dimensiunile unui cadru prin drop-and-drag pe bordurile acestuia (operatiunea va reduce/mãri dimensiunea celorlalte frame-uri si alocarea initialã a spatiului nu va mai functiona).

• SCROLLING specificã dacã frame-ul va contine sau nu bare de defilare:

• "yes" - bare de defilare inserate;
• "no" - fãrã bare de defilare;
• "auto" - barele de defilare se insereaza doar dacã este nevoie.

În cazul când dimensiunea cadrului nu permite afisarea întregului document si nu este permisã defilarea, partea neafisatã rãmâne inaccesibilã utilizatorului. Unele browsere permit totusi afisarea unui document într-o fereastrã separatã, independentã de structura initialã de cadre.

• MARGINWIDTH, MARGINHEIGHT specificã dimensiunile, în pixeli, pentru marginile laterale, respectiv marginile de sus si jos, în cadrul frame-ului (distantele textului la marginile frame-ului).

• ALIGN comandã modul de aliniere a textului în cadru. Aceasta este o optiune Microsoft (nu si Netscape).

• FRAMEBORDER specificã dacã frame-ul are chenar (1) sau nu are chenar (0). Valoarea definitã devine implicitã pentru tagurile FRAME ulterioare, pânã la o nouã atribuire. Aceasta este o optiune Microsoft (nu si Netscape). Fiecare cadru trebuie sã aibã atasat un tag FRAME pentru a putea fi utilizat. Ordinea de definire a cadrelor este cea uzualã, de la stânga la dreapta, de sus în jos, în cuprinsul FRAMESET-ului curent.

<IFRAME [SRC="adresa-URL"][NAME="nume-cadru"][SCROLLING="yes"|"no"] [MARGINWIDTH="lãatime"][MARGINHEIGHT="înãltime"][ ALIGN=top|middle|bottom|left|right] [ FRAMEBORDER=0|1]> 

defineste continutul si atributele unui cadru flotant în interiorul unui FRAMESET. Aceasta este o optiune Microsoft (nu si Netscape).
Atributele si valorile sunt identice cu cele similare de la FRAME.

Exemple

Structurile prezentate în continuare exemplifica modul în care se pot defini structuri de linii si coloane de frame-uri.

Primul exemplu aratã cum a doua coloanã dintr-o structurã poate fi segmentatã, la rândul ei, în douã linii. Se vor identifica totodatã elementele implicite de la definirea de cadre: borduri, dimensiuni fixe. Fiecare cadru este denumit în structurã pentru a putea fi referit.

<FRAMESET COLS="30%,*">
    <FRAME SRC="frame1.html" NAME="window_1">
    <FRAMESET ROWS="40%,*">
 <FRAME SRC="frame2.html" NAME="window_2">
 <FRAME SRC="frame3.html" NAME="window_3">
    </FRAMESET>
</FRAMESET>

Exemplul al doilea aratã cum poate fi sectionatã coloana intermediarã dintr-o structurã de trei coloane. Se va remarca la primul frame aparitia barelor de defilare si interzicerea lor la frame-ul al patrulea. Încercati sã modificati dimensiunea cadrelor (prin miscarea mouse-ului) si sã observati efectul asupra barelor de defilare.

<FRAMESET COLS="20%,60%,*">
    <FRAME SRC="frame1.html" NAME="window_1" SCROLLING="yes">
    <FRAMESET ROWS="40%,*">
 <FRAME SRC="frame2.html" NAME="window_2">
 <FRAME SRC="frame3.html" NAME="window_3">
    </FRAMESET>
    <FRAMESET COLS="100%">
        <FRAME SRC="frame4.html" NAME="window_4" SCROLLING="no">
    </FRAMESET>
</FRAMESET>

Pentru browserele care nu acceptã extensiile pentru cadre existã posibilitatea unei alternative prin NOFRAMES. <NOFRAMES>
text
</NOFRAMES>
indicã unui browser care interpreteazã cadre sã ignore textul din containerul NOFRAMES. Un browser care nu interpreteazã cadre va ignora toate tagurile legate de cadre, deci si tagul NOFRAMES, dar va interpreta textul. Rezultã ca în textul dat se va trece un document HTML care sã realizeze, mai putin evoluat grafic, o parte din ceea ce se realiza prin structura de frame-uri.
Tagul NOFRAMES se poate scufunda doar în containerul FRAMESET.

 Sarcina de lucru:

1. Analizati urmatorul cod HTML si discutati impreuna cu colegii. 

   <HTML>
   <HEAD>
   <TITLE> TITLU PAGINII </TITLE>
   </HEAD>
   <FRAMESET COLS="120,*">
   <FRAME SRC="baner.htm">
   <FRAMESET COLS="120,*">
   <FRAME SRC="Meniu.htm" NAME="meniu">
   <FRAME SRC="Continut.htm" NAME="date">
   </FRAMESET>
   </FRAMESET>
   <BODY>
   </BODY>
   </HTML>

   2. Creati o pagina HTML care sa contina doua cadre, cel din stânga ocupând 23% din spatiul paginii iar cel din dreapta 77%

Solutii:

<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="23%,77%">
<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">
<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">
</FRAMESET>
<BODY>
</BODY>
</HTML>

ATESTAT - Activitatea nr.3

  Anunt foarte important!

   Elevii care nu predau portofoliul cu fisele activitatii "ATESTAT - Activitatea nr.3" vor fi notati cu nota 2.

    In perioada 28.11-02.11.2011 elevii vor primi un test din materia recapitulata pentru atestat (al II-lea capitol din programa)

 Timp de lucru: 12.11. 2011- 18.11.2011

Termen de predare fise in portofoliul personal: 18.11.2011, prof. E. Padurariu

Portofoliul va fi verificat si notat, rezultatele vor fi comunicate parintilor si elevilor.

Realizati fise recapitulative ale urmatoarelor notiuni teoretice:

Editoare de texte

• Lansarea unei aplicatii de procesare de text
• Deschiderea unui document existent – modificarea si salvarea lui
• Crearea unui document nou
• Inchiderea unui document. Salvarea unui document sub un alt nume sau alt format (de exemplu text, rich text format, html, etc)
• Utilizarea „Ajutor”-ului
• Inchiderea aplicatiei de procesare de text
• Initializarea paginii de lucru
• Introducerea informatiilor in text, functia „Anulare”
• Selectarea informatiilor – caracter, cuvant, paragraf, intregul document
• Copierea, mutarea, stergerea - folosirea comenzilor „ Copiere”, „Lipire”, „Decupare”
• Cautarea si inlocuirea – utilizarea comenzilor „Gasire” si „Inlocuire”
• Schimbarea dimensiunii si tipului caracterelor
• Folosirea stilului: bold (caractere aldine), italice (caractere cursive) si subliniere.
• Marcare vizuala (neprintabil) paragraf, text
• Utilizarea culorilor in text
• Alinierea textului in cadrul documentului
• Spatierea randurilor
• Copierea formatului unui text selectat
• Folosirea si setarea tabulatorilor: aliniere stanga, dreapta, centru, pe punctul zecimal, pozitionarea tabulatorilor
• Folosirea listelor (numerotare, marcatori)
• Utilizarea instrumentelor de pe bara de desenare
• Inserarea si formatarea tabelelor intr-un document, operatii in tabele
• Inserarea si formatarea graficelor si imaginilor
• Importarea obiectelor, tabelelor, graficelor, fisierelor
• Inserarea bordurilor de pagina (culoare, latime, model, etc.)
• Stiluri si paginare – aplicarea stilurilor existente unui document, numerotarea paginilor
• Antet si subsol, introducerea datei, autorului, numarului paginii
• Nota de subsol sau de sfarsit de text
• Corectarea greselilor de ortografie si a celor gramaticale - folosirea functiei de corectare ortografica si gramaticala
• Trecerea in revista a documentului – examinare inaintea imprimarii
• Folosirea optiunilor de baza pentru tiparire - fereastra Imprimare
• Tiparirea documentului utilizand una din imprimantele instalate sau intr-un fisier
• Optiunea Trimite catre..
• Optiunea Scrisori si corespondente
• Optiunea trimitere la fax
• Optiunea trimitere intr-o prezentare
• Sugestii: intocmirea unei cereri, realizarea unei diplome complexe, realizarea unei pagini pentru fax, realizarea unui raport, realizarea unei scrisori oficiale, intocmirea unui referat la o disciplina studiata
• Organizarea aplicatiilor realizate intr-o structura de directoare proprie
• Reguli generale de tehnoredactare si estetica paginii tiparite
• Reguli de redactare a textelor oficiale sau de alta natura
• Utilizarea shortcut-ului pentru functii mai des utilizate ale editorului