Introducere u00EEn HTML - CCS - Ro

Introducere n HTML i
CSS
Obiective
Realizarea unei descrieri a limbajului de marcare
HTML
ce este HTML
structura unui document HTML
elemente de baza HTML (tag-uri, atribute)
Realizarea unei descrieri a limbajului de stilizare CSS
stiluri n linie
stiluri interne
stiluri externe
clase CSS
Limbajul de marcare HTML

HTML (Hypertext Markup Language) este un limbaj de marcare care
st la baza dezvoltrii oricrei pagini Web.
Limbajul HTML const ntr-o serie de etichete (tag-uri) ce permit
formatarea modului de afare a informaiei din pagina Web
(folosirea unor anumite font-uri, culori i stiluri pentru text, inserarea
unor imagini sau a unor tabele, utilizarea listelor i a formularelor etc.).
Tag-urile HTML sunt incluse ntre paranteze ascuite <>, majoritatea
dintre ele fiind n pereche.
tag-ul de nceput <>
tag-ul de sfrit </>
Unele dintre tag-urile HTML permit precizarea unor caracteristici ale
elementului pe care l introduc, sub forma caracteristica=valoare,
aceste caracteristici fiind numite atribute. O etichet poate avea unul,
nici unul, sau mai multe atribute.
Coninutul unui document HTML nu este case-sensitive,

cu alte cuvinte nu se face diferena ntre litere mari i
mici.
La nivelul etichetelor i atributelor, valoarea unui atribut
poate fi case-sensitive (ex. n cazul locaiilor fiierelor i
adreselor URL).
Un document HTML este un fiier care are extensia .htm
sau .html. Pentru editarea textului unui document HTML
pot fi folosite orice tipuri de editoare, ncepnd cu
editoare simple cum ar fi Notepad, Textpad i ajungnd la
editoare mai complexe cum ar fi Macromedia
Dreamweaver.
Dou dintre trsturile de baz ale unui document HTML sunt independena
fa de platform i legturile hypertext (hyperlink-uri).
Independena fa de platform este o trstur care permite ca documentul
HTML s fie afiat n mod asemntor pe diferite calculatoare din punct de
vedere al graficii, fontului, culorii, lucru extrem de esenial pentru un numr
mare de vizitatori.
Interpretarea codului HTML poate s fie diferit n funcie de tipul de browser
Web utilizat. Astfel un document HTML poate fi afiat de ctre un browser
(ex. Internet Explorer) ntr-un anumit fel, iar de ctre alt browser (ex. Mozilla
Firefox) n alt fel.
Hyperlink-urile au o importan major n cadrul unui site Web, ntruct
permit ca orice cuvnt, fraz, imagine sau element al unei pagini Web s fac
referire la o alt pagin Web sau chiar la paragrafe din interiorul aceleiai
pagini, realizndu-se astfel navigarea cu uurin ntre paginile unui site Web
sau ntre prile componente ale aceleiai pagini.
Etape parcurse pentru crearea i accesarea unei

pagini Web
se editeaz coninutul documentului HTML (paginii
Web) cu un editor de text
se salveaz fiierul astfel creat cu extensia .htm sau
.html
se acceseaz fiierul respectiv (pagina Web) dintr-un
browser, printr-un double-click pe acel fiier.
Structura de baz a unui document

<HTML>
HTML
<HEAD>
<TITLE>
Textul din aceasta sectiune va f afsat pe bara de titlu a ferestrei
browserului
</TITLE>
</HEAD>
<BODY>
Textul din aceasta sectiune reprezinta continutul paginii Web:
text,tabele,liste,imagini,etc.
</BODY>
</HTML>
Zona de antet poate fi utilizat pentru specificarea unor cuvinte cheie i

informaii care descriu pagina, indexabile de ctre motoarele de cutare
Web (pentru regsirea site-ului), utiliznd suplimentar n aceast seciune
etichete de tip meta. n cadrul zonei de antet, se poate specifica, de
asemenea, titlul paginii Web, ntre etichetele <TITLE>...</TITLE>, acesta
fiind afiat pe bara de titlu a ferestrei browserului.
Sectiunea body conine coninutul propriu-zis al paginii Web: text,
tabele, liste, imagini, formulare etc.
Acest format al documentului nu este obligatoriu, putnd lipsi att
seciunea
<HEAD>, ct i tag-urile <HTML> i <BODY>, rmnnd doar coninutul

paginii Web.
Totui, se recomand utilizarea structurii de baz a unui document HTML,
coninutul su fiind mai bine organizat i mai uor de urmrit n aceast
situaie.
Adugarea unui background paginii Web

(fundal)
(fe
o culoare,
o imagine,
Pentru
adugareafe
unui
backgroundfe
de ambele)
tip culoare, paginii
Web se aplic etichetei <BODY> atributul BGCOLOR care va

avea ca valoare, fie numele culorii dorite, fie codul hexa al
acesteia. De obicei, se foloseste codul hexa, cu care se
poate accesa o multitudine de nuante ale culorilor.
<body bgcolor="#00ccff">
<body bgcolor="blue">
Dac se dorete ca pagina Web s aib ca i background
fiierul imagine back1.jpg
<body background="back1.jpg">
ambele
<body bgcolor="#00ccff" background="back1.jpg">
Stabilirea culorii textului, folosind atributul TEXT al

etichetei <BODY>
<body text="blue">
<body text="#00ccff">
Atributele LEFTMARGIN si TOPMARGIN ale etichetei
<BODY>
(stabilesc distanele dintre marginea din stnga, respectiv dintre marginea
de sus a fereastrei browser-ului i coninutul paginii), fie n pixeli (se
folosesc valori numere ntregi pozitive), fie n procente (distana
raportat la limea respectiv nlimea ferestrei browser-ului)
<body leftmargin="100" topmargin="20%">
Etichete pentru formatarea textului

Tag-urile <H1>....<H6>
Tag-urile <H1>...<H6> sunt
folosite pentru
dimensionarea i
ngroarea fonturilor
pentru titlurile de capitole.
Textul scris ntre tag-urile
<H1>...</H1> va fi afiat cu
caracterele cele mai mari,
textul scris ntre tag-urile
<H6>...</H6> va aparea cu
caracterele cele mai mici.
Tag-ul <FONT> i atributele sale

COLOR, FACE, SIZE
Pentru a stabili caracteristicile unui text din cadrul paginii
Web, se ncadreaz ntre tag-urile <FONT>...</FONT>
textul respectiv i se folosesc atributele etichetei <FONT>:
COLOR stabilete culoarea fontului
FACE stabilete tipul fontului
SIZE stabilete mrimea fontului, putnd lua valori ntre 1
i 7 (1 se folosete pentru cea mai mic dimensiune, iar 7
pentru cea mai mare dimensiune).
<font color=#ff0000 face=Arial size=2> Exemplu
</font>
Tag-ul <B> pentru caractere ngroate

<b>Text bold</b>
Tag-ul <I> pentru caractere italice
<i>Text italic</i>
Tag-ul <U> pentru text subliniat
<u>Text subliniat</u>
Tag-ul <STRIKE> afieaz un text tiat pe la mijloc cu o
linie orizontal
<strike>Text taiat pe la mijloc cu o linie orizontala</strike>
Tag-ul <BR> provine de la cuvntul break, nu are tag de

