Documente Academic
Documente Profesional
Documente Cultură
Lectia 1: Introducere
Lectia 2: Structura unui document HTML
Lectia 3: Despre atribute
Lectia 4: Despre culori
Lectia 5: Formatarea textului
Lectia 6: Imagini
Lectia 7: Legaturi
Lectia 8: Liste
Lectia 9: Tabele
Lectia 10: Cadre
Lectia 11: Formulare
Lectia 12: Realizarea unui site
http://www.ecursuri.ro/cursuri/html-pe-intelesul-tuturor.php
1. Introducere in HTML
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.
Ce este limbajul HTML?
HTML este prescurtarea de la Hypertext Markup Language, ceea ce reprezinta de fapt
limbajul pe care browserele de internet il inteleg si cu ajutorul lui pot fi afisate paginile
web. Limbajul HTML nu este greu de invatat, asa cum te vei putea convinge din acest
curs. Este de ajuns sa cunosti tag-urile de baza ale acestui limbaj (vom vedea mai incolo
ce inseamna aceste tag-uri) pentru a putea crea o pagina web.
Pentru aceasta trebuie sa exersezi cat mai mult, incepand cu exemplele din cadrul
cursului HTML pe intelesul tuturor, sa scrii tu codul pentru fiecare exemplu. In felul
acesta vei dobandi foarte repede cunostintele de baza, care te vor ajuta sa creezi pagini
web din ce in ce mai performante.
De ce trebuie sa invat HTML?
Asa cum spuneam, desi exista mai multe programe care au grija de codul HTML atunci
cand faci o pagina web, pentru a usura folosirea lor este nevoie de cel putin cateva
notiuni elementare de HTML.
Aceste programe se numesc editoare HTML si pot fi de doua tipuri: editoare clasice si
editoare de tipul WYSIWYG (What You See Is What You Get, care se traduce prin ceea
ce vezi este ceea ce obtii). In cazul celei de-a doua categorii de editoare HTML,
utilizatorii nu trebuie decat sa se ocupe de partea grafica, de asezarea in pagina etc.,
scrierea codului HTML ramanand in seama acestor programe. O observatie demna de
luat in seama este si aceea ca cele mai bune editoare HTML nu sunt gratuite.
Sfatul meu este ca pentru realizarea paginilor web sa folosesti un editor HTML, care iti
este cel mai de folos, dar numai atunci cand te vei familiariza cu limbajul HTML.
In concluzie, invatarea limbajului HTML are trei mari avantaje:
este foarte simpla si nu necesita mult timp
ofera controlul absolut asupra realizarii paginii web
poti folosi in cadrul paginilor pe care le vei realiza secvente de cod HTML
"imprumutate" de la alte pagini web (pentru a vedea codul sursa al unei pagini web, in
Internet Explorer intra in meniul View si apoi selecteaza Source)
!Sa nu uit. Pentru a intra in posesia editoarelor HTML sau a variantelor demo ale
editoarelor profesionale, le poti descarca de pe internet, dar daca nu ai o conexiune buna
la internet, le poti gasi si pe CD-urile revistelor de IT.
Ce trebuie sa stiu pentru a ma apuca sa invat HTML?
Invatarea limbajului HTML este foarte usoara, nu ai nevoie decat de urmatoarele:
sa stii sa utilizezi un editor de text (ex: Notepad etc.)
sa ai cel putin un browser de internet (ex: Microsoft Internet Explorer, Netscape
Comunicator etc.)
sa-ti faci un pic de timp liber (de exemplu o jumatate de ora pe zi), pentru a urma cursul
si pe acesta tot la inceput. In continuare vin tag-urile <HEAD> si </HEAD>. Apoi intre
cele doua tag-uri vom pune perechea de tag-uri <TITLE> si </TITLE>. Intre aceste taguri punem titlul paginii: Prima mea pagina web. Urmeaza tag-urile <BODY> si
</BODY>. Ce vom scrie intre ele va fi afisat in browserul de internet.
Iata cum ar trebui sa arate codul HTML:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!<BR>
</BODY>
</HTML>
Am folosit tag-ul <BR> pentru a trece pe urmatorul rand. Astfel ii spunem browser-ului
ca ce va fi scris dupa tag-ul <BR> va trebui afisat pe urmatorul rand. Tag-ul <BR> nu are
un tag de inchidere.
Dupa ce am scris codul, va trebui sa salvam documentul cu extensia .html sau .htm. Din
meniul File alege optiunea Save As, iar apoi denumeste documentul asa cum vrei, dar cu
una din extensiile de mai sus. Apasa butonul Save. Ai acum un document html, care
reprezinta prima ta pagina web. Intra in fisierul unde ai salvat documentul si deschide-l.
Ar trebui sa arate asa: click aici.
Inainte de a trece la lectia 3, sa recapitulam cu ajutorul exercitiului de mai jos, notiunile
invatate in aceasta lectie.
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.
http://www.ecursuri.ro/cursuri/structura-unui-document-html.php
Acum sa folosim cele doua linii de mai sus in cadrul paginii noastre. Prima linie o vom
folosi la sfarsit, in timp ce a doua linie o vom folosi dupa mesajul "Bine ai venit!". Noul
cod HTML al paginii noastre va fi urmatorul:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
<FONT COLOR="#0000FF" SIZE="6">
Bine ai venit!
</FONT><BR>
<HR COLOR="#FF0000" WIDTH="25%" SIZE="5%" ALIGN="left">
<BR>
<FONT COLOR="#FF0000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!
</FONT>
<HR>
</BODY>
</HTML>
Salveaza pagina cu ce nume vrei tu. Nu uita de extensia .html sau .htm. Pentru a vedea
rezultatul click aici.
Ne oprim aici cu exemplele de atribute, insa in lectiile urmatoare vor fi folosite atributele
cele mai importante, astfel incat pana la sfarsitul cursului te vei familiariza cu toate
acestea.
Nu uita ca pentru a intelege cat mai bine limbajul HTML trebuie sa scrii si tu codul
fiecarui exemplu prezentat aici, sa salvezi pagina cu extensia .html sau .htm si sa verifici
daca ai obtinut aceleasi rezultate.
Lista celor mai utilizate tag-uri impreuna cu atributele lor
In tabelul urmator vor fi prezentate cele mai utilizate tag-uri impreuna cu cele mai
importante atribute ale lor:
Nume tag
Nume
Valoare atribut Detalii
atribut
<A>
Ancora
href
URL
target
_blank
_self
_parent
_top
<B>
Text bold
<BODY>
Cuprinsul documentului
Nume tag
Nume
atribut
Valoare atribut
Detalii
Imaginea de fond
bgcolor
cod culoare
nume culoare
Culoarea fondului
leftmargin
procent din
latimea paginii
numar de pixeli
topmargin
procent din
inaltimea paginii
numar de pixeli
text
cod culoare
nume culoare
Culoarea textului
alink
cod culoare
nume culoare
link
cod culoare
nume culoare
vlink
cod culoare
nume culoare
<BR>
Sfarsitul randului
<CENTER>
<FONT>
Fontul textului
color
cod culoare
nume culoare
Culoarea fontului
face
nume font
Tipul fontului
size
un numar
de la 1 la 7
Marimea fontului
<FORM>
Formular interactiv
action
URL
method
GET
POST
Nume tag
Nume
atribut
Valoare atribut
<FRAME>
Detalii
Cadru (fereastra)
frameborder 1 sau 0
src
Sursa cadrului
URL
<FRAMESET>
Multime de ferestre
cols
procent din
latimea paginii
numar de pixeli
rows
procent din
inaltimea paginii
numar de pixeli
left
center
right
justify
Alinierea titlului
<HEAD>
Antetul documentului
<HR>
Linie orizontala
<HTML>
align
left
center
right
color
cod culoare
nume culoare
Culoarea liniei
size
numar de pixeli
Inaltimea liniei
width
procent din
latimea paginii
numar de pixeli
Latimea liniei
Document HTML
Nume tag
Nume
atribut
Valoare atribut
Detalii
<I>
Text italic
<IMG>
left
right
top
middle
bottom
alt
text
border
numar de pixeli
height
procent
numar de pixeli
Inaltimea imaginii
hspace
numar de pixeli
src
URL
Adresa imaginii
vspace
numar de pixeli
width
procent
numar de pixeli
Latimea imaginii
<INPUT>
Element al formularului
maxlength
numar
name
date de tip
caracter
size
numar
src
URL
Nume tag
Nume
atribut
Valoare atribut
Detalii
type
text
password
checkbox
radio
submit
reset
file
hidden
image
button
Tip input
value
date de tip
caracter
Valoare input
<LI>
<META>
Metainformatii
content
text
name
author
Autor
description
Descriere
keywords
Cuvinte cheie
<OL>
Lista ordonata
start
numar
type
A, a, I, i, 1
Tipul numerotarii: A, a, I, i, 1
(implicit)
<P>
Paragraf
align
left
center
right
justify
<SELECT>
Alinierea paragrafului
Lista de selectii
multiple
name
date de tip
caracter
size
numar
Nume tag
Nume
atribut
Valoare atribut
Detalii
<STRONG>
Text evidentiat
<SUB>
Text indice
<SUP>
Text exponent
<TABLE>
Tabel
align
left
center
right
Alinierea tabelului
background URL
bgcolor
cod culoare
nume culoare
border
procent
numar de pixeli
Chenarul tabelului
bordercolor
cod culoare
nume culoare
Culoarea chenarului
cellpadding
numar de pixeli
cellspacing
numar de pixeli
cols
numar
hspace
numar de pixeli
vspace
numar de pixeli
width
procent
numar de pixeli
Latimea tabelului
<TD>
Celula de tabel
align
left
center
right
background URL
bgcolor
cod culoare
nume culoare
Nume tag
Nume
atribut
Valoare atribut
Detalii
colspan
numar
height
numar de pixeli
Inaltimea celulei
rowspan
numar
valign
top
middle
bottom
width
numar de pixeli
Latimea celulei
<TEXTAREA>
numar
Numarul de coloane
name
date de tip
caracter
rows
numar
Numarul de randuri
<TITLE>
Titlu document
<TR>
Rand tabel
align
left
center
right
bgcolor
cod culoare
nume culoare
valign
top
middle
bottom
<U>
Text subliniat
<UL>
Lista neordonata
type
circle
disc
square
Forma marcajului
http://www.ecursuri.ro/cursuri/html-despre-atribute.php
Culoare
Nume culoare
DarkKhaki
DarkMagenta
DarkOliveGreen
Darkorange
DarkOrchid
DarkRed
DarkSalmon
DarkSeaGreen
DarkSlateBlue
DarkSlateGray
DarkTurquoise
DarkViolet
DeepPink
DeepSkyBlue
DimGray
DodgerBlue
Feldspar
FireBrick
FloralWhite
ForestGreen
Fuchsia
Gainsboro
GhostWhite
Gold
GoldenRod
Gray
Green
GreenYellow
HoneyDew
HotPink
IndianRed
Indigo
Ivory
Khaki
Cod culoare
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#D19275
#B22222
#FFFAF0
#228B22
#FF00FF
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#808080
#008000
#ADFF2F
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
Culoare
Nume culoare
Lavender
LavenderBlush
LawnGreen
LemonChiffon
LightBlue
LightCoral
LightCyan
LightGoldenRodYellow
LightGrey
LightGreen
LightPink
LightSalmon
LightSeaGreen
LightSkyBlue
LightSlateBlue
LightSlateGray
LightSteelBlue
LightYellow
Lime
LimeGreen
Linen
Magenta
Maroon
MediumAquaMarine
MediumBlue
MediumOrchid
MediumPurple
MediumSeaGreen
MediumSlateBlue
MediumSpringGreen
MediumTurquoise
MediumVioletRed
MidnightBlue
MintCream
Cod culoare
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#D3D3D3
#90EE90
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#8470FF
#778899
#B0C4DE
#FFFFE0
#00FF00
#32CD32
#FAF0E6
#FF00FF
#800000
#66CDAA
#0000CD
#BA55D3
#9370D8
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA
Culoare
Nume culoare
MistyRose
Moccasin
NavajoWhite
Navy
OldLace
Olive
OliveDrab
Orange
OrangeRed
Orchid
PaleGoldenRod
PaleGreen
PaleTurquoise
PaleVioletRed
PapayaWhip
PeachPuff
Peru
Pink
Plum
PowderBlue
Purple
Red
RosyBrown
RoyalBlue
SaddleBrown
Salmon
SandyBrown
SeaGreen
SeaShell
Cod culoare
#FFE4E1
#FFE4B5
#FFDEAD
#000080
#FDF5E6
#808000
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#D87093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#800080
#FF0000
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
Sienna
Silver
SkyBlue
SlateBlue
SlateGray
#A0522D
#C0C0C0
#87CEEB
#6A5ACD
#708090
Culoare
Nume culoare
Snow
SpringGreen
SteelBlue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
VioletRed
Wheat
White
WhiteSmoke
Yellow
YellowGreen
http://www.ecursuri.ro/cursuri/html-despre-culori.php
Cod culoare
#FFFAFA
#00FF7F
#4682B4
#D2B48C
#008080
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#D02090
#F5DEB3
#FFFFFF
#F5F5F5
#FFFF00
#9ACD32
Tag-urile acestea accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la
stanga, la centru sau la dreapta.
Etichete pentru formatarea textului
Am vazut in sectiunea precedenta cum arata titlurile. In continuare vor fi prezentate
diverse moduri de formatare a unui text.
Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag
accepta mai multe atribute (color, face, size) care ne vor ajuta in formatarea textelor.
Atributul COLOR se refera la culoarea textului ce va fi incadrat de tag-urile <FONT> si
</FONT>, atributul FACE arata tipul fontului, iar atributul SIZE arata marimea fontului.
Pentru a alege culoarea textului, trebuie sa consulti mai intai tabelul de culori, iar apoi,
atunci cand te-ai hotarat ce culoare vei folosi, sa scrii codul sau numele acelei culori ca
valoare a atributului COLOR.
De exemplu, liniile de cod:
<FONT COLOR=CornflowerBlue>ecursuri.ro cursuri online gratuite</FONT>
Sau
<FONT COLOR=#6495ED>ecursuri.ro cursuri online gratuite</FONT>
vor avea urmatorul rezultat:
ecursuri.ro cursuri online gratuite
<FONT COLOR=#FF0000>Totul la ecursuri.ro este gratuit</FONT>
va afisa in cadrul browserului de internet:
Totul la ecursuri.ro este gratuit
La tipul fontului, la fel ca si la culori, este bine sa folosesti un font care se afla pe
majoritatea calculatoarelor, pentru ca daca folosesti un font mai putin utlizat, multi
utilizatori nu vor putea vedea textele din cadrul paginilor tale cu acelasi font. Cele mai
folosite fonturi pentru paginile web sunt urmatoarele:
Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
Acest text a fost scris cu fontul "helvetica"
<FONT COLOR=#000000 FACE=Arial>Acest text ...</FONT>
Pentru a schimba dimensiunea implicita a fontului, vom folosi una din valorile atributului
size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mica dimensiune si
7 pentru cea mai mare):
<FONT COLOR=#FFA500 FACE=Arial SIZE=7>www.ecursuri.ro</FONT>
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
Pentru ca textul sa fie scris cu caractere italice, folosim perechea de etichete <I> si </I>.
<I>Text italic</I>
Text italic
Pentru ca textul sa fie subliniat, folosim perechea de etichete <U> si </U>.
<U>Text subliniat</U>
Text subliniat
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.
Tag-ul <BR> vine de la line break (intrerupere de linie) si l-am mai folosit in cadrul
acestui curs. Asa cum am vazut si pana acum este folosit pentru a face trecerea de la o
linie la alta.
Astfel sa presupunem ca avem urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>
Acest cod va avea ca rezultat:
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
Acum sa folosim eticheta <BR> in cadrul codului:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul HTML.
</BODY>
</HTML>
Iata diferenta:
Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML.
Tag-ul <P> vine de la cuvantul paragraf si se deosebeste de tag-ul <BR> prin faptul ca
prin utilizarea lui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre
texte. Sa revenim la exemplul de mai sus. Se vor folosi ambele tag-uri, <BR> si <P>,
pentru a se vedea diferenta dintre ele.
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul HTML.
</BODY>
</HTML>
Rezultatul va fi:
Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML.
Daca scriem un text intre tag-urile <P> si </P>, atunci textul va fi incadrat de cate un
rand liber, la fel ca in exemplul de mai jos:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<P>Exersez limbajul HTML.</P>Stiu limbajul HTML.
</BODY>
</HTML>
Vom obtine urmatorul rezultat:
Invat limbajul HTML.
Exersez limbajul HTML.
Stiu limbajul HTML.
Utilizarea caracterelor speciale
Iti mai aduci aminte de prima ta pagina web pe care ai facut-o in cadrul acestui curs?
Daca nu click aici.
Dupa cum vezi, textul nu este scris cu diacriticele specifice limbii romane. (, , , etc.).
Pentru a folosi si aceste litere trebuie sa scriem o anumita combinatie de diverse caractere
pentru ca browserul sa citeasca diacriticele.
Iata in continuare codurile HTML pentru cele mai folosite caractere si simboluri, care nu
se gasesc pe tastatura calculatorului:
Simbol
Cod HTML
Numar
Nume
 
