Sunteți pe pagina 1din 31

Crearea paginilor Web n limbajul HTML

Primi pasi
1. se porneste un editor de text (Notepad);
2. se salveaza programul (instructiunea "Save As." din meniu File) ntr-un fisier cu
extensia obligatorie .htm;
3. se scrie programul propriu-zis;
4. periodic si la final se salveaza (Save);
5. se testeaza programul prin apelarea lui din codul sursa prin comanda Source din
meniul View;
6. se apeleaza la un administrator de retea pentru inserarea site-ului Internet.
Orice document HTML ncepe cu notatia <html> si se termina cu notatia </html>.
Acestea poarta denumirea, n limbaj de specialitate, "TAG-uri".
Prin conventie, toate informatiile HTML ncep cu o paranteza unghiulara deschisa
"<" si se termina cu o paranteza unghiulara nchisa ">".
ntre 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 n fereastra browser-ului.
O eticheta poate fi scris att cu litere mici, ct si cu litere mari.
Adica <HTML> = <Html> = <html>.

Instructiunile de baza n HTML:
- <html> . </html>
- <title>. </title>;
- <head>...</head>;
- <body>...</body>.
Ex. 1
<html>
<head>...</head>
<body>

</body>
</html>

!Obs. : Titlul unei pagini se obtine inserand n sectiunea <head>...</head> a urmatoarei
linii: <title></title>
Ex.2
<html>
<head>
<title>Pagina web</title>
</head>
<body>
PRIMA MEA PAGIN WEB
</body>
</html>
Ex. 3
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body> Bine ati venit pe pagina mea de Web! </body>
</html>
!Obs.: Continutul blocului <title>...</title> va aparea n bara de titlu a ferestrei
browser-ului.
Pagini web cu text
1. Introducerea unui rnd nou
Daca introducem mai multe linii ntr-o pagina browser-ul va afisa ntr-un singur
rnd, trecerea pe o linie noua facndu-se la o comanda explicita, care trebuie sa apara n
pagina html. Aceasta comanda este marcajul <br> ( de la "line break" - intrerupere de
linie ).
Ex. 4
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Bine ati venit pe <br> pagina mea de Web!
</body>
</html>
2. Introducerea unui text performant (poate fi luat un text predefinit)
Pentru ca browser-ul sa interpreteze corect caracterele "spatiu" , "tab" si alt rnd,
ce apar n cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>.
Ex. 5
<html>
<head>
<title>Text performant</title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre>
</body>
</html>
3. Inserare fundal
O culoare poate fi precizata n doua moduri:
Printr-un nume de culoare. Sunt disponibile cel putin 16 nume de culori: aqua,
black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal,
white si yellow.
Prin constructia "#rrggbb" unde r (red), g (green), sau b (blue) sunt cifre
hexazecimale ti pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e,
E, f, F; se pot defini astfel 65536 de culori.
Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei
<body>.
Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei
<body>, de exemplu: <body bgcolor = culoare>.
Ex. 6
<html>
<head>
<title>culoare de fond </title>
</head>
<body bgcolor="gray">
O pagina Web cu fondul GRI!
</body>
</html>
4. Culoarea textului
Acest lucru se face prin intermediul atributului text al etichetei <body> dupa
sintaxa <body text=culoare>.
Ex. 7
<html>
<head>
<title>culoare textului </title>
</head>
<body text="red">
Un text de culoare rosie.
</body>
</html>
5. Formare text
5.1. Formare caractere
Textul se introduce pur si simplu prin scriere, iar formarea lui (tip fond, marime si
culoare) se realizeaza prin instructiune html:
<font face="stil" size="marime" color="culoare">
Pentru a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile
acestui atribut pot fi:
1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);
+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea
curenta;
-1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de valoarea
curenta. Valoarea implicita este 3.
De asemenea, se poate stabili grosimea caracterelor cu ajutorul atributului weight al
etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700,
800 si 900 (100 pentru fontul cel mai subtire si 900 pentru cel mai gros).
Ex. <font size="+1" face="Comic" weight="100" color="red">Rosu</font>
Alte atribute:
- <b> </b> - Bold
- <i> </i> - Italic
- <u> </u> - Underline
- <strike></strike> - Cuvinte taiate
- <sub></sub> - Indice
- <sup></sup> - Exponent
- <blink></blink> - Blink
- <small></small> - echivalent cu <font size="-1">
- <big></big> - echivalent cu <font size="+1">
5.2. Formare Logica
- <dfn></dfn> - pentru definirea unui cuvant ( Italic )
- <em></em> - pentru accentuarea unui termen ( emphisis - Italic )
- <cite></cite> - citat ( Italic )
- <code></code> - afisare cod ( Font Courier New )
- <kbd></kbd> - informatia tastata ( Font Courier New )
- <samp></samp> - rezultat program ( Font Courier New )
- <strong></strong> - marcare ( Bold )
- <var></var> - valoarea unei variabile ( Italic )
- <blockquote></blockquote> - bloc citat ( indendare ambelele margini )
- <address></address> - informatia adresa ( Italic )
6. Titluri - Headings
Sunt sase niveluri de titluri, numerotate de la 1 la 6, pentru 1 caracterele fiind cele
mai mari. Automat sub titlu apare un rand gol. Sintaxa este:
<hy>Text titlu</hy>
unde y are una din valorile 1..6.
7. Paragrafe
In editarea fisierelor HTML, caracterul CR este ignorat. Pentru trecerea la un nou
paragraf,aceasta nsemnnd un rnd liber si apoi trecerea la cel urmator, se foloseste
eticheta <p>. De obicei textul unui paragraf se include n etichetele perechi, cea de
nchidere nefiind insa obligatorie - este obligatorie n XHTML; la ntlnirea unei etichete
<p>, browserul ntelege faptul ca paragraful precedent s-a ncheiat.
Alinierea implicita este la stnga ( left );
<p>Acesta este al doilea paragraf</p>
la dreapta ( right ) si
<p align=right>Acesta este primul paragraf</p>
alinierea centrata ( center ) trebuie precizate.
<p align=center>Si al treilea</p>
Un text n miscare se poate scrie cu instructiunea pereche html: <marquee>
.</marquee>
Ex. 8
<html>
<head>
<title>Pagina web cu text </title>
</head>
<body bgcolor=blue text=red>
<h1><center><b>
Regiunea de vest a Romaniei <br>
Are patru judete: Arad, Caras-Severin, Hunedoara si Timis <p>
</b></center></h1>
<marquee><font face="arial" size=6 color="yellow">
Banatu-i frunce!
</marquee> </font>
</body>
</html>
Linii orizontale
Atributele posibile:
size - grosime ( n pixeli )
width - lungime: data n pixeli sau procentual
align - aliniere; implicita center
noshade/shade
color - culoare
Iata linia afisata pentru eticheta din sursa HTML:
<hr size="3" width="320" align="left" noshade color="blue">
ntr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul
etichetei <hr>. Pentru a configura o linie orizontala se utilizeaza urmatoarele atribute ale
etichetei <hr>:
align permite alinierea liniei orizontala. Valorile posibile sunt "left", "center" si
"right";
width permite alegerea lungimii liniei;
size permite alegerea grosimii liniei;
noshade cnd este prezent defineste o linie fara umbra;
color permite definirea culorii liniei.
Exemplul 9.
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align= "center"> Tipuri de linii orizontale </h1> O linie implicita alinierea
stanga, latime 100%, grosime 2 cu umbra.
<hr>
Urmeaza o linie aliniata n centru , de latime 50%, grosime 5 pixeli , fara umbra.
<hr align= "center" width= "50%" size= "5" noshade> Urmeaza o linie aliniata
la dreapta , de latime 150 de pixeli, grosime 12 pixeli , de culoare rosie.
<hr align= "right" width=150 size=12 color= "red">
</body>
</html>
Inserarea unei imagini
Imaginile sunt stocate n fisiere cu diverse formate. Formatele acceptat pentru
fisierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
XPM (X PixMap) cu extensia .xmp;
XBM (X BitMap) cu extensia .xbm;
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Pentru inserarea imaginilor se foloseste instructiunea img care are mai multe
atribute, dintre care 2 sunt obligatorii:
<img src="nume.gif" alt="nume.fotografie">
n prealabil, imaginile pe care se va baza pagina Web trebuie salvate n acelasi
dosar cu pagina scrisa.
Daca imaginea se pune ca fundal pe o pagina Web, n instructiunea body se
nlocuieste atributul bgcolor cu background.
<body background="foto.jpg">
Exemplul 10
html>
<head><title> Pagina Web cu imagine </title>
</head>
<body bgcolor="blue" text="white">
<h1><center><b>
Regiunea de Vest a Romniei are 4 judete: <br>
<marquee> <font face ="Arial" size=6 color="yellow">
Arad, Caras-Severin, Timisoara, Hunedoara
</font></marquee>
<img src="foto02.jpg" alt="Caras-Severin">
</b></center></h1>
</body>
</html>
Exemplul 11
<html>
<head>
<title> O pagina cu imagine
</title>
</head>
<body> O pagina care contine o imagine
<img src="foto02.jpg"> Text dupa imagine.>
</body>
</html>
Daca doriti sa adaugati un chenar n jurul imaginii, folositi atributul border al
etichetei <img>. Valorile acestor atribute sunt numere ntregi pozitive.
O imagine are anumite dimensiuni pe orizontala si verticala, stabilite n momentul
crearii ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate n momentul afisarii ei
n pagina Web.
Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul
atributelor width si height.
Exemplul 12
<html>
<head>
<title> Imagine cu chenar si marit
</title>
</head>
<body> O imagine cu chenar si de 200 pixeli X 15 %
<img src="foto02.gif" border="5" width="350" height="25%"> Text dupa imagine.
</body>
</html>
5. Pagini Web cu liste
Listele sunt ordonari de informatii cu sau fara marcatori. Se pot crea n html 2 tipuri
de liste:
liste ordonate (nsotite de cifre sau litere)
liste neordonate (nsotite doar de marcatori)
Asa cum se arata n tema nr. 18, listele ordonate (ol) pot fi indicate cu urmatoarele
simboluri:
11, 2, 3, ..., n
a a, b, c, ..., z
A A, B, C, ..., Z
I I, II, III, ..., X, ..., C, .
Daca se doreste inserarea unei liste noerdonate (ul), atunci se pun marcatori cum ar
fi:
Circle
Disc
Square
Exemplul 13
<html>
<head><title>lista 2</title></head>
<body><h1 align="center">Desen</h1><hr>
Glosar de termeni de World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
</body>
</html>
Exemplul 14
<html>
<head><title>lista 3</title></head>
<body><h1 align="center">Glosar de termeni de World Wide Web </h1><hr>
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul>
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul>
</ul>
</body>
</html>
Exemplul 15. exemplul este o lista ordonata cu litere mari, ncepnd de la valoarea C.
<html>
<head><title>lista 4</title></head>
<body><h1 align="center">Desen</h1><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>
Exemplul 16. Tag-ul <li> poate avea un atribut value care stabileste valoare pentru
elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un numar ntreg
pozitiv.
<html>
<head><title>lista 5</title></head>
<body><h1 align="center">Activul patrimonial</h1><hr>
<ol start="3">Activul patrimonial cuprinde:
<li>mijloace fixe;
<li>active circulante;
<li>creante.
</ol>
</body>
</html>
Exemplul 17 Listele ordonate pot fi imbricate intre ele sau cu liste neordonate.
<html>
<head><title>lista 6</title></head>
<body><h1 align="center">PATRIMONIUL</h1><hr>
<ol><h2>Patrimoniul include:</h2>
<h3><li>Bunuri economice:</h3>
<ol>
<li>Active imobilizate
<li>Active circulante
</ol>
<h3><li>Drepturi:</h3>
<ul>
<li>proprietate
<li>creanta
</ul>
<h3><li>Obligatii:</h3>
<ul type="disc">
<li>stabilite prin contracte
<li>acte normative
</ul>
</ol>
</body>
</html>
6. Pagini ce contin legaturi (link-uri)
Legaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web.
Ele transforma un text obisnuit n hipertext sau hiperlegatura, care permite trecerea
rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt
server aflat oriunde n lume.
Legaturile sunt zone active ntr-o pagina Web, adica zone de pe ecran sensibile la
apasarea butonului stng al mouse-ului.
6.1. Legatura catre o pagina aflata n acelasi director
O legatura catre o pagina aflata n acelasi director se formeaza cu ajutorul
etichetei <a> (de la "anchor"=ancora).
Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei
<a> numit href, care ia valoare numele fisierului HTML aflat n acelasi director. Zona
activa care devine sensibila la apasarea butonului stng al mouse-ului este formata din
textul cuprins ntre etichetele <a>...</a>.
Prezenta etichtetei de sfrsit </a> este obligatorie.
Exemplul 18.
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Exercitiu</h3>
<a href="ex.htm">
Link catre o alta pagina </a>
</body>
</html>
6.2. Legatura catre o pagina aflata n acelasi disc local
Daca pagina referinta se afla pe acelasi disc local, dar ntr-un alt director atunci
pentru a preciza pozitia ei n structura de directoare se poate folosi adresarea relativa.
Exemplul 19.
<html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local </title>
</head>
<body>
<h3>Exercitiu</h3>
<a href="D:\ex.htm">
Link catre o alta pagina </a> </body></html>
6.3. Legatura catre un site particular
n exemplul urmator se utilizeaza adresa URL ww.uem.ro, care ncarca pagina de
start a Universitatii "Eftimie Murgu" din Resita.
Exemplul 20.
<html>
<head>
<title> Comutarea catre o pagina web </title>
</head>
<body>
<h3>Exercitiu</h3>
<a href="http://www.uem.ro">
Link catre pagina de strat a universitatii </a> </body> </html>
6.4. Legatura catre o adresa de e-mail (Utilizarea postei electronice)
ntr-o pagina Web se poate afla legaturi care permit lansarea n executie a
aplicatiei de expediere a mesajelor electronice.
Pentru aceasta se utilizeaza n constructia mailto: urmat de o adresa e-mail valida.
Pentru ca exemplul urmator sa functioneze trebuie ca:
pe calculator sa fie instalat o aplicatie de expediere a mesajelor electronice
(Outlook Express pe calc. Windows , Pine pe calc. Unix);
adresa sa fie valida si calculatorul sa fie conectat la Internet.
Exemplul 21:
<html>
<head>
<title> Posta electronica </title>
</head>
<body>
<h3>Expediere de mesaje electronice</h3><br>
<a href="mailto:r.lolea@uem.ro">
Mesaje catre profa de info
</body>
</html>
7. Pagini web cu tabele
Pentru inserarea unui tabel este necesar sa se cunoasca faptul ca acesta are rnduri
si coloane si n fiecare celula a lui se pot da informatii aliniate sau nealiniate.
Citirea unui tabel se face n programe de sus n jos si de la stnga la dreapta.
d
1
d
2

