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 atât cu litere mici, cât si cu litere mari.
Adica <html> = <html> = <html>.

Instructiunile de baza în HTML:

<title>. </title>;

Ex. 1

<html>

<head> .</head> <body>

</body> </html>

Titlul unei pagini se obtine inserand în sectiunea <head>...</head> a urmatoarei linii:

<title>. </title>

Ex.2 - Exemplu curs

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

Continutul blocului <title>...</title> va aparea în bara de titlu a ferestrei browser-ului.

6.2. Pagini web cu text

6.2.1. Introducerea unui rând nou

Daca introducem mai multe linii într-o pagina browser-ul va afisa într-un singur rând, trecerea pe o linie noua facându-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>

6.2.2. Introducerea unui text performant (poate fi luat un text predefinit)

Pentru ca browser-ul sa interpreteze corect caracterele "spatiu" , "tab" si alt rând, 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>

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

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

6.2.5. Formare text

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

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

6.2.7. Paragrafe

In editarea fisierelor HTML, caracterul CR este ignorat. Pentru trecerea la un nou paragraf,aceasta însemnând un rând 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 întâlnirea unei etichete <p>, browserul întelege faptul ca paragraful precedent s-a încheiat.

Alinierea implicita este la stânga ( 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 - Exemplu curs

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

Banatu-i frunce!

</marquee> </font>
</body>

</html>

6.3. 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 când 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>

6.4. 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. - exemplul de la curs

html>

<head><title> Pagina Web cu imagine </title>

</head>

Regiunea de Vest a României are 4 judete: <br>

Arad, Caras-Severin, Timisoara, Hunedoara

</font></marquee>

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

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

1→1, 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, începând 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.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 stâng al mouse-ului.

6.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 stâng al mouse-ului este formata din textul cuprins între etichetele <a>...</a>.

Prezenta etichtetei de sfârsit </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.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.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="https://www.uem.ro">

Link catre pagina de strat a universitatii </a> </body> </html>

6.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:[email protected]">
Mesaje catre profa de info

</body>
</html>

Pagini web cu tabele

Pentru inserarea unui tabel este necesar sa se cunoasca faptul ca acesta are rânduri 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 stânga la dreapta.

d₁ d₂

a₁₁	a₁₂
a₂₁	a₂₂

r₁

r₂

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 rând 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>

Exemplul 22:

<html>

<head><title>tabelul 2</title></head>

<body><h1 align=center>Un tabel simplu cu chenar</h1><hr>

<tr> <td>celula 11</td> <td>celula 11</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>

<tr> <td>verde 11 </td>

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

</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 stânga 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

<th>Citroen</th>

<th>Jaguar</th>

<th>Volvo</th></tr>

<tr><th><font color="red">In dolari</font></th>

</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 stânga);
"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 atât etichetei <tr> pentru a defini tuturor elementelor celulelor unui rând, cât 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) reprezentând 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"

6.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, câmpuri 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 - pâna 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:

Utilizatorul completeaza formularul si îl expediaza unui server.
O aplicatie dedicata de pe server analizeaza formularul completat si (daca este necesar) stocheaza datele într-o baza de date.
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 câmp 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.

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 având valoarea "radio".

butoanele 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

lista ascunsa;

<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) câte 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.

lista deschisa;

<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). Când formularul este expediat catre server pentru fiecare element selectat al listei care este se insereaza câte o pereche "name=value" unde name este numele listei.

arie de text;

</textarea><p>

Într-un formular câmpuri 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 câmpului de editare multilinie;
atributul wrap, (de la "word wrap"=trecerea cuvintelor pe rândul urmator, care determina determina comportamentul câmpului de editare fata de sfârsitul de linie.

Acest atribut poate primi urmatoarele valori:

a) " off "; în acest caz:

întreruperea cuvintelor la marginea dreapta a editorului se produce numai când doreste utilizatorul;
caracterul de sfârsit de linie este inclus în textul transmis serverului o data cu formularul;

b) " hard "; în acest caz:

se produce întreruperea cuvintelor la marginea dreapta a editorului ;
caracterul de sfârsit de linie este inclus în textul transmis serverului o data cu formularul;

c) " soft "; în acest caz:

