Sunteți pe pagina 1din 14

Limbajul HTML

Pagina 1 din 14

La crearea unei pagini WEB se parcurg paii:


1. StartProgramsAccessoriesNOTEPAD.
2. Editarea codului surs ( a tag-urilor) n editorul de texte NOTEPAD.
3. Salvarea codului surs sub forma unui fiier cu extensia HTM sau HTML (obligatoriu). Fiierul va fi salvat n
folderul dvs.
4. Localizarea fiierului salvat la pasul 3 cu programul Windows Explorer (distinctiv acest fiier va avea
pictograma urmtoare:

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

<li> Primul element din list


<li> Al doilea element din list
<li> Al treilea element din list
</ol>
Ex: <ol type = 1 start =5>
<li> Primul element din list
<li> Al doilea element din list
<li> Al treilea element din list
</ol>
Ex: <ol type = I start =3>
<li> Primul element din list
<li> Al doilea element din list
<li> Al treilea element din list
</ol>
<ul type = a>
<li>Primul element din list
<li>Al doilea element din list
<li>Al treilea element din list
</ul>
-

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

Tag-uri pentru realizarea legturilor


Legtur intern - permite realizarea unei legturi n cadrul aceluiai fiier (de exemplu de la cuprinsul unei cri ce
cuprinde capitolele existente n cartea respectiv s se relizeze o conexsiune ctre coninutul
unui capitol)
<A href = a>textul sau imaginea de legtur</a>
- permite realizarea unei conexiuni ctre adresa specificat n atributul HREF dac execut click stnga de
mouse pe textul sau imaginea de legtur
Atributul HREF permite specificarea adresei conexiunii (unde anume s m pozitioneze n cadrul fiierului
respective).
Atributul textul sau imaginea de legtur permite specificarea textului sau imaginii pe care o s dau click
stnga de mouse pentru a ajunge la o alt pagin n cadrul aceluiai fiier.
Ex: presupunem c avem o carte pe Internet de 300 de pagini. Cuprinsul acesteia (care se afl pe pagina 1)
doresc a fi o punte de legtur ntre el i coninutul fiecrui capitol (adic dac dau click stnga de mouse pe capitolul
3 s m poziioneze direct pe coninutul capitolului 3 care se afl, de exemplu la pagina 185. Cum voi proceda ?
1. Realizarea cuprinsului ca punte de legtur ntre el i coninutul fiecrui capitol (pe pagina 1).
2. Deplasare la pagina 185 i realizarea unui semn de carte pentru a tii unde anume s-mi poziioneze
cursorul atunci cnd execut click stnga de mouse pe textul de legtur
Ex:
Suntem pe pagina 1 i realizm curpinsul.
<A href=#Continutul capitolului 1>Capitolul 1</a>
<A href=#Continutul capitolului 2>Capitolul 2</a>
<A href=#Continutul capitolului 3>Capitolul 3</a>
<A href=#Continutul capitolului 4>Capitolul 4</a>
<A href=#Continutul capitolului 5>Capitolul 5</a>
Dup cum se observ Capitolul 3 a fost trecut ca text de legtur (vezi sintaxa tag-ului <A href = . >..</A>)
pentru a putea executa click stnga de mouse i a ne trimite apoi la pagina 185(conform enun exemplu).
#Continutul capitolului 3 este numele semnului de carte de la pagina 185. Aa am vrut s numesc semnul de carte
(puteam s-i dau orice alt nume cu spaii sau fr spaii, dar dac are spaii atunci acest nume de semn de carte trebuie
pus ntre ghilimele)
Deplasare la pagina 185 n cadrul crii respective. Aceast deplasare o realizm cu bara de defilare sau cu tasta
PageDown, deoarece acesta este locul n care vreau s m poziioneze cu mouse-ul dup ce dau click pe textul de
legtur.
La aceast pagin vom crea un semn de carte cu numele #Continutul capitolului 3 astfel: <A name =
#Continutul capitolului 3>
Dup ce am definit semnul de carte la pagina 185 putem s ne deplasm de la pagina 1 la pagina 185 cu doar
un click de mouse pe textul de legtur i numai este nevoie de tasta PageDown sau de bara de defilare.
Obs: Fiierul HTML trebuie s aib cel puin 185 de pagini.
B. Legtur local permite realizarea unei conexiuni cu un fiier existent pe calculatorul local
<A href = a>text sau imagine de legtur</a>

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

Caset de tip checkbox <input type=checkbox name = a>


Ex: Care sunt limbile strine cunoscute: <input type=checkbox name = a>Englez <input type=checkbox name =
b>Francez <input type=checkbox name = c>German

Caset de tip Radio buton <input type=radio name = a>


Ex: Care este ara de origine: <input type = radio name = a>Romnia <input type=radio name = a>SUA<input
type=radio name = a>Germania
Observaie. Numele radio butoanelor trebuie s fie acelai, deoarece ara de origine este numai una singur ori dac
butoanele radio nu au aceli nume se pot selecta toate rile.
Buton de trimitere a datelor ctre server <input type=Submit name=a value = Trimite datele>
Atributul VALUE permite scrierea unui text pe buton.
Ex: <input type=Submit name=a value=Trimite datele>

Buton de tergere a datelor <input type=Reset name=a value = Sterge datele>


Ex: <input type=Reset name=a value=terge datele>

Buton obinuit < input type=button name=a value=Calculeaza valoare din co>

Caset de tip multilinie


<textarea rows=a cols=b> .</textarea> permite scrierea pe mai multe rnduri

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>

Atributul BORDER permite stabilirea grosimii liniilor tabelului


Atributul CELLSPACING permite stabilirea spaiului dintre celulele unui table
Atributul CELLPADING permite stabilirea spaiului dintre textul din interiorul unei celule i liniile acesteia.
Atributul WIDTH stabilete suprafaa pe care s o ocupe tot tabelul pe pagina de Web sau dimensiunea unei cellule.
Atributul BORDERCOLOR permite stabilirea culorii liniilor tabelului
Atributul BGCOLOR permite stabilirea culorii de fundal a liniei (n tag-ul TR) sau celulei (n tag-ul TD). Dac nu
dorim pe fundal o culoare ci o poz atunci folosim n loc de BGCOLOR atributul BACKGROUND urmnd a
preciza care este adresa pozei de fundal.
Atributul ALIGN permite alinierea pe orizontal a textului n linia/celula respectiv
Atributul VALIGN permite alinierea pe vertical a textului n linia/celula respectiv
TAG-ul TR creeaz o linie n cadrul tabelului respectiv. Deci cte linii are tabelul attea TR trebuie s avem
(cheie de control). Atributele din TR au efect asupra ntregii linii.
TAG-ul TD creeaz o celul pe linia respectiv. Deci cte celule are tabelul respectiv attea TD trebuie s
avem (cheie de control). Atributele din TD au efect asupra celulei curente.

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

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