BODY - Universitatea din Craiova

Investeşte în oameni!
Proiect cofinanţat din Fondul Social European prin Programul Operaţional Sectorial pentru Dezvoltarea
Resurselor Umane 2007 – 2013
Axa prioritară: 1 - Educaţia şi formarea profesională în sprijinul creşterii economice şi dezvoltării societăţii
bazate pe cunoaştere
Domeniul major de intervenţie: 1.3 - Dezvoltarea resurselor umane din educaţie şi formare
Titlul proiectului: FLEXFORM - Program de formare profesională flexibilă pe platforme mecatronice
Contract POSDRU/87/1.3/S/64069
Beneficiar: Universitatea Tehnică din Cluj-Napoca
LUCRARE de EVALUARE FINALĂ
UNIVERSITATEA DIN CRAIOVA
CENTRUL REGIONAL DE EDUCAŢIE ŞI FORMARE PROFESIONALĂ FLEXIBILĂ -
CRAIOVA
Program de formare continuă: Informatică şi tehnologii educaţionale
Titlul lucrării: Predarea limbajului HTML la clasa a IX-a
Cursant: Prof. Florescu Gabriela
Data sustinerii publice: Iunie, 2012
„Această lucrare a beneficiat de suport financiar prin proiectul FLEXFORM - Program de formare
profesională flexibilă pe platforme mecatronice, contract nr. POSDRU/87/1.3/S/64069, proiect cofinantat
din Fondul Social European prin Programul Operational Sectorial Dezvoltarea Resurselor Umane 2007-
2013”.
1

Investeşte în oameni!
CUPRINS
1. INTRODUCERE pg 3
2. CONŢINUT TEHNIC: pg 7
2.1. Elemente de bază ale limbajului HTML pg 7
2.1.1. Structura unui document HTML
2.1.2. Parametrii marcajului pg 7
2.1.3. Formatarea paragrafelor pg 9
2.1.4. Imagini pg 12
2.1.5. Liste pg 13
2.1.6. Linkuri pg 16
2.1.7. Tabele pg 18
2.2. Aplicaţii pg 22
3. CONCLUZII pg 40
4. BIBLIOGRAFIE pg 41
2

Investeşte în oameni!
Capitolul 1. INTRODUCERE
Scurt istoric
În urmă cu peste 30 de ani, la sfârşitul anilor '60, Departamentul Apărării din S.U.A. a
pus bazele primei reţele de calculatoare destinată să acopere o largă întindere
geografică, ARPAnet (Advanced Research Projects Agency Network). Scopul reţelei
era schimbul de informaţii cu caracter ştiinţific şi tehnic între participanţii la diferite
proiecte de cercetare din cadrul Departamentului Apărării şi cercetători din instituţii de
învăţământ superior implicate. Rezultatele obţinute în cadrul acestui proiect au condus
la definirea şi apoi la standardizarea unor protocoale folosite la transferul de date prin
reţelele de calculatoare (TCP/IP - Transfer Control Protocol/Internet Protocol, HTTP -
HyperText Transfer Protocol, FTP - File Transfer Protocol şi altele) şi a determinat în
anii '70 şi '80 o extindere lentă dar continuă a reţelelor de calculatoare.
Înaintea exploziei informaţionale din anii '90 au mai trebuit să apară două realizări
importante:
1. Dezvoltarea limbajului HTML, propus de Dr. Tim Berners-Lee, într-un articol publicat
în 1989. Articolul propunea folosirea pentru codificarea informaţiei vehiculate prin
reţelele de calculatoare a unui subset de marcaje definite în standardul SGML
(Standard Generalized Markup Language, 1986). În esenţă SGML propune un set de
marcaje care permit reconstituirea documentelor difuzate pe suport electronic.
2. Apariţia în februarie 1992 a primei aplicaţii destinate navigării pe Internet, Mosaic.
Aplicaţia a fost scrisă de studenţi ai NCSA (National Center of Supercomputing
Applications) din cadrul universităţii statului Ilinois, USA.
Limbajul HTML a făcut obiectul unor standardizări succesive, prima versiune finalizată
fiind 2.0, în 1995 (autori Tim Berners-Lee şi Dan Connoly).
Importanţa dezvoltării limbajului a condus la crearea World Wide Web Consortium
(W3C), organizaţie care în 1997 a finalizat versiunea 3.2 care şi în prezent este
recunoscută ca standardul HTML.
Spre finele anilor '90 au apărut însă noi tehnologii, legate de realizarea paginilor Web:
Cascading Style Sheets (CSS), Active Server Pages (ASP), ceea ce a determinat
continuarea activităţii în domeniul standardizării a W3C, organizaţia realizând succesiv
3

Investeşte în oameni!
standardele 4.0 şi 4.01. Ultima versiune este 4.1, actualmente fiind în curs de pregătire
versiunea 5.
În viitorul previzibil, HTML va continua să reprezinte suportul pentru difuzarea de
informaţii prin Internet.
Hypertext
Prin hipertext se întelege un document (evident în sensul utilizat în informatica: fisier
creat printr-un editor, procesor etc) care contine, pe lânga text (continutul clasic al unui
document), graficã, imagini, animatie, înregistrãri audio, legãturi cãtre alte documente.
Un hipertext poate fi gândit într-un spatiu cu mai multe dimensiuni, fiecare axã
reprezentând un alt mijloc de comunicare: text, audio, video etc.
Conceptul de hypertext a apãrut în iulie 1945 când Vannevar Bush a imaginat, în
articolul As we may think, scris pentru Atlantic Monthly, o masina care putea opera cu
texte si grafice on-line.
În 1960, Th.H. Nelson (Computer Lib/Dream Machines) a unit termenul de hipertext cu
cel de hipermedia, lucrarea lui influentând introducerea Web. În anii 1970, Nelson a
initiat proiectul XANADU, orientat cãtre biblioteci digitale si sisteme hipertext, proiect
nefinalizat însã.
Dupã anii 1980, aparitia sistemelor de help în produsele Apple si Microsoft, sisteme
care permit utilizatorilor sã navigheze prin selectãri de butoane sau termeni, au fãcut ca
notiunea de hipertext sã devinã una obisnuitã, desi hipertextele respective nu aveau o
complexitate foarte mare.
Hipertextul permite pãrãsirea modului traditional de citire a unui document: linie dupã
linie, paginã dupã paginã etc. Legãturile activate produc o desfãsurare a documentului
dupã nevoile utilizatorului plus posibilitatea de pãstrare a atentiei cititorului prin
utilizarea legãturilor grafice, audio etc.
World Wide Web
World Wide Web, sau WWW, sau Web a apãrut la sfârsitul anilor '80 când cercetãtorii
de la CERN, Laboratorul European pentru fizica particulelor, au dezvoltat o retea pentru
a avea acces mai usor la documentele produse de diversele laboratoare. În 1990, ei au
introdus un browser doar pentru texte si au dezvoltat HTML. În 1991 au implementat
Web la CERN.
4

