Curs HTML

Crearea paginilor web folosind limbajul HTML
Structura
unui Tag- Atribute Legaturi
Introducere Formatarea Liste Imagini Cadre Formulare
document uri HTML Culori (hyperlink) Tabele
textului
HTML
(CTRL + clic )
1. Introducere in HTML
HTML este prescurtarea de la Hypertext Markup Language si reprezinta limbajul pe care

browserele de internet il folosesc pentru afisarea paginilor web.
Programele care creeaza cod HTML se numesc editoare HTML si pot fi de doua tipuri:
 editoare clasice
 editoare de tipul WYSIWYG (What You See Is What You Get, adica ceea ce vezi este
ceea ce obtii). Exemple: Netscape, FrontPage, Dreamweaver etc.
Sus
2. Structura unui document HTML
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Aceasta este prima mea pagina web<BR>
</BODY>
</HTML>
Sus
3. Tag-uri
Tag-urile sunt marcaje sau etichete pe care limbajul HTML le foloseste alaturi de texte pentru
a ajuta browser-ul de internet sa afiseze corect continutul paginii web.
Aceste tag-uri (etichete) pot fi de doua feluri:
- tag-uri pereche (un tag de inceput si unul de incheiere). Exemple: <HTML> si </HTML>;
<TITLE> si </TITLE>; <HEAD> si </HEAD>;
- tag-uri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>.
Sa vedem tag-urile de baza pe care trebuie sa le contina un document HTML:
<HTML> - cu acest tag incepe orice document HTML. Prin folosirea acestui tag ii spunem
browser-ului ca este vorba de un fisier HTML pentru a il putea afisa.
<HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare
pentru browser-ul de internet, informatii pe care le vom descoperi pe parcursul acestui curs.
</HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD>
<TITLE> - da un titlu documentului, textul fiind afisat in bara de titlu a documentului.
1
</TITLE> - este tag-ul de încheiere al tag-ului <TITLE>. Arata sfarsitul titlului documentului.
<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.
</BODY> - ii spunem browser-ului ca am terminat de scris continutul paginii. Tot ceea ce
vom scrie dupa acest tag nu va mai fi afisat.
</HTML> - este tag-ul de încheiere al tag-ului <HTML>. Codul oricarui document se termina
cu acest tag.
Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici.
Sus
2
4. Atribute HTML
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.
Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fondul
viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba.
Atunci cand vrem sa trasam o linie, folosim tag-ul <HR> care vine de la Horizontal Rule care
inseamna linie orizontala. Daca nu ii asociem acestui tag nici un atribut atunci vom obtine o line
orizontala cat latimea paginii web.
Daca vrem sa diversificam caracteristicile unei linii orizontale vom apela la atributele tag-ului
<HR>.
Aceste atribute sunt urmatoarele: ALIGN - pentru alinierea liniei, COLOR - pentru culoarea
liniei, SIZE - pentru grosimea liniei si WIDTH - pentru lungimea liniei.
Pentru a trasa o linie rosie (COLOR="#FF0000"), cu o lungime de jumatate din valoarea
implicita (WIDTH="50%") si putin mai groasa decat cea implicita (SIZE="5%") ce va fi aliniata in
centrul paginii (ALIGN="center"), vom folosi urmatoarea linie de cod:
<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%" ALIGN="center">
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>
</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>
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 atribut Valoare Detalii
atribut
<A> Ancora
href URL Adresa catre care vrem sa
fie legatura
target _blank Fereastra in care se va face
_self afisarea
3
_parent
_top
<B> Text bold
<BODY> Cuprinsul documentului
background adresa imaginii Imaginea de fond
bgcolor cod culoare nume culoare Culoarea fondului
leftmargin procent din latimea numar de Distanta dintre marginea din
paginii pixeli stanga a ferestrei browserului
si marginea din stanga a
paginii
topmargin procent din inaltimea numar de Distanta dintre marginea de
paginii pixeli sus a ferestrei browserului si
marginea de sus a paginii
text cod culoare nume culoare Culoarea textului
alink cod culoare nume culoare Culoarea legaturilor active