ncheiere i are ca effect trecerea la linia urmtoare, n
momentul n care este apelat.
<body>
Text1.<br>Text2.<br>Text3.
</body>
Tag-ul <P> provine de la cuvntul paragraph i are ca efect

separarea textului cuprins n perechea de etichete <P>...</P> de
restul documentului, printr-un rnd liber deasupra i un rnd
liber dedesubtul su.
<body>
Text1.<p>Text2.</p>Text3.
</body>
n cadrul unui paragraf se poate controla i modul n care este aliniat
textul, cu ajutorul
atributului ALIGN al tag-ului <P>. Acest atribut poate lua una din
urmtoarele valori:
left, center i right.
Pentru a alinia un text la marginea din dreapta a documentului:
<body>
Tag-ul <PRE> asigur afiarea textelor editate cu caracterele

spaiu, tab i CR/LF exact n forma n care ele au fost scrise n
documentul HTML.
Tag-ul <CENTER> are rolul de a plasa textul aflat n

cadrul ei, n centrul paginii.
Pot exista tag-uri imbricate care se aplic asupra unui text,

ele nchizndu-se n ordine invers celei n care sunt
Tag-ul <HR> i atributele sale ALIGN, SIZE, WIDTH

Prin utilizarea tag-ului <HR> se asigur separarea unor poriuni
de text prin trasarea ntre ele a unei linii orizontale. Cu ajutorul
atributelor tag-ului <HR> se pot seta parametrii liniei i anume:
alinierea (ALIGN), lungimea (SIZE) i limea (WIDTH).
Inserarea de imagini ntr-o pagin Web cu eticheta <IMG>

cu atributele: SRC, WIDTH i HEIGHT.
Atributul SRC specific imaginea care se dorete a fi inserat, lund
ca valoare adresa URL a acesteia.
Atributele WIDTH i HEIGHT sunt opionale i se utilizeaz pentru
stabilirea unei noi dimensiuni a imaginii, alta dect cea original.
Aceste atribute pot lua ca valori fie numere ntregi pozitive,
reprezentnd dimensiunea n pixeli a imaginii, fie numere de la 1 la
100 urmate de semnul %, reprezentnd procente din dimensiunea
original a imaginii (lime, respectiv nlime). n lipsa acestor
atribute, imaginea va fi afiat pe ecran la dimensiunea ei original.
<img src=actori.jpg width=200

height=30%>
Adugarea de legturi (hyperlink-uri)

Hyperlink-urile reprezint elementele de baz ale WWW (World Wide
Web), ele
realiznd legturi ntre un numr uria de pagini Web. Adugarea de
legturi (hyperlink-uri) unui document HTML, permite legarea acestuia,
fie de documente locale, din interiorul aceluiai site Web, fie de
documente exterioare din WWW.
Realizarea de legturi se face cu ajutorul etichetei ancora <A> i a
atributului sau
HREF, prin intermediul cruia se specific URL-ul (Uniform Resource
Locator) care trebuie urmat, dup ce se face click pe legtura respectiv.
Un exemplu de legtura de tip text ce conduce spre site-ul Google (spre
un document extern din WWW):
<a href="http://www.google.com">Apasati aici pentru

Google!!!</a>
Realizarea de legturi ctre documente locale, din interiorul aceluiai site
Se pot realiza legturi i folosind imagini, substituind textul cu eticheta