Investeşte în oameni!
În 1992 cercetãtorii de la CERN au introdus Web în comunitatea Internet si aceasta a
început revolutia (S.E. Eddy - HTML in plain English).
Ceea ce diferentiazã WWW de celealte componente ale Internet-ului este tocmai
hipertextul, care si-a gãsit în Web calea idealã de exprimare. Toate documentele
accesibile în Web sunt legate între ele indiferent de serverul pe care sunt memorate si
indiferent de locul geografic unde sunt.
Trecerea de la un document la altul, de la un subiect la altul, de la un loc la altul etc
produce o impresie puternicã asupra utilizatorului, îi dã acestuia certitudinea cã totul
este potrivit intereselor lui, potrivit ritmului propriu de întelegere.
HTML
HTML, sau HyperText Markup Language, a fost proiectat sã poatã opera cu
functionalitãtile multimedia ale WWW.
Limbajul de marcare permite transformarea oricãrui text într-un hipertext prin
introducerea unor marcaje, care vor indica modul cum se efectueaza legãturile
documentului, cum vor apãrea paginile documentului etc. Un document HTML poate fi
fãcut public dacã este pe un calculator care are acces la Internet. Un document fãcut
public poate fi vãzut din orice punct al Internet-ului. Desi nu este optiunea cea mai
fericitã, vom utiliza cuvantul tag pentru marcaj.
SGML, Standard Generalized Markup Language, pãrintele HTML-ului, a devenit, în
1986, standard ISO. Fiecare document SGML are asociat o definire a tipului de
document (DTD) care defineste regulile pentru continutul documentului. Fiecare
versiune de HTML a fost definitã într-un DTD.
HTML 1.0 si HTML+ au apãrut în 1990, respectiv 1993.
HTML 2.0, apãrut în 1994, a fost prima versiune standardizatã. Ea contine 49 de taguri.
HTML 3.0 a apãrut în 1995. Versiunea cuprindea extensii importante, cum ar fi marcaje
pentru notatii matematice, bannere etc. În prezent nu mai este utilizat.
HTML 3.2, introdus în 1996, este considerat ca succesorul versiunii 2.0, incorporând o
serie de taguri din HTML 3.0 ca si extensii Netscape.
Pe lânga versiunea standardizatã, o serie de firme producãtoare de browsere
(programele care permit vizualizarea documentelor) au creat propriile extensii. Sunt
cunoscute extensiile Netscape si Microsoft, cele doua mari firme care-si disputã piata,
extensii dintre care se vor alege cu sigurantã extensiile pentru versiunile ulterioare de
HTML.
5

Investeşte în oameni!
Pentru inceput sa descoperim originea abrevierii HTML - Hypertext Markup Language .
Acest limbaj este folosit pentru a formata si prezenta documente pe web . HTML
adauga tag-uri fisierelor ASCII astfel incat sa permita afisarea unei varietati de fonturi ,
imagini sau sunete prin definirea unor elemente ca header , lista , paragraph si prin
implementarea si utilizarea unor legaturi ( linkuri ) catre alte documente publicate in
internet .
Mai clar , limbajul HTML este limbajul pe care il inteleg aplicatiile de tip browser ( ex:
Internet Explorer , Netscape Communicator , Opera , etc. ) folosite pentru a naviga pe
internet . Datorita acestui limbaj browser-ul poate afisa ceea ce autorul paginii web a
dorit sa prezinte .
Elementele de baza ale limbajului HTML sunt foarte simple si usor de retinut si apoi de
utilizat ; cunoscand doar tag-urile de baza putem construi un intreg site fara probleme .
TAG – reprezinta o comanda in cod HTML care indica modul in care va fi interpretata
informatia la care ea se refera .
6

Investeşte în oameni!
Capitolul 2. CONŢINUT TEHNIC
2.1. Elemente de bază ale limbajului HTML
HTML = Hyper Text Markup Language (Limbaj de Marcare Hiper Text)
HTML este un limbaj de marcare utilizat pentru formatarea documentelor pentru
paginile de Internet. HTML constă din câteva coduri numite şi tag-uri care sunt
introduse în text.
2.1.1. Structura unui document HTML
Structura unui document HTML
Conţinutul paginii WEB
Semnificatia marcajelor :
- specifică editorului de text că vom crea o pagină web
folosind HTML;
- specifică capul documentului de tip hipertext;
- delimitează un nume pe care îl dăm paginii web, nume ce
va apare pe bara de stare;
- specifică corpul documentului de tip hipertext. Acest
marcaj cuprinde conţinutul paginii web care va apărea la încărcarea ei într-un
program de navigare.
2.1.2. Parametrii marcajului :
� Parametrul bgcolor
Culoarea fundalului paginii web se poate stabili prin valoarea acestui parametru
specificat în marcajul ... .
Valoarea acestui parametru va fi numele în limba engleză al culorii, încadrat de
ghilimele, sau codul culorii precedat de semnul # şi încadrat de ghilimele.
7

Investeşte în oameni!
Exemplu:
Conţinutul paginii web .
Sau
Conţinutul paginii web
Coduri de culori uzuale:
Numele culorii Codul Numele culorii Codul
Black (negru) 000000 Aqua (verde marin) 00FFFF
White (alb) FFFFFF Lime (vernil) 00FF00
Red (roşu) FF0000 Silver (argintiu) C0C0C0
Green (verde) 00FF00 Maroon (castaniu) 800000
Blue (albastru) 0000FF Gray (gri) 808080
Yellow (galben) FFFF00 Olive(măsliniu) 808000
Purple (violet) FF00FF Navy (albastru marin) 000080
� Culoarea se “construieşte” prin combinarea a trei culori de bază: roşu, verde şi
albastru (modelul RGB).
� Codul unei culori este format din 3 părţi, 3 grupe de câte două caractere. Fiecare
grup de două caractere reprezintă compoziţia din fiecare culoare de bază, astfel:
#rrggbb. Valoarea poate fi: 0, 1, 2, , 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (sistemul de
numeraţie hexazecimal).
� Parametrul background
Pentru fundalul unei pagini web se poate utiliza o imagine a cărei adresă este
specificată ca valoare a parametrului background, specific marcajului ... .
Exemplu :
...
unde URL este un şir de caractere ce reprezintă adresa imaginii ce va fi utilizată de
navigator ca fundal pentru pagina Web.
OBS. Dacă fişierul imagine se află în directorul curent atunci este suficient să dăm prin
URL doar numele fişierului imagine, în caz contrar trebuie să specificăm prin URL toată
calea de acces la fişierul imagine respectiv.
8