(atunci cand mouse-ul se afla
deasupra lor)
link cod culoare nume culoare Culoarea legaturilor
nevizitate (nu s-a efectuat nici
un click pe ele)
vlink cod culoare nume culoare Culoarea legaturilor vizitate
(s-a efectuat cel putin un click
pe ele)
<BR> Sfarsitul randului
<CENTER> Afisarea in centrul paginii
<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 Adresa scriptului care
prelucreaza datele din cadrul
formularului
method GET Metoda de prelucrare a
datelor formularului
POST
<FRAME> Cadru (fereastra)
frameborder 1 sau 0 Cadrul are sau nu are chenar
marginheight numar de pixeli Spatiu deasupra si sub un
cadru
marginwidth numar de pixeli Spatiu la stanga si la dreapta
unui cadru
src URL Sursa cadrului
<FRAMESET> Multime de ferestre
cols procent din latimea numar de numarul si marimea relativa
paginii pixeli a coloanelor
rows procent din inaltimea numar de numarul si marimea relativa
paginii pixeli a randurilor
H1, H2, H3, Titluri in cadrul documentului
H4, H5, H6
align left Alinierea titlului
4
center
right
justify
<HEAD> Antetul documentului
<HR> Linie orizontala
align left Alinierea orizontala a liniei
center
right
color cod culoare nume culoare Culoarea liniei
size numar de pixeli Inaltimea liniei
width procent din latimea numar de Latimea liniei
paginii pixeli
<HTML> Document HTML
<I> Text italic
<IMG> Adaugarea unei imagini
align left Alinierea imaginii in pagina:
right left (stanga)
top Alinierea elementelor din
middle jurul imaginii:
bottom top (sus), middle (mijloc),
sau right (dreapta) bottom (jos)
alt text Text ce va fi afisat in locul
imaginii, in cazul in care,
aceasta nu este afisata
border numar de pixeli Marimea chenarului din jurul
imaginii
height procent numar de Inaltimea imaginii
pixeli
hspace numar de pixeli Spatiu pe orizontala in jurul
imaginii
src URL Adresa imaginii
vspace numar de pixeli Spatiu pe verticala in jurul
imaginii
width procent numar de Latimea imaginii
pixeli
<INPUT> Element al formularului
maxlength numar Numar maxim de caractere
name date de tip caracter Numele elementului
formularului
size numar Marimea elementului
formularului
src URL Adresa pentru o imagine
type text
password
checkbox
radio
submit
reset
file
hidden
image
button Tip input
5
value date de tip caracter Valoare input
<LI> Element al unei liste
<META> Metainformatii
content text Descrie valoarea atributului
name
name author Autor
description Descriere
keywords Cuvinte cheie
<OL> Lista ordonata
start numar Cu ce valoare incepe
numerotarea
type A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1
(implicit)
<P> Paragraf
align left Alinierea paragrafului
center
right
justify
<SELECT> Lista de selectii
multiple Permite selectia mai multor
elemente
name date de tip caracter Numele listei de selectii
size numar Numarul de elemente ale
listei
<STRONG> Text evidentiat
<SUB> Text indice
<SUP> Text exponent
<TABLE> Tabel
align left Alinierea tabelului
center
right
background URL Imaginea de fond pentru
tabel
bgcolor cod culoare nume culoare Culoarea fondului pentru
tabel
border procent numar de Chenarul tabelului
pixeli
bordercolor cod culoare nume culoare Culoarea chenarului
cellpadding numar de pixeli Spatiu intre continutul
celulelor tabelului si marginile
lor
cellspacing numar de pixeli Spatiu intre celulele tabelului
cols numar Numarul de coloane ale unui
tabel
hspace numar de pixeli Spatiu pe orizontala in jurul
tabelului
vspace numar de pixeli Spatiu pe verticala in jurul
tabelului
width procent numar de Latimea tabelului
pixeli
<TD> Celula de tabel
align left Alinierea continutului celulei
6
center pe orizontala
right
background URL Imaginea de fond pentru
celula
bgcolor cod culoare nume culoare Culoarea fondului pentru
celula
colspan numar Numarul de coloane pe care
se intinde celula
height numar de pixeli Inaltimea celulei
rowspan numar Numarul de linii pe care se
intinde celula
valign top Alinierea continutului celulei
middle pe verticala
bottom
width numar de pixeli Latimea celulei
<TEXTAREA> Camp de editare multilinie
cols numar Numarul de coloane
name date de tip caracter Numele campului de editare
multilinie
rows numar Numarul de randuri
<TITLE> Titlu document
<TR> Rand tabel
align left Alinierea continutului
center celulelor pe orizontala
right
bgcolor cod culoare nume culoare Culoarea fondului pentru tot

