Sunteți pe pagina 1din 25

22.10.2010 Curs 1. Limbajul HTML www.w3schools.

com

Tehnologii Internet pentru Afaceri

Pentru a face schimb de informatii, calculatoarele sunt interconectate, formand retele de calculatoare. Multe dintre aceste retele sunt conectate intre ele, formand inter-retele, sau altfel spus, retele de retele de calculatoare. Cea mai mare retea de retele de calculatoare este Internetul. Exista mai multe metode de acces la informatia stocata pe un calculator prin intermediul retelei internet. FTP = file transfer protocol, folosit in general pentru transferul de fisiere. E-Mail = serviciul de posta electonica NEWS = serviciul de stiri WWW = world wide web www utilizeaza tehnologia client-server, care consta din urmatoarele : 1 calculator, numit client, formuleaza o cerere. Cererea este expediata unui server. Cererea parcurge un mediu pana la server. Serverul analizeaza cererea, o executa, formuleaza raspunsul si il trimite inapoi clientului. Raspunsul parcurge mediul de transmitere catre client. Clientul receptioneaza raspunsul. Pentru a comunica intre ele, doua calculatoare folosesc un sistem de reguli ce formeaza un protocol. Serviciul www utilizeaza ca protocol de comunicare intre client si server http:// (hypertext transfer protocol). Hypertext reprezinta un text imbogatit ce contine text obisnuit, precum si etichete pentru formatarea textului si incapsularea altor tipuri de informatii, ca legaturi catre alte resurse, sunete, imagini s.a.m.d. Hypertextul este salvat in fisiere cu extensia .html Limbajul care descrie hypertextul este asadar HTML (HYPERTEXT MARKUP LANGUAGE). Un calculator din reteaua internet poate fi identificat in mod unic prin intermediul unui nume, sau adresa. Informatia care circula intre calculatoarele interconectate este incapsulata in pachete. Pachetele contin adresa expeditorului si adresa destinatarului, informatia propriuzisa, precum si numele aplicatiei de pe server care va primi cererea spre rezolvare. Reteaua internet dispune de mijloace de dirijare a pachetelor astfel incat acestea sa ajunga la destinatie. Unul dintre mecanismele de dirijare se numeste IP (internet protocol). Paginile web, adica paginile obtinute prin vizualizarea pe calculatorul client, formeaza un site web. Prima pagina a unui site web mai este cunoscuta si sub numele de HomePage. Prima pagina trebuie sa descrie informatiile continute pe site, sa prezinte o harta a site-ului si in principiu sa fie placuta ca aspect. Numim Browser web aplicatia de pe calculatorul client in care vizualizam site-ul. Numim server web o aplicatie care ruleaza continuu pe un calculator central si care este capabila sa raspunda in permanenta cererilor clientului. Un utilizator al serviciului www poate solicita vizualizarea prin intermediul browserului a unei pagini web ce poate fi localizata pe un calculator aflat oriunde in lume. Aceasta se face prin adresa URL atasata

(uniform resource locator). URL identifica metoda de lucru, numele calculatorului, numele paginii si eventualii parametrii necesari vizualizarii paginii. Pentru scrierea unei pagini statice avem nevoie de un editor de texte, care poate fie Notepad, EditPlus, WordPad etc. si de un browser web care sa vizualizeze paginile (Internet Explorer, Mozilla, Opera etc.). Exemplu.html <html> <head>

<title> Exemplu </title> </head> <body> Salut </body> </html>

Un fisier .html este format dintr-o succesiune de marcaje. Marcajele cuprind blocuri. Exista marcaj pentru inceputul blocului, respectiv pentru sfarsitul blocului. Marcajul de sfarsit incepe cu caracterul / Cel mai cuprinzator marcaj este <html>, compus din doua blocuri. Primul identificat de marcajul <head> si cel de-al doilea de <body>. Marcajul <head> include informatii generale despre pagina curenta. In cazul exemplului nostru, pagina va avea un titlu introdus de marcajul <title>. Acest titlu va fi vizualizat pe prima linie a ferestrei browserului. Toate informatiile cuprinse in blocul <body> vor fi vizualizate in browser. Observatie : Marcajele de bloc pot contine si atribute, care sunt date sub forma perechilor nume = valoare atributele fiind separate prin spatiu. Intr-un fisier .html caracterele obisnuite folosite in editarea unui text nu sunt neaparat recunoscute. Astfel, caracterul enter nu are nici un fel de semnificatie pentru browserul web. <body> Prima linie A doua linie A treia linie <body> Rezultatul va fi : Prima linie A doua linie A treia linie