Investeşte în oameni!
� Parametrul TEXT
TEXT = culoare
Stabileşte culoarea textului din pagina Web. Culoarea se poate specifica prin
nume sau prin modelul RGB.
� Parametrul LINK
LINK = culoare
Stabileşte culoarea cu care vor fi scrise în text legăturile (link-urile) nevizitate,
legături către alte pagini Web sau legături către alte porţiuni din pagina curentă.
Culoarea se poate specifica prin nume sau prin modelul RGB.
� Parametrul VLINK
VLINK = culoare
Stabileşte culoarea cu care vor fi scrise în text legăturile (link-urile) vizitate.
Culoarea se poate specifica prin nume sau prin modelul RGB.
� Parametrul ALINK
ALINK = culoare
Stabileşte culoarea cu care va fi scrisă în text legătura (link-ul) în curs de vizitare (cea
asupra căreia este plasat cursorul mouse-ului). Culoarea se poate specifica prin nume
sau prin modelul RGB.
2.1.3. Formatarea paragrafelor
� tag-ul
comanda trecerea la un alt paragraf in cadrul paginii, mai exact tag-ul comanda
trecerea la linie noua si lasarea unei linii libere .
Folosirea in serie a tag-ului :
nu va duce la lasarea libera a trei linii , browser-ul va interpreta tag-urile ca pe unul
singur .
Folosit sub aceasta forma tag-ul nu necesita si complementarul de inchidere .
In cazul folosirii unor atribute ale tag-ului va apare si necesitatea utilizarii tag-ului
complementar de inchidere .
In cadrul tag-ului se pot folosi atribute pentru alinierea textului la stanga ( pozitia
default ) , la dreapta sau central .
9

Investeşte în oameni!
De exemplu :
Acest text va fi aliniat la dreapta.
va produce :
� tag-ul
Acest text va fi aliniat la dreapta
comanda trecerea la linie noua fara a incepe un nou paragraf ( = line break ). Nu
necesita tag de inchidere .
In cazul in care dorim trecerea la o linie noua este obligatorie folosirea tag-ului , simpla
utilizare a tastei ENTER in cadrul codului sursa al paginii noastre nu are nici un efect in
cadrul browser-ului .
Pentru obtinerea mai multor linii libere se foloseste combinatia intre caracterul special
pentru spatiu si tag-ul :
Ceva tare
 
 
 
 
 
Ciudat.
Secventa de mai sus va duce la urmatorul rezultat in browser :
Ceva tare
Ciudat.
10

Investeşte în oameni!
� si
va pagina textul dintre tag-uri ca pe un citat. Browser-ul va crea o margine libera in
stanga si in dreapta textului:
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru
a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi cu ajutorul tagului de
centrare a textului in cadrul liniilor .
Secventa de mai sus va avea ca rezultat urmatoarea paginare :
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML. Textul va
fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si
apoi cu ajutorul tagului de centrare a textului in cadrul liniilor .
In cazul in care s-ar folosi tag-ul :
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru
a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de
centrare a textului in cadrul liniilor .
s-ar obtine urmatoarea paginare :
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML.Textul va fi folosit pentru
a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi cu ajutorul tagului de
� ~ ( = non breaking space )
centrare a textului in cadrul liniilor .
comanda introducerea unui spatiu in cadrul textului fara a duce la trecerea la alta linie .
Nu se foloseste pentru introducerea unui spatiu in cadrul textului ci pentru a distanta
imagini aflate pe aceeasi linie . Nu necesita tag de inchidere .
11