randul
valign top Alinierea continutului
middle celulelor pe verticala
bottom
<U> Text subliniat
<UL> Lista neordonata
type circle Forma marcajului
disc
square
Sus
7
5. Culori
Culoarea fondului unei pagini web
Culoarea paginii se stabileste cu ajutorul atributului BGCOLOR al tag-ului <BODY>.
Culoarea textului
Culoarea textului in cadrul unei pagini html se poate schimba folosind atributul COLOR
(culoare) al tag-ului <FONT>.
Exemplu:
<FONT COLOR="#00008B" SIZE="6">
Nume si coduri de culori

Cele mai importante culori care sunt recunoscute de majoritatea browserelor sunt:
Culoare Nume culoare Cod 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
8
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
LightGoldenRodYello #FAFAD2
w
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
9
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
10
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
Sus
11
6. Formatarea textului
Titluri
Atunci cand avem nevoie sa folosim un titlu in cadrul paginii noastre web putem apela la tag-
urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au si tag-uri de
incheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel in cadrul codului HTML vom
folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfarsit vom folosi tag-ul de incheiere
</H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu caracterele cele mai mari in timp ce
textul incadrat de tag-urile <H6> si </H6> va fi afisat cu caracterele cele mai mici.
Tag-urile <H1> ... <H6> accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la
stanga, la centru sau la dreapta.
Etichete pentru formatarea textului

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.
De exemplu :
<FONT FACE= “Arial “ COLOR=”#6495ED” SIZE=4>Limbajul HTML </FONT>
Cele mai folosite fonturi pentru paginile web sunt urmatoarele:

Arial, Times New Roman, Curier New, Verdana si Helvetica.
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 este folosit pentru a face trecerea
de la o linie la alta.
12
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>
Daca scriem un text intre tag-urile <P> si </P>, atunci textul va fi incadrat de cate un rand
liber.
Utilizarea caracterelor speciale

Pentru a folosi diacriticele specifice limbii romane sau alte simboluri trebuie sa scriem o
anumita combinatie de caractere, pentru ca browserul sa le citeasca.
Cod HTML
Simbol
Numar Nume

¢ ¢ ¢
£ £ £
© © ©
« « «
® ® ®
° ° °
± ± ±
² ² ²
³ ³ ³
µ µ µ
¶ ¶ ¶
¹ ¹ ¹
» » »
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
Â Â Â
Î Î Î
× × ×
Ø Ø Ø
â â â
î î î
÷ ÷ ÷
13
ø ø ø
Ş Ş
ş ş
Ţ Ţ
ţ ţ
€ € €
Exemplu de pagina web in care textul va fi scris cu diacritice:
<HTML>
<HEAD>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vom &#238nv&#259ţa &#238mpreun&#259 limbajul HTML.
Aceasta este prima mea pagin&#259 web!
</BODY>
</HTML>
Pentru a alinia un text folosim codul (spatiu) de cateva ori.
Sus
14
7. Liste
Listele pe care le putem crea cu ajutorul limbajului HTML sunt de urmatoarele tipuri: liste
neordonate, liste ordonate si liste de definitii.
Liste neordonate (UL)

