Introducere in HTML si CSS [631988]
1
Lucrarea 1
Introducere in HTML si CSS
1. Obiectivele lucrarii
Realizarea unei descrieri a limbajului de marcare HTML: ce este HTML, structura
unui document HTML, elemente de b aza HTML (tag-uri, atribute).
Realizarea unei descrieri a limbajului de stiliz are CSS: stiluri in linie, stiluri interne,
stiluri externe, clase CSS.
2. Limbajul de marcare HTML
2.1. Consideratii generale
HTML (Hypertext M arkup Language) este un limbaj de marcare care sta la baza
dezvoltarii oricarei pagini Web. Limbajul HTML consta intr-o se rie de etichete numite si tag-
uri care permit formatarea modului de afisar e a informatiei din pagina Web (folosirea unor
anumite font-uri, culori si stiluri pentru te xt, inserarea unor imag ini sau a unor tabele,
utilizarea listelor si a formularelor etc.).
Tag-urile HTML sunt incluse intre paranteze as cutite <>, majoritatea dintre ele fiind in
pereche, tag-ul de inceput avand sintaxa <..> iar tag-ul de sfarsit </..>. Unele dintre tag-urile
HTML permit precizarea unor car acteristici ale elementului pe care il introduc, sub forma
caracteristica=valoare , aceste caracteristici fiind numite atribute. O etichet ă poate avea unul,
nici unul, sau mai multe atribute.
Continutul unui document HTML nu este case-sensitive , cu alte cuvint e nu se face
diferenta intre litere mari si mici la nivelul etic hetelor si atributelor, insa valoarea unui atribut
poate fi case-sensitive , cum este cazul locatiilor fi sierelor si adreselor URL.
Un document HTML este un fisier care are extensia .htm sau .html . Pentru editarea
textului unui document HTML pot fi folosite orice tipuri de editoare, incepand cu editoare
simple cum ar fi Notepad, Textpad si ajung and la editoare mai complexe cum ar fi
Macromedia Dreamweaver. Doua dintre trasaturile de baza ale unui document HTML sunt independenta fata de
platforma si legaturile hypertext (hyperlink-uri).
Independenta fata de platforma este o tras atura care permite ca documentul HTML sa
fie afisat in mod asemanator pe diferite calcul atoare din punct de vedere al graficii, fontului,
culorii, lucru extrem de esential pentru un nu mar mare de vizitatori. Totusi, interpretarea
codului HTML poate sa fie diferita in functie de tipul de browser Web utilizat. Astfel un
document HTML poate fi afisat de catre un brow ser Internet Explorer intr-un anumit fel, iar
de catre alt browser (sper exemplu Mozilla Firefox) in alt fel.
Hyperlink-urile au o importanta majora in cadrul unui site Web, intrucat permit ca
orice cuvint, fraza, imagine sau element al unei pa gini Web sa faca referire la o alta pagina
Web sau chiar la paragrafe din interiorul acelei asi pagini, realizandu-se astfel navigarea cu
usurinta intre paginile unui site Web sau in tre partile componente al e aceleiasi pagini.
22.2. Etape parcurse pentru crearea si accesarea unei pagini Web
• se editeaza continutul documentului HT ML (paginii Web) cu un editor de text
• se salveaza fisierul astfel creat cu extensia .htm sau .html
• se acceseaza fisierul respectiv (pagina We b) dintr-un browser, printr-un double-click
pe acel fisier.
2.3. Structura unui document HTML
Structura de baza a unui docum ent HTML este urmatoarea:
<HTML>
<HEAD>
<TITLE>
Textul din aceasta sectiune va fi afisat 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>
Dupa cum se poate vedea mai sus, un docum ent HTML este incadrat intre tag-urile
<HTML> si </HTML> (care indicã începutul si finalul documentului) si contine:
• zonã de antet cuprinsã între tag-urile: <HEAD> … </HEAD>
• un corp delimitat de tag-urile: <BODY> … </BODY>.
Zona de antet poate fi utilizata pentru speci ficarea unor cuvinte cheie si informatii care
descriu pagina, indexabile de catre motoarele de cautare Web (pentru regasirea site-ului),
utilizand suplimentar in aceasta sectiune etichete de tip meta. In cadrul zonei de antet, se
poate specifica, de asemenea, titlul paginii Web, intre etichete le <TITLE>…</TITLE>, acesta
fiind afisat pe bara de titl u a ferestrei br owserului.
Sectiunea body contine continutul propriu-zis al paginii Web: text, tabele, liste,
imagini, formulare etc.
Acest format al documentului nu este ob ligatoriu, putand lip si atat sectiunea
<HEAD>, cat si tag-urile <HTML> si <BODY> , ramanand doar continutul paginii Web.
Totusi, se recomanda utilizar ea structurii de baza a unui docum ent HTML, continutul sau
fiind mai bine organizat si mai usor de urmarit in aceasta situatie.
2.4. Elemente de baza ale limbajului HTML
In continuare, se prezinta cele mai importa nte etichete (tag-uri) si atribute utilizate
pentru crearea paginilor Web.
Adaugarea unui background paginii Web
O pagina Web poate avea ca si background fie o culoare, fie o imagine, fie ambele. In
continuare se vor prezenta to ate cele 3 situatii posibile.
3• Pentru adaugarea unui backgr ound de tip culoare paginii Web se aplica etichetei
<BODY> atributul BGCOLOR care va avea ca va loare, 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.
In continuare se prezinta un exemplu pr in care pagina va primi un background de
culoare albastra, utilizand codul hexa al culorii:
<body bgcolor="#00ccff">
sau utilizând chiar numele culorii:
<body bgcolor="blue">
• Pentru adaugarea unui background de tip imagine paginii Web se aplica etichetei
<BODY> atributul BACKGROUND care va avea ca valoare, locatia imaginii care se
doreste a fi inserata.
Daca se doreste ca pagina Web sa aiba ca si background (fundal) fisierul imagine
“back1.jpg”, se folosest e urmatoarea sintaxa:
<body background="back1.jpg" >
• Pentru adaugarea unui backgr ound care sa aiba o anumita culoare si sa contina o
anumita imagine, se aplica etichetei <BODY> atat atributul BGCOLOR cat si
atributul BACKGROUND.
De multe ori se prefera sa se dea paginilo r Web atat o culoare de background cat si o
imagine, asa incat, in timpul de incarcare al imaginii, utili zatorii paginii sa poata vedea
culoarea de background:
<body bgcolor="#00ccff" background="back1.jpg">
Stabilirea culorii textului, folosind atributul TEXT al etichetei <BODY>
Culoarea textului unei pagini Web poate fi st abilita cu ajutorul atributului TEXT al
etichetei <BODY>, care poate lua ca valori, fie numele culorii dorite, fie codul hexa al
acesteia.
Exemplu:
<body text="blue">
sau:
<body text="#00ccff">
Atributele LEFTMARGIN si TO PMARGIN ale etichetei <BODY>
Aributul LEFTMARGIN al comenzii <BODY> se utilizeaza pentru stabilirea marginii
din stanga a paginii Web (a dist antei dintre marginea din stanga a fereastrei browser-ului si
continutul paginii). Aribut ul TOPMARGIN al comenzii <BODY> se utilizeaza pentru
stabilirea marginii de sus a paginii Web (a distantei dintre marginea de sus a ferestrei browser-ului si cont inutul paginii).
4 Aceste distante pot fi exprimate fie in pixeli, in acest caz at ributele LEFTMARGIN si
TOPMARGIN primind ca valori numere intreg i pozitive, fie in procente, reprezentand
distanta raportat la latimea respect iv inaltimea ferestrei browser-ului.
Exemplu:
<body leftmargin="100" topmargin="20%">
Etichete pentru formatarea textului
In continuare, vor fi prezentate cele mai im portante etichete de fo rmatare a textului, in
cadrul unei pagini Web.
• Tag-urile <H1>….<H6>
Tag-urile <H1>…<H6> sunt folosite pentru dimensionarea si ingrosarea fonturilor
pentru titlurile de capitole. Text ul scris intre tag-urile <H1>…</H1 > va fi afisat cu caracterele
cele mai mari, in timp ce textul scris intre ta g-urile <H6>…</H6> va aparea cu caracterele
cele mai mici., dupa cum se poate vedea in exemplul urmator:
<H1>Exemplu </H1>
<H2> Exemplu </H2>
<H3> Exemplu </H3>
<H4> Exemplu </H4>
<H5> Exemplu </H5>
<H6> Exemplu </H6>
• Tag-ul <FONT> si atributel e sale COLOR, FACE, SIZE
Pentru a stabili caracteristicile unui text din cadrul paginii Web, se incadreaza intre
tag-urile <FONT>…</FONT> textul respectiv si se folosesc atribut ele etichetei <FONT>:
¾ COLOR – stabileste culoarea fontului.
¾ FACE – stabileste tipul fontului.
¾ SIZE – stabileste marimea fontul ui, putand lua valori intre 1 si 7 (1 se foloseste pentru
cea mai mica dimensiune, iar 7 pentru cea mai mare dimensiune).
In continuare se prezinta un exemplu de fo rmatare a textului cu ajutorul etichetei
<FONT>, utilizand cele 3 atribute ale sale, care sunt optionale:
<font color=”#ff0000” face=”Arial” size=”2”> Exemplu </font>
5Tag-ul <B>
Daca se doreste ca un anumit text sa fie sc ris cu caractere ingrosate se foloseste
perechea de etichete <B>…</B>.
Exemplu:
<b>Text bold</b>
Text bold
• Tag-ul <I>
Daca se doreste ca un anumit text sa fie scris cu caractere italice se foloseste perechea
de etichete <I>…</I>.
Exemplu:
<i>Text italic</i>
Text italic
• Tag-ul <U>
Daca se doreste ca un anumit text sa fie subl iniat se foloseste perechea de etichete
<U>…</U>.
Exemplu:
<u>Text subliniat</u>
Text subliniat
• Tag-ul <STRIKE>
Tag-ul <STRIKE> are rolul de a afisa un text taiat pe la mijloc cu o linie orizontala.
Exemplu:
<strike>Text taiat pe la mijloc cu o linie orizontala</strike>
Text taiat pe la mijloc cu o linie orizontala
• Tag-ul <BR>
Tag-ul <BR> provin e de la cuvantul break, nu are tag de inch eiere si are ca efect
trecerea la linia urmatoare, in momentul in care este apelat.
In continuare se prezinta un exemplu prin ca re se evidentiaza efectul utilizarii tag-ului
<BR>:
<body>
Text1.<br>Text2.<br>Text3.
</body>
Text1.
Text2.
Text3.
6• Tag-ul <P>
Tag-ul <P> provine de la cuvantul paragraph si are ca efect separa rea textului cuprins
in perechea de etichete <P>…</P> de restul documentului, printr-un rand liber deasupra si un
rand liber dedesubtul sau.
Exemplu:
<body>
Text1.<p>Text2.</p>Text3.
</body>
Text1.
Text2.
Text3.
In cadrul unui paragraf se poate controla si m odul in care este aliniat textul, cu ajutorul
atributului ALIGN al tag-ului <P>. Acest atribut poa te lua una din urmatoarele valori: left,
center și right . Spre exemplificare, pentru a alinia un text la marginea din dreapta a
documentului avem sintaxa:
<body>
<p align=”right”>Text.</p>
</body>
Text.
• Tag-ul <PRE>
Tag-ul <PRE> asigura afisarea textelor ed itate cu caracterele „spatiu”, „tab” si
„CR/LF” exact in forma in care ele au fost scrise in documentul HTML.
Exemplu:
<PRE>
Text1.
Text2.
Text3.
</PRE>
Text1.
Text2.
Text3.
• Tag-ul <CENTER>
Perechea de tag-uri <CENTER>…</CENTER> are rolul de a plasa textul aflat in
cadrul ei, in centrul paginii.
Exemplu:
<center><b><i>Text centrat, bold si italic</i></b></center>
7Text centrat, bold si italic
Se poate observa, in exemplul de mai sus, ca pot exista tag-uri imbricate care se aplica
asupra unui text, ele inchiza ndu-se in ordine inversa ce lei in care sunt deschise.
• Tag-ul <HR> si atributele sale ALIGN, SIZE, WIDTH
Prin utilizarea tag-ului <HR> se asigura se pararea unor portiuni de text prin trasarea
intre ele a unei linii orizontale. Cu ajutorul atributelor tag-ului <HR> se pot seta parametrii liniei si anume: alinierea (ALIGN), l ungimea (SIZE) si latimea (WIDTH).
Exemplu:
<hr width=”30%” size=”2” align=”right”>
Inserarea de imagini intr-o pagina Web
Pentru inserarea unei imagini intr-o pagina Web se utilizeaza eticheta <IMG>, care are
atributele: SRC,WIDTH si HEI GHT. Atributul SRC specifica im aginea care se doreste a fi
inserata, luand ca valoare adresa URL a aces teia. Atributele WIDTH si HEIGHT sunt
optionale si se utilizeaza pent ru stabilirea unei noi dimensi uni a imaginii, alta decat cea
originala. Aceste atribute pot lua ca valo ri fie numere intregi pozitive, reprezentand
dimensiunea in pixeli a imaginii, fie numere de la 1 la 100 urmate de semnul „%”,
reprezentand procente din dime nsiunea originala a imaginii (lat ime, respectiv inaltime). In
lipsa acestor atribute, imaginea va fii afisata pe ecran la dimensiunea ei originala.
In continuare se prezinta un exemplu de u tilizare a etichetei <IMG> si a atributelor
sale:
<img src=”actori.jpg” width=”200” height=”30%”>
Adaugarea de legaturi (hyperlink-uri)
Hyperlink-urile reprezinta elementele de baza ale WWW (World Wide Web), ele
realizand legaturi intre un numa r urias de pagini Web. Adaugar ea de legaturi (hyperlink-uri)
unui document HTML, permite legarea acestuia, fie de documente locale, din interiorul
aceluiasi site Web, fie de docum ente exterioare din WWW.
Realizarea de legaturi se f ace cu ajutorul etichetei anco ra <A> si a atributului sau
HREF, prin intermediul caruia se specifica URL-ul (Uniform Resource Locator) care trebuie
urmat, dupa ce se face click pe legatura respectiva.
In continuare se va prezenta un exemplu de legatura de tip text ce va conduce spre
site-ul Google (spre un document extern din WWW):
<a href="http://www.google.com">Apasati aici pentru Google!!!</a>
Realizarea de legaturi catre documente locale, din interiorul aceluiasi site Web,
necesita sa se specifice calea comple ta si corecta catre acel document.
8Exemplu:
<a href="doc2.htm">Apasati aici pentru urmatorul document </a>
<a href="subdir/doc2.htm">Apasati aici pentru urmatorul document</a>
Se pot realiza legaturi si folosind imagini, substituind textul cu eticheta <IMG>.
Astfel, cand se va face click pe im agine, se va deschide pagina re ferita prin atributul HREF al
etichetei ancora <A>.
Exemplu:
<a href= http://www.google.com ><img src="actori.jpg"></a>
In cadrul acestui exemplu, apasand pe imagin ea afisata pe ecran „actori.jpg”, se va
deschide pagina www.google.com .
Se pot stabili culori pent ru legaturi, utilizand atribu tele LINK, VLINK, ALINK ale
etichetei <BODY>, in felul urmator:
– culoare pentru legaturile nefolosite, pe care inca nu s-a efectuat click –
LINK=”culoare”;
– culoare pentru legaturile deja folosite, pe care s-a efectuat cel pu tin o data click –
VLINK=”culoare”;
– culoare pentru legaturile mome ntan active (deasupra carora se afla apasat mouse-ul la
un moment dat) – ALINK=”culoare”, unde culoare poate fi, fie numele culorii dorite,
fie codul hexa al acesteia.
Liste
O lista contine o succesiune de articole ( item-uri). Exista trei categorii de liste:
• liste neordonate;
• liste ordonate;
• liste de definitii.
Modul in care vor fi afisate articolele pe ecran va fi determinat de tipul de lista folosit.
1. Liste neordonate
O lista neordonata este delimita ta de perechea de etiche te <UL>..</UL>, iar fiecare
element al listei este precedat de eticheta <LI>. Aceasta eticheta – <LI> – realizeaza
indentarea elementelor listei si plasarea in fata fiecarui elemen t, a unui caracter de marcare:
bulina, patrat sau cerc. Caracterul de marcare util izat se stabileste prin intermediul atributului
TYPE, care poate fi folosit atat cu eticheta <UL> cat si cu etiche ta <LI>, si care poate lua una
din valorile: – „CIRCLE” – pentru aparitia in fa ta elementelor listei a simbolului ○
– „DISC” – pentru aparitia in fata elementelor listei a simbolului ●
– „SQUARE” – pentru aparitia in fa ta elementelor listei a simbolului ș
In cazul in care nu se indica prin atributul TYPE, caracterul de marcare care sa apara
in fata elementelor listei, se va activa in mod implicit simbolul ●.
Exemplu:
<body>
<ul type="square">Exemplu de lista neordonata
<li> Articol 1
<li> Articol 2
9<li> Articol 3
</ul>
<body>
Exemplu de lista neordonata ș Articol 1
ș Articol 2
ș Articol 3
2. Liste ordonate
O lista ordonata este delimitata de perechea de etichete <OL>..</OL>, iar fiecare
element al listei este precedat de eticheta <LI>. Aceasta eticheta – <LI> – realizeaza
indentarea elementelor listei si nu merotarea lor, in 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 folos it atat cu eticheta <OL> cat si cu eticheta
<LI>, si care poate lu a una din 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 el ementelor listei cu i,ii,iii,…
– „1” – pentru o numerotare a elementelor listei cu 1,2,3,…
In cazul in care nu se indica prin atributul TY PE tipul de numerotare dorit, se va activa
in mod implicit o numerotare a el ementelor listei sub forma: 1,2,3…
Eticheta <OL> dispune, de asemenea, de atributul START, care stabileste de la ce
valoare va incepe numerotarea elem entelor listei. Acest atribut trebuie sa fie un numar intreg
pozitiv, indiferent de atributul TYPE.
Exemplu:
<body>
<ol type="i" start=”2”>Exemplu de lista ordonata
<li>Articol 1
<li>Articol 2
<li>Articol 3
</ol>
</body>
Exemplu de lista ordonata ii. Articol 1 iii. Articol 2 iv. Articol 3
3. Liste de definitii
Listele de definitii afis eaza o lista de articole, fiecare articole avand forma termen-
definitie . O lista de definitii este delimitata de perechea de etichete <DL>..</DL>. Termenii
din cadrul listei vor fi indicati de etichetele <DT>..</DT>, iar definitiile corespunzatoare
acestor termeni vor fi specificate de etichetele <DD>..</DD>. Tag-urile de incheiere </DT>, respectiv </DD> sunt optionale.
10Exemplu:
<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>
Exemplu de lista de definitii Teremnul 1
Definitie termen 1
Teremnul 2
Definitie termen 2
Observatie: In cadrul oricarei liste sunt permise imbricari cu alte li ste, fie de acealsi tip, fie
de tipuri diferite.
Exemplu:
<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>
Exemplu de lista neordonata ș Exemplu 1 – lista ordonata
ii. Articol 1
iii. Articol 2 iv. Articol 3
ș Exemplu 2
ș Exemplu 3
Tabele
Tabelele sunt elemente de baza ale limbaju lui HTML. Ele sunt utilizate ca modalitate
de afisare a informatiei (text sau grafica) in cadrul unei pagini We b, permitand organizarea
datelor pe linii si coloane. Un tabel este inserat in cadrul unui docum ent HTML prin intermediul perechii de
etichete <TABLE>..</TABLE>. Liniile de tabel se construiesc succesiv (mai intai o linie,
apoi alta linie s.a.m.d), cu ajutorul perechii de etichete <TR>..</TR> (t able row). Dupa ce se
construieste o linie de tabel (un rand), in cadru l acesteia, trebuie sa se defineasca cel putin un
11header (un cap de tabel) sau un element de tip date (o celula), cu ajutorul etichetelor
<TH>…</TH>(table header), respectiv <TD>..</ TD>(table date). Textul din interiorul unei
celule cu statut de cap de tabe l (adica construita cu perechea de etichete <TH>..</TH>) va fi
afisat implicit cu caractere aldine si centrat.
Pentru a da un titlu tabelului, se utilizeaza perechea de etichete
<CAPTION>..</CAPTION>, pozitionata in zona de definire a tabelului, inaintea construirii
liniilor si coloanelor (i nainte de etichetele <T R>, respectiv <TD>) .
In continuare, se prezinta sintaxa de baza pentru crearea unui tabel, cu 3 linii (dintre
care una reprezinta capul de tabel) si 2 coloane:
<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>Robu</td>
<td>Andreea</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Deatcu</td>
<td>Laura</td>
<td>9</td>
</tr>
</table>
</body>
Efectul pe ecran este urmatorul:
Fig. 1.1. Exemplu de tabel HTML neformatat.
Eticheta <TABLE> dispune de un set de atribu te optionale, cu ajutorul carora se poate
realiza un control global asupra tabelului, obtinandu-se astfel designul dorit. O parte dintre
aceste atribute vor fi prezentate in continuare:
• atributul BORDER= valoare este utilizat pentru crearea unei borduri in jurul tuturor
celulelor tabelului. Valoarea acestui atribut este un numar intreg pozitiv care
reprezinta latimea bordurii in pixeli. In cazul in care nu se utilizeaza acest atribut sau
valoarea sa este 0, nu va aparea nici o bor dura in jurul celulelor tabelului.
12• atributul WIDTH= valoare/procente este utilizat pentru stabilirea latimii tabelului.
Acest atribut poate lua ca valoare fie un nu mar intreg pozitiv, reprezentand latimea in
pixeli a tabelului, fie un numar de la 1 la 100 urmat de semnul „%”, reprezentand
procente din latimea paginii.
• atributul HEIGHT= valoare/procente este utilizat pentru stab ilirea inaltimii tabelului.
Acest atribut poate lua ca valoare fie un numar intreg pozitiv, reprezentand inaltimea
in pixeli a tabelului, fie un numar de la 1 la 100 urmat de semnul „%”, reprezentand
procente din inaltimea paginii.
• atributul ALIGN= left/right/center este utilizat pentru a spec ifica modul de aliniere a
tabelului in pagina. Acest atribut poate lua valorile:
– LEFT- asigura alinierea tabelului in stanga paginii (implicit);
– RIGHT – asigura alinierea tabelului in dreapta paginii;
– CENTER – asigura alinierea ta belului in centrul paginii.
• atributul CELLSPACING= valoare – are rolul de a specifica distanta in pixeli dintre
celulele vecine ale tabelului.
• atributul CELLPADDING= valoare – are rolul de a specifica distanta in pixeli dintre
marginea unei celule si continutul ei.
• atributul BGCOLOR= culoare/cod_hexa – are rolul de a speci fica 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, lo catia imaginii care se doreste a fi inserata .
In continuare se va prezenta un exemplu de utilizare a atributelor etichetei <TABLE>
(atribute ce asigura un cont rol global al tabelului):
<body>
<table align="center" border="3" bgcolor="#00CC00"
bordercolor="blue" cellspacing="10" cellpadding="10">
<caption>Tabel 2</caption>
<tr>
<th>Id</th>
<th>Nume</th>
<th>Prenume</th>
<th>Nota</th>
</tr>
<tr>
<td>1</td>
<td>Robu</td>
<td>Andreea</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Deatcu</td>
<td>Laura</td>
<td>9</td>
</tr>
</table>
</body>
13Efectul pe ecran este urmatorul:
Fig. 1.2. Exemplu de tabel HTML formatat global.
Eticheta <TR> dispune de un set de atribu te optionale, cu ajutorul carora se poate
realiza controlul unei lin ii a tabelului, obtinanadu-se astfel designul dorit pe ntru acea linie. O
parte dintre aceste atribute vor fi prezentate in continuare:
• atributul BGCOLOR= culoare/cod_hexa – are rolul de a speci fica 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
orizontala a continutului celul elor unui rand din tabel. Aces t atribut poate lua valorile:
– LEFT- asigura alinierea continutului la stanga celulei (implicit);
– RIGHT – asigura alinierea cont inutului la dr eapta celulei;
– CENTER – asigura alinierea co ntinutului in centru celulei.
• atributul VALIGN= left/right/center este utilizat pentru a specifica alinierea pe
verticala a continutului celulelor unui rand di n tabel. Acest atribut poate lua valorile:
– TOP – asigura alinierea continutul ui in partea de sus a celulei;
– BOTTOM – asigura alinie rea continutului in pa rtea de jos a celulei
– MIDDLE – asigura alinierea continutului la mijlocul celulei (implicit).
Observatie. Atributul BACKGROUND nu se poate aplica decat etichetelor <TABLE>,
respectiv <TD>.
In continuare se va prezenta un exemplu de utilizare a atribut elor etichetei <TR>
(atribute ce asigura controlul asupra modul ui de afisare a unui rand din tabel):
<body>
<table align="center" border="3" bordercolor="blue" cellspacing="10"
cellpadding="10" width="350" height="220">
<caption>Tabel 3</caption>
<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>Robu</td>
<td>Andreea</td>
<td>10</td>
14</tr>
<tr bgcolor="#0099FF" align="left" valign="bottom">
<td>2</td>
<td>Deatcu</td>
<td>Laura</td>
<td>9</td>
</tr>
</table>
</body>
Efectul pe ecran este urmatorul:
Fig. 1.3. Exemplu de tabel HTML formatat la nivel de linie.
Eticheta <TD> dispune de un set de atribute optionale, cu ajutorul carora se poate
realiza controlul individual al celulelor tabelului, obtinandu-se astfel de signul dorit pentru
fiecare celula in parte. Cele mai importante dintre acestea vor fi prezentate in continuare:
• atributul BGCOLOR= culoare/cod_hexa – are rolul de a speci fica culoarea fundalului
unei celule a tabelului. Acest atribut poate lu a ca valoare, fie nume le 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, locatia imaginii care se doreste
a fi inserata .
• atributul ALIGN= left/right/center este utilizat pentru a specifica alinierea pe
orizontala a continutului unei celule din tabel. Acest atribut poate lua valorile:
– LEFT- asigura alinierea continut ului la stanga celulei;
– RIGHT – asigura alinierea cont inutului la dr eapta celulei;
– CENTER – asigura alinierea co ntinutului in centru celulei.
• atributul VALIGN= left/right/center este utilizat pentru a specifica alinierea pe
verticala a continutului unei celule din ta bel. Acest atribut poate lua valorile:
– TOP – asigura alinierea continutul ui in partea de sus a celulei;
– BOTTOM – asigura alinie rea continutului in pa rtea de jos a celulei
– MIDDLE – asigura alinierea continutului la mijlocul celulei (implicit).
• atributul WIDTH= valoare/procente este utilizat pentru st abilirea latimii unei celule a
tabelului. Acest atribut poate lua ca valoare fie un numar intreg pozitiv, reprezentand
latimea in pixeli a celulei, fie un numar de la 1 la 100 urmat de semnul „%”, reprezentand procente din latimea tabelului.
15• atributul HEIGHT= valoare/procente este utilizat pentru stabilirea inaltimii unei celule
a tabelului. Acest atribut poate lua ca valo are fie un numar intreg pozitiv, reprezentand
inaltimea in pixeli a celulei, fie un numar de la 1 la 100 urmat de semnul „%”,
reprezentand procente din inaltimea tabelului.
In continuare se va prezenta un exemplu de utilizare a atribut elor etichetei <TD>
(atribute ce asigura controlul individual al fiecarei celule a tabelului):
<body>
<table align="center" border="3" bordercolor="blue" cellspacing="10"
cellpadding="10" width="30%" height="35%">
<caption>Tabel 4</caption>
<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”>Robu</td>
<td bgcolor="#ff1133" width="40%" valign=”middle”>Andreea</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”>Deatcu</td>
<td bgcolor="#ff1133" valign=”middle”>Laura</td>
<td bgcolor="#00CCFF" valign=”bottom”>9</td>
</tr>
</table>
</body>
Efectul pe ecran este urmatorul:
Fig. 1.4. Exemplu de tabel HTML formatat la nivel de coloana.
16Observatie. Toate atributele prezentate mai sus (corespunzatoare etichetei <TD>) sunt
valabile si pentru eticheta <TH> (table header).
Uneori, pentru a obtine un tabel cu aspectul dorit, este necesara un irea celulelor in asa
fel incat o celula sa contina doua sau mai multe ra nduri si/sau doua sau mai multe coloane.
Pentru aceasta se utilizeaza atributele COLS PAN si ROWSPAN, prezentate in continuare:
• COLSPAN= valoare – specifica cate coloane sunt cuprinse intr-o celula;
• ROWSPAN =valoare – specifica cate linii sunt cuprinse intr-o celula.
Exemplu:
<body>
<table border="2" width="20%" height="20%" align="center">
<caption>Tabel 5</caption>
<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>Robu</td>
<td>Andreea</td>
<td>10</td>
</tr>
<tr bgcolor="#0099FF">
<td>2</td>
<td>Deatcu</td>
<td>Laura</td>
<td>9</td>
</tr>
</table>
</body>
Efectul pe ecran este urmatorul:
Fig. 1.5. Exemplu de tabel HTML formatat cu atributele colspan si rowspan .
17
Formulare
Formularele sunt elemente importante ale li mbajului HTML care as igura interactiunea
cu utilizatorii paginii Web Cu ajutorul formularelor , se preiau o serie de date de la vizitatorii
paginii Web, care ulterior, vor fi procesate pr in intermediul unor scripturi (in cazul de fata
scripturi PHP) sau vor fi transm ise catre o adresa de e-mail.
Un formular HTML este definit intr e etichetele <FORM>..</FORM>. Tag-ul
<FORM> are doua atribute foarte importante: ACTION si METHOD.
• Atributul ACTION poate lua ca valoare, fie ad resa URL a scriptului care va primi si
va procesa datele introduse in formular, fie adresa de e-mail, catre care vor fi
transmise aceste date.
• Atributul METHOD specifica metoda de tran smitere a datelor, care poate fi GET sau
POST. Metoda GET se utilizeaza atunci cand se doreste transmisia unor cantitati mici
de date. Aceste date vor fi vi zibile in bara de navigare a browser-ului, fiind adaugate la
adresa indicata de action. Metoda POST se utilizeaza pent ru tansmiterea unor cantitati
mari de date, in general , si este mai des utilizata. Datele transmise cu metoda POST
nu apar in linia de apelare a scriptului, asa cum se intampla in cazul utilizarii metodei
GET.
Elementele unui formular HTML sunt:
• casetele de editare simple;
• casetele de tip password ;
• butoanele radio;
• casetele de validare;
• listele de selectie;
• casetele de editare multilinie;
• butoanele submit si reset.
Pentru definirea casetelor de ed itare simple, a ca setelor de tip password , a butoanelor
radio, a casetelor de validare, respectiv a butoa nelor de tip submit si reset, in cadrul unui
formular, se foloseste et icheta <INPUT>, care are urmatoarele atribute:
• atributul NAME – valoarea sa reprezinta num ele sub care se transmite catre server
continutul acestui element;
• atributul VALUE – are rolul de a atribui o valoare elem entului definit in cadrul
formularului (val oare implicita);
• atributul TYPE – valoarea sa precizeaza tipul elementului definit prin intermediul tag-
ului <INPUT>, dupa um urmeaza:
– Daca TYPE=TEXT, atunci elementul introdus in formular este de tip caseta de editare,
continutul acestei casete reprezentand valo area transmisa spre server. In aceasta
situatie, tag-ul <INPUT> dispune si de atributele SIZE – care precizeaza lungimea
casetei de editare) si MAXLENGTH – care sp ecifica numarul maxim de caractere care
pot fi introduse in campul de editare.
Exemplu:
<input name="variabila" type="text" value="exemplu de caseta de
editare" size="20" maxlength="30">
– Daca TYPE=PASSWORD, atunci elementul in trodus in formular este o caseta de
editare de tip „password”, care se caracter izeaza prin aceea ca textul din cadrul ei nu
18apare explicit (ca si in cazul casetelor de ed itare de tip text) ci apare codificat cu
caracterul „*”.
Exemplu:
<input name="parola" type="password" size="20" maxlength="30">
– Daca TYPE=RADIO, atunci elementul introdus in formular este un buton de tip radio.
Butoanele de tip radio se utilizeaza in gr up, fiind caracterizate prin aceea ca doar o
optiune poate fi selectata la un moment dat, selectarea uneia provocand automat
deselectarea tuturor celorlalte. Butoanele de tip radio se folosesc in situatiile in care
avem mai multe variante de raspuns, si se doreste selectarea doar a uneia. In cazul
butoanelor radio, comanda <INPUT> dis pune si de atributul CHECKED, care
specifica care buton radio din grup este setat implicit. Butoanele radio ce fac parte din
acelasi grup vor avea acelasi nume.
Exemplu:
Care este fructul dumneavoastra preferat?
<input type="radio" name="variante" value="a" checked>banane<br>
<input type="radio" name="variante" value="b">portocale<br>
<input type="radio" name="variante" value="c">mere<br>
<input type="radio" name="variante" value="d">piersici<br>
<input type="radio" name="variante" value="e">struguri<br>
– Daca TYPE=CHECKBOX, atunci elementul intr odus in formular este o caseta de
validare. Casetele de validare se utilizeaza in grup, si se caracterizeaza prin aceea ca
mai multe optiuni pot fi selectate/deselectate la un moment dat. Casetele de validare se
folosesc in situatiile in care se doreste selectarea mai multora di ntre variantele de
raspuns pe care le avem la dispozitie. In cazul checkbox-urilor, comanda <INPUT>
dispune si de atributul CH ECKED, care specifica care checkbox din grup este setat
implicit.
Exemplu:
Care sunt fructele dumneavoastra preferate?
<input type="checkbox" name="varianta1" checked> banane<br>
<input type="checkbox" name="varianta2" checked> portocale<br>
<input type="checkbox" name="varianta3"> mere<br>
<input type="checkbox" name="varianta4"> piersici<br>
<input type="checkbox" name="varianta5"> struguri<br>
– Daca TYPE=SUBMIT, atunci elementul introdus in formular este un buton destinat
transmiterii catre server a datelor din form ular (in exemplul nostru datele se vor
transmite catre adresa de email care este data ca valoare la atribu tul action din tag-ul
form). In aceasta situatie, valoarea specifica ta prin atributul VALUE va fi pozitionata
pe suprafata ce reprezi nta butonul respectiv.
Exemplu:
<input type="submit" value="trimite">
– Daca TYPE=RESET, atunci elementul introdus in formular este un buton specializat
sa aduca toate elemntele din cadrul formularul ui la valorile implicite. Ca si in cazul
19anterior, valoarea specificata prin atributul VALUE va fi pozitionata pe suprafata ce
reprezinta butonul respectiv.
Exemplu:
<input type="reset" value="anulare">
Observatie. Butoanele de tip submit si reset se plaseaza la final in formular, dupa definirea
tuturor celorlate elemen te ale formularului.
Pentru definirea unei liste de selectie in cad rul unui formular se foloseste perechea de
etichete <SELECT>…</SELECT>. O lista de se lectie este formata dintr-un numar de
elemente dintre care doar unul poate fi se lectat la un moment dat, selectarea unuia
determinand, implicit, deselectarea celorlalte. Elem entele unei liste de se lectie sunt definite
prin intermediul tag-ului <OPTION>, atributul VALUE al acestui tag fiind folosit pentru
atribuirea de valori acestor elemente. Atribut ul SELECTED al tag-ul ui <OPTION> indica
care element al listei es te selectat implicit.
Atributele tag-ului <SELECT> sunt:
– NAME- a carui valoare reprezinta numele listei de selectie. Acestui nume i se va
asocia o valoare, data de atributul VALUE al etichetei <OPTI ON>, corespunzatoare
elementului selectat din lista;
– SIZE – specifica cate elemente ale listei sa fie vizibile pe ecran la un moment dat,
restul urmand sa apara pe ecran dupa ce se face un click cu mouse-ul pe bara de
derulare a listei. Implicit, SIZE=1.
Observatie. Utilizarea atributului MULTIPLE al tag-ul ui <SELECT> permite selectarea mai
multor elemente ale listei simultan.
Exemplu:
<select name="orase">
<option value="arad">arad</option>
<option value="brasov">brasov</option>
<option value="bucuresti">bucuresti</option>
<option value="craiova">craiova</option>
<option value="timisoara" selected>timisoara</option>
</select>
Pentru definirea unei casete de editare multilinie in cadrul unui formular se foloseste
perechea de etichete <TEX TAREA>…</TEXTAREA>. Acest ti p de caseta se utilizeaza
atunci cand se doreste introducer ea unui text mai mare (pe mai multe randuri) in campul de
editare. Cele mai importante atribute ale tag-ului < TEXTAREA> sunt:
– NAME – a carui valoare reprezinta numele cas etei de editare multilinie. Textul scris in
caseta de editare va fi transmis serverului sub acest nume;
– COLS – are rolul de a preciza numarul de caractere ale fiecarui rand;
– ROWS – are rolul de a preciza numarul de randuri ale case tei de editare.
Exemplu:
<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>
20In continuare, se urmareste realizarea unui formular, care sa con tina toate elementele
prezentate mai sus, dupa cum se poate vedea in cele ce urmeaza:
<html>
<html>
<head>
<title>
Exemplu de formular
</title>
</head>
<body>
<form action="mailto:andreea.robu@aut.upt.ro" method="post">
<table border="4" bgcolor="#00CC33" bordercolor="#0066FF"
align="center">
<caption>Va rugam completati formularul de mai jos:</caption>
<tr>
<td>Nume:</td>
<td><input name="nume" type="text" size="15" maxlength="30"></td>
</tr>
<tr>
<td>Prenume:</td>
<td><input name="prenume" type="text" size="15" maxlength="30"></td>
</tr>
<tr>
<td>Parola:</td>
<td><input name="parola" type="password" size="15"
maxlength="30"></td>
</tr>
<td>Sex:</td>
<td>
<input name="sex" type="radio" value="f" checked> feminin
<input name="sex" type="radio" value="m"> masculin
</td>
</tr>
<tr>
<td>Vasta:</td>
<td>
<select name="varsta">
<option value="categorie1">sub 15 ani</option>
<option value="categorie2">15 – 20 ani</option>
<option value="categorie3" selected>20 – 25 ani</option>
<option value="categorie4">25 – 30 ani</option>
<option value="categorie5">30 – 40 ani</option>
<option value="categorie6">peste 40 ani</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
Ce marci de tigari fumati cel mai des?<br>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" name="Pall Mall" checked> Pall Mall
<input type="checkbox" name="Marlboro"> Marlboro
<input type="checkbox" name="Kent"> Kent
21<input type="checkbox" name="Winston"> Winston
</td>
</tr>
<tr>
<td colspan="2">
Pareri despre marca PALL MALL:
</td>
</tr>
<tr>
<td colspan="2">
<textarea name="pareri" cols="40" rows="5"></textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Trimite">
<input type="reset" value="Anulare">
</td>
</tr>
</table>
</form>
</body>
</html>
Efectul pe ecran este urmatorul:
Fig. 1.6. Exem plu de formular HTML.
In urma apasarii butonului Submit, datele din formular vor fi transmise catre adresa de
email sub forma:
22
Fig. 1.7. Transmisie de parametri catre o adresa de email.
Tag-urile DIV si SPAN
Tag-urile <div></div> creeaza sectiuni de bl ocuri in pagina WEB, al caror continut
poate fi formatat diferit, pentru fiecare bloc in parte. Tag-urile <div></div> sunt unele dintre
cele mai utilizate elemente HTML, deoarece in combinatie cu elemente CSS determina o
grafica deosebita a paginii WEB.
In 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. Cadrel e in care acestea sunt
adaugate pot avea propriul fundal (background), lungime, inaltime si margini.
Tag-urile DIV accepta un singur atribut HTML, align , folosit pentru alinierea pe
orizontala a continutului, care poate avea urmatoarele valori:
– left pentru aliniere la stanga;
– right pentru aliniere la dreapta;
– center pentru aliniere in centru;
– justify pentru a asigura distanta egala a textului fata de margini.
Tag-urile <span></span> permit formatarea separata a unei portiuni dintr-un context
si se folosesc in combinatie cu elemente C SS. In lipsa elementelor CSS, ele nu au niciun
efect, nefolosind niciun atribut HTML special.
Observatie. Avand in vedere ca tag-urile DIV si SPAN necesita o formatare realizata cu
ajutorul limbajului CSS, vom reveni cu ex emple de utilizare a acestor tag-uri dupa
prezentarea principalelor elemente CSS.
233. Limbajul de stilizare CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets), in romana avand denumirea foi de stil in cascada ,
reprezinta un limbaj de stilizare care permite formatarea elementelor unui document scris intr-
un limbaj de marcare (HTML, XML etc.). In cadr ul acestui material, vom prezenta utilitatea
elementelor CSS in stilizarea ta g-urilor HTML ce stau la baza dezvoltarii paginilor WEB.
Codul HTML se utilizeaza, de obicei, pentru plasarea continutului in pagina WEB,
detaliile legate de afisare (culori, font-uri, fundaluri, margini, etc. ) fiind asigurate de
elementele CSS.
CSS este conceput în primul rând pentru a of eri posibilitatea separa rii documentului ca
și conținut (scris în HTML sau un Markup Language similar) de documentul de prezentare
(scris în CSS). Aceast ă separare îmbun ătățeste accesibilitatea con ținutului, ofera o mai mare
flexibilitate și asigura 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.
Stiluri in linie
Stilurile în linie se definesc chiar în codul HTML, în elementul care se doreste a fi
stilizat. Pentru adaugarea unui stil intern la un element se foloseste atributul style urmat de
proprietati si valori, folo sind urmatoarea sintaxa:
<element style="proprietate:valoa re; proprietate:valoare;"></element>
Exemplu:
<p style="color: #ff1111; font-size:30;">Exemplu de utilizare a
stilurilor in linie!</p>
Efect:
Fig. 1.8. Exemplu de utilizare a stilurilo rin linie CSS.
Stilurile in linie nu permit schimbari rapide si facile, pe mai multe fisiere in acelasi
timp, fiecare element HTML necesitand a fi c ontrolat, pe fiecare pagina in parte.
Stiluri interne
Stilurile interne se definesc in sectiunea <head></head> a documentului HTML, cu
ajutorul urmatoarei sintaxe < style type="text/css"> … </style> . In cadrul acestui tag, se vor
defini proprietatile si valo rile pentru diverse stiluri.
Aceasta metoda este utila cand se doreste fo losirea acelorasi stiluri pentru mai multe
tag-uri HTML de acelasi tip din documentul HTML curent (tabele, liste, formulare etc.).
Astfel, stilurile folosite pentru formatare sunt scrise o singura data in document, si nu la
fiecare element ce se doreste a fi formatat.
Exemplu:
24<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>
Efect:
Fig. 1.9. Exem plu de utilizare a stilurilo rinterne CSS.
Dupa cum se poate observa, toate tabele le din documentul HTML curent vor fi
formatate de stilul intern definit. Stilurile interne nu actioneaza decat asupra documentelor in care sunt definite, nu si asupra altor documente, astfel daca este necesara modificarea unor
proprietati, trebuie actionat in fiecare document in parte.
Stiluri externe
In cadrul acestei metode de lucru, proprietatil e si valorile pentru diverse stiluri sunt
specificate intr-un fisier extern care are extensia "css", pe car e il putem construi cu orice
25editor de text (Notepad, Wordpa d, Dreamweaver etc.). Fisierele css nu contin cod HTML, ci
doar CSS.
Avantajul folosirii fisierelor externe css consta in faptul ca aceleasi stiluri pot fi
folosite de mai multe pagini din site, chiar de tot site-ul, fiind scrise o singura data. De
asemenea, orice modificare necesara asupra unui stil, va trebui operata intr-un singur loc. Pe de alta parte, stilurile externe ajuta la micsorarea ca marime a documentelor HTML, care astfel se incarca mai repede.
Pentru a referi un fisier extern CSS intr-un document HTML, se adauga in sectiunea
<head></head> a documentului care va folosi acel fisier cu stiluri, urmatoarea comanda: <link href="fisier.css" rel="stylesheet" type="text/css"> , unde valoarea lui "href"
reprezinta calea si numele fisierului css folosit.
În continuare, se prezint ă un exemplu de referire a unui fi șier extern css în doua
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>
<link href="StilExt.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<caption>Document 2</caption>
<tr>
<td>
Exemplu de utilizare a stilurilor externe!
</td>
</tr>
</table>
</body>
</html>
Fișierul CSS referit și utilizat în paginile HTML anterioare (StilExt.css) se considera a
avea urmatoarea structura:
caption
{
font-family: "Times New Roman";
font-size: 24px;
26color: #000000;
}
table
{
font-family: "Times New Roman";
font-size: 22px;
color: #FFFFFF;
background-color: #00cc33;
border: 4px double #0033FF;
text-align: center;
}
Efect:
Fig. 1.10. Exem plu de utilizare a stilurilo rexterne CSS.
Clase CSS
Clasele CSS se utilizeaz ă pentru stilizarea în mod diferen țiat a unor tag-uri HTML
(distribuite în una sau mai multe pagini WEB) . Acestea se definesc intr-un fisier extern css,
numele claselor fiind precedat fie de semnul „.”, fie de semnul „#”. Apelul unei clase CSS se
face in tag-ul asupra caruia se doreste ca ea sa ac tioneze. In cazul in care clasa este definita in
fisierul extern printr-un nume pr ecedat de caracterul „.”, apelul ei se va face folosind sintaxa
class=”nume_clasa” . In cazul in care clasa este definita printr-un nume precedat de
caracterul „#”, apelul ei se va face folosind sintaxa id=”nume_clasa” .
Din punct de vedere al apelului lor in cadrul tag-urilor, u tilizarea claselor CSS este
similara cu utilizarea stilurilor în linie, avantajul major fiind acela c ă atunci când se dore ște
efectuarea unei modific ări de stil pe mai multe elemente/pagini, aceasta nu trebuie efectuat ă
individual la nivelul fiec ărui element, ci doar in clasa respectiva definita in fisierul css extern.
Efectul acestei modificari se va r ăsfrânge asupra tuturor elementelor pe care ac ționează clasa
respectivă.
În continuare, se prezint ă un exemplu de referire a unui fi șier extern css care contine
doua clase css, în cadrul unui document HTML, precum si modul de apel al claselor:
<html>
<head>
<link href="StilExt.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class=”Tabel1”>
<tr>
<td>
Actioneaza clasa Tabel1!
</td>
27</tr>
</table>
<table id=”Tabel2”>
<tr>
<td>
Actioneaza clasa Tabel2!
</td>
</tr>
</table>
</body>
</html>
Fișierul CSS referit si utilizat în pagina HTML anterioara (StilE xt.css) contine doua
clase definite in felul urmator:
.Tabel1
{
font-family: "Times New Roman";
font-size: 22px;
color: #FFFFFF;
background-color: #0066FF;
border: 4px double #0033FF;
text-align: center;
}
#Tabel2
{
font-family: "Times New Roman";
font-size: 22px;
color: #FFFFFF;
background-color: #00CC33;
border: 4px double #0033FF;
text-align: center;
}
Efect:
Fig. 1.11. Exemplu de utilizare a claselor CSS.
În situația în care, pentru format area unui element HTML al pa ginii WEB, se folosesc
in acelasi timp, mai multe met ode CSS, acestea se vor executa in cascada, in urmatoarea
ordine: prioritate au stilurile in linie, apoi stilurile interne, iar in final, st ilurile externe. Cu alte
cuvinte, stilul in linie al unui element suprascrie stilul intern, definit în sectiunea
<head></head>, sau stilul extern, definit într-un fi șier extern.
Remarca: O prezentare bine structurata a proprietat ilor CSS frecvent utilizate se gaseste pe
internet, la adresa: http://www.pageresource. com/dhtml/cssprops.htm .
28
Exemple de utilizare a tag-urilor DIV si SPAN cu CSS
Dupa cum s-a prezentat mai sus, tag-urile DIV si SPAN utilizate singure, nu au efecte
majore, insa in combinatie cu elemente C SS pot oferi un design deosebit paginilor WEB.
Astfel, in cadrul acestor tag-ur i se poate folosi fie atributul style (cu proprietati CSS), fie
atributele id sau class pentru apelul claselor CSS.
Exemplu utilizare DIV:
In continuare, se prezinta un exemplu in care avem 2 div-uri , unul contine un tabel, iar
celalalt o lista neordonata, fiecare div avand propria culoare de funda l, dimensiuni stabilite si
margini diferite. In atributul " style" sunt specificate pr oprietatile CSS care stabilesc aspectul
grafic al fiecarui 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>
29Efect:
Fig. 1.12. Exemplu de utilizare a tag-ului DIV.
Exemplu utilizare SPAN:
In exemplul de mai jos se urmareste afis area in pagina WEB a unui text, in cadrul
caruia anumite cuvinte sa fie evidentiate. Pentru aceasta, cuvintele ce se doresc a fi
evidentiate se incadreaza intr-un tag SPAN carui a i se adauga proprietatile CSS dorite.
Acesta este un exemplu
<span style="background:#88fe88; font-weight:bold;">de utilizare a
tag-ului SPAN</span>.
Efect:
Fig. 1.13. Exemplu de utilizare a tag-ului SPAN .
30
Probleme propuse:
1. Se vor studia si rula exemplele din aceasta lucrare
2. Se va crea o pagina de WEB cu CV -ul personal, care va contine:
• date personale
• studii
• competente profesionale
• competente lingvistice
• hobby-uri
Pentru realizarea CV-ului se cere utilizarea de div-uri, tabele si liste, inserarea unei
poze, precum si folosirea de link-uri. In scop di dactic, pentru formatarea paginii se vor utiliza
atat elemente CSS, cat si at ribute HTML ale tag-urilor.
In figura de mai jos, am prezentat un temp late pentru CV, exemplificand modul de
utilizare al tag-urilor div impreuna cu elemente CSS si modul de plasare de continut in cadrul
acestora.
Fig. 1.14. Template pentru CV realizat cu ajutorul tag-urilor DIV.
Fisierul HTML care sta la baza exempl ului de mai sus este urmatorul:
<html>
<head>
<link href="2.css" rel="stylesheet" type="text/css">
<title>CV</title>
</head>
31
<body>
<div class="container">
<div class="div1">
<table align="left">
<tr>
<td><img src="image.jpg" width="100px" height="90px"></td>
<td>Deatcu Laura</td>
</tr>
</table>
</div>
<div class="div2">
<br><br>
<table align="center" height="700px">
<tr>
<td>
<!–Introduceti in cadrul acestei celule urmatoarele:
1.Date personale – text formatat (bold, italic, underline, de
diferite culori; –>
</td>
</tr>
<tr>
<td>
<!–Introduceti in cadrul acestei celule urmatoarele:
2.Studii – tabel care sa contina studiile avute si un link catre
pagina facultatii absolvite; –>
</td>
</tr>
<tr>
<td>
<!–Introduceti in cadrul acestei celule urmatoarele:
3.Competente profesionale – Lista ordonata; –>
</td>
</tr>
<tr>
<td>
<!–Introduceti in cadrul acestei celule urmatoarele:
4.Competente lingvistice – Lista ordonata; –>
</td>
</tr>
<tr>
<td>
<!–Introduceti in cadrul acestei celule urmatoarele:
5.Hobby-uri – Lista neordonata. –>
</td>
</tr>
</table>
</div>
</div>
32</body>
</html>
Fisierul extern CSS (2.css) apelat de fi sierul HTML de mai sus este urmatorul:
/* CSS Document */
body{
background-color:#999999;
}
.container {
height: 750px;
width: 700px;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
position:absolute;
background-color:#999999;
border: 3px solid white;
}
.div1 {
height: 150px;
width: 700px;
position:relative;
background-color:#00cc66;
display: table-cell;
vertical-align:middle;
}
.div2 {
height: 570px;
width: 700px;
top:30px;
position:relative;
background-color:#0066ff;
overflow:auto;
}
3. Sa se realizeze un formular HTML care cons ta intr-un sondaj cu privire la marca de
sampon utilizata. Formularul va contine 6 intrebar i, raspunsurile utiliz atorilor la acestea fiind
trimise la adresa de e-mail: server@yahoo.com , de unde vor fi preluate si prelucrate. Cele 6
intrebari sunt:
– Ce sampon folositi in mod regulat?
● Pantene, Elseve, Dove, Londa, We lla – se folosesc butoane radio
– Ce va determina sa cumparati acest sampon?
● reclama, pretul, ambalajul, marca, di sponibilitatea produsului – se folosesc casete
checkbox – Ce apreciati cel mai mult la samponul pe care il cumparati?
● mirosul, calitatea, timpul de efect – se folosec butoane radio
– Cat de frecvent folositi samponul?
● o data pe saptamana, de doua ori pe saptam ana, de trei ori pe saptamana, o data la
doua saptamani – se foloseste o caseta de selectie.
33- In ce categorie de varsta va incadrati?
● sub 18 ani, intre 18 – 30 de ani, intre 30- 50 de ani, pe ste 50 de ani – se foloseste o
caseta de selectie
– Exprimati mai jos cateva opinii personale cu privire la marca de sampon utilizata:
● se foloseste o caseta textarea, cu 5 randuri si 40 de coloane
Pentru transmiterea datelor completate in fo rmular se foloseste un buton de tip submit,
iar pentru anularea lor se folo seste un buton de tip reset.
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Introducere in HTML si CSS [631988] (ID: 631988)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.