P. 1
Manual HTML

Manual HTML

|Views: 264|Likes:
Published by Iulia Ilie

More info:

Published by: Iulia Ilie on Jun 06, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

05/03/2013

pdf

text

original

Sections

  • I.Notiuni introductive
  • II.Notiuni de baza pentru structura unei pagini Web
  • III.Tabele
  • IV.Formulare
  • V.Notiuni de grafica Web
  • VII.Notiuni generale de CSS
  • VIII. Script-uri Web – notiuni generale
  • IX.Aplicatie - realizarea unui site

CUPRINS 1 2 Notiuni introductive Notiuni de baza pentru structura unei pagini Web

( Internet ,Web, HTML, URL, editor, servicii, legislatie )

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

3 4

Tabele Formulare

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

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

5 6 7

Notiuni de grafica Web Cadre Notiuni generale de CSS

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

( necesitate, integrarea cadrelor intr-o pagina Web )

( definitie, necesitate, sintaxa, integrare in HTML. selectori CSS, formatare text, font, fundal ) 8 Script-uri Web – notiuni generale ( Java, PHP, C#.Net ) 9 Aplicatie - realizarea unui site ( grup tinta, realizare haeder, meniu, imagini, fonturi )

2

I.Notiuni introductive
( Internet ,Web, HTML, URL, editor, servicii, legislatie ) Internet" (cu i mare) reprezinta reteaua globala, accesibila in mod public formata prin inter conectarea a milioane de retele de calculatoare din toata lumea. • Internetul si paginile Web - au patruns adanc si puternic in viata noastra. Se pune problema insa: prin ce ne-au castigat ? Iata cateva motive pentru care interesul pentru tehnologia comunucatiei virtuale ar trebui sa ne atraga cat mai mult:  faciliteaza comunicarea interumana aproape instantaneu;  este o reala sursa de documentare , deoarece se poate publica orice format de informatie;  un site web al unei companii este foarte eficienta din punctul de vedere al rezultatelor;  sa nu uitam site-urile care se adreseaza consumatorului final , cele prin intermediul carora se pot face on-line : cumparaturi , rezervari , plati de facturi , studiu la distanta Internetul isi are originea in anul 1969, aparut datorita unui proiect experimental in cadrul unei agentii din Departamentrul de Aparare al US. Proiectul initial lega calculatoarele de la Univ. of California din Los Angeles (UCLA), institutul Stanford (SRI) din Menlo Park si Universitatea Utah din Salt Lake City. In proiectul initial al ARPAnet se asigurau doar 3 servicii de comunicatie: conectarea la distanta - telnet (Remote login), transferul de fisiere si tiparirea la distanta.  in 1972, cand se ajunsese la o retea cu 37 de calculatoare, a fost introdus si serviciul de posta electronica - e-mail;  in 1973, sistemul TCP/IP este propus ca un standard pentru ARPAnet. El este insa acceptat ca protocol standard doar la 1 Ianuarie 1983, cand ARPAnet ajunsese sa asigure conectarea a 500 de centre.  in 1990 ARPAnet dispare (dupa ce toate organizatiile care erau conectate au trecut la NSFNET. La randul sau NSFNET isi inceteaza activitatea in 1995 cand accesul la Internet ajunge sa fie asigurat de firme comerciale pentru intreaga lume.  in 1990 Tim Berners-Lee, fizician la CERN Geneva, dezvolta protocoalele de comunicatie pentru World Wide Web, creind si limbajul HTML (Hypertext Markup Language). Chiar daca era initial un proiect destinat cercetatorilor din fizica atomica si subatomica, descoperirile sale au facut rapid epoca, pentru multa lume Internetul devenind sinonim cu World Wide Web-ul.  primele pagini Web vizibile "in lume" sunt raportate in decembrie 1991, la laboratorul de fizica de la Stanford Linear Accelerator Center (SLAC). Unii considera ca moment al aparitiei Web-ului doar anul 1994, cand a fost lansat pe piata primul navigator performant

3

Fiecare calculator conectat direct la Internet este identificat in mod unic printr-o adresa IP. Fiecare adresa IP este formata din 32 biti reprezentati prin 4 grupe de cifre cuprinse intre 0 si 255 separate prin punct (ex: 192.168.0.1).

IP (Internet Protocol) este protocolul ce guverneaza transmiterea datelor intre calculatoarele conectate la Internet, cu ajutorul adreselor IP. • Datele (informatia) circula pe Internet sub forma de pachete din aproape in aproape, din router in router (dispozitiv care leaga mai multe retele), de la sursa catre destinatie. Internetul nu are un proprietar anume. Exista totusi organisme internationale care definesc si urmaresc modul de functionare al Internetului. ex: toate adresele IP si numele de domenii sunt sub jurisdictia unei organizatii numite IANA (Internet Assigned Numbers Authority). Acesta este controlata de ICANN (Internet Corporation for Assigned Names and Numbers). ICANN este o corporatie non-profit din California

Browser Web este o aplicatie software utilizata pentru a localiza şi a afişa pagini Web • Două dintre cele mai populare browsere sunt Microsoft Internet Explorer, Netscape şi Firefox. Sunt browsere grafice, ceea ce înseamnă că pot afişa grafică, precum şi de tip text. În plus, cele mai moderne browsere pot prezenta multimedia informaţii, inclusiv de sunet şi video, deşi au nevoie de plug-in-uri ( mici programe ) pentru anumite formate.

4

World Wide Web abreviat WWW; numit scurt şi web, care în engleză înseamnă "reţea" ,este un sistem de documente şi informaţii de tip hipertext legate ele între ele care pot fi accesate prin reţeaua mondială de Internet Webul a fost inventat în 1989 la Centrul European de Cercetări Nucleare (CERN)în Geneva (Elveţia). Propunerea iniţială de creare a unei colecţii de documente având legături între ele a fost făcută de Tim Berners-Lee în martie 1989. Această propunere a apărut în urma problemelor de comunicare pe care le întâmpinau echipele de cercetători ce foloseau centrul, chiar şi folosind poşta electronică. • Tim Berners-Lee şi echipa sa au realizat primele versiuni pentru patru componente cheie necesare serviciului web, şi anume:
• • • •

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

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

Aproape toată structura Internetului se bazează pe modelul de clientserver. Multe milioane de servere din toată lumea sunt conectate la Internet

Standardele web sunt un termen general pentru standardele formale şi alte tehnici specifice care definesc şi descriu aspecte ale World Wide Web. Netscape Navigator ) • tastarea unui cod sursa intr-un editor de tip text . Majoritatea serviciilor oferite pe Internet rulează pe servere: Web.5 şi rulează continuu. salvarea acestuia cu extensia : html si deschiderea fisierului salvat cu un browser de Internet . • 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. Cu ajutorul codului HTML (Hyper Text Markup Language) poti construi pagini web . Continut pagina //------------------------------------------------ .