Elementele din listele neordonate sunt precedate de marcatori.
Pentru a putea face o lista neordonata trebuie sa folosim tag-urile <UL> si </UL>. (denumirea
acestor tag-uri vine de la "unordered list" care inseamna in limba engleza lista neordonata).
Fiecare element al listei trebuie introdus de tag-ul <LI>.
Exemplu:
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
<UL>Firma noastr&#259 v&#259 ofer&#259 urm&#259toarele servicii:
<LI>printare
<LI>laminare
<LI>xerox
<LI>tehnoredactare
</UL>
</BODY>
</HTML>
Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui element. Acesta este
folosit in mod implicit atunci cand folosim o lista neordonata. Astfel, prin atribuirea unei valori
atributului TYPE, vom putea face ca elementele listei sa fie precedate de un patrat sau de un cerc
gol.
pentru cercuri goale:

<UL TYPE=circle>Servicii:
pentru patrate pline:

<UL TYPE=square>Servicii:
Liste ordonate (OL)

Lista ordonata (ordered list) are elementele numerotate:
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>.
Exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
15
<OL>Pentru a cunoaste internetul trebuie sa studiati:
<LI>HTML
<LI>JAVA
<LI>JAVASCRIPT
</OL>
</BODY>
</HTML>
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 litere mari:

<OL TYPE=A>
pentru litere mici:

<OL TYPE=a>
pentru cifre romane mici:

<OL TYPE=i>
pentru cifre romane mari:

<OL TYPE=I>
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.
Exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>&#206n vacanţa de var&#259 am vizitat urm&#259toarele
oraşe:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>
Liste de definitii (DL)

Pentru a forma liste de definitii trebuie sa folosesti tag-urile <DL> si </DL> (denumirea lor
vine de la „definition list” = lista de definitii).
Fiecare element al unei liste de definitii va trebui introdus de tag-ul <DT> (Definition Term),
iar apoi fiecare definitie va fi precedata de tag-ul <DD> (Definition Definition).
16
Exemplu de lista de definitii:
Teorema lui Pitagora

În orice triunghi dreptunghic suma pătratelor catetelor este egală cu pătratul ipotenuzei.
Teorema înălţimii
În orice triunghi dreptunghic pătratul înălţimii este egal cu produsul proiecţiilor celor două
catete pe ipotenuză.
<HTML>
<HEAD>
<TITLE>Liste definitii</TITLE>
</HEAD>
<BODY>
<DL>
<DT><B>Teorema lui Pitagora</B>
<DD>&#206n orice triunghi dreptunghic suma p&#259tratelor catetelor este egal&#259 cu
p&#259tratul ipotenuzei.
<DT><B>Teorema &#238n&#259lţimii</B>
<DD>&#206n orice triunghi dreptunghic p&#259tratul &#238n&#259lţimii este egal cu
produsul proiecţiilor celor dou&#259 catete pe ipotenuz&#259.
</DL>
</BODY>
</HTML>
Personalizarea listelor
Daca vrem 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>.
Exemplu:
<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<UL>Lista persoanelor care sunt angajate &#238n cadrul departamentului Secretariat:
<BR><BR><IMG SRC="../Poze/firma.gif">Gheorghe Ana
<BR><BR><IMG SRC="../Poze/firma.gif">Petre Irina
<BR><BR><IMG SRC="../Poze/firma.gif">Mihai Ioana
</UL>
</BODY>
</HTML>
Sus
17
8. Imagini
Formatele imaginilor
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
Icon-uri:
icon1.gif marime: 336 bytes
Animatii:
animatie.gif marime: 9,27 Kb
JPEG (Joint Photographic Expert Group)