se produce întreruperea cuvintelor la marginea dreapta a editorului ;
nu se include caracterul de sfârsit de linie în textul transmis serverului o data cu formularul;

câmp de text;

butoane de comanda;

câmp cu parola;

Daca se utilizeaza eticheta <input> având atributul type configurat la valoarea "password" , atunci în formular se introduce un element asemanator cu un câmp de editare obisnuit (introdus prin type="text").

Toate atributele unui câmp de editare ramân valabile.

Singura deosebire consta în faptul ca acest câmp de editare nu afiseaza caracterele în clar, ci numai caractere,care ascund de privirile altui utilizator aflat în apropiere valoarea introdusa într-un asemenea câmp.

La expedierea formularului insa, valoarea tastata intr-un câmp de tip "password" se transmite în clar.

Exemplul de la curs:

<html>

<head><title> Pagina Web cu formular </title>

</head>

SONDAJ PE INTERNET

</center> <p>

1. Sunteti conectat la Internet? <br>

2. Ce servicii Internet utilizati? <br>

3. Ce tip de conexiune aveti? <br>

<option> a) dial-up

<option> b) ISDN

<option> c) ISP

<option> d) CATV

</select><p>

4. Numele de utilizator:

5. Parola:

<input type="password" size="15"

max lenght="6"> <p>

6. Sex:

<option> masculin

<option> feminin

</select><p>

7. Vârsta:

<option> sub 18 ani

<option> între 18-35 ani

<option> între 35-55 ani <option> peste 55 ani

</select><p>

8. Rezidenta:

</textarea><p>

</font> </form> </b ></h1> </body> </html>

Exemplul 27:

<html>

<head><title>formular S.C.</title></head>

<body><h1>Un formular complex</h1> <hr>

<caption align="top">MENIU</caption>

<tr align=left><th>Numele:

<tr align=left><th>Preumele:

<tr align=left><th>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>

<li><input type="radio" name="plata">cash

<li><input type="radio" name="plata">card

</ul> <tr align=left>

<th>Comentarii:

Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea>

</form></table></body> </html>

6.9. Realizarea cadrelor - exemple curs

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:

un numar întreg de pixeli;

procente din dimensiunea ferestrei (numar între 1 si 99 terminat cu %);

n^* care înseamna n parti din spatiul ramas;

Text.htm

Imagine.htm

<html>

<head><title>Pagina web cu cadre</title>

</head>

</frameset>

</html>

Text.htm

Formular.htm

<html>

<head><title>Pagina web cu cadre</title>

</head>

</html>

1H-2V

Text.htm
Img. htm	Form.htm

<html>

</head>

</frameset>

</html>

2V-1H

Text.htm	Form. htm
Imagine.htm

<html>

</head>

</frameset>

</frameset>

</html>

1V-2H

Img. htm	Text.htm
	Form.htm

<html>

</head>

</frameset>

</html>

2H-1V

Text.htm	Form.htm
Img.htm

<html>

</head>

</frameset>

</frameset>

</html>

Text.htm

Imagine.htm

Formular.htm

<html>

</head>

</frameset>

</html>

Text.htm

Img.htm

Form.htm

<html>

</head>

</frameset>

</html>

Exemplul 28.

Realizati unei pagini colorate ce va avea urmatoarea forma:

1.htm

<html>

</head>

</body>

</html>

2.htm

<html>

<head><title>albastru</title>

</head>

</body>

</html>

3.htm

<html>

</head>

</body>

</html>

4.htm

<html>

<head><title>galben</title>

</head>

</body>

</html>

5.htm

<html>

<head><title>galben</title>

</head>

</body>

</html>

6.htm

<html>

<head><title>verde</title>

</head>

</body>

</html>

7.htm

<html>

</head>

</body>

</html>

Pagina complexa:

<html>

<head><title>Pagina web cu cadre</title>

</head>

</framset>

</framset>

</html>

Document Info

Accesari: 10823
Apreciat:

Comenteaza documentul:

Nu esti inregistrat
Trebuie sa fii utilizator inregistrat pentru a putea comenta

Creaza cont nou

A fost util?

Daca documentul a fost util si crezi ca merita
sa adaugi un link catre el la tine in site

Copiaza codul:
in pagina web a site-ului tau.

eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate | Termenii si conditii de utilizare