html

Introducere
HTML (HyperText Markup Language) este un limbaj

utilizat pentru crearea paginilor web ce pot fi afisate
intr-un browser (sau navigator).
HTML este folosit pentru prezentarea unui continut
(text, imagine) intr-o pagina web, furnizeaza mijloacele
prin care continutul unui document poate fi structurat
si adnotat cu diverse tipuri de metadate si indicatii de
redare si afisare. Aceste indicatiile pot varia de la
decoratiuni minore ale textului, cum ar fi culoarea sau
sublinierea unui cuvant ori introducerea unei imagini,
pana la adaugarea de elemente sofisticate, tabele,
harti de imagini, formulare si cod CSS sau scripturi
JavaScript.
Metadatele pot include informatii despre titlul si
autorul documentului, informatii structurale despre
cum este impartit documentul in diferite segmente,
paragrafe, liste, titluri etc. si informatii esentiale care
permit ca documentul sa poata fi legat de alte
documente pentru a forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi
citit si editat utilizand un editor de text simplu,
editarea si intelegerea paginilor in acest fel necesita
cunostinte de HTML, pe care le puteti obtine studiind
lectiile din acest curs.
Exista si editoare grafice, de tip WYSIWYG (What You
See Is What You Get - "ceea ce vezi este ceea ce
obtii"), cum ar fi Macromedia Dreamweaver, Adobe
GoLive sau Microsoft FrontPage, care permit ca
paginile web sa fie tratate asemanator cu documetele
Word si genereaza ele cod HTML pentru continutul
paginii, dar aceste programe genereaza un cod HTML
care este de multe ori prea incarcat si de proasta
calitate.
HTML este de asemenea utilizat in e-mail. Majoritatea
aplicatiilor de e-mail folosesc un editor HTML
incorporat pentru compunerea e-mail-urilor si un motor
de prezentare a e-mail-urilor de acest tip.
Acest curs prezinta elementele de baza ale

limbajului HTML si modul de lucru cu acesta, va ajuta
sa invatati cum sa creati pagini web folosind aceasta
tehnologie.
Tot ce aveti nevoie este un editor de texte simplu, cum
ar fi Notepad, si un navigator, de exemplu Mozilla
Firefox, care este gratuit.
Pentru a invata cat mai bine elementele prezentate in
aceste lectii, exersati personal fiecare exemplu
prezentat si creati si altele pornind de la acestea.
Retineti ca acest curs reprezinta o baza si un punct de
pornire pentru invatarea HTML, ne fiind prezentate aici
toate proprietatile si elementele HTML. Pentru o
cunoastere mai amanuntita a acestora, vizitati site-ul
W3C HTML.
Principalele elemente HTM L
1. Ce este HTML? (Hypertext Markup

Language)
- Este un set de coduri logice care constituie apariţia
unui document web si a informatiilor pe care le deţine.
Codurile sunt scrise intre "<" (paranteza deschisa) si
">" (paranteza inchisa), cu toate ca nu sunt chiar
paranteze, aşa se numesc si arata aşa: < >.
Exemplu:
<BODY> sau <FONT>
- Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere
si un element de închidere distins prin "/" in interiorul parantezei deschise "<".
Exemplu:
<FONT> ... </FONT>
- Primul cuvânt care apare înăuntru "<" se numeşte element sau eticheta
HTML si spune browser-ului sa facă ceva, precum <FONT>
- Cuvintele care urmeaza după element in interiorul "< >"se numesc atribute
care descriu proprietăţile elementului. Cum ar fi : culoarea, mărimea, etc.
- Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care
sunt scrise, intre ghilimele (" ") valorile atributelor.
- Astfel, o eticheta HTML poate contine elementul de identificare, atribute si
valori.
- In urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE:
<FONT COLOR="BLUE">Acest text va fi albastru</FONT>
2. Structura documentului HTML

- Un document (fisier) HTML este alcatuit din mai
multe elemente si atributele lor.
- La început un element HTML cuprinde (înconjoară )
datele documentului. Acest element conţine doua sub-
elemente principale: HEAD si BODY. In HEAD se poate
adauga titlul paginii web si alte elemente numite
metatag-uri, precum si scripturi JavaScript si stil-uri
CSS. In BODY se adauga continutul documentului care
va fi afisat in pagina web.
Exemplu:
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
</body>
</html>
Structura generala a unui document HTML
<HTML>
<HEAD> Acesta are si el mai multe sub-elemente:
<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se încheie cu
</TITLE>
<BASE> Poate fi folosit pentru a înregistra locaţia documentului in forma
URL. (Necesar daca documentul nu este accesat in locaţia lui originala). Se
încheie cu </BASE>
<LINK> Indica o relaţie dintre document si alte obiecte de pe WEB. Se
încheie cu </LINK>
<META> Aici sunt scrise informaţii cum ar fi tastatura (limbaj) folosita,
descrierea si cuvinte cheie care pot fi găsite de motoarele de căutare. Se încheie
cu </META>
<SCRIPT> Conţine oricare din JavaScript sau VB Script. Se încheie cu
</SCRIPT>
<STYLE> Conţine informaţii privind stilul, grafica informaţiilor care vor
apărea pe pagina. Se încheie cu </STYLE>
Aici se încheie elementele adaugate in HEAD
</HEAD>
<BODY> Etichetele HTML si continutul documentului care va fi afisat in
pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar fi:
<SCRIPT> </SCRIPT>
Se încheie cu
</BODY>
</HTML>- Lectia 1
Crearea si editarea paginii HTML
Sunt mai multe programe cu care se pot crea pagini

web, chiar fara a cunoaste limbjul HTML, cum sunt
Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text sunt programele de baza, si cele mai
folosite, pentru editarea paginii web. Avantajul folosirii
lor este simplitatea, pentru creare paginii web sunt
necesare câteva din codurile invizibile ale limbajului
HTML, astfel se creaza documente rapid si usor, in plus
ocupa foarte putin spatiu si resurse de memorie,
acestea insa necesita cunoasterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este
NotePad, care este folosit si pentru acest curs, dar
poate fi utilizat orice editor de text. Pentru începatori si
pentru usurinta cu care se lucreaza, eu recomand
folosirea aplicatie NotePad sau Notepad++, dar cei
avansati pot folosi si altele cum ar fi Dreamweaver.
1. Crearea bazei de început a unui

document
Cum ati vazut in Lectia 1, sunt elemente sigure,
generale, care sunt necesare pentru crearea unui
document HTML.
Pentru început deschideti aplicatia NotePad si scrieti
structura de baza a unei pagini web. Aceasta este:
<html>
<head>
<title> Titlul </title>
</head>
<body>
Continut
</body>
</html>
Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l
completati cu un text reprezentativ ca titlu al documentului dv.; si in BODY un
text "Continut".
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra
meniurilor). La TITLE puteti pune orice text, dar este bine sa scrieti ceva care sa
descrie cat mai bine obiectul si continutul paginii deoarece este ceea ce cauta si
indexeaza multe portaluri de cautare de pe internet, si indicat, sa nu depaseasca
70 caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii,
care va fi afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic
continut in pagina:
<html>
<head>
<title>MarPlo.net - Cursuri, Jocuri si Anime</title>
</head>
<body>
<h1>Pagina HTML</h1>
Lectii, exemple si explicatii.
</body>
</html>
- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in
pagina.
- Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu
Notepad si apoi salvati fisierul cu extensia .html. Daca nu stiti deja, pt. a-l salva
alegeti la "Save as type" - All Files, apoi la "File name" ii scrieti numele si
extensia (ex.: "pagina.html"). Dupa ce a fost salvat fisierul, deschideti-l cu un
browser (trebuie sa mearga cu dublu-click pe el).
2. Setarea proprietarilor documentului

- Proprietatile documentului pot fi controlate de
atributele elementului BODY, de exemplu cum ar fi
culorile pentru fondul paginii, pentru text si diferite
faze ale link-urilor.
Culorile sunt setate folosind culorile de baza: rosu,
verde si albastru; expresia folosita RGB (Red, Green,
Blue), acestea sunt reprezentate ca valori
hexadecimale si sunt scrise intre ghilimele (" "), la
inceput trebuie adaugat caracterul '#'. Fiecare 2
unitati ale codului reprezinta una din culorile RGB.
De exemplu: #00aa11 reprezinta o culoare care nu
are Rosu (00), are Verde (aa) si Albastru mai putin
(11).
Elementul BODY
• - Acestui element ii puteti adauga

informatii care sa defineasca culoarea sau
imaginea din fondul paginii, textul si culoarea
link-urilor.
• - Daca elementul BODY nu este
completat cu alte atribute atunci browser-ul va
prezenta culorile standard, de obicei fondul
este alb.
• - Pentru a seta culoare fondului paginii
adaugati in eticheta <BODY> atributul
BGCOLOR.
• - Urmatorul exemplu va prezenta un
document a carui fond este de culoare albastra:
<body bgcolor="#0000ff"></body>
• Culoarea textului
o - Atributul TEXT controleaza
culoarea textului normal din
document.
o - Acesta va afecta tot textul din
document care nu este colorat de alte
elemente, cum ar fi link-ul.
o - Culoarea standard pentru text
este Negru.
o - Iata un exemplu in care
culoarea fondului va fi albastru si
culoarea textului va fi rosu, atributul
TEXT va fi adaugat astfel:
<body bgcolor="#0000ff"
text="#ff0000"></body>
• Link-uri (LINK, VLINK si ALINK)

o - Aceste atribute controleaza
culoarea link-ului in diferite stari
1. LINK - culoarea initiala a link-ului.
Standard este albastru
2. VLINK - culoarea unui link vizitat.
Standard este purpuriu.
3. ALINK - culoarea link-ului in
momentul activarii. Standard este
rosu.
o - Modul de setare al acestor
atribute este urmatorul:
<body bgcolor="#ffffff"
text="#ff0000" link="#0000ff"
vlink="#ff00ff"
alink="#ffff00"></body>
Rezultatul va fi o pagina cu fondul alb,

textul rosu, link-urile albastre, link-
urile vizitate vor avea culoarea roz iar
culoarea link-urilor in momentul
activarii va fi galben.
• Folosirea unei imagini ca fond

pentru pagina (background)
o - Elementul body ofera
posibilitatea înlocuiri fondului paginii
cu o imagine (Background image).
Daca imaginea este mai mica decât
dimensiunile paginii atunci imaginea
va fi multiplicata pana va acoperi
întreg cadru documentului. Este
indicat ca imaginea sa fie in format
*.gif sau *.jpg. Folosirea unei imagini
va da un aspect placut documentului.
Pentru a vedea cum arata un
document al carui fond este o imagine
click aici.
o - Un exemplu de cod HTML cu
imagine pentru background este
urmatorul:
<body
background="imagine.gif"
bgcolor="#ffffff"></body>
In acest exemplu fondul pagini va fi

dat de imaginea fisierului "imagine.gif"
si de asemenea am setat BGCOLOR
astfel incat in timpul procesului de
încarcare a imaginii culoarea fondului
va fi alba.
Dupa ce a-ti creat baza de început a unui document si a-ti setat proprietatile,
trebuie sa salvati fisierul. Salvarea trebuie facuta intr-un format pe care browser-
ul îl poate recunoaste. Extensia standard pentru un fisier care reprezinta o
pagina web este ".htm" sau ".html". De obicei folosesc (".html").
- Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din
meniul File comanda Save si salvati fisierul cu orice nume doriti dar cu extensia
html (sau "htm") - (La File name: scrieti si numele si extensia ".html", exemplu:
index.html). Daca nu scrieti extensia, NotePad va salva documentul in format
"txt".
- Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti
salvat fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse),
acesta va fi deschis automat de browser-ul pe care-l folositi (Mozilla Firefox,
Internet Explorer, Opera). Sau deschide-ti browser-ul si din comanda Open
deschideti documentul pe care l-ati salvat.
- Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva
in documentul HTML, deschideti documentul cu NotePad. Una din metode este sa
deschideti aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe
care vreti sa-l modificati si dati clic pe butonul Open. Dupa ce terminati
modificarile salvati, astfel daca redeschideti documentul ca o pagina web acesta
va fi deschis cu noul format.
Aici puteti vedea structura generala a unei pagini Web
Titluri, Paragrafe, Un nou rând, Linie orizontala
1. Titluri <Hx> ... </Hx>
• - Pentru titluri din continutul

documentului HTML este indicat folosirea
etichetelor <Hx>, (headings) unde 'x' este un
numar intre 1 si 6.
• - In cadrul elementului BODY,
elementele Headings sunt folosite ca titluri sau
pentru o mai buna impartire a continutului
paginii.
• - Mărimea textului înconjurat de
elementul Heading variază de la foarte mare, in
<H1> pana la foarte mic in <H6>.
Mai jos puteti vedea exemplu:

Cod HTML Cum apare in pagina
<html>
<head>
<title>Titlu documentului</title>
</head>
<body> Heading 1
<h1>Heading 1</h1>
<h2>Heading 2</h2>
Heading 2
<h3>Heading 3</h3> Heading 3
Heading 4
<h6>Heading 6</h6>
</body>
</html>
2. Paragraf <p> ... </p>