Pentru a separa liniile trebuie folosit marcatorul <br> (break) <body> Prima linie <br> A doua linie<br> A treia linie <body> Culori. In html o culoare poate fi precizata in doua feluri : printr-un nume asociat culorii (html pune la dispozitie 16 nume de culori, intre care "aqua", "black", "blue", "grey", "lime", "maroon", "navy", olive, purple, red, silver, white, yellow), fie printr-o succesiune de 6 caractere precedate de semnul diez. Pe ecranul unui calculator culorile sunt obtinute prin combinarea a 3 culori de baza : RGB. Cantitatea de culoare din fiecare poate avea valori cuprinse intre 00 si FF. Se obtin astfel cateva milioane de culori. Spre exemplu, #5C73F1 reprezinta o culoare valida. #00FF00 = verde Atributul care da culoarea de fond al intregii pagini web este atributul <bgcolor> = background color. <body bgcolor = "red"> Prima linie <br> A doua linie<br> A treia linie <body> Culoarea textului poate fi setata folosind atributul text=, valoarea acestui atribut fiind o culoare valida (exemplu text="#536189").

Stiluri pentru blocuri de text. Caractere ingrosate (aldine). Daca dorim sa scriem un text cu caractere ingrosate, atunci il vom cuprinde intre etichetele <b>...</b>. Daca dorim ca un text sa fie scris cu caractere marite, il vom cuprinde intre etichetele <big>...</big>, iar cu caractere micsorate, intre etichetele <small>...</small>. Pentru caracterele italice, <i>....</i> Pentru a insera secvente de text aliniate ca indice, vom folosi etichetele <sub>...</sub>, iar pentru alinierea ca exponent <sup>...</sup> (subscript / superscript). F(y) = (x1 + x2)2 y3 F <sub>(y)</sub> = (x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> - y<sup>3</sup> Daca dorim ca un text sa fie scris cu caractere subliniate atunci va fi cuprins intre etichetele <u>...</u>. Daca dorim ca un text sa fie scris cu caractere sectionate, va fi cuprins intre etichetele <strike>...</strike>.

Configurarea fonturilor. Un font este caracterizat de urmatoarele atribute : culoare, familia fontului, marimea fontului sau grosimea fontului. Toate acestea pot fi stabilite prin atribute ale etichetei font. Textul pe care dorim sa-l supunem schimbarii fontului va fi cuprins intre aceste etichete. Culoarea este data de atributul color. Familia fontului. Exista 5 familii generice de fonturi, care sunt de regula disponibile pe toate calculatoarele. Acestea sunt : Serif Sans serif Cursive Monospace Fantasy Alte fonturi specifice pot fi utilizate doar daca sunt instalate pe calculatorul client. Spre exemplu : Times Helvetica Arial si Courrier Western Atributul care stabileste familia fontului este "face". Observatie : Valoarea atributului "face" este recomandat a fi o lista de familii de stiluri in care pe ultima pozitie se afla o familie generica. Marimea fontului. Este data de atribtul size, cu valori intre 1 si 7, unde 1 este cel mai mic font iar 7 cel mai mare. Size="1" In plus, putem folosi pentru size valori de genul "+1", "+2", ... determinand cresterea dimensiunii fontului cu o unitate, 2 s.a.m.d. fata de dimensiunea actuala, pana la cel mult valoarea 7, sau valori de genul "-1" etc., determinand scaderea dimensiunii fontului cu o unitate, doua s.a.m.d., pana la cel putin valoarea 1. Grosimea, data de atributul weight, avand valori : 100, 200 ... 900, unde 100 este cel mai subtire, iar 900 cel mai gros font.

Exemplu : <head> <title> Exemplu 1 </title> </head> <body> <font color="red"> Aceasta linie este scrisa cu rosu </font><br> <font face="Times Roman, sans serif"> Linie scrisa cu Times Roman </font><br> <font size="4"> Linie scrisa cu marimea 4 </font><br> <font weight="400"> Linie scrisa cu grosimea 400 </font><br> </body></html>

Blocuri de text. Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorului <div> .... </div> (division). Div are multiple atribute, intre care atributul align determina alinierea textului din cadrul blocului. Valorile posibile pentru align sunt : Align="left" Align="right" Align="center" Observatie : Blocul div permite existenta altor blocuri div in interiorul sau. Blocul <p>...</p> ; paragraf ; si acesta permite atributul align cu aceleasi 3 valori, dar spre deosebire de div, toate browserele introduc un spatiu inainte si dupa blocul paragrafului. Blocuri de titlu. Intr-un text sunt necesare titluri de capitole, subcapitole, paragrafe s.a.m.d. Acestea pot fi introduse cu ajutorul urmatoarelor etichete : <h1>, <h2>, <h3>, ... <h6> ; (header). <h1>......</h1> Si aceste blocuri accepta align, <h1> permite scrierea cu caracterele cele mai mari si cele mai groase, iar <h6> cu cele mai mici si mai subtiri. Trasarea liniilor. Html permite trasarea liniilor orizontale cu ajutorul etichetei <hr> (horizontal row) care are intre atribute align pentru aliniere, widht care permite alegerea lungimii liniei cu valori posibile numere intregi reprezentand lungimea absoluta a liniei data in pixeli sau numere intregi in intervalul 1-100 urmate de semnul % reprezentand lungimea in procente relativ la dimensiunea blocului in care se afla linia. Alt atribut este size reprezentand grosimea liniei, cu valori numere intregi. Daca lipseste, size="2", adica 2 pixeli. Atributul noshade care atunci cand este prezent defineste o linie fara umbra. Blocul <center>......</center>, care determina centrarea tuturor elementelor cuprinse in interiorul sau.

<title> Exemplu 2 </title> </head> <body> <h2> sucesiune de linii centrate </h2> <center> <hr width="10%"> <hr width="40%"> <hr width="70%"> <hr width="100%"> <hr width="70%"> <hr width="40%"> <hr width="10%"> </body> </html>

Exemplu : <html> <head>

Liste. HTML permite inserarea intr-o pagina web a listelor, pune la dispozitie liste neordonate, sunt introduse intre delimitatorii <ul> ............... </ul> (unordered list). Un element in cadrul unei liste este introdus prin eticheta <li> ; list item. Ambele etichete ul si li au atributul type ce defineste simbolul de inceput al listei. Valoarea lui type poate fi : Circle reprezentand un cerc gol Disk reprezentand un cerc plin (valoare predefinita) Square reprezentand un patrat Type="Circle"

Exemplu : <html> <head>

<title> Exemplu 3 </title> </head> <body> <h2> Lista neordonata </h2> <ul> Pentru a cunoaste internetul trebuie sa studiati <li> HTML <li> CSS <li> PHP </ul> </body> </html>

Liste ordonate. Sunt cuprinse in interiorul etichetelor <ol> ... </ol> Ordered list Si in acest caz un element al listei este introdus prin eticheta li. Tipul marcajului ce insoteste intrarile in lista este precizat de atributul type, care poate avea valorile : Type="A"; lista este data in ordine alfabetica cu majuscule Type="a"; lista este data in ordine alfabetica cu litere mici Type="I"; lista este data in ordinea sistemului de numeratie roman Type="i"; lista este data in ordinea sistemului de numeratie roman, cu litere mici Type="1"; valoare predefinita, ordinea sistemului de numeratie arab.

Exemplu : <html> <head>

<title> Exemplu 4 </title> </head> <body> <h2> Lista ordonata </h2> <ol type="I"> Pentru a realiza o pagina web trebuie : <li> creat un fisier in limbajul HTML <li> salvat fisierul cu extensia .html <li> incarcat fisierul in browser </ol> </body> </html>

Lista de definitii. O lista de definitii este introdusa intr-un document .html prin eticheta <dl> ... </dl> Definition list Un termen al listei este initiat de eticheta <dt> ; definition term ; iar definitia unui termen este initiata de eticheta <dd> ; definition description. Definitia unui termen incepe intotdeauna pe o linie noua. Exemplu : <html> <head>

<title> Exemplu 5 </title> </head> <body> <h2> Lista de definitii </h2> <dl> dictionar de termeni internet <dt> Browser <dd> aplicatie ce ruleaza pe calculatorul client <dt> Server <dd> aplicatie ce ruleaza continuu pe calculatorul central </dl> </body></html>

O structura foarte importanta pentru o aplicatie web este structura tabelara. Tabelele ne permit sa cream o retea dretpunghiulara de domenii, fiecare domeniu avand proprietatile de culoare pentru font si text, aliniere s.a.m.d. Un tabel este introdus intr-o pagina web prin intermediul etichetei <table> ... </table> Tabelul este format din linii, o linie fiind introdusa prin eticheta <tr> ; table row Iar in cadrul unei linii avem mai multe elemente ce contin date, cunoscute sub numele de celule <td> ; table data In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tabel folosim atributul border atasat etichetei table. Atributul border are valori numere intregi pozitive, inclusiv 0, reprezentand grosimea in pixeli a liniei ce deseneaza chenarul. Border="2" Exemplu : <html> <head>

<title> Exemplu 6 </title> </head> <body> <h2> Tabel cu chenar </h2> <table border="5"> <tr><td>celula 11 <td> celula 12 <td> celula 13 <tr><td>celula 21 <td> celula 22 <td> celula 23 </table> </body> </html>

Eticheta table are la randul sau atributul align, cu valorile left, right si center, determinand alinierea la stanga, la dreapta si centrat a tabelului in pagina. Align="left" Definirea culorilor pentru un tabel. HTML permite definirea culorilor de font la nivelul intregului tabel prin eticheta bgcolor atasata etichetei table la nivelul liniei prin acelasi atribut prin eticheta tr dar la nivelul coloanei atasat etichetei td. Importanta cea mai mare o are culoarea celulei, apoi a liniei si apoi a intregului tabel. Exemplu : <html> <head> <title> Exemplu 7 </title> </head> <body> <h2> Tabel colorat</h2> <table border="3" bgcolor="yellow"> <tr><td>galben <td bgcolor="green"> verde <tr bgcolor="red"> <td>rosu <td bgcolor="blue"> albastru </table> </body> </html>

Curs nr.2 19/11/2010 Fisierul imagine trebuie sa fie situat in acelasi folder cu fisierul .htm
Exemplu8.htm :

<html> <head> <title> Exemplu 8 </title> </head> <body> <h1> Inserarea unei imagini intr-o pagina web</h1> <img src ="imagine.jpg" border="5"> </body> </html>

10

Cum sa facem o imagine care sa se raspandeasca pe tot fundalul paginii :


Exemplu9.htm :

<html> <head> <title> Exemplu 9 </title> </head> <body background ="imagine.jpg"> <h1> Pagina cu imagine de fond </h1> </body> </html>

11

Pagina cu legaturi. Intr-o pagina web putem introduce legaturi catre alte pagini sau resurse din internet. Legaturile se fac prin intermediul etichetei <a> (anchor) ... </a>. Aceasta eticheta are atributul href, care va introduce pagina ce inlocuieste pagina curenta.
Pagina1.htm :

<html> <head> <title> Pagina 1 </title> </head> <body > <h1> Prima pagina </h1> <a href ="pagina2.html"> legatura catre pagina 2 </a> </body> </html>

<html> <head> <title> Pagina 2 </title> </head> <body > <h1> Prima pagina </h1> <a href ="pagina1.html"> legatura catre pagina 1 </a> </body> </html>

Pagina2.htm :

12

Pagina3.htm : <html> <head> <title> Pagina 3 </title> </head> <body > <h1> Pagina 3 </h1> <a href ="http://www.studiieconomice.com" target="blank"> Cursuri, referate </a> </body> </html>

14.1.2011 Formulare Interactivitatea paginilor web Interactivitatea unei pagini web reprezinta posibilitatea ca un client sau utilizator sa comunice cu un server astfel incat sa obtina informatia de care are nevoie. Limbajul html fiind o forma particulara de realizare a hipertextului, ofera posibilitatea navigarii intre diverse surse de informatii aflate in internet prin intermediul legaturilor. Pe langa legaturi, HTML pune la dispozitie formularele. Un formular reprezinta un ansamblu de zone active alcatuit din butoane de apasat, casete de selectie, campuri de editare s.a.m.d. O sesiune de lucru cu o pagina web ce cuprinde un formular are urmatorii pasi : 1. utilizatorul completeaza formularul si il expediaza unui server 2. o aplicatie dedicata de pe server analizeaza formularul completat si stocheaza eventual date in baza de date 3. serverul expediaza un raspuns utilizatorului Un formular este inclus intr-o pagina web in interiorul blocului : <form> </form> Observatie : actiunea cea mai simpla pe care o putem face cu un formular este trimiterea unui e-mail cu datele formularului. Pentru aceasta avem nevoie de un server de e-mail. Observatie : intr-o pagina web putem avea oricate formulare, dar acestea nu pot fi incluse unul in altul. Elementul <form> are doua atribute esentiale : 1. atributul action, care precizeaza ce se va intampla cu datele formularului in momentul in care acestea ajung la destinatie. De regula, valoarea atributului action este un URL ce contine adresa unei aplicatii de pe server ce prelucreaza formularul. Aplicatia de pe server poate fi scrisa PHP, Java, C#, Perl s.a. Cea mai simpla prelucrare este transmiterea unui e-mail, caz in care valoarea lui action este : action = "mailto:student@yahoo.com"

13

2. Al doilea atribut este method, care precizeaza metoda utilizata de browser pentru expedierea datelor formularului. Cele mai frecvente valori sunt : method = "get" care este si valoarea implicita. In acest caz, datele din formular sunt adaugate la adresa URL precizata de atributul action. La adresa URL se va adauga un ? si apoi perechi de forma : nume=valoare &, perechile fiind separate prin atributul &. Ex. www.yahoo.com/index.php? user=ion&pass=123 A doua valoare pentru method este "post". In acest caz datele sunt expediate separat. Daca in cazul lui "get" puteam trimite maxim 1 KB de date, in cazul lui "post" putem trimite cantitati mari de date, de ordinul MB. Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul elementului, <input> foloseste atributul type. Daca dorim ca intr-un formular sa introducem un camp de editare, atributul type va primi valoarea : type="text" Alte atribute esentiale ale lui <input> sunt : Name, care da nume elementului formularului, il regasim in URL, si value, care va da valoarea elementului formularului, pe care il putem regasi deasemenea in URL. Un buton de expediere al unui formular se introduce tot prin <input>, dar in acest caz type va avea valoarea : type="submit". Daca nu se precizeaza valoarea elementului, pe buton va fi scris "Submit Query". Valoarea precizata de utilizator va fi inscrisa ca eticheta a formularului. Exemplu. <html> <head>

<title> Exemplu 10 </title> </head> <body> <h1> Formular cu camp de editare si buton de expediere</h1> <form action="mailto:student@yahoo.com" method="post"> Numele : <input type="text" name ="Numele" value = "Numele si prenumele"><br> <input type="submit" value="expediaza"> </form> </body> </html>

14

Rezultatul va fi un email pe care il vom primi : Numele = Ion Popescu In plus, daca valoarea atributului type este type="text", <input> mai admite si urmatoarele atribute : Atributul size, specifica latimea campului de editare, daca textul introdus in campul de editare depaseste lungimea campului, atunci se va produce o defilare a acestuia spre stanga. Atributul maxlenght, care specifica numarul maxim de caractere care pot fi introduse intr-un element text. Caracterele introduse peste numarul maxim vor fi ignorate. In cazul in care intr-un formular introducem un element in care atributul type are valoarea reset, type="reset", in pagina se va insera un buton care prin apasare determina modificarea elementelor formularului la valorile predefinite. Intr-un formular putem introduce de asemenea elemente de tip parola : In acest caz, atributul type va avea valoarea : type="password" Intr-un camp de tip parola, caracterele tiparite nu vor fi afisate in valoarea lor reala, ci prin asteriscuri (*). Exemplu. <html> <head>

<title> Exemplu 11 </title> </head> <body> <h1> Formular cu camp parola si buton de resetare</h1> <form action="mailto:student@yahoo.com" method="post"> Numele : <input type="text" name ="Numele" value = "Numele"><br> Prenumele : <input type="text" name ="Prenumele" value = "Prenumele"><br> Parola : <input type="password" name ="Parola"><br> <input type="reset" value = "Sterge"><br> <input type="submit" value="expediaza"> </form> </body> </html>

15

Radiobutoane. Butoanele radio permit alegerea la un moment dat alegerea unei singure variante dintre mai multe posibile. Un element input ce defineste un radiobuton are atributul type="radio". Observatie : Pentru a obtine efectul de radiobuton, adica doar o valoare selectata dintr-o lista de valori, toate elementele listei vor apartine aceleiasi familii, adica vor avea acelasi nume. In plus, in acest caz, elementul input poate avea atributul checked, determinand selectarea predefinita a unui radiobuton. Exemplu. <html> <head>

<title> Exemplu 12</title> </head> <body> <h1> Formular cu radio butoane</h1> <form action="mailto:student@yahoo.com" method="post"> Alegeti sexul: <br> Barbatesc <input type="radio" name ="sex" value = "b"> Femeiesc <input type="radio" name ="sex" value = "f"><br> <input type="submit"> </form> </body> </html>

Casete de valitare sau Checkbox. O caseta de validare permite selectarea sau deselectarea unei optiuni. Pentru a introduce un element ce contine o caseta de validare, atributul type trebuie sa aiba valoarea : type = "checkbox" Si in acest caz avem atributul checked, care atunci cand este prezent permite selectarea predefinita a unei optiuni. In acest caz putem avea selectat predefinit mai multe optiuni dintr-o familie.

16

<title> Exemplu 13 </title> </head> <body> <h1> Formular cu casete de validare</h1> <form action="mailto:student@yahoo.com" method="post"> Alegeti meniul: <br> Pizza <input type="checkbox" name ="pizza" value = "o portie"> Nectar <input type="checkbox" name ="nectar" value = "un pahar"> Cafea <input type="checkbox" name ="cafea" value = "o ceasca"><br> <input type="submit"> </form> </body> </html>

Exemplu. <html> <head>

Casete de fisiere. Pentru a introduce un element care sa contina posibilitatea selectarii unui fisier care apoi este transmis formularului pentru ca apoi sa fie expediat impreuna cu acesat, vom folosi un element input in care atributul type="file". Pentru acest tip de element, atributul name permite atasarea unui nume, value va avea ca valoare adresa URL a fisierului ce urmeaza a fi incarcat impreuna cu formularul, value putand fi tastat intr-o caseta text sau ales dintr-o fereastra de selectie prin apasarea butonului browse. Un al treilea atribut este enctype, care precizeaza metoda utilizata la criptarea fisierului de expediat. Valoarea acestui atribut trebuie sa fie obligatoriu "multipart/form-data". Liste de selectie. O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o lista finita. O lista de selectie se introduce in formular prin intermediul etichetei : <select> </select> Lista de selectie are urmatoarele atribute : Name, care atasaza listei un nume. Size, care precizeaza printr-un intreg pozitiv cate elemente din lista vor fi vizibile la un moment dat pe ecran, celelalte elemente devenind vizibile prin actionarea unor bare de defilare.

17

Elementele listei sunt incluse in lista prin atributul <option>. Acesta contine value, care primeste ca valoare un text, respectiv selected, fara alte valori, ce permite selectarea predefinita a unui element al listei. Exemplu. <html> <head>

<title> Exemplu 14 </title> </head> <body> <h1> Formular cu lista de selectie</h1> <form action="mailto:student@yahoo.com" method="post"> Universitatea absolvita : <br> <select name="universitate" size="3"> <option value="B"> Universitatea din Bucuresti <option value="CJ"> Universitatea din Cluj <option value="TM"> Universitatea din Timisoara <option value="IS"> Universitatea din Iasi </select><br> <input type="submit"> </form> </body> </html>

Campuri de editare multilinie. Un camp de editare multilinie este introdus in formular prin intermediul etichetei <textarea>. Pentru a particulariza un camp de editare multilinie se folosesc urmatoarele atribute : - cols, specifica numarul de caractere afisate intr-o linie - rows, specifica numarul de linii afisate simultan - wrap, care permite definirea comportamentului campului fata de sfarsitul de linie. Acest atribut poate primi urmatoarele valori : "off" insemnand ca cuvintele sunt intrerupte la marginea dreapta a editorului numai atunci cand doreste utilizatorul, caracterul de sfarsit de linie este inclus in textul transmis serverului odata cu formularul ; "hard", intreruperea cuvintelor se produce la marginea dreapta a formularului, caracterul de sfarsit de linie este inclus in textul transmis serverului odata cu formularul ; "soft", in acest caz se produce intreruperea cuvintelor la marginea dreapta a editorului, iar caracterul de sfarsit de linie nu se include in textul transmis serverului odata cu formularul

18

Exemplu. <html> <head> <title> Exemplu 15 </title> </head> <body> <h1> Formular complex</h1> <center><table bgcolor="yellow"> <form action="mailto:student@yahoo.com" method="post"> <caption align="top">MENIU</caption> <tr align ="left"><th>Numele :<td><input type="text" name="numele"> <tr align ="left"><th>Prenumele :<td><input type="text" name="prenumele"> <tr align ="left"><th>Telefonul :<td><input type="text" name="Telefonul"> <tr align ="left"><th>Alegeti pizza :<td><input type="checkbox" name="ciuperci">cu ciuperci <input type="checkbox" name="mexicana">mexicana <input type="checkbox" name="europeana">europeana <tr align ="left"><th>Alegeti sucul :<td><input type="checkbox" name="fanta">fanta <input type="checkbox" name="nectar">nectar <tr align ="left"><th>Alegeti plata : <td><ul style="background-color:lightblue;"> <li><input type="radio" name="plata">cash <li><input type="radio" name="plata">card <tr align ="left"><th>Comentarii : <td> <textarea name="comentarii" rols="30" rows="5" wrap="off">Inserati aici parerile</textarea> <tr align ="left" valign="top"><td><input type="reset" value="sterge"><td><input type="submit" value="expediaza"> </form></table></center> </body> </html>

19

Cadre. Pana in acest moment, in fereastra browserului era incarcat un singur document HTML. Cadrele ne permit sa definim in fereastra browserului subferestre in care sa fie incarcate documente HTML diferite. Cadrele sunt definite in fisiere HTML speciale in care blocul <body> este inlocuit de blocul : <frameset> </frameset> In interiorul acestui bloc fiecare cadru este introdus prin eticheta <frame> Un element esential al etichetei <frame> este src, ce primeste ca valoare adresa URL a documentului HTML ce va fi incarcat in acel frame. Definirea cadrelor se face din aproape in aproape prin impartirea ferestrelor si a subferestrelor in linii si coloane. Impartirea unei ferestre intr-un numar de subferestre de tip coloana se face cu atributul cols. Impartirea unei ferestre intr-un numar de subferestre de tip linie se face cu atributul rows. Valoarea acestor atribute este o lista de elemente pentru fiecare subfereastra cate un element, separate prin virgula, ce descriu modul in care se face impartirea. Elementele listei pot fi : - un numar intreg, urmat de unitatea de masura - un numar intreg, urmat de semnul procent % - numarul in intervalul 1-100, respectiv n* determinand impartirea ferestrei in n subferestre de dimensiune egala

22.1.2011 Curs nr.4 Exemplu. <html> <head>

<title> Exemplu 16 </title> </head> <frameset cols="20%,*"> <frame src="p1.html"> <frameset rows = *,*> <frame src="p2.html"> <frame src="p3.html"> </frameset> </frameset> </frameset> </html>

20

Fisierele p1.html, p2.html si p3.html au fost create anterior si salvate in directorul curent al aplicatiei. Ele vor fi introduse in cadrul al caror atribute sunt. Pagina va fi impartita astfel : Initial in doua coloane, prima coloana ocupand 20% din spatiu in care incarcam fisierul p1.html, cea de a doua coloana ocupa intreg spatiul ramas, la randul sau constituind un frameset care va fi impartit pe linii in doua zone de dimensiune egala. Putem stabili culori pentru chenarul unui cadru, utlilizand pentru aceasta atributul bordercolor. Atributul poate fi atasat tuturor cadrelor prin eticheta frameset sau unui singur cadru prin eticheta frame. De asemenea putem stabili dimensiunea cadrelor prin eticheta border. Toate cadrele au aceeasi dimensiune. De aceea border se aplica numai etichetei frameset. Implicit valoarea lui border este 5, adica 5 pixeli. Daca valoarea ar fi 0, atunci am obtine un cadru fara chenar. In mod prestabilit, chenarul unui cadru este vizibil si are un aspect tridimensional. Afisarea chenarului poate fi dezactivata daca utilizam atributul frameborder cu valoarea ="no". Atributul poate fi folosit atat pentru frameset cat si pentru frame. Frame poate avea si atributul scrolling, utilizat pentru a adauga unui cadru bare de defilare. Valorile posibile ale lui scrolling sunt : ="yes". Barele de defilare sunt adaugate intotdeauna. ="no". Barele de defilare nu sunt adaugate vreodata ="auto". Adaugate doar atunci cand este nevoie. Stiluri. Stilurile pun la dispozitia autorilor de site-uri posibilitati de personalizare a paginilor web. Un stil reprezinta un mod de a scrie un bloc de text, adica posibilitati de setare a fontului, a marimii, a culorii, alinierii, distantei fata de margine si asa mai departe. Vom utiliza pentru definirea stilului sintaxa CSS (cascading style sheet).

21

Sintaxa CSS este sintaxa predefinita de utilizare a stilurilor, dar este bine sa informam browserul asupra sintaxei folosite printr-o metainformatie : <meta http-equiv = "content-style-type" Content="text/css"> , metainformatie ce va fi plasata in blocul <head>. Definirea stilului presupune doua etape : - Definirea propriuzisa a sa - Specificarea domeniului in care se va utiliza acest stil. Stiluri dedicate. Se aplica numai blocurilor pentru care au fost definite. Inserarea unui stil se face intr-un bloc <style> ... </style>, iar blocurile definite se numesc reguli. O regula este formata dintr-un selector si o descriere. Selectorul specifica domeniul de utilizare a stilului iar descrierea defineste stilul utilizat. Descrierea stilului este facuta intre acolade. Stilul este definit prin intermediul perechilor atribut:valoare si sunt separate prin ;. Presupunem ca dorim ca intr-o pagina web toate titlurile de marime 1 sa fie de culoare rosie si centrate. Exemplu. <html> <head>

h1{text-align:center ; color:red;} </style> </head><body> <h1>acest header este rosu si centrat </h1> <h2>header cu stil predefinit </h2> </html>

<style>

<title> Exemplu 17 </title>

Daca dorim ca un selector sa fie aplicate la mai multe stiluri vom preciza separate prin virgula lista acestora.

22

Clase de stiluri. Permit definirea unui stil general si folosirea lui oriunde este necesar. Definirea clasei de stiluri se face tot in blocul style iar apelul clasei de stiluri folosit se face prin intermediul atributului class, atribut de este disponibil tuturor elementelor HTML. Exemplu. <html> <head>

all.rc{text-align:center ; color:red;} </style> </head><body> <h1>acesta este un header cu stil predefinit </h1> <h1 class=rc>Acesta este un header cu stil definit intr-o clasa</ h1> <h2>header cu stil predefinit </h2> </html>

<style>

<title> Exemplu 18 </title>

Observatie: All se refera la faptul ca stilul poate fi utilizat de orice element HTML. Putem restrictiona acest lucru prin specificarea numelui elementului (ex. h1.rc inseamna ca stilul se aplica doar elementelor h1). Stiluri identificate. Toate elementele unui document admit atributul id. Acesta are rolul de a identifica in mod unic un element in cadrul unui document. Atributul id poate identifica stilul utilizat de un anumit element. Un stil identificat definit in blocul style va avea primul caracter #. Exemplu. <html> <head>

#ROSU{text-align:center ; color:red;} </style> </head><body> <h1>acesta este un header cu stil predefinit </h1> <h1 id=ROSU>Acesta este un header cu stil definit intr-o clasa</ h1> <h2>header cu stil predefinit </h2> </html>

<style>

<title> Exemplu 19 </title>

23

Pentru a exprima valoarea unui atribut se pot utiliza diferite unitati de masura. Cele mai raspandite sunt : - Pt, puncte tipografice - Px, pixeli - In, inch - Mm - Cm Relatia intre aceste unitati de masura este urmatoarea : 1 inch = 72 pt = 2,54 cm Marimea unui font este stabilita prin atributul font-size si poate fi exprimata in 4 moduri : - Prin valoarea absolut : font-size= xx-small, x-small, small, medium, large, x-large,xx-large - Prin marimi relative : larger, smaller - Un numar intreg urmat de unitatea de masura - Un numar intreg in intervalul 0-100 urmat de semnul %, reprezentand procentul din dimensiunea curenta pentru care aplicam fontul Grosimea fontului este exprimata prin atributul font-weight. Poate avea urmatoarele valori : normal, bold, bolder, lighter. Stilul fontului : font-style= normal, italic, oblique Variantele fontului sunt date prin intermediul atributului font-variant= normal, small-caps. Avem un atribut unic, font, prin intermediul caruia pot fi stabilite simultan toate valorile posibile ale fontului. Ordinea este font-style, font-variant, font-weight, font-size, font-family. Exemplu. <html> <head>

p {font:italic bolder 20pt "times new roman", serif;} h2 {font:bold 20px "new century schoolbook",serif;} </style> </head><body> <p>paragraf scris cu stil definit prin atributul font </p> <h2>bloc header cu stil definit </h2> </html>

<style>

<title> Exemplu 20 </title>

24

Observatie : Pentru fiecare dintre cele doua stiluri definite, la atributul font-family am folosit o lista de valori, deoarece este posibil ca pe calculatorul client sa nu avem instalate toate fonturile. Fontul al carui nume este format din mai multe cuvinte a fost scris intre perechi de ghilimele. Configurarea blocurilor de text. Un bloc de text este format din : - Continut - Distanta dintre continut si chenar - Chenar - Margini

Toate aceste atribute au valori cuprinse in intervalul 0-100 urmate de semnul % sau valori intregi urmate de unitatea de masura. Sintaxa css pune la dispozitie un atribut unic border, ce cuprinde toate valorile separate prin spatiu.

25