html • pentru .numele domeniului pe care se află resursa . • Furnizorii de Servicii Internet sunt niste companii zonale . Schema folosita in scrierea adresei este: <protocol>://<nume_DNS>/<nume_local> Unde : • <protocol> .ro/index. la randul ei .info. • <nume_local> . va conecteaza la Internet . </body> </html> Furnizor de Servicii Internet ( ISP . • De ex http://students.de cele mai multe ori este http . URL (în engleză Uniform Resource Locator) reprezinta calea specificarea unei resurse (unui site sau a unei pagini) în Internet. • <nume_DNS> .6 sau: <html> <head> <title>Titlul paginii</title> </head> <body> Prima mea pagina web. care ofera acces la propria retea .calea şi numele resursei de pe discul local. iar aceasta . adica Internet Service Provider ) este furnizoriul de servicii Internet .

haeder. link-uri . valori }. caractere speciale. 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. 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. linie orizontala.7 Internet-ul ( inclus in domeniul tehnologiei informatiei ) este protejat prin legislatie. referinte .Notiuni de baza pentru structura unei pagini Web ( tag { atribute. fiindca nu contin nici o informatie) . II. paragraf . <tag atribut="valoare"> informatie </tag> Nota: • nu toate tag-urile accepa atribut ( daca accepta atribut.

<br> trece rand pe urmatorul <hr> traseaza o linie orizontala Nume tag <a> Nume atribut href target Valoare atribut URL _blank _self _parent _top Detalii Ancora Adresa catre care vrem sa fie legatura (adresa URL. textul pe care il vei scrie intre aceste tag-uri va fi afisat in bara de titlu a documentului. intre aceste tag-uri sunt trecute.8 <htmlL> <head> cu acest tag incepe orice document HTML. ii spui browser-ului ca ai terminat de scris continutul paginii. </head> <title> </title> <body> (b) </body> </htmlL> Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici. diverse informatii folositoare pentru browser-ul de internet acesta este tag-ul de incheiere al tag-ului <HEAD> cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tau. Codul oricarui document se termina cu acest tag. de catre browser. dar VA SUGERAM sa utilizati LITERE MICI. Astfel. odata cu acest tag incepe continutul paginii web. fisier local. pentru a naviga prin link in cadrul aceluiasi document. pe langa titlul paginii. imagine Fereastra in care se va face afisarea name title <b> <body> background bgcolor adresa imaginii cod culoare nume culoare procent din latimea paginii e foloseste pentru documente lungi. Prin folosirea acestui tag ii spunem browser-ului ca este vorba de un fisier HTML pentru a il putea afisa. Tot ceea ce vei scrie dupa acest tag nu va mai fi afisat. text descriptiv pentru link. Tot ce vei scrie intre tag-urile <BODY> si </BODY> va fi afisat. este tag-ul de încheiere al tag-ului <TITLE>. Arata sfarsitul titlului documentului. pe ecranul monitorului. este tag-ul de încheiere al tag-ului <HTML>. care au scroll vertical. Textul va aparea ca un tooltip (cand mergem cu mouse-ul peste link) Text bold Cuprinsul documentului Imaginea de fond Culoarea fondului Distanta dintre marginea din stanga a ferestrei browserului si marginea din leftmargin .

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

in cazul in care.10 middle bottom Alinierea elementelor din jurul imaginii: top (sus). middle (mijloc). aceasta nu este afisata Marimea chenarului din jurul imaginii Inaltimea imaginii Spatiu pe orizontala in jurul imaginii Adresa imaginii Spatiu pe verticala in jurul imaginii Element lista Lista ordonata Latimea imaginii Paragraf align left center right justify <strong> <sub> <sup> <u> <ul> type circle square Alinierea paragrafului alt text border height hspace src vspace <li> <ol> width <p> numar pixeli procent numar pixeli numar pixeli URL numar pixeli procent numar pixeli de de de de de Text evidentiat Text indice Text exponent Text subliniat Lista neordonata Se scriu cerculete goale in dreptul elementului din lista Se scriu patrate goale in dreptul elementului din lista . bottom (jos) Text ce va fi afisat in locul imaginii.

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 SALVARE DESCHIDERE PAGINA VIZUALIZARE PAGINA .11 Indicatii si exemple 1.

modificarea codului implica pasii: salvarea fisierului cu noile modificari si reactualizarea paginii prin tastarea in browser a butonului ‘Refresh’.12 VIZUALIZARE COD SURSA modificarea codului se poate face: • prin revenirea in fisierul initial si deschiderea lui cu editor tex ( ex.URI • referintele ( link-urile ) in cadrul aceluiasi document ( foto 1.Notepad) • prin vizualizarea directa a codului din pagina deschisa in browser. . 2. LINK .) De ex: ne propunem sa cautam prima aparitie a cuvintelor “Internet” si “Web” in text . FORMATARE PARAGRAFE SI HAEDERE 3.

.google.ro/">Cauta pe Google</a> ( foto 2. pe cand cuvintele initiale isi schimba culoarea fontului dupa ce s-a efectuat click ctre link.....13  Se marcheaza cu # sirul cautat ( #Internet ) ....pdf">Nomenclator</a> sau <a href="produs1........... acestea apar in pagina cu alta culoare chiar de la incarcarea paginii.<a href="#Web">Web</a>...... <a name="Web”><font color=”#0000ff”><b>Web</b></font></a> Pentru o evidentiere a cuvintelor cautate. Internet reprezinta ce va apare scris in pagina cand se executa click pe link  <a href=”#Internet”>Internet</a> ... atasam ‘ ancora’ spre care este directionat link-ul......jpg">Foto produs 1</a> 1... • spre URL –uri : <a href="http://www...... URL.google. in dreptul fiecarui cuvant cautat . Cod sursa foto 3 <html> <head> <title>Prima mea pagina web</title> </head> <hr> ... accesibila in mod public formata prin inter conectarea a milioane de retele de calculatoare din toata lumea...) <p align="left"> <a href="http://www..... legislatie  In pagina. . editor... <a name="Internet”><font color=”#0000ff”><b>Internet</b></font></a> (cu i mare) reprezinta reteaua globala.. 3........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........ servicii. 2.. HTML..

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.jpg"> <font color="00ffff" size="3">&nbspFoto1</font></a> <h3> eLearning <a href="produs2. Ele sunt de doua tipuri: . se foloseste caracterul special &nbsp.realizate cu tagul <ul> Intre tagul de inceput si de sfarsit al unei liste. • • Cod .realizate cu tagul <ol> .liste ordonate .jpg"> <font color="00ffff" size="3">&nbspFoto2</font></a> <h3> eTraining <a href="produs3.14 <body bgcolor="#CCCCCC"> <hr COLOR="#FF0000" width="75%" size="2%" align="left"> <font color="#0000ff" size="6"> <h2 align="center">SOLUTI SI PROIECTE <a href="nomenclator. LISTE • Listele in HTML/XHTML sunt folosite pentru o enumerare de elemente. se introduce cate un element al listei. 4.liste neordonate . intre tagurile <li></li> (li = list item) Tagurile pentru lista suporta atributul type cu diferite valori ce schimba modul de afisare a marcatorilor listei.  propunem sa va creati propriile coduri pentru a va familiariza cu atributele si valorile acestora din tabelul prezentat. Se realizeaza o pagina care sa listeze neordonat un sir de itemi.pdf"><br align="center"> <font color="00ffff" size="3">Nomenclator</font> </a</h2> <h3 align="left"> ERP <a href="produs1.

html .info.html Pentru coduri de culori se pot consulta pegini web.ro/tutoriale/culori. ca de ex: http://profs.15 foto • Se realizeaza o pagina care sa listeze ordonat un sir de itemi cod foto • Nota: Pentru caractere speciale in html. se pot consulta pegini web.ice-t. ca de ex: http://html.uaic.ro/~val/char_spec.

mid sau *..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 height=”y” loop=”z” autostart=”u” <EMBED src=”?” width=”x” volume=”v”>.mid">fisier sunet</a> 2. sunete care care sa fie audiate direct din pagina web . înlocuind semnul de întrebare (?) cu calea de acces către fişierul video .fisierul sursa de sunet care va fi audiat loop . x= lungimea . sunet de fond (fundal sonor) : este acceptata doar de browserul internet Explorer si consta in inserarea in interiorul corpului paginii a etichetei: <bgsound> care poate avea atributele: src . AU (*. se folosesc fisiere de tip flash.16 6. u=”true” / “false”. WAVE (*. VIDEO • Cateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.100 • • autostart . Stop. z = numarul de iteratii.. y= inaltimea exprimate in pixeli . .. Pause. v= 0. REFERINTE CATRE FISIERE DE TIP: SUNET.stabileste daca sunetul va incepe imediat dupa incarcarea paginii web. In pagini web putem introduce: 1.stabileste daca sunetul va fi repetat la nesfarsit.midi).wav). Poate avea valoarea true sau false. 3.au). link-uri catre fisiere de sunet <a href="1. Poate avea valoarea true sau false loop . care pot contine si butoane de control de tip Play.

pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>. coloane} ) Tabelele constituie structura care sta la baza organizarii marii majoritati a paginilor web.Tabele ( necesitate.poate avea orice valoare intre 0 si 100 <HTML><HEAD> <TITLE>Fisier video</TITLE></HEAD> <BODY><EMBED src="c:\windows\clock. Tabelul este format din linii si coloane impartind zona in celule. tag-uri specifice. • Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>.avi" width="150" height="150" loop="2"> </BODY> </HTML> III. adica in interior pot contine unul sau mai multe tabele. Tabele pot fi imbricate. Fiecare celula pastreaza informatia care va fi afisata. Nume tag <TABLE> align background bgcolor left center right URL cod culoare nume culoare procent numar de pixeli cod culoare nume culoare numar de pixeli numar de pixeli numar numar • Nume atribut Valoare atribut Detalii Tabel Alinierea tabelului Imaginea de fond pentru tabel Culoarea fondului pentru tabel border bordercolor Chenarul tabelului Culoarea chenarului cellpadding cellspacing cols hspace Spatiu intre continutul celulelor tabelului si marginile lor Spatiu intre celulele tabelului Numarul de coloane ale unui tabel Spatiu pe orizontala in jurul .17 • volume . proprietati { linii.

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

.19 foto 1 • Se ‘ construieste’ un tabel care va respecta indicatiile:  pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie safie insosit de atributul BORDER avand valoarea egala cu cel putin 1. unui rand sau a unei celule. poti schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR insotit de codul culorii dorite. 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. Astfel. In plus.

pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile "left".  pentru a alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una dintre valorile "top". unui rand sau chiar a intregului table folosim atributul BGCOLOR impreuna cu codul culorii alese. "middle" sau "bottom".20 folosimatributele WIDTH pentru latime si/sau HEIGHT pentru inaltime. "center" sau "right".  pentru a schimba culoarea unei celule.  Foto 2 cod 2 .

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 4 linii si 2 coloane cu proprietatea ca pe prima coloana celulele corespunzatoare liniilor: 2. Folosind tabelele. • 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. foto 4 cod 4 . • In plus fata de notiunile invatate pana acum in aceasta lectie. putem adauga o imagine sau un text oriunde in pagina web. 3 si 4 sunt imbinate.21 • Cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini web. foto 3 cod 3 Obs: <td colspan = "x"> .inseamna ca celula respectiva se va "intinde" orizontal peste x celule din dreapta ei. 3 si 4 sunt imbinate..

elementele unui formular. etc • Dupa ce formularul a fost completat. • Tag-ul <FORM> are doua atribute foarte importante: ACTION si METHOD. casete de validare. campuri de editare. • In aceasta lectie vom invata cum se pot adauga in cadrul unei pagini web diferite tipuri de formulare. obiecte { butoane. dar si cum putem trimite datele introduse intr-un formular. campuri de editare. 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. utilizatorul apasa un buton de trimitere. va trebui sa folosesti tagurile <FORM> si </FORM>.Formulare ( necesitate. • Cu ajutorul atributului ACTION ii spunem browser-ului ce se va . administrarea unui website. login. notiuni generale.22 Obs: td rowspan = "x"> inseamna ca celula respectiva se va "intinde" vertical peste celulele de dedesubtul ei IV. Intre aceste tag-uri vor fi introduse toate elementele formularului. • Pentru a folosi un formular in pagina ta web. forumuri. prin email. adaugare produse la shopping cart. 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. liste de selectie.

caz in care datele introduse in formular vor fi trimise prin email la adresa respectiva. Pentru a folosi un astfel de camp de editare. care reprezinta latimea campului de editare • MAXLENGTH. Valoarea implicita a acestui atribut este GET. valoarea atributului ACTION poate fi o adresa URL a unui script. specifica numarul maxim de caractere care pot fi introduse in campul de editare • VALUE.numele elementului . cea mai folosita metoda fiind POST.VALUE .NAME . In acest caz.tipul elementului . trebuie sa folosim pentru atributul TYPE. • Atunci cand vrem sa adaugam in cadrul formularului nostru un camp de editare in care sa poata fi introduse mai multe randuri. Atributele cele mai importante ale acestui tag sunt urmatoarele: .23 intampla cu datele introduse in formular. • Elementele unui formular trebuie introduse. cu ajutorul acestei metode putand fi trimise cantitati mici de date. precizeaza metoda de trimitere a datelor si poate avea doua valori. care va interpreta datele si le va introduce intr-o baza de date. scris intr-un limbaj de programare. nu vor fi vizibile . sau poate fi o adresa de email. caracterele introduse in campul de editare. atributul TYPE va avea valoarea "password". cu ajutorul tag-ului <INPUT>. valoarea text. Astfel. avem nevoie de tag-urile <TEXTAREA> si </TEXTAREA>. asa cum ii spune si numele.valoarea elementului • Elementele ale unui formular pot fi: campurile de editare :  Pentru a introduce in cadrul unui formular un camp de editare. daca este cazul. folosim campurile de editare de tip multilinie. 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.TYPE . in majoritatea cazurilor. Exemplu: þÿ  Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt: • SIZE. al tagului <INPUT>. • Atributul METHOD. vom folosi . 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".

A4 <BR> <INPUT TYPE="checkbox" NAME="optiunea2"> Monitor LCD Samsung 2223NW. folosim tag-ul <INPUT>. Exemplu: <INPUT TYPE="file" NAME="file">  • liste de selectie :  O lista de selectie. valoarea "file". 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. casetele de validare permit selectarea mai multor optiuni.24 butoanele radio. • casetele de fisiere : Pentru a trimite un fisier prin intermediul unui formular. valoarea "radio". • casete de validare :  pentru a introduce ocaseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu atributul TYPE avand valoarea "checkbox". Pentru a introduce un buton radio. permite utilizatorului sa aleaga una sau mai multe optiuni dintr-o lista. atribuie listei de selectie un nume  . fara alte valori. in acelasi timp. iar la atributul TYPE. Sa consideram un exemplu: Nota: Cu ajutorul atributului CHECKED. 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. folosim pentru atributul TYPE al tag-ului <INPUT>. Atributele cele mai folosite pentru tag-ul <SELECT> sunt: • NAME. putem selecta un buton rradio in mod prestabilit. Casetele de validare permit selectarea sau deselectarea uneia sau mai multor optiuni. Nu pot fi selectate mai multe butoane radio dintr-un grup. Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si </SELECT>. asa cum ii spune si numele.

fara alte valori.ro METHOD="POST"> • Sa gandim un prim formular care sa primeasca cateva date ale unui .ro vom folosi urmatoarea linie de cod: <FORM ACTION=mailto:aaa@manuale. singura deosebire fiind ca atributul TYPE va avea valoarea "reset". Astfel. 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. cu atributul TYPE avand valoarea "submit". putem folosi si un buton de tip Reset. indiferent de valorile introduse de utilizator.25 • SIZE. • butoane de tip “Submit” si “ Reset” :  pentru a introduce un asemenea buton folosim tag-ul <INPUT>. specifica numarul de elemente din cadrul listei de selectie • VALUE. sub forma de perechi "name = value" • SELECTED (fara alte valori). cu ajutorul atributului VALUE. pentru a trimite datele dintr-un formular la adresa aaa@manuale. 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. care in mod implicit este Submit. se procedeaza la fel ca si la butonul de tip Submit. datele introduse in formular vor fi trimise la adresa de e-mail specificata. Prin apasarea acestui buton toate elementele formularului vor reveni la valoarea lor prestabilita. De exemplu. atribuie o valoare de tip text care va fi expediata serverului. 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. Pentru a introduce un buton de tip Reset. linia de cod pentru un buton de tip submit va fi urmatoarea: <INPUT TYPE="submit" VALUE="Trimite">  Alaturi de butonul de tip Submit.ro". Putem modifica si valoarea butonului. in felul acesta.

</td> </tr> <tr> <td align="right">Tara in care v-ati nascut:</td> <td> <select name="tara"> <option value="ro">Romania</option> (Foto1) .&nbsp.&nbsp. checkbox. radio.&nbsp. 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" method="metoda_trimitere"> campuri de culegere date (input. 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).&nbsp. • Forma generala a unui formular este: <form action="fisier_de_prelucrare_date.&nbsp.&nbsp.&nbsp.php ( script php aflat pe server ) care va interpreta datele din formular.&nbsp.php: este fisierul propriu zis.26 utilizator si apoi acestea sa se trimita catre un fisier forma. textarea.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. Sport <input type="checkbox" name="hobby" value="sport" /> &nbsp. etc) </form> unde:  fisier_de_prelucrare_date.&nbsp.&nbsp. Filme <input type="checkbox" name="hobby" value="filme" /> &nbsp.&nbsp.&nbsp.

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. php ?> .html– fisier in care se gaseste codul html <form ….> cod html </form> script.27 <option value="fr">Franta</option> <option value="de">Germania</option> </select> </td> </tr> <tr> <td></td> <td><br /><br /> <input type=”submit” name=”btnSubmit” value=”Trimite Formular”></td> </tr> </table> </form> </body> </html> • Ne propunem acum sa realizam un formular complex.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.html (cod 2) <form action="c:\script. care sa evidentieze tipurile de obiecte ce se pot introduce intr-un formular pe care il vom salva cu numele script..

28 • Se doreste ca datele din formular sa fie trimise la o adresa de mail.Notiuni de grafica Web ( tag-uri specifice .com"> type="text" size="10" name="name"> <br /> method="post" Nume: <input maxlength="40" ( foto 3 ) Parola: <input type="password" size="10" maxlength="10" name="password"><br /> <input type="submit" value="Trimite"> </form> . atributul action ia valoarea adresei de mail. 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. V. Notepad.se executa click pe butonul ‘Trimite’. ( cod 3 ) <form action="mailto:youremail@email. unelte pentru Web-design. alegerea tipului de imagine ) • Realizarea unui website in mod profesional presupune in general o . de ex. In acest caz.

Left . TAG <img src=”fisier_imagine. Animatiile mai lungi. Programatorul web este responsabil si cu realizarea scripturilor in JavaScript. PNG cele 3 formate standard pentru imaginile folosite in web. O persoana se ocupa de "cum arata" website-ul respectiv. in pixeli. Cealalta persoana este programatorul web. GIF GIF se preteaza la imagini simple. mouse-ul peste imagine. acea persoana realizeaza deci designul website-ului (de obicei in Adobe Photoshop). De multe ori insa. PNG PNG este cel mai recent format suportat in Web. • JPG. Designerul se poate ocupa si de animatii (Macromedia Flash). align . Middle .Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii.29 echipa de cel putin doi oameni care au doua profesii distincte. daca designerul este specializat doar in design web. Daca nu este scris imaginea va fi prezentata cu inaltimea . Daca nu este scris imaginea va fi prezentata cu lungimea originala. de aceea. Formatul PNG a fost realizat pentru a rezolva limitarile formatului GIF . alt . height . iar programatorul web sa se ocupe de JavaScript. ABSBottom width . e foarte probabil sa stie foarte bine si sa lucreze eficient in HTML si CSS. Apoi. si de baze de date (ex: PHP si MySQL). sau alte elemente vizuale legate de website. pentru website-urile complexe. Top . Pot fi folosite urmatoarele optiuni: • Bottom . JPG JPG sau JPEG este un format realizat special pentru imagini complexe de tip fotografii sau alte imagini care au multe culori. TextTop . si programarea server-side. si are profesia de "designer". in browser. unde atributul ‘scr’ se refera la calea catre imagine • Atribute si valori ale atributelor src . Baseline . ABSMiddle . in pixeli. este cel care transpune grafica in HTML si CSS. dinamice.La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere) sau cand utilizatorul va pozitiona.extensie”/> . Right .Valoarea acestui atribut reprezinta lungimea imaginii. programatorul web este cel care se ocupa de programarea in limbajele de scripting server-side.Acest atribut permite asezarea imagini in locuri diferite pe pagina.Valoarea acestui atribut determina locatia fisierului care contine imaginea. GIF este un format care suporta si animatie. cu putine culori. banere. GIF. mai complexe au inceput sa se realizeze in Flash. • Principalul program preferat pentru grafica web este Adobe Photoshop. multe din bannerele animate existente pe web au format GIF.

in pârtile orizontale ale imaginii. de 5 pixel. in pixeli. border . Indicatii si exemple • Se construieste o pagina care introduce in pagina o imagine a carei dimensiuni este limitata de valorile atributelor. in pârtile verticale ale imaginii. vspace .30 originala. De exemplu o valoare de 5 va pune un spatiu invizibil. specificat in pixeli.Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii.Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii. de 5 pixel. specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil. . hspace .Prin adaugarea acestui atribut imaginea va aparea înconjurata de un chenar. <html> <head> <title>titlu documentului</title> </head> <body> <img src="C:\modern_house. valoarea acestui atribut reprezinta grosimea chenarului.jpg" align="top" width="100" height="120" border="4" hspace="10" vspace="7"></img> </body> </html> • Se construieste o pagina in care butonul de tip “Trimite” are inserata o imagine.

31 <form method="get" action="fisier.1</TD> <TD>Celula 2.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.jpg" align="top" width="100" height="120" border="4" hspace="10"vspace="7"/></TD> </TR> <TR> <TD>Celula 2.1</TD> <TD><img src="im1.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. se insereaza o imagine limitata de valorile atributelor.2</TD> </TR> </TABLE> . <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.

care se refera la cadrele definite. • Tagul <frameset></frameset> defineste cadrul de frame-uri (cate randuri si coloane are.pentru marimea spatiilor dintre cadre . (c) CREAREA UNUI CADRU • Atributele tag-ul <FRAMESET> FRAMESPACING . integrarea cadrelor intr-o pagina Web ) • Cu ajutorul cadrelor (frame-uri ) putem afisa mai multe pagini web in acelasi timp in browser.32 </body> </head> 6. iar tagul <frame></frame> defineste o fereastra. • Cu ajutorul cadrelor putem imparti o pagina web in mai multe zone. Un cadru ( frame ) este de fapt o fereastra independenta in browser. FRAMEBORDER .permite alegerea culorii pentru contur . marginile cadrelor BORDERCOLOR . valorile sale fiind "yes" sau "no" sau “0” .pune in evidenta prin valorile “0” sau “1” . si cum se impart).Cadre ( necesitate. iar apoi putem stabili ce pagina va fi afisata in fiecare zona. daca au sau nu chenar. este un numar in pixeli. “1” BORDER .

poate avea valorile yes. <FRAME SRC="numelepaginii. Nu uita de tag-ul de incheiere </FRAMESET> 2.com) sau calea relativa a unui fisier pe harddisk (content.yahoo. se vor asocia mai multe procente atributului ROWS.poate avea valoarea 0 sau 1. marginheight .defineste calea catre pagina web ce va fi afisata in acest frame.valoarea specificata este in pixeli. daca dorim ca frame-urile sa aibe bordura vizibila sau nu.*" FRAMEBORDER="no" FRAMESPACING="0"> • Pentru a imparti pagina web in mai multe cadre orizontale. Este folosit pentru a realiza un link din alt frame catre o pagina care sa se incarce in acest frame. Reprezinta marginile din stanga si dreapta ale frame-ului noresize = "noresize" . • Principalul atribut al tag-ului <FRAME> este SRC cu ajutorul caruia indicam sursa cadrului. dar avand grija ca suma lor sa nu depaseasca 100%.valoarea specificata este in pixeli. sau mai este folosit in scripturi. Poate fi un URL (http://www. Astfel intre tag-urile <FRAMESET> si </FRAMESET> vom folosi tag-ul <FRAME>. 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.html) name . se trece la definirea cadrelor.33 De ex: <FRAMESET ROWS="70%. Reprezinta marginile de sus si de jos ale frame-ului marginwidth .html"> • Atribute ale tag-ului <FRAME> frameborder . Iata o linie de cod care prezinta ce fisier se va incarca in cadru .denumeste frame-ul. • Dupa ce am stabilit impartirea paginii in cadre. auto si se refera la prezenta scrollului src .prezenta acestui atribut specifica faptul ca frame-ul nu poate fi re-dimensionat scrolling . In linkul din primul frame se foloseste atributul target pentru a . no.

*" > <frame name="stanga" frameborder="1" noresize="noresize" src="http://www.in cadrul din stanga sa se incarce pagina cu URL=http://www. . iar intrunul din cadre.html" scrolling="auto" /> </frameset> </html> • Sa se realizeze o pagina web care sa contina trei cadre orizontale .ro" /> <frame name="dreapta" frameborder="1" src ="c:\test5. care înseamnã "foi de stil în cascadă".Notiuni generale de CSS ( definitie.Toate cadrele vor avea scroll ( care va permite vizualizarea intregii imagini incarcate in cadru . 30%.google. necesitate. fundal ) CSS este un acronim provenind din Cascading Style Sheets.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: .ro .in cadrul din dreapta sa se vizualizeze o alta pagina al carei cod este dat de fiserul “C:\test5.html" /> <frame src ="test3.jpg" /> </frameset> </html> </html> VII. selectori CSS. chiar daca dimensiunea initiala a cadrului nu permite ). <html> <frameset rows = "20%.html" /> <frame src ="flori2. integrare in HTML. formatare text.*"> <frame src ="test2. sintaxa.html" <html> <frameset cols = "75%. sa se incarce o imagine . font. Ex: <a href="Doc3.google.34 specifica frame-ul in care sa se incarce pagina.

doar prin editarea unui singur document CSS. Un selector . numite reguli CSS. color:blue. care poate formata orice element care este etichetat cu clasa respectiva . Exemplul2 . Folosind CSS. } </style> In exemplul1 . Dacă aţi încercat vreodată să schimbaţi fontul sau culoarea tuturor anteturilor din paginile web pe care le-aţi creat. Codul este sensibil doar la tag-urile indicate. color:#1111ff. afişarea unor fonturi mai mari decât h1 etc. Una sau mai multe declaratii care definesc cum arata elementul respectiv Exemplul1 – selector de tip HTML ( care formateaza tag-urile <h1> si <p> ). CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte. Modificând fişierul CSS extern. la scăderea dimensiunii în octeti a paginii web. iar ce este cuprins intre accolade. . font-size:15px. web. Se pot crea efecte mai sofisticate decât cele produse de codul HTML: suprapunerea unei imagini peste altă imagine. prin stabilirea unui anume stil scris intr-un cod folosind orice editor text. efectul hover. } p {font-family:’Arial’. Proiectanţii CSS-ului au urmărit îndeosebi separarea între conţinutul paginii (textul destinat vizitatorului şi imaginile din pagină) şi codul-sursă. • • • • • • • • Sintaxa CSS este formata din reguli.selector de tip clasa . se ajunge la un control mai fin asupra paginii web. atunci când codul CSS e conţinut într-un fişier extern. font-size:12px.35 • Stilurile CSS sunt salvate în mod normal în fişiere diferite de cele cu extensia html. Foile de stil externe vă permit să schimbaţi apariţia şi aranjarea tuturor paginilor în site-ul dvs. h1 si p sunt selectori . font-weight:bold. care defineste elementele HTML pe care se aplica regula 2. modificăm simultan toate paginile web în care acesta e inclus. veţi întelege cum CSS vă poate scuti de multă muncă inutilă. 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. a unui text peste alt text. reprezinta declaratii. O regula CSS este formata din 2 parti: 1. <style type=”text/css”> h1 { font-family:’Arial’. impresia de relief.

} font-size:15px. } </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> . color:blue.title { font-size: 11px.36 . iar ce este cuprins intre accolade. color:#1111ff. reprezinta declaratii. <head> <title></title> <style type="text/css"> . font-size:12px. color: #ff5f00. } In exemplul2. • Sa se realizeze o pagina web care sa foloseasca pentru formatare .de tip HTML p {font-family:’Arial’.de tip HTML . color: #ff5f00. font- . coduri CSS.title . numele clasei este . weight:bold. font-weight: bold.de tip clasa h1 { font-family:’Arial’. . } Se definesc selectorii: .title { font-size: 11px. font-weight: bold.

Acesta va scuti userul de mult timp pierdut in cazul in care a introdus gresit datele fiindi nevoie de reincarcarea paginii si recompletarea campurilor. contoare ale vizitelor şi multe alte elemente mai avansate precum sistemele portal. precum formularele de feedback. etc. decât pune la dispozitia acestuia legaturi la alte resurse (URLuri). Astfel de elemente sunt necesare pentru a obţine o imagine de profesionist.37 <td>c22</td> <td>c23</td> </tr> </table> <h1> Selector CSS tip HTML </body> </html> Nota: Acest curs nu prezinta decat cateva din elementele de baza ale codului CSS si necesitatea "foilor de stil". PHP. C#. gestionarii de reclame (advertising managers). cele de management al conţinutului. cărţile de oaspeţi. Folosirea scripturilor în propriul site Web ne permite să adăugăm multe elemente de noutate şi interactivitate. devin tot mai importante. dar statica. Documentele HTML nu pot interactiona cu utilizatorul în alt mod mai dinamic. 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. Vom evidentia cateva aspecte ale catorva limbaje de programare pentru editarea codurilor de script.Net ) Limbajul HTML ofera autorilor de pagini Web o anumita flexibilitate. VIII. Deasemenea una dintre aplicatiile cele mai importante este aceea de a valida un formular innainte de a fi trimis. Limbajele de comenzi. Cu ajutorul acestora se pot creea pagini dinamice animatii ale fotografiilor. sau pur si simplu pentru una dintre multele aplicatii care sunt facilitate de aceste scripturi. Script-uri Web – notiuni generale ( Java. pentru realizarea de script-uri. 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. Scripturile Web sunt deseori folosite in codul unei pagini in HTML pentru a da mai multa animatie. . sistemele colaborative numite message boards. web. un meniu animat cu efecte surprinzatoare si multe altele. 1.

Adică fişierele cu comenzi PHP rulează pe serverul Web. 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'. nu în navigator. î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.serverside language).38 Un pas important spre interactivizare a fost realizat de JavaScript. De ce să folosiţi script-uri PHP? PHP vine de la "Hypertext Preprocessor" şi este un limbaj de comenziscript pentru server (se spune că acţionează pe partea serverului . 2. mai exact în cadrul browser-ului utilizatorului. usurand astfel si traficul dintre server si client. Inserarea Javascript in HTML Introducerea unui cod javascript se face foarte simplu cu ajutorul tagului script. care permite inserarea în paginile web a script-urilor care se executa în cadrul paginii web. Codul necesar acestor actiuni poate fi inserat în pagina web si executat pe calculatorul vizitatorului. JavaScript contine o lista destul de ampla de functii si comenzi menite sa ajute la operatii matematice. obiecte si ferestre ale browser-ului. . Cu alte cuvinte. pe staţia client. imagini. PHP este un limbaj relativ nou (comparativ cu alte limbaje precum Perl (CGI) şi Java). De exemplu. dar devine rapid unul dintre cele mai răspândite şi mai populare din Internet. sunete. link-urile URL si verificari de introduceri ale datelor în formulare. nu trebuie să ne batem capul cu compatibilitatea soft a calculatorului personal de pe care navigăm. manipulari de siruri.

In C# se pot dezvolta aplicatii pentru consola (Console application). Există trei forme diferite de marcare a expresiilor . </form> 3. si trebuie produce cod care se poate modifica usor. Limbajul in sine este complex si greu de manuit. un nou limbaj trebuie sa fie usor de invatat si depanat. aplicatii pentru Windows (Windows application). In plus. managementul manual al memoriei si modelul de type-casting complex fac depanarea la C++ foarte dificila. Inserarea PHP in HTML – acest aspect a fost studiat in capitolul FORMULARE <form action="prelucrare. conform aceleaşi scheme ca şi în HTML.39 Scripturile PHP sunt întotdeauna incluse între două taguri PHP. şi anume: <? comenzi PHP ?> <?php comenzi PHP php?> <script language="php"> comenzi PHP </script> Codul se salveaza cu extensia . A fost conceput ca un concurent pentru limbajul Java. Astea spun serverului să preia information dintre ele şi să o interpreteze ca expresie din PHP. C# este un derivat al limbajului de programare C++. In timp ce VB si Delphi exceleaza in aceste domenii. 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. si putine biblioteci C++ ofera interfete simple.Cu tot efortul depus de Microsoft si Borland. aplicatii pentru Web. Unul din cele mai importante obiective ale Microsoft pentru C# : este suport pentru RAD (Rapid Application Development). In plus.comenzilor PHP. C++ nu a fost tocmai un succes. Ca şi acesta. php si se incarca fisierul pe server in spatiul in care sunt salvate documentele Web. etc.php" method="post"> Elementele Formularului şi comenzile de formatare. C++ nu este potrivit . Aplicatiil einternet trebuie sa fie dezvoltate in timp internet. cum se va arata in continuare C++ nu protejeaza inerent impotriva potentialelor probleme cauzate de incompatibilitati ale versiunilor.

meniu. realizare haeder. 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 .40 pentru dezvoltare rapida a aplicatiilor. De ce trebuie sa tineti cont in realizarea unui site . Aplicatie . Nu ezitati si intrati in zilele noastre bucurandu-va de castigurile si beneficiile unui site. Din ce in ce mai multe firme bine cunoscute sau chiar toate au site-uri de prezentare. Nota: Acest curs nu prezinta decat cateva din elementele de baza ale codului CSS si necesitatea "foilor de stil". magazine online etc. 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. Site-ul dumneavoastra trebuie privit ca o investitie care de cele mai multe ori isi merita banii aducand profituri inzecite. Aceasta regula e una generala si ar trebuii sa actionati.. web.realizarea unui site ( grup tinta. IX.. 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 . imagini. De ce? Ati fi surprins de cat de multi clienti sau parteneri de afaceri castiga prin intermediul site-ului.

41 • • • Parteneri Contact Cariera VA DORIM MULT SPOR ! .

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->