Formatul JPEG nu mai este limitat la 256 de culori si de aceea este folosit pentru fotografii.
Imaginile care apartin acestui format au extensia .jpg sau .jpeg.
In cazul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si ocupa un spatiu mult
mai mic decat in formatul gif.
Adaugarea imaginilor in paginile web
Pentru a folosi imagini in cadrul paginilor web trebuie sa folosim tag-ul <IMG> insotit de
atributul SRC (source) care indica adresa sau calea catre imaginea respectiva.
Forma generala a acestui tag va fi:
<IMG SRC="numeleimaginii.extensie">
Atentie la extensie. Nu uitati sa scrieti si extensia imaginii pentru ca altfel imaginea nu va fi

afisata de browser.
Toate fisierele (pagini HTML, imagini etc.) care compun un site web trebuie salvate in cadrul
aceluiasi folder. Imaginea inserata in pagina web va fi afisata doar daca pagina respectiva si
imaginea sunt in acelasi folder . In caz contrar imaginea nu va fi afisata.
Exemplu:
<HTML>
<HEAD>
<TITLE>Imagini</TITLE>
</HEAD>
<BODY>
<CENTER><B>Ad&#259ugarea imaginilor &#238n paginile web</B>
<BR>
<IMG SRC=Winter.jpg>
</CENTER>
</BODY>
18
</HTML>
Imaginea poate fi incadrata de un chenar, folosind atributul BORDER al tag-ului <IMG>.

Acest atribut are ca valoare numere intregi pozitive.
<IMG SRC=”../Poze/Winter.jpg” BORDER=5>
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.
<IMG SRC=”../Poze/Winter.jpg” BORDER=5 ALT=”Imagine Winter”>
Imagini ca fond al unei pagini web
Cu ajutorul atributului BACKGROUND al tag-ului <BODY> se poate folosi o imagine ca fond

al unei pagini web.
<BODY BACKGROUND=”../Poze/background1.jpg”>
Sus
19
9. Legaturi (hyperlink-uri)
Navigarea in cadrul site-urilor este posibila cu ajutorul legaturilor.
Legatura catre o alta pagina

Pentru a folosi legaturi in paginile web se folosesc tag-urile <A> si </A>. Numele acestor tag-
uri vine de la cuvantul anchor care se traduce ancora. Tag-ul <A> va trebui folosit impreuna cu
atributul HREF.
Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web va avea urmatoarea
forma:
<A HREF=numelepaginii.html>Textul legaturii</A>
Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu
sunt necesare ghilimelele.
Daca pagina catre care vrem sa facem o legatura, nu se afla in acelasi folder cu pagina
noastra atunci trebuie sa specificam calea catre pagina HTML ca valoare a atributului HREF.
Exemplu :
<A HREF="Documente/Carti/Capitolul_I.html">Text link</A>
Legatura catre un site

Legatura catre un site particular se realizeaza prin urmatoarea linie de cod:
<A HREF="adresa site-ului">Textul legaturii</A>
Exemplu :
<A HREF="http://www.edu.ro">Ministerul Educatiei</A>
Legatura catre o sectiune de pagina

Atunci cand realizam pagini mai lungi, putem imparti pagina in mai multe sectiuni catre care
sa adaugam cate o legatura la inceputul paginii pentru ca utilizatorii sa ajunga mai repede la
sectiunea care ii intereseaza. Un bun exemplu pentru o astfel de pagina il reprezinta paginile care
contin intrebarile frecvente (Frecvently Asked Questions).
Fiecare titlu al sectiunii trebuie definit ca ancora:

<A NAME="#ancora1">Titlul primei sectiuni</A>
<A NAME="#ancora2">Titlul sectiunii a doua</A>
Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma:
<A NAME="#ancora1">Legatura catre prima sectiune</A>
<A NAME="#ancora2">Legatura catre a doua sectiune</A>
Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma:
<A NAME="numelepaginii.html#ancora1">Legatura catre prima sectiune</A>
<A NAME="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A>
Legatura catre o adresa de e-mail

Daca vrei ca utilizatorii paginii tale web sa iti poata scrie parerile lor despre site, de exemplu,
atunci trebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail.
20
Forma generala a unei legaturi catre o adresa de e-mail este urmatoarea:
<A HREF="mailto:adresa de e-mail">Trimite-mi un e-mail</A>
Utilizarea unei imagini ca legatura