r
1
r
2
Arad Caras-Severin Hunedoara Timis
AR CS HD TM

Instructiunea pentru inserarea unui tabel sau chenar (bordura) este:
<table>.........</table>
Daca tabelul are si chenar se ataseaza atributul border:
<table border="2">......</table>
Indicarea unui rnd se face cu instructiunea tr care este singulara, iar a unei coloane
prin td - table data (care este pereche).
Daca celula nu contine nimic se foloseste ca valoare constructia: &nbsp.
Exemplul 22:
<html>
<head><title>tabelul 1</title></head>
<body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr>
<table>
<tr> <td>celula 11</td> <td>celula 12</td></tr>
<tr> <td>celula 21</td> <td>celula 22</td></tr>
<tr> <td>celula 31</td> <td>celula 32</td></tr>
<tr> <td>celulal 41</td> <td>celula 42</td></tr>
</table>
</body>
</html>
a
11
a
12
a
21
a
22
Exemplul 22:
<html>
<head><title>tabelul 2</title></head>
<body><h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border="4">
<tr> <td>celula 11</td> <td>celula 12</td></tr>
<tr> <td>celula 21</td> <td>celula 22</td></tr>
<tr> <td>celula 31</td> <td>celula 32</td></tr>
<tr> <td>celula 41</td> <td>celula 42</td></tr>
</table>
</body>
</html>
Exemplul 24:
<html>
<head><title>tabelul 3</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>celula 31 </td>
<td>celula 32 </td></tr>
<tr> <td>celula 41</td>
<td bgcolor="white">cell 42 </td></tr>
</table>
</body>
</html>

Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei:
<font color="valoare">...</font>.
Unui tabel i se poate atasa un titlu cu ajutorul etichetei <caption> ( de la "table
caption" = titlu tabel ). Aceasta eticheta trebuie plasata n interiorul etichetelor
<table>...</table>, dar nu n interiorul etichetelor <tr> sau <td> Titlul unui tabel poate
fi aliniat cu ajutorul atributului align al etichetei <caption> care poate lua una dintre
valorile:
"bottom" ( sub tabel );
"top" ( deasupra tabelului );
"left" ( la stnga tabelului );
"right" ( la dreapta tabelului ).
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 ) n loc de <td>.
Toate atribute 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.
Exemplul 25:
<html>
<head><title>tabelul 4</title></head>
<body><h1 align="center">Un tabel cu titlu, culori si cap de tabel</h1>
<table border="1" bgcolor="blue"><caption align="bottom">Preturile masinii
<tr><th><font color="red">Pret</font></th>
<th>Citroen</th>
<th>Jaguar</th>
<th>BMW</th>
<th>Volvo</th></tr>
<tr><th><font color="red">In dolari</font></th>
<td>5000</td>
<td>100000</td>
<td>50000</td>
<td>80000</td></tr>
<tr><th><font color="red">In lei</font></th>
<td>15000</td>
<td>300000</td>
<td>150000</td>
<td>240000</td></tr> </table>
</body> </html>
Alinierea continutului unei celule
Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului
align care poate lua valorile:
"left" (la stnga);
"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 att etichetei <tr> pentru a defini tuturor elementelor
celulelor unui rnd, ct si etichetelor <td> si <th> pentru a stabili alinierea textului intr-o
singura celula.
Exemplul 26:
<html>
<head><title>tabelex_11</title></head>
<body><h1 align=center>Un tabel avand continutul celulelor aliniate</h1>
<table border="0" 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>
border="0"
border="1"
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 naltime.
Valorile posibile ale acestor atribute sunt:
numere ntregi pozitive (inclusiv 0) reprezentnd dimensiunea n pixeli a latimii,
respectiv a naltimii unei celule;
procente din latimea , respectiv naltimea tabelului.
Exemplul 27:
<html>
<head><title>tabelex_12</title></head>
<body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1><hr>
<table border="0">
<tr> <td width="100" height="150">X</td> <td width="100" height="150">Z</td></tr>
<tr> <td width="100" height="150">Y</td> <td width="100" height="150">T</td></tr>
</table> </body> </html>
border="0"
border="3"
8. Pagini Web cu formulare
Cum se realizeaza ntr-un formular:
Un formular este un ansamblu de zone active alcatuit din butoane, casete de
selectie, cmpuri de editare etc.
Formularele 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 - pna 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 l expediaza unui server.
2. O aplicatie dedicata de pe server analizeaza formularul completat si (daca
este necesar) stocheaza datele ntr-o baza de date.
3. Daca este necesar serverul expediaza un raspuns utilizatorului.
Un formular este definit intr-un bloc delimitat de etichetele corespondente
<form> si </form>.
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>.
Pentru a preciza tipul elementului se foloseste atributul type al etichetei <input>. Pentru
un cmp 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>, n 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.
1. butoanele radio;
<input type= "radio" name="b"> ..
Butoanele radio permit alegerea, la un moment dat, unei singure variante din mai
multe posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type avnd
valoarea "radio".
2. butoanele de validare;
<input type= "checkbox"> .. <br>

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.
3. lista ascunsa;
<select size= "1">
<option> ....
<option> ....
</select><p>
O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente
dintr-o lista finita. Lista de selectie este inclusa n formular cu ajutorul etichetelor
corespondente <select> si </select>.
O lista de selectie poate avea urmatoarele atribute:
atributul name, care ataseaza listei un nume (utilizat n perechile "name=value"
expediat serverului);
atributul size, care precizeaza (printr-un numar ntreg pozitiv, valoarea prestabilita
fiind 1) cte elemente din lista sunt vizibile la un moment dat pe ecran (celelalte
devenind vizibile prin actionarea barei de derulare atasate automat listei).
Elementele unei liste de selectie sunt incluse n lista cu ajutorul etichetei <option>.
Doua atribute ale etichetei option se dovedesc utile:
atributul value primeste ca valoare un text care va fi expediat server-ului n
perechea "name=value"; daca acest atribut lipseste, atunci catre server va fi
expediat textul ce urmeaza dupa <option>;
atributul selected (fara alte valori) permite selectarea prestabilita a unui element al
listei.
4. lista deschisa;
<select size= "2">
<option> ....
<option> ...
</select><p>
O lista de selectie ce permite selectii multiple se creeaza ntocmai ca o lista de
selectie obisnuita. In plus, eticheta <select> are un atribut multiple (fara alte valori). Cnd
formularul este expediat catre server pentru fiecare element selectat al listei care este se
insereaza cte o pereche "name=value" unde name este numele listei.
5. arie de text;
<textarea rows="4" cols="30">
</textarea><p>
ntr-un formular cmpuri de editare multilinie pot fi incluse cu ajutorul etichetei
<textarea>. Eticheta are urmatoarele atribute:
atributul cols, care specifica numarul de caractere afisate ntr-o linie;
atributul rows, care specifica numarul de linii afisate simultan;
atributul name, care permite atasarea unui nume cmpului de editare multilinie;
atributul wrap, (de la "word wrap"=trecerea cuvintelor pe rndul urmator, care
determina determina comportamentul cmpului de editare fata de sfrsitul de
linie.
Acest atribut poate primi urmatoarele valori:
a) " off "; n acest caz:
o ntreruperea cuvintelor la marginea dreapta a editorului se produce numai
cnd doreste utilizatorul;
o caracterul de sfrsit de linie este inclus n textul transmis serverului o data
cu formularul;
b) " hard "; n acest caz:
o se produce ntreruperea cuvintelor la marginea dreapta a editorului ;
o caracterul de sfrsit de linie este inclus n textul transmis serverului o data
cu formularul;
c) " soft "; n acest caz:
o se produce ntreruperea cuvintelor la marginea dreapta a editorului ;
o nu se include caracterul de sfrsit de linie n textul transmis serverului o
data cu formularul;

