Chelaru Andreea Adina Html,css(1) (1) [625003]

Andreea Adina Chelaru
(EDIȚIE ELECTRONICĂ –CD-ROM, 2017)
ISBN 978 -973-0-23426-8
Botoșani
-2017–SSS
TTTYYYLLLEEE
SSSSSSCCCAAACCCAAADDDIIINNNGGG
HHHEEEEEETTT
Andreea Adina Chelaru
(EDIȚIE ELECTRONICĂ –CD-ROM, 2017)
ISBN 978 -973-0-23426-8
Botoșani
-2017–SSS
TTTYYYLLLEEE
SSSSSSCCCAAACCCAAADDDIIINNNGGG
HHHEEEEEETTT
Andreea Adina Chelaru
(EDIȚIE ELECTRONICĂ –CD-ROM, 2017)
ISBN 978 -973-0-23426-8
Botoșani
-2017–SSS
TTTYYYLLLEEE
SSSSSSCCCAAACCCAAADDDIIINNNGGG
HHHEEEEEETTT

2Cuprins
I.1. Justificarea temei alese ………………………….. ………………………….. ………………………….. 4
II. LIMBAJUL HTML ………………………….. ………………………….. ………………………….. ……….5
II.1. Conceptul Hipertext ………………………….. ………………………….. ………………………….. …5
II.2. HTML-noțiuni introductive ………………………….. ………………………….. ………………… 6
II.3. Formatarea textului HTML ………………………….. ………………………….. …………………… 9
II.4. Etichete pentru aranjarea elementelor în pagină ………………………….. …………………. 12
II.5. Imagini ………………………….. ………………………….. ………………………….. ………………… 15
II.6. Hiperlink -uri………………………….. ………………………….. ………………………….. …………17
II.7.Tabele ………………………….. ………………………….. ………………………….. …………………… 18
II.8. Defilarea textului/imaginii ………………………….. ………………………….. ………………….. 21
II.9. Videoclipuri in -line………………………….. ………………………….. ………………………….. ..21
II.10. Cadre ………………………….. ………………………….. ………………………….. …………………. 22
II.11. Formulare ………………………….. ………………………….. ………………………….. …………… 25
II.11.1. Casete de text ………………………….. ………………………….. ………………………….. ..25
II.11.2. Câmpuri textarea ………………………….. ………………………….. ……………………….. 26
II.11.3. Casete pentru parole ………………………….. ………………………….. …………………… 27
II.11.4. Casete Check box ………………………….. ………………………….. ………………………. 28
II.11.5. Buton radio ………………………….. ………………………….. ………………………….. …..28
II.11.6. Casete pentru upload ………………………….. ………………………….. ………………….. 29
II.11.7. Buton simplu ………………………….. ………………………….. ………………………….. …29
II.11.8. Buton Submit ………………………….. ………………………….. ………………………….. ..30
II.11.9.Buton Reset ………………………….. ………………………….. ………………………….. ……31
II.11.10. Elemente select ………………………….. ………………………….. ……………………….. 31
II.12 Concluzii ………………………….. ………………………….. ………………………….. …………….. 33
III. CSS (Cascading Style Sheets) ………………………….. ………………………….. ………………….. 34
III.1 Noțiuni introductive despre CSS ………………………….. ………………………….. ………….34

3III.2. Stabili rea culorii de fundal ………………………….. ………………………….. ………………… 35
III.3. Formatarea textului ………………………….. ………………………….. ………………………….. .35
III.3.1 Culoarea textului ………………………….. ………………………….. …………………………. 35
III.3.2 Stilul textului ………………………….. ………………………….. ………………………….. ….36
III.3.3 Indentarea textului ………………………….. ………………………….. ………………………. 36
III.4. Stilurile legăturilor ………………………….. ………………………….. ………………………….. ..36
III.5. Stiluri pentru liste ………………………….. ………………………….. ………………………….. …37
III.6. Tabele cu CSS ………………………….. ………………………….. ………………………….. ……..37
III.7. Comentarii în CSS ………………………….. ………………………….. ………………………….. ..38
III.8. Poziționarea elementelor CSS ………………………….. ………………………….. ……………. 38
III.9. Atributul f loat………………………….. ………………………….. ………………………….. ………40
III.10. Atributul clear ………………………….. ………………………….. ………………………….. …….41
III.11.Clase CSS ………………………….. ………………………….. ………………………….. ………….42
III.12 Concluzii ………………………….. ………………………….. ………………………….. ……………. 43
Bibliografie ………………………….. ………………………….. ………………………….. …………………….. 44

4I. INTRODUCERE
I.1. Justificarea temei alese
Documentul de bază accesat atunci când navigăm pe Internet este pagina web.
Paginile web sunt adesea scrise folosind limbajul HTML sau XHTML, iar pentru a obține
efecte deosebite se pot folosi foi de stil sau diverse scripturi (Javascript). Pentru a
interacționa cu utilizatorii se folosesc formulare. Pent ru a accesa datele dintr -un formular
HTML se poate utiliza limbajul PHP.
Paginile web sunt importante pentru a te face cunoscut în mediul online, pentru a
atrage atenția vizitatorilor ce pot deveni ulterior clien ți/utilizatori. Funcțiile de bază ale
uneipagini web sunt: informarea, marketingul și promovare imaginii unei companii, firme,
instituții etc.
Lucrarea de față își propune să fie o unealtă didactică care să îi poată ajuta pe elevi
în procesul de învățare , conținând și câteva detalii tehnice, cum ar fiprezentarea
limbajului HTML, a foilor de stil .

5II. LIMBAJUL HTML
II.1. Conceptul Hipertext
Unul din primele elemente fundamentale ale WWW (World Wide Web) este
HTML (Hypertext Markup Language), care descrie formatul în care documentele su nt
distribuite și văzute pe Web. Primele specificații de bază ale Web -ului au fost HTML,
HTTP șiURL.
HTML a fost dezvoltat de Tim Berners -Lee la CERN în 1989. HTML a fost creat
ca o posibilitate pentru fizicieni să schimbe între ei informație prin inter mediul
Internetului, indiferent de computerele folosite. La dezvoltarea limbajului HTML s -aținut
cont de câteva trăs ături: independența de platformă , posibilități hypertext și structurarea
documentelor. Independen ța de platform ă înseamnă că un document po ate fi afișat în mod
asemănător p e computere diferite (deci cu font, grafic ăși culori diferite ).
HTML (Hyper Text Mark -up Language) este codul care stă la baza paginilor web.
HTML este un limbaj de marcare și nu unul de programare. El oferă posibilitatea de a
opera cu facilitățile multimedia oferite de WWW. Spre deosebire de limbajul C++ limbajul
HTML nu este case -sensitive, adică etichetele pot fi scrise atât cu litere mici cât și cu litere
mari. Pentru a realiza setările dorite se folosesc etichete. Fie care etichetă poate avea unul
sau mai multe atribute care sunt opționale, adică pot lipsi. În acest caz pentru etichetă se
vor folosi valorile implicite. Dacă totuși dorim să folosim atribute, ar trebui să știm că nu
contează ordinea în care sunt scrise at ributele etichetei.
Limbajul HTML ține cont de câteva trăsături precum: independența de platforma,
posibilități hypertext și structurarea documentelor. Independenta de platforma înseamnă ca
un document poate fi afișat în mod asemănător de computere diferi te (font, grafica, culori).
Limbajul de marcare permite transformarea oricărui text într -un hipertext prin
introducerea unor marcaje, care vor indica modul în care se efectuează legăturile
documentului, cum vor apărea paginile documentului etc. Un documen t HTML poate fi
făcut public dacă este pe un calculator care are acces la Internet. Un document făcut public
poate fi văzut din orice punct al Internet -ului.
SGML, Standard Generalized Markup Language, părintele HTML -ului, a devenit în
1986standard ISO. Fiecare document SGML are asociat o definire a tipului de document
(DTD) care definește regulile pentru conținutul documentului. Fiecare versiune de HTML
a fost definită într -un DTD.

6HTML 1.0 si HTML+ au apărut în 1990, respectiv 1993.
HTML 2.0, apărut în 1994, a fost prima versiune standardizată. Ea conține 49 de
taguri.
HTML 3.0 a apărut în 1995. Versiunea cuprindea extensii importante, cum ar fi
marcaje pentru notații matematice, bannere etc. În prezent nu mai este utilizat.
HTML 3.2, introdus în 1 996, este considerat ca succesorul versiunii 2.0,
încorporând o serie de taguri din HTML 3.0.1
HTML 4.0 a fost dezvol tat pentru a suporta mai multe opțiuni multimedia, limbaje
de tip script, foi de stil, mai bune opțiuni de imprimare și pentru a furniza d ocumente mai
accesibile utilizatorilor cu dizabilități. HTML 4.01 a fost publicat în 1999 și apoi completat
în 2001. În 2004 a început dezvoltarea versiunii HTML 5, la care au fost adăugate
etichete noi precum <video>, <audio>, <object>.
Un hipertext este un text afi șat pe un monitor de c omputer sau pe alte dispozitive
periferice de ieșire, cu referin țe (hiperlinkuri) către alt text pe care cititorul poate imediat
să-l acceseze, sau cu referin țece pot dezvălui în mod progresiv textul.
Noțiunea de hiperte xt a fost inventată în 1965 de către Ted Nelson care îl define ște
ca: „material scris sau grafic interconectat într -o manieră complexă, care în mod
convențional nu poate fi reprezentat pe hârtie”. Hipertextul reprezintă modalitatea în care
se trece de la o pagină la alta a unui site.
Documentele HTML sunt documente în format ASCII și prin urmare pot fi create
cu orice editor de texte.
II.2. HTML -noțiuni introductive
Un document HTML are următorul ciclu de viață:
1.Editarea fișierului HTML cu ajutorul un ui editor de texte (ex. Notepad)
2.Salvarea fișierului editat folosind extensia htm sau html
3.Vizualizarea paginii cu ajutorul unui browser (ex. Internet
Explorer)
Elementele standard ale unui document HTML sunt:
<html>
<head>
</head>
<body>
</body>
</html>
1http://profs.info.uaic.ro/~val/istoric.html
Figura1-Structura unei pagini web