Pentru a folosi o imagine ca legatura intre tag-urile <A> si </A>, va trebui scrisa adresa
imaginii:
<A HREF=numepagina.html><IMG SRC="adresaimaginii"</A>
Cum pot schimba culorile legaturilor?

Fiecare legatura din cadrul unei pagini web are trei culori:
• o culoare pentru legaturile nevizitate (nu a fost efectuat nici un click pe ele)
• o culoare pentru legaturile vizitate (s-a efectuat cel putin un click pe ele)
• o culoare pentru legaturile active (atunci cand cursorul mouse-ului se afla deasupra lor)
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
Fiecarui atribut i se va atribui un nume de culoare sau codul unei culori.
Exemplu: Dorim ca in cadrul paginii web, legaturile sa fie de culoare rosie atunci cand nu au
fost vizitate, de culoare neagra cele vizitate si de culoare portocalie atunci cand se trece cu
mouse-ul pe deasupra lor:
<BODY LINK=”#FF0000” VLINK=”#000000” ALINK=”FF9600”>
Sus
21
10. Tabele
Cu ajutorul 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>.
Exemplu:
<HTML>
<HEAD>
<TITLE>Tabel elevi olimpici</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><B>Nume</B></TD>
<TD><B>Prenume</B></TD>
<TD><B>Clasa</B></TD>
</TR>
<TR>
<TD>Ion</TD>
<TD>Marian</TD>
<TD>9</TD>
</TR>
<TR>
<TD>Matei</TD>
<TD>Petre</TD>
<TD>10</TD>
</TR>
<TR>
<TD>Dobre</TD>
<TD>Maria</TD>
<TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Proprietatile tabelelor
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.
Pentru a avea decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest
atribut specifica distanta dintre celulele unui tabel.
Atributul CELLPADING arata distanta dintre marginile celulelor si textul din cadrul acestora.
22
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.
Folosirea tabelelor ca plan al unei pagini web

Cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini web.
Practic, folosind tabelele, putem adauga o imagine sau un text oriunde in pagina web.
Trebuie sa retinem inca doua atribute foarte importante ale tag-ului <TD>: COLSPAN
(numarul de coloane pe care se intinde celula) si ROWSPAN (numarul de linii pe care se intinde
celula).
Exemplu :
<HTML>
<HEAD>
<TITLE>TABEL CU CELULE MARI</TITLE>
</HEAD>
<BODY>
<TABLE BORDER COLOR=BLACK CELLSPACING=0 WIDTH=300 HEIGHT=200>
<TR>
<TD BGCOLOR=RED></TD>
<TD COLSPAN="2" BGCOLOR=WHITE></TD>
<TR>
<TD ROWSPAN="3" BGCOLOR=BLUE></TD>
<TD BGCOLOR=YELLOW></TD><TD BGCOLOR=BLACK></TD>
</TR>
<TR>
<TD BGCOLOR=GREEN></TD><TD BGCOLOR=WHITE></TD>
</TR>
<TR>
<TD BGCOLOR=PINK></TD><TD BGCOLOR=RED></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Sus
23
11. Cadre
Cu ajutorul cadrelor putem imparti o pagina web in mai multe zone, iar apoi putem stabili ce
pagina va fi afisata in fiecare zona.
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.
De exemplu, 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%.
Exemplu: definirea a doua cadre orizontale

<FRAMESET ROWS="70%,*" FRAMEBORDER="no" FRAMESPACING="0">
Pentru a imparti pagina web in mai multe cadre orizontale, se vor asocia mai multe procente
atributului ROWS, dar avand grija ca suma lor sa nu depaseasca 100%. La fel se procedeaza si
pentru impartirea unei pagini web in cadre verticale singura deoasebire fiind aceea ca in locul
atributului ROWS se foloseste atributul COLS.
Intre tag-urile <FRAMESET> si </FRAMESET> vom folosi tag-ul <FRAME>.