6. cmp de text;
<input type="text" size="30"> <p>
7. butoane de comanda;
<input type="submit" value="TRIMITE">
<input type="reset" value="ANULEAZA">
8. cmp cu parola;
<input type="password" size="15" max lenght="6"> <p>
Daca se utilizeaza eticheta <input> avnd atributul type configurat la valoarea
"password" , atunci n formular se introduce un element asemanator cu un cmp de
editare obisnuit (introdus prin type="text").
Toate atributele unui cmp de editare ramn valabile.
Singura deosebire consta n faptul ca acest cmp de editare nu afiseaza caracterele
n clar, ci numai caractere,care ascund de privirile altui utilizator aflat n apropiere
valoarea introdusa ntr-un asemenea cmp.
La expedierea formularului insa, valoarea tastata intr-un cmp de tip "password"
se transmite n clar.
Exemplul de la curs:
<html>
<head><title> Pagina Web cu formular </title>
</head>
<body bgcolor="blue" text="red"> <h1><center><b>
SONDAJ PE INTERNET
</center> <p>
<form> <font color="black">
1. Sunteti conectat la Internet? <br>
<input type= "radio" name="b"> DA <br>
<input type= "radio" name="b"> NU <p>
2. Ce servicii Internet utilizati? <br>
<input type= "checkbox"> Web <br>
<input type= "checkbox"> E-mail <br>
<input type= "checkbox"> Chat <br>
<input type= "checkbox"> E-com <p>
3. Ce tip de conexiune aveti? <br>
<select size= "1" multiple>
<option> a) dial-up
<option> b) ISDN
<option> c) ISP
<option> d) CATV
</select><p>
4. Numele de utilizator:
<input type="text" size="30"> <p>
5. Parola:
<input type="password" size="15"
max lenght="6"> <p>
6. Sex:
<select size= "1">
<option> masculin
<option> feminin
</select><p>
7. Vrsta:
<select size= "2">
<option> sub 18 ani
<option> ntre 18-35 ani
<option> ntre 35-55 ani
<option> peste 55 ani
</select><p>
8. Rezidenta:
<textarea rows="4" cols="30">
</textarea><p>
<input type="submit" value="TRIMITE">
<input type="reset" value="ANULEAZA">
</font> </form> </b ></h1> </body> </html>
Exemplul 27:
<html>
<head><title>formular S.C.</title></head>
<body><h1>Un formular complex</h1> <hr>
<center>
<table bgcolor="orange">
<form action="mailto:xxxxx@xxx.com" method="post">
<caption align="top">MENIU</caption>
<tr align=left><th>Numele:
<td><input type="text" name="numele">
<tr align=left><th>Preumele:
<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 plata:<td>
<ul style="background-color:lightblue;">
<li><input type="radio" name="plata">cash
<li><input type="radio" name="plata">card
</ul> <tr align=left>
<th>Comentarii:
<td> <textarea name="comentarii" cols="30" rows="5" wrap="off">
Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea>
<tr align=left valign=top><td>
<input type="reset" value="sterge"><td> <input type="submit" value="expedieaza">
</form></table></body> </html>
9. Realizarea cadrelor
Ferestrele sau (cadrele) ne permit sa definim n fereastra browserului subferestre
n care sa fie ncarcate documente HTML diferite.
Ferestrele sunt definite intr-un fisier HTML special , n care blocul
<body>...</body> este nlocuit de blocul <frameset>...</frameset>.
In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primeste ca valoare
adresa URL a documentului HTML care va fi ncarcat n acel frame. Definirea cadrelor
se face prin mpartirea ferestrelor (si a subferestrelor) n linii si coloane:
mpartirea unei ferestre ntr-un numar de subferestre de tip coloana se face cu
ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastra;
mpartirea unei ferestre ntr-un numar de subferestre de tip linie se face cu
ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastra;
valoare atributelor cols si rows este o lista de elemente separate prin virgula, care
descriu modul n care se face mpartirea.
Elementele listei pot fi:
1. un numar ntreg de pixeli;
2. procente din dimensiunea ferestrei (numar ntre 1 si 99 terminat cu %);
3. n
*
care nseamna n parti din spatiul ramas;
2H
<html>
<head><title>Pagina web cu cadre</title>
</head>
<frameset rows= 50%,50%>
<frame src=text.htm>
<frame src= imagine.htm>
</frameset>
</html>
Text.htm
Imagine.htm
2V
<html>
<head><title>Pagina web cu cadre</title>
</head>
<frameset cols=40%,60%>
<frame src=text.htm>
<frame src=formular.htm>
</html>
1H-2V
<html>
<head><title>1H - 2V </title>
</head>
<frameset rows=30%,*>
<frame src=text.htm>
<frameset cols= 50%,*>
<frame src=imagine.htm>
<frame src=formular.htm>
</frameset>
</frameset>
</html>
2V-1H
<html>
<head><title>2V - 1H </title>
</head>
<frameset rows=65%,35%>
<frameset cols=40%,60%>
<frame src=text.htm>
<frame src=formular.htm>
</frameset>
<frame src=imagine.htm>
</frameset>
</html>
1V-2H
<html>
<head><title>1V - 2H </title>
</head>
<frameset cols=25%,75%>
<frame src= imagine.htm>
<frameset rows=45%,55%>
<frame src=text.htm>
<frame src=formular.htm>
</frameset>
</frameset>
</html>

