invata bazele HTML

vol. 1

WEB DESIGN
DE LA 0 LA EXPERT

pagini contine ghidul care te va invata bazele HTML.

50

Florin Matei
2014

Acest ghid pentru HTML il puteti citi si utiliza pentru a invata elementele de baza. Nu am pus accent pe HTML5 si pe tagurile aferente, deoarece este nevoie sa intelegi baza. Aceasta serie contine mai multe volume de ghiduri, asadar cititi-le pe toate, pentru a invata tot ce este nevoie pentru a deveni un web designer complet.

Florin Matei Bucuresti, Romania [email protected] www.florinmatei.com

CUPRINS
1. Ce este HTML?
1.1. Introducere in HTML 1.2. Editor HTML 1.3. Utilizarea Notepad++

2. Structura HTML 3. Elemente HTML

3.1. Stiluri pentru blocuri de text 3.2. Etichete 3.3. Blocuri de titlu: Heading 3.4. Blocuri div 3.5. Imagini 3.6. Tabele 3.7. Ancore: Links 3.8. Liste 3.9. Formulare

CAPITOLUL 1
Ce este HTML?

PAGINA 5

1.1. INTRODUCERE IN HTML

Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup Language), care descrie formatul primar in care documentele sunt distribuite si vazute pe Internet. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatarii si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si Web. Primele specificatiile de baza ale Web-ului au fost HTML, HTTP si URL. HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe intre ei informatie utilizand Internetul. Erau prin urmare necesare cateva trasaturi: independenta de platforma, posibilitati hypertext si structurarea documentelor. Independenta de platforma inseamna ca un document poate fi afisat in mod asemanator de computere diferite (deci cu fonturi, grafica si culori diferite), lucru vital pentru o audienta atat de variata. Hypertext inseamna ca orice cuvant, fraza, imagine sau alt element al documentului vazut de un utilizator (client) poate face referinta la un alt document, ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul, precum si interogarea unor baze de date formate din aceste documente. HTML este un limbaj independent de platforma pe care ruleaza, adica nu se schimba de la un calculator la altul sau de la un program la altul. Cele mai des utilizate editoare HTML sunt Notepad++ pentru Windows si Pico pentru Linux. Pagina principala trebuie denumita index.html sau home.html, majoritatea serverelor fiind setate sa recunoasca pagina principala dupa aceasta denumire. In cazul in care index.html nu functioneaza ca pagina principala, contactati persoana care se ocupa de administrarea server-ulului si intrebati-l ce nume are server setat pentru a recunoaste pagina de index sau pagina principala.

PAGINA 6

1.2. EDITOR HTML

Acest ghid se adreseaza preponderent celor care folosesc sistemul de operare Windows, fiindca mare parte a utilizatorilor sistemului de operare Linux deja detin un bagaj de cunostinte in utilizarea calculatorului si al limbajelor de programare superior celor care utilizeaza Windows. Nu este o discriminare, dar utilizarea Linux pe calculator necesita o oarecare experienta. Ghidul complet al coderului HTML-CSS te va invata cum sa iti scrii propriile pagini web in limbaj HTML si CSS. Invatand HTML vei avea mai mult control asupra aspectului paginii tale web si vei descoperi cai mult mai usoare pentru a imbunatati pe cat mai mult posibil aspectul paginii tale web. Motivul pentru care vom utiliza de-a lungul intregului ghid solutia software Notepad++ este simpla: efectiv inveti sa codezi. Degeaba utilizezi softuri care iti adauga diverse taguri HTML, daca nu le intelegi semnificatia. Deasemenea, odata aparuta o greseala, o poti rezolva mai rapid, stiind exact unde trebuie sa cauti pentru a repara eroarea. Ce e scris de mana ta ramane intiparit mult mai bine in minte decat daca ai utiliza un soft care sa faca 50% din treaba, dar sa nu stii unde a gresit. Iar remedierea lor dureaza.

PAGINA 7

1.3. UTILIZAREA NOTEPAD++

Nu vom detalia in acest ghid cum sa instalezi un soft. Il puteto downloada gratuit de la adresa http://notepad-plus-plus.org/download/v6.5.3.html Dupa ca ai instalat notepad++, e timpul sa inveti cateva shourcut-uri (prescurtari) pentru a-ti usura lucrul cu acest program. Functia Salveaza Salveaza ca.. Cautare Inlocuire Inchide pagina Comutare foaie de lucru Selecteaza tot Taie Lipeste Copiaza Deschide Fisier nou Sari la randul.. Combinatii tastatura CTRL + S CTRL + SHIFT + S CTRL + F CTRL + H CTRL + W CTRL + TAB CTRL + A CTRL + X CTRL + V CTRL + C CTRL + O CTRL + N CTRL + G

PAGINA 8

Salvare (Save) : CTR+S

Functia de salvare va inlocui actualul fisier. Odata salvat, intregul fisier se va rescrie. Daca nu lucrezi pe o pagina deja salvata, iti va aparea fereastra din imaginea de mai jos. Pentru a salva HTML sau orice alta extensie, trebuie doar sa selectezi la Save as type optiunea All types(*.*) si desigur sa alegi destinatia unde va fi salvat acesta.

PAGINA 9

Salvare ca (Save as) : CTRL + ALT + S