• - Paragrafele permit sa adaugi text in
document astfel incat lungimea de afisare a
textului va fi ajustata de marimea deschiderii
browser-ului si fiecare paragraf va incepe un
nou rând.
• - Distanta dintre doua paragrafe
succesive este mare deoarece browser-ul le
afiseaza cu un rând gol intre ele.

<html>
<head>
<title>Titlu documentului</title> Paragraf 1
</head>
<body> Paragraf 2
<p>Paragraf 1</p>
<p>Paragraf 2</p> Paragraf 3
<p>Paragraf 3</p>
</body>
</html>
3. Un nou rand <br>
• - Tag-ul <br> permite sa decizi unde

textul va incepe un nou rând, astfel se forteaza
începerea unui nou rând.
• - <br> este un Element Gol dar poate
sa conţin atribut. <br> nu are si nu cere
element de închidere, nu se foloseste </br>

<html>
<head>
</head> Heading 1
<body>
<h1>Heading 1</h1> Paragraf 1
<p>Paragraf 1<br> Linie 2
Linie 2<br> Linie 3
Linie 3<br> ...
... </p>
</body>
</html>
- Elementul <br> foloseşte un singur atribut – CLEAR care poate avea valoarea
LEFT, RIGHT sau ALL, si sunt folosite daca este o imagine pe pagina. Atributul
CLEAR forţează o linie in jos. Daca o imagine este aşezata in partea stanga a
paginii, valoarea LEFT va muta cursorul jos la prima linie din marginea ştanga.
4. Linie orizontala <hr>
• - Acest element afiseaza o linie

orizontala in document
• - Acest element nu foloseşte element de
închidere [</hr>]
• - Elementul <hr> foloseste urmatoarele
atribute:
o - SIZE = latimea liniei, in pixeli
(standard este 2)
o - WIDTH = lungii liniei, in pixeli
sau procente din lungimea afisarii
paginii (standard 100%)
o - NOSHADE = afiseaza linia fara a
avea un aspect 3D
o - ALIGN = aliniaza linia (Left,
Center, Right), adica Stanga, Centru
sau Dreapta paginii ( Standard centru)
o - COLOR = seteaza culoarea liniei

<html>
<head>
</head> Heading 1
<body>
<h1>Heading 1</h1> Paragraf 1
<p>Paragraf 1<br> Linie 2
Linie 2<br> Linie 3
Linie 3<br> ...
... </p>
<hr>
<hr color="#1111fe" size="4" width="50%">
</body>
</html>
Formatul textului
HTML contine mai multe elemente, tag-uri si
atribute, pentru afisarea textului in mai multe formate
cu aspecte grafice diferite.
1. Tag-ul <FONT> ... </FONT>

Cu acest element, <FONT>, puteti modifica
aspectul textului, cum sunt tipul fontului folosit,
marimea si culoarea textului.
• - Marimea textului poate fi modificata cu

elementul FONT si atributul SIZE. Atributul
SIZE poate lua valorile numerice de la 1 la 7 si
pe langa acestea poate folosi, ca valoare
relativa, semnele "+" sau "-". Textul normal
(daca nu este specificat acest atribut) are
valoarea 3.
• Exemplu :
<font size="+2"> Doua mărimi

mai mare</font>
• - Tipul fontului poate fi modificat cu
elementul FONT si atributul FACE.
• Exemplu :
<font face="Arial Black">Acesta este

tipul de font Arial Black</font>
• - Culoarea textului poate fi modificata cu

elementul FONT si atributul COLOR.
• Exemplu :
<font color="#00dd00">Acest text are

culoarea verde</font>
2. Bold, Italic, Underline si alte elemente

Elemente des folosite pentru formatul textului sunt:
• - Bold (ingrosat) <b> ... </b>

• - Italic (inclinat) <i> ... </i>
• - Underline (subliniat) <u> ... </u>
Exemple:
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Alte elemente folosite pentru formatul textului sunt:

• - <pre> Performated </pre> - Textul
incadrat de elementul PRE este prezentat intr-
un singur font, oricare ar fi atributul FACE.
Spatiile mai lungi si liniile necesare sunt
prezentate aşa cum sunt scrise in NotePad, ne
mai fiind nevoie de alte elemente adiţionale,
cum ar fi <br> pentru o noua linie si
pentru mai mult spaţiu intre cuvinte.
• - <em> Accentuare (Emphasis) </em>
- Browser-ul de obicei arata aces element ca
italic
• - <strong> Strong </strong> -
Browser-ul de obicei arata aces element ca
bold
• - <tt> Teletype </tt> - Ca si PRE,
browser-ul prezinta acesta intr-un singur tip de
font, indiferent de fontul ales cu atributul FACE,
in interiorul elementului FONT
• - <cite> Citatie </cite> - Reprezinta o
citatie din document.
Mai jos puteti vedea câteva exemple de coduri si modul lor de afisare in browser.
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<p><font size="+1">O singura marire</font>- normal -
<font size="-1">O singura micsorare</font><br>
<b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> -
<font color="#ff0000"> Colorat </font><br>
<em>Accentut</em> - <strong> Strong </strong> -
<tt>Tele type</tt><br>
<cite> Citatie </cite></p>
</body>
</html>
- In browser va fi afisat asa:
O singura marire- normal - O singura micsorare
Bold- Italic - Subliniat - Colorat
Accentut - Strong - Tele type
Citatie
3. Alinierea
Câteva elemente pot avea atributul (ALIGN) pentru
aliniere, cum ar fi Titlurile <Hx> , Paragraful <p>…
</p> si Linia orizontala <hr> . Cele trei valori ale
atributului ALIGN sunt: LEFT, RIGHT si CENTER.
Aliniamentul celor mai multe elemente se face cu
ajutorul altor elemente:
• - <div align="valoare"> ... </div>
Poate conţine cele mai multe elemente. Tot ce
este poziţionat cu elementul DIV poate fi aliniat
oriunde-n pagina, indiferent daca in acel loc se
afla si alt ceva (Imagine, Text, …).
• - <center> ... </center> Va centra
elementele
4. Alte etichete HTML pentru formatul

textului
• - <strike> Text taiat </strike>

• - <big> Prezinta textul intr-un font
mare </big>
• - <small> Prezinta textul intr-un font
mic </small>
• - <sub> Afisaza textul in pozitia
subscript </sub>
• - <sup> Aseaza textul in pozitia
superscript </sup>
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum
sunt afisate de browser.
<html>
<head>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>
Text taiat
Prezinta textul intr-un font mare
Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript normal Aseaza textul in pozitia superscript
- Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru
documente cu aplicatii tehnice
• - <dfn> Defineste exemplu de termen

inchis </dfn>
• - <code> Folosit pentru extragerea
unui cod de program </code>
• - <samp> Folosit pentru simple
productii de programe, scripturi , etc.
</samp>
• - <kbd> Folosit pentru text care va fi
scris de utilizator </kbd>
• - <var> Folosit pentru variabile sau
argumente de comenzi </var>
<html>
<head>
</head>
<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc.
</samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>
</body>
</html>
Definite exemplu de termen inchis
Folosit pentru extragerea unui cod de program
Folosit pentru simple productii de programe, scripturi , etc.
Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi
- Alte elemente pentru formatul textului:
• - <q> ... </q> - Folosit pentru citate

scurte.
• - <blockquote> ... </blockquote> -
Folosit pentru incadrarea de citate mai lungi,
creaza spatiu pentru text. Pentru a crea mai
mult spatiu puteti adauga de mai multe ori
acest element.
• - <address> ... </address> - Cu acest
element se specifica informatii cum ar fi autorul
documentului si detalii pentru contact.
<html>
<head>
</head>
<body>
<p>
<q>Daca vrei si crezi, orice este posibil.</q>
<blockquote>
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa
aduca bucurie. <br>
Aceasta este prima zi din restul vietii tale.
</blockquote>
<center>
<address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W
6A9</address>
</center>
</p>
</body>
</html>
Daca vrei si crezi, orice este posibil.
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa
aduca bucurie.
Aceasta este prima zi din restul vietii tale.
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9
Marcatori si numerotare
HTML contine cateva tag-uri utile pentru asezarea

continutului in pagina. Prin acestea textul este mai
usor de citit si evidentiat.
1. Elementele pentru marcatori si

numerotare
Un element des folosit in formarea listelor
(neordonate) este <ul>.
• - <ul> este elementul de început si

dupa scrierea listei se incheie cu </ul>.
• - Majoritatea elementelor pentru
marcatori si numerotare sunt compuse din unu
sau mai multe elemente <li> ... </li> (list
element). Fara atributul "type" specificat in
"<ul>" acestea prezintă un marcaj ca un bullet.
Mai jos puteti vedea exemplu.

<html>
<head>
</head>
<body>
<ul>
<li>List item 1 ...</li>
</ul>
</body>
</html>
- In pagina web apare asa:
• List item 1 ...

• List item 2 ...
• List item 3 ...
- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)

- Tipul de marcaj care se doreste folosit se introduce prin atributul type in
eticheta <ul>
- Exemplu:
<html>
<head>
</head>
<body>
<ul type="square">
</ul>
</body>
</html>
 List item 1 ...

 List item 2 ...
 List item 3 ...
Un alt element folosit pentru formarea listelor (ordonate) este <ol>.
• - <ol> ... </ol> este un element de

numerotare. Elementele din lista sunt
numerotate automat.
• - Impreuna cu <ol> se foloseste <li> ...
</li>
Iata un exemplu:
<html>
<head>
</head>
<body>
<ol>
</ol>
</body>
</html>
1. List item 1 ...

2. List item 2 ...
3. List item 3 ...
Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate
de atributul "type care este adaugat in elementul <ol>, le puteti vetea mai jos:
• - type="1" - stil: 1, 2, 3, ...

• - type="a" - stil: a, b, c, ...
• - type="i" - stil: i, ii, iii, ...
• - type="I" - stil: I, II, III, ...
De asemenea se poate specifica numarul de inceput al numerotarii printr-o

valoare data atributului start.
Exemplu:
<html>
<head>
</head>
<body>
<ol type="a">
</ol>
- Alta lista:
<ol type="I" start="3">
</ol>
</body>
</html>
a. List item 1 ...

b. List item 2 ...
c. List item 3 ...
- Alta lista:
III. List item 1 ...
IV. List item 2 ...
V. List item 3 ...
2. Alte elemente pentru asezarea textului

in pagina
Alte elemente pentru asezarea textului sunt: tag-ul
<dl>, care cuprinde in el elementele <dt> si <dd>
• - <dl> ... </dl> este folosit (impreuna

cu "dt" si "dd") pentru definirea si incadrarea
unei liste de definitii.
• - <dt> ... </dt> Defineste elementul
din lista. Fiecare tip de astfel de element
trebuie precedad de unul sau mai multe
elemente <dd> ... </dd>, folosite pentru
descrierea elementului definit.
Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea

face o separare mai buna a continutului.
In urmatorul exemplu puteti vedea cum se folosesc aceste elemente :
<html>
<head>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
<dd>dog = caine</dd>
<dd>animal de casa</dd>
<dl>
</body>
</html>
HTML
- Hyper Text Markup Language
- Limbaj pentru pagini web
Dog
dog = caine
animal de casa
Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare,

introducand elementele <ul> si <ol> imbricate (unele in celelalte) impreuna cu
elementele <li>
Exemplu:
<html>
<head>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
<ol type="a" start="3">
<li> Alt List item ... </li>
<li> Alt List item ... </li>
</ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>
- Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li>
</li>"
 List item 1 ...

 List item 2 ...
c. Alt List item ...
d. Alt List item ...
 List item 5 ...
Adaugare Imagini
HTML contine si elemente pentru adaugarea de

imagini in pagina web.
1. Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adaugate
intr-o pagina HTML sun GIF si JPEG (JPG ; JPE),
avantajul acestora este ca imaginile care au aceste
extensii au o marime mica (in bytes), avand maximum
256 de culori.
Alte tipuri de formate (folosite mai rar) sunt:
• PNG, BMP, TIFF, PCX
2. Adaugarea unei imagini intr-o pagina

web
Pentru a introduce o imagine intr-un format HTML se
foloseşte elementul <img> ... </img> împreuna cu
urmatoarele atribute :
• - src - Valoarea acestui atribut

determina locatia fisierului care contine
imaginea.
• - alt - La acest atribut se scrie textul
care va aparea daca imaginea nu e afisata (de
unele browsere) sau cand utilizatorul va
pozitiona, in browser, mouse-ul peste imagine.
• - align - Acest atribut permite
asezarea imagini in locuri diferite pe pagina.
Pot fi folosite urmatoarele optiuni:
o Bottom , Middle , Top , Left ,
Right , TextTop , ABSMiddle ,
Baseline , ABSBottom
• - width - Valoarea acestui atribut
reprezinta lungimea imaginii, in pixeli. Daca nu
este scris imaginea va fi prezentata cu
lungimea originala.
• - height - Valoarea acestui atribut
reprezinta inaltimea (latimea) imaginii, in pixeli.
Daca nu este scris imaginea va fi prezentata cu
inaltimea originala.
• - border - Prin adaugarea acestui
atribut imaginea va aparea înconjurata de un
chenar, valoarea acestui atribut reprezinta
grosimea chenarului, in pixeli.
• - hspace - Acest atribut este pentru
spatiu orizontal pe ambele parti ale imaginii,
specificat in pixeli. De exemplu o valoare de 5
va pune un spatiu invizibil, de 5 pixel, in pârtile
orizontale ale imaginii.
• - vspace - Acest atribut este pentru
spatiu vertical pe ambele parti ale imaginii,
specificat in pixeli. De exemplu o valoare de 5
va pune un spatiu invizibil, de 5 pixel, in pârtile
verticale ale imaginii.
In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o