2H-1V
<html>
<head><title>2H - 1V </title>
</head>
<frameset cols=80%,*>
<frameset rows=50%,*>
<frame src=text.htm>
Text.htm Formular.htm
Text.htm
Img.
htm
Form.htm
Text.htm Form.
htm
Imagine.htm
Img.
htm
Text.htm
Form.htm
Text.htm Form.htm
Img.htm
<frame src=imagine.htm>
</frameset>
<frame src=formular.htm>
</frameset>
</html>
3H
<html>
<head><title>3H </title>
</head>
<frameset rows=33%,33%,*>
<frame src=text.htm>
<frame src=imagine.htm>
<frame src=formular.htm>
</frameset>
</html>
3V
<html>
<head><title>3V </title>
</head>
<frameset cols=33%,33%,*>
<frame src=text.htm>
<frame src=imagine.htm>
<frame src=formular.htm>
</frameset>
</html>
Exemplul 28.
Realizati unei pagini colorate ce va avea urmatoarea forma:
1.html
<html>
<head><title>roz</title>
</head>
<body bgcolor="pink">
</body>
</html>
Text.htm
Imagine.htm
Formular.htm
Text.htm Img.htm Form.htm
2.html
<html>
<head><title>albastru</title>
</head>
<body bgcolor="blue">
</body>
</html>
3.html
<html>
<head><title>rosu</title>
</head>
<body bgcolor="red">
</body>
</html>
4.html
<html>
<head><title>galben</title>
</head>
<body bgcolor="yellow">
</body>
</html>
5.html
<html>
<head><title>alb</title>
</head>
<body bgcolor="white">
</body>
</html>
6.html
<html>
<head><title>verde</title>
</head>
<body bgcolor="green">
</body>
</html>
7.html
<html>
<head><title>mov</title>
</head>
<body bgcolor="purple">
</body>
</html>
8.html
<html>
<head><title>gri</title>
</head>
<body bgcolor="gray">
</body>
</html>
Pagina complexa:
<html>
<head><title>Pagina web cu cadre</title>
</head>
<frameset cols="20%,80%">
<frame src="1.html">
<frameset rows="20%,20%,20%,20%,20%">
<frameset cols="80%,20%">
<frame src="2.html">
<frame src="3.html">
</frameset>
<frame src="4.html">
<frame src="5.html">
<frame src="6.html">
<frame src="7.html">
<frame src="8.html">
</frameset>
</html>