Este utila aceasta functie pentru proiecte cu mai multe pagini, cand trebuie sa realizezi o pagina cu foarte multe elemente identice. Dand Save as, poti salva sub alta denumire pagina pe care tocmai ai modificat-o. Nu mai trebuie sa selectezi Save as type optiunea All types(*.*), extensia .html fiind deja preselectata. Aceasta functie are prefedinit la Save as extensia avuta initial a fisierului modificat.

PAGINA 10

Cautare (Find) : CTRL + F

Cand ai in pagina cateva zeci sau chiar sute de randuri, pentru a gasisetul de caractere care te intereseaza. In exemplul dat am cautat h1. Daca vrei o lista cu toate randurile care contin h1, asa cum reiese din exemplu, poti fie sa cauti doar in fisierul current (Find All in Current Document), fie in toate fisierele deschise (Find All in All Opened Documents).

PAGINA 11

Inlocuire (Replace) : CTRL + H

Cand vrei inlocuiesti un text sau un tag completezi ce cauti si cu ce vrei sa inlocuiesti. In exemplul evidentiat vrem sa inlocuim h1 cu h2. Poti da Find Next pentru a te duce la urmatoarele h1, dand Replace doar la care vrei sau poti da Replace All penru a le inlocui pe toate.

CAPITOLUL 2
STRUCTURA HTML

PAGINA 13

2. STRUCTURA HTML
Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Aceste chestiise numesc in literatura de specialitate TAG-uri. Prin conventie, toate informatiile HTML incep cuo paranteza unghiulara deschisa < si se termina cu o paranteza unghiulara inchisa > . Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis. Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni: sectiunea de antet <head>...</head> corpul documentului <body>...</body> Blocul <body>...</body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in fereastra browser-ului. O eticheta poate fi scrisa atat cu litere mici, cat si cu litere mari. Adica <HTML> = <HtmL> = <html>. Caracterele spatiu si CR/LF ce apar intre etichete sunt ignorate de catre browser.

<html> <head>...</head> <body>...</body> </html> Asa arata primul tau document HTML. Salveaza-l folosind cele invatate anterior de la aplicatia Notepad++ intr-un fisier nou si sub denumirea index.html. Apoi il deschizi cu Internet Explorer, Google Chrome, Mozilla sau Opera, in functie de ce browser folosesti de regula. Dati OK si ... nimic. Sa nu disperam.. Vom adauga primele elemente la pagina noastra. In primul rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head> a urmatoarei linii: <title> Titlu pagina web</title> In plus, in sectiunea <body>...</body> putem scrie texte cat dorim atata timp cat nu intalnim nici un marcaj < sau >, atunci interpretorul HTML le va lua ca texte simple si le va afisa pe ecran.

PAGINA 14 Sa vedem o noua versiune a paginii noastre:

<html> <head> <title>Prima mea pagina</title> </head> <body> Bine ai venit pe pagina mea HMTL! </body> </html> O codare eficienta presupune aranjarea arborescenta a structurii intregii pagini. Pentru a realiza acele spatieri trebuie doar sa apesi pe tasta TAB. Astfel vei sti intotdeauna in ce sectiune a paginii te afli si vei putea modifica mult mai usor ce ai realizat in cazul in care este necesar. continutul blocului <title>...</title> va aparea in bara de titlu a ferestrei browser-ului. Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferestrei browser-ului va aparea numele fisierului. continutul blocului <body>...</body> va aparea in pagina. Ce regasim in <head>...</head> reprezinta anumite legaturi catre scripturi, stiluri sau detalii referitoare la pagina (autor, limba, cine a creat-o etc), dar si informatii necesare motoarelor de cautare precum Google.

CAPITOLUL 3
ELEMENTE HTML

PAGINA 16

3.1. Stiluri pentru blocuri de text

Pentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intredelimitatorii <strong>...</strong >. Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>...</big>. Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>...</small>. Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>...</i> (i vine de la italic). pentru a insera secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script), aceste fragmente trebuie delimitate de _..., respectiv ^.... pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>...</u> (u vine de la underline ). pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <strike>...</strike> sau <s>...</s>. In exemplul urmator vom utiliza toate etichetele mentionate anterior: <html> <head> <title>Stiluri pentru blocuri de text</title> </head> <body> <strong>Text scris cu caractere ingrosate.</strong><br> <big> Text cu caractere marite cu o unitate <big> mai mare <big> si mai mare <big>si maimare.</big> </big> </big> </big> <br> <small> Textul este scris cu caractere micsorate cu o unitate<small>maimic.</small> </small> <br> <i>Text scris cu caractere italice.</i><br> In aceasta linie^suseste superscript iar _joseste subscirpt.<br> <strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike><br> In aceasta linie urmatorul cuvant este<u>subliniat</u>, iar cuvantul<s>strike</s> sectionat. </body> </html>

PAGINA 17

Blocuri de text. Paragrafe

Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua si permite: inserarea unui spatiu suplimentar inainte de blocul paragraf; inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste delimitatorul </p> (acesta fiind optional);

<html> <head> <title>Blocuri paragraf</title> </head> <body>Prima linie <p> Linie generata de un paragraf (implicit paragraful este aliniat la stanga). </p> </body> </html>

PAGINA 18

3.2. ETICHETE
Pentru a pune in evidenta ( prin stilul cursiv ) fragmente de text se utilizeaza etichetele: <cite>...</cite> ( cite inseamna citat); <em>...</em> (em vine de la emphasize = a evidentia). In locul lor se poate utiliza eticheta echivalenta <i>...</i>. Urmatoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere monospatiate ( de tipul celor folosite de o masina de scris ): <code>...</code> ( code inseamna cod sau sursa);

