CUPRINS

1 Notiuni introductive
( Internet ,Web, HTML, URL, editor, servicii, legislatie )

2 Notiuni de baza pentru structura unei pagini Web

( tag { atribute, valori }, caractere speciale, haeder, linie orizontala, paragraf ,
referinte , link-uri , liste )

3 Tabele
( necesitate, tag-uri specifice, proprietati { linii, coloane} )

4 Formulare
( necesitate, notiuni generale, elementele unui formular, campuri de editare,
obiecte { butoane, casete de validare, campuri de editare, liste de selectie,
butoane radio} )

5 Notiuni de grafica Web

( tag-uri specifice , unelte pentru Web-design, alegerea tipului de imagine )

6 Cadre
( necesitate, integrarea cadrelor intr-o pagina Web )

7 Notiuni generale de CSS

( definitie, necesitate, sintaxa, integrare in HTML. selectori CSS, formatare text,
font, fundal )
8 Script-uri Web – notiuni generale
( Java, PHP, C#.Net )

9 Aplicatie - realizarea unui site

( grup tinta, realizare haeder, meniu, imagini, fonturi )
 2

I.Notiuni introductive
( Internet ,Web, HTML, URL, editor, servicii, legislatie )

Internet" (cu i mare) reprezinta reteaua globala, accesibila in mod public

formata prin inter conectarea a milioane de retele de calculatoare din toata
lumea.

• Internetul si paginile Web - au patruns adanc si puternic in viata

noastra. Se pune problema insa: prin ce ne-au castigat ? Iata cateva
motive pentru care interesul pentru tehnologia comunucatiei virtuale ar
trebui sa ne atraga cat mai mult:
 faciliteaza comunicarea interumana aproape instantaneu;
 este o reala sursa de documentare , deoarece se poate publica
orice format de informatie;
 un site web al unei companii este foarte eficienta din punctul de
vedere al rezultatelor;
 sa nu uitam site-urile care se adreseaza consumatorului final , cele
prin intermediul carora se pot face on-line : cumparaturi , rezervari
, plati de facturi , studiu la distanta

• Internetul isi are originea in anul 1969, aparut datorita unui proiect
experimental in cadrul unei agentii din Departamentrul de Aparare al US.
Proiectul initial lega calculatoarele de la Univ. of California din Los Angeles
(UCLA), institutul Stanford (SRI) din Menlo Park si Universitatea Utah din
Salt Lake City. In proiectul initial al ARPAnet se asigurau doar 3 servicii de
comunicatie: conectarea la distanta - telnet (Remote login), transferul de
fisiere si tiparirea la distanta.
 in 1972, cand se ajunsese la o retea cu 37 de calculatoare, a fost
introdus si serviciul de posta electronica - e-mail;
 in 1973, sistemul TCP/IP este propus ca un standard pentru ARPAnet. El
este insa acceptat ca protocol standard doar la 1 Ianuarie 1983, cand
ARPAnet ajunsese sa asigure conectarea a 500 de centre.
 in 1990 ARPAnet dispare (dupa ce toate organizatiile care erau
conectate au trecut la NSFNET. La randul sau NSFNET isi inceteaza
activitatea in 1995 cand accesul la Internet ajunge sa fie asigurat de
firme comerciale pentru intreaga lume.
 in 1990 Tim Berners-Lee, fizician la CERN Geneva, dezvolta
protocoalele de comunicatie pentru World Wide Web, creind si limbajul
HTML (Hypertext Markup Language). Chiar daca era initial un proiect
destinat cercetatorilor din fizica atomica si subatomica, descoperirile
sale au facut rapid epoca, pentru multa lume Internetul devenind
sinonim cu World Wide Web-ul.
 primele pagini Web vizibile "in lume" sunt raportate in
decembrie 1991, la laboratorul de fizica de la Stanford Linear
Accelerator Center (SLAC). Unii considera ca moment al aparitiei
Web-ului doar anul 1994, cand a fost lansat pe piata primul
navigator performant
 3

• Fiecare calculator conectat direct la Internet este identificat in mod unic

printr-o adresa IP. Fiecare adresa IP este formata din 32 biti reprezentati
prin 4 grupe de cifre cuprinse intre 0 si 255 separate prin punct (ex:
192.168.0.1).

IP (Internet Protocol) este protocolul ce guverneaza transmiterea datelor

intre calculatoarele conectate la Internet, cu ajutorul adreselor IP.

• Datele (informatia) circula pe Internet sub forma de pachete din aproape in

aproape, din router in router (dispozitiv care leaga mai multe retele), de la
sursa catre destinatie.

• Internetul nu are un proprietar anume. Exista totusi organisme

internationale care definesc si urmaresc modul de functionare al
Internetului.
ex: toate adresele IP si numele de domenii sunt sub jurisdictia unei
organizatii numite IANA (Internet Assigned Numbers Authority). Acesta
este controlata de ICANN (Internet Corporation for Assigned Names and
Numbers). ICANN este o corporatie non-profit din California

Browser Web este o aplicatie software utilizata pentru a localiza şi a afişa

pagini Web

• Două dintre cele mai populare browsere sunt Microsoft Internet

Explorer, Netscape şi Firefox. Sunt browsere grafice, ceea ce înseamnă
că pot afişa grafică, precum şi de tip text. În plus, cele mai moderne
browsere pot prezenta multimedia informaţii, inclusiv de sunet şi video,
deşi au nevoie de plug-in-uri ( mici programe ) pentru anumite formate.
 4

World Wide Web abreviat WWW; numit scurt şi web, care în engleză
înseamnă "reţea" ,este un sistem de documente şi informaţii de tip hipertext
legate ele între ele care pot fi accesate prin reţeaua mondială de Internet

Webul a fost inventat în 1989 la Centrul European de Cercetări Nucleare

(CERN)în Geneva (Elveţia). Propunerea iniţială de creare a unei colecţii de
documente având legături între ele a fost făcută de Tim Berners-Lee în
martie 1989. Această propunere a apărut în urma problemelor de
comunicare pe care le întâmpinau echipele de cercetători ce foloseau centrul,
chiar şi folosind poşta electronică.

• Tim Berners-Lee şi echipa sa au realizat primele versiuni pentru

patru componente cheie necesare serviciului web, şi anume:

• protocolul de intercomunicaţie HTTP;

• limbajul de descriere a hipertextului HTML;
• serverul de web ( calculatorul pe care rulează una sau mai multe
aplicaţii si ofera aceleasi servicii altor computere conectate cu el)
• browser-ul.

• Arhitectura client-server constă dintr-un server si deseori cel puţin 2

computere.

Aproape toată structura Internetului se bazează pe modelul de client-

server. Multe milioane de servere din toată lumea sunt conectate la Internet
 5

şi rulează continuu. Majoritatea serviciilor oferite pe Internet rulează pe

servere: Web.

Standardele web sunt un termen general pentru standardele formale şi alte

tehnici specifice care definesc şi descriu aspecte ale World Wide Web.

Cu ajutorul codului HTML (Hyper Text Markup Language) poti construi

pagini web .

• Structura de baza a unei pagini Web este data prin:

• sau utilizarea unui editor HTML , care scrie automat codul
fiecarei operatii efectuate in constructia paginii ( ex : MS
FrontPage, Netscape Navigator )
• tastarea unui cod sursa intr-un editor de tip text , salvarea
acestuia cu extensia : html si deschiderea fisierului salvat cu un
browser de Internet ;

Continut pagina

//------------------------------------------------
 6

sau:

<html>

<head>
<title>Titlul paginii</title>

</head>

<body>

Prima mea pagina web.

</body>
</html>

Furnizor de Servicii Internet ( ISP , adica Internet Service Provider )

este furnizoriul de servicii Internet .
• Furnizorii de Servicii Internet sunt niste companii zonale , care ofera acces
la propria retea , iar aceasta , la randul ei , va conecteaza la Internet .

URL (în engleză Uniform Resource Locator) reprezinta calea pentru

specificarea unei resurse (unui site sau a unei pagini) în Internet.

• Schema folosita in scrierea adresei este:

<protocol>://<nume_DNS>/<nume_local>
Unde :
• <protocol> - de cele mai multe ori este http ,
• <nume_DNS> - numele domeniului pe care se află resursa ,
• <nume_local> - calea şi numele resursei de pe discul local.
• De ex http://students.info.ro/index.html
 7

Internet-ul ( inclus in domeniul tehnologiei informatiei ) este protejat prin

legislatie.

II.Notiuni de baza pentru structura unei pagini Web

( tag { atribute, valori }, caractere speciale, haeder, linie orizontala, paragraf ,
referinte , link-uri , liste )

(a) Tag-urile sunt niste marcaje sau etichete pe care limbajul HTML le
foloseste alaturi de texte pentru a ajuta browser-ul de internet sa
afiseze corect continutul paginii web.

<tag atribut="valoare"> informatie </tag>

Nota:
• nu toate tag-urile accepa atribut ( daca accepta atribut, atunci este
necesara si o valoare a atributului )
• in HTML nu toate tag-urile cer ‘ inchiderea’ tagului prin </ tag>
• exista tag-uri singulare : <tag> ( fara eticheta de deschidere si
inchidere, fiindca nu contin nici o informatie)
 8

<htmlL> cu acest tag incepe orice document HTML. Prin folosirea acestui tag ii
spunem browser-ului ca este vorba de un fisier HTML pentru a il putea
afisa.
<head> intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse
informatii folositoare pentru browser-ul de internet

</head> acesta este tag-ul de incheiere al tag-ului <HEAD>

<title> cu ajutorul acestei perechi de tag-uri vei putea da un titlu

documentului tau. Astfel, textul pe care il vei scrie intre aceste tag-uri
va fi afisat in bara de titlu a documentului.
</title> este tag-ul de încheiere al tag-ului <TITLE>. Arata sfarsitul titlului
documentului.

<body> (b) odata cu acest tag incepe continutul paginii web. Tot ce vei
scrie intre tag-urile <BODY> si </BODY> va fi afisat, de catre
browser, pe ecranul monitorului.
</body> ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea
ce vei scrie dupa acest tag nu va mai fi afisat.

</htmlL> este tag-ul de încheiere al tag-ului <HTML>. Codul oricarui document

se termina cu acest tag.

Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere

mici, dar VA SUGERAM sa utilizati LITERE MICI.
trece pe urmatorul traseaza o linie orizontala
<br> rand <hr>

Nume Nume atribut Valoare Detalii

tag atribut
<a> Ancora
href URL Adresa catre care vrem sa fie
legatura (adresa URL, fisier local,
imagine
target _blank Fereastra in care se va face afisarea
_self
_parent
_top
name e foloseste pentru documente lungi,
care au scroll vertical, pentru a
naviga prin link in cadrul aceluiasi
document.
title text descriptiv pentru link. Textul va
aparea ca un tooltip (cand mergem
cu mouse-ul peste link)
<b> Text bold
<body> Cuprinsul documentului
background adresa
Imaginea de fond
imaginii
bgcolor cod
culoare
Culoarea fondului
nume
culoare
leftmargin procent Distanta dintre marginea din stanga
din a
latimea ferestrei browserului si marginea
paginii din
 9

numar de stanga a paginii

pixeli
topmargin procent Distanta dintre marginea de sus a
din ferestrei browserului si marginea de
inaltimea sus
paginii a paginii
numar de
pixeli
text cod
culoare
Culoarea textului
nume
culoare
alink cod Culoarea legaturilor active (atunci
culoare cand
nume mouse-ul se afla deasupra lor)
culoare
link cod Culoarea legaturilor nevizitate (nu
culoare s-a
nume efectuat nici un click pe ele)
culoare
vlink cod Culoarea legaturilor vizitate
culoare (s-a efectuat cel putin un click pe
nume ele)
culoare
<br> sfarsit de rand
<center> Afisarea in centrul paginii
<font> Fontul textului
color cod culoare Culoarea fontului
nume
culoare
face nume font Tipul fontului
size un numar Marimea fontului
de la 1 la 7
<h1>,<h2>, Dimensiuni de titluri in cadrul
<h3>,<h4>, paginii
<h5>,<h6>,
align left
center
right
justify
<hr> Linie orizontala
align eft Alinierea orizontala a liniei
center
right
color cod culoare Culoarea liniei
nume
culoare
size numar de Inaltimea liniei
pixeli
width rocent din Latimea liniei
latimea
paginii
numar de
pixeli
<i> Text italic
<img> Adaugarea unei imagini
align eft Alinierea imaginii in pagina: left
right (stanga)
top sau right (dreapta)
 10

middle Alinierea elementelor din jurul

bottom imaginii:
top (sus), middle (mijloc), bottom
(jos)

alt text Text ce va fi afisat in locul imaginii,

in
cazul in care, aceasta nu este
afisata
border numar de Marimea chenarului din jurul
pixeli imaginii
height procent Inaltimea imaginii
numar de
pixeli
hspace numar de Spatiu pe orizontala in jurul imaginii
pixeli
src URL Adresa imaginii
vspace numar de Spatiu pe verticala in jurul imaginii
pixeli
<li> Element lista
<ol> Lista ordonata
width procent Latimea imaginii
numar de
pixeli
<p> Paragraf

align Alinierea paragrafului

left
center
right
justify
<strong> Text evidentiat
<sub> Text indice
<sup> Text exponent
<u> Text subliniat
<ul> Lista neordonata
type circle Se scriu cerculete goale in dreptul
elementului din lista
square Se scriu patrate goale in dreptul
elementului din lista
 11

Indicatii si exemple

1. FORMATARE FUNDAL SI FONT

<html>
<head>
<title>Prima mea pagina web</title>
</head>
<body bgcolor="#aacc00">
<font color="#0000ff" size="6"> Fundal si font </font>
<br>
<hr COLOR="#FF0000" width="25% "size="5%"
align="left">
<br>
<font color="#FF0000"> Am schimbat culoarea fontului
</font>
<hr>
</body>
EDITARE </html>

DESCHIDERE PAGINA
SALVARE

VIZUALIZARE PAGINA
 12

VIZUALIZARE COD SURSA

modificarea codului se poate
face:
• prin revenirea in fisierul
initial si deschiderea lui
cu editor tex
( ex.Notepad)
• prin vizualizarea directa
a codului din pagina
deschisa in browser.
modificarea codului implica
pasii: salvarea fisierului cu
noile modificari si
reactualizarea paginii prin
tastarea in browser a
butonului ‘Refresh’.

2. FORMATARE PARAGRAFE SI HAEDERE

3. LINK - URI

• referintele ( link-urile ) in cadrul aceluiasi document ( foto 1.)

De ex:
ne propunem sa cautam prima aparitie a cuvintelor “Internet” si “Web” in
text .
 13

 Se marcheaza cu # sirul cautat ( #Internet ) . Internet reprezinta ce va apare scris in pagina

cand se executa click pe link

<a href=”#Internet”>Internet</a> ,<a href="#Web">Web</a>, HTML, URL, editor, servicii,
legislatie
 In pagina, in dreptul fiecarui cuvant cautat , atasam ‘ ancora’ spre care este directionat link-ul.

<a name="Internet”><font color=”#0000ff”><b>Internet</b></font></a> (cu i mare) reprezinta

reteaua globala, accesibila in mod public formata prin inter conectarea a milioane de retele de
calculatoare din toata lumea.
.................................................................
<a name="Web”><font color=”#0000ff”><b>Web</b></font></a>

Pentru o evidentiere a cuvintelor cautate, acestea apar in pagina cu alta culoare chiar de la incarcarea
paginii, pe cand cuvintele initiale isi schimba culoarea fontului dupa ce s-a efectuat click ctre link.

• spre URL –uri : <a href="http://www.google.ro/">Cauta pe Google</a> ( foto 2.)

<p align="left"> <a href="http://www.google.ro/">Cauta pe Google</a></p>

• referinte spre fisiere de orice tip ( aflate in directorul in care este salvata
codul sursa al paginii ) (foto 3)
<a href="nomenclator.pdf">Nomenclator</a> sau <a href="produs1.jpg">Foto produs
1</a>

1. 2.

3.

Cod sursa foto 3

<html>
<head>
<title>Prima mea pagina web</title>
</head>
<hr>
 14

<body bgcolor="#CCCCCC">
<hr COLOR="#FF0000" width="75%" size="2%" align="left">
<font color="#0000ff" size="6">
<h2 align="center">SOLUTI SI PROIECTE
<a href="nomenclator.pdf"><br align="center">
<font color="00ffff" size="3">Nomenclator</font>
</a</h2>
<h3 align="left"> ERP <a href="produs1.jpg">
<font color="00ffff" size="3">&nbspFoto1</font></a>
<h3> eLearning <a href="produs2.jpg">
<font color="00ffff" size="3">&nbspFoto2</font></a>
<h3> eTraining <a href="produs3.jpg">
<font color="00ffff" size="3">&nbspFoto3</font></a>
</font>
<hr COLOR="#FF0000" width="50%" size="2%" align="left">

</body>
</html>

Nota:
 ptr un spatiu in pagina, se foloseste caracterul special &nbsp;
 propunem sa va creati propriile coduri pentru a va familiariza cu
atributele si valorile acestora din tabelul prezentat.

4. LISTE

• Listele in HTML/XHTML sunt folosite pentru o enumerare de

elemente.
Ele sunt de doua tipuri:
- liste ordonate - realizate cu tagul <ol>
- liste neordonate - realizate cu tagul <ul>
Intre tagul de inceput si de sfarsit al unei liste, se introduce cate un
element al listei, intre tagurile <li></li> (li = list item)

• Tagurile pentru lista suporta atributul type cu diferite valori ce schimba

modul de afisare a marcatorilor listei.

• Se realizeaza o pagina care sa listeze neordonat un sir de itemi.

Cod
 15

foto

• Se realizeaza o pagina care sa listeze ordonat un sir de itemi

cod

foto

• Nota:
Pentru caractere speciale in html, se pot consulta pegini web, ca de ex:
http://profs.info.uaic.ro/~val/char_spec.html
Pentru coduri de culori se pot consulta pegini web, ca de ex:
http://html.ice-t.ro/tutoriale/culori.html
 16

6. REFERINTE CATRE FISIERE DE TIP: SUNET, VIDEO

• Cateva din formatele de sunete utilizate in paginile web sunt: MIDI

(*.mid sau *.midi), WAVE (*.wav), AU (*.au).

In pagini web putem introduce:

1. link-uri catre fisiere de sunet

<a href="1.mid">fisier sunet</a>

2. sunete care care sa fie audiate direct din pagina web , se folosesc fisiere
de tip flash, care pot contine si butoane de control de tip Play, Pause, Stop.

3. sunet de fond (fundal sonor) : este acceptata doar de browserul internet

Explorer si consta in inserarea in interiorul corpului paginii a etichetei:
<bgsound> care poate avea atributele:
src - fisierul sursa de sunet care va fi audiat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si
un numar intreg care indica de cate ori va fi audiat fisierul)

• Se introduce în interiorul tag-urilor <BODY> ... </BODY> tag-ul

<EMBED src=”?” width=”x” height=”y” loop=”z” autostart=”u”

volume=”v”>,

înlocuind semnul de întrebare (?) cu calea de acces către fişierul video , x=

lungimea , y= inaltimea exprimate in pixeli , z = numarul de iteratii, u=”true”
/ “false”, v= 0..100

• autostart - stabileste daca sunetul va incepe imediat dupa incarcarea

paginii web. Poate avea valoarea true sau false
• loop - stabileste daca sunetul va fi repetat la nesfarsit. Poate avea
valoarea true sau false.
 17

• volume - poate avea orice valoare intre 0 si 100

<HTML><HEAD>

<TITLE>Fisier video</TITLE></HEAD>

<BODY><EMBED src="c:\windows\clock.avi"
width="150" height="150" loop="2">

</BODY>

</HTML>

III.Tabele
( necesitate, tag-uri specifice, proprietati { linii, coloane} )

Tabelele constituie structura care sta la baza organizarii marii majoritati a

paginilor web. Tabelul este format din linii si coloane impartind zona in celule.
Fiecare celula pastreaza informatia care va fi afisata.

• Pentru inserarea unui tabel este folosita perechea de etichete <table> si

</table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si
</td>.

• Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe
tabele.

Nume Nume atribut Valoare Detalii

tag atribut
<TABLE> Tabel
align left Alinierea tabelului
center
right
background URL Imaginea de fond pentru tabel
bgcolor cod Culoarea fondului pentru tabel
culoare
nume
culoare
border procent Chenarul tabelului
numar de
pixeli
bordercolor cod Culoarea chenarului
culoare
nume
culoare
cellpadding numar de Spatiu intre continutul celulelor
pixeli tabelului si marginile lor
cellspacing numar de Spatiu intre celulele tabelului
pixeli
cols numar Numarul de coloane ale unui tabel
hspace numar Spatiu pe orizontala in jurul
 18

de pixeli tabelului
vspace numar de Spatiu pe verticala in jurul tabelului
pixeli
width procent Latimea tabelului
numar de
pixeli
<TD> Celula de table
align left Alinierea continutului celulei pe
center orizontala
right
background URL Imaginea de fond pentru celula
bgcolor cod Culoarea fondului pentru celula
culoare
nume
culoare
colspan numar Numarul de coloane pe care se
intinde
celula
height numar de Inaltimea celulei
pixeli
rowspan numar Numarul de linii pe care se intinde
celula
valign top Alinierea continutului celulei pe
middle verticala
bottom
width numar de Latimea celulei
pixeli
<TR> Rand tabel
align left Alinierea continutului celulelor
center pe orizontala
right
bgcolor cod Culoarea fondului pentru tot randul
culoare
nume
culoare
Valign top Alinierea continutului celulelor pe
middle verticala
bottom
Indicatii si exemple
• Se ‘ construieste ‘ un tabel cu 4 randuri si 3 coloane ( <TR> este utilizata
de 4 ori,
Iar eticheta <TD> este folosita pentru fiecare rand de cate 3 ori ).
Tabelul retine pe prima coloana un sir de caractere, pe a doua si a treia
coloana cate un link ( cod 1 )
 19

foto 1

• Se ‘ construieste’ un tabel care va respecta indicatiile:

 pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie
safie insosit
de atributul BORDER avand valoarea egala cu cel putin 1. In plus, poti
schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR
insotit de codul culorii dorite. Astfel, daca vrem ca liniile tabelului nostru sa
aiba culoarea rosie vom folosi urmatoarea linie de cod:

<TABLE BORDER="1" BORDERCOLOR="#FF0000">

 pentru a stabili dimensiunea unui tabel, unui rand sau a unei

celule,
 20

folosimatributele WIDTH pentru latime si/sau HEIGHT pentru inaltime.

 pentru alinierea datelor din cadrul tabelului folosim atributul

ALIGN cu una
dintre valorile "left", "center" sau "right".

 pentru a alinia datele tabelului pe verticala folosim atributul

VALIGN insotit
de una dintre valorile "top", "middle" sau "bottom".

 pentru a schimba culoarea unei celule, unui rand sau chiar a

intregului
table folosim atributul BGCOLOR impreuna cu codul culorii alese.

Foto 2

cod 2
 21

• Cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul
unei pagini
web. Folosind tabelele, putem adauga o imagine sau un text oriunde in
pagina web..

• In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie
sa retinem
inca doua atribute foarte importante ale tag-ului <TD>: COLSPAN (numarul
de coloane pe care se intinde celula) si ROWSPAN (numarul de linii pe care
se intinde celula).

• Se ‘ construieste’ un tabel care va respecta indicatiile: are 2 linii si 4

coloane cu proprietatea ca pe prima linie coloanele ce corespund celulele
: 2, 3 si 4 sunt imbinate.

cod 3 foto 3

Obs: <td colspan = "x"> - inseamna ca

celula respectiva se va "intinde" orizontal
peste x celule din dreapta ei.

• Se ‘ construieste’ un tabel care va respecta indicatiile: are 4 linii si 2

coloane cu proprietatea ca pe prima coloana celulele corespunzatoare
liniilor: 2, 3 si 4 sunt imbinate.

cod 4 foto 4
 22

Obs:
td rowspan = "x"> inseamna ca celula respectiva se va
"intinde" vertical peste celulele de dedesubtul ei

IV.Formulare
( necesitate, notiuni generale, elementele unui formular, campuri de editare,
obiecte { butoane, casete de validare, campuri de editare, liste de selectie,
butoane radio} )

Formularele sunt folosite pentru a transmite informatie de la utilizatorul

unei pagini web catre serverul web respectiv. Practic formularele se
folosesc la inscrieri, login, forumuri, adaugare produse la shopping
cart, administrarea unui website, etc
• Dupa ce formularul a fost completat, utilizatorul apasa un
buton de trimitere, iar tu primesti datele introduse in formular sub forma
unui e-mail sau datele vor fi procesate cu ajutorul unui limbaj de programare
si adaugate intr-o baza de date.
• In aceasta lectie vom invata cum se pot adauga in cadrul unei
pagini web diferite tipuri de formulare, dar si cum putem trimite datele
introduse intr-un formular, prin email.

• Pentru a folosi un formular in pagina ta web, va trebui sa folosesti tag-

urile <FORM> si </FORM>. Intre aceste tag-uri vor fi introduse toate
elementele formularului.

• Tag-ul <FORM> are doua atribute foarte importante: ACTION si

METHOD.
• Cu ajutorul atributului ACTION ii spunem browser-ului ce se va
 23

intampla cu datele introduse in formular. Astfel, valoarea atributului

ACTION poate fi o adresa URL a unui script, scris intr-un limbaj de
programare, care va interpreta datele si le va introduce intr-o baza de date,
daca este cazul, sau poate fi o adresa de email, caz in care datele
introduse in formular vor fi trimise prin email la adresa respectiva.
• Atributul METHOD, asa cum ii spune si numele, precizeaza metoda de
trimitere a datelor si poate avea doua valori. Valoarea implicita a acestui
atribut este GET, cu ajutorul acestei metode putand fi trimise cantitati mici
de date, cea mai folosita metoda fiind POST.

• Elementele unui formular trebuie introduse, in majoritatea cazurilor, cu

ajutorul tag-ului <INPUT>. Atributele cele mai importante ale acestui tag
sunt urmatoarele:
- TYPE - tipul elementului
- NAME - numele elementului
- VALUE - valoarea elementului

• Elementele ale unui formular pot fi:

campurile de editare :
 Pentru a introduce in cadrul unui formular un camp de editare, trebuie sa
folosim pentru atributul TYPE, al tagului <INPUT>, valoarea text.
Exemplu:

 Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare
sunt:
• SIZE, care reprezinta latimea campului de editare
• MAXLENGTH, specifica numarul maxim de caractere care pot fi introduse
in campul de editare
• VALUE, valoarea initiala a campului de editare

<INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20"

MAXLENGTH="30">

• Daca vrei sa introduci un camp de editare de tip "parola", atributul

TYPE va avea valoarea "password". In acest caz, caracterele introduse in
campul de editare, nu vor fi vizibile .
• Atunci cand vrem sa adaugam in cadrul formularului nostru un camp
de editare in care sa poata fi introduse mai multe randuri, folosim
campurile de editare de tip multilinie. Pentru a folosi un astfel de camp de
editare, avem nevoie de tag-urile <TEXTAREA> si </TEXTAREA>. Sa
vedem cum arata linia de cod HTML care introduce un camp de editare
multilinie:

<TEXTAREA COLS="50" ROWS ="5" NAME="exemplu"></TEXTAREA>

Butoanele radio ( permit o singura optiune )

 Daca avem o intrebare cu mai multe variante de raspuns, vom folosi
 24

butoanele radio. Pentru a introduce un buton radio, folosim tag-ul

<INPUT>, iar la atributul TYPE, valoarea "radio". Sa consideram un
exemplu:

Nota:

• Cu ajutorul atributului CHECKED, fara alte valori, putem selecta un

buton rradio in mod prestabilit. Nu pot fi selectate mai multe butoane radio
dintr-un grup, in acelasi timp.
• casete de validare :
 pentru a introduce ocaseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu
atributul TYPE avand valoarea "checkbox". Casetele de validare permit selectarea
sau deselectarea uneia sau mai multor optiuni. Exemplu:

<html>
<head>
<title>Prima mea pagina web</title>
</head>
<font color="#ff00cc"><b>
Va rog sa introduceti in cos : </b></font><BR>
<INPUT TYPE="checkbox" NAME="optiunea1">
Multifunctional Lexmark X9575, A4 <BR>
<INPUT TYPE="checkbox" NAME="optiunea2">
Monitor LCD Samsung 2223NW, 22" <BR>
<INPUT TYPE="checkbox" NAME="optiunea3">
Sistem de navigatie Mio Moov330e<BR>
<INPUT TYPE="checkbox" NAME="optiunea4">
HDD extern Western Digital Passport Essential 160GB<BR>
</body>
</html>
Nota:
 spre deosebire de butoanele radio, casetele de validare permit selectarea mai multor optiuni.
• casetele de fisiere :
 Pentru a trimite un fisier prin intermediul unui formular, folosim pentru
atributul TYPE al tag-ului <INPUT>, valoarea "file". Exemplu:
<INPUT TYPE="file" NAME="file">
• liste de selectie :
 O lista de selectie, asa cum ii spune si numele, permite utilizatorului sa
aleaga una sau mai multe optiuni dintr-o lista. Listele de selectie pot fi
introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si
</SELECT>;
 Atributele cele mai folosite pentru tag-ul <SELECT> sunt:
• NAME, atribuie listei de selectie un nume
 25

• SIZE, specifica numarul de elemente din cadrul listei de selectie

• VALUE, atribuie o valoare de tip text care va fi expediata serverului, sub
forma de perechi "name = value"
• SELECTED (fara alte valori), selecteaza in mod prestabilit un element al listei

<SELECT>
<OPTION value=Alba>Alba</OPTION>
<OPTION value=Arad>Arad</OPTION>
<OPTION value=Arges>Arges</OPTION>
<OPTION value=Bacau>Bacau</OPTION>
<OPTION value=Bihor>Bihor</OPTION>
<OPTION value=Bistrita-Nasaud>Bistrita-Nasaud</OPTION>
<OPTION value=Botosani>Botosani</OPTION>
<OPTION value=Brasov>Brasov</OPTION>
<OPTION value=Braila>Braila</OPTION>
<OPTION value=Bucuresti selected>Bucuresti</OPTION>
<OPTION value=Buzau>Buzau</OPTION>
<OPTION value=Caras-Severin>Caras-Severin</OPTION>
<OPTION value=Calarasi>Calarasi</OPTION>
<OPTION value=Cluj>Cluj</OPTION>
<OPTION value=Constanta>Constanta</OPTION>
<OPTION value=Covasna>Covasna</OPTION>
<OPTION value=Dambovita>Dambovita</OPTION>
</SELECT>

• Pentru a selecta in mod implicit valoarea Dolj, am folosit in

dreptul acesteia atributul selected
• Pentru a putea selecta mai multe valori din cadrul unei liste de
selectie trebuie sa folosim pentru tag-ul <SELECT> atributul MULTIPLE,
fara alte valori.

• butoane de tip “Submit” si “ Reset” :

 pentru a introduce un asemenea buton folosim tag-ul <INPUT>, cu atributul
TYPE avand valoarea "submit". Putem modifica si valoarea butonului, care in
mod implicit este Submit, cu ajutorul atributului VALUE. Astfel, linia de cod
pentru un buton de tip submit va fi urmatoarea:

<INPUT TYPE="submit" VALUE="Trimite">

 Alaturi de butonul de tip Submit, putem folosi si un buton de tip Reset.

Prin apasarea acestui buton toate elementele formularului vor reveni la
valoarea lor prestabilita, indiferent de valorile introduse de utilizator. Pentru a
introduce un buton de tip Reset, se procedeaza la fel ca si la butonul
de tip Submit, singura deosebire fiind ca atributul TYPE va avea valoarea
"reset". Sa vedem cum arata linia de cod care introduce in cadrul unui
formular un buton de tip Reset:
<INPUT TYPE="reset" VALUE="Sterge">
• trimiterea datelor din formular prin e-mail :
 Pentru ca datele introduse intr-un formular sa fie trimise prin e-mail
trebuie sa folosim pentru atributul ACTION al tag-ului <FORM>, valoarea
"mailto:email@domeniu.ro". in felul acesta, datele introduse in formular vor
fi trimise la adresa de e-mail specificata.

De exemplu, pentru a trimite datele dintr-un formular la adresa

aaa@manuale.ro vom folosi urmatoarea linie de cod:
<FORM ACTION=mailto:aaa@manuale.ro METHOD="POST">
• Sa gandim un prim formular care sa primeasca cateva date ale unui
 26

utilizator si apoi acestea sa se trimita catre un fisier forma.php ( script php aflat
pe server ) care va interpreta datele din formular.
• Forma generala a unui formular este:
<form action="fisier_de_prelucrare_date.php"
method="metoda_trimitere">
campuri de culegere date (input, checkbox, radio, textarea, etc)
</form>
unde:
 fisier_de_prelucrare_date.php: este fisierul propriu zis, care preia
datele trimise prin GET sau POST, le prelucreaza si le trimite mai departe
(pe mail) adica un server web care "stie" php
 metoda_trimitere: poate fii GET sau POST (nu intru in detaliu pentru
ce se foloseste fiecare? de obicei pentru trimitere se foloseste metoda
POST).

Indicatii si exemple

• Ne propunem acum sa realizam un formular cu cateva campuri

fundamentale

(Cod 1) (Foto1)
<html>
<head>
<title></title>
</head>
<body>
<form method="get" action="forma.php">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td align="right">Prenume: </td>
<td><input type="text" name="prenume" value=""
/></td>
</tr>
<tr>
<td align="right">Nume: </td>
<td><input type="text" name="nume"
value="" /></td>
</tr>
<tr>
<td align="right">Varsta:
</td><td><input type="text" name="varsta"
size="2" value="" /></td>
</tr>
<tr>
<td align="right" valign="middle">Hobby-uri: </td>
<td> Citit
<input type="checkbox" name="hobby"
value="citit" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Sport
<input type="checkbox" name="hobby"
value="sport" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Filme
<input type="checkbox" name="hobby"
value="filme" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td align="right">Tara in care v-ati nascut:</td>
<td>
<select name="tara">
<option value="ro">Romania</option>
 27

<option value="fr">Franta</option>
<option value="de">Germania</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><br /><br />
<input type=”submit” name=”btnSubmit”
value=”Trimite Formular”></td>
</tr>
</table>
</form>
</body>
</html>
• Ne propunem acum sa realizam un formular complex, care sa
evidentieze tipurile de obiecte ce se pot introduce intr-un formular pe care il
vom salva cu numele script.html

(cod 2)

<form action="c:\script.php" method="post"> script.html– fisier in care se

gaseste codul html
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
Telefon:<input type="text" name="telefon"><br>
Fax:<input type="text" name="fax"><br> <form …..>
Email:<input type="text" name="email"><br>
Sexul: Masculin<input type="radio" name="sex" cod html
value="m">
</form>

Feminin<input type="radio" name="sex" value=”f”>

Studii: <select>
<option value="scoala">Scoala profesionala
<option value="liceu">Liceu
<option value="facultate">Facultate script.php – fisier in care se
</select>
Accesati Internetul de la: gaseste un codul php
Serviciu<input type="checkbox" name="serv">
Acasa<input type="checkbox" name="acasa">
Internet cafe<input type="checkbox" name="cafe">
<?php
Fisier: <input type="file" name="file">
cod prin care se valideaza datele
Observatii:<text areaname="obs"rows="5"cols="30"> din formular si se trimit mai
</textarea> departe eventual intr-o baza de
date de ex. php
<input type="submit" value="Trimite">
<input type="reset" value="Sterge"> ?>

</form>

( foto 2 )
 28

• Se doreste ca datele din formular sa fie trimise la o adresa de

mail.
In acest caz, atributul action ia valoarea adresei de mail.

( cod 3 ) ( foto 3 )

<form method="post"
action="mailto:youremail@email.com"> Nume: <input
type="text" size="10" maxlength="40"
name="name"> <br />

Parola: <input type="password" size="10" maxlength="10"

name="password"><br />

<input type="submit" value="Trimite">

</form>

- se executa click pe butonul ‘Trimite’, iar

valorile din campurile formularului vor fi
trimise adresei de mail respective sub forma
unui fisier care se deschide cu un editor de
tip text, de ex. Notepad.

V.Notiuni de grafica Web

( tag-uri specifice , unelte pentru Web-design, alegerea tipului de imagine )

• Realizarea unui website in mod profesional presupune in general o

 29

echipa de cel putin doi oameni care au doua profesii distincte. O persoana se
ocupa de "cum arata" website-ul respectiv, acea persoana realizeaza deci
designul website-ului (de obicei in Adobe Photoshop), si are profesia de
"designer". Designerul se poate ocupa si de animatii (Macromedia Flash),
banere, sau alte elemente vizuale legate de website. Cealalta persoana este
programatorul web, este cel care transpune grafica in HTML si CSS.
Programatorul web este responsabil si cu realizarea scripturilor in
JavaScript. Apoi, pentru website-urile complexe, dinamice, programatorul web
este cel care se ocupa de programarea in limbajele de scripting server-side, si
de baze de date (ex: PHP si MySQL). De multe ori insa, daca designerul este
specializat doar in design web, e foarte probabil sa stie foarte bine si sa
lucreze eficient in HTML si CSS, iar programatorul web sa se ocupe de
JavaScript, si programarea server-side.
• Principalul program preferat pentru grafica web este Adobe Photoshop.
• JPG, GIF, PNG cele 3 formate standard pentru imaginile folosite
in web.
JPG
JPG sau JPEG este un format realizat special pentru imagini complexe de tip
fotografii sau alte imagini care au multe culori.
GIF
GIF se preteaza la imagini simple, cu putine culori. GIF este un format care
suporta si animatie, de aceea, multe din bannerele animate existente pe web
au format GIF. Animatiile mai lungi, mai complexe au inceput sa se realizeze
in Flash.
PNG
PNG este cel mai recent format suportat in Web. Formatul PNG a fost realizat
pentru a rezolva limitarile formatului GIF .

TAG <img src=”fisier_imagine.extensie”/> , unde atributul ‘scr’ se

refera la calea catre imagine

• Atribute si valori ale atributelor

src - Valoarea acestui atribut determina locatia fisierului care contine

imaginea.
alt - La acest atribut se scrie textul care va aparea daca imaginea nu e
afisata (de unele browsere) sau cand utilizatorul va pozitiona, in browser,
mouse-ul peste imagine.
align - Acest atribut permite asezarea imagini in locuri diferite pe pagina.
Pot fi folosite urmatoarele optiuni:

• Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle ,

Baseline , ABSBottom

width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli.

Daca nu este scris imaginea va fi prezentata cu lungimea originala.

height - Valoarea acestui atribut reprezinta inaltimea (latimea)

imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea
 30

originala.

border - Prin adaugarea acestui atribut imaginea va aparea înconjurata de

un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in
pixeli.

hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale
imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu
invizibil, de 5 pixel, in pârtile orizontale ale imaginii.

vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale
imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu
invizibil, de 5 pixel, in pârtile verticale ale imaginii.

Indicatii si exemple

• Se construieste o pagina care introduce in pagina o imagine a carei

dimensiuni este limitata de valorile atributelor.

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<img src="C:\modern_house.jpg" align="top"
width="100" height="120" border="4"
hspace="10" vspace="7"></img>
</body>
</html>

• Se construieste o pagina in care butonul de tip “Trimite” are

inserata o imagine.
 31

<form method="get" action="fisier.php">

ToEmail:
<input name="email" type="text"><br>

FromEmail:
<input name="from type="text"><br>

Subject:
<input name="subject"type="text"><br>
Message:
<textarea name="message" rows="10"
cols="30"></textarea>

<input
type="image"src="imagine.jpg"
lign="top"width="100"weight="30"
border="4"hspace="10"hspace="7"
value="submit" />

</form>

• Se construieste o pagina in care in celula unui tabel, se insereaza o

imagine limitata de valorile atributelor.

<html>
<head>
<title>Prima mea pagina web</title>
<body>
<TABLE BORDER=5 CELLSPACING=6
CELLPADDING=10

BGCOLOR="#ADEADA" ALIGN=center>
<CAPTION ALIGN=top>Tabelul
II</CAPTION>
<TR BGCOLOR="#00AA00"
ALIGN=right>
<TH>Coloana1</TH>
<TH>Coloana 2</TH>
</TR>
<TR><TD>Celula 1.1</TD>
<TD><img src="im1.jpg"
align="top" width="100" height="120"
border="4"
hspace="10"vspace="7"/></TD>
</TR>
<TR>
<TD>Celula 2.1</TD>
<TD>Celula 2.2</TD>
</TR>
</TABLE>
 32

</body>
</head>

6.Cadre
( necesitate, integrarea cadrelor intr-o pagina Web )

• Cu ajutorul cadrelor (frame-uri ) putem afisa mai multe pagini web in

acelasi timp in browser. Un cadru ( frame ) este de fapt o fereastra
independenta in browser.

• Cu ajutorul cadrelor putem imparti o pagina web in mai multe zone,

iar apoi putem stabili ce pagina va fi afisata in fiecare zona.
• Tagul <frameset></frameset> defineste cadrul de frame-uri (cate
randuri si coloane are, si cum se impart), iar tagul <frame></frame>
defineste o fereastra.

(c) CREAREA UNUI CADRU

• Atributele tag-ul <FRAMESET>

FRAMESPACING - pentru marimea spatiilor dintre cadre , este un

numar in pixeli.

FRAMEBORDER - care se refera la cadrele definite, daca au sau nu

chenar, valorile sale fiind "yes" sau "no" sau “0” , “1”

BORDER - pune in evidenta prin valorile “0” sau “1” , marginile

cadrelor

BORDERCOLOR - permite alegerea culorii pentru contur

 33

De ex:

<FRAMESET ROWS="70%,*" FRAMEBORDER="no"

FRAMESPACING="0">

• Pentru a imparti pagina web in mai multe cadre orizontale, se vor asocia
mai multe procente atributului ROWS, dar avand grija ca suma lor sa nu
depaseasca 100%. La fel se procedeaza si pentru impartirea unei pagini
web in cadre verticale singura deoasebire fiind aceea ca in locul
atributului ROWS se foloseste atributul COLS. Nu uita de tag-ul de
incheiere </FRAMESET>

2.

• Dupa ce am stabilit impartirea paginii in cadre, se trece la definirea

cadrelor. Astfel intre tag-urile <FRAMESET> si </FRAMESET>
vom folosi tag-ul <FRAME>.
• Principalul atribut al tag-ului <FRAME> este SRC cu ajutorul caruia
indicam sursa cadrului. Iata o linie de cod care prezinta ce fisier se va
incarca in cadru .

<FRAME SRC="numelepaginii.html">

• Atribute ale tag-ului <FRAME>

frameborder - poate avea valoarea 0 sau 1, daca dorim ca frame-urile sa

aibe bordura vizibila sau nu.

marginheight - valoarea specificata este in pixeli. Reprezinta marginile

de sus si de jos ale frame-ului

marginwidth - valoarea specificata este in pixeli. Reprezinta marginile

din stanga si dreapta ale frame-ului

noresize = "noresize" - prezenta acestui atribut specifica faptul ca frame-ul

nu poate fi re-dimensionat

scrolling - poate avea valorile yes, no, auto si se refera la prezenta scroll-
ului

src - defineste calea catre pagina web ce va fi afisata in acest frame.

Poate fi un URL (http://www.yahoo.com) sau calea relativa a unui fisier pe
harddisk (content.html)

name - denumeste frame-ul. Este folosit pentru a realiza un link din alt frame
catre o pagina care sa se incarce in acest frame, sau mai este folosit in
scripturi. In linkul din primul frame se foloseste atributul target pentru a
 34

specifica frame-ul in care sa se incarce pagina.

Ex: <a href="Doc3.htm" target="numele cadrului "> Numele link-ului </a>

Indicatii si exemple

• Sa se realizeze o pagina web care sa contina doua cadre verticale si care

sa respecte urmatoarele conditii:
- in cadrul din stanga sa se incarce pagina cu URL=http://www.google.ro
- in cadrul din dreapta sa se vizualizeze o alta pagina al carei cod
este dat de fiserul “C:\test5.html"

<html>

<frameset cols = "75%, *" >

<frame name="stanga" frameborder="1"
noresize="noresize"
src="http://www.google.ro" />
<frame name="dreapta"
frameborder="1"
src ="c:\test5.html" scrolling="auto" />

</frameset>

</html>

• Sa se realizeze o pagina web care sa contina trei cadre orizontale , iar intr-
unul din cadre, sa se incarce o imagine .Toate cadrele vor avea scroll
( care va permite vizualizarea intregii imagini incarcate in cadru , chiar
daca dimensiunea initiala a cadrului nu permite ).

<html>

<frameset rows = "20%,

30%,*">
<frame src ="test2.html" />
<frame src ="test3.html" />
<frame src ="flori2.jpg" />
</frameset>
</html>

</html>

VII.Notiuni generale de CSS

( definitie, necesitate, sintaxa, integrare in HTML. selectori CSS, formatare
text, font, fundal )

CSS este un acronim provenind din Cascading Style Sheets, care

înseamnã "foi de stil în cascadă".
 35

• Stilurile CSS sunt salvate în mod normal în fişiere diferite de cele cu

extensia html. Foile de stil externe vă permit să schimbaţi apariţia şi
aranjarea tuturor paginilor în site-ul dvs. web, doar prin editarea
unui singur document CSS.
• Dacă aţi încercat vreodată să schimbaţi fontul sau culoarea tuturor
anteturilor din paginile web pe care le-aţi creat, veţi întelege cum CSS vă
poate scuti de multă muncă inutilă.
• Proiectanţii CSS-ului au urmărit îndeosebi separarea între conţinutul
paginii (textul destinat vizitatorului şi imaginile din pagină) şi codul-sursă.
• Folosind CSS, se ajunge la un control mai fin asupra paginii web, la
scăderea dimensiunii în octeti a paginii web, atunci când codul CSS e
conţinut într-un fişier extern.
• Modificând fişierul CSS extern, modificăm simultan toate paginile
web în care acesta e inclus.
• Se pot crea efecte mai sofisticate decât cele produse de codul HTML:
suprapunerea unei imagini peste altă imagine, a unui text peste alt text,
impresia de relief, efectul hover, afişarea unor fonturi mai mari decât h1
etc.

• CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in

parte, prin stabilirea unui anume stil scris intr-un cod folosind orice
editor text.
• Adaugarea de cod CSS este utila mai ales pentru a anula alte stiluri ale
elementului respectiv sau de a aduce noi elemente de stil etichetei
respective.

• Sintaxa CSS este formata din reguli, numite reguli CSS. O regula CSS este
formata din 2 parti:
1. Un selector , care defineste elementele HTML pe care se aplica regula
2. Una sau mai multe declaratii care definesc cum arata elementul
respectiv

Exemplul1 – selector de tip HTML ( care formateaza tag-urile <h1> si

<p> ). Codul este sensibil doar la tag-urile indicate.

<style type=”text/css”>

h1 { font-family:’Arial’; font-size:15px; font-weight:bold; color:#1111ff; }

p {font-family:’Arial’; font-size:12px; color:blue; }

</style>

In exemplul1 , h1 si p sunt selectori , iar ce este cuprins intre accolade,

reprezinta declaratii.

Exemplul2 - selector de tip clasa , care poate formata orice element care
este etichetat cu clasa respectiva .
 36

.title {

font-size: 11px;

color: #ff5f00;

font-weight: bold;

In exemplul2, numele clasei este .title , , iar ce este cuprins intre accolade,
reprezinta declaratii.

• Sa se realizeze o pagina web care sa foloseasca pentru formatare , coduri

CSS.

<head>
<title></title>

<style type="text/css"> Se definesc selectorii:

.title { - de tip clasa

font-size: 11px;
color: #ff5f00;
font-weight: bold;
}

h1 { font-family:’Arial’; font-size:15px; font-

- de tip HTML
weight:bold; color:#1111ff; }

p {font-family:’Arial’; font-size:12px; color:blue; } - de tip HTML

</style>
</head>
<body >
<p > Selector CSS tip HTML</p>
Fara cod CSS

<ul class="title"> Selector CSS de tip clasa

<li> font
<li> color
<li> size
</ul>

<table class="title">
<tr>
<td>c11</td>
<td>c12</td>
<td>c13</td>
</tr>
<tr>
<td>c21</td>
 37

<td>c22</td>
<td>c23</td>
</tr>
</table>
<h1> Selector CSS tip HTML
</body>

</html>

Nota: Acest curs nu prezinta decat cateva din elementele de baza ale
codului CSS si necesitatea "foilor de stil". Cursul doreste prin aceste
noutati sa va orienteze spre un studiu complementar care sa va
invate cum sa adaugati si sa folositi CSS in paginile dv. web.

VIII. Script-uri Web – notiuni generale

( Java, PHP, C#.Net )

Limbajul HTML ofera autorilor de pagini Web o anumita flexibilitate,

dar statica. Documentele HTML nu pot interactiona cu utilizatorul în alt mod
mai dinamic, decât pune la dispozitia acestuia legaturi la alte resurse (URL-
uri).

Scripturile Web sunt deseori folosite in codul unei pagini in HTML pentru a
da mai multa animatie, sau pur si simplu pentru una dintre multele aplicatii
care sunt facilitate de aceste scripturi.

Cu ajutorul acestora se pot creea pagini dinamice animatii ale

fotografiilor, un meniu animat cu efecte surprinzatoare si multe altele.

Deasemenea una dintre aplicatiile cele mai importante este aceea de a

valida un formular innainte de a fi trimis. Acesta va scuti userul de mult
timp pierdut in cazul in care a introdus gresit datele fiindi nevoie de
reincarcarea paginii si recompletarea campurilor.

Folosirea scripturilor în propriul site Web ne permite să adăugăm multe

elemente de noutate şi interactivitate, precum formularele de
feedback, cărţile de oaspeţi, sistemele colaborative numite message
boards, contoare ale vizitelor şi multe alte elemente mai avansate
precum sistemele portal, cele de management al conţinutului,
gestionarii de reclame (advertising managers), etc. Astfel de elemente
sunt necesare pentru a obţine o imagine de profesionist.

Crearea de CGI-uri (Common Graphics Interface) – [programe care ruleaza pe

serverul Web si care accepta informatii primite din pagina de web si
returneaza cod HTML] – a dus la imbogatirea posibilitatilor de lucru.

Limbajele de comenzi, pentru realizarea de script-uri, devin tot mai

importante. Vom evidentia cateva aspecte ale catorva limbaje de
programare pentru editarea codurilor de script.

1.
 38

Un pas important spre interactivizare a fost realizat de JavaScript, care

permite inserarea în paginile web a script-urilor care se executa în cadrul
paginii web, mai exact în cadrul browser-ului utilizatorului, usurand astfel si
traficul dintre server si client. De exemplu, într-o pagina pentru colectarea de
date de la utilizator se pot adauga scripturi JavaScript pentru a valida
corectitudinea introducerii si apoi pentru a trimite serverului doar date
corecte spre procesare.
JavaScript contine o lista destul de ampla de functii si comenzi menite
sa ajute la operatii matematice, manipulari de siruri, sunete,
imagini, obiecte si ferestre ale browser-ului, link-urile URL si
verificari de introduceri ale datelor în formulare.

Codul necesar acestor actiuni poate fi inserat în pagina web si executat pe

calculatorul vizitatorului.

Inserarea Javascript in HTML

Introducerea unui cod javascript se face foarte simplu cu ajutorul tagului

script. Iata si un exemplu:

<script type="text/javascript">

<!--script

***Aici va fi introdus scriptul javascript***

-->

</script>

Pentru codurile javascript se va da atributului type valoarea

'text/javascript'.

2.
De ce să folosiţi script-uri PHP?

PHP vine de la "Hypertext Preprocessor" şi este un limbaj de comenzi-

script pentru server (se spune că acţionează pe partea serverului - server-
side language).
Adică fişierele cu comenzi PHP rulează pe serverul Web, nu în navigator, pe
staţia client. Cu alte cuvinte, nu trebuie să ne batem capul cu
compatibilitatea soft a calculatorului personal de pe care navigăm.
PHP este un limbaj relativ nou (comparativ cu alte limbaje precum Perl
(CGI) şi Java), dar devine rapid unul dintre cele mai răspândite şi mai
populare din Internet.
 39

Scripturile PHP sunt întotdeauna incluse între două taguri PHP, conform
aceleaşi scheme ca şi în HTML. Astea spun serverului să preia information
dintre ele şi să o interpreteze ca expresie din PHP. Există trei forme diferite
de marcare a expresiilor - comenzilor PHP, şi anume:

<?
comenzi PHP
?>

<?php
comenzi PHP
php?>

<script language="php">
comenzi PHP
</script>

Codul se salveaza cu extensia . php si se incarca fisierul pe server in spatiul

in care sunt salvate documentele Web.

Inserarea PHP in HTML – acest aspect a fost studiat in capitolul

FORMULARE

<form action="prelucrare.php" method="post">

Elementele Formularului şi comenzile de formatare, etc.
</form>

3.
De ce să folosiţi script-uri C #?

C# este un limbaj de programare orientat-obiect conceput de Microsoft la

sfârşitul anilor 90. A fost conceput ca un concurent pentru limbajul Java. Ca şi
acesta, C# este un derivat al limbajului de programare C++.

In C# se pot dezvolta aplicatii pentru consola (Console application),

aplicatii pentru Windows (Windows application), aplicatii pentru Web.

Unul din cele mai importante obiective ale Microsoft pentru C# : este
suport pentru RAD (Rapid Application Development).
Aplicatiil einternet trebuie sa fie dezvoltate in timp internet; un nou limbaj
trebuie sa fie usor de invatat si depanat, si trebuie produce cod care se poate
modifica usor. In timp ce VB si Delphi exceleaza in aceste domenii, C++ nu a
fost tocmai un succes. Limbajul in sine este complex si greu de manuit, si
putine biblioteci C++ ofera interfete simple. In plus, managementul manual
al memoriei si modelul de type-casting complex fac depanarea la C++ foarte
dificila. In plus, cum se va arata in continuare C++ nu protejeaza inerent
impotriva potentialelor probleme cauzate de incompatibilitati ale
versiunilor.Cu tot efortul depus de Microsoft si Borland, C++ nu este potrivit
 40

pentru dezvoltare rapida a aplicatiilor.

Nota: Acest curs nu prezinta decat cateva din elementele de baza ale
codului CSS si necesitatea "foilor de stil". Cursul doreste prin aceste
noutati sa va orienteze spre un studiu complementar care sa va
invate cum sa adaugati si sa folositi CSS in paginile dv. web.

IX. Aplicatie - realizarea unui site

( grup tinta, realizare haeder, meniu, imagini, fonturi )

Motivele pentru care dumneavoastra ar trebuii sa aveti un site pe internet

sunt multe insa principalul motiv este ca acesta ar putea creste numarul de
clienti si prestigiul firmei dumneavoastre sau al dumneavostra ca persoana .
Din ce in ce mai multe firme bine cunoscute sau chiar toate au site-uri de
prezentare, magazine online etc... De ce? Ati fi surprins de cat de multi clienti
sau parteneri de afaceri castiga prin intermediul site-ului. Aceasta regula e
una generala si ar trebuii sa actionati.
Site-ul dumneavoastra trebuie privit ca o investitie care de cele mai multe ori
isi merita banii aducand profituri inzecite.

Nu ezitati si intrati in zilele noastre bucurandu-va de castigurile si beneficiile

unui site.

De ce trebuie sa tineti cont in realizarea unui site , de exemplu,

pentru o companie?

Va propunem cativa itemi:

• Pregatirea mediului de lucru

• Realizarea header-ului
• Meniul
• Portiunea din mijloc si footerul
• Coloanele
• Mesaj de intampinare pentru utilizator
• Stiri
• Servicii
• Despre noi
 41

• Parteneri
• Contact
• Cariera

VA DORIM MULT SPOR !