Investeşte în oameni!
� si
centreaza textul dintre ele la nivel de linie .
OBS: Tag-urile de formatare a textului pot fi folosite si combinat pentru a obtine efectul
dorit:
I know how to use HTML tags!
2.1.4. Imagini
In cadrul paginilor web introducerea elementelor grafice – la acest moment ne
referim la imaginile de tip GIF sau JPG – se face cu ajutorul tag-ului .
are ca efect introducere imaginii imagine.gif in pagina, cu dimensiunile specificate
in atributele WIDTH ( latime ) si HEIGHT ( inaltime ) ale tag-ului .
Atributul SRC specifica sursa de unde browser-ul va incarca imaginea respectiva ;
aceasta locatie poate fi in sistemul respectiv ( in directorul paginii sau in orice alt
director ce va fi specificat in cale ) sau in orice alta locatie pe web ( ex.
http://ura.data.ro/lectii/poza1.gif ) .
In cazul in care nu se introduce o cale catre aceasta imagine ci doar numele ei
atunci browser-ul va cauta in directorul curent al paginii web .
Atributele WIDTH si HEIGHT pot lipsi iar browser-ul va recunoaste imaginea la
dimensiunile ei originale ; chiar in cazul in care imaginea a fost special creat pe
dimensiunile necesare paginii noastre este de preferat folosirea celor doua atribute care
ajuta la incarcarea mai rapida a imaginii ( in caz contrar browser-ul va mai pierde timp
calculand dimensiune si asezarea in pagina a imaginii respective ) .
Un alt atribut care este preferabil sa fie prezent este ALT . Cu ajutorul acestui
atribut putem oferi o alternativa browser-ului in cazul in care imaginea respectiva nu a
putut fi incarcata :
Tag-ul anterior va face ca in cazul in care poza dorita nu este gasita browser-ul sa
afiseze textul atributului ALT intr-o fereastra de dimensiunile specificate pentru imagine.
12

Investeşte în oameni!
Un alt atribut al tag-ului IMG este si BORDER ; cu ajutorul sau putem specifica
grosimea unui chenar care inconjoara imaginea dorita .
.
Tag-ul IMG accepta si el atributul ALIGN , intalnit de exemplu si in cadrul tag-ului
Text care va apare alaturi de imagine neacoperind imaginea .
Comanda anterioara va pozitiona imaginea la dreapta liniei si va face ca textul sa
apara in stanga imaginii ( analog pentru folosirea atributului ALIGN=”left” ) .
In cazul folosirii valorii CENTER pentru atributul ALIGN se va obtine pozitionare in
stanga a imaginii ( lucru default ) iar textul va incepe pe linia pozitionata in dreptul
mijlocului imaginii , dupa umplerea acestei linii textul continuand pe linia urmatoare de
sub imagine – aceasta optiune este in general evitata .
Pentru a obtine centrarea imaginii se va apela la incadrarea tag-ului IMG intre
doua taguri complemetare si .
Tot in cadrul atributului ALIGN mai putem intalni alte trei valori :
� “bottom” – aliniaza partea inferioara a imaginii pe linia curenta
� “top” – aliniaza partea superioara a imaginii cu cel mai inalt element de pe linia
curenta
� “middle” – aliniaza mijlocul imaginii cu linia curenta
2.1.5. Liste
Listele sunt un element foarte des intalnit in cadrul paginilor web datorita in principal
impactului vizual mai ridicat decat al textului simplu .
In general putem discuta despre trei tipuri de liste : neordonate, ordonate si liste de
definitii .
Listele neordonate prezinta elementele listei unul sub altul , cu un asa numitele bullet-
uri la stanga elementului .
Listele ordonate inlocuiesc aceste bullet-uri cu numerale sau litere in ordine
crescatoare.
13

Investeşte în oameni!
1. LISTE NEORDONATE :
Element 1
Element 2
Element 3
Aceasta comanda va duce la crearea unei liste neordonate :
� Element 1
� Element 2
� Element 3
Tag-ul poate folosi atributul TYPE – cu valorile SQUARE , DISC si CIRCLE –
pentru a specifica formatul bullet-ului elementelor listei .
Acelasi atribut TYPE poate fi utilizat si in cadrul tag-ului pentru a specifica
individual formatul bullet-ului pentru fiecare element al listei in parte .
2. LISTE ORDONATE
Element 1
Element 2
Element 3
Aceasta comanda va produce urmatoarea lista ordonata :
1. Element 1
2. Element 2
3. Element 3
Tag-ul poseda doua atribute foarte folositoare : START si TYPE .
Atributul START determina valoarea numarului de ordine al primului element din lista .
Atributul TYPE poate avea patru valori :
a ~ pentru ordonare cu ajutorul literelor mici
A ~ pentru ordonare cu ajutorul majusculelor
I ~ pentru ordonare cu ajutorul numeralelor romane majuscule
l ~ pentru ordonare cu ajutorul numeralelor romane minuscule
(1 ~ pentru ordonarea numerica ( default ))
14

Investeşte în oameni!
Tag-ul - care introduce un element al listei poseda si el un atribut extrem de
folositor : VALUE ; cu ajutorul sau putem specifica o anumita valoare pentru numarul de
ordine al acelui element ( elementele urmatoare vor fi numarate incepand cu aceasta
noua valoare ) :
linia 1
linia 2
linia 3
Va produce urmatorul efect :
1. linia 1
7. linia 2
8. linia 3
Tag-ul poate utiliza si el atributul TYPE pentru a formata individual numerotarea
elementului respectiv al listei .
3. LISTE DE DEFINITIE
Termen de definit
Definitia termenului
Tag-ul folosit este ( = definition list ) , este urmat de termenul ce urmeaza a
fi definit iar specifica definitia propriu-zisa a termenului .
OBS : In limbajul HTML este permisa folosirea comentariilor, acestea incep cu . Orice tag inserat intre marcajele de comentariu este ignorat de
browser .
15

Investeşte în oameni!
2.1.6. LINK-URI
Un link ( sau o legatura ) reprezinta cuvintele subliniate in cadrul unei pagini si pe care
poti da click pentru a naviga catre alte locatii .
Practic orice element al unei pagini web poate fi asociat unui link : un text , o imagine
sau doar o portiune de imagine .
Yahoo
Secventa anterioara reprezinta introducerea unui link catre pagina Yahoo .
si ~ ( = anchor ) tag-urile transmit browser-ului faptul ca urmeaza definirea
unui link .
Adresa link-ului se incadreaza in href=” “ ; href vine de la Hypertext Reference si este
un atribut al tag-ului . Dupa incheierea tag-ului urmeaza textul sau imaginea
care urmeaza sa faca legatura catre linkul dorit .
In cazul in care dorim realizarea unei legaturi catre o alta pagina din acelasi director se
va introduce in cadrul atributului href doar numele paginii :
Continut
Un alt tip comun de legatura este linkul in cadrul aceleiasi pagini . Pentru a crea un
astfel de link trebuie realizati doi pasi .
In primul rand trebuie sa identificam sectiunea paginii unde vrem sa putem sari si apoi
sa realizam linkul .
Pentru primul pas – definirea zonei la care dorim sa se faca legatura avem doua
posibilitati :
sau
Text
Text
Prima posibilitate este si cea mai corecta realizand o ancora legata de textul respectiv ;
a doua posibilitate este de reprezinta de fapt definirea unui paragraf , cu ajutorul unui
atribut al tag-ului .
Saltul propriu-zis la aceasta zona definita se face prin intermediul urmatoarei linii de
cod:
Acest link va duce inapoi la zona definita
Saltul se poate face si combinat – la o anumita zona definita in alta pagina , ca in
exemplul urmator :
16

Investeşte în oameni!
Acest link va duce inapoi la zona
definita in pagina 2
O alta intrebuintare foarte des intalnita a tag-ului tine de inserarea in pagina web a
unei adrese de contact , mai exact o adresa de mail . Urmatoarea linie de cod
realizeaza exact acest lucru , cuvantul cheie mailto specificand browser-ului ca
urmeaza o adresa de mail iar acesta va lansa clientul de mail al vizitatorului paginii cu
adresa adresa@yahoo.com gata introdusa in cadrul mesajului :
Send E-Mail
Un atribut folositor al tag-ului este si SUBJECT , mail-ul trimis de vizitator primind astfel
un subiect gata definit de dumneavoastra :
Send E-Mail
Tot in problema linkurilor mai trebuie sa amintim si posibilitatea de a defini o adresa de
baza pentru linkurile din pagina noastra . In mod normal pentru un link catre o pagina
din acelasi director se foloseste doar numele paginii . Sa presupunem ca toate linkurile
din pagina noastra sunt catre pagini aflate intr-un acelasi director DIRECTOR_SURSE ;
in acest caz putem reduce textul presupus de introducerea acestei cai in fiecare atribut
HREF in modul urmator :
Dupa utilizarea acestui cod sursa putem utiliza in cadrul atributului HREF doar numele
fisierului respectiv .
17

Investeşte în oameni!
2.1.7. Tabele
O altă modalitate de a structura informaţia unui document Web constă în utilizarea
tabelelor. Acestea se creează cu ajutorul tagului .
Crearea tabelelor – Tagul
Tagul acceptă următoarele atribute:
- width, height – specifică lungimea, respectiv înălţimea tabelului. Valorile primite de
cele două atribute pot fi exprimate în pixeli, ca valori absolute, sau în procente din
dimensiunea blocului părinte.
- border – controlează afişarea/ascunderea chenarului celulelor tabelului şi, eventual,
permite specificarea grosimii sale. Chenarul celulelor are un aspect tridimensional.
Implicit, atunci când lipseşte, atributul border are valoarea 0, caz în care chenarul
celulelor nu va mai fi trasat, însă se va păstra organizarea sub formă de tabel a
conţinutului. Dacă atributul border este prezent, dar nu este însoţit de nici o valoare,
se va trasa în jurul celulelor un chenar a cărei lăţime este dependentă de browserul
utilizat (în acest caz, browserele Internet Explorer şi Netscape Comunicator trasează
un chenar de grosime 1). Specificarea explicită a grosimii chenarului se realizează
transmiţând ca valoare a atributului border grosimea dorită, exprimată în pixeli.
- cellpading – controlează distanţa, exprimată în pixeli, dintre conţinutul unei celule şi
chenarul său. Implicit, atributul cellpading are valoarea 1.
- cellspacing - controlează distanţa, exprimată în pixeli, dintre două celule. Implicit,
atributul cellspacing are valoarea 2.
- bgcolor – permite specificarea unei culori de fundal a tabelului. Valoarea primită de
atribut este dată fie sub forma tripletului hexa #rrggbb, fie o constantă predefinită de
culoare.
- background – permite afişarea unei imagini de fundal a tabelului. Atributul primeşte
ca valoare adresa URL a imaginii.
- bordercolor – permite specificarea culorii chenarului celulelor, exprimată fie sub
forma tripletului hexa #rrggbb, fie ca o constantă predefinită de culoare. Utilizarea
acestui atribut nu are sens atunci când atributul border nu există sau este setat pe 0.
La ora actuală, setarea culorii chenarului este permisă numai de către Internet
Explorer.
- bordercolorlight, bordercolordark – setează culoarea luminoasă, respectiv
culoarea umbrită, a unui chenar tridimensional. Utilizarea celor două atribute are
18

Investeşte în oameni!
sens numai în prezenţa atributului border. La ora actuală, setarea culorii chenarului
este permisă numai de către Internet Explorer.
- valign – specifică modul de aliniere verticală în interiorul celulelor. Alinierea poate fi:
top, bottom, center (valoare implicită).
- align – specifică modul de aliniere al tabelului în cadrul ferestrei browserului. Ca şi în
cazul imaginilor, restul elementelor documentului pot umple marginile tabelului.
Atributul align poate primi valorile left, right, center.
- hspace, vspace – controlează marginea liberă, pe orizontală, respectiv pe verticală,
lăsată între tabel şi celelalte elemente ale documentului. Valorile primite de cele două
atribute sunt exprimate în pixeli. La ora actuală, numai Netscape Comunicator
recunoaşte aceste două atribute.
Un tabel este organizat ca o succesiune de rânduri (orizontale), fiecare rând fiind
împărţit în coloane (verticale). Intersecţia dintre un rând şi o coloană defineşte o celulă.
Definirea rândurilor – Tagul (Table Row)
Introducerea rândurilor într-un tabel se realizează cu ajutorul tagului . Tagul
acceptă atributele:
� align – specifică modul de aliniere orizontală a conţinutului în interiorul celulelor
rândului respectiv. Alinierea poate fi: left (valoare implicită), right, center;
� valign - specifică modul de aliniere verticală a conţinutului celulelor rândului în
cauză. Alinierea poate fi: top, middle, bottom, baseline. În cazul valorii baseline,
toate elementele celulelor vor fi aliniate la aceeaşi linie de bază;
� bgcolor – permite specificarea, numai pentru Internet Explorer, a culorii chenarului
rândului. Culoarea poate fi specificată printr-un triplet hexa #rrggbb sau cu ajutorul
unei constante predefinite de culoare;
� background – primeşte ca valoare adresa URL a unei imagini pe care o va afişa
ca fundal al rândului curente. Atributul este acceptat numai de către Netscape
Comunicator;
� bordercolorlight, bordercolordark – atributele au aceeaşi semnificaţie ca în
cazul includerii lor în tagul , numai că se vor referi la chenarul rândului
curent. Sunt recunoscute numai de către Internet Explorer;
� title – permite afişarea unui mesaj când mouse-ul se opreşte deasupra rândului.
19

Investeşte în oameni!
OBS : O mare parte dintre atributelor asociate tabelelor sunt comune tagurilor ,
şi . În cazul în care un asemenea tag este definit simultan în două taguri
diferenţiate ierarhic, prioritară va fi valoarea atributului din tagul cel mai recent. De
exemplu, dacă considerăm tagul , definind culoarea rosie drept
culoare de fundal a tabelului, apoi includem în tabel tagul , vom
constata că rândul curent are ca fundal culoarea albastră, aceasta fiind culoarea
definită în tagul cel mai recent (inferior ierarhic).
Definirea celulelor – Tagul (Table Data)
Definirea celulelor unui tabel se realizeaeză cu ajutorul tagului . Tagul acceptă
atributele:
� align – setează modul de aliniere orizontală a conţinutului celulei respective.
Alinierea poate fi: left, center, right.
� valign– setează modul de aliniere verticală a conţinutului celulei respective.
Alinierea poate fi: left, center, right, baseline.
� width, height – setează lungimea, respectiv lăţimea celulei curente.
� Dimensiunile sunt exprimate fie în valori absolute (pixeli), fie în procente din
dimensiunile corespunzătoare ale tabelului. Se recomandă ca toate celulele unui
rând/coloană să aibă aceeaşi înălţime/lungime, pentru a nu altera forma tabelului.
� bgcolor – setează culoarea fundalului celulei, analog includerii în tagurile
sau .
� background – permite afişarea unei imagini de fundal a celulei, analog includerii
în tagurile sau .
� bordercolor, bordercolorlight, bordercolordark – atributele sunt recunoscute
numai de către Internet Explorer şi au aceeaşi semnificaţie ca şi în cazul tagurilor
şi , numai că se referă la chenarul celulei curente.
� nowrap – prezenţa acestui atribut inhibă posibilitatea ca textul unei celule să fie
„spart” în mai multe linii. Din motive lesne de înţeles, nu se recomandă utilizarea
excesivă a acestui atribut.
� colspan, rowspan – permit unirea mai multor celule aflate pe aceeaşi coloană,
respectiv rând, într-una singură. Implicit, cele două atribute au valoarea 1.
� title - afişează un mesaj atunci când mouse-ul se află în repaos pe suprafaţa
celulei.
20

Investeşte în oameni!
Definirea antetelor – Tagul (Table Header)
Celulele – antet sunt identice cu celulele data (td – Table Data), cu două excepţii:
� Conţinutul de text al celulelor header este scris cu litere aldine;
� Atributul align are, implicit, valoarea center.
Titlul tabelului – Tagul
Tagul defineşte titlul unui tabel. El este prezent în interiorul perechii
, dar nu în definiţia unui rând sau a unei celule. Tagul acceptă următoarele
atribute:
� align – atributul align poate primi valorile:
o top, bottom – controlează poziţia titlului faţă de tabel (deasupra/dedesupt);
o left, center, right – controlează alinierea orizontală a titlului. Valorile sunt
recunoscute numai de către Internet Explorer. În cazul acestui browser,
poziţionarea titlului deasupra sau dedesuptul tabelului se realizează cu
ajutorul atributului valign.
� valign – pentru Internet Explorer, contolează poziţionarea titlului faţă de tabel
(deasupra sau dedesupt). Poate lua valorile top sau bottom.
21

Investeşte în oameni!
2.2. Aplicaţii
Aplicatia 1. Creati o pagina web cu numele "Structura de baza a unei pagini web"
cu urmatorul continut:
Aceasta este prima mea pagina web
Indicatii:
Structura de baza a unei pagini web
Aceasta este prima mea pagina web
Aplicatia 2. Creati o pagina web cu numele "Delimitarea paragrafelor" cu
urmatorul continut:
Acesta este primul paragraf. Un paragraf poate contine oricat de multe randuri de text
Al doilea paragraf
Al treilea paragraf
Indicatii:
Delimitarea paragrafelor
Acesta este primul paragraf. Un paragraf poate contine oricat de multe
randuri de text
Al doilea paragraf
Al treilea paragraf
Aplicatia 3. Creati o pagina web cu numele "Alinierea paragrafelor cu atributul
align" cu urmatorul continut:
22

Investeşte în oameni!
Paragraf centrat
Paragraf aliniat la dreapta
Paragraf aliniat la stanga (implicit)
Paragraf aliniat la ambele margini. Textul trebuie sa se intinda pe mai multe randuri
pentru a putea observa aliniererea
Indicatii:
Alinierea paragrafelor cu atributul align
Paragraf centrat
Paragraf aliniat la dreapta
Paragraf aliniat la stanga (implicit)
Paragraf aliniat la ambele margini. Textul trebuie sa se intinda
pe mai multe randuri pentru a putea observa aliniererea
Aplicatia 4. Creati o pagina web cu numele "Trecerea textului pe linie noua" cu
urmatorul continut:
Cobori in jos
Luceafar bland,
Alunecand pe-o raza
. . .
Indicatii:
Trecerea textului pe linie noua
Cobori in jos Luceafar bland, Alunecand pe-o raza. . .
23

Investeşte în oameni!
Aplicatia 5. Creati o pagina web cu numele "Ingrosarea, aplecarea, sublinierea si
taierea textului" cu urmatorul continut:
Text ingrosat
Text italic
Text subliniat
Text taiat cu o linie
Indicatii:
Ingrosarea, aplecarea, sublinierea si taierea textului
Text ingrosat Text italic Text subliniat
Text taiat cu o linie
Aplicatia 6. Creati o pagina web cu numele "Tag-ul font cu atributele face, size si
color" cu urmatorul continut:
Text scris cu fontul Arial, marimea 2, culoare rosie
Text scris cu fontul Verdana, mai mare, culoare verde
Indicatii:
Tag-ul font cu atributele face, size si color
Text scris cu fontul Arial, marimea 2,
culoare rosie
Text scris cu fontul Verdana, mai
mare, culoare verde
Aplicatia 7. Creati o pagina web cu numele "Atragerea atentiei cititorului" cu
urmatorul continut:
24

Investeşte în oameni!
Iata un proverb: Bine faci, bine gasesti.
Alt proverb: Tacerea e de aur.
Indicatii:
Atragerea atentiei cititorului
Iata un proverb: Bine faci, bine gasesti.
Alt proverb: Tacerea e de aur.
Aplicatia 8. Creati o pagina web cu numele "Marirea si micsorarea textului" cu
urmatorul continut:
Text normal mai mare si mai mare
Text normal mai mic si mai mic
Indicatii:
Marirea si micsorarea textului
Text normal mai mare si mai mare
Text normal mai mic si mai mic
Aplicatia 9. Creati o pagina web cu numele "Scrierea monospatiata cu tag-ul tt"
cu urmatorul continut:
Un paragraf care foloseste elementul tt
Indicatii:
25

Investeşte în oameni!
Scrierea monospatiata cu tag-ul tt
Un paragraf care foloseste elementul tt
Aplicatia 10. Creati o pagina web cu numele "Scrierea exponentilor si a indicilor"
cu urmatorul continut:
Teorema lui Pitagora: a 2 = b 2 + c 2
Formula chimica a apei: H 2 O
Indicatii:
Scrierea exponentilor si a indicilor
Teorema lui Pitagora:
a 2 = b 2 + c 2
Formula chimica a apei: H 2 O
Aplicatia 11. Creati o pagina web cu numele "Antete de diverse marimi" cu
urmatorul continut:
Titlu de marimea cea mai mare
Titlu putin mai mic
Titlu si mai mic
Titlu si mai mic
Titlu si mai mic
Titlu de marimea cea mai mica
26

Investeşte în oameni!
Indicatii:
Antete de diverse marimi
Titlu de marimea cea mai mare
Titlu putin mai mic
Titlu si mai mic
Titlu si mai mic
Titlu si mai mic
Titlu de marimea cea mai mica
Aplicatia 12. Creati o pagina web cu numele "Aplicatii formatare text" cu
urmatorul continut:
Text scris cu litere ingrosate
Text cu caractere marite cu o unitate mai mare si mai mare si
mai mare
textul este scris cu caractere micsorate cu o unitate mai mic
text scris cu caractere italice
In aceasta linie sus este superscript iar joseste subscript
Aceasta linie este in intregime sectionata de o linie orizontala
In aceasta linie urmatorul cuvant este subliniat iar cuvantul strike este sectionat
Indicatii:
Aplicatii formatare text
Text scris cu litere ingrosate
Text cu caractere marite cu o unitate mai mare si mai mare
si mai mare
textul este scris cu caractere micsorate cu o unitate mai
mic
text scris cu caractere italice
27

Investeşte în oameni!
In aceasta linie sus este superscript iar jos
este subscript
Aceasta linie este in intregime sectionata de o linie orizontala
In aceasta linie urmatorul cuvant este subliniat iar cuvantul
strike este sectionat
Aplicatia 13. Creati o pagina web cu numele "Lista ordonata" cu urmatorul
continut:
1. primul element
2. al doilea element
3. al treilea element
Indicatii:
Lista ordonata
primul element
al doilea element
al treilea element
Aplicatia 14. Creati o pagina web cu numele "Lista ordonata cu atributul type" cu
urmatorul continut:
a. primul element
b. al doilea element
c. al treilea element
i. primul element
ii. al doilea element
iii. al treilea element
1. primul element
2. al doilea element
3. al treilea element
28

Investeşte în oameni!
Indicatii:

Investeşte în oameni!
Aplicatia 16. Creati o pagina web cu numele "Lista neordonata cu atributul type "
cu urmatorul continut:
o primul element
o al doilea element
o al treilea element
� primul element
� al doilea element
� al treilea element
� primul element
� al doilea element
� al treilea element
Indicatii:
Lista neordonata cu atributul type
primul element
al doilea element
al treilea element
primul element
al doilea element
al treilea element
primul element
al doilea element
al treilea element
Aplicatia 17. Creati o pagina web cu numele "Liste imbricate (incluse una in alta)”
cu urmatorul continut:
1. Pizza
o faina
o masline
o sunca
o cascaval
2. Salata
o varza
30

Investeşte în oameni!
o ulei
o otet
Indicatii:
Liste imbricate
Pizza
faina
masline
sunca
cascaval
Salata
varza
ulei
otet
Aplicatia 18. Creati o pagina web cu numele "Lista de definitii" cu urmatorul
continut:
a asigna
a asocia, a atasa
complexitate
numarul de operatii elementare efectuate de algoritm
Indicatii:
Lista ordonata
a asigna a asocia, a atasa
complexitate numarul de operatii elementare efectuate de
algoritm
31

Investeşte în oameni!
Aplicatia 19. Creati o pagina web cu numele "Inserarea unei imagini" cu urmatorul
continut:
Paragraf situat inainte de imagine
Paragraf situat dupa imagine
Indicatii:
text situat in acelasi paragraf cu imaginea, pentru a observa alinierea
Inserarea unei imagini
Paragraf situat inainte de imagine
text situat in
acelasi paragraf cu imaginea, pentru a observa alinierea
Paragraf situat dupa imagine
Aplicatia 20. Creati o pagina Web cu titlul „Bine ai venit sa-l vezi pe GOGUTZA”
care sa contina:
(00)
\/| |\/
_| |_
Indicatii:
Bine ai venit sa-l vezi pe GOGUTZA
(00)
\/| |\/
_| |_
32

Investeşte în oameni!
Aplicatia 21. Creati o pagina Web cu titlul „Tabel” care sa contina tabelul de mai
jos:
Indicatii:
Tabel
mure
zmeura
afine
mere
pere
cirese
Aplicatia 22. Creati o pagina Web cu titlul „Dictionar” care sa contina
urmatoarele fragmente dintr-un dictionar:
Litera A
mure
mere
zmeura
pere
afine
cirese
abager
din abagerie
abagerie
atelier sau industrie producatoare de (haine de) aba
abate
titlu dat superiorului unei abatii
abientin
substanta rasinoasa extrasa din lemnul de brad si care se prezinta sub forma de
cristale incolore, solubile in apa si in alcool
adsorbtie
fixare si acumulare a moleculelor unui gaz sau ale unui lichid pe suprafata unui
corp solid
33

Investeşte în oameni!
Litera B
bacal
bacan
bacanta
preoteasa a zeului Bachus
balada
creatie epica in versuri care relateaza o actiune eroica, o legenda, o intamplare
istorica
balansier
piesa care regleaza prin oscilatiile ei miscarea unui mecanism.
Litera C
caricatura
reprezentare a unei persoane sau a unei situatii prin exagerarea unor trasaturi,
indeosebi negative, cu o intentie satirica sau umoristica
catren
strofa (sau poezie) formata din patru versuri
celt
persoana facand parte dintr-o veche populatie europeana care a locuit in Galia
cetinis
padure tanara, desis de conifere
citadela
mica fortareata situata in incinta unei cetati, a unui oras, care servea ca
rezistenta si ca ultim refugiu al celor asediati
Litera D
demascare
dezvaluire, dare in vileag
dendrita
prelungire ramificata a protoplasmei celulei nervoase, prin care influxul nervos se
propaga in regiunea opusa cilindrului ax
descumpanit
care si-a pierdut, si-a zdruncinat echilibrul sufletesc; dezorientat, dezechilibrat;
dilatometru
aparat care masoara dilatatia corpurilor
Indicatii:
Dictionar
[A] [B] [C] [D]
34

Investeşte în oameni!
Litera A
abagerdin abagerie
abagerieatelier sau industrie producatoare de (haine
de) aba
abatetitlu dat superiorului unei abatii
abientinsubstanta rasinoasa extrasa din lemnul de
brad si care se prezinta sub forma de cristale incolore, solubile in apa si
in alcool
adsorbtiefixare si acumulare a moleculelor unui gaz
sau ale unui lichid pe suprafata unui corp solid
Litera B
bacalbacan
bacantapreoteasa a zeului Bachus
balada creatie epica in versuri care relateaza o
actiune eroica, o legenda, o intamplare istorica
balansier piesa care regleaza prin oscilatiile ei
miscarea unui mecanism
Litera C
caricatura reprezentare a unei persoane sau a unei
situatii prin exagerarea unor trasaturi, indeosebi negative, cu o intentie satirica
sau umoristica
catren strofa (sau poezie) formata din patru versuri
celt persoana facand parte dintr-o veche populatie
europeana care a locuit in Galia
cetinis padure tanara, desis de conifere
citadela mica fortareata situata in incinta unei cetati, a
unui oras, care servea ca rezistenta si ca ultim refugiu al celor asediati
Litera D
35

Investeşte în oameni!
demascare dezvaluire, dare in vileag
dendrita prelungire ramificata a protoplasmei celulei
nervoase, prin care influxul nervos se propaga in regiunea opusa cilindrului ax
descumpanit care si-a pierdut, si-a zdruncinat
echilibrul sufletesc; dezorientat, dezechilibrat;
dilatometru aparat care masoara dilatatia corpurilor
[A] [B] [C] [D]
Aplicatia 23. Creati o pagina Web cu titlul „Cuprins” care sa contina acest text:
Sa se editeze urmatorul cuprins:
Windows XP Professional
1. Interfata Windows XP Professional
o Explorarea sistemului de operare
o Lucrul cu fisiere
� Meniul FILE
� Meniul EDIT
� Meniul VIEW
� Meniul FAVORITES
� Meniul TOOLS
� Meniul HELP
o Lansarea aplicatiei si meniul START
o Configurarea mediului de lucru in Windows XP Professional
2. Aplicatii sub Windows XP Professional
o Notepad
o WordPad
o Paint
3. Gestionarea utilizatorilor
o Utilizatori, grupuri de utilizatori, parole de acces
o Partajarea directoarelor
4. Intretinerea sistemului
o Gestionarea hard disk-urilor
o Curatarea "cleanup"
o Defragmentarea hard disk-urilor
o Backup / Restore
5. Lucrul in retea
o Configurarea conexiunii la retea
o Lucrul in reteaua locala
o Periferice in retea
o Conectare la Internet
o Internet Explorer
36

Investeşte în oameni!
o Outlook Express
6. Anexe
o Date tehnice de instalare
o Monitorizarea performantelor sistemului
o Diferente fata de versiunile anterioare
o Servicii in Windows XP
7. Bibliografie recomandata
Indicatii:
Cuprins
Sa se editeze urmatorul cuprins:
Windows XP Professional
Interfata Windows XP Professional
Explorarea sistemului de operare
Lucrul cu fisiere
Meniul FILE
Meniul EDIT
Meniul VIEW
Meniul FAVORITES
Meniul TOOLS
Meniul HELP
Lansarea aplicatiei si meniul START
Configurarea mediului de lucru in Windows XP Professional
Aplicatii sub Windows XP Professional
Notepad
WordPad
Paint
Gestionarea utilizatorilor
Utilizatori, grupuri de utilizatori, parole de acces
Partajarea directoarelor
Intretinerea sistemului
37

Investeşte în oameni!
Gestionarea hard disk-urilor
Curatarea "cleanup"
Defragmentarea hard disk-urilor
Backup / Restore
Lucrul in retea
Configurarea conexiunii la retea
Lucrul in reteaua locala
Periferice in retea
Conectare la Internet
Internet Explorer
Outlook Express
Anexe
Date tehnice de instalare
Monitorizarea performantelor sistemului
Diferente fata de versiunile anterioare
Servicii in Windows XP
Bibliografie recomandata
Aplicatia 24. Creati o pagina Web cu titlul „Oferta” care sa contina:
38

Investeşte în oameni!
Indicatii:
Oferta
Oferta
speciala
Sistem Intel Pentium 43.2 GHz LGA775
Placa video FX5500GE 256 MB
2420 ron
Memoria
Hard Disk
DVD
Placa de sunet
Fast Ethernet Card
39

Investeşte în oameni!
Capitolul 3. CONCLUZII
In ziua de azi, existenta unui site web pe piata online, tinde sa devina tema de
activitate a multor companii ce inteleg necesitatea extinderii propriei afaceri catre o
piata reprezentata de milioane de potentiali clienti. Astfel, detinerea unei pagini web
reprezinta calea cea mai usoara de ofertare a noilor clienti.
"O pledoarie pentru schimbare în educaţie nu ar putea începe, în zilele noastre,
decât cu afirmarea rolului principal care revine cadrelor didactice în asumarea acestei
schimbări şi cu sublinierea necesităţii de recuperare a principiilor pedagogice aplicate,
în contextul actual dinamic, marcat de utilizarea noilor tehnologii pe toate palierele
sociale, culturale şi profesionale."
Implementarea şi utilizarea de tehnologii moderne în educaţie şi cercetare reclamă
mobilizarea şi susţinerea diverselor iniţiative, programe şi proiecte ale instituţiilor
publice, organizaţiilor profesionale sau individual ale specialiştilor din domeniul
eLearning, cercetătorilor, profesorilor din învăţământul universitar şi preuniversitar,
inspectorilor, consilierilor, pedagogilor, psihologilor, elevilor şi studenţilor.
Disciplina TIC (Tehnologia Informaţiei şi a comunicaţiilor) este o disciplină care
îmbină teoria cu practica în mod armonios. Introducerea în cadrul examenului de
bacalaureat a probei de competenţe digitale (proba D) subliniază importanţa pe care
care o are această disciplină atât pentru formarea profesională a adolescentului cât şi
pentru integrarea lui pe piaţa forţei de muncă.
Formarea competenţelor de utilizare a calculatorului se bazează pe folosirea la
orele de TIC a cât mai multe aplicaţii practice de laborator. Deoarece manualele de TIC
prezintă puţine exemple de sarcini de lucru, am simţit nevoia să îmi creez propriile fişe
de lucru, teste, grile, corespunzător fiecărui capitol, subcapitol, pentru fiecare aplicaţie
pe care o predau. Tinand seama de caracteristicile grupului de elevi carora ma adresez,
elevi proveniti, in mare parte, din mediul rural, unii dintre ei nici macar nu detin un
calculator, fisele de lucru sunt realizate de la simplu la complex, pentru a fi intelese de
toti elevii.
Aceasta lucrare conţine doar o mică parte, cea mai reprezentativă, a fişelor de
lucru pe care le folosesc la clasa, in predarea limbajului HTML. Acest demers ar putea fi
un exemplu şi un punct de pornire pentru alţi profesori care predau TIC în efortul comun
de a oferi elevilor cele mai eficiente instrumente pentru formarea competenţelor digitale.
40

Investeşte în oameni!
Capitolul 4. BIBLIOGRAFIE
1. Curs “ Medii şi tehnologii educaţionale interactive ”, FlexFORM
2. http://www.marplo.net/html/introducere.html
3. http://www.tutorialehtml.com/ghid-incepatori/prima-pagina-in-html.php
4. http://www.cniv.ro/2009/elearning
5. Tehnologia informației și a comunicațiilor – manual clasa a IX a
, Mariana
Miloșescu
6. Metodica predării Informaticii şi Tehnologia Informaţiei - Carmen Petre,
Ştefania Crăciunoiu, Daniela Popa
41