<html> <head> <title>Blocuri de caractere monospatiate si clipitoare</title> </head> <body> Aceasta linie este formata din text normal. <br> Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code> </body> </html>

PAGINA 19

3.3. BLOCURI DE TITLU. HEADERE.

Intr-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se refera la un bloc de text si trebuie insotite de o eticheta deincheiere similara. Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga (in mod prestabilit), in centru si la dreapta. <h1> permite scrierea unui titlu cu caractere mai mari . <h6> foloseste caracterele cele mai mici. <html> <head> <title> Blocuri de titlu </title> </head> <body> <h1 align=center> Titlu de marime 1 aliniat in centru </h1> <h2 align=right> Titlu de marime 2 aliniat la dreapta. </h2> <h4> Titlu de marime 4 aliniat la stanga (implicit) </h4> </body> </html>

PAGINA 20

3.4. BLOCURI DIV

Modalitatea cea mai eficienta de delimitare si de formatare a unui bloc de text este folosirea delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc <div> ( diviziune ) este align ( aliniere ). Valorile posibile ale acestui parametru sunt: left ( aliniere la stanga ); center ( aliniere centrala ); right ( aliniere la dreapta ). Un bloc <div>...</div> poate include alte subblocuri. In acest caz, alinierea precizata de atributul align al blocului are efect asupra tuturor subblocurilor incluse in blocul <div>; Un bloc <div>...</div> admite atributul nowrap care interzice intreruperea randurilor de catre browser.

<html> <head> <title> Blocul div </title> </head> <body> Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta. <div align=right> O singura linie.O singura linie.O singura linie.O singura linie. <br> O singura linie.O singura linie.O singura linie.O singura linie. <br> O singura linie.O singura linie.O singura linie.O singura linie. <br> </div> <div align=center> Bloc aliniat pe centru.Bloc aliniat pe centru. <br> Bloc aliniat pe centru.Bloc aliniat pe centru. <br> Bloc aliniat pe centru.Bloc aliniat pe centru. <br> </div> </body> </html>

PAGINA 21

3.5. IMAGINI
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentrufisierele imagine sunt: GIF (Graphics Interchange Format) cu extensia .gif; JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; PNG. Cele mai raspandite formate sunt GIF (8biti pentru o culoare, 256 culori posibile) si JPEG (24biti pentru o culoare, 16.7 milioane de culori posibile). Adresa URL a unei imagini URL (Uniform Resourse Locator = identificator unic al resursei) este un standard folosit in identificarea unica a unei resurse in Internet. Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine. Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de laimage=imagine). Pentru a putea fi identifica imaginea care va fi inserata, se utilizeaza un atribut al etichetei <img> si anume src (de la source=sursa). Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia. pagina care contine o imagine : <img src=imagine.gif> imagine cu chenar si de 200 pixeli X 15 % : <img src=imagine.gif border=5 width=350 height=25%>

Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori: left - aliniere la stanga; celelalte componente sunt dispuse pe in partea dreapta <img src=imagine.gif align=left>; right - aliniere la dreapta; celelalte componente sunt dispuse pe in partea stanga <img src=imagine.gif align=right>; top - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea <img src=imagine.gif align=top>; middle - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea <img src=imagine.gif align=middle>; bottom - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului <img src=imagine.gif align=bottom>.

PAGINA 22

3.6. TABELE
Tabelele ne permit sa cream o retea dreptunghiulara de domenii, fiecare domeniu avand propriile optiuni pentru culoarea fondului, culoarea textului, alinierea textului etc. Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din randuri. Pentru a insera un rand intr-un tabel se folosesc etichetele <tr>...</tr> ( de la table row = rand de tabel ). Folosirea etichetei de sfarsit </tr> este optionala. Un rand este format din mai multe celule ce contin date. O celula de date se introduce cu eticheta <td>..</td>

<html> <head> <title>tabelex_1</title> </head> <body> <h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1> <hr> <table> <tr> <td>cell 11</td> <td>cell 11</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> <tr> <td>cell 41</td> <td>cell 42</td> </tr> </table> </body> </html>

PAGINA 23

In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tabel, se utilizeaza un atribut al etichetei <tabel> numit border. Acest atribut poate primi ca valoare orice numar intreg inclusiv 0 si reprezinta grosimea in pixeli a chenarului tabelului. Daca atributulborder nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egala cu 1 pixel, o valoare egala cu 0 pixeli a grosimii semnifica absenta chenarului. Cand atributul border are o valoare nenula chenarul unui tabel are un aspect tridimensional. <html> <head> <title>tabelex_2</title> </head> <body> <h1 align=center>Un tabel simplu cu chenar </h1> <hr> <table border=4> <tr> <td>cell 11</td> <td>cell 11</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> <tr> <td>cell 41</td> <td>cell 42</td> </tr> </table> </body> </html>

PAGINA 24

Alinierea tabelului
Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul align al etichetei <table>, cu urmatoarele valori posibile: left ( valoarea prestabilita ), center si right . Alinierea este importanta pentru textul ce inconjoara tabelul. Astfel : daca tabelul este aliniat stanga (<table align=left>), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta a tabelului. daca tabelul este aliniat dreapta (<table align=right>), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea stanga a tabelului. daca tabelul este aliniat pe centru (<table align=center>), atunci textul care urmeaza dupa punctul de inserare al tabelului va fi afisat pe toata latimea paginii, imediat sub tabel. <html> <head> <title>tabelex_3</title> </head> <body> <h1 align=center>Un tabel aliniat la dreapta</h1> <hr> Text inainte de tabel. Text inaintede tabel. Text inainte de tabel. Text inainte de tabel. <table border align=right> <tr> <td>cell 11</td> <td>cell 11</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> </table> Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. </body> </html>