7În secțiunea de antet,adică în c orpul etichetei pereche <head>… </head>, sunt furnizate
informații browser -ului și server -ului pe care este documentul. În partea de antet pot fi
folosite etichetele:
-<title></title>
-<bgsound>
-<meta>
Între<title>… </title> se trece un șir de caractere care reprezintă titlul, ce va fi afișat în bara
de titlu în momentul execuției.
Eticheta <bgsound> ne permite să lansăm în execuție un fișier de sunet din HTML.Dacă
documentul este publicat în Internet este indicat ca dimensiunea să fie cât mai mică (să fie
folosit formatul mid sau rm). Atributele etichetei sunt:
src–calea către fișierul sunet ;
loop=”nr” –numărul de repetări a sunetului (dacă nr= -1 sunetul este redat la
infinit).
Eticheta <meta> furnizează informații browser -ului sau motoarelor de căutare, stabilește
tipul limbajului de scripturi folosit în acel document, stabilește un mod grafic de
deschidere sau de închidere a documentului HTML.
Exemple:
<meta name=”description” content =”scurtă descriere a conținutului documentului”>
<meta name=”keywords” content =”cuvinte cheie din document separate prin ,”>
<meta name =”author” content =”numele autorului”>
<meta http-equiv=”expires” content=”… ”>
<meta http -equiv =”Content_Script_Type” content=”text javascript”>
<meta http -equiv =”Content_Script_Type” content=”text/css””>
<meta http -equiv =”page-enter” content =”revealtrans (duration=3, transition= 17)”>
<meta http -equiv =”page-exit” content =” revealtr ans (duration=5, transition= 21”>
<meta http -equiv = „refresh” content =”10 ”; URL=http://www.kappa.ro”> -după 10
secunde documentul va fi închis și browser -ul va înc ărca pagina de la adresa dată de URL.
URL(Uniform Resource Locator) este un mecanism comun pentru identificarea unică a
informației din spațiul de date.
Exemplul1 prezintă eticheta <title>…</title>, care va atribui un titlu paginii.

8<html>
<head><title>Acesta este
titlul primei
pagini.</title></head>
<body>
Prima linie
A doua linie
A treialinie
</body>
</html>Figura2-Pagina web obținută folosind codul
HTML alăturat
În secțiunea de corp,adică în c orpul etichetei pereche <body>… </body> pot fi
folosite următoarele atribute:
bgcolor =”culoare”/”RRGGBB”,unde R,G,B iau valori de la 0 la F ;
background =”adresa URL sau calea relativă către un fișier imagine” -setează o
imagine în background și dezactivează bgcolor ;
bgproperties = ”fixed ”–determin ăbackground fix, adică la deplasarea scroll -ului se
va deplasa doa r conținutul fără background ;
text = ”culoare” –stabilește culoarea textului din pagină ;
link = ”culoare” –stabilește culoarea link -urilor din pagina, implicit este albastru ;
alink = ”culoare” –stabilește culoarea link -urilor active din pagină ;
vlink = ”culoare” –stabilește culoarea link -urilor vizitate din pagină .
Exempul 2 prezintă blocuri preformatate, adică blocuri care apar în pagina web respectând
aranjarea din Notepad.
<html>
<head><title>Acesta este titlul
primei pagini.</title>
</head>
<body>
<pre>
Prima linie
A doua linie indentata
A treia linie de doua
ori indentata
</pre>
</body>
</html>Figura3-Pagina web obținută folosind codul
HTML alăturat
Exemplul 3 prezintă atributul bgcolor cu ajutorul căruia se stabilește culoarea fond pentru
pagina web.
<html>
<head>
<title>Ex.3</title>
</head>
<body bgcolor="yellow">
Aceasta este o pagina WEB<BR>
cu fondul de culoare galben.
</body>
</html> Figura4-Pagina web obținută folosind codul
HTML alăturat

9Exemplul 4 prezintă atributul text care stabilește culoarea textului din pagina web.
<html>
<head>
<title>Ex.4</title>
</head>
<body bgcolor="yellow" text="red">
Aceasta este o pagina WEB<BR>
cu fondul de culoare galben.
</body>
</html>
Figura5-Pagina web obținută folosind codul
HTML alăturat
Exemplul 5 prezintă două din atributele (leftmargin, topmargin, rightmargin,
bottommargin) cu ajutorul cărora se pot stabili marginile unei pagini web .
<html>
<head><title>Ex.5</title>
</head>
<body leftmargin="100"
topmargin="10%">
Pagina cu margini<BR>
</body>
</html> Figura6-Pagina web obținută folosind codul HTML
alăturat
II.3. Formatarea textului HTML
<font face= ”…” color=”…” size=”…”>… </font>
Face, color și size sunt atributele etichetei <font> și realizează după cum urmează:
face –seteazătipul fontului (Arial, Verdana, etc.);
color –stabilește culoarea fontului ;
size–stabilește mărimea fontului .
Etichetele pentru stabilirea stilului scrisului dintr -o pagină web sunt:
<b>….</b> -face textul îngroșat/aldin ;
<i>….</i> -face textul înclinat/cursiv ;
<u>….</u> -face textul subliniat ;
<s>….</s> -face textul tăiat .
Etichetele pentru scrierea cu indice sau exponent sunt:
^…. -afișează textul mai sus decât textul de baz ă;
_…. -afișează textul mai jos decât textul de baz ă.
Exemplul 6 prezintă atributul color al etichetei font, atribut care permite schimbarea
culorii fiecărui caracter din textul unei pagini web.

10<html>
<head><title>Exemplu </title></head>
<body>
Aceasta linie e scrisa cu caractere
normale<br>
Aici <font color=”red”> fiecare
</font>
<font color=”green”> cuvant</font>
<font color=”blue ”>are</font>
<font color=”yellow”>alta</font>
<font color=”olive”>culoare</font>
<font color=”red”> M </font>
<font color=”gray”> O </font>
<font color=”cyan”> Z </font>
<font color=”magenta”> A </font>
<font color=”lime”> I </font>
<font color=”black”> C </font>
</body></html>
Figura7-Pagina web obținută folosind codul
HTML alăturat
Exemplul7 prezintă atributul size al etichetei font, atribut care permite schimbarea
dimensiunii fiecărui caracter din textul unei pagini web. Atributul siz e poate lua valori de
la 1 la 7.
<html>
<head>
<title>Exemplu </title>
</head>
<body>
Aceasta linie este s crisa cu caractere
normele<br>
<font size=”6”> Fonturi de marime
6</font><br>
<font size=”4”> Fonturi de marime
4</font><br>
<font size=”-3”> Fonturi de marime
1</font><br>
<font size=”+2”> Fonturi de marime
2</font><br>
</body></html
Figura8-Pagina web obținută folosind codul
HTML alăturat
Înexemplul8 sunt prezentate etichetele pentru stabilirea stilului textului.
<html>
<head>
<title>Ex. 8 </title>
</head>
<body>
Aceasta linie este formata din este
formatadin text normal<br>
<b> Aceasta linie este scrisa cu
caractere ingrosate</b><br>
<i> Aceasta linie este scrisa cu
caractere inclinate</i><br>
<u> Aceasta linie este scrisa cu
caracteresubliniate</u><br>
<s> Aceasta linie este scris a cu
caractere taiate</s><br>
In aceasta linie doar cuvantul
<b>gros</b> este ingrosat, iar cuvantul
<i>italic</i>este inclinat.
</body></html>Figura9-Pagina web obținută folosind codul
HTML alăturat

11Exemplul9 reflectă efectul etichetei <big> și anume mărește caracterele pentru care este
aplicat.
<html>
<head>
<title>Caractere marite </title>
</head>
<body>
Linie cu text normal. <br>
<big> Linie scrisa in intregime
cu caractere marite.</big><br>
Normal <big> marit <big> mai mare
<big> si mai
mare</big></big></big>
</body>
</html>
Figura10-Pagina web obținută folosind codul
HTML alăturat
Exemplul 10 reflectă efectul etichetei <small> și anume micșorează caracterele pentru
care este aplicat.
<html>
<head>
<title> Caractere
micsorate</title>
</head>
<body>
Linie cu text normal. <br>
<small> Linie scrisa in
intregime cu caractere
micsorate cu o
unitate.</small><br>
Normal <small> micsora t <small>
mai mic <small> si mai
mic</small></small></small>
</body>
</html>
Figura11-Pagina web obținută folosind codul HTML
alăturat
Exemplul11 reflectă modul de scriere cu caractere ”indice ”(eticheta _…)și
modul de scriere cu caractere ”exponent” (eticheta ^…)
<html>
<head><title>Indice si exponent
</title></head>
<body>
Linie cu text normal. <br>
In aceasta linie ^sus
este superscript, iar _jos este subscript. <br>
F_(y) = (x₁
+ x₂)²
</body>
</html>Figura12-Pagina web obținută folosind codul HTML
alăturat

12II.4. Etichete pentru aranjarea elementelor în pagină
Pentru aranjarea conținutului unei pagini web se poate folosi una dintre etichetele de mai
jos:
<center>… </center> -centrează conținutul ;
<br>-trece conținutul ce urmează pe linie nouă ;
<blockquote>… </blockquote> -creează un citat ;
<div>…</div>-aliniază elementele din pagină ;
<p align=”left/center/right/justify”>…..</p> -creează un nou paragraf aliniat.
Atributul align este opțional, dacă acesta este omis alinierea implicită este la stânga.
<hr color=”culoare” width= ”lungime” size=”pixeli” align=”left/center/right”> –
desene ază o linie orizontală; nu contează ordinea atributelor în etichetă; width se
completează cu un număr de pixeli (ex. 100,200,..) sau cu un procentaj (ex. 50%,
adică 50% din pagină). În cazul în care atributele sunt omise se va desena o linie de
culoare gri și lungime 100%.
<hi>…</hi> -creează titluri într -o pagină, i -este un număr cu valori de la 1 la 6,
h1 este cea mai mare mărime (echivalentul lui Titlu1 din MS Word), iar h6 cea mai
mică (H=header) ;
<ul type=”disc/square/circle”> -construiește o lis tăneordonată de elemente (ul –
unordered list) ;
<ol type=”1/a/A/i/I”> -construiește o list ăordonat ăde elemente (ol –ordered list) ;
<li>….</li> -definește un element de list ăordonat ăsau neordonat ă.
Înexemplul 12este prezentată o linie implicită și una în care se folosesc doar atributele
aliniere, lungime și grosime.
<html>
<head>
<title>Ex. 12 </title>
</head>
<body>
<font color="red"
align="center">Tipuri de linii
orizontale</font><br>
Urmeaza o linie implicita(aliniere
stg, latime 100%, grosime 2)
<hr>
Urmeaza o linie aliniata centru , de
latime 50%, grosime 5
<hr align="center" width="50%"
size="5">
</body>
</html>Figura13-Pagina web obținută folosind codul
HTML alăturat

13Exemplul 13 prezintă tipuri de linii aliniate și colorate.
<html>
<head>
<title>Ex. 13 </title>
</head>
<body>
<center>
<hr width=10% color="orange">
<hr width=40%>
<hr width=70% color="red">
<hr width=100%>
<hr width=70% color="green">
<hr width=40%>
<hr width=10%color="purple">
</center></body></html>Figur-Pagina web obținută folosind codul HTML
alăturat a14
Exemplul 14 ne arată cum putem crea un citat într -opagină web, folosind eticheta
<blockquote> …</blockquote>.
<html>
<head>
<title>Ex.14</title></head>
<body>
Constantin Brancusi obisnuia sa
spuna:
<blockquote>
<i>Simplitatea</i> nu este un scop
in arta, insa ajungi la simplitate
fara voia ta, apropiindu -te de
sensul cel real al lucrurilor.
Simplitatea este in sine o
complexitate–si trebuie sa te
hranesti cu <i>esenta</i>, ca sa
poti sa ii intelegi valoare.
</blockquote>
</body></html>Figura15-Pagina web obținută folosind codul HTML
alăturat
Exemplul 15 prezintă metode de aliniere a datelor folos ind eticheta <div>…</div>
<html>
<head><title>Ex.15</title></head>
<body>Aceasta este o linie normala.
Urmatorul text va fi aliniat la
dreapta:
<div
align="right">Motto:<br>"Misiunea
artei este sa creeze <i>
bucurie</i><br>si nu se poate crea
artisticdecat<br>in echilibru si
in pace
sufleteasca.."<br><i>Constantin
Brancusi</i></div>
Urmatorul bloc este aliniat la
centru:
<div align ="center">
"De cand viata mea te stie<br>
o suferinta port mereu;<br>
Frumusetea ta-i o poezie, <br>pe
care n-am facut-o eu."<br><i>Lucian
Blaga:
Catren</i></div></body></html>Figura16-Pagina web obținută folosind codul HTML
alăturat

14Înexemplul 16 sunt prezentate două exemple liste neordonate.
<html>
<head>
<title>Ex. 16 </title>
</head>
<body>
<font size = "5"> O lista
neordonata</font>
<ul type="circle"> Pentru a cunoaste
Internet-ul trebuiesa studiati
urmatoarele carti:
<li> HTML<-li>
<li> JavaScript
<li> Java
</ul>
<ul type="square"> Seria Internet va
cuprinde urmatoarele carti:
<li> HTMLprin exemple
<li> JavaScript prin exemple
<li> Java prin exemple
</ul>
</body>
</html>Figura17-Pagina web obținută folosind codul HTML
alăturat
Înexemplul 17 sunt prezentate două exemple liste ordonate.
<html>
<head>
<title>Ex. 17 </title>
</head>
<body>
<font size = "5"> O lista
ordonata</font>
<ol type="A"> Pentru a cunoaste
Internet-ul trebuiesa studiati
urmatoarele carti:
<li> HTML
<li> JavaScript
<li> Java
</ol>
<ol type="I"> Seria Internet va
cuprinde urmatoarele carti :
<li> HTML prin exemple
<li> JavaScript prin exemple
<li> Java prin exemple
</ol>
</body>
</html>Figura18-Pagina web obținută folosind codul HTML
alăturat

15Exemplul 18 prezintă o lista ordonată ce conțineliste ordonate și neordonate.
<html>
<head><title>Ex. 18< /title></head>
<body>
<font size = "5"> O lista ordonata
de liste ordonate si
neordonate</font>
<ol> Un sistem informatic include:
<li>Hardware:
<ol><li>placa de baza
<li> microprocesor
<li> memorie
</ol>
<li>Software de baza:
<ul type="square">
<li> Windows
<li> Unix
<li> MAC
</ul>
<li>Software de aplicatie
<ol type="a">
<li>AutoCad
<li> MicroSoft Office
<li> Corel Draw
</ol>
</ol></body></html>Figura19-Pagina web obținută folosind codul
HTML alăturat
II.5. Imagini
Formatele acceptate de browsere pentru fișierele imagine sunt:
gif (GRAPHICS INTERCHANGE FORMAT) ;
jpeg (JOINT PHOTOGRAPHIC EXPERTS GROUP) ;
xpm (X PIXMAP) ;
xbm (X BITMAP) ;
bmp (BITMAP) ;
dib(DEVICE INDEPENDENT BITMAP) ;
tiff (TAGGED IMAGE FILE FORMAT) ;
pcx (PC PAINTBRUSH) ;
png (PORTABLE NETWORK GRAPHICS) .
URL (Uniform Resource Locator) este un standard folosit pentru identificarea unică a unei
resurse în Internet. Pentru a insera o imagine se utilizează eticheta
<img src=”adresa url sau calea relativ ăa unui fișier imagine” border=”pixeli”
width=”lungimea” height=” înălțimea”>, unde width și height pot fi completate înpixeli sau
procente.

16Exemplul 19 ne arată modul de inserare a imaginilor într -o pagină web, prima imagine
este preluată dintr -un fișier de pe PC, din același folder cu pagina, iar a doua imagine este
preluată de la o adresă URL.
<html>
<head><title> Ex.19 </title>
</head>
<body>
<hr size=30 color=red>
<img src=catel.jpg height="70 "
width="90">
<h1><center>
salut!</center></h1>
<center>
<font face="courier, arial"
color="red" size="6"><p> ma numesc
motanel!</p></font></center>
<center>
<img
src=http://www.universdecopil.ro/ima
ges/stories/educatie/ghicitori/pisic
a.jpg height="60"
width="70"></center>
<hr size=30 color=red>
<i>pisica@k.ro</i><hr color=red>
</body>
</html>
Figura20-Pagina web obținută folosind codul HTML
alăturat
Înexemplul 20 vedem modul de alinierea al unei imagini pe verticală, rapo rtarea făcându –
se la linia de text.
<html>
<head><title> Ex.20 </title>
</head>
<body>
<h1><center>Alinierea unei imagini
pe verticala</center></h1>
Sus <img src=catel.jpg
height="70" width="90"
align="top">
La mijloc <img src=catel.jpg
height="70" width="90"
align="middle">
Jos <img src=catel.jpg height="70"
width="90" align="bottom">
</body>
</html> Figura21-Pagina web obținută folosind codul HTML
alăturat
Încadrarea unei imagini în text se face ca în exemplul 21 , adicăfolosind atributul align
pentru eticheta <img>

17<html>
<head><title> Ex.21 </title>
</head>
<body>
<h1><center>Incadrare
imagine</center></h1>
Text inainte de imagine
Text inainte de imagine Text
inainte de imagine Text inainte
de imagine
<img src=catel.jpg height="70"
width="90" align="left">
Text dupa imagine Text
dupa imagine Text dupa imagine
Text dupa imagine Text dupa
imagine
</body>
</html>
Figura22-Pagina web obținută folosind codul
HTML alăturat
Exemplul 22 ne arată cum se stabilește o imagine pe fundalul unei pagini. Dacă imaginea
este de dimensiune mică atunci se va multiplica de mai multe ori astfel încât întreaga
pagină să aibe imaginea pe fundal.
<html>
<head><title> Ex.22 </title>
</head>
<body background=catel.jpg>
</body>
</html>
Figura23-Pagina web obținută folosind codul
HTML alăturat
II.6. Hiperlink -uri
<a href =”adresa url a unui document sau calea relativ ăcătre acesta”> -creează unlink la
documentul indicat de atributul href
Exemplul 23 prezintă modul de realizare a unei legături pe text către o pagină de pe PC și
către o adresă URL.

18<html>
<head>
<title>Ex. 23 </title></head>
<body>
<font size = "5"><center>Legaturi
catre o pagina si catre un site
</center></font>
<hr><a href=”p2.html”>Link catre
pagina 2</a>
<hr><a
href=”http://www.yahoo.com”>Link
catre www.yahoo.com</a>
</body>
</html>Figura24-Pagina web obținută folosind codul
HTML ală turat
Înexemplul 24 sunt făcute legături pe imagini.
<html>
<head>
<title>Ex. 24 </title>
</head>
<body>
<font size = "5"><center>Legaturi
catre o pagina si catre un site
</center></font>
<hr>
<a href=”p2.html”><img
src="buton.png"></a>
<hr>
<ahref=”http://www.yahoo.com”>
<img
src="https://pmcdeadline2.files.word
press.com/2014/06/yahoo -logo.jpg"
height="50" width="60"></a>
</body>
</html>Figura25-Pagina web obținută folosind codul
HTML alăturat
II.7.Tabele
Pentru inserarea unui tabel se folosește eticheta
<table width=”pixeli/procent” border=”pixeli” align=”left/center/right” bgcolor=”culoare”
cellpadding=”pixeli/procent” hspace=”pixeli” vspace=”pixeli”>, unde:
width=”pixeli/procent” –lățimea tabelului ;
border=”pi xeli” –chenarul unui tabel ;
align=”left/center/right” –alinierea tabelului ;
bgcolor=”culoare” –culoarea de fond a tabelului ;
cellpadding=”pixeli/procent” –distanța dintre conținut și marginea unei celule ;
hspace= ”pixeli” –distanța orizontal ădintre tabel și textul înconjurător ;
vspace=”pixeli” -distanța vertical ădintre tabel și textul înconjură tor;
<tr>-definește un rând al tabelului ;

19<td align=”left/center/right/justify” bgcolor=”culoare”colspan=”numă r”
height= ”pixeli/procent” width= ”pixeli/procent” rowspan=”numă r”
valign=”top/middle/bottom”> -definește o dat ădin tabel;
align=”left/center/right/justify” –alinierea pe orizontal ă;
bgcolor=”culoare” –culoarea unei celule ;
colspan=”num ăr”-numărul de coloane lipite ;
height= ”pixeli/pr ocent”-înălțimea celulei ;
width=”pixeli/procent” –lățimea celulei ;
rowspan=”numar” –numărul de rânduri lipite ;
valign=”top/middle/ bottom” –alinierea pe verticală.
Exemplu 25 prezintă modul de realizare al unui tabel.
<html>
<head>
<title>Ex. 25 < /title>
</head>
<body>
<font size = „5”><center> Un tabel
cu titlu</center></font>
<table border=”3”>
<tr>
<td> mure </td>
<td> zmeura</td>>
<td> afine</td></tr>
<tr>
<td> mere</td>
<td> pere</td>
<td> cirese</td></tr>
</table>
</body>
</html>Figura26-Pagina web obținută folosind codul
HTML alăturat
Pentru dimensionarea tabelului putem folosi atributele height și width ca în exemplul 26 .
<html>
<head>
<title>Ex. 26 </title></head>
<body>
<font size = „5”><center> Un tabel cu
titlu</center></font>
<table border="3"height="140"
width="150">
<tr><td> mure </td>
<td> zmeura</td>
<td> afine</td></tr>
<tr><td> mere</td>
<td> pere</td>
<td> cirese</td></tr>
</table>
</body>
</html>Figura27-Pagina web obținută folosind codul
HTML alăturat

20Exemplul 27 reflectă modul de îmbinare arândurilor folosind atributul rowspan.
<html>
<head><title>Ex. 27</title></head>
<body>
<table border="1">
<caption>Contact</caption>
<tr><th>Name:</th>
<td>Popescu Ionel</td>
</tr>
<tr><th rowspan="2">Telefon:</th>
<td>555 77 854</td>
</tr>
<tr><td>555 77 855</td></tr>
</table>
</body>
</html>Figura28-Pagina web obținută folosind codul
HTML alăturat
Exemplul 28 reflectă modul de îmbinare a rândurilor folosind atributul rowspan.
<html>
<head><title>Ex. 28</title></head>
<body>
<table border="1" bordercolor="violet"
width="70%">
<caption>Economii lunare</caption>
<tr><th>Luna</th>
<th>Suma</th></tr>
<tr><td colspan="3">
<center>Trimestrul I</center</td></tr>
<tr><td>Ianuarie</td>
<td>100 lei</td></tr>
<tr><td>Februarie</td>
<td>50 lei</td></tr>
<tr><td>Martie</td>
<td>75 lei</td></tr>
</table>
</body>
</html>Figura29-Pagina web obținută folosind codul
HTML alăturat
Exemplul 29 arată modul în care fiecare coloană a unui tabel poate fi dimensionată.
<html>
<head><title>Ex. 29</title></head>
<body>
<table border="1" bordercolor="cyan">
<caption>Coloane dimensionate</caption>
<tr><th width="100">100 pixeli</th>
<th width="200">200 pixeli</th>
<th width="300">300 pixeli</th>
</tr>
<tr><td bgcolor="red">RO</td>
<td bgcolor="yellow">M&Acirc;</td>
<td bgcolor="blue">NIA</td>
</tr>
</table>
</body>
</html>Figura30-Pagina web obținută folosind codul
HTML alăturat

21II.8. Defilarea textului/imaginii
Eticheta care creează o zonă în care defilează un text sau o imagine este
exemplificată mai jos:
<marquee align=”top/middle/bottom” behavior=”scroll/slide/alternate”
height=”pixeli/p rocent” width=”pixeli/procent” loop=”numar”
bgcolor=”culoare” scrolldelay=”numar”>
Eticheta <marquee>… </marquee> are următoarele atribute:
align=”top/middle/bottom” –alinierea pe verticală ;
behavior=”sc roll/slide/alternate” –modul de deplasare ”continuu/se oprește la
margine/stânga -dreapta ”;
height=”pixeli/procent” –înălțimea zonei de defilare ;
width=”pixeli/procent” –lățimea zonei de defilare ;
loop=”număr” –numărul de defilări, dac ănumăr=-1 defile ază la nesfârșit ;
bgcolor=”culoare” –culoarea de background a zonei de defilare ;
scrolldelay=”număr” –numărul de milisecunde între dou ădefilări consecutive .
Înexemplul 30 se reflectă modul de utilizare a etichetei <marquee>… </marquee> atât
asupra tex tului, cât și asupra imaginii.
<html>
<head><title>Ex. 30</title></head>
<body>
<marquee align="top"
behavior="scroll" height="10%"
width="50%" loop=" -1" bgcolor="lime"
scrolldelay="1">
text care defileaza</marquee><br>
<marquee align="bottom"
behavior="alternate" loop=" -1">
<img src=catel. jpg height="70"
width="90"></marquee>
</body></html>Figura31-Pagina web obținută folosind codul
HTML alăturat
II.9. Videoclipuri in -line
Exemplul 31 prezintă modul de inserare a unui filmuleț preluat de la o adresă URL.
<html>
<head><title>Ex. 31</title></head>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/Jko8
WUs5kK8" frameborder="0"
allowfullscreen></iframe>
</body></html>
Figura32-Pagina web obținută folosind codul
HTML alăturat

22II.10. Cadre
Cadrele sunt definite într -un fișier HTML special, î n care blocul <body>…</body> este
înlocuit de blocul <frameset>…</frameset>. În interiorul acestui bloc fiecare cadru este
introdus prin eticheta <frame>. Un atribut o bligatoriu al etichetei <frame> este src.
<frameset cols=”*/pixeli/procent” rows=”*/pixeli/procent”
bordercolor=”culoare” frameborder=” yes/no”>
Eticheta <frameset> are următoarele atribut e:
cols=”*/pixeli/procent” –lista lățimilor coloanelor separ ate prin , (virgulă) ;
rows=”*/pixeli/procent” -lista lățimilor râ ndurilor separate prin , (virgulă) ;
bordercolor=”culoare” –culoarea chenarului ;
frameborder=”yes/no” –vizibilitatea chenarului .
<frame src=”adresa url/c alea relativa a unui document”
align=”top/middle/bott om/left/right” border=”pixeli”
bordercolor=”cul oare” scrolling=”yes/no/auto” frameborder=”1/0”
height=”pixeli/procent” width=”pixeli/procent”>
Eticheta <frame> are următoarele atri bute:
align=”top/middle/bottom/left/right” –alinierea cadrului ;
border=”pixeli” –chenarul cadrului ;
bordercolor= ”culoare” –culoarea chenarului ;
scrolling=”yes/no/auto” –bare de derulare ;
frameborder= ”1 / 0”–chenarul unui cadru ;
height=”pixeli/procent” –înălțimea cadrului ;
width=”pixeli/procent” –lățimea cadrului .
Exemplul 32 prezintă împărțirea ferestrei browser -ului în două secțiuni orizontale.
<HTML>
<FRAMESET ROWS="80, *">
<FRAME SRC ="unu.html">
<FRAME SRC ="doi.html">
</FRAMESET>
</HTML>
Figura33-Pagina web obținută folosind codul
HTML alăturat
Exemplul 33 prezintă împărțirea browser -ului în trei secțiuni orizontale.
<HTML>
<FRAMESET ROWS="80,50, *">
<FRAME SRC ="unu.html">
<FRAME SRC="doi.html">
<FRAME SRC ="trei.html">
</FRAMESET>
</HTML>
Figura34-Pagina web obținută folosind codul
HTML alăturat

23Exemplul 34 prezintă împărțirea ferestrei browser -ului în două secțiuni verticale.
<HTML>
<FRAMESET COLS="80,* ">
<FRAME SRC ="unu.html">
<FRAME SRC ="doi.html">
</FRAMESET>
</HTML>
Figura35-Pagina web obținută folosind codul
HTML alăturat
Exemplul 35 prezintă împărțirea ferestrei browser -ului în trei secțiuni verticale.
<HTML>
<FRAMESET COLS="80,50,*">
<FRAME SRC ="unu.html">
<FRAME SRC ="doi.html">
<FRAME SRC ="trei.html">
</FRAMESET></HTML>
Figura36-Pagina web obținută folosind codul
HTML alăturat
Exemplul 36 prezintă modul în ca putem afișa în aceeași fereastră a browser -ului simultan
atât cadre orizontale cât și cadre verticale.
<HTML>
<FRAMESET COLS="80%,*">
<FRAMESET ROWS="30%,70%*">
<FRAME SRC="unu.html">
<FRAME SRC ="doi.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
<FRAME SRC ="rosu.html">
<FRAME SRC ="galben.html">
<FRAME SRC ="verde.html">
</FRAMESET>
</FRAMESET>
</HTML>
Figura37-Pagina web obținută folosind codul
HTML alăturat
Unui cadru i se poate asocia un nume prin intermediul parametrului NAME al marcajului
<FRAME>. Folosind atributul target al etichetei <a>…</a> putem specifica locul în care să
se deschidă adresa URL/pagina specificată la atributul href (în aceeași filă, în filă nouă,
într-o filă specificată de noi). În cele ce urmează am prezentat modul în care o pagină se

24poate încărca în locația specificată de noi. După ce sunt realizate paginile web de mai jos
se va deschide pagina prima.html și se va da clic pe una di n cele două legături aflate în
cadrul din stânga.
Documentul prima.html
<HTML>
<FRAMESET COLS="30%,*">
<FRAME SRC ="ROSU.html">
<FRAMESET ROWS="30%,*">
<FRAME SRC ="NEGRU.html">
<FRAME SRC ="ALB.html" NAME=REFER>
</FRAMESET></FRAMESET></HTML>
Documentul ro su.html
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="RED"TEXT="#FFFFFF">
<A HREF="VERDE.html" TARGET=REFER>Referire catre pagina Web verde</A>
<BR>
<A HREF="ALBASTRU.html" TARGET=REFER>Referire catre pagina Web
albastra</A>
</BODY>
</HTML>
Documentul alb.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="WHITE"TEXT=#000000">
<H1><CENTER>PAGINA ALBA</CENTER></H1>
</BODY>
</HTML>
Documentul negru.html
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="BLACK"TEXT=#FFFFFF">
<H1><CENTER>PAGINA NEAGRA</CENTER></H1>
</BODY>
</HTML>
Documentul ver de.html
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="GREEN"TEXT=#000000">
<H1><CENTER>PAGINA VERDE</CENTER></H1>
</BODY>
</HTML>
Documentul albastru.html
<HTML>
<HEAD></HEAD>
<BODY BGCOLOR="BLUE"TEXT=#000000">
<H1><CENTER>PAGINA ALBASTRA</CENTER></H1>
</BODY>
</HTML>

25II.11. Formulare
Formularele sunt e lemente ale limbajului HTML, care reprezintă o grupare de
componente care permit trimiterea de date și de comenzi către un server. Folosind
formularele webdesignerul, respectiv administratorul site -ului poate cole cta diverse
informații de la vizitatori.
De cele mai multe ori formularele HTML sunt create pentru a fi folosite împreună
cu alte programe și scripturi web, cum sunt PHP, JavaScript și altele.
Pentru a crea un formular în HTM L se folosește elementul <fo rm>…</form>, în
cadrul acestuia se vor adăuga celelalte elemente specifice.
Elementul <form>… </form> nu conține atribute pentru format, ci folosește
următoarele atribute:
action-aici se scrie adresa URL a unui script de pe server (de obicei PHP sau
CGI), program care tre buie sa accepte datele din FORM , le procesează și trimite
înapoi răspunsul la browser.
method-aici putem scrie getsaupost. Aceste valori specifica ce metoda HTTP va
fi folosita pentru a trimite conținutul formularului la server. Fo losind metoda
getdatele sunt „la vedere” –acest lucru înseamnă că, în momentul trimiterii lor
către server, ele vor apărea scrise în clar, în bara de adresă, într -un anumit format
standard, deci volumul acestora este limitat (datorită șirului de caractere din adresă,
care este limitat în cazul fiecărui browser). Folosind metoda postdatele nu mai apar
în mod explicit utilizatorului. Totuși, ele nu sunt criptate, deci un program
răufăcător le poate intercepta.
enctye-determin ămecanismul folosit pentru a c odifica conținutul transmis din
formular.
name-Este numele formularului, folosit de scripturi VB (Visula Basic) sau
JavaSript.
target-Este ținta cadrului (frame) unde pagina va fi vizualizat ă, dup ătransmiterea
datelor din form.2
II.11.1. Casete de tex t
Caseta de text este utiliza tă pentru a crea în pagin a webun câmp textcu o singur ă linie,
având codul următor:
<input type="text"></input>
2http://www.saguna.ro/~dorulique/lucrgrad/Programarea%20paginilor%20WEB%20folosind%20limbajul%2
0PHP.pdf

26Acest element folosește următoarele atribute:
type –text;
name-numele casetei de text, folosit de scriptul la care sunt trimise datele ;
value-valoare inițială a conținutului casetei de text. Dacă acest atribut este omis
căsuța de text va apărea goală ;
size-specific ălățimea câmpului de text,implicitfiind de20 de caractere ;
maxlength -numărul maxim de caract ere acceptate pentru a fi adăugate de
utilizator3.
Înexemplul 37 este prezentat modul de implementare a casetelor de text.
<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Nume: <inputtype="text" size="10"
maxlength="40" name="name"><br />
Prenume: <input type="text" size="15"
maxlength="40" name="surname"
value="Petrica"><br />
</body>
</html>Figura38-Pagina web obținută folosind codul
HTML alăturat
II.11.2. Câmpuri textarea
Textarea este un element ce creeazăîn pagina webun câmpîn care utilizatorul poate
adăuga mai multe linii de text , cum ar fi comentarii sau mesaje pentru administrator. Codul
este
<textarea>…</textarea>
Acest element folosește următoarele atribute:
name-numele casetei de text, folosit de scriptul la care sunt trimise datele ;
rows-numărul de linii a casetei de text ;
cols-numărul de coloane a casetei de text ;
wrap-standard este OFF. Dar poate avea valorile: "VIRTUAL" sau "PHYSICAL",
astfel ca textul wraps în browser s ăfie prezentat exact cum este scris de utilizator.
Înexemplul 37 este prezentat modul de implementare a unei casete textarea.
3http://www.marplo.net/html/formulare.html

27<html>
<head>
<title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com"><tex
tarea rows="5" cols="20" wrap="physical"
name="comments">
Scrie un comentariu
</textarea>
<input type="submit" value="Email
Yourself"></form>
</body>
</html>Figura39-Pagina web obținută folosind
codul HTML alăturat
II.11.3. Casete pentru parole
Valoarea password a atributului type pentru a permite adăugarea de parole.
Caracterele adăugate în aceast ăcaset ănu sunt afișate cu valoarea lor real ă, pentru a nu se
vedea parola scrisă.Codul este:
<input type="password">…</input>
Acest element are următoarele atribute:
type –password ;
name-numele casetei pentru parole, folosit de scriptul la care sunt trimise datele ;
value-de obicei nu este adăugat. Dac ăeste scris,reprezentă parola implicită din
acea caset ă;
size-specifică numărul de caractere care dau lungimea parolei (implicit 20) ;
maxlength -numărul maxim de caractere acceptate s ăfie adăugate de utilizator4.
Înexemplul 38 se prezintă modul de implementare a unei casete pentru parole.
<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Nume: <input type="text" size="10"
maxlength="40" name="name"><br />
Password: <input type="password"
size="10" maxleng th="10"
name="password"><br />
<input type="submit" value="Send">
</body>
</html>Figura40-Pagina web obținută folosind codul
HTML alăturat
4http://www.marplo.net/html/formulare.html

28II.11.4. Casete Check box
Casetele checkbox sunt folosite atunci când dorimcautilizatorul să poată alege mai multe
opțiuni, selectarea op țiunilor realizându -se prin bifare . Codul este :
<input type="checkbox">…</input>
Acest element folosește următoarele atribute:
type –checkbox ;
name-numele casetei checkbox, folosit de script ul la care sunt trimise datele ;
value-valoarea casetei checkbox respective ;
checked-dacăeste adăugat acest atribut, caseta respectiv ăeste selectată5.
Înexemplul 39 este prezentat modul de utiliz are a unei casete de tip check box.
<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
<p>Ce culoare de pantofi preferi? </p><p>
<input type="checkbox" name="pantofi"
value="negru">Negru simplu <br/>
<input type="checkbox" name="pantofi"
value="alb">Alb simplu <br/>
<input type="checkbox" name="pantofi"
value="gri">Nuante de gri <br/>
<input type="checkbox" name="pantofi"
value="alb negru ">Alb cu negru <br/>
<input type="submit" value="Email
Myself"></p></form>
</body>
</html>Figura41-Pagina web obținută folosind
codul HTML alăturat
II.11.5. B uton radio
Butonul radio este folosit pentru crearea unei liste de opțiuni dintre care utilizatorul poate
alege una singur ă. Codul este
<input type="radio">… </input>
Acest element folosește următoarele atribute:
type –radio;
name-numele casetei radio, folosit de scriptul la care sunt trimise datele ;
value-valoarea casetei radio respective;
checked-dacăeste adăugat acest atribut, caseta radio respectiv ăeste selectat ă.6
Exemplul 40 prezintă modul de implementare a butoanelor de tip radio.
5http://www.marplo.net/html/formulare.html
6http://www.marplo.net/html/formulare.html

29<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Cetip de pantofi porti?<br/> Culoare:
<input type="radio" name="culoare"
value="inchis">Inchis
<input type="radio" name="culoare"
value="deschis">Deschis <br /> Marime:
<input type="radio" name="marime"
value="mica">Mica
<input type="radio" name="marime"
value="medie">Medie
<input type="radio" name="marime"
value="mare">Mare <br / ><input
type="submit" value="Email Myself"></form>
</body></html>Figura42-Pagina web obținută folosind
codul HTML alăturat
II.11.6. Casete pentru upload
Casetele upload permit utilizatorului să încarce documente pe serverul web.
Aceast ăcaset ăeste însoțită de un buton "Browse" prin care se alege documentul care va fi
transferat pe server. (upload -ul se face to t prin intermediul unui script PHP, CGI). Codul
este
<input type="file">… </input>
Acest element folosește următoa rele atribute:
type-fișierul încărcat;
name-numele casetei upload, folosit de scriptul la care sunt trimise datele ;
size-specific ănumărul de caractere care dau lungimea casetei upload.7
Înexemplul 41 este prezentat modul de utilizare a unei casete de upload.
<html>
<head><title>formulare</title></head>
<body>
<input type="hidden"
name="MAX_FILE_SIZE" value="100"
/><input name="file" type="file" />
</body>
</html> Figura43-Pagina web obținută folosind codul
HTML alăturat
II.11.7. Buton simplu
Butonul simplu are rolul de a efectua o ac țiune. De regulă e ste folosit cu JavaScript
sau VBScript și are codul :
<input type="button" value="Buton">… </input>
Acest element folosește următoarele atribute:
7http://www.marplo.net/html/formulare.html

30type –button;
name-numele butonului, necesar pentru a fi folosit de script ;
value-textul care va apăreape buton.
Exemplul 42 prezintă modul de implementare a unui buton.
<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
<input type="button" value="BUTON">
<br />
</body>
</html>Figura44-Pagina web obținută folosind codul
HTML alăturat
II.11.8. Buton Submit
Acest element face ca prin apăsarea lui browser -ul să trimită numele și valoarea
tuturor celorlalte elemente din formular la scriptul de pe server .Codul este
<input type="submit" value="Trimite">… </input>
Acest element folosește următoarele atribute:
type –submit;
name-numele butonului, poate fi folosit de scriptul la care se trimit datele ;
value-textul care apare pe buton.8
După ce am completat un formular pentru a trimite datele la server vom apăsa un buton de
tip submit. Implemetarea acestuia este prezentată în exemplul 43.
<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Nume: <input type="text" size="10"
maxlength="40" name="name"><br />
Password: <input type="password"
size="10" maxlength="10"
name="password"><br />
<input type="submit" value="Send">
</body>
</html>Figura45-Pagina web obținută folosind codul
HTML alăturat
Exemplul 44 prezintă modul în care pentru un buton Submit se poate folosi o imagine.
8http://www.marplo.net/html/formulare.html

31<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Nume: <input type="text" size="10" maxlength="40"
name="name"><br />
Password: <input type="password" size="10"
maxlength="10" name="password"><br />
<input type="image"
src="https://deliabotea .files.wordpress.com/2010/02/
pisica.jpg" height="30">
</body>
</html>Figura 46-Pagina web
obținută folosind codul
HTML alăturat
II.11.9.Buton Reset
Permite utilizatorului sășteargă toate datele pe care le -a scrisîncelelalte elemente
din formular. Codul este:
<input type="reset" value="Sterge">… </input>
Acest element folosește următoarele atribute:
type –reset;
value-textul care apare pe buton.9
Înexemplul 45 este prezentat modul de implementare a unui buton de tip reset.
<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Nume: <input type="text" size="10"
maxlength="40" name="name"><br />
Password: <input type="password"
size="10" maxlength="10"
name="password"><br />
<input type="submit" value="Send">
<input type="Reset" value="Sterge
tot">
</body></html>Figura47-Pagina web obținută folosind codul
HTML alăturat
II.11.10. Elemente select
Pentru acest element se foloseș te eticheta pereche <select>… </select> , care formează o
listăcu date ce pot fi selectate.
Atributele etichetei pereche <select>… </select> sunt:
name-numele acestui element folosit de scriptul la care sunt trimise datele ;
size-seteazăînălțimea el ementului Select, reprezintăși numărul de opțiuni din lista
care vor fi vizibile inițial ;
9http://www.marplo.net/html/formulare.html

32multiple -acest atribut specifică faptul c ăutilizatorul poate selecta mai multe
opțiuni.
Eticheta<select>…</select> este folosit ăîmpreună cu eticheta pereche <option>…
</option> care reprezintă lista elementelor ce sunt adăugate și afișate în lista de selectare.
Elementul <option></option> folosește doua atribute:
selected -opțiunea este selectata când pagina web este inițial încărcată. Se
recomandă folosirea acestui atribut doar cu o singură opțiune.
value-specific ăvaloarea variabilei din opțiunea respectiv ă(necesar ăpentru
scriptul care va primi datele).10
Sunt două tipuri de elemente Select:
II.11.10.1. Drop Down List (Lista de derulare)
Pentru o listă de derulare codul este:
<select name="select">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
, unde "name" este atributul care defineș te numele etichetei SELECT.
Înexemplul 46 este implementată o listă de derulare.
<html>
<head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Nivel de studii?
<select name="studii">
<option>Alege</option>
<option>Scoala Generala </option>
<option>Liceu</option>
<option>Postliceala</option>
<option>Facultate< /option>
<option>Doctorat</option>
</select>
<input type="submit" value="Email
Yourself">
</form></body></html>
Figura48-Pagina web obținută folosind codul
HTML alăturat
II.11.10.2List Box
Codul este:
<select name="select" size="4">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
, unde "name" este atributul care definește numele eticheteiSELECT, atributul "size"
determin ăînălțimea elementului select și numărul de opțiuni vizibile iniți al.
10http://www.marplo.net/html/formulare.html

33Exemplul 47 prezintă modul de implementare a unei casete list box.
<html><head><title>formulare</title></head>
<body>
<form method="post"
action="mailto:youremail@email.com">
Nivel de studii? <select name="studii"
size="4">
<option>Alege</option>
<option>Scoala Generala </option>
<option>Liceu</option>
<option>Postliceala</option>
<option>Facultate</option></select></form>
</body>
</html>Figura49-Pagina web obținută folosind
codul HTML alăturat
II.12 Concluzii
HTMLesteunul din elementele fundamentale ale WWW. Limbajul HTML descrie
formatul primar în care paginile web sunt văzute și distribuite pe Internet.
Limbajul HTML este unul de marcare, nu de programare, deci poate fi utilizat de
aproape oricine. Mai mult stud iul acestui limbaj este obligatoriu pentru to ți elevii de liceu.
Limbajul HTML se regăse ște în programa școlară a disciplinei Tehnologia
informației și a comunicațiilor la clasa a IX -a, programă care este general valabilă pentru
toți elevii, diferind doar numărul de ore alocate în func ție de filieră. În plus limbajul este
aprofundat în clasa a XII -a de către elevii de la clasele de la filiera tehnologică.
În capitolul Limbajul HTML sunt prezentate principalele etichete necesare creării
unei pagini web. De asemenea, regăsim informa ții despre formatarea textului, aranjarea
elementelor în pagină, inserarea și formatarea listelor, imaginilor, tabelelor, despre
realizarea legăturilor între pagini și interacționarea cu utilizatorul prin intermediul
formularelo r.
Pentru fiecare element sunt prezentate sintaxa și atributele împreună cu valorile
care pot fi utilizate. În plus fiecare etichetă este înso țită de unul sau mai multe exemple.
Aceste exemple se regăsesc și în aplicația practică care se dorește a fi un g hid pentru elevii
de clasa a IX -a.

34III. CSS (Cascading Style Sheets)
III.1 Noțiuni introductive despre CSS
CSS definește modul în care elementele HTML vor fi afișate, acronimul CSS
însemnând "foi de stil în cascadă". . Legătura dintre HTML și CSS se reali zează prin
intermediul etichetei<STYLE>…</STYLE>care trebuie așezat între etichetele
pereche<HEAD>…</HEAD>. Fiecare element HTML se regăsește și înCSS.
Avantaje CSS:
se pot aplica aceleași formatări mai multor elemente HTML, fără a rescrie codul ;
se po t aplica aceleași formatări mai multor pagini HTML, utilizând același fișier
CSS;
un control mai fin asupra paginii web;
scăderea dimensiunii în octeți a paginii web, atunci când codul CSS e conținut într –
un fișier extern ;
efecte mai sofisticate decât cele produse de codul HTML: suprapunerea unei
imagini peste altă imagine, a unui text peste alt text, impresia de relief, efectul
hover, afișarea unor fonturi mai mari decât h1 etc.
Dezavantaj :Paginacare conținecod CSS poate ar ăta diferit în navigatoare dife rite,
deoarece nu toate browserele interpretează codul CSS. Internet Explorer citește corect și
complet codul CSS, spre deosebire de Netscape Navigator.
CSS se poate aplica in -line în interiorul fișierului HTML sau extern folosind un
fișier cu extensia .c ss.
Sintaxa css este etichetă { atribut1:valoare;atribut2:valoare, etc.} ( ex. h1{color:red;
font-size:20px;} )
Exemplul 48 reflectă modul de utilizare inline a foilor de stil.
<html>
<head>
<style>
p { color: purple; }
</style>
<title>Result</title>
</head>
<body>
<p>Check it out! I'm purple!</p>
</body>
</html>Figura50-Pagina web obținută folosind codul
HTML alăturat

35Înexemplul 49 am prezentat implementarea foilor de stil folosind un fișier extern.
<html>
<head>
<title>Result</title>
<link type="text/css"
rel="stylesheet"
href="stylesheet.css">
</head>
<body>
<p>I want to be SIZE 44 font!</p>
</body>
</html><!–conținut fișier css –>
p { font-size: 44px; }
Figura51-Pagina web obținută folosind codul
HTML alăturat
În cazul în care lucrăm cu un fișier extern eticheta <link type="text/css"
rel="stylesheet" href="stylesheet.css"> face legătura cu fișierul extern stylesheet.css, iar
această etichetă trebuie inclusă între etichetele <head> …</head>. În continuare vom folosi
lucrul cu fișiere externe. Fiecare proprietate poate fi aplicată mai multor etichete.
III.2. Stabilirea culorii de fundal
Proprietățile CSS utilizate pentru efecte de background sunt:
background -color;
background -image;
background -repeat;
background -attachment ;
background -position.
Înexemplul de mai jos (50) seobservă că proprietatea background -color poate fiaplicată
mai multor etichete.
body { background -color: #b0c4de; }
h1{ background -color: #6495ed; }
p { background-color: #e0ffff; }
div { background -color: #b0c4de; }
body { background -image: url("paper.gif"); }
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top; }
III.3. Formatarea textului
III.3.1 Culoarea textului
Pentru culoare se poate folosi una din variantele de mai jos:
valoare HEX -"#ff0000" ;
valoare RGB -"rgb(255,0,0)" ;
un nume de culoare -"red".

36Exemplul de mai jos (51) evidențiază cele 3 tipuri de atribuire a unei culo ri.
body{ color: blue; }
p{ color:#aa7723; }
div{ color: rgb(250,150,100);}
III.3.2 Stilul textului
Pentru evidențierea textului putem folosi atributele:
text-decoration;
font-family;
font-size;
text-align;
font-style.
Valoarea none pentru atributul text -decoration elimină linia de subliniere pentru un link.
Atributul text -decoration mai poate lua valorile: overline, line through, underline.
În exemplul următor (52) sunt prezentate atributele ce contribuie la modificarea stilului
unui text.
h1 { text-decoration: overline; }
h2 { text-decoration: line -through;}
h3 { text-decoration: underline;
font-style:oblique;}
p { font-family: Arial;
font-size: 16px;
text-align: justify;
font-style:italic;}
III.3.3 Indentarea textului
Pentru indentare se folosește atributul text -indent, cum se poate observa și în exemplul
(53)de mai jos.
p { text-indent: 50px;}
III.4. Stilurile legăturilor
Pentru legături se pot folosi atributele: color, font -family, background, ca în exemplul (54)
de mai jos.
a { color: #FF0000;
font-family:cursiv;
}
Cele patru stări ale unei legături sunt:
a:link-un link nevizitat ;
a:visited-un link vizitat ;
a:hover-un link când mouse -ul este deasupra lui ;

37a:active-un link în momentul în care este dat clic pe el .
Exemplul următor (55) prezintă cele patru stări ale unei legături.
<html>
<head><style>
a:link{ background -color: #B2FF99; color: #FF0000;}
a:visited{ background -color: #FFFF85; color: #00FF00;}
a:hover { backg round-color: #FF704D; color: #FF00FF; }
a:active { background -color: #FF704D; color: #0000FF;}
</style></head>
<body>
<p><b><a href="default.asp" target="_blank">
Acesta este un link</a></b></p>
</body></html>
III.5. Stiluri pentru liste
Pentru liste putem avea următoarele atribute: list -style-type (precizează marcatorii), list –
style-position, list -style-image.
Înexemplul următor (56)se poate remarca modul de utilizare a atributului list -style-type.
<html><head>
<style>
ul.a { list-style-type: circle;}
ul.b { list-style-type: square;}
ol.c { list-style-type: upper-
roman;}
ol.d { list-style-type: lower-
alpha;}
</style></head>
<body><p>O lista neordonata:</p>
<ul class="a">
<li>Cafea</li>
<li>Ceai</li>
<li>Suc</li></ul>
<ul class="b">
<li>Cafea</li>
<li>Ceai</li>
<li>Suc</li></ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Cafea</li>
<li>Ceai</li>
<li>Suc</li></ol>
<ol class="d">
<li>Cafea</li>
<li>Ceai</li>
<li>Suc</li></ol>
</body>
</html>Figura52-Pagina web obținută folosind codul
HTML alăturat
III.6. Tabele cu CSS
Înexemplul 57 putem modul de stilizare a unui tabel folosind fișierul css extern.

38Fișier html Fișier css
<html>
<head><title>Ex. 56</title>
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"></head>
<body><table>
<tr><td> mure </td>
<td> zmeura</td>
<td> afine</td></tr>
<tr><td> mere</td>
<td> pere</td>
<td> cirese</td></tr>
</table></body></html>table{
border-collapse:
collapse;
width: 30%;}
table, td {
border: 3pxdashed
green;
text-align: center;
border-right-color:
red;
padding: 15px;
background-color:
yellow;
}Figura53-Pagina web obținută
folosind codul HTML alăturat
III.7. Comentarii în CSS
Comentariul folosit în CSS e asemănăto r celui din limbajul de programare C. E introdus
prin secvența /*, iar terminarea sa e anunțată prin */. Este foarte util pentru explicarea sau
delimitarea codului CSS.
III.8. Poziționarea elementelor CSS
Atributul position precizează metoda utilizată pentru așezarea unui element. Acest atribut
poate lua patru valori:
static;
relative;
fixed;
absolute.
Valoarea prestabilită a poziționării elementelor în fereastră este ”static ”, adică elementele
sunt dispuse unul după altul în interiorul documentului.
Sintaxa pentru specificarea poziționării static este:
selector { position:static; }
Un element static nu poate fi repoziționat în mod explicit.
Un element cu poziționare "relativă" este amplasat la locul său în cadrul ferestrei, adică
apare după toate elemen tele dinaintea sa, respectiv înaintea tuturor elementelor amplasate
după el. Sintaxa pentru specificarea poziționării relative este:
selector { position:relative; }
Elementele poziționate relativ pot fi mutate folosind proprietățile "top" și "left" sau
"bottom" și "right".11
Înexemplul 58 putem vizualiza un element poziționat static și unul poziționat relativ.
11http://www.marplo.net/curs_css/pozitionare.html

39<html>
<head>
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"></head>
<body>
<h2>Pozitionare statica si
relativa</h2>
<div class="stati c">Element
pozitionat static.</div>
<p> Elementele pozitionate
static sunt dispuse unul după
altul în interiorul
documentului.</p>
<div class="relative">Element
pozitionat relativ</div>
<p>Un element cu poziționare
"relativă" este amplasat la
locul său încadrul ferestrei,
adică apare după toate
elementele dinaintea sa,
respectiv înaintea tuturor
elementelor amplasate după el.
</p></body></html>div.static {
position: static;
border: 3px solid
#8AC007;
}
div.relative {
position: relative;
left: 50px;
border: 3px dashed
#880077;
}
Figura 54-Pagina web obținută
folosind codul HTML alăturat
Poziționarea absolută are ca efect crearea unui element neafectat de restul documentului,
plasarea lui în fereastră fiind făcută într-o locație precisă, definită prin intermediul
coordonatelor x si y, indiferent de pozițiile altor elemente.Sintaxa pentru specificarea
poziționării absolute este: selector { position:absolute }
Originea (punctul de coordonate 0,0) este col țul din stânga -sus al în care este inclus
elementul poziționat absolut.
Înexemplul următor (59) puteți vizializa modul de spațiere absolut.
<html><head>
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"></head>
<body>
<h1>Pozitionare statica si
relativa</h1>
<div class="static">Element
pozitionat static.</div>
<p> Elementele pozitionate
static sunt dispuse unul după
altul în interiorul
documentului.</p>
<div class="relative">Element
pozitionat relativ</div>
<p>Un element cu poziționare
"relativă" este amplasat la
loculsău în cadrul ferestrei,
adică apare dup ă toate
elementele dinaintea sa .</p>
<h2> Element pozitionat
absolut.</h2></body></html>div.static {
position: static;
border: 3px solid
#8AC007;}
div.relative {
position: relative;
left: 50px;
border: 3px dashed
#880077;}
h2 {
position: absolute;
left: 100px;
top: 100px;}
Figura 55-Pagina web obținută
folosind codul HTML alăturat

40Poziționarea fixă a unui element este aproximativ la fel cu cea absolut ă, cu diferența c ăla
derularea pag inii elementul fixat rămâne pe poziția lui inițial ă, fără a se derula.Sintaxa
pentru specificarea poziționării fixed este:
selector { position:fixed }12
Înexemplul 60 putem remarca diferența între cele patru tipuri de poziționări: statică,
relativă, absolută și fixă.
<html><head>
<link type="text/css"
rel="stylesheet"
href="stylesheet.css">
</head>
<body>
<h1>Pozitionare fixa</h1>
<div class="static">Element
pozitionatstatic.</div>
<p> Elementele pozitionate
static sunt dispuse unul
după altul în interiorul
documentului.</p>
<div
class="relative">Element
pozitionat relativ</div>
<p>Un element cu poziționare
"relativă" este amplasat la
locul său în cadrul
ferestrei, adi că apare după
toate elementele dinaintea
sa, respectiv înaintea
tuturor elementelor
amplasate după el. </p>
<h2> Element pozitionat
absolut.</h2>
</body></html>div.static {
position: static;
border: 3px solid
#8AC007;}
div.relative {
position:
relative;
left: 50px;
border: 3px dashed
#880077;}
h2 {position:
absolute;
left: 100px;
top: 100px;}
h1 {position: fixed;}Figura56-Pagina web obținută
folosind codul HTML alăturat
III.9. Atributul float
Folosind atributul float elementele vor pluti unul lângă altul sau unul în continuarea
celuilalt atât cât spațiul rezervat lor o permite. Acest tip de aliniere se referă la o aliniere
orizontală și nu verticală a elementelor. Proprietatea float se foloseșt e în general atunci
când dorim să încadrăm o imagine în text.13
Înexemplul de mai jos ( 61) putem observa o nouă metodă de încadrare a unei imagini în
text folosind atributul float.
12http://www.marplo.net/curs_css/pozitionare.html
13http://tutorialehtml.com/tutoriale -css/atributul -float-in-css.php

41<html>
<head>
<link type="text/css"
rel="stylesheet"
href="stylesheet.css"> </head>
<body>
<p><img src="catel.jpg">
Float se folosește în general pentru
crearea de template -uri și pentru
galerii de imagini. Folosind
atributul float elementele vor pluti
unul lângă altul sau unul în
continuarea celuilalt atât cât
spațiul rezervat lo r o permite. Acest
tip de aliniere se refera la o
aliniere orizontală și nu verticală a
elementelor. Proprietatea float se
folosește în general atunci când
dorim să încadrăm o imagine în text.
</p><body></html>img {
float: right;
margin: 0 0 10px
10px;
height: 60px;
}
Figura 57-Pagina web
obținută folosind codul
HTML alăturat
III.10. Atributul clear
Toate elementele HTML care sunt situate după elementul aliniat cu float la dreapta sau la
stânga vor pluti lângă acesta. Pentru a împiedica acest lucru atunci când nu vrem să se
întâmple vom folosi atributul clear cu valoarea both.
Înexemplul 62 putem remarca efectele atributului clear.
<html>
<head>
<link type="text/css"
rel="stylesheet"
href="stylesheet.css">
</head>
<body>
<h2>Fara atributul
clear</h2>
<div
class="div1">div1</div>
<div class="div2">div2 –
div2 se gaseste dupa div1,
in codul HTML. Pentru ca
div1 are atributul
float:left, textul din
div2 se gaseste in jurul
lui div1 si div2 cuprinde
ambele elemente.</div>
<h2>Cuatributul
clear</h2>
<div
class="div3">div3</div>
<div class="div4">div4 –
Folosind clear div4 se
muta sub div3 care are
atributul float:left.
</div>
</body></html>.div1 {
float: left;
width: 60px;
height: 40px; margin:
10px;
border: 3px solid red;}
.div2{
border:2px solid green;}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid blue;}
.div4 {
border:2px solid green;
clear: left;}
Figura58-Pagina web obținută
folosind codul HTML alăturat

42III.11. Clase CSS
Clasele permit stilizarea anumitor elemente HTML în mod diferențiat. În cazul claselor
stilurile pot fi schimbate prin schimbarea foii de stil sau a con ținutului acesteia . Astfel se
poate folosi același selector în fișierul HTML care va a răta diferit, în funcție de foaia de stil
utilizată. Pentru a stabili în CSS o clasă de elemente cu aceleași proprietăți vom folosi
atributul class sau id. Singura diferență între class și id este sintaxa de definire.
class id
.stil1 {
text-
align:center}<div
class="stil1">…</div>
<h1 class="stil1">
Un titlu centrat</h1>#stil2{
text-
align:center;
color:blue
font-
family:"sans
serif"
}<div
id="stil2">…</div>
<h1 id="stil2">
Un titlu
centrat</h1>

43III.12 Concluzii
Foile de stil (CSS) pot transforma, relativ simplu, ni ște pagini simple în pagini
complexe cu diverse efecte. Este recomandat fi șierelor .css externe care pot fi aplicate
simultan mai multor pagini și care oferă un aspect unitar unui site (unei colecții de pagini
web). În cazul în care dori m să modificăm aspectul site -ului este suficient să modificăm
fișierul .css, iar aceste modificări se vor propaga în toate paginile site -ului.
În acest capitol am prezentat modul de stabilire a fundalului, de formatarea e
textului, a listelor și a tabel elor. Ce este de remarcat este faptul că, acelea și atribute pot fi
folosite pentru mai multe etichete. De exemplul font -family poate fi utilizat pentru
etichetele: <p>… </p>, <div>…</div>, <li>…</li>, <a>…</a>, <h2>…</h2>, și bineînțeles
exemplele ar putea continua.
Foarte importante sunt și cele patru stări ale unui link. Legăturile sunt folosite
încadrul meniurilor pentru a face conexiuni între paginile web. Cu ajutorul celor patru stări
pot fi adăugate cu u șurință diverse efecte meniurilor.
Un alt aspect important în realizarea paginilor web este aranjarea în pagină, lucru
care permite găsirea cu u șurință a informațiilor dorite. Aranjarea se va face cu ajutorul
atributului position care poate lua valorile:static, relative,fixed șiabsolute.La organizarea
elementelor în pagină contribuie și atributele: float și clear.
Clasele CSS permit diferen țierea elementelor HTML. De exemplu, dacă în pagină
avem mai multe paragrafe și dorim ca fiecare să arate diferit, atunci în fișierul .css vom
crea clase cu nume și valori distincte.
Pentru fiecare din elementele prezentate regăsim unul sau mai multe exemple, care
au menirea de a ne ajuta să le în țelegem mai bine.

44Bibliografie
1.Tudor Sorin și Vlad Huțanu, Crearea și programarea paginilor WEB, București,
L&S Infomat, 2004;
2.Vlad Huțanu și Carmen Popescu, Manual de Informatică Intensiv pentru clasa a
XII-a, București, L&S Infomat, 2007;
3.Bogdan Pătruț, Internet pentru începători, București, Teora, 1998;
4.Traian Anghel, Programarea în PHP. Ghid pract ic, Iași, Polirom, 2005;
5.Julie C. Meloni, Învață singur PHP, MySQL și APACHE, București, Corint, 2005;
6.http://info.mcip.ro/
7.http://www.marplo.net/
8.http://www.saguna.ro/~dorulique/lucrgrad/Programarea%20paginilor%20WEB%20
folosind%20limbajul%20PHP.pdf
9.https://www.invata -online.ro/php -mysql/
10.https://www.w3schools.com
11.http://tutorial ehtml.com/