CAP.1 - Limbajul HTML

CAP.
1 - Limbajul HTML
1. Introducere
HTML este un limbaj utilizat pentru crearea paginilor web care vor fi afişate într-
un browser. HTML reprezintă abrevierea de la Hypertext Markup Language.
În cadrul acestei lucrări vom face referire la standardul HTML 4.01.
Paginile web pot fi realizate în două moduri:
a) manual, scriind etichetele HTML;
b) asistat, cu ajutorul unor aplicaţii speciale.
În primul caz, utilizatorii trebuie să cunoască limbajul HTML pentru a putea crea
paginile web. În această situaţie, se poate deţine un control absolut asupra realizării
paginii web.
Pentru a putea crea pagini web, în mod manual, avem nevoie de următoarele
aplicaţii:
a) un editor de texte, cum ar fi Notepad-ul;
b) un browser de web, cum ar fi Internet Explorer;
c) un editor de imagini, cum ar fi AdobePhotoshop.
Cu ajutorul editorului de texte, utilizatorul realizează paginile web prin
introducerea etichetelor HTML şi a textului care va apare în paginile web.
Browser-ul este folosit pentru testarea documentelor HTML, pentru a vedea ceea
ce se obţine. Este necesar ca testarea să se realizeze şi cu Internet Explorer şi cu Netscape
Composer, ţinând cont că nu ambele acceptă toate tagurile.
Editorul de imagini este utilizat pentru crearea şi editarea imaginilor, butoanelor,
precum şi a altor obiecte grafice.
Editoarele de tip WYSIWYG (What You See Is What You Get = ceea ce vezi este
ceea ce obţii) dispun de instrumente de care este nevoie pentru realizarea unui site. În
cazul folosirii acestor editoare, utilizatorul nu mai trebuie să cunoască etichetele HTML,
el fiind preocupat doar de grafica site-ului, de aşezarea în pagină, etc.
1
2. Proiectarea unei pagini web
Pentru a putea realiza o pagină web în modul manual, vom proceda astfel:
1) deschidem editorul de texte pe care-l avem la dispoziţie;
2) edităm fişierul HTML, folosind tag-urile HTML;
3) salvăm fişierul cu extensia .html sau .htm.
Exemplu: Vom realiza o pagină web, pe care o vom numi “pg001.html” şi care va
avea următorul conţinut:
pg001.html
<html>
<head>
<title>
realizarea unei pagini web
</title>
</head>
<body>
textul afisat de browser
</body>
</html>
Pentru salvarea fişierului cu extensia .html, vom proceda astfel: din meniul File,
selectăm opţiunea Save, selectăm locaţia unde va fi salvat fişierul, din lista ascunsă Save
as type selectăm opţiunea All Files, în câmpul File name introducem pg001.html, iar în
final apăsăm butonul Save.
2
După ce am închis editorul de texte, dăm dublu click pe pg001.html şi va apare
următoarea fereastră:
În cazul în care dorim să efectuăm modificări în cadrul paginii web, dăm click
dreapta pe fişierul html, iar din meniul contextual afişat selectăm opţiunea Open With /
Notepad. Pentru a vedea modificările pe care le-am efectuat în pagina web, vom apăsa
butonul Refresh/Reload al browser-ului sau apăsăm tasta F5.
3. Structura unui document web
3
Pentru realizarea unei pagini web, vom utiliza etichetele (cunoscute şi sub
denumirea de tag-uri) HTML.
Etichetele HTML sunt comenzi prin care i se “spune” browser-ului cum să afişeze
documentul. Ele sunt afişate în interiorul parantezelor unghiulare “<” şi “ >”.
Observaţie. HTML 4.01 nu face distincţie între literele mari şi cele mici, astfel că
nu va conta dacă vom folosi majuscule sau minuscule în scrierea etichetelor.
Etichetele sunt de două tipuri:
a) etichete pereche sau etichete container;
b) etichete singulare sau etichete vide.
În cazul etichetelor pereche, sunt utilizate două etichete, o etichetă de început şi o
etichetă de încheiere. La eticheta de sfârşit, apare în plus simbolul “/” (slash).
De exemplu avem următoarele etichete pereche:
 <html> …</html>
 <head> … </head>
 <title> … </title>
 <body> … </body> , etc.
În cazul etichetelor singulare, există o singură etichetă, nu mai apare eticheta de
încheiere.
Exemple de etichete singulare:
 <br>
 <hr>
 <li> , etc.
Orice pagină html conţine două părţi:
 antetul paginii (head);
 corpul paginii (body).
Etichetele de bază pe care trebuie să le conţină un document HTML sunt
următoarele:
1. <html> …</html>
2. <head> … </head>
3. <title> … </title>
4. <body> … </body>
4
Eticheta <html> se pune la începutul fiecărei pagini web, iar cu eticheta </html>
se termină fiecare pagină web. Deci putem spune că aceste etichete “spun” browser-ului
unde începe şi unde se sfârşeşte documentul html.
După tag-ul <html>, urmează etichetele pereche <head> … </head>, care sunt
utilizate pentru a introduce diferite informaţii descriptive folositoare pentru browser, cum
ar fi de exemplu titlul.
Titlul unei paginii web se scrie între etichetele <title> … </title>, etichete care
apar între etichetele <head> … </head>.
Corpul paginii web, adică conţinutul propriu-zis al acesteia, va fi scris între tag-
urile <body> … </body>.
În concluzie, putem spune că o pagină web are următoarea structură:
pg002.html
<html><head><title>
Titlul paginii web
</title></head><body>
Corpul paginii web
</body></html>
Introducând acest exemplu şi salvându-l cu numele de “pg002.html”, va apare

următoarea fereastră:
5
Este important ca atunci când utilizăm mai multe etichete pereche împreună, să
fim atenţi ca acestea să fie poziţionate corect. Regula este că prima etichetă deschisă va fi
ultima etichetă închisă.
Exemplu de utilizare a etichetelor pereche imbricate:
<etichetă1><etichetă2> …</etichetă2></etichetă1>
4. Atribute
Atributele pot fi considerate proprietăţile etichetelor html. Ele se pun doar în tag-
urile de început şi au un nume şi o valoare.
Atributele se introduc în etichete sub forma:
<etichetă nume=”valoare”> …</etichetă>
În cazul în care nu se utilizează nici un atribut pentru un tag, atunci browser-ul ia
în considerare valorile implicite ale tag-ului respectiv.
De exemplu, eticheta <body>, are ca atribut bgcolor, care indică culoarea
fundalului paginii web. Acest atribut ia ca valoare codul unei culori. În mod implicit,
culoarea pentru fundal este albă.
Pentru exemplul de mai sus, vom modifica culoarea fundalului şi vom salva
exemplul cu numele “pg003.html”.
pg003.html
<html>
<head>
<title>
Titlul paginii web
</title>
</head>
<body bgcolor="yellow">
Corpul paginii web
</body>
</html>
Un alt exemplu ar fi atributele color şi size pentru eticheta font.
6
Vom modifica fişierul pg002.html, astfel:
pg004.html
<html><head><title>
Titlul paginii web
<font color="red" size="7">
Corpul paginii web
</font></body></html>
Vom salva fişierul cu denumirea “pg004.html”