<IMG>.
Astfel, cnd se va face click pe imagine, se va deschide pagina referit
prin atributul HREF al etichetei ancora <A>.
Exemplu:
<a href=http://www.google.com><img src="actori.jpg"></a>
n cadrul acestui exemplu, apasnd pe imaginea afiat pe ecran
actori.jpg, se va deschide pagina www.google.com.
Se pot stabili culori pentru legturi, utiliznd atributele LINK, VLINK,
ALINK ale
etichetei <BODY>, astfel:
- culoare pentru legturile nefolosite, pe care nc nu s-a efectuat click
LINK=culoare
- culoare pentru legturile deja folosite, pe care s-a efectuat cel puin o
dat click VLINK=culoare
- culoare pentru legturile momentan active (deasupra crora se afl
apsat mouse-ul la un moment dat) ALINK=culoare
(unde culoare poate fi, fie numele culorii dorite, fie codul hexa al
Liste - O list conine o succesiune de articole (item-uri). Exist trei categorii de liste:
liste neordonate;
liste ordonate;
liste de definiii.
Lista neordonat este delimitat de perechea de etichete <UL>...</UL>, iar fiecare

element al listei este precedat de eticheta <LI>. <LI> - realizeaz indentarea
elementelor listei i plasarea n faa fiecrui element, a unui caracter de marcare: bulina,
ptrat sau cerc, stabilit prin intermediul atributului TYPE, folosit att <UL> ct i cu <LI>,
i care poate lua una din valorile:
- CIRCLE pentru apariia n faa elementelor listei a simbolului
- DISC - pentru apariia n faa elementelor listei a simbolului
- SQUARE - pentru apariia n faa elementelor listei a simbolului
n cazul n care nu se indic prin atributul TYPE, caracterul de marcare care s apar n
faa elementelor listei, se va activa n mod implicit simbolul .
<body>
<ul type="square">Exemplu de lista neordonata
<li> Articol 1
<li> Articol 2
<li> Articol 3
</ul>
<body>
Lista ordonat este delimitat de perechea de etichete <OL>..</OL>, iar fiecare element
al listei este precedat de eticheta <LI>. realizeaz indentarea elementelor listei i
numerotarea lor, n diverse moduri: A,B,C,...;a,b,c,...;I,II,III,...;1,2,3,...;i,ii,iii,... . Tipul de
numerotare utilizat se stabileste prin intermediul atributului TYPE, care poate fi folosit att cu
eticheta <OL> ct i cu eticheta <LI>, lund valorile:
- A- pentru o numerotare a elementelor listei cu A,B,C,...
- a - pentru o numerotare a elementelor listei cu a,b,c,...
- I - pentru o numerotare a elementelor listei cu I,II,III,...
- i - pentru o numerotare a elementelor listei cu i,ii,iii,...
- 1 - pentru o numerotare a elementelor listei cu 1,2,3,...
n cazul n care nu se indic prin atributul TYPE tipul de numerotare dorit, se va activa n mod
implicit o numerotare a elementelor listei sub forma: 1,2,3...
Eticheta <OL> dispune, de asemenea, de atributul START, care stabilete de la ce valoare va
ncepe numerotarea elementelor listei. Acest atribut trebuie s fie un numr ntreg pozitiv,
indiferent de atributul TYPE.
<body>
<ol type="i" start=2>Exemplu de lista ordonata
<li>Articol 1
<li>Articol 2
<li>Articol 3
</ol>
</body>
Lista de defniii afieaz o list de articole, fiecare articole avnd form termendefiniie.
Este delimitat de perechea de etichete <DL>..</DL>. Termenii din cadrul listei vor fi
indicai de etichetele <DT>..</DT>, iar definiiile corespunztoare acestor termeni vor fi
specificate de etichetele <DD>..</DD>. Tag-urile de ncheiere </DT>, respectiv </DD>
sunt opionale. n cadrul oricrei liste sunt permise imbricri cu alte liste, fie de acelaii
<body>
tip, fie de tipuri diferite.
<body>
<dl>Exemplu de lista de definitii
<dt>Teremnul 1
<dd> Definitie termen 1</dd>
</dt>
<dt>Teremnul 2
<dd> Definitie termen 2</dd>
</dt>
</dl>
</body>
<ul type="square">Exemplu de lista neordonata

<li>
<ol type="i" start=2>Exemplu 1 - lista ordonata

<li>Articol 1
<li>Articol 2
<li>Articol 3
</ol>
<li> Exemplu 2
<li> Exemplu 3
</ul>
<body>
Tabelele
sunt elemente de baz ale limbajului HTML
sunt utilizate ca modalitate de afiare a informaiei (text sau grafic) n
cadrul unei pagini Web, permind organizarea datelor pe linii i coloane.
Inserarea tabelului se face prin perechea de etichete <TABLE>..
</TABLE>.
Liniile de tabel se construiesc succesiv (mai nti o linie, apoi alt linie
.a.m.d), cu ajutorul perechii de etichete <TR>..</TR> (table row).
Dup ce se construiete o linie de tabel (un rnd), n cadrul acesteia,
trebuie s se defineasc cel puin un header (un cap de tabel) sau un
element de tip date (o celul), cu ajutorul etichetelor <TH>...</TH>
(table header), respectiv <TD>..</TD> (table date).
Textul din interiorul unei celule cu statut de cap de tabel (adic
construit cu perechea de etichete <TH>..</TH>) va fi afiat implicit cu
caractere aldine i centrat. Pentru a da un titlu tabelului, se utilizeaz
perechea de etichete <CAPTION>..</CAPTION>, poziionat n zona de
definire a tabelului, naintea construirii liniilor i coloanelor (nainte de
<body>
<table>
<caption>Tabel 1</caption>
<tr>
<th>Id</th>
<th>Nume</th>
<th>Prenume</th>
<th>Nota</th>
</tr>
<tr>
<td>1</td>
<td>Ionescu</td>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Georgescu</td>
<td>Mihai</td>
<td>9</td>
</tr>
</table>
</body>
Sintaxa de baz pentru crearea unui tabel, cu

3 linii (dintre care una reprezint capul de
tabel) i 2 coloane.
Eticheta <TABLE> dispune de un set de atribute opionale, cu ajutorul crora se poate realiza
un control global asupra tabelului, obinndu-se astfel designul dorit.
atributul BORDER=valoare este utilizat pentru crearea unei borduri n jurul tuturor
celulelor tabelului. Valoarea acestui atribut este un numr ntreg pozitiv care
reprezint limea bordurii n pixeli. n cazul n care nu se utilizeaz acest atribut sau
valoarea sa este 0, nu va aprea nici o bordura n jurul celulelor tabelului.
atributul WIDTH=valoare/procente este utilizat pentru stabilirea limii tabelului.
Acest atribut poate lua ca valoare fie un numr ntreg pozitiv, reprezentnd l imea n
pixeli a tabelului, fie un numr de la 1 la 100 urmat de semnul %, reprezentnd
procente din limea paginii.
atributul HEIGHT=valoare/procente este utilizat pentru stabilirea nlimii tabelului.
Acest atribut poate lua ca valoare fie un numr ntreg pozitiv, reprezentnd nl imea
n pixeli a tabelului, fie un numr de la 1 la 100 urmat de semnul %, reprezentnd
procente din nlimea paginii.
atributul ALIGN=left/right/center este utilizat pentru a specifica

modul de aliniere a tabelului n pagin. Acest atribut poate lua
valorile:
- LEFT- asigur alinierea tabelului in stanga paginii (implicit);
- RIGHT asigur alinierea tabelului n dreapta paginii;
- CENTER asigur alinierea tabelului n centrul paginii.
atributul CELLSPACING=valoare are rolul de a specifica
distana n pixeli dintre celulele vecine ale tabelului.
atributul CELLPADDING=valoare are rolul de a specifica
distana n pixeli dintre marginea unei celule si coninutul ei.
atributul BGCOLOR= culoare/cod_hexa are rolul de a specifica
culoarea fundalului tabelului. Acest atribut poate lua ca valoare, fie
numele culorii dorite, fie codul hexa al acesteia.
atributul BORDERCOLOR=" culoare/cod_hexa " are rolul de a
specifica culoarea bordurii celulelor. Acest atribut poate lua ca
valoare, fie numele culorii dorite, fie codul hexa al acesteia.
atributul BACKGROUND=locatia_img are rolul de a plasa o
imagine ca fundal al tabelului. Acest atribut va lua ca valoare,
<body>
<table align="center" border="3" bgcolor="#00CC00"
bordercolor="blue" cellspacing="10" cellpadding="10">
<tr>
<th>Id</th>
<th>Nume</th>
<th>Prenume</th>
<th>Nota</th>
</tr>
<tr>
<td>1</td>
<td>Ionescu</td>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Georgescu</td>
<td>Mihai</td>
<td>9</td>
</tr>
</table>
</body>
Eticheta <TR> dispune de un set de atribute opionale, cu ajutorul

crora se poate realiza controlul unei linii a tabelului, obinndu-se astfel
designul dorit pentru acea linie.
atributul BGCOLOR= culoare/cod_hexa are rolul de a specifica
culoarea fundalului unei linii a tabelului. Acest atribut poate lua ca
valoare, fie numele culorii dorite, fie codul hexa al acesteia.
atributul ALIGN=left/right/center este utilizat pentru a specifica
alinierea pe
orizontal a coninutului celulelor unui rnd din tabel. Acest atribut poate
lua valorile:
- LEFT- asigur alinierea continutului la stanga celulei (implicit);
- RIGHT asigur alinierea continutului la dreapta celulei;
- CENTER asigur alinierea continutului in centru celulei.
atributul VALIGN=left/right/center este utilizat pentru a specifica
alinierea pe
vertical a coninutului celulelor unui rnd din tabel. Acest atribut poate
lua valorile:
- TOP asigur alinierea coninutului n partea de sus a celulei;
<body>
<table align="center" border="3" bordercolor="blue"
cellspacing="10"
cellpadding="10" width="350" height="220">
<tr bgcolor="#ddff33">
<th>Id</th>
<th>Nume</th>
<th>Prenume</th>
<th>Nota</th>
</tr>
<tr bgcolor="#00CC33" align="right" valign="top">
<td>1</td>
<td>Ionescu</td>
<td>Ana</td>
<td>10</td>
</tr>
<tr bgcolor="#0099FF" align="left" valign="bottom">
<td>2</td>
<td>Georgescu</td>
<td>Mihai</td>
<td>9</td>
</tr>
</table>
</body>
Eticheta <TD> dispune de un set de atribute opionale, cu ajutorul crora se

poate
realiza controlul individual al celulelor tabelului, obinndu-se astfel designul
dorit pentru fiecare celul n parte.
atributul BGCOLOR= culoare/cod_hexa are rolul de a specifica culoarea
fundalului unei celule a tabelului. Acest atribut poate lua ca valoare, fie
numele culorii dorite, fie codul hexa al acesteia.
atributul BACKGROUND=locatia_img are rolul de a plasa o imagine ca
fundal al
unei celule a tabelului. Acest atribut va lua ca valoare, locaia imaginii care se
dorete a fi inserat .
atributul ALIGN=left/right/center este utilizat pentru a specifica alinierea
pe
orizontal a coninutului unei celule din tabel. Acest atribut poate lua valorile:
- LEFT- asigur alinierea coninutului la stnga celulei;
- RIGHT asigur alinierea coninutului la dreapta celulei;
- CENTER asigur alinierea coninutului n centru celulei.
atributul VALIGN=left/right/center este utilizat pentru a specifica alinierea
atributul WIDTH=valoare/procente este utilizat pentru stabilirea limii

unei celule a tabelului. Acest atribut poate lua ca valoare fie un numr
ntreg pozitiv, reprezentnd limea n pixeli a celulei, fie un numr de la
1 la 100 urmat de semnul %, reprezentnd procente din limea
tabelului.
atributul HEIGHT=valoare/procente este utilizat pentru stabilirea
nlimii unei celule a tabelului. Acest atribut poate lua ca valoare fie un
numr ntreg pozitiv, reprezentnd nlimea n pixeli a celulei, fie un
numr de la 1 la 100 urmat de semnul %, reprezentnd procente din
nlimea tabelului.
Observaie. Toate atributele corespunztoare etichetei <TD> sunt
valabile i pentru eticheta <TH> (table header).
Uneori, pentru a obine un tabel cu aspectul dorit, este necesar unirea
celulelor n aa fel nct o celul s conin dou sau mai multe rnduri
i/sau dou sau mai multe coloane.
Pentru aceasta se utilizeaz atributele COLSPAN i ROWSPAN:
<body>
<table align="center" border="3" bordercolor="blue" cellspacing="10"
cellpadding="10" width="30%" height="35%">
<tr bgcolor="#00CC33">
<th>Id</th>
<th>Nume</th>
<th>Prenume</th>
<th>Nota</th>
</tr>
<tr align="right">
<td bgcolor="#ffffff" width="10%" height="50%" valign=top>1</td>
<td bgcolor="#ffff00" width="30%" valign=middle>Ionescu</td>
<td bgcolor="#ff1133" width="40%" valign=middle>Ana</td>
<td bgcolor="#00CCFF" width="20%" valign=bottom>10</td>
</tr>
<tr align="left">
<td bgcolor="#ffffff" valign=top>2</td>
<td bgcolor="#ffff00" valign=middle>Georgescu</td>
<td bgcolor="#ff1133" valign=middle>Mihai</td>
<td bgcolor="#00CCFF" valign=bottom>9</td>
</tr>
</table>
</body>
<body>
<table border="2" width="20%" height="20%" align="center">
<tr bgcolor="#009900">
<th rowspan="2">ID</th>
<th colspan="3">Evidenta</th>
</tr>
<tr bgcolor="#009900">
<th>Nume</th>
<th>Prenume</th>
<th>Nota</th>
</tr>
<tr bgcolor="#0099FF">
<td>1</td>
<td>Ionescu</td>
<td>Ana</td>
<td>10</td>
</tr>
<tr bgcolor="#0099FF">
<td>2</td>
<td>Georgescu</td>
<td>Mihai</td>
<td>9</td>
</tr>
</table>
</body>
Frame-uri
Frame-urile (numite i cadre) sunt practic elemente HTML prin care se
realizeaz o mprire a ecranului n mai multe zone (regiuni) de afiare,
permindu-se astfel afiarea simultan ntr-un acelai ecran a mai
multor pagini Web.
O astfel de mprire a ecranului n mai multe regiuni, permite o
prezentare a informaiei ntr-o form mai flexibil, mai practic i uneori
mai util.
n fiecare frame (avnd un anumit nume) este afiat coninutul unui
anumit fiier HTML (script), referit printr-un URL.
Frame-ul poate fi redimensionat (opional) de ctre utilizator.
n mod curent, frame-urile sunt suportate doar de anumite browsere:
Netscape Navigator (minim versiunea 2) i Microsoft Internet Explorer
(minim versiunea 3).
Cele mai uzuale tag-uri specifice proiectrii unei pagini Web utiliznd
frame-uri sunt: <FRAMESET>, <FRAME>, <NOFRAMES>, TARGET,
Utilizarea unor frame-urile n cadrul unei pagini Web presupune, ntr-o

prim faz, o definire a acestora n cadrul documentului HTML.
Definirea frame-urilor precizeaz tipul acestora, numrul i poziia lor n
cadrul paginii Web, precum i URL-urile (adresele) ctre fiierele HTML
care vor constitui coninutul lor (coninutul propriu-zis fiind practic stocat
ntotdeauna separat, ntr-un alt fiier HTML).
Definiia unei succesiuni de frame-uri care vor fi plasate pe un ecran
este marcat printr-o etichetet de tip <FRAMESET> (pentru o setare
global).
Eticheta <FRAMESET> va fi ignorat dac orice alte etichete sunt
plasate nainte, ntre tag-uri de tip <BODY>.
Eticheta container <FRAMESET> conine o serie de etichete
<FRAME> , fiecare descriind succesiv cte un frame din setul de frameuri care vor alctui ecranul. Dimensiunea i plasarea n pagin a unui
frame sunt precizate n termeni de rnduri i coloane, utiliznd
combinaii de etichete <FRAMESET> i <FRAME>.
Exemplul urmtor prezint modul n care poate fi realizat o succesiune

de 3 cadre, plasate n linie sub forma a trei coloane separate, n fiecare
dintre ele ncrcndu-se un fiier HTML, referit explicit printr-un URL
(fiierele One.html, Two.html, Three.html).
Prima coloan este setat la 80 pixeli lime, coloana a doua este setat
la 25% din aria (limea) disponibil, iar a treia coloan trebuie s ocupe
restul spaiului rmas. nlimea ecranului este utilizat integral de ctre
fiecare coloan. Fiecare coloan din exemplul prezentat este practic un
frame coloan, precizarea acestui tip (coloan) fiind dictat de folosirea
atributului COLS:
<FRAMESET COLS="80,25%,*">
<FRAME SRC="one.html">
<FRAME SRC="two.html">
<FRAME SRC="three.html">
</FRAMESET>
Frame-uri coloan
Pentru aranjarea pe linii a unor frame-uri, se utilizeaz atributul

ROWS n locul atributului COLS.
Deci, definirea modului de plasare pe ecran a frame-urilor, precum
i a dimensiunilor lor, se face prin atributele ROWS sau COLS,
care stabilesc nlimea unei linii (cadru linie) sau limea unei
coloane (cadru coloan), printr-o list de valori (de genul celei
exemplificate). Aceste valori sunt descrise ca valori absolute n
pixeli, valori procentuale de la 1% la 100% sau ca i valori relative
utiliznd un asterisc (*).
Browserul Netscape are tendina de a rotunji dimensiunile unui
frame, lucrnd doar cu multipli de 10 pixeli. nlimea total a
tuturor cadrelor linie trebuie s fie egal cu nlimea total a
ferestrei, deci valorile pot fi normalizate de ctre browser dac e
necesar.
<FRAMESET ROWS="2*,*"> face cadrul linie de sus de dou
ori mai nalt dect cadrul de jos;
<FRAMESET COLS="50,*,50"> fixeaz nlimea cadrelor din
stnga i dreapta i aloc spaiul rmas n fereastra cadrului din
Frame-uri ncuibate
Exemplul anterior descrie trei frame-uri plasate ntr-o aceeai definiie FRAM
Pentru a creea un aranjament mai complex al paginii Web se poate plasa o
FRAMESET i frame-urile asociate ei ntr-o alt definiie FRAMESET. Aceast m
este cunoscut sub denumirea de ncuibare de frame-uri.
n exemplul urmtor se arat o modalitate de grupare (ncuibare) a unor fra
punnd o definiie FRAMESET n alta.
Pentru nceput se definete un
FRAMESET de baz, coninnd dou
frame-uri linie:
<FRAMESET ROWS="*,50%">
<FRAME SRC="five.html">
<FRAME SRC="four.html">
</FRAMESET>
Frame-uri linie
Se nlocuiete definiia FRAME-ul care afieaz coninutul fiierului five.html cu

definiia FRAMESET i frame-urile din exemplul descris n paragraful anterior,
rezultnd:
<FRAMESET COLS="80,25%,*">
<FRAME SRC="one.htm">
<FRAME SRC="two.htm">
<FRAME SRC="three.htm">
</FRAMESET>
<FRAME SRC="four.htm">
</FRAMESET>
Efectul este prezentat n figur, rezultatul fiind crearea a 4 frame-uri.
Nu exist o limitare a numrului de frame-uri care se pot grupa

(ncuiba), dei, n practic, utilizarea a mai mult de trei frame-uri
pe ecran face ca lucrurile s devin complicate pentru utilizator.
Un numr semnificativ de clieni Web utilizeaz pentru navigare un
browser care nu suport frame-uri (non-frame). Problema este
destul de important, deoarece trebuie s se asigure citirea
coninutului paginii i n cazul utilizrii unui astfel de browser.
Elementul <NOFRAMES> permite asigurarea acestei cerine. n
interiorul etichetelor pereche <NOFRAMES> </NOFRAMES>
se poate pune orice informaie care s-ar pune normal ntre
etichetele <HTML> </HTML >.
Dac nu se ofer o astfel de alternativ de utilizare prin plasarea
unei informaii ntre etichetele <NOFRAMES> </NOFRAMES>, un
"cititor" al paginii care utilizeaz un browser care nu suport
frame-uri, nu va vedea nimic i va fi forat s abandoneze
navigarea pe acel site.
Browser-ele care suport frame-uri ignor coninutul plasat ntre etichetele

<NOFRAMES>.
Exemplu:
<FRAME SRC="five.htm">
<FRAME SRC="four.htm">
<NOFRAMES>
<BODY>
<P>Welcome to my page.
<A HREF="noframes.htm">Continue</A> to the frame-free version.</P>
</BODY>
</NOFRAMES>
</FRAMESET>
Proprieti ale frame-urilor

Asupra frame-urilor se poate exercita un control setnd corespunztor
anumite proprieti ale acestora. Astfel, se poate pune sau nu o bordur
frame-urilor, se pot colora, se pot ndeprta barele de rulare (scrooll) sau
se poate realiza o redimensionare a lor.
Proprieti ale etichetei <FRAMESET>
Urmtoarele atribute (proprieti) pot fi aplicate unui element
<FRAMESET>, pentru un control suplimentar, avnd un efect de setare
global asupra tuturor definiiilor FRAME incluse n FRAMESET:
FRAMEBORDER="yes|no"|0 - permite sau nu punerea unei margini
(borduri) n jurul
frame-urilor aferente unei definiii FRAMESET. n mod curent, ncepnd cu
Netscape Navigator 3 se folosesc valorile yes i no, n timp ce Microsoft
Internet Explorer folosete valoarea 0 pentru a scoate bordura (care altfel
este implicit). Pentru ca marginile s nu fie trasate, toate frame-urile care
i mpart o margine comun, trebuie s aibe atributul FRAMEBORDER setat
BORDER=pixels - utilizat doar ncepnd cu Netscape Navigator 3 (sau

o versiune mai evoluat), acest atribut permite setarea limii marginilor
(bordurilor) n pixeli, ntr-o
definiie FRAMESET.
BORDERCOLOR="#hexcolor|colorname" - se poate utiliza acest
atribut (doar cu Netscape Navigator), permind setarea culorii bordurii
frame-urilor cuprinse ntr-o definiie
FRAMESET, prin specificarea unui triplet hexa RGB convenional sau
direct a numelui culorii. Atributul poate fi utilizat i cu eticheta <FRAME>
pentru setarea culorii marginii
unui singur frame.
Proprieti ale etichetei FRAME
Urmtoarele atribute pot fi aplicate la elementele <FRAME> pentru un
control suplimentar la nivelul unui singur frame, bine precizat:
SCROLLING="yes|no|auto" - permite introducerea sau nu, a unei bare
de derulare (scroll) a coninutului frame-ului. n lips, valoarea implicit
este "auto", lsnd browser-ul s
NORESIZE - mpiedic redimensionarea frame-ului. n lipsa lui, implicit,

utilizatorul poate redimensiona frame-urile, trgnd marginile acestora ntr-o
nou poziie.
MARGINWIDTH=pixels - seteaz dimensiunea marginilor din dreapta i
stnga frame-ului, n pixeli. n lipsa atributului, implicit, browserul va decide
singur dimensiunea marginilor.
MARGINHEIGHT="pixels" - seteaz marginea de sus i de jos a frame-ului,
n pixeli. n lipsa atributului, browserul va decide singur dimensiunea acestor
margini.
BORDERCOLOR="color" - ncepnd cu Netscape Navigator 3 este permis
setarea culorii marginii frame-ului, prin specificarea unui triplet hexa RGB
convenional. Acest atribut poate fi utilizat i cu eticheta <FRAMESET>,
pentru seterea culorii marginii pentru un grup de frame-uri.
FRAMESPACING="pixels" - ncepnd cu Microsoft Internet Explorer 3,
atributul permite setarea spaiului liber din jurul frame-ului, definit n pixeli.
FRAMEBORDER="yes|no"|0 - permite plasarea sau nu a unei margini din
jurul frame-ului. n mod curent, ncepnd cu Netscape Navigator 3 se
folosesc valorile yes i no, n timp ce ncepnd cu versiunea Microsoft
Frame-uri legate (linking frames)

Unul din principalele avantaje ale utilizrii frame-urilor, const n
faptul c se poate utiliza o legtur (link) dintr-un frame, pentru a
deschide (afia) o anumit pagin ntr-un alt frame, pe aceeai pagin
ecran. Apelnd o anumit referin (sau apsnd un buton) ntr-unul
din frame-uri (surs), se poate deschide astfel o nou pagin ntr-un
alt frame (int, target) al aceluiai ecran, restul coninutului
ecranului rmnnd
neschimbat.
Primul pas pentru a stabili un rol de target pentru un frame const
n ataarea unui nume acelui frame. Aceast operaie este realizat n
eticheta de definire a frame-ului
respectiv (<FRAME>), utiliznd atributul NAME. Exemplu:
<FRAME SRC="pagina32.htm" NAME="zona_tinta">
Direcionarea unei informaii dintr-un fiier HTML spre un anumit
frame target, se face utiliznd atributul TARGET. Acest atribut nu se
gseste n definirea frame-ului, fiind utilizat ca atribut pentru diverse
etichete HTML (ancore, butoane) n scopul direcionrii
<FRAME SRC="continut_initial1.html" >
<FRAME SRC="continut_initial2.html"
name="zona_tinta">
</FRAMESET
Fiierul continut_initial1.html trebuie s conin o referin ancor,
avnd specificat un atribut TARGET spre frame-ul al doilea:
<A TARGET="zona_tinta HREF="continut_final.html">Pagina noua in
frame-ul 2</A>
n momentul cnd din primul frame este apelat aceast referin,
coninutul fiierului continut_final.html este afiat n cel de-al doilea
frame (frame-ul target).
Dac numele intei specificate cu atributul TARGET nu exist,
documentul legat va fi deschis ntr-o nou fereastr, avnd numele
similar cu cel precizat n atributul TARGET.
Exist cteva nume int speciale, predefinite. Toate acestea ncep cu
liniu de subliniere ( _ ) i sunt folosite pentru ncrcarea unor pagini n
TARGET="_parent" - documentul se ncarc n aceeai pagin

frameset ca i legtura, n felul acesta ndeprtnd orice alte "subframe-uri". Practic se ncarc pagina printe n care este realizat
definiia FRAMESET.
TARGET="_top" - documentul se ncarc n tot corpul ferestrei,
aceasta eliberndu-se de toate frame-urile. Aceast metod este util
atunci cnd o legatur direcioneaz utilizatorul spre un alt site.
TARGET="_blank" - documentul se ncarc ntr-o fereastr nou.
Observaie: ncepnd cu versiunea 3.01 Microsoft Internet Explorer
suport i aa numitele floating frames, prin utilizarea etichetei
<IFRAME>, plasarea unui frame putndu-se face n orice poziie a
unei pagini Web. Spre exemplu, urmtoarea secven plaseaz un
frame lng un text format:
<h1>Text de afisat<h>
<IFRAME SCROLLING=YES FRAMEBORDER=1
ALIGN=top
Formulare
Formularele sunt elemente importante ale limbajului HTML care asigur
interaciunea cu utilizatorii paginii Web. Cu ajutorul formularelor, se
preiau o serie de date de la vizitatorii paginii Web, care ulterior, vor fi
procesate prin intermediul unor scripturi (n cazul de fa scripturi PHP)
sau vor fi transmise ctre o adres de e-mail.
Un formular HTML este definit ntre etichetele <FORM>...</FORM>.
Tag-ul <FORM> are dou atribute: ACTION i METHOD.
Atributul ACTION poate lua ca valoare, fie adresa URL a scriptului
care va primi i va procesa datele introduse n formular, fie adresa de email, ctre care vor fi transmise aceste date.
Atributul METHOD specific metoda de transmitere a datelor, care
poate fi GET sau POST. Metoda GET se utilizeaz atunci cnd se
dorete transmisia unor cantiti mici de date. Aceste date vor fi vizibile
n bara de navigare a browser-ului, fiind adugate la adresa indicat de
action. Metoda POST se utilizeaz pentru tansmiterea unor cantiti
mari de date, n general, i este mai des utilizat. Datele transmise cu
metoda POST nu apar n linia de apelare a scriptului, aa cum se
Elementele unui formular HTML sunt:

casetele de editare simple;
casetele de tip password;

butoanele radio;
casetele de validare;
listele de selecie;
casetele de editare multilinie;
butoanele submit i reset.
Pentru definirea casetelor de editare simple, a casetelor de tip password, a butoanelor

radio, a casetelor de validare, respectiv a butoanelor de tip submit i reset, n cadrul
unui
formular, se folosete eticheta <INPUT>, care are urmtoarele atribute:
atributul NAME valoarea sa reprezint numele sub care se transmite ctre server
coninutul acestui element;
atributul VALUE are rolul de a atribui o valoare elementului definit n cadrul
formularului (valoare implicit);
atributul TYPE valoarea sa precizeaz tipul elementului definit prin intermediul
tag-ului <INPUT>, dup cum urmeaz:
Dac TYPE=TEXT, atunci elementul introdus n formular este de tip caset de

editare, coninutul acestei casete reprezentnd valoarea transmis spre
server. n aceast
Situaie, tag-ul <INPUT> dispune i de atributele SIZE care precizeaz
lungimea
casetei de editare) i MAXLENGTH care specific numrul maxim de
caractere care
pot fi introduse n cmpul de editare.
Dac TYPE=PASSWORD, atunci elementul introdus n formular este o caset

de
editare de tip password, care se caracterizeaz prin aceea c textul din
cadrul ei nu apare explicit (ca i n cazul casetelor de editare de tip text) ci
apare codificat cu
caracterul * .
Dac TYPE=RADIO, atunci elementul introdus n formular este un buton de

tip radio.
Butoanele de tip radio se utilizeaz n grup, fiind caracterizate prin aceea c
doar o opiune poate fi selectat la un moment dat, selectarea uneia
provocnd automat deselectarea tuturor celorlalte. Butoanele de tip radio se
folosesc n situaiile n care avem mai multe variante de rspuns, i se
dorete selectarea doar a uneia. n cazul butoanelor radio, comanda
<INPUT> dispune si de atributul CHECKED, care specific care buton radio
din grup este setat implicit. Butoanele radio ce fac parte din acelaii grup
vor avea acelaii nume.
Dac TYPE=CHECKBOX, atunci elementul introdus n formular este o caset

de
validare. Casetele de validare se utilizeaz n grup, i se caracterizeaz prin
aceea c
mai multe opiuni pot fi selectate/deselectate la un moment dat. Casetele de
validare se
folosesc n situaiile n care se dorete selectarea mai multora dintre
variantele de
rspuns pe care le avem la dispoziie. n cazul checkbox-urilor, comanda
<INPUT>
dispune i de atributul CHECKED, care specific care checkbox din grup
este setat
implicit.
Dac TYPE=SUBMIT, atunci elementul introdus n formular este un buton

destinat transmiterii ctre server a datelor din formular. n aceast situaie,
valoarea specificat prin atributul VALUE va fi poziionata pe suprafaa ce
reprezint butonul respectiv.
Dac TYPE=RESET, atunci elementul introdus n formular este un buton

specializat s aduc toate elementele din cadrul formularului la valorile
implicite. Ca i n cazul anterior, valoarea specificat prin atributul VALUE
va fi pozitionat pe suprafaa ce reprezint butonul respectiv.
Observaie. Butoanele de tip submit i reset se plaseaz la final n formular,

dup definirea tuturor celorlalte elemente ale formularului.
Pentru definirea unei liste de selecie n cadrul unui formular se folosete

perechea de etichete <SELECT>...</SELECT>. O list de selecie este
format dintr-un numr de elemente dintre care doar unul poate fi selectat la
un moment dat, selectarea unuia determinnd, implicit, deselectarea celorlalte.
Elementele unei liste de selecie sunt definite prin intermediul tag-ului
<OPTION>, atributul VALUE al acestui tag fiind folosit pentru atribuirea de
valori acestor elemente. Atributul SELECTED al tag-ului <OPTION> indic
care element al listei este selectat implicit.
Atributele tag-ului <SELECT> sunt:
-NAME- a crui valoare reprezint numele listei de selecie. Acestui nume i se
va asocia o valoare, dat de atributul VALUE al etichetei <OPTION>,
corespunztoare elementului selectat din list;
- SIZE - specific cte elemente ale listei s fie vizibile pe ecran la un moment
dat, restul urmnd s apar pe ecran dup ce se face un click cu mouse-ul pe
bara de derulare a listei. Implicit, SIZE=1.
Observaie. Utilizarea atributului MULTIPLE al tag-ului <SELECT>, permite
Pentru definirea unei casete de editare multilinie n cadrul unui formular

se folosete
perechea de etichete <TEXTAREA>...</TEXTAREA>. Acest tip de caset
se utilizeaz atunci cnd se dorete introducerea unui text mai mare (pe
mai multe rnduri) n cmpul de editare. Cele mai importante atribute ale
tag-ului <TEXTAREA> sunt:
- NAME - a crui valoare reprezint numele casetei de editare multilinie.
Textul scris n caseta de editare va fi transmis serverului sub acest nume;
- COLS - are rolul de a preciza numrul de caractere ale fiecrui rnd;
- ROWS - are rolul de a preciza numrul de rnduri ale casetei de editare.
<textarea cols="50" rows ="3" name="descriere">

Caseta de editare multilinie se utilizeaza
atunci cand se doreste scrierea unui text mai lung
(pe mai multe randuri) in campul de editare!
</textarea>
Tag-urile DIV i SPAN

Tag-urile <div></div> creeaz seciuni de blocuri n pagina WEB, al cror coninut
poate fi formatat diferit, pentru fiecare bloc n parte. Tag-urile <div></div> sunt
unele dintre cele mai utilizate elemente HTML, deoarece n combinaie cu elemente
CSS determin o grafic deosebit a paginii WEB.
n interiorul cadrelor determinate de aceste tag-uri, pot fi incluse orice tip de
elemente HTML: tabele, formulare, liste, link-uri, imagini sau alte DIV-uri. Cadrele n
care acestea sunt adugate pot avea propriul fundal (background), lungime,
nlime i margini.
Tag-urile DIV accept un singur atribut HTML, ALIGN, folosit pentru alinierea pe
orizontal a coninutului, i poate avea urmtoarele valori:
- left pentru aliniere la stnga;
- right pentru aliniere la dreapta;
- center pentru aliniere n centru;
-justify pentru a asigura distana egal a textului fa de margini.
Tag-urile <span></span> permit formatarea separat a unei poriuni dintr-un
context i se folosesc n combinaie cu elemente CSS. n lipsa elementelor CSS, ele
nu au nici un efect, nefolosind niciun atribut HTML special.
Observaie. Avnd n vedere c tag-urile DIV i SPAN necesit o formatare
Limbajul de stilizare CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets), foi de stil n cascad reprezint un limbaj de stilizare care permite
formatarea elementelor unui document scris ntr-un limbaj de marcare (HTML, XML etc.).
Vom prezenta utilitatea elementelor CSS n stilizarea tag-urilor HTML ce stau la baza dezvoltrii
paginilor WEB.
Codul HTML se utilizeaz, de obicei, pentru plasarea coninutului n pagina WEB, detaliile legate de
afiare (culori, font-uri, fundaluri, margini, etc. ) fiind asigurate de elementele CSS.
CSS este conceput n primul rnd pentru a oferi posibilitatea separrii documentului ca i coninut
(scris n HTML sau un Markup Language similar) de documentul de prezentare (scris n CSS).
Aceast separare mbunteste accesibilitatea coninutului, ofer o mai mare flexibilitate i
asigur un control mai simplu al modului de prezentare al elementelor HTML.
Aplicarea foilor de stil n cascad asupra codului HTML se poate face n mai multe moduri:
- stiluri n linie
- stiluri interne
- stiluri externe
- clase CSS
Stilurile n linie se definesc chiar n codul HTML, n elementul care se dorete a fi