Principalul atribut al tag-ului <FRAME> este SRC cu ajutorul caruia indicam sursa cadrului.
Astfel o linie de cod care defineste un cadru ar putea fi urmatoarea:
<FRAME SRC="numelepaginii.html">
Exemplu.
Vom crea patru pagini web fiecare avand culoarea de background rosu, respectiv albastru,
galben sau verde. Apoi vom crea 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.
<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>
Sus
24
12. Formulare
Notiuni generale despre formulare

Formularele reprezinta o metoda de interactivitate cu utilizatorii unei pagini web.
Prin intermediul unui formular poti obtine date importante de la vizitatorii paginii.
Dupa ce formularul a fost completat, utilizatorul apasa un buton de trimitere, iar
administratorul primeste datele introduse in formular sub forma unui e-mail sau datele vor fi
procesate cu ajutorul unui limbaj de programare si adaugate intr-o baza de date.
Pentru a folosi un formular in pagina web, vom folosi tag-urile <FORM> si </FORM>. Intre
aceste tag-uri vor fi introduse toate elementele formularului.
Tag-ul <FORM> are doua atribute foarte importante: ACTION si METHOD.
Cu ajutorul atributului ACTION ii spunem browser-ului ce se va intampla cu datele introduse
in formular. Astfel, valoarea atributului ACTION poate fi o adresa URL a unui script, scris intr-un
limbaj de programare, care va interpreta datele si le va introduce intr-o baza de date, daca este
cazul, sau poate fi o adresa de email, caz in care datele introduse in formular vor fi trimise prin
email la adresa respectiva.
Atributul METHOD, asa cum ii spune si numele, precizeaza metoda de trimitere a datelor si
poate avea doua valori. Valoarea implicita a acestui atribut este GET, cu ajutorul acestei metode
putand fi trimise cantitati mici de date, cea mai folosita metoda fiind POST.
Elementele unui formular
Elementele unui formular trebuie introduse, in majoritatea cazurilor, cu ajutorul tag-ului

<INPUT>.
Atributele cele mai importante ale acestui tag sunt urmatoarele:

- TYPE - tipul elementului
- NAME - numele elementului
- VALUE - valoarea elementului
Elementele ale unui formular pot fi:

- campurile de editare
- butoanele radio
- casetele de validare
- casetele de fisiere
- listele de selectie
- butoanele submit si reset
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.
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
25
Exemplu:
<INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20"
MAXLENGTH="30">
Daca vrem sa introducem 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 .
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>.
Exemplu de linie 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.
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".
Exemplu:
În ce categorie de vârstă vă încadraţi?

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:
&#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadraţ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".
26
Casetele de validare permit selectarea sau deselectarea uneia sau mai multor optiuni.
Exemplu:
Unde vă petreceţi concediul de obicei?

La mare
La munte
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&#259 petreceţi 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">Acas&#259
Casetele de fisiere
Pentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE al tag-
ului <INPUT>, valoarea "file".
Exemplu:
<INPUT TYPE="file" NAME="file">
Listele de selectie
O lista de selectie, asa cum ii spune si numele, permite utilizatorului sa aleaga una sau mai
multe optiuni dintr-o lista.
Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si
</SELECT>.
Atributele cele mai folosite pentru tag-ul <SELECT> sunt:

• NAME, atribuie listei de selectie un nume
• SIZE, specifica numarul de elemente din cadrul listei de selectie
• VALUE, atribuie o valoare de tip text care va fi expediata serverului, sub forma de perechi
"name = value"
• SELECTED (fara alte valori), selecteaza in mod prestabilit un element al listei
Sa vedem cum arata o lista de selectie:

Alege o regiune din Romania:
Pentru a selecta in mod implicit valoarea Muntenia, am folosit in dreptul acesteia atributul
selected. Codul listei de selectie de mai sus este urmatorul:
<SELECT>
<OPTION value=Moldova>Moldova</OPTION>
<OPTION value=Transilvania>Transilvania</OPTION>
<OPTION value=Muntenia selected>Muntenia</OPTION>
<OPTION value=Oltenia>Oltenia</OPTION>
<OPTION value=Dobrogea>Dobrogea</OPTION>
<OPTION value=Banat>Banat</OPTION>
</SELECT>
27
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.
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".
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.
Exemplu: <FORM ACTION="mailto:xxx@yahoo.com" METHOD="POST">
Sus
28

Curs HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Crearea paginilor web folosind limbajul HTML

HTML este prescurtarea de la Hypertext Markup Language si reprezinta limbajul pe care

2. Structura unui document HTML

Noul cod HTML al paginii noastre va fi urmatorul:

Lista celor mai utilizate tag-uri impreuna cu atributele lor

alink cod culoare nume culoare Culoarea legaturilor active

bgcolor cod culoare nume culoare Culoarea fondului pentru tot

<FONT COLOR="#00008B" SIZE="6">

Nume si coduri de culori

Culoare Nume culoare Cod culoare

Etichete pentru formatarea textului

Cele mai folosite fonturi pentru paginile web sunt urmatoarele:

Pentru ca textul sa fie subliniat, folosim perechea de etichete <U> si </U>.

Utilizarea caracterelor speciale

Exemplu de pagina web in care textul va fi scris cu diacritice:

Pentru a alinia un text folosim codul &nbsp; (spatiu) de cateva ori.

Liste neordonate (UL)

pentru cercuri goale:

pentru patrate pline:

Liste ordonate (OL)

pentru litere mari:

pentru litere mici:

pentru cifre romane mici:

pentru cifre romane mari:

Liste de definitii (DL)

Teorema lui Pitagora

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Expert Group)

Adaugarea imaginilor in paginile web

Forma generala a acestui tag va fi:

Atentie la extensie. Nu uitati sa scrieti si extensia imaginii pentru ca altfel imaginea nu va fi

Imaginea poate fi incadrata de un chenar, folosind atributul BORDER al tag-ului <IMG>.

<IMG SRC=”../Poze/Winter.jpg” BORDER=5>

<IMG SRC=”../Poze/Winter.jpg” BORDER=5 ALT=”Imagine Winter”>

Imagini ca fond al unei pagini web

Cu ajutorul atributului BACKGROUND al tag-ului <BODY> se poate folosi o imagine ca fond

Legatura catre o alta pagina

<A HREF=numelepaginii.html>Textul legaturii</A>

Legatura catre un site

<A HREF="adresa site-ului">Textul legaturii</A>

Legatura catre o sectiune de pagina

Fiecare titlu al sectiunii trebuie definit ca ancora:

Legatura catre o adresa de e-mail

Utilizarea unei imagini ca legatura

Cum pot schimba culorile legaturilor?

Fiecarui atribut i se va atribui un nume de culoare sau codul unei culori.

<BODY LINK=”#FF0000” VLINK=”#000000” ALINK=”FF9600”>

Crearea unui tabel

Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>.

Folosirea tabelelor ca plan al unei pagini web

Exemplu: definirea a doua cadre orizontale

Intre tag-urile <FRAMESET> si </FRAMESET> vom folosi tag-ul <FRAME>.

Notiuni generale despre formulare

Elementele unui formular

Elementele unui formular trebuie introduse, in majoritatea cazurilor, cu ajutorul tag-ului

Atributele cele mai importante ale acestui tag sunt urmatoarele:

Elementele ale unui formular pot fi:

Exemplu de linie de cod HTML care introduce un camp de editare multilinie:

<TEXTAREA COLS="50" ROWS ="5" NAME="exemplu"></TEXTAREA>

În ce categorie de vârstă vă încadraţi?

&#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadra&#355;i? <BR>

Unde vă petreceţi concediul de obicei?

Atributele cele mai folosite pentru tag-ul <SELECT> sunt:

Sa vedem cum arata o lista de selectie:

Pentru a alinia un text folosim codul (spatiu) de cateva ori.

&#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadraţi? <BR>