¢
¢
£
£
©
©
«
«
®
®
°
°
±
±
²
²
³
³
µ
µ
¶
¶
¹
¹
»
»
¼
¼
½
½
Simbol
Cod HTML
Numar
Nume
¾
¾
Â
Â
Î
Î
×
×
Ø
Ø
â
â
î
î
÷
÷
ø
ø
Ş
ş
Ţ
ţ
€
€
Acum dupa ce am vazut codurile pentru diverse caractere pe care le vom folosi in cadrul
paginilor noastre web, sa vedem cum arata codul paginii noastre de la inceput, daca textul
va fi scris cu diacritice:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vom învăţa împreună limbajul HTML.
Aceasta este prima mea pagină web!
</BODY>
</HTML>
Aceasta pagina web scrisa cu diacritice ar trebui sa arate astfel: click aici.
Exercitiu: Scrie codul unei pagini web care sa contina urmatorul text (scris cu
diacritice): Bine ai venit pe site-ul www.ecursuri.ro, un site care i ofer aproape tot
ce ai nevoie pentru a nva online. Toate cursurile, referatele i jocurile sunt gratuite. n
sperana c, prin intermediul crii de oaspei, ne vei aprecia, ne vei luda sau ne vei
critica, vom ncerca s ne perfecionm pe zi ce trece.
Pentru a vedea cum ar arata pagina: click aici.
Pentru a alinia un text folosim codul (spatiu) de cateva ori.
Pentru a te verifica, alege din fereastra browser-ului din meniul View optiunea Source
http://www.ecursuri.ro/cursuri/html-formatarea-textului.php
6. HTML imagini
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
Browserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. Cele mai
raspandite sunt cele cu extensia .gif si cele care au una din terminatiile .jpg sau .jpeg. Iata
in continuare cateva caracteristici ale acestor formate de imagini:
GIF (Graphics Interchange Format)
Formatul GIF poate reda un numar de 256 de culori, de aceea este folosit pentru
imaginile de dimensiuni mici: butoane, icon-uri, animatii.
Butoane:
buton1.gif
marime: 877 bytes
buton2.gif
marime: 925 bytes
buton3.gif
marime: 921 bytes
icon2.gif
marime: 245 bytes
icon3.gif
marime: 401 bytes
Icon-uri:
icon1.gif
marime: 336 bytes
Animatii:
Se observa ca in cazul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si
ocupa un spatiu mult mai mic decat daca am fi salvat aceeasi imagine in formatul gif.
Adaugarea imaginilor in paginile web
Asa cum ai vazut, la majoritatea site-urilor, imaginile dau o nota aparte paginilor web.
Pentru a folosi imagini si in cadrul paginilor tale web trebuie sa folosesti tag-ul <IMG>
insotit de atributul SRC (source) care indica adresa sau calea catre imaginea pe care vrei
sa o folosesti.
Forma generala a acestui tag va fi:
<IMG SRC="numeleimaginii.extensie">
! Atentie la extensie. Nu uita sa scrii si extensia imaginii pentru ca altfel imaginea nu va
fi afisata de browser.
Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele (pagini HTML, imagini
etc.) in cadrul aceluiasi folder. Daca vei folosi in codul HTML al paginilor site-ului tau
linia de cod de mai sus, imaginea va fi afisata doar daca pagina respectiva va fi in acelasi
folder cu imaginea pe care vrei sa o folosesti. In caz contrar imaginea nu va fi afisata.
Sa scriem codul unei pagini web care sa contina o imagine. Salveaza imaginea de mai jos
(click dreapta, Save Picture As) sub numele de bebe.jpg in acelasi folder cu pagina web
pe care o vom face in continuare.
Pentru o functionare corecta vom utiliza una din urmatoarele linii de cod prin care ii vom
spune browser-ului ca imaginea se afla in folder-ul Poze:
<IMG SRC=../Poze/bebe.jpg>
- daca pagina va fi salvata in subfolderul Pagini si imaginea va fi in subfolderul Poze.
<IMG SRC=Poze/bebe.jpg>
- daca pagina va fi salvata in folderul Site si imaginea va fi in subfolderul Poze.
Incearca si tu:
1. Fa un folder pe care denumeste-l Site.
2. In cadrul acestuia mai fa doua subfoldere: Pagini, respectiv Poze.
3. Copiaza imaginea bebe.jpg in folderul Poze.
4. Modifica in codul HTML de mai sus linia:
<IMG SRC=bebe.jpg>
cu linia:
<IMG SRC=../Poze/bebe.jpg>
5. Salveaza pagina in folderul Pagini cu numele imagini.html.
6. Dublu click pe imagini.html din folder-ul Pagini.
Daca totul a functionat bine ar trebui sa obtii aceeasi pagina web.
Daca vrei ca imaginea sa fie incadrata de un chenar, foloseste atributul BORDER al tagului <IMG>. Acest atribut are ca valoare numere intregi pozitive.
<IMG SRC=../Poze/bebe.jpg BORDER=5>
Noua pagina web va fi: click aici.
Daca imaginea va fi de dimensiuni mai mari, atunci pana cand se va incarca si va fi
afisata de browser, utilizatorul poate vedea un text inlocuitor al imaginii. Acest lucru se
poate realiza folosind atributul ALT impreuna cu tag-ul <IMG>.
Daca trecem cursorul mouse-ului deasupra imaginii, o sa apara textul pe care l-am scris la
atributul ALT.
De exemplu, la pagina de mai sus, imagini.html, vom inlocui linia:
<IMG SRC=../Poze/bebe.jpg BORDER=5>
cu linia:
<IMG SRC=../Poze/bebe.jpg BORDER=5 ALT=Imagine bebe>
Folosirea imaginilor alaturi de texte
Pentru a alinia o imagine vom folosi atributul ALIGN al tag-ului <IMG>. Atributul
ALIGN poate avea una dintre valorile: left sau right, aliniere la stanga sau la dreapta
paginii.
Salveaza imaginea de mai jos (click dreapta, Save Picture As) cu numele de euro.jpg in
folder-ul Poze.
Acum sa scriem codul HTML al unei pagini web care va contine si text in jurul imaginii:
<HTML>
<HEAD>
<TITLE>EURO 2004</TITLE>
</HEAD>
<BODY>
<FONT COLOR=#0000FF FACE=Times New Roman>
<CENTER><B>Istoria campionatului european de fotbal</B></CENTER>
</FONT><BR>
<IMG SRC="../Poze/euro.jpg" BORDER=5 ALIGN=left>
<FONT COLOR="#FF0000" FACE=Arial>
Prima ediţie a campionatului european de fotbal a avut loc în
Franţa în anul 1960, iar câştigătoare a fost Rusia.
Următorul turneu european a avut loc în anul 1964 în Spania,
acolo unde s-a impus ţara gazdă. Patru ani mai târziu, în
1968, în Italia, a fost rândul acesteia să câştige trofeul.
În 1972 organizatoare a fost Belgia, Republica Federală Germană
impunându-se. În 1976 a venit rândul Cehoslovaciei să
câştige campionatul european de fotbal, disputat în Iugoslavia.
http://www.ecursuri.ro/cursuri/html-imagini.php
Pentru a intelege cat mai bine cum functioneaza legaturile catre diverse pagini web, este
bine sa faci si tu, pe calculatorul tau, o structura asemanatoare cu cea de mai sus, iar apoi
sa faci cateva pagini HTML in diverse directoare sau subdirectoare si sa incerci sa creezi
legaturi din fiecare pagina HTML catre celelate. Iata cateva exemple:
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Contabilitate
catre o pagina HTML din directorul Firma 1, vom folosi urmatoarea valoare a atributului
HREF:
<A HREF="Firma 1/numelepaginii.html">Text link</A>
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Site catre o
pagina HTML din directorul Carti, vom folosi urmatoarea valoare a atributului HREF:
<A HREF="Documente/Carti/numelepaginii.html">Text link</A>
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre
o pagina HTML din directorul Scoala, vom folosi urmatoarea valoare a atributului
HREF:
<A HREF="../numelepaginii.html">Text link</A>
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Bilanturi catre o
pagina HTML din directorul Site, vom folosi urmatoarea valoare a atributului HREF:
<A HREF="../../numelepaginii.html">Text link</A>
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Servici catre o
pagina HTML din directorul Matematica, vom folosi urmatoarea valoare a atributului
HREF:
<A HREF="../../Scoala/Matematica/numelepaginii.html">Text link</A>
- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Firma 2 catre o
pagina HTML din directorul Firma 3, vom folosi urmatoarea valoare a atributului
HREF: <A HREF="../Firma 3/numelepaginii.html">Text link</A>
Legatura catre un site
Dupa ce ai vazut cum se folosesc legaturile catre alte pagini html locale acum vom vedea
impreuna cum putem adauga o legatura catre un site particular. Trebuie sa folosesti
urmatoarea linie de cod:
<A HREF="adresa site-ului">Textul legaturii</A>
Sa facem o pagina web care sa contina legaturi catre site-uri ale unor ziare din Romania.
Scrie urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Legaturi catre site-uri particulare</TITLE>
</HEAD>
<BODY>
<CENTER>
<B>Legături către site-urile unor ziare din România </B>
</CENTER>
<BR><A HREF="http://www.evz.ro">Evenimentul Zilei</A>
<BR><A HREF="http://www.jurnalul.ro">Jurnalul Naţional</A>
<BR><A HREF="http://www.capital.ro">Capital</A>
<BR><A HREF="http://www.prosport.ro">Prosport</A>
<BR><A HREF="http://www.gsp.ro">Gazeta sporturilor</A>
<BR><A HREF="http://www.libertatea.ro">Libertatea</A>
<BR>
</BODY>
</HTML>
Salveaza pagina cu numele de ziare.html in directorul Pagini.
Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici.
Asa cum ai observat pana acum, atunci cand dai click pe una dintre legaturile din paginile
prezentate ca exemple, se deschide o pagina HTML in aceeasi fereastra a browser-ului,
peste pagina ce contine legatura. Pentru a deschide o noua fereastra a browser-ului atunci
cand se da click pe o legatura trebuie folosit atributul TARGET caruia i se atribuie
valoarea "_blank".
Sa vedem un exemplu: sa schimbam codul paginii ziare.html astfel incat site-ul fiecarui
ziar sa se deschida intr-o noua fereastra, atunci cand se va efectua un click pe legatura
catre acesta. Daca in plus vrei ca, atunci cand utilizatorii paginii tale web vor trece
cursorul mouse-ului deasupra legaturilor, sa apara o mica nota explicativa, trebuie sa
folosesti atributul TITLE. Ca valoare a acestui atribut trebuie sa scrii textul care vrei sa
apara atunci cand se va trece cursorul mouse-ului deasupra legaturii respective. Pentru a
intelege mai bine iata cum va arata codul paginii ziare.html dupa adaugarea atributelor
TARGET si TITLE pentru fiecare legatura:
<HTML>
<HEAD>
<TITLE>Legaturi catre site-uri particulare</TITLE>
</HEAD>
<BODY>
<CENTER>
<b>Legături către site-urile unor ziare din România </b>
</CENTER>
<BR><A HREF="http://www.evz.ro" TARGET="_blank" TITLE="Ziarul
Evenimentul Zilei">Evenimentul Zilei</A>
ecursuri.ro?</A><BR><BR><BR>
<A HREF="#intrebarea2">2. Ce este un curs online?</A><BR><BR><BR>
<A HREF="#intrebarea3">3. De ce să învăţ
online?</A><BR><BR><BR><BR>
<HR><BR><BR><BR><BR><BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman">
<A NAME="#intrebarea1">1. Ce pot găsi pe site-ul
ecursuri.ro?</A></FONT><BR> <BR>
Site-ul ecursuri.ro îşi propune să ofere
vizitatorilor săi cât mai multe resurse pentru a învăţa
online. În aces moment, pe site, sunt disponibile peste 20 de cursuri online, din
diverse domenii, dar cu ajutorul vostru sperăm ca numărul acestora
să crească.<BR>
Pe lângă cursurile online vei găsi, în
cadrul
site-ului nostru, mai mult de 1000 de referate şi peste 100 de jocuri online.
<BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR> <BR><BR>
<BR><BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman">
<A NAME="#intrebarea2">2. Ce este un curs online?</A></FONT><BR><BR>
Un curs online presupune ca toate materialele necesare,
să fie disponibile pe internet. Aşadar, viitorii cursanţi vor avea la
dispoziţie toate resursele necesare pentru învăţat, la fel ca
şi în cazul unui curs tradiţional, singura deosebire fiind că
totul se petrece online.
<BR><BR><BR><BR><BR> <BR><BR><BR> <BR><BR><BR><BR><BR>
<BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman">
<A NAME="#intrebarea3">3. De ce să învăţ online?</A>
</FONT><BR> <BR>
Cursurile online prezintă, indiscutabil, foarte multe
avantaje faţă de alte tipuri de cursuri. În primul rând
cursurile online pot fi consultate oricând, ele fiind disponibile non stop pe
internet. Un lucru extrem de important în alegerea unui curs online este
şi preţul scăzut al
unui astfel de curs comparativ cu preţurile cursurilor tradiţionale.
În cazul cursurilor prezente pe site-ul ecursuri.ro, acestea sunt 100%
GRATUITE.
<BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR>
<BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR>
</BODY>
</HTML>
Salveaza pagina cu numele intrebari.html in directorul Pagini.
Daca totul a mers bine pagina ar trebui sa fie la fel cu aceasta: click aici
Acum sa scriem codul unei pagini web care sa foloseasca aceasta imagine ca legatura
catre pagina intrebari.html. Deschide editorul de texte si scrie codul urmator:
<HTML><HEAD><TITLE>Folosirea unei imagini ca legatura</TITLE></HEAD>
<BODY><CENTER><H1>Imagini ca legături</H1><BR><BR>
<A HREF=intrebari.html><IMG SRC="../Poze/intreb.jpg"></A>
</CENTER>
</BODY>
</HTML>
Salveaza pagina cu numele linkimg.html in directorul Pagini.
Pentru a vedea rezultatul click aici.
Salveaza pagina cu numele de liste2.html in directorul Pagini. Vezi rezultatul: click aici.
pentru patrate pline:
<UL TYPE=square>Firma noastră vă oferă următoarele servicii:
Salveaza pagina cu numele de liste3.html in directorul Pagini. Vezi rezultatul: click aici.
Nu uita: Pentru a invata limbajul HTML trebuie sa scrii codul de la fiecare exemplu si sa
vezi daca obtii aceleasi rezultate ca cele din cadrul cursului.
Liste ordonate (OL)
Am vazut cum putem folosi listele neordonate in cadrul paginilor web. Lista urmatoare
pastreaza continutul celei de mai sus insa este o lista ordonata (ordered list). Sa vedem
diferenta:
Firma noastra va ofera urmatoarele servicii:
1. printare
2. printare
3. indosariere
4. xerox
5. tehnoredactare
Listele ordonate se formeaza cu ajutorul tag-urilor <OL> si </OL>, denumirea acestora
venind din limba engleza ordered list care inseamna lista ordonata. La fel ca si la listele
neordonate, fiecare element trebuie introdus de tag-ul <LI>.
Iata codul pentru lista ordonata de mai sus:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL>Firma noastră vă oferă următoarele servicii:
<LI>printare
<LI>laminare
<LI>îndosariere
<LI>xerox
<LI>tehnoredactare
</OL>
</BODY>
</HTML>
Salveaza pagina cu numele de liste4.html in directorul Pagini. Pentru a vedea cum ar
trebui sa arate aceasta pagina: click aici.
Ca si in cazul listelor neordonate, si la listele ordonate, atributul TYPE are o valoare
implicita, asa cum am vazut in exemplul de mai sus: numerele. in loc de numere putem
folosi si alte caractere. Pentru a folosi aceste caractere este de ajuns sa utilizam atributul
TYPE cu valoarea potrivita.
Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una din
urmatoarele linii de cod:
pentru litere mari:
9. Tabele in HTML
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.
Crearea unui tabel
Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi
scris intre aceste tag-uri va forma un tabel. Dupa tag-ul <TABLE> urmeaza tag-ul <TR>
care vine de la "Table Row" (randul tabelului) si reprezinta introducerea unui rand in
cadrul tabelului. Tot ce va fi scris intre tag-urile <TR> si </TR> va forma un rand al
tabelului. Dupa crearea unui rand, trebuie sa adaugam in cadrul acestuia, cateva celule, cu
ajutorul tag-urilor <TD> si </TD>.
Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini
web. Scrie urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Primul tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><B>Nume</B></TD>
<TD><B>Prenume</B></TD>
<TD><B>Nota</B></TD>
</TR>
<TR>
<TD>Ionescu</TD>
<TD>Bogdan</TD>
<TD>7</TD>
</TR>
<TR>
<TD>Stancu</TD>
<TD>George</TD>
<TD>9</TD>
</TR>
<TR>
<TD>Dumitrescu</TD>
<TD>Alexandra</TD>
<TD>10</TD>
</TR>
<TR>
<TD>Marin</TD>
<TD>Paul</TD>
<TD>8</TD>
</TR>
<TR>
<TD>Ivanov</TD>
<TD>Mihaela</TD>
<TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Salveaza pagina cu numele de tabel.html. Pentru a vedea rezultatul: click aici.
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.
Dupa cum ai putut observa, liniile tabelului sunt practic niste linii duble. Pentru a avea
decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut
specifica distanta dintre celulele unui tabel. Alaturi de acest atribut putem folosi si
atributul CELLPADING care indica distanta dintre marginile celulelor si textul din
cadrul acestora.
Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele
WIDTH pentru latime si/sau HEIGHT pentru inaltime. Pentru alinierea datelor din cadrul
tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right".
Pentru a alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una
dintre valorile "top", "middle" sau "bottom".
Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel folosim
atributul BGCOLOR impreuna cu codul culorii alese. Sa facem impreuna o pagina web
cu un tabel care sa cuprinda toate notiunile pe care le-am invatat pana acum in aceasta
lectie. Scrie codul urmator in cadrul unui editor text si salveaza apoi pagina cu numele de
tabel3.html.
<HTML>
<HEAD>
<TITLE>Proprietatile tabelelor</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Rezultatele obţinute la
matematică</H2></CENTER>
Sa ne apucam de treaba. Trebuie sa facem patru pagini web fiecare avand culoarea de
background la fel cu una dintre cele patru culori din imaginea de mai sus. Apoi vom face
a cincea pagina web in care vom defini cadrele si care le va contine practic pe celelalte
patru pagini. Numele celor patru pagini web vor fi rosu.html, albastru.html,
galben.html si verde.html.
Paginile ar trebui sa arate astfel:
rosu.html
albastru.html
galben.html
verde.html
Pentru a vedea codul sursa al fiecarei pagini alege din meniul View optiunea Source.
Acum sa vedem codul sursa al paginii care va contine cele patru pagini web create:
<HTML>
<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>
<FRAMESET COLS="25%,*" FRAMEBORDER="no" FRAMESPACING="0">
<FRAME SRC="rosu.html">
<FRAMESET ROWS="45%,35%,*" FRAMEBORDER="no"
FRAMESPACING="0">
<FRAME SRC="albastru.html">
<FRAME SRC="galben.html">
<FRAME SRC="verde.html">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
Salveaza pagina, in acelasi fisier cu celelalte patru, cu numele cadre.html.
Daca totul a mers asa cum trebuie pagina ta ar trebui sa arate asa: click aici. Nu a iesit
chiar ca in imagine dar important este sa intelegi cum facem o pagina web cu mai multe
cadre.
Nu uita sa definesti cadrele inainte de tag-ul <BODY> si sa exersezi toate notiunile
invatate in aceasta lectie. Fa cat mai multe pagini web care sa fie formate din cadre.
Succes!
http://www.ecursuri.ro/cursuri/html-cadre.php
Campurile de editare
Pentru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru
atributul TYPE, al tagului <INPUT>, valoarea text.
Exemplu:
Camp de edita
Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt:
SIZE, care reprezinta latimea campului de editare
MAXLENGTH, specifica numarul maxim de caractere care pot fi introduse in campul
de editare
VALUE, valoarea initiala a campului de editare
De exemplu, pentru campul de editare de mai sus s-a folosit urmatoarea linie de cod:
<INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20"
MAXLENGTH="30">
Daca vrei sa introduci un camp de editare de tip "parola", atributul TYPE va avea
valoarea "password". In acest caz, caracterele introduse in campul de editare, nu vor fi
vizibile . Sa vedem un exemplu:
Scrie cateva caractere in campul de editare de mai sus, pentru a vedea diferenta fata de un
camp de editare de tip "text".
Atunci cand vrem sa adaugam in cadrul formularului nostru un camp de editare in care sa
poata fi introduse mai multe randuri, folosim campurile de editare de tip multilinie.
Pentru a folosi un astfel de camp de editare, avem nevoie de tag-urile <TEXTAREA> si
</TEXTAREA>. Sa vedem cum arata linia de cod HTML care introduce un camp de
editare multilinie:
<TEXTAREA COLS="50" ROWS ="5" NAME="exemplu"></TEXTAREA>
Am folosit atributul COLS pentru a stabili numarul de caractere al fiecarui rand, atributul
ROWS pentru numarul de randuri al campului de editare, iar atributul NAME pentru
numele campului de editare. Iata rezultatul:
Butoanele radio
Daca avem o intrebare cu mai multe variante de raspuns, vom folosi butoanele radio.
Pentru a introduce un buton radio, folosim tag-ul <INPUT>, iar la atributul TYPE,
valoarea "radio". Sa luam un exemplu:
n ce categorie de vrst v ncadrai?
sub 15 ani
15-20 ani
20-25 ani
25-35 ani
35-45 ani
peste 45 ani
Codul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de
raspuns, este urmatorul:
În ce categorie de vârstă vă încadraţi? <BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED >sub 15 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 ani
Cu ajutorul atributului CHECKED, fara alte valori, putem selecta un buton radio in mod
prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, in acelasi timp.
Casetele de validare
Pentru a introduce o caseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu
atributul TYPE avand valoarea "checkbox". Casetele de validare permit selectarea sau
deselectarea uneia sau mai multor optiuni. Exemplu:
Unde v petrecei concediul de obicei?
La mare
La munte
n strintate
La ar
Acas
Asa cum se poate observa, in cazul casetelor de validare, spre deosebire de butoanele
radio, pot fi selectate mai multe optiuni. Codul casetelor de validare de mai sus este
urmatorul:
Unde vă petrecei concediul de obicei?<BR>
<INPUT TYPE="checkbox" NAME="optiunea1">La mare<BR>
<INPUT TYPE="checkbox" NAME="optiunea2">La munte<BR>
<INPUT TYPE="checkbox" NAME="optiunea3">În străinătate<BR>
<INPUT TYPE="checkbox" NAME="optiunea4">La ţară<BR>
<INPUT TYPE="checkbox" NAME="optiunea5">Acasă
Casetele de fisiere
Pentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE al
tag-ului <INPUT>, valoarea "file". Sa vedem un exemplu:
<OPTION value=Maramures>Maramures</OPTION>
<OPTION value=Mehedinti>Mehedinti</OPTION>
<OPTION value=Mures>Mures</OPTION>
<OPTION value=Neamt>Neamt</OPTION>
<OPTION value=Olt>Olt</OPTION>
<OPTION value=Prahova>Prahova</OPTION>
<OPTION value=Satu-Mare>Satu-Mare</OPTION>
<OPTION value=Salaj>Salaj</OPTION>
<OPTION value=Sibiu>Sibiu</OPTION>
<OPTION value=Suceava>Suceava</OPTION>
<OPTION value=Teleorman>Teleorman</OPTION>
<OPTION value=Timis>Timis</OPTION>
<OPTION value=Tulcea>Tulcea</OPTION>
<OPTION value=Vaslui>Vaslui</OPTION>
<OPTION value=Valcea>Valcea<</OPTION>
<OPTION value=Vrancea>Vrancea</OPTION>
</SELECT>
Pentru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa folosim
pentru tag-ul <SELECT> atributul MULTIPLE, fara alte valori.
Butoanele de tip Submit si Reset
Pentru a putea expedia datele introduse in cadrul unui formular, fie prin e-mail, fie catre
un script scris intr-un limbaj de programare care va interpreta aceste date, trebuie sa
folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag-ul
<INPUT>, cu atributul TYPE avand valoarea "submit". Putem modifica si valoarea
butonului, care in mod implicit este Submit, cu ajutorul atributului VALUE. Astfel, linia
de cod pentru un buton de tip submit va fi urmatoarea:
<INPUT TYPE="submit" VALUE="Trimite">
Alaturi de butonul de tip Submit, putem folosi si un buton de tip Reset. Prin apasarea
acestui buton toate elementele formularului vor reveni la valoarea lor prestabilita,
indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset, se
procedeaza la fel ca si la butonul de tip Submit, singura deosebire fiind ca atributul TYPE
va avea valoarea "reset". Sa vedem cum arata linia de cod care introduce in cadrul unui
formular un buton de tip Reset:
<INPUT TYPE="reset" VALUE="Sterge">
Trimiterea datelor dintr-un formular prin e-mail
Pentru ca datele introduse intr-un formular sa fie trimise prin e-mail trebuie sa folosim
pentru atributul ACTION al tag-ului <FORM>, valoarea "mailto:email@domeniu.ro". in
felul acesta, datele introduse in formular vor fi trimise la adresa de e-mail specificata.
De exemplu, pentru a trimite datele dintr-un formular la adresa cursuri@ecursuri.ro vom
folosi urmatoarea linie de cod:
<FORM ACTION="mailto:cursuri@ecursuri.ro" METHOD="POST">
Exercitiu: realizarea unui formular
Dupa ce am invatat cum sa introducem diverse elemente in cadrul unui formular, este
timpul sa realizam unul. Astfel, folosind notiunile invatate, incearca sa realizezi
urmatorul formular: click aici. Pentru a vedea codul acestui formular, alege din meniul
home.jpg
calculator.jpg
limbistraine.jpg
muzica.jpg
excursii.jpg
desprenoi.jpg
logo.jpg
meniu.jpg
welcome.jpg
copil.jpg
calculator2.jpg
calculator3.jpg
straine.jpg
learn.jpg
muzica2.jpg
muzica3.jpg
excursii2.jpg
excursii3.jpg
desprenoi2.jpg
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@yahoo.com">abecedar@yahoo.com</a><BR>
Web:<a
href="http://www.gradinitaabecedar.ro">www.gradinitaabecedar.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.
Pagina top.html ar trebui sa arate astfel: click aici.
In continuare vom scrie codul pentru pagina html care va contine meniul din partea
stanga a site-ului.
<HTML>
<HEAD>
<TITLE>Abecedar</TITLE>
</HEAD>
<BODY bgcolor="#FF9933">
<img src="../Poze/meniu.jpg"><BR><BR><BR><BR><BR>
<a href="../home.html" target="_parent"><img src="../Poze/home.jpg"
border="0"></a><BR>
<a href="../Pagini/calculator.html" target="_parent"><img
src="../Poze/calculator.jpg" border="0"></a><BR>
<a href="../Pagini/limbistraine.html" target="_parent"><img
src="../Poze/limbistraine.jpg" border="0"></a><BR>
<a href="../Pagini/muzica.html" target="_parent"><img src="../Poze/muzica.jpg"
border="0"></a><BR>
<a href="../Pagini/excursii.html" target="_parent"><img src="../Poze/excursii.jpg"
border="0"></a><BR>
<a href="../Pagini/desprenoi.html" target="_parent"><img
src="../Poze/desprenoi.jpg" border="0"></a><BR>
</BODY>
</HTML>
Copiaza codul intr-un fisier text, apoi salveaza pagina, in folderul Pagini cu numele de
meniu.html. Daca totul a mers cum trebuie pagina ar trebui sa arate astfel: click aici.
Dupa ce am facut meniul si partea de sus a site-ului, care se vor repeta in fiecare pagina,
vom scrie codul pentru prima pagina a site-ului, unde vom folosi cadrele.
<HTML>
<HEAD>
<TITLE>Home page</TITLE>
</HEAD>
<frameset cols="22%,*" frameborder="0">
<frame src="Pagini/meniu.html">
<frameset rows="26%,*" frameborder="0">
<frame src="Pagini/top.html">
<frame src="Pagini/index.html">
</frameset>
</frameset>
<BODY>
</BODY>
</HTML>
si idesprenoi.html. Aceste pagini vor fi formate din continutul fiecarei rubrici a site-ului.
Codul HTML pentru fiecare pagina va fi prezentat in continuare. Nu uita sa salvezi
fiecare pagina in folderul Pagini.
- pentru pagina icalculator.html, codul HTML este urmatorul:
<HTML>
<HEAD>
<TITLE>Home</TITLE>
</HEAD>
<BODY>
<CENTER><img src="../Poze/calculator2.jpg"></CENTER><BR><BR>
<img src="../Poze/calculator3.jpg" hspace="25" vspace="25" align="left"><BR>
<FONT color="#0099FF" align="left">
<BR><H4>
Calculatorul a devenit ceva foarte obişnuit în viaţa tuturor. De
aici rezultă şi necesitatea de a învăţa cum se
utilizează un calculator. Grădiniţa ABECEDAR are ca obiectiv
principal în domeniul
implementării în procesul educaţional a
cunoştinţelor de calculator, iniţierea şi familiarizarea
copiilor preşcolari în acest domeniu. Se va ţine cont de
particularităţile de vârstă ale celor mici. Astfel copii vor
învăţa noţiunile de bază însoţite de
numeroase exemple.
</H4>
</FONT>
</BODY>
</HTML>
- pentru pagina istraine.html, codul HTML este urmatorul:
<HTML>
<HEAD>
<TITLE>Home</TITLE>
</HEAD>
<BODY>
<CENTER><img src="../Poze/straine.jpg"></CENTER><BR><BR><BR>
<img src="../Poze/learn.jpg" align="left" hspace="25" vspace="5">
<FONT color="#0099FF" align="left">
<H4>
În cadrul cursurilor de limbi străine copiii învaţă
să pronunţe corect cuvinte şi propoziţii în diverse
limbi străine. Suntem pregătiţi să oferim cursuri de un
Acum, ajunsi la finalul acestui curs, nu uita sa exersezi cat mai mult notiunile invatate.
Incearca sa faci singur diverse site-uri scriind codul HTML.
Mult succes! Sper ca ti-a placut cursul si te mai asteptam in cadrul paginilor site-ului
www.ecursuri.ro sa invatam impreuna.
http://www.ecursuri.ro/cursuri/realizarea-unui-site.php