Documente Academic
Documente Profesional
Documente Cultură
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
In aceasta prima lectie vei invata ce este limbajul HTML, la
ce iti poate fi de folos, precum si ce ar trebui sa stii inainte
de a trece la invatarea acestui limbaj.
Acum la sfarsitul primei lectii a cursului, este cazul sa-ti pui cel putin
urmatoarele doua intrebari: Vreau sa invat limbajul HTML? Ma va
ajuta cu ceva daca o sa stiu sa fac pagini web folosind HTML?
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
Despre tag-uri
<BODY> - odata cu acest tag incepe continutul paginii web. Tot ce vei
scrie intre tag-urile <BODY> si </BODY> va fi afisat, de catre browser,
pe ecranul monitorului.
Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici.
Atentie! Nu uita atunci cand scrii codul unei pagini web sa inchizi toate
tag-urile pe care le-ai deschis. Pentru a fi sigur ca nu uiti incearca sa te
obisnuiesti sa scrii dupa fiecare tag si tag-ul de incheiere (la tag-urile
pereche), scriind apoi continutul intre ele. O alta solutie pentru a nu
uita sa inchizi vreun tag, este sa folosesti la scrierea codului, un editor
HTML (atunci cand vrei sa folosesti un tag, editorul va scrie automat si
tag-ul de incheiere).
Exercitiu:
Folosind cunostintele dobandite pana acum in cadrul cursului, incearca
sa scrii codul pentru a realiza o pagina web la fel cu aceasta: click aici..
Pentru a vedea codul unei pagini web scrise cu HTML alege din meniul
View al browserului optiunea Source
Despre atribute HTML
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
In aceasta lectie vom invata despre atributele tag-urilor. Dar
mai intai sa vedem ce sunt atributele.
Ce sunt atributele?
Atributele pot fi definite ca niste proprietati ale tag-urilor.
Atributele se pun numai in tag-ul de inceput. Daca un tag nu
are nici un atribut, atunci browser-ul va lua in considerare
valorile implicite ale tag-ului respectiv. Pentru a intelege
mai bine notiunea de atribut sa vedem cateva exemple.
<A> Ancora
adresa
Imaginea de fond
imaginii
Culoarea fondului
Culoarea textului
<META> Metainformatii
description Descriere
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
In aceasta lectie vom vorbi despre culori, mai precis despre
codurile si numele culorilor. Acest curs, asa cum s-a mai
spus, este pentru cei care vor sa invete limbajul HTML intr-
un mod cat mai usor si placut in acelasi timp. De aceea, nu
vom intra in foarte multe detalii si ne vom referi, in cadrul
acestei lectii, strict la modul cum se poate schimba culoarea
fondului sau textului unei pagini web. De asemenea vei gasi
in sectiunea a treia a lectiei si un tabel cu numele si codurile
culorilor cele mai folosite.
in loc de linia:
<BODY BGCOLOR="#FF9900">
Culoarea textului
Culoarea textului in cadrul unei pagini html se poate
schimba folosind atributul COLOR (culoare) al tag-ului
<FONT>. De altfel un prim exemplu despre cum putem
schimba culoarea textului unei pagini web am vazut in lectia
precedenta.
Culoare
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
Feldspar #D19275
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
Formatarea textului in HTML
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
In aceasta lectie ne vom „juca” cu textele din cadrul
paginilor web, vom vedea cum pot fi ele formatate.
Titluri
www.ecursuri.ro
Iata si celelalte dimensiuni (de la 6 la 1):
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
www.ecursuri.ro
Daca vrem ca textul nostru sa fie scris cu caractere ingrosate, folosim
perechea de etichete <B> si </B>.
<B>Text bold</B>
Text bold
Daca vrem ca textul sa fie afisat in centrul paginii putem folosi perechea
de etichete <CENTER> si </CENTER>.
<CENTER>Text centrat</CENTER>
Text centrat
Atunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat
pe mai multe randuri vom folosi unul din tag-urile <BR> sau <P>. Tag-
ul <BR> nu are tag de incheiere, in timp ce tag-ul <P> are tag de
incheiere, insa nu este obligatoriu.
Iata diferenta:
Rezultatul va fi:
Exercitiu:
Scrie codul unei pagini web care sa contina urmatorul text (scris cu
diacritice):
HTML - imagini
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
Pana acum ai invatat cum sa folosesti decat texte si culori in
cadrul paginilor web. In aceasta lectie vei invata despre
imagini, care alese cu grija, vor da un plus design-ului
paginilor tale.
Formatele imaginilor
But
oan
e:
buton1.gif b b
marime: 877 u u
bytes t t
o o
n n
2 3
. .
g g
i i
f f
m
a m
r a
i r
m i
e m
: e
9 :
2
5 9
2
b 1
y
t b
e y
s t
e
s
Ico
n-
uri
:
icon1.gif i i
marime: 336 c c
bytes o o
n n
2 3
. .
g g
i i
f f
m m
a a
r r
i i
m m
e e
: :
2 4
4 0
5 1
b
b y
y t
t e
e s
s
An
im
atii
:
animati
e.gif
marime:
9,27 Kb
JP
EG
(Jo
int
Ph
oto
gra
phi
c
Ex
per
t
Gr
ou
p)
Fo
rm
atu
l
JP
EG
nu
ma
i
est
e
lim
itat
la
256
de
cul
ori
si
de
ace
ea
est
e
fol
osit
pe
ntr
u
fot
ogr
afii
.
Im
agi
nil
e
car
e
ap
poz poza.gi
a.j f
pg marim
ma e: 12,9
ri Kb
me
:
6,4
5
Kb
Se
obs
erv
a
ca
in
caz
ul
fot
ogr
afii
lor,
for
ma
tul
jpg
ofe
ra
o
cali
tat
e
ma
i
bu
na
a
im
agi
nii
si
ocu
pa
un
spa
tiu
mu
lt
ma
A
da
ug
ar
ea
im
ag
ini
lo
r
in
pa
gi
nil
e
we
b
As
a
cu
m
ai
vaz
ut,
la
ma
jor
itat
ea
site
-
uri
lor,
im
agi
nil
e
da
uo
not
a
ap
art
e
pa
gin
ilor
we
b.
Pe
ntr
ua
fol
osi
im
agi
ni
<I
M
G
SR
C=
"n
um
elei
ma
gin
ii.e
xte
nsi
e"
>
!
Ate
nti
e la
ext
ens
ie.
Nu
uit
a
sa
scr
ii si
ext
ens
ia
im
agi
nii
pe
ntr
u
ca
altf
el
im
agi
nea
nu
va
fi
afis
ata
de
bro
ws
er.
Est
Ac
um
sa
ved
em
cod
ul
HT
M
L:
<H
T
M
L>
<H
EA
D>
<T
IT
LE
>I
ma
gin
i</
TI
TL
E>
</
HE
AD
>
<B
OD
Y>
<C
EN
TE
R>
<B
>A
d&
#25
9u
gar
ea
im
agi
nil
or
&#
Sal
vea
za
pa
gin
a
cu
nu
me
le
im
agi
ni.
ht
ml.
Sa
ved
em
cu
m
ar
tre
bui
sa
ara
te
pa
gin
a
im
agi
ni.
ht
ml:
clic
k
aici
.
Pe
ntr
uo
fun
cti
on
are
cor
ect
a
vo
m
util
iza
un
a
din
ur
ma
toa
rel
e
lini
i de
cod
pri
n
car
e ii
vo
m
spu
ne
bro
ws
er-
ulu
i ca
im
<I
M
G
SR
C=
”../
Po
ze/
be
be.
jpg
”
BO
RD
ER
=5
>
cu
lini
a:
<I
M
G
SR
C=
”../
Po
ze/
be
be.
jpg
”
BO
RD
ER
=5
AL
T=
”I
ma
gin
e
be
be”
>
Fo
los
ire
a
im
ag
ini
lo
r
al
at
ur
i
de
te
xt
e
Pe
ntr
ua
ali
nia
o
im
agi
ne
vo
m
fol
osi
atr
ibu
tul
AL
IG
N
al
tag
-
ulu
i
<I
M
G>
.
Atr
ibu
tul
AL
IG
N
po
ate
ave
a
un
a
Ac
um
sa
scr
ie
m
cod
ul
HT
M
L
al
un
ei
pa
gin
i
we
b
car
e
va
con
tin
e si
tex
t in
jur
ul
im
agi
nii:
<H
T
M
L>
<H
EA
D>
<T
IT
LE
>E
UR
O
200
4</
TI
TL
E>
</
HE
AD
>
<B
OD
Y>
<F
ON
T
CO
LO
R=
”#0
000
FF
”
FA
CE
=”
Ti
me
Sal
vea
za
pa
gin
a
cu
nu
me
le
de
eur
o.h
tml
in
fol
der
ul
Pa
gin
i.
Iat
a
cu
m
va
ara
ta
ace
ast
a
pa
gin
a:
clic
k
aici
.
<I
M
G
SR
C=
”../
Po
ze/
eur
o.j
pg
”
BO
RD
ER
=5
AL
IG
N=
”le
ft”
>
cu
ur
ma
toa
rea
:
<I
M
G
SR
C=
”../
Po
ze/
eur
o.j
pg
”
BO
RD
ER
=5
AL
IG
N=
”le
ft”
HS
PA
CE
=5
0
VS
PA
CE
=2
0>
Sal
vea
za
pa
gin
a
cu
nu
me
le
eur
o2.
ht
ml
in
fol
der
-ul
Pa
gin
i.
Ve
zi
dif
ere
nta
:
clic
k
aici
.
Fol
ose
ste
dif
erit
e
I
m
ag
ini
ca
fo
nd
al
un
ei
pa
gi
ni
we
b
Cu
aju
tor
ul
atr
ibu
tul
ui
BA
CK
GR
OU
ND
al
tag
-
ulu
i
<B
OD
Y>
pot
i
fol
osi
o
im
agi
ne
ca
fon
d
al
un
ei
pa
gin
i
we
b.
background1. background2. background3. background4. background5.
jpg jpg jpg jpg jpg
Ac
um
in
cod
ul
pa
gin
ii
im
agi
ni.
ht
ml
din
fol
der
-ul
Pa
gin
i
ad
au
ga
tag
-
ulu
i
<B
OD
Y>
atr
ibu
tul
BA
CK
GR
OU
ND
du
<B
OD
Y
BA
CK
GR
OU
ND
=”.
./P
oze
/ba
ckg
rou
nd
1.j
pg
”>
Sal
vea
za
pa
gin
a
cu
nu
me
le
bac
kgr
ou
nd
1.h
tml
.
Iat
a
rez
ult
atu
l:
clic
k
aici
.
Re
pet
a
ope
rat
iun
ea
de
ma
i
Crearea legaturilor in HTML
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
Navigarea in cadrul site-urilor este posibila cu ajutorul link-
urilor (legaturilor). In aceasta lectie vei invata cum sa
folosesti diferite tipuri de legaturi in cadrul site-ului tau.
Pentru fiecare culoare, din cele trei de mai sus, exista cate
un atribut al tag-ului </BODY> cu ajutorul caruia putem
schimba culoarea implicita:
• LINK pentru legaturile nevizitate
• VLINK pentru legaturile vizitate
• ALINK pentru legaturile active
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
In aceasta lectie vei invata cum poti folosi listele in
pagina ta web. Listele pe care le poti crea cu ajutorul
limbajului HTML sunt de urmatoarele tipuri: liste
neordonate, liste ordonate si liste de definitii. Sa le
luam pe rand.
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
<UL>Firma noastră vă oferă
următoarele servicii:
<LI>printare
<LI>laminare
<LI>îndosariere
<LI>xerox
<LI>tehnoredactare
</UL>
</BODY>
</HTML>
Salveaza pagina cu numele de liste1.html in directorul
Pagini. Pentru a vedea cum ar trebui sa arate aceasta
pagina: click aici.
Pe langa atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul
START. Acest atribut este folosit atunci cand vrem sa schimbam valoarea
initiala, de exemplu daca vrem sa incepem de la 4, in cazul numerelor, sau de
la D, in cazul literelor mari, etc. Forma generala a acestui atribut este
START=n, unde n este un numar natural. Sa vedem un exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>În vacanţa de vară am vizitat
următoarele oraşe:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>
Personalizarea listelor
Daca vrei ca in loc de simbolurile folosite in mod prestabilit pentru elementele
listelor sa fie afisate propriile imagini, in loc de tag-ul <LI> cu care
introducem fiecare element al listei vom adauga imaginea dorita cu ajutorul
tag-ului <IMG>.
Pentru a intelege mai bine sa luam un exemplu. Salveaza mai intai imaginea
de mai jos in directorul Poze cu numele de sageata.gif.
Acum sa scriem codul unei pagini web ce va contine o lista cu persoanele din
cadrul departamentului Contabilitate al unei firme:
<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<UL>Lista persoanelor care sunt angajate în cadrul departamentului
CONTABILITATE:
<BR><BR><IMG SRC="../Poze/sageata.gif">Gheorghe Maria
<BR><BR><IMG SRC="../Poze/sageata.gif">Prodan Eugenia
<BR><BR><IMG SRC="../Poze/sageata.gif">Matac Marian
<BR><BR><IMG SRC="../Poze/sageata.gif">Neacşu Elena
<BR><BR><IMG SRC="../Poze/sageata.gif">Ionescu Violeta
<BR><BR><IMG SRC="../Poze/sageata.gif">Manea Cristina
<BR><BR><IMG SRC="../Poze/sageata.gif">Ioniţă Laura
<BR><BR><IMG SRC="../Poze/sageata.gif">Şerbănescu
Mihaela
<BR><BR><IMG SRC="../Poze/sageata.gif">Crăciun Dorina
<BR><BR><IMG SRC="../Poze/sageata.gif">Neagu Emil
</UL>
</BODY>
</HTML>
Salveaza pagina in directorul Pagini cu numele de listapersonal.html.
Daca totul a iesit asa cum trebuie pagina ta ar trebui sa arate astfel: click aici.
Exercitii:
1. Scrie codul HTML al unei pagini web care sa contina urmatoarea lista:
• Michael Schumacher
• Rubens Barichello
• Jenson Button
• Fernando Alonso
• Giancarlo Fisichella
• Juan Pablo Montoya
• Kimi Raikkonen
• Jacques Villeneuve
• David Coulthard
• Ralf Schumacher
In loc de semnul din fata fiecarui pilot foloseste urmatoarea imagine:
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
Tabelele sunt foarte importante pentru realizarea unei
pagini web. Cu ajutorul lor, pe langa crearea propriu-zisa a
tabelelor, putem controla mult mai bine elementele din
cadrul paginilor web.
Proprietatile tabelelor
Asa cum ai observat, in exemplul de mai sus am realizat un
tabel, dar fara nici o linie. Pentru ca liniile unui tabel sa fie
vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul
BORDER avand valoarea egala cu cel putin 1. In plus, poti
schimba culoarea liniilor unui tabel folosind atributul
BORDERCOLOR insotit de codul culorii dorite. Astfel,
daca vrem ca liniile tabelului nostru sa aiba culoarea rosie
vom folosi urmatoarea linie de cod:
<TABLE BORDER="1" BORDERCOLOR="#FF0000">
Inlocuieste in exemplul de mai sus si salveaza pagina cu
numele tabel2.html. Pentru a vedea rezultatul: click aici.
a
p
r
e
c
i
a
t
e
HTML pe
intelesul
tuturor
Gramatica
limbii
engleze
Infiintarea
unei firme
I
n
t
r
e
b
a
r
i
f
r
e
c
v
e
n
t
e
Ce pot gasi
pe acest
site?
De ce sa
invat online?
Ce sunt
testele
online?
Mai multe
intrebari
Trimite o
intrebare
w
w
w
.
e
c
u
r
s
u
r
i
.
r
o
Aboneaza-te
la revista
Despre noi -
contact
Publicitate
pe acest site
Harta site
Propune un
curs
Trimite un
curs
Trimite
referate
Trimite
articole
Linkuri
sponsorizate
RETETE
CULINARE
Anuntul
Telefonic
Ghidul
Serviciilor
Lista facultati
SIGHISOAR
A
Jocuri
Gratuite
Jocuri
Jocuri Barbie
Produse
promotionale
Dentist
CITATE
&&&&&&&
&&&&&&&
&&&&&&&
&&&&&&
Folosirea cadrelor intr-o pagina
web
In aceasta lectie vom invata cum putem folosi cadrele
in paginile noastre web. Cu ajutorul cadrelor putem
imparti o pagina web in mai multe zone, iar apoi
putem stabili ce pagina va fi afisata in fiecare zona.
Folosirea cadrelor intr-o pagina web
Pentru a imparti o pagina web in mai multe cadre,
trebuie sa folosim, inainte de tag-ul <BODY>, tag-ul
<FRAMESET> insotit de unul dintre atributele
<COLS> sau <ROWS>, pentru a defini exact cum va fi
impartita pagina respectiva. Astfel pentru a imparti
pagina in doua cadre orizontale vom folosi urmatoarea
linie de cod:
<FRAMESET ROWS="70%,*">
Se folosesc procente pentru a defini marimea
randurilor sau a coloanelor care vor forma cadrele. In
exemplul de mai sus, primul cadrul va avea 70% din
inaltimea paginii, iar al doilea cadru restul, adica "*"
sau 30%.
a
p
r
e
c
i
a
t
e
HTML pe
intelesul
tuturor
Gramatica
limbii
engleze
Infiintarea
unei firme
I
n
t
r
e
b
a
r
i
f
r
e
c
v
e
n
t
e
Ce pot gasi
pe acest
site?
De ce sa
invat online?
Ce sunt
testele
online?
Mai multe
intrebari
Trimite o
intrebare
w
w
w
.
e
c
u
r
s
u
r
i
.
r
o
Aboneaza-te
la revista
Despre noi -
contact
Publicitate
pe acest site
Harta site
Propune un
curs
Trimite un
curs
Trimite
referate
Trimite
articole
Linkuri
sponsorizate
RETETE
CULINARE
Anuntul
Telefonic
Ghidul
Serviciilor
Lista facultati
SIGHISOAR
A
Jocuri
Gratuite
Jocuri
Jocuri Barbie
Produse
promotionale
Dentist
CITATE
&&&&&&&
&&&&&&&
&&&&&&&
&&&&&&
Folosirea cadrelor intr-o pagina
web
In aceasta lectie vom invata cum putem folosi cadrele
in paginile noastre web. Cu ajutorul cadrelor putem
imparti o pagina web in mai multe zone, iar apoi
putem stabili ce pagina va fi afisata in fiecare zona.
Folosirea cadrelor intr-o pagina web
Pentru a imparti o pagina web in mai multe cadre,
trebuie sa folosim, inainte de tag-ul <BODY>, tag-ul
<FRAMESET> insotit de unul dintre atributele
<COLS> sau <ROWS>, pentru a defini exact cum va fi
impartita pagina respectiva. Astfel pentru a imparti
pagina in doua cadre orizontale vom folosi urmatoarea
linie de cod:
<FRAMESET ROWS="70%,*">
Se folosesc procente pentru a defini marimea
randurilor sau a coloanelor care vor forma cadrele. In
exemplul de mai sus, primul cadrul va avea 70% din
inaltimea paginii, iar al doilea cadru restul, adica "*"
sau 30%.
a
p
r
e
c
i
a
t
e
HTML pe
intelesul
tuturor
Gramatica
limbii
engleze
Infiintarea
unei firme
I
n
t
r
e
b
a
r
i
f
r
e
c
v
e
n
t
e
Ce pot gasi
pe acest
site?
De ce sa
invat online?
Ce sunt
testele
online?
Mai multe
intrebari
Trimite o
intrebare
w
w
w
.
e
c
u
r
s
u
r
i
.
r
o
Aboneaza-te
la revista
Despre noi -
contact
Publicitate
pe acest site
Harta site
Propune un
curs
Trimite un
curs
Trimite
referate
Trimite
articole
Linkuri
sponsorizate
RETETE
CULINARE
Anuntul
Telefonic
Ghidul
Serviciilor
Lista facultati
SIGHISOAR
A
Jocuri
Gratuite
Jocuri
Jocuri Barbie
Produse
promotionale
Dentist
CITATE
&&&&&&&
&&&&&&&
&&&&&&&
&&&&&&
Folosirea cadrelor intr-o pagina
web
In aceasta lectie vom invata cum putem folosi cadrele
in paginile noastre web. Cu ajutorul cadrelor putem
imparti o pagina web in mai multe zone, iar apoi
putem stabili ce pagina va fi afisata in fiecare zona.
Folosirea cadrelor intr-o pagina web
Pentru a imparti o pagina web in mai multe cadre,
trebuie sa folosim, inainte de tag-ul <BODY>, tag-ul
<FRAMESET> insotit de unul dintre atributele
<COLS> sau <ROWS>, pentru a defini exact cum va fi
impartita pagina respectiva. Astfel pentru a imparti
pagina in doua cadre orizontale vom folosi urmatoarea
linie de cod:
<FRAMESET ROWS="70%,*">
Se folosesc procente pentru a defini marimea
randurilor sau a coloanelor care vor forma cadrele. In
exemplul de mai sus, primul cadrul va avea 70% din
inaltimea paginii, iar al doilea cadru restul, adica "*"
sau 30%.
Cursuri apreciate
Intrebari frecvente
De ce sa invat online?
Realizarea unui
site in HTML
C
u
p
r
i
n
s
Lectia 1
Lectia 2
Lectia 3
Lectia 4
Lectia 5
Lectia 6
Lectia 7
Lectia 8
Lectia 9
Lectia 10
Lectia 11
Lectia 12
In aceasta ultima lectie a
cursului "HTML pe intelesul
tuturor" vom realiza
impreuna site-ul unei
gradinite de copii. Noi i-am
dat numele gradinita
Abecedar.
Inainte de a trece la
realizarea efectiva a site-ului,
va trebui sa faci un nou
director pe care sa-l numesti
Abecedar, iar in cadru
acestuia doua subdirectoare:
Pagini si Poze. Apoi copiaza
imaginile de mai jos (click
dreapta - Save Picture As),
cu denumirea de sub fiecare,
in subdirectorul Poze din
directorul Abecedar:
home.jpg calculator.jpg
limbistraine.jpg muzica.jpg
excursii.jpg desprenoi.jpg
logo.jpg
meniu.jpg
welcome.jpg
copil.jpg
calculator2.jp
g
calculator3.jpg
straine.jpg
learn.jpg
muzica2.jpg
muzica3.jpg
excursii2.jpg
excursii3.jpg
desprenoi2.jp
g
desprenoi3.jpg
Acum, dupa ce ai copiat
pozele in subdirectorul
Poze, din directorul
Abecedar si le-ai denumit
corespunzator sa
continuam realizarea site-
ului. Site-ul nostru va avea
urmatoarea structura:
Vom folosi asadar, cadrele
pe care le-am invatat in
lectia 10. Vom realiza mai
intai pagina din partea de
sus top.html, care va avea
urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Top</TITLE>
</HEAD>
<BODY
bgcolor="#00CCFF">
<img
src="../Poze/logo.jpg"
align="left" hspace="50">
<B><FONT
color="red"><BR><BR><
BR>
E-mail:<a
href="mailto:abecedar@y
ahoo.com">abecedar@yah
oo.com</a><BR>
Web:<a
href="http://www.gradinit
aabecedar.ro">www.gradi
nitaabecedar.ro</a><BR>
</FONT></B>
</BODY>
</HTML>
Copiaza codul intr-un
fisier text, apoi salveaza
pagina (File/Save As) cu
numele de top.html in
folderul Pagini.
Ne vom ocupa in
continuare si de restul
paginilor. In primul rand,
realizeaza o pagina
calculator.html, in folderul
Pagini, care sa aiba acelasi
cod HTML cu pagina
home.html, numai ca in loc
de index.html vom folosi
icalculator.html. In mod
asemanator, facem si
paginile limbistraine.html
(in loc de index.html
folosim istraine.html),
muzica.html (in loc de
index.html folosim
imuzica.html),
excursii.html (in loc de
index.html folosim
iexcursii.html),
desprenoi.html (in loc de
index.html folosim
idesprenoi.html).