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

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
 3

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 şi rulează continuu.
Majoritatea serviciilor oferite pe Internet rulează pe servere: Web.
 5

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

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

 7

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 rand traseaza o linie orizontala
<br> <hr>

Nume tag Nume atribut Valoare Detalii

atribut
<a> Ancora
 
href Adresa catre care vrem sa fie legatura
URL (adresa URL, fisier local, imagine
target Fereastra in care se va face afisarea
  _blank
_self
_parent
_top
e foloseste pentru documente lungi, care
name au scroll vertical, pentru a naviga prin
link in cadrul aceluiasi document.
text descriptiv pentru link. Textul va
title aparea ca un tooltip (cand mergem cu
mouse-ul peste link)
<b> Text bold
 
<body> Cuprinsul documentului
 
background
  adresa Imaginea de fond
imaginii
 9

bgcolor
cod
culoare Culoarea fondului
nume
culoare
leftmargin Distanta dintre marginea din stanga a
procent ferestrei browserului si marginea din
din stanga a paginii
latimea
paginii
numar de
pixeli
topmargin Distanta dintre marginea de sus a
  procent ferestrei browserului si marginea de sus
din a paginii
inaltimea
paginii
numar de
pixeli
text
  cod
culoare Culoarea textului
nume
culoare
alink Culoarea legaturilor active (atunci cand
cod mouse-ul se afla deasupra lor)
culoare
nume
culoare
link Culoarea legaturilor nevizitate (nu s-a
  cod efectuat nici un click pe ele)
culoare
nume
culoare
vlink Culoarea legaturilor vizitate
  cod (s-a efectuat cel putin un click pe ele)
culoare
nume
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 paginii
<h3>,<h4>,
<h5>,<h6>,
align left
center
right
justify
<hr> Linie orizontala
 10

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 (stanga)
right sau right (dreapta)
top Alinierea elementelor din jurul imaginii:
middle top (sus), middle (mijloc), bottom (jos)
bottom
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 imaginii
pixeli
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>
</html>

EDITARE

DESCHIDERE PAGINA
SALVARE
 12

VIZUALIZARE PAGINA

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

 13

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 .

 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.
 14

3.

Cod sursa foto 3

<html>
<head>
<title>Prima mea pagina web</title>
</head>
<hr>
<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.

 15

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

foto

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

cod
 16

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

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
 17

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.
 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} )
 18

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 tag Nume atribut Valoare Detalii

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

width Latimea tabelului

procent
numar de
pixeli
<TD> Celula de table
 
align Alinierea continutului celulei pe
left orizontala
center
right
background Imaginea de fond pentru celula
URL
bgcolor Culoarea fondului pentru celula
  cod
culoare
nume
culoare
colspan Numarul de coloane pe care se intinde
  numar celula
height Inaltimea celulei
numar de
pixeli
rowspan Numarul de linii pe care se intinde celula
numar
valign Alinierea continutului celulei pe verticala
top
middle
bottom
width Latimea celulei
numar de
pixeli
<TR> Rand tabel
 
align Alinierea continutului celulelor
left pe orizontala
center
right
bgcolor Culoarea fondului pentru tot randul
  cod
culoare
nume
culoare
Valign Alinierea continutului celulelor pe
top verticala
middle
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 )
 20

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,
folosimatributele WIDTH pentru latime si/sau HEIGHT pentru inaltime.
 21

 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

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
 22

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

Obs:
td rowspan = "x"> inseamna ca celula respectiva se va "intinde"
 23

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 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 :

(a) Pentru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru atributul TYPE, al
tagului <INPUT>, valoarea text.
 24

Exemplu:

Camp de editare

(b) 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 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>
 25

<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 :
(a) 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 :
(b) 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>;

(c) Atributele cele mai folosite pentru tag-ul <SELECT> sunt:

• NAME, atribuie listei de selectie un nume
• 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.
 26

butoane de tip “Submit” si “ Reset” :

(a) 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">

(b) 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 :
(c) 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 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>
 27

<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>
<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>
<form …..>
Fax:<input type="text" name="fax"><br>
Email:<input type="text" name="email"><br>
cod html
Sexul: Masculin<input type="radio" name="sex" 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
</select> script.php – fisier in care se
Accesati Internetul de la: gaseste un codul php
Serviciu<input type="checkbox" name="serv">
Acasa<input type="checkbox" name="acasa">
 28

Internet cafe<input type="checkbox" name="cafe">

<?php
Fisier: <input type="file" name="file">
cod prin care se valideaza datele din
Observatii:<text areaname="obs"rows="5"cols="30">
formular si se trimit mai departe
</textarea>
eventual intr-o baza de date de ex. php
<input type="submit" value="Trimite">
?>
<input type="reset" value="Sterge">

</form>

( foto 2 )

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.
 29

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 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

 30

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 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>
 31

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

imagine.

<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>
 32

</TR>
<TR>
<TD>Celula 2.1</TD>
<TD>Celula 2.2</TD>
</TR>
</TABLE>
</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.

(a) CREAREA UNUI CADRU

1.

Pentru a imparti o pagina web in mai multe cadre, trebuie sa folosim, inainte de tag-
ul <BODY>, tag-ul <FRAMESET> insotit de unul dintre atributele <COLS> sau 
<ROWS>, pentru a defini exact cum va fi impartita pagina respectiva. Daca dorim sa
impartim pagina in doua cadre orizontale vom folosi urmatoarea linie de cod:

<FRAMESET ROWS=”70%,*”>

Se folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor
forma cadrele.

Pentru exemplul dat, primul cadrul va avea 70% din inaltimea paginii, iar al doilea
cadru restul, adica"*" sau 30%.

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
 33

BORDERCOLOR - permite alegerea culorii pentru contur

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 specifica frame-ul in care sa se
 34

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ă".

Stilurile CSS sunt salvate în mod normal în fişiere diferite de cele cu extensia html.
 35

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 .

.title {

font-size: 11px;
 36

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>
Se definesc selectorii:
<style type="text/css">

.title { - de tip clasa

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

h1 { font-family:’Arial’; font-size:15px; font-weight:bold; - de tip HTML

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>
<td>c22</td>
<td>c23</td>
</tr>
</table>
 37

<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.

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
 38

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.

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:

<?
 39

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 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.
 40

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
Parteneri
Contact
Cariera

VA DORIM MULT SPOR !