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 )

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

2

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.

3

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

4

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

//------------------------------------------------

5

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.

6

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)

<htmlL> cu acest tag incepe orice document HTML. Prin folosirea acestui tag ii

7

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.

<br> trece pe urmatorul rand <hr>

traseaza o linie orizontala

Nume tag

Nume atribut Valoare atribut

Detalii

<a> 

Ancora

hrefURL

Adresa catre care vrem sa fie legatura (adresa URL, fisier local, imagine

 target

_blank_self_parent_top

Fereastra in care se va face afisarea

namee foloseste pentru documente lungi, care au scroll vertical, pentru a naviga prin link in cadrul aceluiasi document.

titletext descriptiv pentru link. Textul va aparea ca un tooltip (cand mergem cu mouse-ul peste link)

<b> 

Text bold

<body> 

Cuprinsul documentului

 background

adresa imaginii

Imaginea de fond

8

bgcolorcod culoarenume culoare

Culoarea fondului

leftmarginprocent din latimea paginiinumar de pixeli

Distanta dintre marginea din stanga aferestrei browserului si marginea din stanga a paginii

 topmargin

procent dininaltimea paginiinumar de pixeli

Distanta dintre marginea de sus aferestrei browserului si marginea de susa paginii

 text

cod culoarenume culoare

Culoarea textului

alinkcod culoarenume culoare

Culoarea legaturilor active (atunci cand mouse-ul se afla deasupra lor)

 link

cod culoarenume culoare

Culoarea legaturilor nevizitate (nu s-a efectuat nici un click pe ele)

 vlink

cod culoarenume culoare

Culoarea legaturilor vizitate(s-a efectuat cel putin un click pe ele)

<br> sfarsit de rand<center> Afisarea in centrul paginii<font> Fontul textului

color cod culoarenume culoare

Culoarea fontului

face nume font Tipul fontuluisize un numar

de la 1 la 7Marimea fontului

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,

Dimensiuni de titluri in cadrul paginii

align leftcenterrightjustify

<hr> Linie orizontalaalign eft

centerAlinierea orizontala a liniei

9

rightcolor cod culoare

nume culoare

Culoarea liniei

size numar de pixeli

Inaltimea liniei

width rocent din latimea paginiinumar de pixeli

Latimea liniei

<i> Text italic<img> Adaugarea unei imagini

align eftrighttopmiddlebottom

Alinierea imaginii in pagina: left (stanga)sau right (dreapta)Alinierea elementelor din jurul 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 pixeli

Marimea chenarului din jurul imaginii

height procentnumar de pixeli

Inaltimea imaginii

hspace numar de pixeli

Spatiu pe orizontala in jurul imaginii

src URL Adresa imaginiivspace numar de

pixeliSpatiu pe verticala in jurul imaginii

<li> Element lista<ol> Lista ordonata

width procentnumar de pixeli

Latimea imaginii

<p>

alignleftcenterrightjustify

Paragraf

Alinierea paragrafului

<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

10

Indicatii si exemple

1. FORMATARE FUNDAL SI FONT

EDITARE

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

SALVAREDESCHIDERE PAGINA

11

VIZUALIZARE PAGINA

VIZUALIZARE COD SURSAmodificarea 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

12

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.

13

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.

14

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

15

foto

Nota: Pentru caractere speciale in html, se pot consulta pegini web, ca de ex: http://profs.info.uaic.ro/~val/char_spec.htmlPentru 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 avea atributele:

16

src - fisierul sursa de sunet care va fi audiatloop - 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} )

17

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 atribut

Detalii

<TABLE>

   Tabel

 

align left center right

Alinierea tabelului

backgroundURL

Imaginea de fond pentru tabel

bgcolorcod culoarenume culoare

Culoarea fondului pentru tabel

 

borderprocentnumar de pixeli

Chenarul tabelului

 

bordercolorcod culoarenume culoare

Culoarea chenarului

cellpaddingnumar de pixeli

Spatiu intre continutul celulelor tabelului si marginile lor

cellspacingnumar de pixeli

Spatiu intre celulele tabelului

colsnumar

Numarul de coloane ale unui tabel

hspace numar de pixeli

Spatiu pe orizontala in jurul tabelului

vspacenumar de pixeli

Spatiu pe verticala in jurul tabelului

widthprocentnumar de pixeli

Latimea tabelului

18

<TD>

 Celula de table

alignleftcenterright

Alinierea continutului celulei pe orizontala

backgroundURL

Imaginea de fond pentru celula

 

bgcolorcod culoarenume culoare

Culoarea fondului pentru celula

 

colspannumar

Numarul de coloane pe care se intinde celula

heightnumar de pixeli

Inaltimea celulei

rowspannumar

Numarul de linii pe care se intinde celula

valigntopmiddle bottom

Alinierea continutului celulei pe verticala

widthnumar de pixeli

Latimea celulei

<TR>

 Rand tabel

alignleftcenterright

Alinierea continutului celulelorpe orizontala

 

bgcolorcod culoarenume culoare

Culoarea fondului pentru tot randul

Valigntopmiddle bottom

Alinierea continutului celulelor pe verticala

Indicatii si exempleSe ‘ 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 insositde 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

Obs: <td colspan = "x"> - inseamna ca celula respectiva se va "intinde" orizontal peste x celule din dreapta ei.

foto 3

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.

23

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 :

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>

24

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

25

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

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

26

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

(Foto1)

27

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

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>Email:<input type="text" name="email"><br>Sexul: Masculin<input type="radio" name="sex" value="m">

Feminin<input type="radio" name="sex" value=”f”>Studii: <select> <option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate </select>Accesati Internetul de la:Serviciu<input type="checkbox" name="serv">Acasa<input type="checkbox" name="acasa">Internet cafe<input type="checkbox" name="cafe">

Fisier: <input type="file" name="file">

Observatii:<text areaname="obs"rows="5"cols="30"> </textarea>

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

</form>

( foto 2 )

script.html– fisier in care se gaseste codul html

<form …..>

cod html

</form>

script.php – fisier in care se gaseste un codul php

<?php

cod prin care se valideaza datele din formular si se trimit mai departe eventual intr-o baza de date de ex. php

?>

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 )

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

( foto 3 )

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

29

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.JPGJPG sau JPEG este un format realizat special pentru imagini complexe de tip fotografii sau alte imagini care au multe culori. GIFGIF 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. PNGPNG 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 originala.

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

30

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.

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

31

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

32

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

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

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

33

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

34

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

35

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;

color: #ff5f00;

font-weight: bold;

}

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

36

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

<head><title></title>

<style type="text/css">

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

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

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

</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><h1> Selector CSS tip HTML</body>

</html>

Se definesc selectorii:

- de tip clasa

- de tip HTML

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

37

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

38

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:

<?comenzi PHP ?>

<?phpcomenzi PHP php?>

39

<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 lucruRealizarea header-uluiMeniulPortiunea din mijloc si footerulColoaneleMesaj de intampinare pentru utilizatorStiriServiciiDespre noiParteneriContactCariera

VA DORIM MULT SPOR !

41