pagina web si cum pot fi folosite atributele :
<html>
<head>
</head>
<body>
<img src="imagine.jpg" alt="puteti adauga orice text" align="top"
width="100" height="120" border="4" hspace="10"
vspace="7"></img>
</body>
</html>
- In pagina web va aparea:
Incercati singuri mai multe exemple, folosind si alte atribute si valori prezentate
mai sus.- Lectia 6
Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul

carora putem deschide alte pagini, sari de la un
document la altul sau la alt site. Sunt foarte importante
in crearea de pagini web.
Forma generala pentru crearea unui link este
urmatoarea:
• <a href="url" title="Titlu

link">Nume</a>
- a este elementul specific pentru crearea link-urilor

- href este atributul care marcheaza indicarea adresei link-ului
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu
(http://www.marplo.net)
- title este atributul prin care se da un titlu link-ului (un text ascuns, care apare
numai cand este pozitionat mouse-ul deasupra link-ului)
- Titlu link este textul ascuns care apare cand este pozitionat mouse-ul
deasupra link-ului
- Nume este textul care va aparea in browser si pe care trebuie dat click cu
mouse-ul. In loc de acest text se poate folosi si o imagine, astfel "Nume" va fi
inlocuit cu <img src="nume_imagine.extensie">
Cand documentul este alcatuit din mai multe cadre se foloseste si atributul
target, vezi Lectia 10
Culoarea link-urilor poate fi schimbata de următoarele atribute, care trebuie

scrise in interiorul elementului <BODY>
• link="#0000ff - reprezinta culoarea

link-ului in browser.
• vlink="#00ffff - reprezinta culoarea
link-ului când pagina respectiva a fost / este
vizitata.
• alink="#ff0000 - reprezinta culoarea
link-ului când acesta este activat.
• Exemplu:
<body bgcolor="#00ffff" link="#000000"
vlink="#ff0000" alink="#00ff00">
Link-urile sunt de doua feluri:
1. Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri:
a) Link-uri externe câtre pagini ale aceluiasi site. Pentru acestea URL-ul poate
sa nu includa si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate
folosi doar cale in directoare, numele si extensia documentului la care se face
saltul.
De exemplu:
• - daca documentul tinta se afla in

acelasi director cu fisierul in care se scrie link-
ul, codul va fi scris asa:
o <a
href="nume_fisier.extensie"
title="Titlu link">Nume</a>
• - daca documentul tinta se afla intr-un

director anterior celui in care se afla fisierul in
care se scrie link-ul, codul va fi scris asa:
o <a
href="../nume_fisier.extensie"
• - daca documentul tinta se afla intr-un

director din cel care se afla fisierul in care se
scrie link-ul, codul va fi scris asa:
o <a
href="director/nume_fisier.extensi
e" title="Titlu link">Nume</a>
b) Link-uri externe câtre alte site-uri. Aici, adresa URL din link trebuie sa
contina si domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de
exemplu, asa:
• <a href="http://nume_site/pagina"
2. Link-uri interne - sunt link-uri câtre alte texte din aceeasi pagina. Se folosesc
când pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din
pagina.
- Pentru creare de link-uri interne trebuie urmati urmatorii pasi:
• 1. Se scrie urmatorul cod la textul tinta,

care marcheaza locatia unde se va face saltul si
se afla in aceeasi pagina cu linkul
o <a name="cuvant">Textul
tinta</a>
o - atributul "name" indica tinta
pentru link, e un fel de semn care
indica locatia.
o - "cuvant" poate fi orice cuvânt,
trebuie sa fie unic pentru fiecare link.
o - "Textul tinta" este textul
unde se face saltul.
• 2. In locul unde vrem sa fie link-ul (acolo
unde o sa dam click pentru a face saltul câtre
textul ales), se scrie urmatorul cod:
o <a
href="#cuvant">Nume</a>
o - aici "cuvant" este acelasi text
scris la pasul 1.
Link-urile interne si externe pot fi combinate. Astfel putem face saltul câtre un
anumit text aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul
1, la textul ales pentru tinta link-ului, iar in pagina in care va fi link-ul se scrie:
• <a
href="adresa_pagina#cuvant">Nume</a>
Harti de imagini
Hartile de imagini sunt parti din aceeasi imagine

care este "impartita" in mai multe zone, apoi in functie
de zona pe care se executa click, browserul poate
afisea o alta pagina.
De exemplu, pe un site dedicat turismului am putea
avea pe pagina principala o imagine care reprezinta
harta tarii (in care definim zonele dupa conturul
judetelor); in cazul unui click pe zona Brasov se incarca
o pagina care descrie diverse obiective turistice din
judetul Brasov, iar un click pe o alta zona de judet ar
duce la alta pagina care descrie obiectivele turistice
din acel judet.
O harta de imagini ar putea fi folosita si pentru
navigarea in cadrul unui site: daca avem mai multe
butoane de navigare grupate, se poate folosi o imagine
care reprezinta toate acele butoane - mai multe
imagini se incarca mai incet decat o imagine cu
dimensiunea egala cu suma celorlalte (in kb) deoarece
comunicarea cu serverul (cand se cere imaginea) se
face o singura data.
Pana aici am prezentat numai avantaje; dezavantajul
major este ca un vizitator care are browserul setat sa
nu incarce imagini pentru a naviga mai repede nu va
vedea imaginea si nu va intelege mai nimic (putem
totusi folosi marcajul "alt" de specificare a textului
alternativ pentru imagini). Totusi acest lucru este
foarte rar.
Crearea hartii de imagini

Pentru formarea unei harti de imagini, se adauga in
interiorul tag-ului "<img>" atributul "usemap" a carui
valoare reprezinta numele hartii, apoi se incepe
formarea hartii prin elementul:
• <map name="nume_harta">
</map>
- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat

la "usemap"
- in cadrul acestuia se adauga elemente
• <area atribute>
- acestea definesc zonele hartii imaginii si forma acestora (prin valorile

atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri
specifice) in care este "impartita" imaginea.
In urmatorul exemplu puteti vedea forma generala a creari unei "harti de

imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului
curent:
• <img src="poza.jpg"
usemap="#map1">
<map name="map1">
<area shape="rect" coords="9, 120, 56,
149" href="url">
<area shape="rect" coords="100, 200,
156, 249" href="url">
</map>
In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea

acestora:
Instructiune Atribute Descriere
<img atribute > - marcaj de includere a imaginilor
ismap specifica faptul ca este o harta de imagine pe
server (se foloseste mai rar; de obicei folosim
harti de imagine la client)
usemap="nume_harta" specifica harta de imagine la client
imaginea de rezolutie scazuta care se incarca
lowscr = "url"
prima (doar pentru Netscape)
specifica regiunile unei harti de imagine la
-
<map atribute > client
< / map > numele hartii de imagine (corespunzator
name = "nume_harta"
atributului USEMAP al marcajului <IMG>)
- defineste o regiune a unei harti de imagine
forma regiunii: rect sau rectangle (dreptunghi),
shape = "forma" circle sau circ (cerc), point (punct), poly sau
polygon (poligon)
coordonatele unei regiuni (in pixeli); se
calculeaza in functie de coltul din stanga sus al
imaginii (care are coordonatele (0, 0), adica x =
0, y = 0); variaza in functie de SHAPE = forma
regiunii:
- pentru rect (dreptunghi) se dau coordonatele
celor 4 colturi sau a celor din stg. sus si dr. jos
coords = "coordonate"
ale regiunii
<area atribute > - pentru circ (cerc) se dau coordonatele
centrului cercului si raza
- pentru point (punct) se dau coordonatele
punctului
- pentru poly (poligon) se dau coordonatele
colturilor poligonului
URL - ul asociat regiunii specificate din cadrul
href = "=url=" imaginii; in cazul unui clic pe acea regiune se
incarca pagina specificata prin URL
textul asociat regiunii specificate din cadrul
imaginii; apare plasand mouse-ul deasupra
alt = "text"
regiunii respective sau celor cu browserul setat
sa nu incarce imagini
Iata un exemplu practic, avem imaginea de mai jos.

In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon);
pe care, prin codurile HTML de creare a hartii de imagini, le-am definit sa fie
tratate ca zone diferite, separate, si cand dam click pe ele, fiecare deschide cate
o pagina diferita (sugerata de numele din zona respectiva).
- Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor
care au fost definite ca sa fie suprafete a hartii de imagini. Aceasta definire nu
este facuta prin desen, ci prin coordonatele folosite in atributul "coords",
coordonate care au fost alese pentru a se potrivi cu desenul. Reperul cel mai
important este lungimea in pixeli din coltul stanga-sus pana in punctele care
formeaza zona dorita.
Codul HTML pentru acest exemplu este urmatorul (studiati cu atentie atributele
folosite si coordonatele scrise; revizuiti si tabelul de mai sus):
<div align="center">
<img src="image_map.gif" alt="Harta de imagini" border="0" width="300"
height="300" usemap="#map1">
<map name="map1">
<area
href="dir/contact.php" alt="Date de contact" title="Date de contact"
shape="rect" coords="6,116,97,184">
<area
href="curs.html" alt="Curs HTML" title="Curs HTML"
shape="circle" coords="251,143,47">
<area
href="../index.html" alt="Pagina principala" title="Pagina principala"
shape="poly" coords="150,217, 190,257, 150,297,110,257">
</map>
</div>
Lucru cu tabele
Tabelele sunt elemente foarte utile pentru asezarea

si prezentarea continutului intr-o pagina web.
1. Crearea de tabele
Pentru a crea tabele in paginile web se foloseste
elementul <table> ... </table> , acesta incadreaza
alte patru sub-elemente, care alcatuiesc structura
tabelului.
• - Linia (randul) Tabelului <tr> ... </tr>

• - Titlul Tabelului <th> ... </th>
• - Coloanele tabelului (datele) <dt> ...
</dt>
• - Sub-titlu tabelului <caption> ...
</caption>
Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul

pentru coloanele tabelului.
In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte
elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau
imagini
Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel:
<table border="1">
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
titlu 1 titlu 2
linia 2- coloana 1 linia 2- coloana 2
2. Atributele Tabelului
• - bgcolor = defineste culoarea

tabelului
• - width = specifica lungimea tabelului
(In pixeli sau procente din lungimea paginii)
• - border = grosimea liniei (in pixeli) ce
defineste tabelul si înconjoara fiecare celula
• - cellspacing = spatiu dintre celule (in
pixeli)
• - cellpadding = spatiu dintre linia
celulei si continutul acesteia (in pixeli)
• - align = controlează poziţionarea
tabelului in pagina, cu următoarele atribute :
left, right, sau center
• - background = controleaza culoarea
de fond a tabelului, care poate fi si o imagine
• - bordercolor = culoarea liniei din
jurul tabelului
• - bordercolorlight = culoarea
luminoasa folosita de doua linii din cele patru
care înconjoara tabelul
• - bordercolordark = culoarea
întunecata folosita de doua linii din cele patru
care înconjoara tabelul
Sub-titlu tabelului
- Sub-titlu tabelului "caption" permite specificarea unei linii de text care va
aparea deasupra sau sub tabel, acest lucru este definit de atributul "align" care
poate lua valorile: top (deasupra) bottom (jos)
Exemplu:
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
</tr>
</table>
titlu 1 titlu 2
acesta este textul
3. Atributele specifice elementelor pentru
titlu si coloane
• - colspan = specifica cat de multe

coloane ale tabelului aceasta celula va inlocui
• - rowspan = specifica cat de multe
randuri ale tabelului aceasta celula va inlocui
• - align = alinierea datelor celulei pe
orizontala (left, right sau center)
• - valign = alinierea datelor celulei pe
verticala (top, middle sau bottom)
• - background = controleaza culoarea
de fond a celulei, care poate fi si o imagine
• - bgcolor = defineste culoarea celulei
(dar nu imagine)
• - width = specifica lungimea celulei (In
pixeli sau procente din lungimea paginii)
• - height = specifica inaltimea celulei
(In pixeli sau procente din inaltimea paginii)
in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan"

"rowspan" si "bgcolor"
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td colspan="2">linia 2- coloana 1</td>
</tr>
<tr>
<td rowspan="2">linia 3- coloana 1</td>
</tr>
<tr>
<td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>
titlu 1 titlu 2
linia 2- coloana 1
linia 3- coloana 2
linia 3- coloana 1
linia 4- coloana 2 - colorat
acesta este textul
Exersati singuri si alte exemple de tabele, cu mai multe randuri si coloane.-