PAGINA 25

Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu ajutorul atributului bgcolor, care poate fi atasat intregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>. Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. Daca in tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmatoarea: <td>, <tr>, <table> ( cu prioritate cea mai mica ).

<html> <head> <title>tabelex_4</title> </head> <body> <h1 align=center>Un tabel simplu colorat</h1> <hr> <table border=3 bgcolor=green> <tr> <td>verde 11</td> <td bgcolor=red>rosu 11</td> </tr> <tr bgcolor=blue> <td>albastru 21</td> <td bgcolor=yellow>galben 22</td> </tr> <tr bgcolor=cyan> <td>cell 31</td> <td>cell 32</td> </tr> <tr> <td>cell 41</td> <td bgcolor=white>cell 42</td> </tr> </table> </body> </html>

Culoarea textului din fiecare celula se pote stabili cu ajutorul expresiei: <font color=valoare>. . . </font>

PAGINA 26

Dimensionarea celulei unui tabel

Distanta dintre doua celule vecine se defineste cu ajutorul atributului cellspacing al etichetei <table>. Valorile acestui atribut pot fi numere intregi pozitive, inclusiv 0, si reprezinta distanta in pixeli dintre doua celule vecine. Valorea prestabilita a atributului cellspacing este 2. <html> <head> <title>tabelex_5</title> </head> <body> <h1 align=center>Un tabel fara chenar de celule alipite</h1> <hr> <table cellspacing=0> <tr> <td bgcolor=gray>gri 11</td> <td bgcolor=red>rosu 12</td> </tr> <tr bgcolor=blue> <td>albastru 21</td> <td bgcolor=yellow>galben 22</td> </tr> </table> </body> </html> Distanta dintre marginea unei celule si continutul ei poate fi definita cu ajutorul atributului cellpadding al etichetei <table>. Valorile acestui atribut pot fi numere intregi pozitive, si reprezinta distanta in pixeli dintre celule si continutul ei. Valorea prestabilita a atributului cellpadding este 1. <html> <head> <title>tabelex_6</title> </head> <body> <h1 align=center>Un tabel de celule mari</h1> <hr> <table border cellpadding=20> <tr> <td>gri 11</td> <td>rosu 12</td> </tr> <tr> <td>albastru 21</td> <td>galben 22</td> </tr> </table> </body> </html>

PAGINA 27

Dimensionarea unui tabel

Dimensiunile unui tabel - latimea si inaltimea - pot fi stabilite exact prin intermediul a doua atribute, width si height, ale etichetei <table>. Valorile acestor atribute pot fi: numere intregi pozitive reprezentand latimea respectiv inaltimea in pixeli a tabelului; numere intregi intre 1 si 100, urmate de semnul %, reprezentand fractiunea din latimea si inaltimea totala a paginii.

<html> <head> <title>tabelex_7</title> </head> <body> <h1 align=center>Un tabel de de 200 pixeli X 50 %</h1> <hr> <table border width=200 height=50%> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> </table> </body> </html> In exemplul urmator se utilizeaza un truc care permite afisarea intr-o pagina Web a unui text pozitionat in centrul paginii. <html> <head> <title>tabelex_8</title> </head> <body> <h1 align=center>Un text centrat intr-o pagina</h1> <table width=100% height=100%> <tr> <td align=center> <h2>Text centrat. </h2> </td> </tr> </table> </body> </html>

PAGINA 28

Cap de tabel
Un tabel poate avea celule cu semnificatia de cap de tabel. Aceste celule sunt introduse de eticheta <th> ( de la tabel header = cap de tabel ) in loc de <td>. Toate atributele care pot fi atasate etichetei <td> pot fi de asemenea atasate etichetei <th> . Continutul celulelor definite cu <th> este scris cu caractere aldine si centrat.

<html> <head> <title>tabelex_10</title> </head> <body> <h1 align=center>Un tabel cu titlu si cap de tabel</h1> <table border> <caption align=bottom>Preturile masinii <tr> <th>Pret</th> <th>Citroen</th> <th>Jaguar </th> <th>BMW</th> <th>Volvo</th> </tr> <tr> <th>In dolari</th> <td>5000</td> <td>100000</td> <td>50000</td> <td>80000</td> </tr> <tr> <th>In lei</th> <td>2000000</td> <td>2000000000</td> <td>2000000</td> <td>16000000</td> </tr> </table> </body> </html>

PAGINA 29

Alinierea continutului unei celule

Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului align care poate lua valorile left ( la stanga ); center ( centrat , valoarea prestabilita ); right ( la dreapta ); char ( alinierea se face fata de un caracter ). Alinierea pe verticala a continutului unei celule se face cu ajutorul atributului valign care poate lua valorile: baseline ( la baza ); bottom ( jos ); middle ( la mijloc, valoarea prestabilita ); top ( sus ). Aceste atribute pot fi atasate atat etichetei <tr> pentru a defini tuturor elementelor celulelor unui rand, cat si etichetelor <td> si <th> pentru a stabili alinierea textului intr-o singura celula. <html> <head> <title>tabelex_11</title> </head> <body> <h1 align=center>Un tabel avand continutul celulelor aliniate</h1> <table border width=50% height=50%> <tr align=right> <td> Aici</td> <td>alinierea</td> <td>este centru</td> <td>dreapta</td> </tr> <tr> <td align=left>stanga</td> <td align=center>centru</td> <td valign=top>sus</td> <td valign=bottom> jos</td> </tr> <tr align=left> <td>aici</td><td>alinierea</td> <td>este centru</td> <td>stanga(implicita)</td> </tr> </table> </body> </html>