Observaţie: atributele au valori standard.
Exemplu:
pg005.html
<html><head><title>
Titlul paginii web
Corpul paginii web
<hr color="FF0000" width="34%"
size="4%" align="center">
urmeaza o linie orizontala cu anumite
atribute
</body></html>
Observaţie. O etichetă poate avea oricâte atribute.

În tabelul de mai jos sunt prezentate cele mai importante etichete HTML
împreună cu atributele lor şi cu valorile pe care aceste atribute le pot lua, precum şi cu o
descriere simplă a acestora.
7
Nume Nume Valoare Detalii
etichetă atribu atribut
t
<a> Ancora
href URL Adresa către care vrem sa fie
legatura
target _blank Fereastra în care se va face
_self afişarea
_parent
_top
<b> Text bold (îngroşat)
<body> Cuprinsul documentului
background adresa Imaginea de fond
imagini
i
bgcolor cod culoare Culoarea fondului
nume
culoare
leftmargin procent din Distanţa dintre marginea din
lăţimea stânga a ferestrei
paginii browserului şi marginea
număr din stânga a paginii
de
pixeli
topmargin procent din Distanţa dintre marginea de sus a
înălţim ferestrei browserului şi
ea marginea de sus a paginii
paginii
număr
de
pixeli
text cod culoare Culoarea textului
nume
culoare
alink cod culoare Culoarea legăturilor active (atunci
nume când mouse-ul se află
culoare deasupra lor)
link cod culoare Culoarea legăturilor nevizitate (nu
nume s-a efectuat nici un click pe
culoare ele)
vlink cod culoare Culoarea legăturilor vizitate
nume (s-a efectuat cel putin un
culoare click pe ele)
<br> Sfârşitul rândului
8
t
<center> Afişarea în centrul paginii
<font> Fontul textului
color cod culoare Culoarea fontului
nume
culoare
face nume font Tipul fontului
size un numar Mărimea fontului
de la 1
la 7
<form> Formular interactiv
action URL Adresa scriptului care prelucrează
datele din cadrul
formularului
method GET Metoda de prelucrare a datelor
POST formularului
<frame> Cadru (fereastra)
frameborder 1 sau 0 Cadrul are sau nu are chenar
marginheigh număr de Spaţiu deasupra şi sub un cadru
t pixeli
marginwidth număr de Spaţiu la stânga şi la dreapta unui
pixeli cadru
src URL Sursa cadrului
<frameset> Mulţime de ferestre
cols procent din Numărul şi mărimea relativă a
lăţimea coloanelor
paginii
număr
de
pixeli
rows procent din Numărul şi mărimea relativă a
înălţim rândurilor
ea
paginii
număr
de
pixeli
h1, h2, h3, Titluri în cadrul documentului
h4, h5, h6
9
t
align left Alinierea titlului
center
right
justify
<head> Antetul documentului
<hr> Linie orizontală
align left Alinierea orizontală a liniei
center
right
color cod culoare Culoarea liniei
nume
culoare
size numar de Înălţimea liniei
pixeli
width procent din Lăţimea liniei
lăţimea
paginii
număr
de
pixeli
<html> Document HTML
<i> Text italic
<img> Adăugarea unei imagini
align left Alinierea imaginii în pagină: left
right (stânga) sau right (dreapta)
top Alinierea elementelor din
middle jurul imaginii: top (sus),
bottom middle (mijloc), bottom
(jos)
alt text Text ce va fi afişat în locul
imaginii, în cazul în care,
aceasta nu este afişată
border număr de Mărimea chenarului din jurul
pixeli imaginii
height procent Înălţimea imaginii
număr
de
pixeli
hspace număr de Spaţiu pe orizontală în jurul
pixeli imaginii
src URL Adresa imaginii
10
t
vspace număr de Spaţiu pe verticală în jurul
pixeli imaginii
width procent Lăţimea imaginii
număr
de
pixeli
<input> Element al formularului
maxlength număr Număr maxim de caractere
name date de tip Numele elementului formularului
caracte
r
size număr Mărimea elementului
formularului
src URL Adresa pentru o imagine
type text Tip input
passwo
rd
checkb
ox
radio
submit
reset
file
hidden
image
button
value date de tip Valoare input
caracte
r
<li> Element al unei liste
<meta> Metainformaţii
content text Descrie valoarea atributului name
name author Autor
description Descriere
keywords Cuvinte cheie
<ol> Lista ordonată
start număr Cu ce valoare începe numerotarea
type A, a, I, i, 1 Tipul numerotării: A, a, I, i, 1
(implicit)
<p> Paragraf
11
t
align left Alinierea paragrafului
center
right
justify
<select> Lista de selecţii
multiple Permite selecţia mai multor
elemente
name date de tip Numele listei de selecţii
caracte
r
size numar Numărul de elemente ale listei
<strong> Text evidenţiat
<sub> Text indice
<sup> Text exponent
<table> Tabel
align left Alinierea tabelului
center
right
background URL Imaginea de fond pentru tabel
bgcolor cod culoare Culoarea fondului pentru tabel
nume
culoare
border procent Chenarul tabelului
număr
de
pixeli
bordercolor cod culoare Culoarea chenarului
nume
culoare
cellpadding număr de Spaţiu între conţinutul celulelor
pixeli tabelului şi marginile lor
cellspacing număr de Spaţiu între celulele tabelului
pixeli
cols număr Numărul de coloane ale unui tabel
hspace număr de Spaţiu pe orizontală în jurul
pixeli tabelului
vspace număr de Spaţiu pe verticală în jurul
pixeli tabelului
width procent Lăţimea tabelului
număr
12
t
de
pixeli
<td> Celula de tabel
align left Alinierea conţinutului celulei pe
center orizontală
right
background URL Imaginea de fond pentru celulă
bgcolor cod culoare Culoarea fondului pentru celulă
nume
culoare
colspan număr Numărul de coloane pe care se
intinde celula
height număr de Înălţimea celulei
pixeli
rowspan număr Numărul de linii pe care se întinde
celula
valign top Alinierea conţinutului celulei pe
middle verticală
bottom
width număr de Lăţimea celulei
pixeli
<textarea> Câmp de editare multilinie
cols număr Numărul de coloane
name date de tip Numele câmpului de editare
caracte multilinie
r
rows număr Numărul de randuri
<title> Titlu document
<tr> Rând tabel
align left Alinierea conţinutului celulelor
center pe orizontală
right
bgcolor cod culoare Culoarea fondului pentru tot
nume rândul
culoare
valign top Alinierea conţinutului celulelor pe
middle verticală
bottom
<u> Text subliniat
13
t
<ul> Lista neordonată
type circle Forma marcajului
disc
square
www.ecursuri.ro
5. Culori
Culorile sunt valorile pe care le primesc anumite atribute, cum ar fi:
1. atributul bgcolor – pentru etichetele: body, table, td, tr;
2. atributul color – pentru etichetele font, hr;
3. atributul bordercolor – pentru eticheta table.
Culorile pot fi specificate fie prin numele culorii, fie prin codul culorii în baza
16.
În cazul în care specificăm valoarea culorii prin intermediul numelui, vom folosi
numele acesteia în limba engleză. Exemple de valori pe care le pot lua atributele legate
de culori sunt: AliceBlue, AntiqueWhite, Aqua,Wheat, White, WhiteSmoke,Yellow,
YellowGree, etc.
Codul culorii în baza 16 este format din şase cifre. Primele două cifre reprezintă
cantitatea pentru roşu. Următoarele două cifre reprezintă cantitatea pentru verde.
Ultimele două cifre reprezintă cantitatea pentru albastru. De exemplu, pentru
negru avem codul #000000. Pentru alb avem codul #FFFFFF. Pentru roşu avem
codul #FF0000, pentru verde avem codul #008000, pentru albastru avem codul
#0000FF, iar pentru galben avem codul #FFFF00.
În tabelul de mai jos, sunt prezentate culorile cu denumirile lor şi cu codurile lor
în hexazecimal.
Culoare Nume culoare Cod culoare

AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
14
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
15
DimGray #696969
DodgerBlue #1E90FF
Feldspar #D19275
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
16
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
17
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
www.ecursuri.ro
Exemplu de utilizare a culorile în cadrul documentelor HTML:
18
pg006.html
<html><head>
<title>Culori</title>
</head>
<body bgcolor="aqua">
<font color="blue" size="3">
Textul este de culoare albastra si dimensiunea de trei
<br>
</font>
<font color="green" size="5">
Textul este de culoare verde si dimensiunea de cinci
</font>
<br>
<hr color="FF0000">
<br>
<font color="FFFFFF" size="7">
Este o linie orizontala rosie, aliniata la centru
</font>
<br>
</body></html>
Este necesar ca într-un document web să folosim cu grijă culorile, având grijă ca
acestea să se îmbine armonios, evitând astfel utilizarea lor inadecvată sau în cantităţi
excesive.
6. Texte
Pentru introducerea unui text într-o pagină web, nu este necesar să utilizăm
etichete, dar în cazul în care dorim să formatăm textul, va trebui să utilizăm anumite tag-
uri. Printre acestea amintim:
1. <font> …</font> 2. <b> …</b>
19
3. <i> …</i> 12. <strike> …</strike>
4. <u> …</u> 13. <tt> …</tt>
5. <h1> …</h1>, <h2> …</h2>, 14. <sub> …</sub>
…,<h6> …</h6> 15. <sup> …</sup>
6. <center> …</center> 16. <basefont>
7. <p> …</p> 17. <nobr>
8. <pre> …</pre> 18. <body> …</body>
9. <big> …</big> 19. <hr>
10. <small> …</small> 20. <br>
11. <s> …</s>
Formatarea textului se poate realiza la nivel de caracter sau la nivel de paragraf, la
nivel fizic sau la nivel logic.
Stilurile fizice permit modificarea stilului de text. Există următoarele stiluri fizice:
b (bold – aldin), i (italic - cursiv), u (undeline – subliniat), s sau strike (tăiat), sub
(subscript – indice), sup (superscript – exponent), tt (teletype - teleimprimator), big
(mare), small (micşorat).
Stilurile logice precizează destinaţia unui bloc de text. Există următoarele stiluri
logice: hr (linie orizontală), p (paragraf), pre (text preformatat), h1 … h6 (titluri).
Eticheta <br>
Chiar dacă noi în cadrul fişierului text tastăm Enter, trecerea la rândul următor nu
se va realiza în cadrul paginii web, deoarece browserele ignoră caracterul CR/LF. De
aceea noi utilizăm <br>, pentru a insera o întrerupere de rând. Această etichetă nu are
atribute şi nici etichetă de închidere.
Exemplu:
pg007.html
<html><head><title>Eticheta
<br></title></head><body>
Linia intai <br>
Linia a doua <br>
Linia a treia <br>
20
</body></html>
Eticheta <hr>
Această etichetă ne permite să trasăm o linie orizontală. Ea poate avea
următoarele atribute:
- align – pentru alinierea liniei în cadrul documentului şi poate avea
valorile: “left”, “center”, “right”;
- color – pentru stabilirea culorii liniei; valoarea prestabilită este “black”
(“negru”);
- size – pentru stabilirea grosimei liniei în pixeli; valorile pot fi numere
întregi; valoarea prestabilită este “2”;
- width – pentru stabilirea lungimii linei în pixeli; valoarea poate fi un
număr întreg pozitiv sau un procentaj care reprezintă o fracţiune din
valoarea blocului părinte (în acest caz utilizăm simbolul % după numărul
care poate lua valori între 1 şi 100; implicit este 100%);
- noshade – specificând acest atribut, linia va fi simplă, fără umbră; dacă
acest atribut lipseşte, linia este de tip 3-D cu umbră.
Exemplu:
pg008.html
<html><head><title>Eticheta <hr></title></head><body>
Text normal urmat de o linie de culoare rosie,
dimensiunea de 3, lungimea 45, aliniata la stanga
<hr color="red" size="3" width="45" align="left">
Text normal urmat de o linie de tip 3-D cu umbra,
aliniata la centru, cu grosimea de 7
<hr align="center" size="7">
</body></html>
Eticheta <pre>
21
Browserele înlocuiesc orice caracter de spaţiu alb, cum ar fi spaţiu, TAB, CR/LF
sau orice serie de astfel de caractere cu un singur caracter spaţiu. De aceea vom
utiliza eticheta <pre>pentru a afişa textul exact aşa cum l-am introdus noi în
documentul HTML. Este o etichetă pereche şi nu are atribute.
Exemplu:
pg009.html
<html><head><title>Eticheta <pre></title></head>
<body>
Textul este preformatat in acest caz
<pre>
Program
Luni - Vineri 8:00 - 16:00
Sambata 9:00 - 12:00
Duminica Inchis
</pre>
<br>Textul nu este preformatat in acest caz<br><br>
Program
Luni - Vineri 8:00 - 16:00
Sambata 9:00 - 12:00
Duminica Inchis
</body></html>
22
Eticheta <b>
Eticheta <b> este utilizată pentru a afişa textul aldin (bold / îngroşat). Este
etichetă pereche şi nu are atribute.
Exemplu:
pg010.html
<html><head><title>Eticheta <b></title></head>
<body>
Textul este scris normal <br>
<b> Textul este acum scris ingrosat </b> <br>
Textul este scris din nou normal
</body></html>
Eticheta <i>
Eticheta <i> este utilizată pentru a afişa textul cursiv (italic / înclinat). Este
etichetă pereche şi nu are atribute.
Exemplu:
23
pg011.html
<html><head><title>Eticheta <i></title></head>
<body>
<i> Textul este acum scris inclinat </i> <br>
Textul este scris acum din nou normal
</body> </html>
Eticheta <u>
Eticheta <u> este utilizată pentru a afişa textul subliniat (underline). Este etichetă
pereche şi nu are atribute.
Exemplu:
pg012.html
<html><head><title>Eticheta <u> </title></head>
<body>
<u> Textul este acum scris subliniat </u><br>
Textul este scris acum din nou normal
</body></html>
Observaţie. Putem imbrica mai multe etichete. De exemplu dacă dorim să avem
un text boldat, cursiv şi subliniat vom imbrica etichetele <b>, <i> şi <u>, ca în exemplul
de mai jos:
Exemplu:
pg013.html
<html><head><title>Etichetele <b>, <i> si <u> imbricate</title></head>
<body>
<b><i><u>Textul este acum scris ingrosat,inclinat si subliniat</b></i></u>
<br> Textul este scris acum din nou normal
</body></html>
24
Eticheta <big>
Eticheta <big> este utilizată pentru a afişa textul cu un font mai mare decât cel
curent. Este etichetă pereche şi nu are atribute. Putem imbrica mai multe astfel de etichete
pentru a obţine un font cu o dimensiune foarte mare.
Exemplu:
pg014.html
<html><head><title>Eticheta <big></title></head>
<body>
<big> Textul este acum scris cu un font mai mare </big><br>
<big><big>Textul este scris acum cu un font si mai mare</big></big>
</body></html>
Eticheta <small>
Eticheta <small> este utilizată pentru a afişa textul cu un font mai mic decât cel
curent. Este etichetă pereche şi nu are atribute. Putem imbrica mai multe astfel de etichete
pentru a obţine un font cu o dimensiune foarte mică.
Exemplu:
pg015.html
<html><head><title>Eticheta <small></title></head>
<body>
<small>Textul este acum scris cu un font mai mic </small><br>
<small><small>Textul este scris acum cu un font si mai mic
</small></small>
</body></html>
Eticheta <nobr>
25
Eticheta <nobr> permite afişarea textului pe un singur rând. În cazul în care
acesta nu încape în fereastra browserului, fereastra va avea o bară de derulare pe
orizontală, care va permite navigatorului să vadă întregul rând.
Exemplu:
pg016.html
<html> <head><title>Eticheta <nobr></title></head><body>
<nobr>
Aici introducem un text care să depaseasca fereastra browserului …
Aici introducem un text care să depaseasca fereastra
browserului … Aici introducem un text care să depaseasca
fereastra browserului … Aici introducem un text care să
depaseasca fereastra browserului … Aici introducem un text
care să depaseasca fereastra browserului …
</nobr>
</body></html>
Eticheta <tt>
Eticheta <tt> permite afişarea textului în stilul de text monospaţiat sau
teleimprimator. Este etichetă pereche şi nu are atribute.
Exemplu:
pg017.html
<html><head><title>Eticheta <tt></title></head>
<body>
<tt>Textul are stilul teleimprimator (teletype)</tt><br>
</body></html>
Eticheta <strike>
Eticheta <strike> afişează textul tăiat cu o linie. Este etichetă pereche şi nu are
atribute.
Exemplu:
26
pg018.html
<html><head><title>Eticheta <strike></title></head>
<body>
<strike>Textul este taiat de o linie orizontala</strike><br>
</body></html>
Eticheta <s>
Eticheta <s> are acelaşi rol ca eticheta <strike>, deci afişează textul tăiat cu o
linie. Este etichetă pereche şi nu are atribute.
Exemplu:
pg019.html
<html><head><title>Eticheta <s></title></head>
<body>
Textul este scris normal<br>
<s>Textul este taiat de o linie orizontala</s><br>
</body></html>
Eticheta <sub>
Eticheta <sub> afişează textul ca indice. Eticheta este o etichetă pereche şi nu are
atribute.
Exemplu:
pg020.html
<html><head><title>Eticheta <sub></title></head>
<body>
Formula generala a alcanilor este:
<br>
C<sub>n</sub>H<sub>2n+2</sub>, unde n reprezinta numarul de atomi de
C din molecula.
<br><br>
27
Denumire:
<br>
n = 1 : CH<sub>4</sub> metan
<br>
n = 2 : C<sub>2</sub> H<sub>6</sub> : CH<sub>3</sub> -
CH<sub>3</sub> etan
<br>
n = 3 : C<sub>3</sub> H<sub>8</sub> : CH<sub>3</sub> -
CH<sub>2</sub> - CH<sub>3</sub> propan
<br>
</body></html>
Eticheta <sup>
Eticheta <sup> afişează textul ca exponent. Eticheta este o etichetă pereche şi nu
are atribute.
Exemplu:
pg021.html
<html><head><title>Eticheta <sup></title></head>
<body>
28
Programul lui este:
<br>
<pre>
Program
Luni - Vineri 8<sup>00</sup> - 16<sup>00</sup>
Sambata 9<sup>00</sup> - 12<sup>00</sup>
Duminica Inchis
</pre>
<br>
</body></html>
Eticheta <p>
Eticheta <p> împarte textul în paragrafe. Eticheta de închidere </p> este
opţională. Acest tag are atributul align, care este folosit pentru specificarea alinierii
paragrafului. Paragraful poate fi aliniat la stânga (left), la dreapta (right) sau şi la stânga
şi la dreapta în acelaşi timp (justify). Valoarea prestabilită este “left”.
Exemplu:
pg022.html
<html><head><title>Eticheta <p></title></head>
<body>
29
Acesta este un text.
<p>Acesta este primul paragraf. El este aliniat la stanga… Acesta este primul
paragraf … Acesta este primul paragraf … Acesta este primul paragraf …
Acesta este primul paragraf … </p>
<p align=”center”>Acesta este al doilea paragraf . El este aliniat la centru… Acesta
este al doilea paragraf … Acesta este al doilea paragraf … </p>
<p align=”right”>Acesta este al treilea paragraf . El este aliniat la dreapta… Acesta
este al treilea paragraf … Acesta este al treilea paragraf … </p>
</body></html>
Etichetele <h1>, <h2>, …, <h6>

Etichetele <h1>, …,<h6> permit introducerea de titluri într-o pagină web.
Titlurile sunt afişate diferit faţă de restul textului. Există şase tipuri de titluri: <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>. Aceste etichete au şi etichete de închidere. Ele pot avea
atributul align, pentru alinierea lor. Acest atribut poate avea următoarele valori: “left”
(implicit), “right”, “center” sau “justify”.
Titlul <h1>…</h1> foloseşte cel mai mare şi mai îngroşat font, iar titlul <h6>…
</h6> foloseşte cel mai mic şi mai subţire font.
Exemplu:
pg023.html
<html><head><title>Etichetele titluri <h1>, …, <h6></title></head>
<body>
<h1>Acesta este primul titlu (cu h1). El este aliniat la stanga … </h1>
<h2 align=”center”>Acesta este al doilea titlu (cu h2). El este aliniat la centru… </h2>
<h6 align=”right”>Acesta este al treilea titlu (cu h6) . El este aliniat la dreapta… </h6>
</body></html>
Eticheta <center>
Eticheta <center> centrează entitatea (text, linie orizontală, imagine) într-o pagină
web. Titlurile sunt afişate diferit faţă de restul textului. Această etichetă are etichetă de
închidere.
Exemplu:
30
pg024.html
<html><head><title>Eticheta <center></title></head>
<body>
<center>Acesta este un text centrat.</center><br>
Urmeaza o linie orizontala centrata.
<center><hr width=50%></center><br>
<center> <img src=”imagine.jpg”></center>
</body></html>
Eticheta <font>
Eticheta <font> permite utilizatorului să aleagă caracteristicile fonturilor. Această
etichetă are etichetă de închidere. Ea poate avea următoarele atribute:
- face – specifică tipul de font care va fi utilizat în scrierea textului; există
următoarele tipuri de fonturi: Times New Roman, Arial, Courier,
Helvetica, Verdana, Tahoma, etc; pot fi specificate mai multe valori pentru
acest atribut, valori care sunt separate unele de altele prin virgulă; se caută
în lista de valori specificată şi se afişează textul cu primul tip de font găsit
pe calculatorul vizitatorului;
- size – specifică dimensiunea fontului; poate fi un număr între 1 şi 7, în
cazul dimensiunilor absolute şi între -1 şi -3 sau +1 şi +4, în cazul
dimensiunilor relative (caz în care se face raportarea la dimensiunea
curentă a fontului); implicit dimensiunea este 3;
- color – specifică culoarea fontului, adică culoarea de scriere a textului.
Este indicat să utilizăm tipuri de fonturi obişnuite, deoarece este posibil ca nu toţi
utilizatorii să aibe fonturi mai puţin folosite.
Exemplu:
pg025.html
<html><head><title>Eticheta <font></title></head>
<body>
<center>Acesta este un text centrat, in a carui scriere s-au folosit valorile implicite.
31
<br>
<font face=”TimesNewRoman,Arial,Courier,Helvetica” size=”5” color=”blue”>
Acesta este un text centrat, scris cu dimensiunea de 7 si culoarea albastra
</font></center>
</body></html>
Eticheta <basefont>
Eticheta <basefont> permite utilizatorului să aleagă caracteristicile fonturilor
pentru textul unei întregi pagini web. Această etichetă nu are etichetă de închidere. Ea
este inclusă în fişierul HTML după eticheta <body>. Ea poate avea următoarele atribute:
- face – specifică tipul de font care va fi utilizat în scrierea textului; tipurile
de fonturi cele mai des utilizate sunt: Times New Roman, Arial, Courier,
Helvetica, Verdana, Tahoma, etc; pot fi specificate mai multe valori pentru
acest atribut, valori care sunt separate unele de altele prin virgulă; se caută
în lista de valori specificată şi se afişează textul cu primul tip de font găsit
pe calculatorul vizitatorului;
- size – specifică dimensiunea fontului; poate fi un număr între 1 şi 7, în
cazul dimensiunilor absolute şi între -1 şi -3 sau +1 şi +4, în cazul
dimensiunilor relative (caz în care se face raportarea la dimensiunea
curentă a fontului); implicit dimensiunea este 3;
- color – specifică culoarea fontului, adică culoarea de scriere a textului.
Exemplu:
pg026.html
<html><head><title>Eticheta <basefont></title></head>
<body>
<basefont face=”TimesNewRoman,Arial,Courier,Helvetica” size=”5” color=”blue”>
Acesta este un text … Acesta este un text … Acesta este un text … Acesta este un
text … Acesta este un text … Acesta este un text … Acesta este un text …
Acesta este un text … Acesta este un text … Acesta este un text … Acesta
este un text … Acesta este un text … Acesta este un text … Acesta este un
32
Acesta este un text … Acesta este un text … Acesta este un text … Acesta
este un text … Acesta este un text … Acesta este un text … Acesta este un
Acesta este un text …
</body></html>
Eticheta <body>
Cu eticheta <body> se începe conţinutul paginii web. Ea are şi o etichetă de
închidere. Cele mai importante atribute ale acestei etichete sunt:
- bgcolor - specifică culoarea fundalului paginii web;
- text - specifică culoarea textului din pagina web;
- backgroud – specifică imaginea care va fi utilizată ca fundal pentru pagina
web;
- leftmargin – specifică distanţa dintre marginea din stânga a paginii şi
marginea din stânga a browser-ului;
- rightmargin – specifică distanţa dintre marginea din dreapta a paginii şi
marginea din dreapta a browser-ului;
- topmargin - specifică distanţa dintre marginea de sus a paginii şi marginea
de sus a browser-ului;
- bottommargin - specifică distanţa dintre marginea de jos a paginii şi
marginea de jos a browser-ului.
Exemplu:
pg027.html
<html><head><title>Eticheta <body></title></head>
<body bgcolor=”FFFF00” text=”FF0000” leftmargin=”30” topmargin=”30”>
Acesta este un text rosu pe fundal galben <br>
</body></html>
33
Caractere speciale
În mod obişnuit, într-o pagină web nu se scrie cu diacritice şi nu se folosesc
simbolurile. Pentru a putea folosi aceste caractere speciale, este necesar să cunoaştem
combinaţia de caractere corespunzătoare.
În tabelul de mai jos, sunt prezentate caracterele speciale împreună cu codurile
lor:
Â Â Â
Î Î Î
× × ×
Ø Ø Ø
â â â
î î î
÷ ÷ ÷
ø ø ø
Ş Ş
ş ş
Ţ Ţ
ţ ţ
€ € €
34
www.ecursuri.ro
Exemplu:
pg028.html
<html><head><title>Caractere speciale</title></head>
<body bgcolor=”FFFF00” text=”FF0000” leftmargin=”30”
topmargin=”30”>
Acesta este un text roşu pe fundal galben<br>
Acesta este simbolul plusminus ±<br>
</body></html>
7. Imagini
Imaginile folosite în cadrul paginilor web, le dau acestora un aspect mai atractiv şi
profesional. Ele sunt folosite nu numai pentru a da paginii web un aspect decorativ, ci şi
pentru a scoate în evidenţă mesajul transmis în cadrul acesteia.
Este indicat a se evita folosirea imaginilor în exces. În cazul în care nu se ia în
considerare acest lucru, ar duce la un aspect încărcat al paginii, precum şi la mărirea
timpului de încărcare a acesteia.
Cele mai răspândite formate de imagini sunt: .jpg, .jpeg şi .gif.
35
Formatul .gif (Graphics Interchange Format) este folosit pentru imagini de
dimensiuni reduse, cum ar fi: animaţii, butonoane, icon-uri. Acest format nu este indicat
pentru imagini de înaltă calitate.
Formatul jpeg (.jpg sau .jpeg) (Joint Photographic Expert Group) este utilizat
pentru fotografii, el oferind o calitate mai bună.
Pentru a introduce o imagine într-o pagină web, vom utiliza eticheta <img>
(image). Ea este etichetă singulară şi are următoarele atribute:
1. src (source) – specifică numele şi locaţia imaginii. Acest atribut are ca valoare adresa
URL a imaginii respective. Imaginea se poate afla în acelaşi folder cu fişierul HTML, caz
în care adresa URL este alcătuită doar din numele fişierului imagine: <img
src=”nume.extensie”>. Dar, imaginea se poate afla într-un alt folder decât cel în care se
află pagina web. În acest caz, vom avea grijă cum speficăm calea către fişierul imagine.
2. border – stabileşte un chenar pentru imaginea inserată în pagina web. Acest atribut
poate avea ca valoare un număr de pixeli, reprezentând grosimea chenarului.
3. alt – afişează un text alternativ atunci când browser-ul nu poate afişa imaginea
respectivă. Are ca valoare, textul care înlocuieşte imaginea: alt=”text alternativ pentru
imagine”.
4. align – permite alinierea imaginii faţă de text. Poate lua una din următoarele valori:
top – aliniază imaginea în partea cea mai de sus a rândului,
bottom - aliniază imaginea în partea cea mai de jos a rândului,
middle - aliniază imaginea cu mijlocul rândului,
left - aliniază imaginea în partea stângă a paginii,
right - aliniază imaginea în partea dreaptă a paginii.
5. height – stabileşte înălţimea imaginii în pixeli sau în procente %.
Imaginile pot fi folosite ca legături. Pentru aceasta folosim eticheta <a> …</a>,
cu atributul href, iar în locul textului legăturii vom folosi eticheta <img>.
Exemplu:
pg029.html
<html><head><title>Imagini</title></head>
<body>
imagine aflata in acelasi folder<br>
36
<img src="img1.jpg" border="5"><br>
urmeaza un text <br>
</body></html>
8. Legături
O legătură (link) transformă un text normal într-un hypertext. Cu ajutorul ei
putem trece de la o informaţie aflată într-o anumtă locaţie, la o altă informaţie, aflată într-
o altă locaţie. Putem avea legături în cadrul aceleaşi pagini, legături către o pagină aflată
în acelaşi folder, legături către o pagină aflată în alt folder, legături către pagini externe.
Pentru a insera o legătură într-o pagină web utilizăm eticheta pereche: <a> ...
</a>. Această etichetă are atributele href, target.
1. href - are ca valoare adresa URL a fişierului cu care facem legătura. Fişierul respectiv
poate fi un document html, o imagine sau poate fi de un alt tip. Între <a> şi </a> putem
plasa un text sau o imagine.
2. name – este utilizat în cazul în care dorim să realizăm o legătură în cadrul aceleaşi
pagini. În acest caz, vom defini punctul în care facem legătura. Acest atribut ia ca valoare
numele ancorei. În faţa numelui ancorei, obligatoriu se pune semnul „#”, la atributul href.
3. target – este un atribut utilizat pentru a deschide pagina accesată prin intermediul unei
legături într-o altă fereastră.
Exemplu de legătură în cadrul aceleaşi pagini:
pg030.html
<html><head><title>Legaturi</title></head>
<body>
<a name="ancora1"></a>
<h5 align="left">ancora definita in acelasi document</h5>
<br><br>ana <br><br>bianca <br><br>corina
<br><br>doina <br><br>elena <br><br>fiona
<br><br>gabriela <br><br>helen <br><br>ioana
<br><br>jeana <br><br>karina <br><br>liliana
<br><br>maria <br><br>nicoleta <br><br>oana
<br><br>petronela <br><br>rodica <br><br>sorina
37
<br><br>tatiana <br><br>urania <br><br>valeria
<br><br>wiki <br><br>zenovia <br><br>xena
<br><br>
<a href="#ancora1">sus</a>
<br><br>
</body></html>
9. Liste
Pentru a prezenta informaţiile cât mai organizat, putem utiliza listele. Acestea sunt
de trei tipuri: ordonate, neordonate şi de definiţii.
1. În cazul listelor ordonate, elementele acesteia sunt etichetate fie cu cifre, fie cu
litere. Etichetele pereche <ol>...</ol> încadrează elementele listei. Eticheta <li>
introduce un nou element în listă. Etichetele <ol> şi <li> pot avea atributul type. Acesta
stabileşte tipul numerotării. El poate lua următoarele valori:
A – ordonare de tip litere mari: A, B, C, ...
a - ordonare de tip litere mici: a, ,b, c, ...
I - ordonare de tip cifre romane mari: I, II, III, ...
i - ordonare de tip cifre romane mici: i, ii, iii, ...
1 - ordonare de tip cifre arabe: 1, 2, 3
Eticheta <ol> poate avea şi atributul start, care specifică valoarea de început a ordonării.
Acest atribut poate lua ca valoare un număr întreg pozitiv.
Exemplu:
pg031.html
<html><head><title>Lista ordonata
<ol type=”A” start=”5”>
Materii preferate
<li> Istorie<li> Biologie<li> Desen
<li> Muzica <li> Informatica
</ol></body></html>
38
2. În cazul listelor neordonate, elementele acesteia sunt marcate cu diferite
simboluri. Etichetele pereche <ul>...</ul> încadrează elementele listei. Eticheta <li>
introduce un nou element în listă. Etichetele <ul> şi <li> pot avea atributul type. Acesta
stabileşte simbolul aflat în faţa fiecărui element din listă. El poate lua următoarele valori:
„circle” pentru cerc, „square” pentru pătrat şi „disc” pentru disc plin.
Exemplu:
pg032.html
<html><head><title>
Lista neordonata
</title></head>
<body>
<ul type=”circle”>
Manuale de informatica
<li> PHP<li> JavaScript
<li> HTML<li> C
<li> Pascal</ul>
</body></html>
3. Listele de definiţii conţin diferite elemente, care sunt definite prin intermediul
altor elemente. Etichetele pereche <dl>...</dl> încadrează elementele listei de definiţii.
Eticheta <dt> introduce un nou element în listă, iar elementele ce definesc elementele
listei se introduc cu ajutorul etichetei <dd>.
Exemplu:
pg033.html
39
<html><head><title>
Lista de definitii
</title></head>
<body>
<dl>
<dt> home
<dd> casa, camin,domiciliu, azil
<dt> rose
<dd> trandafir, roz
<dt> bear
<dd> urs, a cara,a purta,a naste
</dl>
</body>
</html>
10. Tabele
Tabelele sunt utilizate în special pentru definirea aspectului unei pagini web,
permiţând alinierea corectă a elementelor în pagină.
Inserarea unui tabel într-o pagină web se realizează cu ajutorul etichetelor pereche
<table>...</table>.
Fiecare rând al tabelului se inserează cu ajutorul etichetelor pereche <tr>...</tr>.
Fiecare celulă se introduce cu etichetele pereche <td>...</td>. Eticheta </td> nu
este obligatorie.
Eticheta <table> poate avea atributul border, care poate lua valori întregi, acestea
reprezintând grosimea tabelului în pixeli.
Un alt atribut al etichetei <table> este align, care permite alinierea în pagină a
tabelului. Align poate lua una din valorile: „right”, „center”, „left”.
Atributul bgcolor permite stabilirea fundalului unui tabel. Acest atribut poate
apărea în etichetele <table>, <tr> şi <td>.
40
Eticheta <th> este utilizată pentru a insera celule care fac parte din antetul
tabelului.
Exemplu:
pg034.html
<html><head><title>Tabele </title></head><body>
<table bgcolor=”blue”
align=”center” border=”yellow”>
<tr><th> <font color=”red”>Ora<th><font color=”red”>Luni
<th> <font color=”red”> Marti <th> <font color=”red”>Miercuri
<th> <font color=”red”>Joi <th> <font color=”red”>Vineri </tr>
<tr><td>8.00-9.00<td>Romana <td>Engleza<td>Fizica <td>Romana
<td>Biologie</tr>
<tr><td>9.00-10.00<td>Geografie<td>Matematica<td>Fizica<td>Ed. Fiz.<td>
Matematica </tr> <tr><td> 10.00-11.00<td>Biologie<td>Matematica<td>Ed.
Fiz.<td> Franceza <td> Matematica </tr>
</table></body></html>
11. Cadre
Cadrele sunt folosite pentru afişarea simultană a mai multe documente HTML, în
aceeaşi fereastră a browser-ului.
41
Deşi cadrele permit o aranjare deosebită a paginilor web, acestea nu sunt totuşi
recomandate, deoarece duc la o viteză de încărcare greoaie a paginilor şi nu numai atât,
ele fac ca reţinerea adreselor paginilor încărcate în fiecare cadru să fie mai greu de
realizat.
Pentru a utiliza cadrele, vom înlocui etichetele pereche <body>...</body> cu
<frameset>...</frameset>.
Inserarea cadrelor se realizează cu ajutorul etichetei <frame>. Un atribut al acestei
etichete este src, care primeşte ca valoare adresa URL a documentului HTML care va fi
afişat în cadrul respectiv.
Atributul cols este folosit de eticheta <frameset> şi permite împărţirea ferestrei în
cadre de tip coloane, iar atributul rows permite împărţirea ferestrei în cadre de tip rânduri.
Cols şi rows pot lua ca valori, numere de tip întreg sau un număr de la 1 la 99 urmat de %
(reprezentând în procente dimensiunea ferestrei) sau n* (ceea ce înseamnă că linia sau
coloana respectivă ocupă a n-a parte din spaţiul rămas după dispunerea în fereastră a
liniilor sau coloanelor precedente).
Este bine de ştiut că putem include cadre în alte cadre, ceea ce înseamnă că pot fi
imbricate cadrele.
Pentru a adăuga o bară de derulare unui cadru, eticheta <frame> o vom utiliza cu
atributul scrolling, atribut care poate lua următoarele valori: „yes” (bara este prezentă
mereu), „no” (bara nu e disponibilă), „auto” (bara apare doar când este cazul).
Pentru poziţionarea unui document în interiorul unui cadru, vom utiliza eticheta
<frame> cu atributele marginheight şi marginwidth. Aceste atribute stabilesc distanţa
dintre marginea verticală, respectiv orizontală a cadrului şi conţinutul acestuia. Pot lua ca
valori un număr sau un % din înălţimea sau din lăţimea cadrului.
Exemplu:
pg035.html
<html>
<head><title>Cadre </title></head>
<frameset cols=”*,*,*”>
<frame src=”pg001.html”>
<frame src=”pg002.html” marginheight=”30”>
42
<frame src=”pg003.html” marginwidth=”70”>
</frameset>
</html>
12. Formulare
Prin intermediul formularelor se asigură interactivitatea cu vizitatorii site-ului,
putându-se colecta diferite informaţii de la aceştia.
Un formular este alcătuit din: câmpuri de editare, liste de selecţie, casete de
validare, butoane radio, butonul submit, butonul reset, etc, care permit utilizatorului să
introducă datele.
Inserarea unui formular într-o pagină web se realizează cu ajutorul etichetelor
pereche <form>...</form>. Un atribut pe care-l poate avea eticheta de deschidere este
action. Cu ajutorul acestuia se specifică browser-ului unde anume vor fi trimise datele
introduse de către vizitator. Acest atribut poate lua ca valoare adresa URL a script-ului
aflat pe server-ul care primeşte formularul. Un alt atribut al etcihetei <form> este method,
care specifică metoda utilizată de browser pentru trimiterea formularului. În cazul în care
acest atribut ia valoarea post, înseamnă că server-ul va furniza datele direct script-ului ca
date de intrare standard. O altă valoare pe care o poate lua acest atribut este get. În cazul
utilizării acestei valori, datele din formular sunt adăugate la adresa URL specificată de
43
action. Simbolul „?” este introdus între adresa URL şi date, iar simbolul „&” este
introdus între diferite seturi de date. Exemplu: „http://www.yahoo.com/cgi-
bin/nume_fis.cgi?nume1=valoare1&nume2=valoare2”.
Câmpurile de editare se introduc cu ajutorul etichetei <input>, cu atributul type
având valoarea „text”.
Atributul size al etichetei <input> specifică lăţimea câmpului de editare.
Atributul value specifică valoarea iniţială, iar atributul maxlength specifică
numărul maxim de caractere ce pot fi introduse în cadrul câmpului de editare.
Etichetele pereche <textarea>...</textare>, permit introducerea unui text pe mai
multe rânduri, în acest caz utilizându-se câmpurile de editare multilinie. Eticheta de
deschidere poate avea atributele rows şi cols. Atributul rows specifică numărul de rânduri
al câmpului de editare, iar atributul cols specifică numărul de coloane al câmpului de
editare.
Atributul type al etichetei <input> poate avea şi valoarea „password”. Această
valoare o vom utiliza în momentul în care dorim să introducem o parolă.
Atributul type al etichetei <input> poate avea şi valoarea „radio”, caz în care vom
introduce în formular butoane de tip radio, care ne permit să alegem o variantă de răspuns
din mai multe posibile.
O altă valoare pe care o poate lua atributul type al etichetei <input> este
„checkbox”, care permite inserarea în cadrul formularului de casete de validare.
Valoarea „file” pe care o poate lua atributul type al etichetei <input> permite
trimiterea unui fişier.
Listele de selectie sunt inserate într-un formular cu ajutorul etichetelor pereche
<select>... </select>. Atributul name specifică numele respectivei liste. Atributul value
atribuie o valoare de tip text ce va fi expediată server-ului, sub forma „name=value”.
Atributul size indică numărul de elemente care fac parte din listă. Atributul selected
selecteză implicit un element din listă.
Butonul submit se poate insera în cadrul formularului cu ajutorul etichetei
<input>, cu atributul type, având ca valoare „submit”. Dacă dorim să modificăm valoarea
butonului, putem să o facem cu ajutorul atributului value, care va lua ca valoarea noua
denumire a acestui buton.
44
Butonul reset se poate introduce într-un formular cu ajutorul etichetei type, având
ca valoare „reset”. Acest buton permite revenirea la valorile prestabilite. Ca şi în cazul
butonului submit, dacă dorim să modificăm valoarea butonului, putem să o facem cu
ajutorul atributului value, care va lua ca valoarea noua denumire a acestui buton.
În cazul în care utilizăm eticheta <form>, cu atributul action având valoarea
„mailto:nume_utilizator@nume_domeniu” putem expedia formularul respectiv la adresa
de e-mail specificată.
Exemplu:
pg036.html
45
<html><head><title>Formulare</title></head>
<body>
<h5>Completati va rugam frumos urmatorul formular:</h5>
<form action="mailto:infonav27@yahoo.com" method="post">
nume:
<input name="textfield" type="text" size="25" maxlength="30"><br><br>
sex:
<input name="radiobutton" type="radio" value="radiobutton"> f
<input name="radiobutton" type="radio" value="radiobutton"> m <br><br>
varsta: <select name="varsta">
<option>15 ani</option><option>16 ani</option>
<option>17 ani</option><option>18 ani</option>
<option>19 ani</option></select><br><br>
disciplinele preferate:
<select>
<option value=desen>desen</option>
<option value=muzica>muzica</option>
<option value=biologie>biologie</option>
<option value=informatica>informatica</option>
<option value=matematica>matematica</option>
</select><br><br>
o impresie despre scoala contemporana:<br>
<textarea name="textarea" cols="50" rows="9"> </textarea> <br> <br>
poti sa ne trimiti poza ta:
<input type="file" name="poza"><br><br>
<input type="submit" value="trimite">
<input type="reset" value="sterge">
</form>
</body></html>
46
Concluzii
Limbajul HTML este un limbaj de marcare uşor de învăţat şi utilizat, expresiv şi
suficient de puternic în crearea paginilor web.
Posibilitatea inserării de secvenţe de scripting server-side (PHP, ASP) fac din
limbajul HTML alegerea potrivită în realizarea unei game largi de documente web, de la
simple colecţii de documente până la aplicaţii web complexe.
47

CAP.1 - Limbajul HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CAP.1 - Limbajul HTML

Încărcat de

Drepturi de autor:

Formate disponibile

CAP.

3. Structura unui document web

Introducând acest exemplu şi salvându-l cu numele de “pg002.html”, va apare

Un alt exemplu ar fi atributele color şi size pentru eticheta font.

Vom salva fişierul cu denumirea “pg004.html”

Observaţie. O etichetă poate avea oricâte atribute.

Culoare Nume culoare Cod culoare

Exemplu de utilizare a culorile în cadrul documentelor HTML:

1. <font> …</font> 2. <b> …</b>

Etichetele <h1>, <h2>, …, <h6>

S-ar putea să vă placă și