Lectia 9
Utilizarea cadrelor
Cadrele, sau frame-uri, sunt folosite pentru

impartirea ferestrei browser-ului astfel incat sa fie
afisate mai multe pagini in aceeasi fereastra de
browser.
Un frame (cadru) este o parte din suprafata ferestrei
browserului.
Fiecare frame prezinta în interior un document propriu
(in general un document HTML). De exemplu puteti
creea doua cadre intr-o fereastra, in primul cadru
puteti incarca un document HTML (ex. doc1.htm) iar in
al doilea cadru un alt document HTML, de la alta
adresa (ex. doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.
Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:
• <frameset> si <frame> sau

<iframe>
1. Configurarea cadrelor
Pentru inceput se adauga un element
<FRAMESET> ... </FRAMESET> in interiorul
documentului HTML, în sectiunea HEAD.
<FRAMESET> determina cat din spaţiul ferestrei este
atribuit fiecărui cadru, folosind atributele ROWS sau
COLS care impart ecranul in Linii sau Coloane.
Acesta va conţine elemente <FRAME>, cate unul
pentru fiecare divizare a ferestrei din browser.
ROWS
• Determina numarul de linii si marimea

cadrelor care vor fi asezate in linie, începând
de sus.
• Pot fi folosite urmatoarele valori:
o - pixeli absoluti ; ex : "360,120"
- procente din inaltimea ecranului ;
ex : "75%,25%"
- valori proportionale, folosind (*).
Acesta putând fi combinat cu procente
sau pixeli. Ex : "120,*" sau "30%,*"
COLS
• Determina numarul de coloane si

marimea cadrelor care vor fi asezate pe
coloane, începând din stanga.
• Pot fi folosite urmatoarele valori:
o - pixeli absoluti ; ex : "380,120"
- procente din lungimea ecranului ;
ex : "33%,77%"
- valori proportionale, folosind (*).
Acesta putând fi combinat cu procente
sau pixeli. Ex : "120,*" sau "30%,*"
Alte atribute ale elementului <FRAMESET>
• FRAMEBORDER - Stabileste afisarea

sau nu a unei borduri in jurul cadrelor. Posibile
valori: 0, 1 sau YES, NO.
• FRAMESPACING - Acest atribut este
specificat in pixeli. Daca FRAMEBORDER este 0
atunci si acesta trebuie sa aiba valoarea 0
• BORDER - Marginea cadrelor. Valori
posibile: 0 sau 1
• BORDERCOLOR - Acest atribut permite
sa alegi culoarea bordurii.
Elementul <FRAME>
• Acest element defineste un singur cadru

, este scris in interiorul elementului
<FRAMESET>
• Pentru fiecare cadru trebuie scris cate
un element <FRAME>
• Acesta are urmatoarele atribute:
o SRC - Aici trebuie scrisa adresa si
numele paginii folosite pentru cadru
o NAME - Aici trebuie scris numele
de identificare al cadrului.
o MARGINWIDTH - Atribut
optional, valoare in pixeli. Determina
spatiul orizontal dintre continutul
cadrului si marginea acestuia
o MARGINHEIGHT - Atribut
optional, valoare in pixeli. Determina
spatiul vertical dintre continutul
cadrului si marginea acestuia.
o SCROLLING - Afiseaza un Scroll
Bar in cadru. Valori posibile: YES
(permite afisarea Scroll Bar-ului), NO
(nu va fi prezentat nici un Scroll Bar) si
AUTO (browser-ul va decide daca este
nevoie de Scroll Bar. Aceasta valoare
este cea mai indicata)
o NORESIZE - Optional, impiedica
utilizatorul sa modifice marimea
cadrului, prin selectarea marginii
acestuia si mutarea in stânga sau
dreapta ori sus sau jos.
Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua
cadre, cel din stânga ocupând 23% din spatiul paginii iar cel din dreapta 77%
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="23%,77%">
<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">
<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">
</FRAMESET>
<BODY>
</BODY>
</HTML>
De asemenea se poate crea un design de cadre cu o combinatie de linii si

coloane.
In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul elementului
"<FRAME>" care descrie a doua linie. Al doilea element <FRAMESET> va divide
spatiul ramas in doua coloane. Pentru aceasta, al doilea element "<FRAMESET>"
trebuie urmat de inca doua elemente "<FRAME>"
- Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza o
pagina ce contine trei cadre:
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="baner.htm">
<FRAMESET COLS="120,*">
<FRAME SRC="Meniu.htm" NAME="meniu">
<FRAME SRC="Continut.htm" NAME="date">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
2. Atributul target
Cand sunt create link-uri care sunt folosite pentru a
deschide pagini in cadre, este nevoie de specificarea
unui atribut in eticheta de link "<a>" numit target,
acesta spune browser-ului in ce cadru sa deschida
pagina.
Atributul target foloseste ca valoare textul din
atributul NAME al elementului FRAME in care se va
deschide noua pagina.
De exemplu, daca avem un link in Meniu.htm care
vrem sa deschidă pagina Doc3.htm in spaţiul in care
se afla celalat cadru, de exemplu Continut.htm; codul
HTML pentru link va arata astfel in Meniu.htm:
• <a href="Doc3.htm"
target="numele cadrului Continut.htm">
Numele link-ului </a>
- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul curent

- atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML, ca si
atributul NAME din FRAME-ul in care se doreste afisarea paginii.
Special Target:
• Sunt 4 nume speciale de TARGET, care

nu pot fi asociate cu atributul NAME. Fiecare
are o functie speciala.
• target="_top"
o - acesta va încarca link-ul in toata
fereastra browser-ului, disparând
astfel cadrele.
• target="_blank"
o - acesta va încarca link-ul intr-o
noua fereastra de browser, astfel
ramanand deschisa si vechea
fereastra.
• target="_self"
o - acesta va încarca link-ul in
aceeasi fereastra de unde a fost
actionat.
• target="_parent"
o - cadrul "_parent" este cadrul
anterior de la care a fost deschis noul
cadru, daca acesta nu exista atunci
link-ul se va deschide in actuala
fereastra de browser.
3. Adaugarea cadrelor iframe

Pentru crearea unui cadru cu "<iframe>" puteti
folosi, ca exemplu, urmatoarea sintaxa (aceasta se
adauca in sectiunea BODY, in locul unde doriti sa apara
frame-ul):
• <iframe src="url_pagina"
width="600" height="200" align="center"
scrolling="yes" frameborder="0"
name="nume_frame"> </iframe>
- Unde "iframe" este elementul principal care indica adaugarea unui
frame in pagina.
- "url_pagina" e adresa paginii care va fi incarcata in iframe,
"width" si "height" reprezinta lungimea respectiv inaltimea
cadrului (exprimata in procente sau pixeli), "scrolling" reprezinta
permisiunea de derulare a paginii din cadru (yes sau no),
"frameborder" specifica daca va fi sau nu afisata o margine
(bordura) pentru cadru (1=da, 0=nu), iar "nume_frame" este
numele cadrului (necesar pentru atributul "TARGET" in link-uri sau
cand frame-ul este folosit de JavaScript).- Lectia 10
Curs HTML
Home
Engleza Spaniola CSS PHP-MySQL JavaScript AJAX Flash Anime Jocuri
Forum
Cautare
Autentifica
Nume:
Parola: Tine-ma minte
Recuperare parola Inregistrare
Crearea formularelor
De cele mai multe ori formularele HTML sunt create

pentru a fi folosite impreuna cu alte programe si
scripturi web, cum sunt PHP, JavaScript si altele.
1. Tag-ul FORM
Pentru a crea un formular in HTTML se foloseşte
elementul <form> ... </form>, in cadrul acestuia se
vor adauga celelalte elemente specifice.
Elementul <form> ... </form> nu contine atribute
pentru format, foloseste insa urmatoarele atribute:
• action - aici se scrie adresa URL a unui

script de pe server (de obicei PHP sau CGI),
program care trebuie sa accepte datele din
FORM , le proceseaza si trimite înapoi raspunsul
la browser.
• method - aici putem scrie get , sau
post. Aceste valori specifica ce metoda HTTP
va fi folosita pentru a trimite continutul
formularului la server.
• enctye - determina mecanismul folosit
pentru a codifica continutul transmis din
formular.
• name - Este numele formularului, folosit
de scripturi VB (Visula Basic) sau JavaSript.
• target - Este tinta cadrului (frame) unde
pagina va fi vizualizata, dupa transmiterea
datelor din form.
2. Elementele de formular
In continuare sunt prezentate restul elementelor de
formular care sunt folosite pentru a crea diferite
campuri, casete, butoane in pagina web, necesare
pentru a aduna datele care vor fi trimise la aplicatie pe
server.
Cele mai multe se creaza prin atributul type al
elementului <input> ... </input>
Proprietatile elementului <input> ... </input>
• type - tipul de FORM folosit (caseta text,

buton si altele ...)
• name - numele elementului respectiv
de formular, folosit de scripturile la care sunt
trimise datele
• value - datele (valoarea) asociate acelui
element de formular si care sunt trimise,
impreuna cu numele, catre scripturi (PHP, CGI,
JavaScript)
• size - specifica numarul de caractere
care dau lungimea zonei de text
• maxlength - numarul maxim de
caractere acceptate
• checked - specifica daca un buton sau
alta forma va fi initial selectata (bifata).
• readonly - folosit pentru campuri de tip
text, impedica modificarea valorii (textului) din
acel camp
• disabled - impedica folosirea campului
care are aceasta proprietate. Va fi vizibil dar nu
va putea fi folosit, datele acestuia nu vor fi
trimise din formular la vreun script.
Casete de text
• - este folosit pentru a crea in pagina un
camp pentru text (cu o singura linie).
• - Codul este <input
type="text"></input>
In browser va apare:
• - Acest element foloseste urmatoarele

atribute:
o type - text
o name - numele casutei de text,
folosit de scriptul la care sunt trimise
datele
o value - va reprezenta propriul
context ca valoare aleasa. Un sir de
text care apare in casuta de text
o size - specifica numarul de
caractere care dau lungimea casutei
de text (default 20)
o maxlength - numarul maxim de
caractere acceptate sa fie adaugate
de utilizator
Camp textarea
• - "textarea" este un element ce creaza

un camp in pagina, in care utilizatorul poate
adauga mai multe linii de text.
• - Codul este <textarea;></textarea>

atribute:
o name - numele campului de text,
datele
o rows - numarul de linii a zonei de
text
o cols - numarul de coloane a zonei
de text
o wrap - standard este OFF. Dar
poate avea valorile : "VIRTUAL" sau
"PHYSICAL", astfel ca textul wraps in
browser sa fie prezentat exact cum
este scris de utilizator.
Casete pentru parole
• - "password" este folosit pentru a

permite adaugarea de parole. Caracterele
adaugate in aceasta caseta nu sunt afisate cu
valoarea lor reala, pentru a nu se vedea parola
scrisa.
type="password"></input>

atribute:
o type - password
o name - numele casutei pentru
parole, folosit de scriptul la care sunt
trimise datele
o value - de obicei nu este
adaugat. Daca este scris, va
reprezenta parola default din acea
caseta.
pt. adaugarea parolei (default 20)
o maxlength - numarul maxim de
caractere acceptate sa fie adaugate
de utilizator
Casete de formular ascunse
• - "hidden" este folosit pentru a adauga

in formular date care sa nu fie vizibile in
browser si care sunt trimise la scripturi
impreuna cu celelalte date din formular.
type="hidden"></input>
atribute:
o type - hidden
o name - numele casutei ascunse,
datele
o value - valoarea care se doreste
sa fie transmisa prin acea caseta
ascunsa.
Check box
• - este folosit pentru adaugarea mai

multor optiuni pe care utilizatorul le poate
alege (oricate din ele) prin bifarea lor
type="checkbox"></input>

atribute:
o type - checkbox
o name - numele casutei
checkbox, folosit de scriptul la care
sunt trimise datele
o value - valoarea casetei
checkbox respective, care poate fi
selectata (bifata)
o checked - daca este adaugat
acest atribut, caseta checkbox
respectiva este selectata (bifata).
Radio button
• - este folosit pentru adaugarea mai

multor optiuni dintre care utilizatorul poate
alege una singura
type="radio"></input>

atribute:
o type - radio
o name - numele casutei radio,
datele
o value - valoarea casetei radio
respective, care poate fi selectata
(bifata)
o checked - daca este adaugat
acest atribut, caseta radio respectiva
este selectata (bifata).
Casete pentru upload
• - "file upload" este folosit pentru a

permite utilizatorului sa incarce alte documente
pe serverul web. Aceasta caseta este insotita
de un buton "Browse" prin care se alege
documentul care va fi transferat pe server.
(upload-ul se face tot prin intermediul unui
script (PHP, CGI)
type="file"></input>

atribute:
o type - file
o name - numele casutei upload,
datele
upload.
Buton simplu
• - acesta este folosit cu JavaScript sau

VBScript pentru a efectua o actiune când este
apasat
• - Codul este <input type="button"
value="Buton"></input>

atribute:
o type - button
o name - numele butonului,
necesar pentru a fi folosit de script
o value - textul care apare pe
buton.
Buton Submit
• - acest element face ca prin apasarea lui

browser-ul sa trimita numele si valoarea tuturor
celorlalte elemente din formular la scriptul de
pe server
• - Codul este <input type="submit"
value="Trimite"></input>
Trimite

atribute:
o type - submit
o name - numele butonului, poate
fi folosit de scriptul la care se trimit
datele
buton.
Imagine pentru buton Submit
• - permite aplicarea unei imagine in locul

butonului Submit standard
• - Codul este <input type="image"
src="locatie_imagine"></input>
atribute:
o type - image
o name - numele butonului, poate
fi folosit de scriptul la care se trimit
datele
o src - locatia imaginii folosite.
Buton Reset
• - permite utilizatorului sa stearga toate

datele pe care le-a scris in celelalte elemente
din formular
• - Codul este <input type="reset"
value="Sterge"></input>
Sterge

atribute:
o type - reset
buton.
Elemente select
• - pentru acest element se foloseste tag-
ul "<select></select>", care formeaza o lista,
un meniu, cu date ce pot fi selectate.
• - Atributete elementului "<select>"
sunt:
o name - numele acestui element,
necesar pentru a fi folosit de scriptul la
care sunt trimise datele
o size - seteaza inaltimea
elementului Select, care reprezinta si
numarul de optiuni din lista care vor fi
vizibile initial
o multiple - prezenta acestui
atribut specifica faptul ca utilizatorul
poate selecta mai multe optiuni.
• - "<select></select>" este folosit
impreuna cu elemente "<option> </option>"
care reprezinta lista elementelor ce sunt
adaugate si afisate in lista de selectare.
• - <option> </option> foloseste doua
atribute:
o selected - cand acesta este
adaugat, optiunea respectiva este
selectata când pagina web este initial
incarcat. Cand sunt adaugate mai
multe optiuni, este indicat folosirea
acestui atribut doar cu una singura.
o value - specifica valoarea
variabilei numita in optiunea
respectiva (necesara pt. scriptul care
va primi datele).
• - sunt doua tipuri de elemente Select,
unde diferenta o face folosirea atributului SIZE
• - Cele doua tipuri de elemente Select
sunt:
•
1. Drop Down List (Lista de derulare)
o - Codul este:
<select name="select">
<option>Optiune 1</option>
</select>
o - unde "name" este atributul care
defineste numele acestui tag SELECT,
iar "<option>" impreuna cu "Optiune
1" (si 2) reprezinta elementele din lista
de selectare.
• 2. List Box
o - Codul este:
<select name="select" size="4">
</select>
o - unde "name" este atributul care
defineste numele acestui tag SELECT,
atributul "size" determina inaltimea
elementului select care determina si
numarul de optiuni vizibile initial, iar
"<option>" impreuna cu "Optiune 1"
(si 2) reprezinta elementele din lista
de selectare.
- Toate aceste elemente trebuie incadrate in tag-ul "<form> ...

</form>"!- Lectia 11
Elemente speciale meta, embed, marquee, object
Codul HTML contine si anumite elemente speciale,

unele folosite pentru optimizarea paginii in vederea
unei cat mai bune indexari in motoarele de cautare sau
altele pentru adaugarea de aplicatii audio si video ori
alte elemente in pagina.
1. Elemente pentru optimizarea indexarii

paginii
Aceste elemente de optimizare se adauga in
sectiunea HEAD a documentului HTML.
Cel mai important este tag-ul <title></title>
Alte elemente importante pentru motoarele de cautare
sunt cele META, (numite si "meta tag-uri), acestea au 2
atribute: name (care determina tipul meta tag-ului) si
content (care determina continutul meta tag-ului).
In continuare sunt prezentate exemple de meta tag-uri
care sunt indicate sa fie adaugate in fiecare pagina
HTML:
<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>

• - indica browserului ca este un fisier
HTML
• - charset stabileste tipul de caractere (in
general se foloseste ISO-8859-1 sau UTF-8), dar
exista si altele.
<meta name="description" content="O fraza care descrie pe scurt

continutul paginii">
• - in cazul unei cautari dupa cuvinte-

cheie, motorul de cautare ne da o lista de
pagini; pentru fiecare pagina (site) din lista
apare titlul ei (dat cu marcajul TITLE) urmat de
o fraza (cea de la name="description"
content="o fraza care descrie ..."); daca nu
avem in marcajul META acea fraza, motorul va
indexa dupa prima fraza din pagina; tot ea va fi
data la o eventuala cautare.
• - textul adaugat cu acest tag pentru
descriere are prioritate inaintea frazelor din
continut. (folositi maxim 40, 50 caractere).
<meta name="keywords" content="lista, de cuvinte, separate, prin,

virgula">
• - motoarele de cautare tin cont de

cuvintele din meta "keywords" in momentul
indexarii site-ului pentru atunci cand sunt
afisate rezultate de cautari. (folositi maxim 15-
20 cuvinte).
<meta name="author" content="numele dvs., e-mail, etc">
• - acesta nu este neaparat necesar, dar

nu strica sa-l folositi. Arata autorul
documentului.
Recomandare: Cuvintele din tag-ul <title> ... </title> este bine sa se

regaseasca si in meta tag-urile "keywords", "description" cat si in
titlurile din continutul paginii.
Un alt meta tag care este cateodata necesar, dar nu are legatura cu motoarele
de cautare, este "Refresh", acesta are urmatoarea forma:
<meta http-equiv="Refresh"
content="4;url=http://www.nume_site/pagina">
• - acesta determina browser-ul sa incarce
o noua pagina, cea care este adaugata la url-ul
din acest tag (aici
http://www.nume_site/pagina), dupa un anumit
numar de secunde (aici 4). Practic, face un
redirect.
2. Adaugarea de sunet la o pagina HTML

Pentru a adauga sunet intr-o pagina web, puteti
folosi elementele <embed> sau <bgsound>:
1. <bgsound></bgsound> - introduce un
background (fundal) audio in pagina, are urmatoarele
atribute:
• src - Defineste locatia fisierului audio

folosit (midi .au sau wav)
• loop - defineste de cate ori se va repeta
sunetul
• delay - defineste timpul dintre repetari
• title - Textul care va descrie sunetul.
Exemplu:
<bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5">
2. <embed></embed> - afiseaza o consola pentru sunet, are urmatoarele

atribute:
• src - Defineste locatia fisierului audio

folosit (midi .au sau wav)
• controls - ofera posibilitatea alegerii
mai multor controale care includ: console,
console mici, butoane de play si altele
• autostart - cand este TRUE sunetul
incepe in timp ce sunetul este descarcat de
browser
• hidden - cand este TRUE va ascunde
controalele, standard este FALSE
• loop - defineste de cate ori se va repeta
sunetul
• volume - seteaza volumul sunetului
(sonorul)
• height - inaltimea in pixeli a consolei
• width - lungimea in pixeli a consolei.
Exemplu:
<embed src="sunet.midi" width="145"height="60" autostart="truie"
volume"100" controls="console" hidden="false">
- Tag-ul "<embed>" poate fi folosit si pentru afisarea de imagini video, care au

extensiile ".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adauga
similar ca si sunetul, la "src" scriti calea catre fisierul video. Diferenta e ca nu
trebuie folosit atributul "hidden" iar pentru "width" si "height" dimensiunile nu
trebuie sa fie mai mici decat dimensiunile in care este salvat fisierul video.
- Totusi, afisarea de imagini video necesita mai mult timp deoarece fisierele
video au dimensiuni destul de mari.
-- "<embed>" se foloseste si pentru adaugarea de imagini flash (cu extensia

".swf"), pentru aceasta este incadrat in alt element, <object> </object>
-- Iata un exemplu de cod prin care puteti adauga imagini flash in pagina web:
<object width="580" height="400">
<param name="movie" value="fisier.swf">
<embed src="fisier.swf" width="580" height="400">
</embed>
</object>
Unde "width" si "height" sunt dimensiunile cadrului in care este afisata imaginea
flash, iar la atributele "value" si "src" se scrie calea catre fisierul ".swf" (trebuie
scrisa aceeasi cale la ambele atribute).
- Afisarea in pagina a elementelor cu EMBED necesita folosirea unui

plug-in, care de cele mai multe ori, daca acesta nu este deja instalat,
este ceruta automat incarcarea lui de catre browser.
3. Elemente de animatie text

HTML are un tag special, <marquee>
</marquee>, prin care puteti crea un efect de
miscare a unui text (sau imagine) care este incadrat de
a cest element.
Are urmatoarele atribute:
• loop - defineste de cate ori se va misca

textul
• height - inaltimea in pixeli a zonei in
care se misca textul
• width - lungimea in pixeli a zonei in
care se misca textul
• bgcolor - culoarea zonei in care se
misca textul
• direction - directia de miscare (left,
right, up, down) - (stanga, dreapta, sus, jos)
• behavior - defineste cum se va misca
textul (scroll, slide, alternate)
• scrolldelay - seteaza numarul, in
milisecunde, intre refreshuri de miscare.
Exemplu de miscare pe orizontala

<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee
text</marquee>
In pagina va arata asa:
Iata un alt exemplu unde miscarea se face pe verticala:
<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"
height="100">Marquee text</marquee>
In pagina va arata asa:
- In loc de text poate fi folosit si o imagine, inlocuind textul (aici "Marquee text")
cu tagul "<img> pentru imagine.
4. Includerea unei pagini HTML externe

In afara de modalitatea cu folosirea tag-ului
<iframe> pentru afisarea in pagina web HTML a
continutului din alta pagina HTML
Ex.: <iframe src="url_pagina.html"
width="600" height="200" align="center"
scrolling="yes"> </iframe>
- exista si o alta solutie, data de tag-ul <object>
folosit cu atributele "data" si "type".
Urmatorul cod HTML este sintaxa generala de afisare
intr-o pagina web a continutului HTML aflat in alta
pagina externa:
<object data="adresa_pagina_externa" type ="text/html" width="600"
height="400"> </object>
- Avantajul utilizarii uneia din aceste 2 metode, pentru cei care fac site-uri doar
cu HTML, este faptul ca acelasi continut HTML poate fi inclus in mai multe pagini
din site, fiind scris o singura data. De exemplu, in cazul unui Meniu ce trebuie
afisat in toate paginile site-ului; codul acestuia poate fi scris intr-un fisier special
("meniu.html") apoi, cu una din formulele de mai sus (tag-ul "<iframe>" sau
"<object>") se adauga in fiecare fisier al paginilor, iar la o eventuala modificare
a meniului se va face doar in codul acestuia din "meniu.html".- Lectia 12
Stiluri CSS in HTML
Cu HTML 4.0 au aparut specificatiile pentru modele

de stiluri, cunoscute ca Modele de Stiluri in Cascada
(Cascading Style Sheets - CSS). Acestea ajuta la
afisarea grafica si incadrarea continutului in pagina.
Pana la acea data, forma, culoarea si marimea textului
puteau fi date cu instructiunea "font" si cu atributele
sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricarei
etichete HTML, folosind proprietati si valori specifice
codului CSS, unele din ele sunt prezentate in tabelul de
jos al paginii.
Modelele de stiluri pot fi aplicate in mai multe moduri:
1. Intern - direct in eticheta HTML
• - Pentru adaugarea unui STYLE intern la

un element se foloseste atributul style urmat
de proprietati si valori, folosind urmatoarea
sintaxa:
o <element
style="proprietate:valoare;
proprietate:valoare;"></element>
• - Exemplu:
<h4 style="color:#ff1111;">Exemplu
h4</h4>
• In pagina va apare
Exemplu h4
2. In antetul (header-ul) fisierului
• - In acest caz se adauga in sectiunea

HEAD a documentului HTML urmatoarea
sintaxa <style type="text/css"> ...
</style>. Aceasta spune browser-ului ca sunt
adaugate elemente de stil CSS.
• - Aceasta metoda este utila cand se
doreste folosirea acelorasi stiluri pentru mai
multe elemente din pagina astfel sunt scrise o
singura data si nu la fiecare element.
• - Proprietatile si valorile de sti CSS se
introdul in acest element STYLE, dupa cum
puteti vedea in exemplul urmator:
<html>
<head>
<title>titlu</title>
<style type="text/css">

</style>
</head>
<body>
</body>
</html>
• - Conform acestui cod, toate textele

"h2" din pagina vor avea culoarea albastra si
vor fi subliniate.
• - Se foloseste (optional) ""
pentru browserele care nu recunosc elementul
"<style>" si astfel il ignora.
3. Extern
• - Aici proprietatile si valorile pentru

diverse stiluri sunt specificate intr-un fisier
extern special, de obicei cu extensia "css" (pe
care il putem construi cu un editor de simplu
texte gen Notepad).
• - Avantajul folosirii fisierelor externe CSS
este faptul ca aceleasi coduri de stil pot fi
folosite de mai multe pagini din site, chiar tot
site-ul, fiind scrise o singura data. In plus ajuta
la micsorarea ca marime (in bytes) a
documentului HTML care astfel se incarca mai
repede.
• - In fisierul extern CSS se scriu direct
elementele cu proprietatile si valorile dorite, NU
se mai adauga eticheta "style".
• Exemplu de model pentru creare unui
fisier ".css" :
• Se scrie intr-o pagina noua, deschisa cu
NotePad, urmatoarele, si se salveaza fisierul cu
extensia ".css"
a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}
a:visited {
color:#008080;
text-decoration:none;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
p{
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}
• Pentru a adauga acest stil CSS intr-o

pagina web, adaugati in sectiunea HEAD a
documentului HTML care va folosi acel fisier cu
stiluri, (intre <head> ... </head>) urmatoarea
comanda:
o <link href="fisier.css"
rel="stylesheet" type="text/css">
• - unde la "href" se scrie calea si numele
fisierului css folosit.
Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure
etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de tipuri
diferite. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor
HTML la care vrem sa aplicam un anumit stil.
Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class"
pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru
un singur element HTML.
Exemplu pentru "class"
<html>
<head>
<title>Titlul</title>

</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>
- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom
adauga comanda class="cuvant", celelalte elemente nefiind afectate.
• Important: selectorul (aici "cuvant")

in STYLE trebuie sa inceapa cu punct (.)
Exemplu pentru "id"

<html>
<head>

</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>
- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul
element "h2" care contine 'id="idh"'
• Important: Pentru stilurile definite

de ID, selectorul (aici "idh") trebuie sa
inceapa cu #.
Incercati singuri aceste exemple pentru a vedea rezultatul.
In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate
cu STYLE
Atribut Descriere Valori
URL-ul (imaginii) sau culori date prin
background imagini sau culori de fundal
nume sau valoare RGB
Color culoarea textului nume sau valoare RGB
font-family tipul fontului Numele fontului sau al familiei de
fonturi
data in puncte(pt), inch(in),
font-size dimensiunea fontului
centimetri(cm), pixeli(px)
font-style text cursiv normal, italic
extra-light, light, demi-light, medium,
font-weight grosimea fontului
demi-bold, bold, extra-bold
distanta dintre liniile de baza ale data in puncte(pt), inch(in),
line-height
randurilor centimetri(cm), pixeli(px), procent(%)
distanta fata de marginea din data in puncte(pt), inch(in),
margin-left
stanga a paginii centimetri(cm), pixeli(px)
distanta fata de marginea din data in puncte(pt), inch(in),
margin-right
dreapta a paginii centimetri(cm), pixeli(px)
distanta fata de textul precedent
margin-top sau fata de marginea de sus a
paginii
left(stanga), center(centru),
text-align alinierea textului
right(dreapta), justify
text- none(nimic), underline(subliniat),
evidentierea textului
decoration italic(cursiv), line-through(taiat)
distanta primului rand fata de data in puncte(pt), inch(in),
text-indent
marginea din stanga centimetri(cm), pixeli(px)
none, groove, dotted, dashed, solid,
border-style tipul chenarului
double, ridge, inset, outset
border-width grosimea chenarului
border-color culoarea chenarului nume sau valoare RGB
72 pt=1 inch = 25,4 mm;
un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea superioara a literei N
sau h si partea inferioara a literei y sau j
- Pentru aplicarea unui stil css asupra unei portiuni dintr-un text, se foloseste
eticheta <span> </span>, ca in exemplu urmator:
O fraza <span class="cls"> cu orice text</span> si caractere.
- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta
doar portiunea de text inclusa intre tag-ul "<span>".
Pentru mai multe informatii despre lucru cu stiluri

CSS, studiati lectiile de la Curs CSS.
DIV si SPAN
Tag-urile <div></div> si <span></span> nu au
efecte importante daca sunt folosite singure.
- Tag-ul DIV creaza sectiuni de blocuri in pagina, al

caror forma si grafica de continut pot fi manipulate
pentru fiecare separat. Are doar un singur atribut
HTML, align (pt. aliniere pe orizontala) care poate
avea urmatoarele valori: left (stanga), right (dreapta),
center (centru), justify (distanta textului fata de
margini egala).
- Tag-ul SPAN creaza posibilitatea modificarii separate

a unei portiunii dintr-un context, putand fi folosit si ca
o "classa" cu CSS. Singur nu are nici un efect vizual
poropriu si nu foloseste nici un atribut HTML special.
Chiar daca folosite singure, DIV si SPAN nu au nici un

efect major, in combinatie cu CSS pot crea aspecte
grafice importante. Pentru aceasta, ambele pot folosi
atributul style (cu proprietati CSS) ori atributele id sau
class ca identificator pentru stiluri CSS.
1. Tag-ul DIV
Tag-ul <div></div> este unul din cele mai folosite
elemente HTML, aceasta deoarece in combinatie cu
proprietati CSS poate crea efecte grafice deosebite, iar
in interiorul lui pot fi incluse oricare elemente HTML:
tabele, formulare, marcatori, linii sau alte DIV-uri.
Cadrul in care acestea sunt adaugate poate avea
propriul fundal (background), lungime, inaltime si
margini cu diferite linii.
Iata un exemplu in care avem 2 div-uri, unul contine un
formular iar celalalt o lista "<ul></ul>", fiecare DIV cu
proria culoare de fundal, dimensiuni stabilite si margini
diferite.
<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
Nume: <input type="text"></input><br>
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>
- In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul
grafic al fiecarui DIV (lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:
Nume:
E-mail:
Trimite
Alt DIV
• Linie 1
• Linie 2
• Linie 3
Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul
tag-ului <div> </div> oriunde in pagina, folosind proprietati CSS precum:
• position - care poate lua valorile:

static, relative, fixed sau absolute (pt. mai
multe detalii vezi Pozitionare CSS).
• margin - care stabileste distanta dintre
marginea cadrului sectiunii (blocul) DIV si
elementele din jurul lui (pt. mai multe detalii
vezi Margini si chenare CSS).
Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus,
putem afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul:
<div style="position:relative; font-size:21px;">

<div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu
- Exemplu</div>
<div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu -
Exemplu</div>
<div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu -
Exemplu</div>
</div>
In acest exemplu avem un prim DIV cu atributul "style" in care avem o
proprietate de pozitionare relativa (pt. a pozitiona toate celelalte elemente pe
care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru
marimea textului. In interiorul acestui DIV avem alte 3 div-uri, pozitionate absolut
si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta div-urile
se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left",
iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div" va
apare in pagina web urmatorul rezultat:
- Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este

necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi,
pozitionare, margini, borduri, background) pe care le puteti invata la
Cursul CSS din acest site.
2. Tag-ul SPAN
Cu tag-ul <span></span> puteti adauga stiluri
grafice unei anumite portiuni dintr-un context. Pentru
aceasta trebuie folosit impreuna cu proprietati CSS
care pot fi adaugate printr-un atribut "style" in
interiorul etichetei "<span>" (sau in foi de stil).
Pentru a intelege mai bine, iata un exemplu in care se
scoate in evidenta anumite cuvinte dintr-un text.
Pentru aceasta incadram cuvintele respective intr-un
tag SPAN caruia ii adaugam proprietatile dorite, ca in
exemplul urmator.
Aceasta este o lectie din <span style="background:#88fe88; font-
weight:bold;">Cursul HTML</span> de pe MarPlo.net.
- Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN
pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul
continutului.
- Astfel, prin proprietatile adaugate in "style" (background:#88fe88; si font-
weight:bold;), in pagina web va fi afisat textul in felul urmator:
Aceasta este o lectie din Cursul HTML de pe MarPlo.net.
Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile

adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor
elementelor din pagina care sunt incadrate in tag-uri "<span></span>".
Iata un exemplu
<html>
<head>
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</head>
<body>
<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul
frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, in span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, in span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>
- Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din
sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile
"<span></span>" din document si le transmite aceleasi proprietati.
- Acest cod va afisa intr-o pagina web urmatorul rezultat:
Exemplu de text cu eticheta SPAN in

interiorul frazei.
• Linia 1
• Linie 2, in span
• Linia 3
• Linie 4, in span
• Linia 5
3. Diferenta dintre DIV si SPAN

- Diferenta dintre DIV si SPAN este faptul ca DIV
incadreaza o sectiune din document sub forma unui
bloc iar SPAN incadreaza o portiune din context sub
forma de linii.
Iata un exemplu din care se poate intelege mai bine,
atribuim aceeasi proprietate grafica (bordura rosie)
unui tag DIV si unui tag SPAN.'
<div style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</div>
<br>
- Acum cu SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
</span>
- In pagina web va apare
Fraza pe mai multe linii,

continua cu linia a doua,
- Acum cu SPAN:
Fraza pe mai multe linii,

continua cu linia a doua,
- Observati diferenta, modul in care este afisata bordura. Pentru DIV aceasta
incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este
afisata pe fiecare linie.
- De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din
interiorul unei linii.
- Cand aveti mai multe elemente <div></div> si
<span></span> in pagina, este indicat folosirea
atributului "id" sau "class". Acestora le acordati
proprietati CSS o singura data in sectiunea HEAD sau
intr-un fisier CSS extern. Este mai eficient decat sa
scrieti in fiecare "<div>" si "<span>" cate un atribut
"style".
Pentru mai multe detalii despre "ID" si "CLASS" folosite
cu CSS, puteti studia prima lectie de la Cursul CSS,
Scriere cod CSS.
De la HTML la XHTML
Explicatiile din acest tutorial sunt pentru cei care

cunosc deja limbajul HTML, prezentat detaliat in lectiile
si tutorialele precedente din acest curs.
XHTML (eXtensible HyperText Markup Language) are
acelasi rol si capacitati ca HTML, fiind o varianta
avansata a acestuia, dar cu o sintaxa putin diferita,
mai stricta.
XHTML este un inlocuitor modern al HTML-ului, o
combinatie intre HTML si XML, fiind aproape identic cu
HTML 4.01.
Principala diferenta ce trebuie avuta in vedere la
XHTML fata de HTML este la sintaxa acestuia.
Daca stiti deja limbajul HTML, respectand regulile de
sintaxa XHTML, prezentate mai jos, se poate spune ca
stiti si XHTML.
Reguli de sintaxa XHTML

1. - Pentru ca un document XHTML sa fie considerat valid, acesta trebuie sa aibe
la inceput (prima linie) o declaratie !DOCTYPE, un DTD (Document Type
Definitions) ce contine regulile standard ale elementelor din pagina.
Sunt 3 tipuri de DTD ce pot fi folosite: Strict, Transitional si Frameset. Iata cod-ul
specifc fiecaruia, ce trebuie sccris in prima linie din pagina:
• Strict - folosit pentru o sinntaxa stricta,

fara vreun element ce nu e specific XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
• Transitional - este tipul cel mai comun

si indicat. Acesta permite in pagina si elemente
HTML ce nu sunt stricte XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
• Frameset - mai putin folosit, acest tip e
pentru cazuri cand in pagina se folosesc frame-
uri.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd";>
Dupa una din aceste declaratii se adauga codul pentru structura documentului
XHTML, cum se vede in urmatorul exemplu (structura standard ce trebuie sa o
aibe o pagina de site XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titlul paginii</title>
<meta name="description" content="Descrierea paginii" />
<meta name="keywords" content="cuvinte, principale, din, pagina" />
</head>
<body>
Continutul paginii, care apare in fereastra navigatorului web.
</body>
</html>
2. - Toate elementele si atributele trebuie scrise cu litera mica.
• Corect: <div> Incorect: <DIV>

• Corect: <tag atribut="valoare">
Incorect: <tag Atribut="valoare">
3. - Valorile tuturor atributelor trebuie scrise intre ghilimele.
• Corect: <tag width="80">

• Incorect: <tag width=80>
4. - Spre deosebire de HTML, in care elementele sunt inchise cu un al doilea tag

(identic) de inchidere, iar unele nici nu trebuie sa aibe inchidere, in XHTML toate
elementele trebuie inchise si exista tag-uri specifice care au inchidere singulara,
in acelasi tag.
In XHTML In HTML
<meta ... /> <meta ...>
<br /> <br>
<hr /> <hr>
<input /> <input>
<img ... /> <img ...>
- Celelalte, precum <p> </p>, <div> </div>, <span> </span>, ... etc. sunt la
fel.
5. - La inchiderea tag-urilor trebuie sa se respecte ordinea simetrica de

deschidere.
• Corect: <b>Ceva <i>altceva</i></b>

• Incorect: <b>Ceva
<i>altceva</b></i>
6. - Toate atributele trebuie sa fie insotite de o valoare. In HTML fiind atribute,

precum "checked", care sunt scrise fara vreo valoare. Iata cateva din cele mai
folosite:
In XHTML In HTML
checked="checked" checked
declare="declare" declare
readonly="readonly" readonly
disabled="disabled" disabled
selected="selected" selected
nowrap="nowrap" nowrap
noresize="noresize" noresize
7. - Atributul name din tag-urile <a> si <map> a fost inlocuit cu id.- Lectia 15
Coduri culori pentru site
Aici gasiti un tabel cu mai multe culori ce pot fi

utilizate in designul paginilor web, prin cod HTML si
CSS, dar si in alte aplicatii cum ar fi editoare de imagini
sau flash.
Fiecare culoare are 3 reprezentari: Denumirea (in
engleza), Cod Hexazecimal (perechi de numere de la
0 la 9 si litere de la A la F), Cod Decimal (numere de
la 0 la 255).
Astfel, puteti utiliza o culoare folosind oricare din cele
3 reprezentari. Daca nu stiti cum, studiati exemplele
urmatoare:
De exemplu, daca doriti sa folositi intr-un stil o nuanta

de albastru deschis (luam DeepSkyBlue), puteti
adauga intr-un cod CSS una din urmatoarele expresii,
folosind denumirea culorii, codul hexa sau cel decimal
(pentru hexadecimal se adauga in fata caracterul # iar
pentru decimal se foloseste sintaxa rgb(r, g, b); )
color: DeepSkyBlue;
color: #00BFFF;
color: rgb(0, 191, 255);
In general asa se folosesc aceste coduri de culori, de exemplu, pentru cod HTML
la "font" (aici nu se foloseste decimal):
<font color="DeepSkyBlue">Text de culoare DeepSkyBlue</font>
<font color="#00BFFF">Text de culoare DeepSkyBlue</font>
Iata inca un exemplu pt. CSS, cu proprietatea "background-color", de data asta o

culoare spre verde (am ales SpringGreen)
background-color: SpringGreen;
background-color: #00FF7F;
background-color: rgb(0, 255, 127);
Tabel Culori
Cod Hexadecimal Cod Decimal
Nume culoare (en.)
R G B R G B
Culori cu fond Rosu
IndianRed CD 5C 5C 205 92 92
LightCoral F0 80 80 240 128 128
Salmon FA 80 72 250 128 114
DarkSalmon E9 96 7A 233 150 122
LightSalmon FF A0 7A 255 160 122
Crimson DC 14 3C 220 20 60
Red FF 00 00 255 0 0
FireBrick B2 22 22 178 34 34
DarkRed 8B 00 00 139 0 0
Culori cu fond Roz
Pink FF C0 CB 255 192 203
LightPink FF B6 C1 255 182 193
HotPink FF 69 B4 255 105 180
DeepPink FF 14 93 255 20 147
MediumVioletRed C7 15 85 199 21 133
PaleVioletRed DB 70 93 219 112 147
Culori cu fond Portocaliu
LightSalmon FF A0 7A 255 160 122
Coral FF 7F 50 255 127 80
Tomato FF 63 47 255 99 71
OrangeRed FF 45 00 255 69 0
DarkOrange FF 8C 00 255 140 0
Orange FF A5 00 255 165 0
Culori cu fond Galben
Gold FF D7 00 255 215 0
Yellow FF FF 00 255 255 0
LightYellow FF FF E0 255 255 224
LemonChiffon FF FA CD 255 250 205
LightGoldenrodYellow FA FA D2 250 250 210
PapayaWhip FF EF D5 255 239 213
Moccasin FF E4 B5 255 228 181
PeachPuff FF DA B9 255 218 185
PaleGoldenrod EE E8 AA 238 232 170
Khaki F0 E6 8C 240 230 140
DarkKhaki BD B7 6B 189 183 107
Culori cu fond Purpuriu (mov)
Lavender E6 E6 FA 230 230 250
Thistle D8 BF D8 216 191 216
Plum DD A0 DD 221 160 221
Violet EE 82 EE 238 130 238
Orchid DA 70 D6 218 112 214
Fuchsia FF 00 FF 255 0 255
Magenta FF 00 FF 255 0 255
MediumOrchid BA 55 D3 186 85 211
MediumPurple 93 70 DB 147 112 219
BlueViolet 8A 2B E2 138 43 226
DarkViolet 94 00 D3 148 0 211
DarkOrchid 99 32 CC 153 50 204
DarkMagenta 8B 00 8B 139 0 139
Purple 80 00 80 128 0 128
Indigo 4B 00 82 75 0 130
Nume culoare (en.) Cod Hexadecimal Cod Decimal RGB
RGB
Culori cu fond Verde
GreenYellow AD FF 2F 173 255 47
Chartreuse 7F FF 00 127 255 0
LawnGreen 7C FC 00 124 252 0
Lime 00 FF 00 0 255 0
LimeGreen 32 CD 32 50 205 50
PaleGreen 98 FB 98 152 251 152
LightGreen 90 EE 90 144 238 144
MediumSpringGreen 00 FA 9A 0 250 154
SpringGreen 00 FF 7F 0 255 127
MediumSeaGreen 3C B3 71 60 179 113
SeaGreen 2E 8B 57 46 139 87
ForestGreen 22 8B 22 34 139 34
Green 00 80 00 0 128 0
DarkGreen 00 64 00 0 100 0
YellowGreen 9A CD 32 154 205 50
OliveDrab 6B 8E 23 107 142 35
Olive 80 80 00 128 128 0
DarkOliveGreen 55 6B 2F 85 107 47
Aquamarine 7F FF D4 127 255 212
MediumAquamarine 66 CD AA 102 205 170
DarkSeaGreen 8F BC 8F 143 188 143
LightSeaGreen 20 B2 AA 32 178 170
DarkCyan 00 8B 8B 0 139 139
Teal 00 80 80 0 128 128
Culori cu fond Albastru
Aqua 00 FF FF 0 255 255
Cyan 00 FF FF 0 255 255
LightCyan E0 FF FF 224 255 255
PaleTurquoise AF EE EE 175 238 238
Turquoise 40 E0 D0 64 224 208
MediumTurquoise 48 D1 CC 72 209 204
DarkTurquoise 00 CE D1 0 206 209
CadetBlue 5F 9E A0 95 158 160
SteelBlue 46 82 B4 70 130 180
LightSteelBlue B0 C4 DE 176 196 222
PowderBlue B0 E0 E6 176 224 230
LightBlue AD D8 E6 173 216 230
SkyBlue 87 CE EB 135 206 235
LightSkyBlue 87 CE FA 135 206 250
DeepSkyBlue 00 BF FF 0 191 255
DodgerBlue 1E 90 FF 30 144 255
CornflowerBlue 64 95 ED 100 149 237
MediumSlateBlue 7B 68 EE 123 104 238
RoyalBlue 41 69 E1 65 105 225
Blue 00 00 FF 0 0 255
MediumBlue 00 00 CD 0 0 205
DarkBlue 00 00 8B 0 0 139
Navy 00 00 80 0 0 128
MidnightBlue 19 19 70 25 25 112
Cod Hexadecimal
Nume culoare (en.) Cod Decimal RGB
RGB
Culori cu fond Maro
Cornsilk FF F8 DC 255 248 220
BlanchedAlmond FF EB CD 255 235 205
Bisque FF E4 C4 255 228 196
NavajoWhite FF DE AD 255 222 173
Wheat F5 DE B3 245 222 179
BurlyWood DE B8 87 222 184 135
Tan D2 B4 8C 210 180 140
RosyBrown BC 8F 8F 188 143 143
SandyBrown F4 A4 60 244 164 96
Goldenrod DA A5 20 218 165 32
DarkGoldenrod B8 86 0B 184 134 11
Peru CD 85 3F 205 133 63
Chocolate D2 69 1E 210 105 30
SaddleBrown 8B 45 13 139 69 19
Sienna A0 52 2D 160 82 45
Brown A5 2A 2A 165 42 42
Maroon 80 00 00 128 0 0
Culori cu fond Alb
White FF FF FF 255 255 255
Snow FF FA FA 255 250 250
Honeydew F0 FF F0 240 255 240
MintCream F5 FF FA 245 255 250
Azure F0 FF FF 240 255 255
AliceBlue F0 F8 FF 240 248 255
GhostWhite F8 F8 FF 248 248 255
WhiteSmoke F5 F5 F5 245 245 245
Seashell FF F5 EE 255 245 238
Beige F5 F5 DC 245 245 220
OldLace FD F5 E6 253 245 230
FloralWhite FF FA F0 255 250 240
Ivory FF FF F0 255 255 240
AntiqueWhite FA EB D7 250 235 215
Linen FA F0 E6 250 240 230
LavenderBlush FF F0 F5 255 240 245
MistyRose FF E4 E1 255 228 225
Culori cu fond Gri
Gainsboro DC DC DC 220 220 220
LightGrey D3 D3 D3 211 211 211
Silver C0 C0 C0 192 192 192
DarkGray A9 A9 A9 169 169 169
Gray 80 80 80 128 128 128
DimGray 69 69 69 105 105 105
LightSlateGray 77 88 99 119 136 153
SlateGray 70 80 90 112 128 144
DarkSlateGray 2F 4F 4F 47 79 79
Black 00 00 00 000
Caractere speciale - secvente escape

In tabelul din aceasta pagina este o lista cu mai
multe caractere speciale (simboluri, diacritice si
caractere specifice altor limbi straine) si codurile lor
specifice HTML si ISO.
Aceste caractere pot fi adaugate si afisate
corespunzator in orice pagina web, putand fi introduse
cu aceste coduri cunosute si cu denumirea de
Secvente Escape.
De exemplu:
- ca sa afisati in pagina simbolul © (copyright) se
adauga secventa escape © (sau codul ISO
©)
- ca sa afisati in pagina simbolul ½ (jumatate) se
adauga secventa escape ½ (sau codul ISO
½)
- pentru caracterul < (mai mic), ca browser-ul sa nu-
l confunde cu inceputul de tag, se poate folosi codul
<
Nume ISO Latin-

Nume Sintaxa Descriere
1
Aacute &Aacute &#193 A ascutit (Á)
aacute á á a ascutit (á)
Acirc Â Â A circumflex (Â)
acirc â â a circumflex (â)
acute ´ ´ accent grav (´)
AElig Æ Æ ligatura AE (Æ)
aelig æ æ ligatura ae (æ)
Agrave À À A grav (À)
agrave à à a grav (à)
amp & & ampersand (&)
Aring Å Å A cu inel (Å)
aring å å a cu inel (å)
Atilde Ã Ã A tilda (Ã)
atilde ã ã a tilda (ã)
Auml Ä Ä A umlaut (Ä)
auml ä ä a umlaut (ä)
brvbar ¦ ¦ bara intrerupta (¦)
Ccedil Ç Ç C sedila (Ç)
ccedil ç ç c sedila (ç)
cent ¢ ¢ cent (¢)
copy © © copyright (©)
curren ¤ ¤ valuta generala (¤)
deg ° ° grad (°)
&div;
div ÷ impartire (÷)
÷
Eacute É É E ascutit (É)
eacute é é e ascutit (é)
Ecirc Ê Ê E circumflex (Ê)
ecirc ê ê e circumflex (ê)
Egrave È È E grav (È)
egrave è è e grav (è)
emdash &emdash; nedefinit em dash (&emdash)
emsp &emsp; nedefinit em spatiu ( )
endash &endash; nedefinit en dash (&endash;)
ensp &ensp; nedefinit en spatiu ( )
ETH Ð Ð Eth nordic (Ð)
eth ð ð eth nordic (ð)
Euml Ë Ë E umlaut (Ë)
euml ë ë e umlaut (ë)
frac12 ½ ½ jumatate (½)
frac14 ¼ ¼ sfert (¼)
frac34 ¾ ¾ trei sferturi (¾)
gt > nedefinit mai mare decât (>)
Iacute Í Í I ascutit (Í)
iacute í í i ascutit (í)
Icirc Î Î I circumflex (Î)
icirc î î i circumflex (î)
iexcl ¡ ¡ exclamatie inversata (¡)
Igrave Ì Ì I grav (Ì)
igrave ì ì i grav (ì)
iquest ¿ ¿ intrebare inversata (¿)
Iuml Ï Ï I umlaut (Ï)
iuml ï ï i umlaut (ï)
paranteza unghiularã dublã stângã
laquo « «
(«)
lt < < mai mic decât (<)
macr ¯ ¯ macron ( ¯ )
micro µ µ micro (µ)
middot · · punct la mijloc (·)
nbsp spatiu nonbreaking
not ¬ ¬ negatie (¬)
Ntilde Ñ Ñ N tilda (Ñ)
ntilde ñ ñ n tilda (ñ)
Oacute Ó Ó O ascutit (Ó)
oacute ó ó o ascutit (ó)
Ocirc Ô Ô O circumflex (Ô)
ocirc ô ô o circumflex (ô)
Ograve Ò Ò O grav (Ò)
ograve ò ò o grav (ò)
ordf ª ª ordinal feminin (ª)
ordm º º ordinal masculin (º)
Oslash Ø Ø O tãiat (Ø)
oslash ø ø o tãiat (ø)
Otilde Õ Õ O tilda (Õ)
otilde õ õ o tilda (õ)
Ouml Ö Ö O umlaut (Ö)
ouml ö ö o umlaut (ö)
para ¶ ¶ paragraf (¶)
plusmn ± ± plus minus (±)
pound £ £ lira sterlina (£)
quot " " ghilimele (")
paranteza unghiularã dublã dreapta
raquo » »
(»)
reg ® ® marca inregistrata (®)
sect § § semn sectiune (§)
shy soft hyphen ()
sup1 ¹ ¹ 1 superior (¹)
sup2 ² ² 2 superior (²)
sup3 ³ ³ 3 superior (³)
szlig ß ß sharp s (ß)
THORN Þ Þ Thorn nordic (Þ)
thorn þ þ thorn nordic (þ)
times × × inmultire (×)
trade ™ nedefinit trademark (™)
Uacute Ú Ú U ascutit (Ú)
uacute ú ú u ascutit (ú)
Ucirc Û Û U circumflex (Û)
ucirc û û u circumflex (û)
Ugrave Ù Ù U grav (Ù)
ugrave ù ù u grav (ù)
uml ¨ ¨ umlaut (¨)
Uuml Ü Ü U umlaut (Ü)
uuml ¨ ü u umlaut (ü)
Yacute Ý Ý Y ascutit (Ý)
yacute ý ý y ascutit (ý)
yen ¥ ¥ yen (¥)
yuml ÿ ÿ y umlaut (ÿ)
XHTML - Tag-uri si atributele lor
In aceasta pagina gasiti o lista, clasificata pe grupe de elemente cu tag-urile

XHTML si atributele ce po fi folosite pentru fiecare TAG.
Aceasta lista poate fi de folos mai ales cand doriti sa creati pagini web valide
XHTML (Transitional), oferind o referinta la ce atribute pot fi folosite cu un anume
TAG.
- Structura
<html> </html> - Tag-ul radacina, ce contine toate celelalte tag-uri si indica
browser-ului ca acesta este inceputul /sfarsitul documentului (X)HTML.
• xmlns
• dir
• lang
• xml:lang
<head> </head> - Contine meta informatii (meta-tags), tag-ul "<title>

</title>" si alte tag-uri pt. scripturi si stiluri CSS. Toate acestea, cu exceptia
Titlului, nu sunt afisate de navigatorul web.
• xml:lang
• profile
<body> </body> - In acest tag se adauga continutul ce va fi afisat in pagina
web. Acest continut poate fi alcatuit si din alte tag-uri, prezentate in continuare.
• class
• id
• style
• title
• onmousedown
• onmouseover
• onkeypress
• onkeyup
• onmouseup
• onload
- Tag-uri ce pot fi incluse in zona <head>

<title> </title> - Contine Titlul ce va fi afisat in bara de sus a browser-ului.
• xml:lang
<meta /> - Adauga meta informatii despre document, precum: descriere,

cuvinte cheie, autor, si altele.
• name
• content
• http-equiv
• xml:lang
• scheme
<link /> - Este folosit in tag-ul <head> pentru a face legatura cu (sau a include)
o resursa externa, in general CSS (Cascading Style Sheet).
• class
• id
• style
• title
• href
• xml:lang
• hreflang
• charset
• type
• rel
• rev
• media
<style> </style> - Este folosit pentru a defini proprietati de stil CSS pentru
elementele din pagina.
• type
• media
• dir
• title
• lang
• xml:lang
- Text
<span> </span> - O sectiune in document, fara linie noua la inceput si sfarsit.
Singur nu face nimic, de aceea este adesea folosit cu un "id" sau "class" pentru
ca sa-i fie aplicate proprietati CSS.
• class
• id
• style
• title
• xml:lang
<div> </div> - O sectiune in document, un cadru cu linie noua inainte si dupa

el. Singur nu face nimic, de aceea este adesea folosit cu un "id" sau "class"
pentru ca sa-i fie aplicate proprietati CSS.
• class
• id
• style
• title
• xml:lang
<p> </p> - Un paragraf cu o linie noua in plus inainte si dupa el.
• class
• id
• style
• title
• xml:lang
<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> si
<h6> </h6> - Folosit in general pentru titluri si sub-titluri in pagina web. Textul
apare ingrosat si mare pt. "<h1>", descrescand treptat pana la "<h6>".
• class
• id
• style
• title
• xml:lang
<br /> - Adauga o linie noua dupa el.
• class
• id
• style
• title
<blockquote> </blockquote> - Acest Tag poate fi folosit pentru citate /fraze

lungi. Cadrul definit de acesta lasa un anumit spatiu in exterior (stanga si
dreapta).
• class
• id
• style
• title
• xml:lang
• cite
<q> </q> - In acest tag se adauga de obicei fraze scurte, citate, ce vor fi afisate
intre ghilimele.
• class
• id
• style
• title
• xml:lang
• cite
<code> </code> - Poate fi folosit pentru a prezenta coduri de program, textul

fiind afisat distinct pt. acest tip.
• class
• id
• style
• title
• xml:lang
<u> </u> - Afiseaza textul subliniat.
• class
• id
• style
• title
• xml:lang
<i> </i> - Afiseaza textul inclinat.
• class
• id
• style
• title
• xml:lang
<b> </b> - Afiseaza textul ingrosat.

• class
• id
• style
• title
• xml:lang
<strong> </strong> - Afiseaza textul ingrosat (similar cu <b>).
• class
• id
• style
• title
• xml:lang
<em> </em> - Afiseaza textul inclinat (similar cu <i>).
• class
• id
• style
• title
• xml:lang
<sup> </sup> - Afiseaza textul in partea de sus a liniei randului, si mai mic.
• class
• id
• style
• title
• xml:lang
<sub> </sub> - Afiseaza textul in partea de jos a liniei randului, si mai mic.
• class
• id
• style
• title
• xml:lang
<a> </a> - Creaza o legatura catre alta pagina web sau zona din pagina
curenta (link intern).
• class
• id
• style
• title
• xml:lang
• accesskey
• charset
• type
• href
• hreflang
• onblur
• rev
• rel
• shape
• coords
• tabindex
• onfocus
• onclick
- Liste
<ol> </ol> - Tag folosit pentru afisarea unei liste ordonate, numerotate.
• class
• id
• style
• title
• xml:lang
<ul> </ul> - Tag utilizat pentru afisarea unei liste neordonate numeric, ci cu
simboluri gen: disc, cerc, patrat.
• class
• id
• style
• title
• xml:lang
<li> </li> - Defineste un element in liste <ol> sau <ul>, fiind adaugat in cadrul
acestora.
• class
• id
• style
• title
• xml:lang
<dl> </dl> - Creaza o lista de definitii. Trebuie sa contina tag-urile <dt> si

<dd>.
• class
• id
• style
• title
• xml:lang
<dt> </dt> - Defineste un termen pentru lista de definitii.

• class
• id
• style
• title
• xml:lang
<dd> </dd> - Se adauga in cadrul tag-ului <dt> si prezinta lista de definitii

pentru termenul definit de acel tag.
• class
• id
• style
• title
• xml:lang
- Obiecte
<object> </object> - Folosit pentru a include in pagina elemente multimedia.
• class
• id
• style
• title
• xml:lang
• usemap
• name
• height
• width
• classid
• codebase
• data
• type
• codetype
• standby
• tabindex
• archive
<param /> - Este adaugat in cadrul tag-ului <object> si e folosit pentru a

trimite parametri la obiectul respectiv, inclus in pagina XHTML.
• value
• type
• valuetype
• id
• name
- Tabele
<table> </table> - Defineste un tabel in care pot fi adaugate randuri, coloane,
titluri, celule de tabel.
• class
• id
• style
• title
• xml:lang
• border
• align
• summary
• width
• dellpadding
• cellspacing
• frame
• rules
<thead> </thead> - Defineste zona de Header (Antet) a tabelului, unde se pot

include linii si coloane.
• class
• id
• style
• title
• xml:lang
• char
• charoff
• align
• valign
<tfoot> </tfoot> - Defineste zona de subsol a tabelului, unde se pot include

linii si coloane.
• class
• id
• style
• title
• xml:lang
• char
• charoff
• align
• valign
<tbody> </tbody> - Defineste corpul tabelului, unde se pot include linii si

coloane.
• class
• id
• style
• title
• xml:lang
• char
• charoff
• align
• valign
<tr> </tr> - Creaza o linie noua in tabel, in care se includ coloane.
• class
• id
• style
• title
• xml:lang
• char
• charoff
• align
• valign
<th> </th> - Se foloseste pt. celule cu titlu pentru coloane. Afiseaza un scris
mai ingrosat.
• class
• id
• style
• title
• xml:lang
• axis
• abbr
• headers
• rowspan
• colspan
• scope
• char
• charoff
• align
• valign
<td> </td> - Se foloseste pt. a crea coloane si celule in randurile tabelului.

Trebuie adaugat in cadrul tag-ului <tr>.
• class
• id
• style
• title
• xml:lang
• axis
• abbr
• headers
• rowspan
• colspan
• scope
• char
• charoff
• align
• valign
<caption> </caption> - Defineste un titlu pentru tabel. Acest tag trebuie

adaugat imediat dupa eticheta <table> si poate fi adaugat doar unul singur.
• class
• id
• style
• title
• xml:lang
- Formular
<form> </form> - Incepe crearea unui formular in care pot fi incluse diferite
casute si butoane.
• class
• id
• style
• title
• xml:lang
• action
• enctype
• method
• onsubmit
• onreset
• accept
• accept-charset
<label /> - Defineste o eticheta ce va corespunde unei casute de formular a

carui "id" e adaugat in atributul "for". Cand se da click pe textul din eticheta sa,
comuta controlul la acea casuta de formular.
• class
• id
• style
• title
• xml:lang
• for
• accesskey
• onfocus
• onblur
<input /> - Adauga o casuta in formular, specificata la atributul "type".
• class
• id
• style
• title
• xml:lang
• name
• value
• checked
• disabled
• readonly
• size
• maxlenght
• src
• alt
• usemap
• tabindex
• accesskey
• accept
• onfocus
• onblur
• onselect
• onchange
<select> </select> - Creaza o lista de selectare optiuni. Aceste optiuni sunt

adaugate cu tag-ul <option>.
• class
• id
• style
• title
• xml:lang
• name
• disabled
• multiple
• size
• tabindex
• onfocus
• onblur
• onchange
<option> </option> - Adauga lista cu optiuni in tag-ul <select>.
• class
• id
• style
• title
• xml:lang
• disabled
• selected
• label
• value
<textarea> </textarea> - Creaza un camp pentru adaugare de text.

• class
• id
• style
• title
• xml:lang
• name
• disabled
• rows
• cols
• readonly
• tabindex
• accesskey
• onfocus
• onblur
• onchange
• onselect
- Alte tag-uri
<img /> - Include o imagine in documentul XHTML.
• class
• id
• style
• title
• src
• alt
• height
• width
• xml:lang
• longdesc
• usemap
• ismap
<script> </script> - Folosit pentru a adauga un script in document, de obicei

JavaScript.
• type
• src
• defer
• charset
• xml:lang
<noscript> </noscript> - Afiseaza textul din el daca browserul nu stie sa

lucreze cu un anumit script.
• class
• id
• style
• title
• xml:lang

Limbă

Bine ați venit la Scribd!

html

Încărcat de

Informații document

Data încărcării

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?

Descriere:

Drepturi de autor:

Formate disponibile

html

Încărcat de

Descriere:

Drepturi de autor:

Formate disponibile

Titluri conexe

Introducere

HTML (HyperText Markup Language) este un limbaj

Acest curs prezinta elementele de baza ale

Principalele elemente HTM L

1. Ce este HTML? (Hypertext Markup

2. Structura documentului HTML

Crearea si editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini

1. Crearea bazei de început a unui

2. Setarea proprietarilor documentului

• - Acestui element ii puteti adauga

• Link-uri (LINK, VLINK si ALINK)

Rezultatul va fi o pagina cu fondul alb,

• Folosirea unei imagini ca fond

In acest exemplu fondul pagini va fi

Titluri, Paragrafe, Un nou rând, Linie orizontala

1. Titluri <Hx> ... </Hx>

• - Pentru titluri din continutul

Mai jos puteti vedea exemplu:

2. Paragraf <p> ... </p>

Mai jos puteti vedea exemplu:

3. Un nou rand <br>

• - Tag-ul <br> permite sa decizi unde

Mai jos puteti vedea exemplu:

4. Linie orizontala <hr>

• - Acest element afiseaza o linie

Mai jos puteti vedea exemplu:

1. Tag-ul <FONT> ... </FONT>

• - Marimea textului poate fi modificata cu

<font size="+2"> Doua mărimi

<font face="Arial Black">Acesta este

• - Culoarea textului poate fi modificata cu

<font color="#00dd00">Acest text are

2. Bold, Italic, Underline si alte elemente

• - Bold (ingrosat) <b> ... </b>

Alte elemente folosite pentru formatul textului sunt:

4. Alte etichete HTML pentru formatul

• - <strike> Text taiat </strike>

• - <dfn> Defineste exemplu de termen

- Alte elemente pentru formatul textului:

• - <q> ... </q> - Folosit pentru citate

HTML contine cateva tag-uri utile pentru asezarea

1. Elementele pentru marcatori si

• - <ul> este elementul de început si

Mai jos puteti vedea exemplu.

• List item 1 ...

- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)

 List item 1 ...

Un alt element folosit pentru formarea listelor (ordonate) este <ol>.

• - <ol> ... </ol> este un element de

1. List item 1 ...

• - type="1" - stil: 1, 2, 3, ...

De asemenea se poate specifica numarul de inceput al numerotarii printr-o

a. List item 1 ...

2. Alte elemente pentru asezarea textului

• - <dl> ... </dl> este folosit (impreuna

Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea

Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare,