Documente Academic
Documente Profesional
Documente Cultură
Limbajul HTML TEORIE Exemple Bilet Examen HTML
Limbajul HTML TEORIE Exemple Bilet Examen HTML
Pagina 1 din 14
5. Lansarea n execuie a fiierului cu extensia HTM sau HTML (pentru a vedea cum sunt interpretate tag-urile
scrise n Notepad pe Internet) dublu click pe fiier i astfel se va deschide programul Internet Explorer.
6. Modificarea codului surs se va face n Notepad. Deschiderea fiierului pentru ai modifica sursa se poate face:
a. NotepadFileOpen ...
b. Direct din fereastra ce s-a deschis la pasul 5 (fereastra Internet Explorer) astfel: ViewSource (va
deschide automat Notepad-ul).
Orice modificare adus codului surs trebuie salvat (FileSave). Pentru a vedea i pe Internet modificarea
fcut n Notepad trebuie, fie s repetm paii 4 i 5, fie s revenim n fereastra Internet Explorer (ea este deja
deschis vezi bara de START) i s alegem din meniul ViewRefresh (sau aps tasta F5)
Observaie: Pentru o nou modificare a codului sursa se va repeta pasul 6.
TAG-uri UTILZATE
Structura general a unui fiier cu extensia HTM sau HTML este:
<html>
<head>
Titlul paginii
nceput i sfrit de
document html
<title> </title>
Antetul documentului
</head>
<body>
..
..
..
</body>
</html>
Corpul propriu-zis
al documetului
Observaie: un tag se va scrie ntotdeauna ncadrat de semnele < >. Efectul unui tag este vizibil pna cnd acesta
este nchis (Ex: <title> Prima pagina WEB</title> care permite scrierea pe bara de titlu a programului Internet
Explorer a textului Prima pagina WEB).
Tag-uri cu efect asupra ntregii pagini web
Limbajul HTML
Pagina 2 din 14
<body bgcolor = a Text = b Link = c Vlink = d Alink = e> - permite stabilirea unei culori de fundal a paginii Web,
culoarea implicit de scriere a textului, culoarea legturilor, culoarea legturilor vizitate, culoarea legturilor de
aciune.
Atributul BGCOLOR stabilete culoarea de fundal a paginii Web (Ex: <body bgcolor = blue> - culoarea de
fundal va fi albastr sau <body bgcolor = 804050> (formatul de culoare este RRGGBB rou, verde, albastru) sau
<body bgcolor = 15%85%95% > sau <body bgcolor = aaffcc> (formatul hexazecimal))
Atributul TEXT permite stabilirea culorii implicite de scriere pe ntreaga pagin Web (Ex: <body Text = red>
tot textul pe pagina de Web va scris cu rou)
Atributul LINK permite stabilirea culorii unei legturi (vezi tag-urile de la legturi). Implicit aceasta este
albastr. (Ex: <body link = green> - legturile vor avea culoarea verde)
Atributul Vlink permite stabilirea culorii unei legturi vizitate (Ex: <body vlink = red> un link vizitat va
avea culoarea roie)
Atributul ALINK permite stabilirea culorii unei legturi de aciune, adic pna la realizarea conexiunii
stabilite de legtur (vezi tag-urile de la legturi) link-ul va avea culoarea stabilit prin ALINK, iar dup realizarea
conexiunii acesta culoare va devenii automat cea specificat cu VLINK (Ex: <body alink = yellow> - un link n
aciune va avea culoarea galben)
OBS. Un tag poate folosii toate atributele de care dispune sau numai o parte din acestea (Ex: <body bgcolor = red
text = yellow link = gray>
Dac dorim ca pe o pagin Web s avem ca fundal o poz, atunci n locul atributului BGCOLOR din cadrul tagului <body bgcolor = a ......> vom folosii atributul BACKGROUND urmnd a specifica adresa pozei respective (Ex:
<body background = c:\student\poza.gif text = red >
Tag-uri pentru formatarea caracterelor i aranjarea textului
<b> - permite scrierea caracterelor ngroat (bold)
<i> - permite scrierea caracterelor nclinat (italic)
<u> - permite scrierea caracterelor subliniat (underline)
<center> - permite alinierea pe centru a textului pe pagin
<p align = left/right/center>permite alinierea la stnga/dreapta/centru a textului pe pagin
<hr size = a color = b width = c align = left/right/center > - plaseaz o linie orizontal n document.
Atributul SIZE definete grosimea liniei orizontale (Ex: <hr size = 3> linia va avea o grosime de
aproximativ 1 mm)
Atributul COLOR permite colorarea liniei orizontale (Ex: <hr color = red> - linia va avea culoarea roie sau color = 804050 (formatul de culoare este RRGGBB rou, verde, albastru) sau color = 15%85%95% sau color =
aaffcc (formatul hexazecimal))
Atributul WIDTH specific lungimea liniei orizontale (Ex: <hr width = 45%> - linia orizontal o s ocupe
numai 45% din suprafaa paginii web)
Atributul ALIGN permite specificarea modului de aliniere a liniei respective (stnga/dreapta/centru)
<br> - ntrerupe linia curent i trece textul sau imaginea pe urmtoarea linie
<p> - ntrerupe linia curent i trece textul sau imaginea la paragraful urmtor
Obs. <p> este echivalentul lui <br><br> (de dou ori <br>).
<font color = a size = b face = c> - permite stabilirea culorii de scriere a caracterelor, stabilirea dimensiunii acestora,
precum i stilul de scriere (Ex: Times New Roman, sau Arial)
Limbajul HTML
Pagina 3 din 14
Atributul COLOR permite colorarea caracterelor (Ex: <font color = blue> textul va fi scris cu albastru.
Observaie: Acest parametru are prioritate fa de acelai atribut din tag-ul <body text = b>. Aadar, dac se stabilete
o culoarea a textului pe ntreaga pagin Web pe rou - <body text=red> - i doresc s scriu un cuvnt cu ablastru
atunci voi folosi tag-ul <font color=blue> naintea cuvntului pe care doresc s-l scriu cu albastru. Acest fapt este
posibil deoarece tag-ul <font color=blue> are prioritate fa de tag-ul <body text=red>.
Atributul SIZE stabilete dimensiunea de scriere a caracterelor. SIZE poate lua valori de la 1 la 7 existnd un
echivalent al acestora cu dimensiunile caracterelor din WORD 1 = 8pt / 2 = 10pt / 5 = 18pt / 7 = 36pt (Ex: <font
size = 1> scrie la o dimensiune a caracterelor de 8pt)
Atributul FACE permite specificarea stilului de scriere (Ex: <font face = Arial> - scrie pe stilul Arial)
<sup> - permite scrierea unor cuvinte la putere (Ex: 9<sup>50 are ca efect - 950)
<sub> - permite scrierea unor cuvinte ca indice (Ex: X<sub>i are ca efect Xi)
<tt> - permite scrierea unui text monospaiat (Ex: <tt>Este cel mai bine</tt>
<address> - permite scrierea pe un anumit stil aunei adrese potale, a unui telefon
Tag-uri pentru includerea unei imagini n cadrul paginii Web
<img src = border = a width = c height = d align = left/right/center alt = > - acest tag permite amplasare
unei imagini n cadrul paginii Web
Atributul SRC este folosit pentru specificarea adresei (sursei) imaginii pe care dorim a o plasa pe pagina Web
(Ex: <img src=c:\student\poza.gif> - va plasa pe pagina de Web fiierul poza.gif existent n folderul
c:\student
Atributul BORDER
permite stabilirea grosimii liniei ce va nconjura poza (Ex: <img
src=c:\student\poza.gif border = 3> - linia ce va nconjura poza va avea o grosime de aproximativ 1 mm)
Atributul WIDTH permite stabilirea unei dimensiuni a imaginii pe orizontal (lungimea pozei pe orizontal)
(Ex: <img src=c:\student\poza.gif width = 150> - poza va avea o lungime pe orizontal de aproximativ 5 cm)
Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe vertical (lungimea pozei pe vertical)
(Ex: <img src=c:\student\poza.gif height = 300> - poza va avea o lungime pe orizontal de aproximativ 10 cm)
Atributul ALIGN permite alinierea imaginii respective n cadrul paginii Web (Ex: <img
src=c:\student\poza.gif align = left> - poza va fi aliniat la stnga)
Atributul ALT permite scrierea unui text care va apare numai atunci cnd utilizatorul este poziionat cu
mouse-ul pe imaginea respectiv (Ex: <img src=c:\student\poza.gif align = left alt = Poza aceasta este din secolul
trecut>)
Tag-uri pentru realizarea de liste
<ol type = a start = b>
<li>Primul element din list
<li>Al doilea element din list
<li>Al treilea element din list
</ol>
- permite realizarea unei liste ordonate. O lista este ordonat dac elementele ei au o numerotare n fa
(ordonare). Atributul TYPE permite specificarea tipului de numerotare al listei. Atributul START specific
de la ct s nceap numerotarea n lista
Ex: <ol type = a start =1>
<li> Primul element din list
<li> Al doilea element din list
<li> Al treilea element din list
</ol>
Ex: <ol type = A start =3>
Limbajul HTML
Pagina 4 din 14
permite realizarea unei liste neordonate. O lista este neordonat dac elementele ei nu au o numerotare n fa
(sunt neordonate), ci doar semne care s identifice elementul din list
Atributul TYPE permite specificarea tipului de semn al elementului din list
Ex: <ul type = Square>
<li> Primul element din list
<li> Al doilea element din list
<li> Al treilea element din list
</ul>
Ex: <ul type = Disc>
<li> Primul element din list
<li> Al doilea element din list
<li> Al treilea element din list
</ul>
Ex: <ul type = Circle>
<li> Primul element din list
<li> Al doilea element din list
<li> Al treilea element din list
</ul>
<dl>
<dt>Student
<dd>O persoan nscris la o instituie de nvmnt superior
<dt>Profesor universitar
<dd>Cadru didactic la o instituie de nvmnt superior
</dl>
- permite realizarea unei liste cu definiii. Tag-ul <dt> precizeaz termenul pe care vrem s-l definim n cadrul
listei cu definiii, iar tag-ul <dd> definete termenul pe care vrem s-l definim.
Ex:
Limbajul HTML
Pagina 5 din 14
Limbajul HTML
Pagina 6 din 14
Ex: <A href = c:\student\fisier.doc>Click aici</a> - dac executai click stnga de mouse pe textul Click aici
atunci se va realiza o conexiune cu fiierul fiier.doc existent pe c:\student. Observaie: de data aceasta nu mai este
nevoie de un semn de carte.
Dac ns avem dou fiiere cu extensia htm (fisierul1.htm i fisierul2.htm) i dorim s ne deplasm din
fiierul1.htm n fiierul2.htm la pagina 200, atunci n fiierul1.htm vom scrie:
<A href = c:\student\fisierul2.htm#Semnul de carte de la pagina 200>Ctre fiierul 2</a>
Observaie: La pagina 200 din fiierul2.htm voi merge i voi definii un semn de carte cu numele Semnul de carte de
la pagina 200. Astfel am realizat o legtur localo-intern.
C. Legtur extern permite realizarea unei conexiuni cu exteriorul (un site, un e-mail)
Ex: Legtur ctre un site
<A href = http://www.ase.ro>Vizitai site-ul A.S.E.</a> - permite realizarea unei conexiuni cu site-ul Academiei de
Studii Economice.
Ex: Legtur de transmitere a unui mesaj
<A href=mailto:Georgescu@yahoo.com> Georgescu Nicolae </A> - permite transmiterea unei mesaj ctre csua
potal a lui Georgescu Nicolae (numele este chiar text de legtur).
Observaie general: Pn acum tot ce am fcut nu ne permite ca pe o pagin de Web s tastm ceva, ci doar s citim
coninutul paginii respective. Cum vom proceda atunci cnd utilizatorul dorete de exemplu s scrie un mesaj, sau
dorete s completeze un formular electronic n care trebuie s-i tasteze numele i prenumele, data naterii,
domiciliu, .... etc direct de pe Internet fr a mai fi nevoie s se deplaseze la sediul unei firme? Rspuns: utiliznd
tag-uri care s permit realizarea unor casete speciale de tastare. Aceste casete speciale de tastare se obin cu tag-urile
de realizare a formularelor.
Tag-uri pentru realizarea formularelor
<form method = post/get action = adresa unde vor fi trimise datele scrise spre analiz>
..
..
..
</form>
- permite realizarea de casete speciale pentru a putea scrie pe o pagina Web.
Atributul METHOD specific modalitatea de transmitere a datelor ctre server pentru a putea fi analizate.
Atributul ACTION permite specificarea adresei server-ului care va primii datele scrise de utilizator pe internet.
Tag-urie efective de realizare a casetelor speciale se scriu ntre <form> ..i ...</form>.
Caset de tip text: <input type = text name = a size = b maxlength = c value = d>
- permite realizarea de casete de tip text
Atributul Type permite specificarea tipului de caset utilizat (text)
Atributul Name permite specificarea numelui casetei de tip text
Limbajul HTML
Pagina 7 din 14
Atributul Size permite stabilirea lungimii casete de tip text (nr. de caractere vizibile n caseta detip text)
Atributul Maxlength permite specificarea numrului maxim de caractere ce poate fi scris n caseta de tip text
Atributul Value permite specificarea textului implicit ce va aprea scris n caseta de tip text.
Ex: Introducei numele i prenumle <input type=text name=caseta1 size = 15 maxlength = 12 value = Popescu Ion>
Observaie. Caseta de tip text nu permite scrierea pe mai multe rnduri, ci doar pe unul singur.
Caset de tip parol: <input type = Password name = a size = b maxlength = c value = d>
- permite realizarea de casete de tip parol
Ex:
Introducei parola<input type=password name=caseta2 size=15 maxlength=12 value="Popescu Ion">
Buton obinuit < input type=button name=a value=Calculeaza valoare din co>
Limbajul HTML
Pagina 8 din 14
Atributul Rows permite precizarea numrului de linii vizibile n cadrul acestei casete de tip multilinie. Numrul
liniilor ce poate fi scris n aceast caset este cu mult mai mare, dar vizibile pe ecran sunt cele precizate n Rows,
pentru restul liniilor ne vom deplasa cu bare de defilare care va apare automat dac numrul de linii este mai mare
dect cel precizat cu Rows.
Atributul Cols permite precizarea numrului de caractere de pe coloan (un caracter = o coloan).
Ex: <Textarea rows=6 cols=15>Tastai mesajul dvs.</textarea>
Observaie. Verificai numrul liniilor precizate cu Rows i numrul caracterelor pe coloan precizate cu Cols.
Caset de tip combobox
<select>
<option>Elementul 1
<option>Elementul 2
<option selected>Elementul 3
<option>Elementul 4
<option>Elementul 5
</select>
- permite realizarea unui combobox (list derulant)
Ex:
Observaie. Atributul SELECTED din cadrul tag-ului OPTION de la Elementul 3 realizeaz o selectie implicit a
acestei opiuni.
Caset de tip list derulant cu selectie multipl
<select multiple size = a>
<option>Elementul 1
<option>Elementul 2
<option selected>Elementul 3
<option>Elementul 4
<option>Elementul 5
</select>
Atributul SIZE permite specificarea numrului de opiuni vizibile n cadrul listei respective.
Limbajul HTML
Pagina 9 din 14
Ex:
Observaie. n list avem 5 ri dar vizibile avem numai 4 dintre ele datorit atributului SIZE=4. Pentru a vedea i
cea de-a 5-a ar ne deplasm cu bare de defilare vertical. Pentru a selecta mai multe ri trebuie s inem i tasta
CTRL apast.
Tag-uri pentru realizarea tabelelor
La realizarea tabelelor folosim urmtoarele tag-uri:
<table border=a cellspacing=b cellpading=c width=d bordercolor=e>
<tr bgcolor=a align=left/right/center valign=top/middle/bottom>
<td bgcolor=a align=left/right/center valign=top/middle/bottom width=b>
Ex:
Limbajul HTML
Pagina 10 din 14
Observaie. Atributele folosite n cadrul tag-ul TD au prioritate fa de cele folosite n cadrul tag-ului TR. n cadrul
tag-ului TD se poate folosii simultan i atributul ROWSPAN i COLSPAN semnificnd faptul c celula respectiv
este unit peste X linii i Y coloane.
ATENIE: urmrii culorile liniilor pentru a nelege cum se realizeaz un tabel. Anumitor celule le-am schimbat
culoare pentru a vedea prioritatea dintre TR i TD.
Tag-uri pentru realizarea de Frame-uri (cadre)
Tag-urile pentru realizarea frame-urilor sunt:
<frameset rows = a frameborder = yes/no>
<frameset cols=b frameborder = yes/no>
<frame name=a noresize src=b>.
Se va folosii <frameset rows = a frameborder = yes/no> atunci cnd vrem ca ecranul monitorului s fie mprit
plecnd de la crearea mai nti a liniilor frame-urilor i pe urm a coloanelor frame-urilor de pe un monitor.
Limbajul HTML
Pagina 11 din 14
Aceast alegere o facem n fucie de liniile sau coloanele pe care vrrem s le avem ca despritoare de frame-uri
(cadre) de pe monitor i anume Ce avem dintr-un capt n altul al monitorului? linie despritoare sau coloan
despritoare. Dac avem linii, obligatoriu trebuie s pornim cu tag-ul <frameset rows = a frameborder = yes/no>,
iar dac avem coloan cu tag- ul <frameset cols = a frameborder = yes/no>. Dac avem i linii i coloane care unesc
capetele monitorului (pe orizontal i pe vertical) atunci ncepem crearea frame-urilor de la linii sau de la coloane.
Presupunem ca vrem s mprim ecranul astfel:
Observaie. Dintr-un capt la ecranului n altul nu ajunge dect o linie. Aadar ecranul este mprit n dou linii
dintre care prima are o dimensiune (*), iar cea de-a doua este de trei ori ct prima (3*). Deci pornim cu tag-ul
<frameset rows =*,3* frameborder = yes>
<html>
<head>
<title>Realizare frame-uri</title>
</head>
<frameset rows="*,3*" frameborder=yes>
<frameset cols="*,*,*">
<frame name=f1 src=1.htm noresize>
<frame name=f2 src=2.htm noresize>
<frame name=f3 src=3.htm noresize>
</frameset>
<frameset cols="*,*">
<frame name=f4 src=4.htm noresize>
<frame name=f5 src=5.htm noresize>
</frameset>
</frameset>
</html>
Prima linie este mprit i n trei coloane egale. deci trebuie s crem coloanele respective <frameset
cols="*,*,*">. Odat ce am creat coloanele respective, deoarece aceasta este forma final a primei linii, trebuie s
precizm care este sursa pentru fiecare coloan n parte de pe prima linie. Pentru c doresc s nu aibe posibilitatea
redimensionrii frame-urilor voi folosi i atributul NORESIZE atunci cnd precizez sursa fiecrui cadru n parte.
<frame name=f1 src=1.htm noresize>
<frame name=f2 src=2.htm noresize>
<frame name=f3 src=3.htm noresize>
Odat cu precizarea surselor coloanelor acesta trebuie nchis (</frameset>)
Deci cu prima linie am terminat. Urmeaz a doua linie.
Limbajul HTML
Pagina 12 din 14
Aceasta este i ea mprit n 2 coloane egale, deci trebuie s le crem: <frameset cols="*,*">. Aceasta fiind
forma final trebuie acum s precizez care este sursa pentru cele 2 noi coloane create.
<frame name=f4 src=4.htm noresize>
<frame name=f5 src=5.htm noresize>
Odat cu precizarea surselor coloanelor acesta trebuie nchis (</frameset>)
Totodat am terminat cu ambele linii, deci trebuie s nchid frame-urile (</frameset>)
Observaie: n fiierul ce conine frame-uri nu trebuie s avem tag-ul BODY, deci nu trebuie s avem nimic n
corpul documentului. Fiierele precizate ca surs a coloanelor trebuie mcar s existe, chiar dac nu avem
nimic scris n ele. (1.htm, 2.htm, 3.htm, 4.htm, 5.htm trebuie s existe).
Model de subiect
Scriei codul sursa pentru realizarea urmtoarei pagini de WEB:
Observaie. Coninutul existent n partea din stnga, partea centrala i partea de jos apare numai dup ce ai executat
click pe textul aici situat n partea de sus.
Rezolvare:
Fiierul de creare al frame-urilor (Frame.htm) conine urmtorul cod surs:
Limbajul HTML
Pagina 13 din 14
Observaie. Frame-urile din stnga nu au nici o surs, deoarece acestea vor fi completate numai dup ce execut click
stnga pe textul aici din fiierul surs SUS.htm. Fiierul SUS.htm conine urmtorul cod surs:
Observaie. Atributul TARGET din cadrul tag-ului <A href = > ..</A> are ca obiectiv afiarea conexiunii n
frame-ul cu numele precizat n TARGET i nu n cadrul aceluiai frame (vezi ce nume am dat frame-urilor (name) n
fiierul FRAME.htm i localizeaz locul cadranului n care este precizat <A href= ..>..</A> ce conine
atributul TARGET fiierul Sus.htm este ca surs pentr cadranul din partea de sus.).
Fiierul STNGA.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:
Fiierul Central.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:
Limbajul HTML
Fiierul Jos.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:
Pagina 14 din 14