stilizat. Pentru adugarea unui stil intern la un element se folosete atributul style urmat
de proprieti i valori, folosind sintaxa:
<element style="proprietate:valoare; proprietate:valoare;"></element>

<p style="color: #ff1111; font-size:30;">Exemplu de utilizare a
stilurilor in linie!</p>
Stilurile n linie nu permit schimbri rapide i facile, pe mai multe fiiere n

acelai
timp, fiecare element HTML necesitnd a fi controlat, pe fiecare pagin n parte.
Stilurile interne se definesc n seciunea <head></head> a documentului
HTML, cu ajutorul urmtoarei sintaxe <style type="text/css"> ... </style>. n
cadrul acestui tag, se vor defini proprietile i valorile pentru diverse stiluri.
Aceast metod este util cnd se dorete folosirea acelorai stiluri pentru mai
multe tag-uri HTML de acelai tip din documentul HTML curent (tabele, liste,
formulare etc.).
<html>
<head>
<style type="text/css">
table
{
font-family: "Arial";
font-size: 30px;
color: #FFFFFF;
background-color: 55ff33 ;
border: 4px double #0033FF;
text-align: right;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td>
Exemplu 1 de utilizare a stilurilor interne!
</td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td>
Exemplu 2 de utilizare a stilurilor interne!
</td>
</tr>
</table>
</body>
</html>
Stiluri externe
n cadrul acestei metode de lucru, proprietile i valorile pentru diverse stiluri
sunt specificate ntr-un fiier extern care are extensia "css", pe care l putem
construi cu orice editor de text (Notepad, Wordpad, Dreamweaver etc.). Fiierele
CSS nu conin cod HTML, ci doar CSS.
Avantajul folosirii fiierelor externe CSS const n faptul c aceleai stiluri pot fi
folosite de mai multe pagini din site, chiar de tot site-ul, fiind scrise o singur dat.
De asemenea, orice modificare necesar asupra unui stil, va trebui operat ntr-un
singur loc. Pe de alta parte, stilurile externe ajut la micorarea ca mrime a
documentelor HTML, care astfel se ncarc mai repede.
Pentru a referi un fiier extern CSS ntr-un document HTML, se adaug n seciunea
<head></head> a documentului care va folosi acel fiier cu stiluri, urmtoarea
comand:
<link href="fisier.css" rel="stylesheet" type="text/css">, unde valoarea lui "href "
reprezint calea i numele fiierului css folosit.
n continuare, se prezint un exemplu de referire a unui fiier extern css n
documente HTML diferite:
<html>
<head>
<link href="StilExt.css" rel="stylesheet"
type="text/css">
</head>
<body>
<table>
<caption>Document 1</caption>
<tr>
<td>
Exemplu de utilizare a stilurilor externe in tabel!
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
type="text/css">
</head>
<body>
<table>
<caption>Document 2</caption>
<tr>
<td>
Exemplu de utilizare a stilurilor externe!
</td>
</tr>
</table>
</body>
</html>
Fiierul CSS referit i utilizat n paginile HTML anterioare (StilExt.css) se consider a avea
urmtoarea structur:
caption
{
font-family: "Times New Roman";
font-size: 24px;
color: #000000;
}
table
{
font-size: 22px;
color: #FFFFFF;
background-color: #00cc33;
text-align: center;
}
Clasele CSS se utilizeaz pentru stilizarea n mod difereniat a unor taguri HTML
(distribuite n una sau mai multe pagini WEB). Acestea se definesc ntrun fiier extern css,
numele claselor fiind precedat fie de semnul ., fie de semnul #.
Apelul unei clase CSS se
face n tag-ul asupra cruia se dorete ca ea s acioneze. n cazul n
care clasa este definit n fiierul extern printr-un nume precedat de
caracterul ., apelul ei se va face folosind sintaxa:
class=nume_clasa
n cazul n care clasa este definit printr-un nume precedat de caracterul
#, apelul ei se va face folosind sintaxa:
id=nume_clasa
Din punct de vedere al apelului lor n cadrul tag-urilor, utilizarea claselor
CSS este similar cu utilizarea stilurilor n linie, avantajul major fiind
acela c atunci cnd se dorete efectuarea unei modificri de stil pe mai
multe elemente/pagini, aceasta nu trebuie efectuat individual la nivelul
fiecrui element, ci doar n clasa respectiv definit n fiierul css extern.
Efectul acestei modificri se va rsfrnge asupra tuturor elementelor pe
<html>
<head>
type="text/css">
</head>
<body>
<table>
<tr>
<td class=Tabel1>
Actioneaza clasa Tabel1!
</td>
</tr>
</table>
<table id=Tabel2>
<tr>
<td>
Actioneaza clasa Tabel2!
</td>
</tr>
</table>
</body>
</html>
Tabel1
{
font-size: 22px;
color: #FFFFFF;
background-color: #0066FF;
text-align: center;
}
#Tabel2
{
font-size: 22px;
color: #FFFFFF;
background-color: #00CC33;
text-align: center;
}
n situaia n care, pentru formatarea unui element HTML al paginii WEB, se folosesc n acelaii
timp, mai multe metode CSS, acestea se vor executa n cascad, n urmtoarea ordine:
prioritate au stilurile n linie, apoi stilurile interne, iar n final, stilurile externe. Cu alte cuvinte,
stilul n linie al unui element suprascrie stilul intern, definit n seciunea <head></head>, sau
stilul extern, definit ntr-un fiier extern.
Remarc: O prezentare bine structurat a proprietilor CSS frecvent utilizate se gsete pe
internet, la adresa: http://www.pageresource.com/dhtml/cssprops.htm.
Exemple de utilizare a tag-urilor DIV i SPAN cu CSS

Tag-urile DIV si SPAN utilizate singure, nu au efecte majore, ns n combinaie cu
elemente CSS pot oferi un design deosebit paginilor WEB.
Astfel, n cadrul acestor tag-uri se poate folosi fie atributul style (cu proprietati CSS),
fie atributele id sau class pentru apelul claselor CSS.
Exemplu utilizare DIV:
n continuare, se prezinta un exemplu n care avem 2 div-uri, unul conine un tabel,
iar cellalt o list neordonat, fiecare div avnd propria culoare de fundal, dimensiuni
stabilite i margini diferite. n atributul "style" sunt specificate proprietile CSS care
stabilesc aspectul grafic al fiecrui DIV.
<b>DIV 1</b>
<div style="width:300px; background:#aaee88;
border:2px solid
blue;">
<table>
<tr>
<th>Id</th>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
<th>Localitate</th>
</tr>
<tr>
<td>1</td>
<td>Ilie</td>
<td>Daniel</td>
<td>30</td>
<td>Timisoara</td>
</tr>
<tr>
<td>1</td>
<td>Popescu</td>
<td>Vlad</td>
<td>30</td>
<td>Timisoara</td>
</tr>
</table>
</div>
<br>
<b>DIV 2</b>
<div style="width:180px; background: #ff3377; border:5px solid
#336688;">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>
Exemplu utilizare SPAN:

n exemplul de mai jos se urmrete afiarea n pagina WEB a unui text, n cadrul
cruia anumite cuvinte s fie evideniate. Pentru aceasta, cuvintele ce se doresc a fi
evideniate se ncadreaz ntr-un tag SPAN cruia i se adaug proprietile CSS
dorite.
<span style="background:#88fe88; font-weight:bold;">de utilizare

a tag-ului SPAN</span>

Introducere u00EEn HTML - CCS - Ro

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducere u00EEn HTML - CCS - Ro

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere n HTML i

Limbajul de marcare HTML

Coninutul unui document HTML nu este case-sensitive,

Etape parcurse pentru crearea i accesarea unei

Structura de baz a unui document

Zona de antet poate fi utilizat pentru specificarea unor cuvinte cheie i

<HEAD>, ct i tag-urile <HTML> i <BODY>, rmnnd doar coninutul

Adugarea unui background paginii Web

Web se aplic etichetei <BODY> atributul BGCOLOR care va

<body bgcolor="#00ccff" background="back1.jpg">

Stabilirea culorii textului, folosind atributul TEXT al

<body leftmargin="100" topmargin="20%">

Etichete pentru formatarea textului

Tag-ul <FONT> i atributele sale

Tag-ul <B> pentru caractere ngroate

Tag-ul <BR> provine de la cuvntul break, nu are tag de

Tag-ul <P> provine de la cuvntul paragraph i are ca efect

Tag-ul <PRE> asigur afiarea textelor editate cu caracterele

Tag-ul <CENTER> are rolul de a plasa textul aflat n

Pot exista tag-uri imbricate care se aplic asupra unui text,

Tag-ul <HR> i atributele sale ALIGN, SIZE, WIDTH

Inserarea de imagini ntr-o pagin Web cu eticheta <IMG>

<img src=actori.jpg width=200

Adugarea de legturi (hyperlink-uri)

<a href="http://www.google.com">Apasati aici pentru

Se pot realiza legturi i folosind imagini, substituind textul cu eticheta

Lista neordonat este delimitat de perechea de etichete <UL>...</UL>, iar fiecare

<ul type="square">Exemplu de lista neordonata

<ol type="i" start=2>Exemplu 1 - lista ordonata

Sintaxa de baz pentru crearea unui tabel, cu

atributul ALIGN=left/right/center este utilizat pentru a specifica

Eticheta <TR> dispune de un set de atribute opionale, cu ajutorul

Eticheta <TD> dispune de un set de atribute opionale, cu ajutorul crora se

atributul VALIGN=left/right/center este utilizat pentru a specifica alinierea

atributul WIDTH=valoare/procente este utilizat pentru stabilirea limii

Utilizarea unor frame-urile n cadrul unei pagini Web presupune, ntr-o

Exemplul urmtor prezint modul n care poate fi realizat o succesiune

Pentru aranjarea pe linii a unor frame-uri, se utilizeaz atributul

Se nlocuiete definiia FRAME-ul care afieaz coninutul fiierului five.html cu

Efectul este prezentat n figur, rezultatul fiind crearea a 4 frame-uri.

Nu exist o limitare a numrului de frame-uri care se pot grupa

Browser-ele care suport frame-uri ignor coninutul plasat ntre etichetele

Proprieti ale frame-urilor

BORDER=pixels - utilizat doar ncepnd cu Netscape Navigator 3 (sau

NORESIZE - mpiedic redimensionarea frame-ului. n lipsa lui, implicit,

Frame-uri legate (linking frames)

TARGET="_parent" - documentul se ncarc n aceeai pagin

Elementele unui formular HTML sunt:

casetele de tip password;

Pentru definirea casetelor de editare simple, a casetelor de tip password, a butoanelor

Dac TYPE=TEXT, atunci elementul introdus n formular este de tip caset de

Dac TYPE=PASSWORD, atunci elementul introdus n formular este o caset

Dac TYPE=RADIO, atunci elementul introdus n formular este un buton de

Dac TYPE=CHECKBOX, atunci elementul introdus n formular este o caset

Dac TYPE=SUBMIT, atunci elementul introdus n formular este un buton

Dac TYPE=RESET, atunci elementul introdus n formular este un buton

Observaie. Butoanele de tip submit i reset se plaseaz la final n formular,

Pentru definirea unei liste de selecie n cadrul unui formular se folosete

Pentru definirea unei casete de editare multilinie n cadrul unui formular

<textarea cols="50" rows ="3" name="descriere">

Tag-urile DIV i SPAN

Limbajul de stilizare CSS (Cascading Style Sheets)

Stilurile n linie se definesc chiar n codul HTML, n elementul care se dorete a fi