PAGINA 30

Dimensionarea exacta a celulelor unui tabel

Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a doua atribute ale acestor etichete: width pentru latime si height pentru inaltime. Valorile posibile ale acestor atribute sunt: numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a latimii, respectiva inaltimii unei celule; procente din latimea , respectiv inaltimea tabelului.

<html> <head> <title>tabelex_12</title> </head> <body> <h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1> <hr> <table border> <tr> <td width=100 height=150>cell 11</td> <td width=100 height=150>cell 11</td> </tr> <tr> <td width=100 height=150>cell 21</td> <td width=100 height=150>cell 22</td> </tr> </table> </body> </html>

PAGINA 31

Tabele de forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor <td> si <th>, o celula se poate extinde peste celule vecine. Astfel: extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan,a carui valoare determina numarul de celule care se unifica. extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a carui valoare determina numarul de celule care se unifica. Sunt posibile extinderi simultane ale unei celule pe orizontala si pe verticala. In acest caz , in etichetele <td> si <th> vor fi prezente ambele atribute colspan si rowspan.

<html> <head> <title>tabelex_13</title> </head> <body> <h1 align=center>Un tabel simplu cu chenar </h1> <hr> <table border> <tr> <td rowspan=3>cell 11</td> <td>cell 21<br>cell 31</td> <td>cell 12</td> <td colspan=2rowspan=3>cell 13 ,cell 14</td> <td>cell 23, cell 24<br>cell 33, cell 34</td> </tr> <tr> <td>cell 22</td> </tr> <tr> <td>cell 32</td> </tr> <tr> <td>cell 41</td> <td colspan=3>cell 42,cell 43,cell 44</td> </tr> </table> </body> </html>

PAGINA 32

Celule vide ale unui tabel

Daca un tabel are celule vide, atunci aceste celule vor aparea in tabel fara un chenar de delimitare. In scopul de a afisa un chenar pentru celule vide se utilizeaza urmatoarele trucuri: dupa <td> se pune &nbsp; dupa <td> se pune <br>. Caracterul &nbsp; ( no break space ) este de fapt caracterul spatiu. Un spatiu introdus prin intermediul acestui caracter nu va fi ignorat de browser. Daca pui mai multe caractere &nbsp; in pagina, vor fi citite. In schimb, daca pui mai multe spatii, nu va fi citit decat unul singur. <html> <head> <title>tabelex_15</title> </head> <body> <h1 align=center>Un tabel cu celule vide</h1> <hr> <table border> <tr> <td>cell 11</td> <td>cell 12</td> <td>cell 13</td> </tr> <tr> <td>&nbsp;</td> <td></td> </tr> </table> </body> </html>

PAGINA 33

Grupuri de coloane
Blocul <colgroup>. . . </colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt: span determina numarul de coloane dintr-un grup; width determina o latime unica pentru coloanele din grup; align determina un tip unic de aliniere pentru coloanele din grup.

<colgroup span=3 width=100></colgroup> Intr-un bloc <colgroup>, coloanele pot avea configurari diferite daca se utilizeaza elementul <col>, care admite atributele: span identifica acea coloana din grup pentru care se face configurarea. Daca lipseste,atunci coloanele sunt configurate in ordine; width determina o latime pentru coloana identificata prin span; align determina o aliniere pentru coloana identificata prin span.

<html> <head> <title>tabelex_17</title> </head> <body> <h1 align=center>Grupuri de coloane</h1> <hr> <table width=400 cellspacing=10> <colgroup> <col width=100 align=right> <col width=100 align=center> <col width=200align=right> </colgroup> <tr> <td valign=top>Text in prima coloana.</td> <td valign=top>Text in coloana doua.</td> <td valign=top>Text in coloana a treia.</td> </tr> </table> </body> </html>

PAGINA 34

3.7. ANCORE. LINKURI

Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului.

O legatura catre o pagina aflata in acelasi director

O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de la anchor adica ancora). Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit href, care ia valoare numele fisierului HTML aflat in acelasi director. Zona activa care devina sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele <a>...</a>. Prezenta etichtetei de sfarsit </ a> este obligatorie. <html> <head> <title>Comutarea intre pagini</title> </head> <body> <h3>Pagina</h3> <a href=pagina.html>Link catre pagina</a> </body> </html>

O legatura catre un site particular

<html> <head> <title>Link catre site-ul Google</title> </head> <body> <h3>Link catre site-ul Google</h3> <a href=http://www.google.ro>Google Romania</a> </body> </html> Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi. O ancora se defineste de asemenea prin eticheta <a>.

PAGINA 35

Pentru a defini ancora se utilizeaza atributul name care primeste ca valoare un nume atribuit ancorei (de exemplu leg1).Pentru a insera o legatura catre leg1 definita in aceeasi pagina se utilizeaza eticheta <a> avand atributul href de valoare #leg1. Pentru a introduce o legatura catre o ancora definita in alt document (alta pagina) aflat in acelasi director, atributul href primeste o valoare de forma nume_fisier.html#ancora.

<html> <head> <title>Ancore definite in acelasi document si in alt document</title> </head> <body> <h3>Ancore definite in acelasi document si in alt document</h3> <a href=#ancora1>Link catre ancora 1</a><br> <a href=../../legaturi.php#anc>Link catre o ancora din alt document</a><br> 1 <br> .. 24 <br> <a name=ancora1>ancora 1</a> </body> </html>

Ancore definite prin atributul id

Atributul id este un atribut universal ,adica poate fi atasat oricarui element al unei pagini Web. Acest atribut va inlocui complet atributul name, care putea fi atasat numai anumitor elemente. Atributul id primeste ca valoare un nume (de exemplu id1) care identifica in mod unic un element. Atributul id poate fi utilizat pe post de ancora intr-o pagina Web conform sintaxei: <eticheta id = id1> ... </eticheta>.

PAGINA 36

3.8. LISTE
Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set definitii, referinte sau indexuri. Glosarele sunt exemple clasice in acest sens; cuvintele sunt listate in ordine alfabetica, urmate de definitii ale termenilor respectivi. In HTML, intreaga sectiune a unui glosar va fi gestionata printr-o lista de definitii, care este inclusa intr-o pereche de marcaje de lista de definitii : <dl>...</dl> (de la definition list adica lista de definitii).

OBSERVATII
Un termen al listei este initiat de eticheta <dt> (de la definition term = termen definit); Definitia unui termen este initiata de eticheta <dd> (de la definition description = descrierea definitiei); Definitia unui termen incepe pe o linie noua si este indentata;

<html> <head> <title>listex_1</title> </head> <body> <h1 align=center>O lista de definitii</h1> <hr> <dl> Glosar de termeni de World Wide Web <dt><strong>hypertext</strong> <dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document <dt><strong>date</strong> <dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care sunt date cu un anumit inteles sau valoare <dt><strong>informatie</strong> <dd>- sub-setul de date care are efectiv semnificatie si care este util la momentul curent </dl> </body> </html>

PAGINA 37

LISTE NEORDONATE
O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> (ul vine de la unordered list = lista neordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.

<html> <head> <title>listex_2</title> </head> <body> <h1 align=center>O lista neordonata</h1> <hr> Culori uzuale disponibile prin nume <ul> <li>Black</li> <li>White</li> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Yellow</li> <li>Purple</li> <li>Aqua</li> </ul> </body> </html> Tag-urile <ul> si <li> pot avea un atribut type care stabileste caracterul afisat in fata fiecarui element al listei. Valorile posibile al acestui atribut sunt: circle (cerc) disc (disc plin) (valoarea prestabilita); square (patrat) Listele neordonate pot fi utilizate pe mai multe niveluri: <html> <head><title>listex_3</title></head> <body> <ul> <li>Frameset <ul><li>rows</li></ul> </li> <li>Frame <ul> <li>src</li> <li>name</li> </ul> </li> </ul> </body> </html>

PAGINA 38

<html> <head> <title>listex_5</title> </head> <body> <h1 align=center>O lista ordonata cu cifre romane</h1> <hr> <ol type=I> Culori uzuale disponibile prin nume <li>Black</li> <li>White</li> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Yellow</li> <li>Purple</li> <li>Aqua</li> </ol> </body> </html>

Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a secventei de ordonare. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv.

<html> <head> <title>listex_6</title> </head> <body> <h1 align=center>O lista ordonata cu litere mari, incepand de la valoareaC</h1> <hr> <ol type=A start=3> Culori uzuale disponibile prin nume <li>Red</li> <li>Green</li> <li>Blue</li> <li>Yellow</li> <li>Purple</li> <li>Aqua</li> </ol> </body> </html>

PAGINA 39

LISTE ORDONATE
O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> ( ol vine de la ordered list = lista ordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe peun rand noua.

<html> <head> <title>listex_4</title> </head> <body> <h1 align=center>O lista ordonata</h1> <hr> <ol> <li>Black</li> <li>White</li> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Yellow</li> <li>Purple</li> <li>Aqua</li> </ol> </body> </html>

Tag-urile <ol> si <li> pot avea un atribut type care stabileste tipul de caractereutilizate pentru ordonarea listei. Valorile posibile sunt: A pentru ordonare de tipul A , B , C , D etc. ( litere mari ); a pentru ordonare de tipul a , b , c , d etc. ( litere mici ); I pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari ); i pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici ); 1 pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - optiune prestabilita );

PAGINA 40

3.9. FORMULARE
Un formular este un ansamblu de zone active alcatuit din butoane, casete de selectie, campuri de editare etc. Formularele va asigura construirea unor pagini Web care permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului. Formularele pot varia de la o simpla caseta de text, pentru introducerea unui sir de caractere pe post de cheie de cautare-element caracteristic tuturor motoarelor de cautare din Web pana la o structura complexa, cu multiple sectiuni, care ofera facilitati puternice de transmisie a datelor. O sesiune cu o pagina web ce contine un formular cuprinde urmatoarele etape: 1. Utilizatorul completeaza formularul si il expedieaza unui server. 2. O aplicatie dedicata de pe server analizeaza formularul completat si (daca este necesar) stocheaza datele intr-o baza de date. 3. Daca este necesar serverul expedieaza un raspuns utilizatorului. Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> si </form>.

Atribute esentiale ale elementului <form>

1. Atributul action precizeaza ce se va intampla cu datele formularului odata ce acestea ajung la destinatie. De regula, valoarea atributului action este adresa URL a unui script aflat pe un server WWW care primeste datele formularului, efectueaza o prelucrare a lor si expedieaza catre utilizator un raspuns. Exemplu: <form action=http://www.yahoo.com/cgi-bin/nume_fis.cgi> Script-urile pot fi scrise in Perl, C, PHP, Unix shell. 2. Atributul method precizeaza metoda utilizata de browser pentru expedierea datelor formularului. Sunt posibile urmatoarele valori: get(valoarea implicita). In acest caz, datele din formular sunt adaugate la adresa URL precizata de atributul action; - nu sunt permise cantitati mari de date (maxim 1 Kb) - intre adresa URL si date este inserat un ?. Datele sunt adaugate conform sintaxei: nume_camp = valoare_ camp. Intre diferite seturi de date este introdus un &. Exemplu: http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 =valoare2. post. In acest caz datele sunt expediate separat. Sunt permise cantitati mari de date(ordinul MB). Pentru ca un formular sa fie functional, trebuie precizat ce se va intampla cu el dupa completare si expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica(e-mail). Pentru aceasta se foloseste un atribut al etichetei <form> si anume action care primeste ca valoare mailto: concatenat cu o adresa valida de e-mail catre care se va expedia formularul completat.

PAGINA 41

Un formular cu un camp de editare si un buton de expediere

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a precizatipul elementului se foloseste atributul type al etichetei <input>. Pentru un camp de editare, acest atribut primeste valoarea text. Alte atribute pentru un element <input> sunt: atributul name, permite atasarea unui nume fiecarui element al formularului. atributul value, care permite atribuirea unei valori initiale unui element al formularului. Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, in care atributul type este configurat la valoarea submit. Acest element poate primi un nume prin atributul name. Pe buton apare scris Submit Query sau valoarea atributului value, daca aceasta valoare a fost stabilita.

<html> <head> <title>FormEx_1</title> </head> <body> <h1>Un formular cu un camp de editare si un buton de expediere</h1> <hr> <form action=mailto:[email protected] method=post> Numele:<input type=text name=numele value=Numele si prenumele> <br> <input type=submit value=expedieaza> </form> </body> </html> Pentru elementul <input> de tipul camp de editare (type = text), alte doua atribute pot fi utile: atributul size specifica latimea campului de editare depaseste aceasta latime, atunci se executa automat o derulare acestui camp; atributul maxlength specifica numarul maxim de caractere pe care le poate primi un camp de editare; caracterele tastate peste numarul maxim sunt ignorate. Observatii: - daca atributul type lipseste intr-un element <input>, atunci campul respectiv este consideratin mod prestabilit ca fiind de tip text. - formularele cu un singur camp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dupa completarea si apasarea tastei ENTER.

PAGINA 42

Butonul Reset
Daca un element de tip <input> are atributul type configurat la valoarea reset, atunci in formular se introduce un buton pe care scrie Reset. La apasarea acestui buton, toate elementele din formular primesc valorile prestabilite (definita odata cu formularul ), chiar daca aceste valori au fost modificate de utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name si o valoare printr-un atribut value. Un asemenea buton afiseaza textul Reset daca atributul value lipseste, respectiv valoarea acestui atribut in caz contar. <html> <head> <title>formex_2</title> </head> <body> <h1>Un formular cu un buton reset</h1> <hr> <form action=mailto:[email protected] method=post> Introduceti numele: <input type=text name=nume value=Numele> <br> Introduceti prenumele: <input type=text name=prenume value=Prenumele> <br> <input type=reset value=sterge> <input type=submit value=trimite> </form> </body> </html>

PAGINA 43

Camp de editare de tip password

Daca se utilizeaza eticheta <input> avand atributul type configurat la valoarea password, atunci in formular se introduce un element asemanator cu un camp de editare obisnuit (introdus printype=text). Toate atributele unui camp de editare raman valabile. Singura deosebire consta in faptul ca acest camp de editare nu afiseaza caracterele in clar, ci numai caractere * , care ascund de privirile altui utilizator aflat in apropiere valoarea introdusa intr-un asemenea camp.

<html> <head> <title>formex_3</title> </head> <body> <h1>Un formular cu un buton reset</h1> <hr> <form action=mailto:[email protected] method=post> Nume:<input type=text name=nume value=Numele> <br> Prenume:<input type=text name=prenume value=Prenumele> <br> Password:<input type=password name=parola > <br> <input type=reset value=sterge> <input type=submit value=trimite> </form> </body> </html>

PAGINA 44

Butoane radio
Butoanele radio permit alegerea, la un moment dat, aunei singure variante din mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type avand valoarea radio.

<html> <head> <title>formex_4</title> </head> <body> <h1>Un formular cu butoane radio</h1> <hr> <form action=mailto:[email protected] method=post> Alegeti sexul: Masculin:<input type=radio name=sex value=b> <br> Feminin:<input type=radio name=sex value=f> <br> <input type=reset> <input type=submit> </form> </body> </html>

La expedierea formularului se va transmite una dintre perechile sex=b sau sex=f, in functie de alegerea facuta de utilizator.

PAGINA 45

Casete de validare
O caseta de validare (checkbox) permite selectarea sau deselctarea unei optiuni.Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea checkbox. Observatii: - fiecare caseta poate avea un nume definit prin atributul name. fiecare caseta poate avea valoarea prestabilita selectat definita prin atributul checked.

<html> <head> <title>formex_5</title> </head> <body> <h1>Un formular cu casete checkbox</h1> <hr> <form action=mailto:[email protected] method=post> Alegeti meniul: <br> Pizza<input type=checkbox name=pizza value=o portie> Nectar <input type=checkbox name=nectar value=un pahar> Bere<input type=checkbox name=bere value=o sticla> Cafea<input type=checkbox name=cafea value=o ceasca> <br> <input type=reset> <input type=submit> </form> </body> </html>

PAGINA 46

Casete de fisiere
Intr-o pereche name = value a unui formular se poate folosi intregul continut al unui fisier pe postde valoare.Pentru aceasta se insereaza un element <input> intr-un formular, cu atributul <>avand valoareafile (fisier). Atributele pentru un element de tip caseta de fisiere: atributul name permite atasarea unui nume atributul value primeste ca valoare adresa URL a fisierului care va fi expediat o data cu formularul. Aceasta valoare poate fi atribuita direct atributului value, se poate fi tastataintr-un camp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete de tip File Upload sau Choose File care apare la apasareabutonului Browse... din formular; atributul enctype precizeaza metoda utilizata la criptarea fisierului de expediat. Valoarea acestui atribut este multipart/form-data.

<html> <head> <title>formex_6</title> </head> <body> <h1>Un formular cu caseta de fisiere</h1> <hr> <form action=mailto:[email protected] method=post> Alegeti fisierul:<input type=file name=fisier enctype=multipart/form-data> <br> <input type=reset> <input type=submit> </form> </body> </html>

PAGINA 47

Liste de selectie
O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o lista finita. Lista de selectie este inclusa in formular cu ajutorul etichetelor corespondente <select> si </select>. O lista de selectie poate avea urmatoarele atribute: atributul name, care ataseaza listei un nume (utilizat in perechile name=value expediatserverului); atributul size, care precizeaza (printr-un numar intreg pozitiv, valoarea prestabilita fiind 1) cate elemente din lista sunt vizibile la un moment dat pe ecran (celelalte devenind vizibileprin actionarea barei de derulare atasate automat listei). Elementele unei liste de selectie sunt incluse in lista cu ajutorul etichetei <option> atributul value primeste ca valore un text care va fi expediat server-ului in perecheaname=value; daca acest atribut lipseste, atunci catre server va fi expediat textul ceurmeaza dupa <option> ; atributul selected(fara alte valori) permite selectarea prestabilita a unui element al listei.

<html> <head> <title>formex_7</title> </head> <body> <h1>Un formular cu o lista de selectie</h1> <hr> <form action=mailto:[email protected] method=post> Universitatea absolvita: <br> <br> <select name=universitate size=3> <option value=B>Universitatea din Cluj <option value=UNBM selected>Universitatea de Mare <option value=UTT>Universitatea Technica din Timisoara <option value=UTB>Universitatea Technica din Brasov <select> <br> <br> <input type=reset> <input type=submit> </form> </body> </html>

PAGINA 48

Lista de selectie cu selectii multiple

O lista de selectie ce permite selectii multiple se creeaza intocmai ca o lista de selectie obisnuita. In plus, eticheta <select> are un atribut multiple (fara alte valori). Cand formularul este expediat catre server pentru fiecare element selectat al listei care este se insereaza cate o pereche name=value unde name este numele listei. <html> <head> <title>formex_8</title> </head> <body> <h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1> <hr> <form action=mailto:[email protected] method=post> Limbi straine cunoscute: <br> <br> <select name=limbi straine size=5> <option value=e>Engleza <option value=f selected>Franceza <option value=s>Spaniola <option value=i>Italiana <option value=r>Rusa <option value=g>Germana </select> <br> <br> <input type=reset> <input type=submit> </form> </body> </html>

PAGINA 49

Campuri de editare multilinie

Intr-un formular campuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are urmatoarele atribute: atributulcols, care specifica numarul de caractere afisate intr-o linie; atributulrows, care specifica numarul de linii afisate simultan; atributulname, care permite atasarea unui nume campului de editare multilinie; atributulwrap, (de la word wrap=trecerea cuvintelor pe randul urmator, care determina comportamentul campului de editare fata de sfarsitul de linie. Acest atribut poate primi urmatoarele valori: a) off ; in acest caz: - intreruperea cuvintelor la marginea dreapta a editorului se produce numai cand doreste utilizatorul; - caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul; b) hard ; in acest caz: - se produce intreruperea cuvintelor la marginea dreapta a editorului ; - caracterul de sfarsit de linie este inclus in textul transmis serverului o data cu formularul; c) soft ; in acest caz: - se produce intreruperea cuvintelor la marginea dreapta a editorului ; - nu se include caracterul de sfarsit de linie in textul transmis serverului o data cu formularul

<html> <head> <title>formex_9</title> </head> <body> <h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action=mailto:[email protected] method=post> <textarea name=text multilinie cols=30 rows=5 wrap=off> Prima linie din textul initial. A doua linie din textul initial. </textarea> <input type=reset> <input type=submit> </form> </body> </html>

De mult timp imi doresc sa scriu si sa arat si altora cum am descoperit tainele web designului. O meserie frumoasa, care iti va aduce unele din cele mai mari satisfactii cand vezi ca din tastatura ta ies site-uri frumoase. Iar numarul de vizite ale acestora te incurajeaza sa lucrezi cat mai mult. Va urez mult succes in cariera si viata. Florin Matei