Indrumar Laborator CE

Caiet
Comer electronic
Autor lect. dr. Enache Maria Cristina

2012
Cuprins:
Lucrarea 1, 2 administrativ ................................................................................................................................................... 5
1.1. Cerine proiect: ............................................................................................................................................................. 5
1.2. Introducere .................................................................................................................................................................... 6
1.3. Operatori, cuvinte cheie HTML ................................................................................................................................... 6
Tema .................................................................................................................................................................................. 12
Lucrarea 3 Principalele structuri n HTML: legturi, liste ................................................................................................. 12
3.1. Legturi (Link-uri) ...................................................................................................................................................... 12
3.2. Ancore - ...................................................................................................................................................................... 13
3.3. Liste ............................................................................................................................................................................ 13
3.3.1. Liste neordonate .................................................................................................................................................. 14
3.3.2. Liste ordonate ...................................................................................................................................................... 14
Tema .................................................................................................................................................................................. 15
Lucrarea 4 Principalele structuri n HTML: tabele, cadre .................................................................................................. 15
4.1. Tabele ......................................................................................................................................................................... 15
4.2. Ferestre sau cadre n HTML ....................................................................................................................................... 18
Tema .................................................................................................................................................................................. 19
Lucrarea 5 Stiluri CSS ........................................................................................................................................................ 20
5.1. Introducere n CSS - ................................................................................................................................................... 20
5.1.1. Stilurile interne .................................................................................................................................................... 20
5.1.2. Stilurile externe.................................................................................................................................................... 21
5.1.3. Stilurile n linie .................................................................................................................................................... 22
5.2. Sintaxa css .................................................................................................................................................................. 22
5.2.1. Selectorul: ............................................................................................................................................................ 23
5.2.2. Motenirea: .......................................................................................................................................................... 23
5.2.3. Combinarea selectorilor - .................................................................................................................................... 24
5.2.4. Tagurile de comentarii ......................................................................................................................................... 24
5.3. Clasele CSS - .............................................................................................................................................................. 24
5.4. ID-urile CSS ............................................................................................................................................................... 25
Tema .................................................................................................................................................................................. 27
Lucrarea 6 Stiluri CSS ........................................................................................................................................................ 28
6.1. Divizii ......................................................................................................................................................................... 28
6.2. Spanul CSS ................................................................................................................................................................. 28
6.3. Marginile CSS ............................................................................................................................................................ 29
6.4. Padding CSS ............................................................................................................................................................... 30

6.5. Fonturi CSS ................................................................................................................................................................ 31
6.6. Ancore, linkuri i pseudo clase ................................................................................................................................... 31
6.7. Pseudo Clasele -.......................................................................................................................................................... 32
6.8. Fundaluri CSS............................................................................................................................................................. 33
Tema .................................................................................................................................................................................. 34
Lucrarea 7 Joomla .............................................................................................................................................................. 35
7.1. Ce este Joomla ............................................................................................................................................................ 35
7.2. Instalare i configurare CMS- ului Joomla ................................................................................................................ 35
7.2.1. Instalare local ..................................................................................................................................................... 35
7.2.2. Instalare server ..................................................................................................................................................... 37
7.3. Prezentare general - partea de administrare .............................................................................................................. 39
7.4. Schimbare parol - ...................................................................................................................................................... 41
7.5. "Welcome to the Front Page" ..................................................................................................................................... 42
7.6. "Joomla! is Free Software released under the GNU/GPL License." .......................................................................... 43
7.7. Cum se schimb favicon-ul n site-ul Joomla ............................................................................................................. 44
7.8. Cum se modific sau se adaug meta taguri n Joomla 1.5 ........................................................................................ 45
7.9. Configurare SEO, cum se activeaz linkuri SEF n Joomla ....................................................................................... 46
Tema .................................................................................................................................................................................. 47
Lucrarea 8 Joomla .............................................................................................................................................................. 48
8.1. Meniuri n Joomla ....................................................................................................................................................... 48
8.1.1. Meniurile de baz din Joomla .............................................................................................................................. 48
8.1.2. Cum se adaug un nou meniu .............................................................................................................................. 48
8.1.3. Cum se adaug un nou buton n meniu ................................................................................................................ 49
8.1.4. Tipuri de butoane pentru meniuri ........................................................................................................................ 49
8.1.5. Cum se adaug un submeniu ............................................................................................................................... 51
8.1.6. Ce butoane se pot terge din meniu ..................................................................................................................... 51
8.2. Cum se va ncrca o imagine pe server n site ............................................................................................................ 52
8.3. Cum se va crea un nou folder n stories ...................................................................................................................... 52
8.4. Find us on facebook.................................................................................................................................................... 52
8.5. Sondaj sau Poll ........................................................................................................................................................... 53
8.6. Pagina de contact ........................................................................................................................................................ 54
Tema .................................................................................................................................................................................. 54
Lucrarea 9 Joomla .............................................................................................................................................................. 55
9.1. Meniul Joomla ............................................................................................................................................................ 55
9.2. Administrarea utilizatorilor ........................................................................................................................................ 55
9.3. Configuraiile de baza ale site-ului ............................................................................................................................. 56

9.4. Seciuni, Categorii i Articole..................................................................................................................................... 57
9.4.1. Editarea unui articol n Joomla ............................................................................................................................ 59
9.4.2. Adugarea imaginilor ntr-un articol ................................................................................................................... 61
9.4.3. Adugarea linkurilor n cadrul articolelor ........................................................................................................... 61
9.4.4. Adugarea tabelelor n cadrul articolelor............................................................................................................. 62
9.4.5. Administrarea meniurilor n Joomla .................................................................................................................... 63
9.5. Extensii n Joomla ...................................................................................................................................................... 64
9.5.1. Componente (components) .................................................................................................................................. 64
9.5.2. Module (modules)................................................................................................................................................ 64
9.5.3. Pluginuri (plugins) ............................................................................................................................................... 67
9.5.4. Templateuri (templates) ....................................................................................................................................... 67
9.5.5. Pachete lingvistice (languages)............................................................................................................................ 68
9.5.6. Instalare extensii .................................................................................................................................................. 68
Tema .................................................................................................................................................................................. 68
Lucrarea 10 VirtueMart ...................................................................................................................................................... 69
10.1. Instalare .................................................................................................................................................................... 71
10.2. Instalare manual ...................................................................................................................................................... 71
10.3. VirtueMart i Joomla ................................................................................................................................................ 71
10.4. Instalare extensie pentru VirtueMart ........................................................................................................................ 72
Anexa 1 Taguri Html .......................................................................................................................................................... 74
1.
Elemente de baza (taguri). ......................................................................................................................................... 74
2.
Elemente pentru liste . ............................................................................................................................................... 75
3.
Elemente pentru formatarea caracterelor ................................................................................................................... 75
4.
Elemente pentru cadre ............................................................................................................................................... 76
5.
Elemente pentru tabele .............................................................................................................................................. 76
6.
Elemente pentru adaugarea imaginilor ...................................................................................................................... 78
7.
Elemente pentru formulare ........................................................................................................................................ 78
8.
Elemente avansate ..................................................................................................................................................... 79
Lucrarea 1, 2 administrativ
Nota CE= nota teme*30%+nota proiect*30%+nota ex*40%
1.1. Cerine proiect:

1. De utilizat un alt template - la alegere, altul dect cel implicit
2. Interfaa n limba romn (i pentru front-end i pentru back-end)
3. De instalat o component pentru vizualizare imagini, slide-uri pe prima pagina (pps)
4. Dou sondaje:
1 sondaj s apar n orice pagina vizualizat,
al doilea poate s apar oriunde
5. De afiat Copyright (c) numele autorului
6. S permit logarea (meniu activ) - numai logare nu i nregistrare de noi utilizatori
7. S aib un meniu cu urmtoarele componente:
home,
despre noi,
contact,
magazin virtual
8. Despre noi: 2 submeniuri subordonate n care:
Se va descrie autorul
Se va descrie proiectul
*2 imagini inserate la fiecare prezentare;
*una din imagini s aib un link (spre orice);
*unul din cuvintele din textul adugat s aib un link ctre pagina de home
9. S existe un banner al magazinului virtual personalizat
10. Schimbai iconia care apare pentru orice site realizat n joomla, cu o iconi nou
11. 5 Categorii cu 5 produse/categorii, toate produsele trebuie s aib pre n lei, descriere i imagine
12. S permit vizualizarea datelor despre un produs n forma restrans minimalizat iar pentru detalii s existe
linkuri
13. Denumirea site-ului Magazin Virtual-Nume Autor, i de modificat n orice moment la simpla solicitare
14. Pe site s nu apar:
iconite pentru imprimare, pdf, e-mail;
cine a scris articolul, data publicrii, data modificrii
15. S existe 3 useri: administrator, publicist, la alegere
16. Pe prima pagina s nu apar textul "Welcome to front page".
1.2. Introducere
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce
pot fi afiate ntr-un browser (sau navigator). Scopul HTML este mai degrab prezentarea informaiilor
paragrafe, fonturi, tabele .a.m.d. dect descrierea semanticii documentului. Specificaiile HTML sunt dictate
de World Wide Web Consortium (W3C).
HTML este un format text proiectat pentru a putea fi citit i editat de oameni utiliznd un editor de text
simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine solide de HTML i este
consumatoare de timp. Editoarele grafice cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft
FrontPage permit ca paginile web s fie tratate asemntor cu documentele Word, dar cu observaia c aceste
programe genereaz un cod HTML care este de multe ori de proast calitate. HTML se poate genera direct
utiliznd tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de
gestionare a coninutului, wiki-uri i forumuri web genereaz pagini HTML. HTML este de asemenea utilizat n
email. Majoritatea aplicaiilor de email folosesc un editor HTML ncorporat pentru compunerea email-urilor i
un motor de prezentare a email-urilor de acest tip. Folosirea email-urilor HTML este un subiect controversat i
multe liste de mail le blocheaz intenionat.
1.3. Operatori, cuvinte cheie HTML

Caracteristicile i elementele componente ale unui document HTML:
<html> i </html> - orice document ncepe i se termin cu aceste tag-uri;
<head>...</head> - reprezint poriunea de antet a documentului, aici se poate introduce titlul documentului
ntre tag-urile <title> i </title>, precum i alte elemente;
<body>...</body> - corpul documentului, cuprinde coninutul paginii HTML, ceea ce va fi afiat pe ecran;
"<" i ">" - marcaje n document;
<br> - ntrerupere de linie, de la "line break", echivalentul lui Enter;
<p> - paragraf nou;
<hr> introduce o linie orizontal i trecerea la un rnd nou;
<pre>...</pre> - blocuri preformate browser-ul va interpreta corect caraterele "spaiu", "tab" i "enter"
pentru un text introdus ntre aceste tag-uri;
<! .> - introduce un comentariu.
Astfel, un document HTML are urmtoarea structur general:
<html> <head> <title>Titlu</title> </head> <body> Coninut pagin  </body> </html>
1.3.1. mprirea n paragrafe i linii

mprirea se realizeaz utiliznd controlul <P> pentru un paragraf nou i respectiv <BR> pentru linie nou. Ca
o sugestie pentru plasarea controalelor, cele de linie nou la sfritul liniei de text i marcajul de paragraf pe
linie nou. Pentru indentarea datelor din ferestre se utilizeaz marcajul de informaie preformatat <PRE> care
se ncheie cu </PRE>. Atenie textul din textul din blocul preformatat este de tip monospaiu (fiecare liter are
aceeai nalime).
1.3.2. mprire document n seciuni
Din motive de organizare fiierele HTML sunt mprite n dou seciuni- antet (header) care conine informaia
introductiv de formatare a paginii i corpul (body). Se utilizeaz marcajele <HEAD> i respectiv <BODY>.
Recomandare - scriei paginile Web plasnd marcajele n poziii logice astfel nct documentul s fie uor de
procesat ulterior.
1.3.3. Inserare titlu pagin
Pentru o pagin de Web mai elevat putem s dm paginii un nume, controlul utilizat este <TITLE>. Acest
control are o limitare deoarace unekle programe de explorare Web nu afieaz titlul ferestrei. n schimb textul
din <TITLE> este utilizat ca informaie de legtur cnd se utilizeaz bookmarks sau favorites.
1.3.4. Informaii uzuale care se plaseaz la sfrit
De obicei la sfritul unui document apar informaii de copyright i date despre autorul paginii. Marcajul utilizat
este <ADDRESS>. Nu este obligatorie utilizarea acestui marcaj la paginile Web create.
1.3.5. Definire antete de seciune
Dac pagina trebuie organizat pe seciuni i subseciuni se utilizeaz marcajele de formatare a subtitlurilor
<H1-H6> unde avem H1 pentru subnivelul cel mai de sus i respectiv H6 pentru subnivelul cel mai de jos.
Trebuie s inem cont de faptul c fonturile, dimensiunile i efectele din prezentarea general pot fi modificate
de utilizator. Dar foarte puini oameni modific preferinele implicite, deci dac pagina arat bine cu valorile
predefinite, totul e o.k.
1.3.6. Linie orizontal
Pentru organizarea vizual a unui document este util marcajul <HR> care introduce o linia orizontal subire
afiat pe ntreaga lime a paginii. Acest marcaj poate fi utilizat de mai multe ori ntr-un document Web, dac
este folosit judicios paginile devin mai interesante.
Marcaj HTML
Semnificaie
Marcaj nchidere
<ADDRESS>
</ADDRESS>
Informaii despre adres i autor
<BODY>
</BODY>
Corp pagin HTML

Linie nou
<BR>
<HEAD>
</HEAD>
Informaie de formatare HTML
<Hn>
</Hn>
Nivel de subtitlu document (n=1-6)

Linie orizontal
<HR>
<HTML>
</HTML>
<P>
<PRE>
Definete un fiier n format Web

Paragraf nou
</PRE>
Informaie preformatat
Exemple
Exemplu simplu de construire a unei pagini HTML.
<html>
<head>
<title>Prima mea pagina web folosind cateva coduri HTML!</title>
</head>
<body>
Salut! Aici voi pune mai tarziu continutul! Si voi realiza o pagina simpla folosind HTML
</body>
</html>
<html><head> <title>Pagina 2!</title></head>

<body>
<p>Acesta este un simplu paragraf in HTML</p>
<p align="left">Acesta este un paragraf aliniat la stanga</p>
</body>
</html>
Pe lng atributul align putem folosi pentru a alinia elementele HTML urmtoarele valori: left, right center i
justify.
<html><head> <title>Pagina 3!</title></head>

<body>
<h1>Acesta este tag-ul HTML pentru cel mai mare titlu</h1>
<h2>Acesta este tag-ul HTML pentru cel titlu h2</h2>

</body>
</html>
<html><head> <title>Prima 4!</title></head>
<body>
<p>Acesta este o pagina HTML </p><br />
Linia 2
</body>
</html>
<br /> este un salt n linie n HTML - spaiul ntre br i slesh face diferena ntre cod valid XHTML i HTML
4.1 de exemplu.
<html><head> <title>Prima 5!</title></head>

<body>
<p> Acesta este o pagina HTML </p><br />
<hr /></body>
</html>
<hr /> se foloseste pentru a desena o linie orizontal n HTML - spaiul ntre hr i slesh face diferena ntre cod
valid XHTML i HTML 4.1 de exemplu
1.4. Culoarea de fond - O culoare poate fi precizat n dou moduri:

printr-un nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black, fuchsia, gray, green
lime, maroon, navy, olive, purple, red, silver, teal, white i yellow.
prin construcia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale i pot lua valorile: 0,
1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei <body>. Culoarea fondului paginii
Web se stabilete cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor = culoare>.
Culoarea textului - Acest lucru se face prin intermediul atributului text al etichetei <body> dup sintaxa <body
text=culoare>.
Pe o singur linie de comand, se pot stabili mai multe atribute, de exemplu i culoarea de fundal i cea a
fontului:
<body bgcolor = culoare1 text=culoare2>
Textul afiat este caracterizat de urmtoarele atribute: Mrime (size), Culoare (color), Font (style).
Acestea sunt atribute ale etichetei <basefont>. Este o etichet singular (fr delimitator de sfrit de bloc).
<basefont size = numr color = culoare style = font>
unde:
numr - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic i 7 pentru fontul cel mai mare);
culoare - este o culoare precizat prin nume sau printr-o construcie RGB;
font - poate fi un font generic ca "serif", "san serif", "cursive", "monospace", "fantasy" sau un font specific
instalat pe calculatorului clientului, ca "Times New Roman", "Helvetica" sau "Arial". Se accept ca valoare
i o list de fonturi separate prin virgul, de exemplu: "Times New Roman, serif, monospace ".
Domeniul de valabilitate al caracteristicelor precizate de aceast eticheta se ntinde de la locul n care apare
eticheta pn la sfritul paginii sau pn la urmtoarea etichet <basefont>.
1.5. Fonturi - Un font este caracterizat de urmtoarele atribute:
culoare (stabilit prin atributul color);
tipul sau stilul (stabilit prin atributul face)

o familii generice: serif, sans serif, cursive, monospace i fantasy;
o instalate pe calculator;
mrimea (definit prin atributul size) ;

o 1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font i 7 pentru cel mai mare);
o +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fa de valoarea curent;
o -1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc. fa de valoarea curent.
mrimea n puncte tipografice (stabilit prin atributul point-size);
grosime (definit prin atributul weight), valori posibile: 100, 200, 300, 400, 500, 600, 700, 800 i 900 (100
pentru fontul cel mai subire i 900 pentru cel mai gros).
Blocuri <center> - Blocul introdus de etichetele <center>...</center> aliniaz centrat toate elementele pe care
le conine.
Blocuri <nobr> - Blocul de text cuprins ntre etichetele <nobr>...</nobr> va fi afiat pe o singur linie.
Blocuri <div> - Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc <div>
(diviziune) este align (aliniere). Valorile posibile ale acestui parametru sunt:
" left " ( aliniere la stnga );
" center " ( aliniere central );
" right " ( aliniere la dreapta ).
Un bloc <div>...</div> poate include alte subblocuri. n acest caz, alinierea precizat de atributul align al
blocului are efect asupra tuturor subblocurilor incluse n blocul <div>;
Un bloc <div>...</div> admite atributul "nowrap" care interzice ntreruperea rndurilor de ctre browser.
Exemplu:
<html> <head> <title> Blocul <div></title> </head>
<body> Paragraf normal urmat de paragraf aliniat la dreapta.
<div align="right"> paragraf pe o singura linie aliniat la dreapta.<br> </div>
<div align="center"> Paragraf aliniat pe centru.<br> </div>
</body> </html>
1.6. Imagini - Imaginile sunt stocate n fiiere cu diverse formate. Formatele acceptat de browsere pentru
fiierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
XPM (X PixMap) cu extensia .xmp;
XBM (X BitMap) cu extensia .xbm;
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 culori posibile) i JPEG (24 bii pentru o
culoare, 16777216 de culori posibile).
Tag-ul folosit pentru inserarea unei imagini n pagin este <img> i are urmtoarele atribute:
src = sursa, locul unde se afl imaginea, adresa URL ("Uniform Resourse Locator" = identificator unic
al resursei); Dac imaginea se afla n acelai director cu fiierul HTML care face referire la imagine,
atunci adresa URL a imaginii este format numai din numele imaginii, inclusiv extensia.
width = limea imaginii;
height = nlimea imaginii;
alt = numele care nlocuiete imaginea pn aceasta se ncarc sau cnd nu a fost gsit;
border = chenar (0 = lips bordur)
align = "center, right, left, top, middle, bottom" alinierea imaginii n pagin
hspace =" nr.ntreg", vspace =" nr.ntreg" - precizeaz distana n pixeli pe orizontal, respectiv
vertical, dintre imagine i restul elementelor din pagin.
Exemplu:
<html> <head><title> Imagine cu chenar i mrit </title></head>
<body> O imagine cu chenar i de 200 pixeli X 15 %
<img src="imagine.jpg" align="center" border="5" width="350" height="25%">
Text dup imagine.
</body> </html>
Utilizri speciale ale imaginilor
Imaginile pot fi utilizate pentru a obine efecte deosebite ntr-o pagin web. Printre aceste utilizri speciale
putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor .
2. Simboluri speciale pentru elementele unei liste neordonate.
Tema
Lucrarea 3 Principalele structuri n HTML: legturi, liste

3.1. Legturi (Link-uri) - Legturile (link-urile) reprezint partea cea mai important a unei pagini Web. Ele
transform un text obinuit n hipertext sau hiperlegatur, care permite trecerea rapid de la o informaie aflat
pe un anumit server la alt informaie memorat pe un alt server aflat oriunde n lume.
Legturile sunt zone active ntr-o pagin Web, adic zone de pe ecran sensibile la apasarea butonului stng al
mouse-ului.
O legtur (link) este definit cu ajutorul etichetelor (tag-urilor) <a></a>, (de la "anchor"=ancora) textul,
imaginea sau paragraful plasat ntre aceste etichete formnd link-ul, i are atributele:
href - adresa fiierului destinaie;
target - n ce fereastr se va deschide fiierul destinaie:
o _blank pagina va fi ncrcata ntr-o nou fereastra;
o _parent pagina va fi ncrcat n fereastra printe;
o _top pagina va fi ncrcat n fereastra top a cadrului;
o _self pagina va fi ncrcat n aceeai fereastr.
title - mic descriere asociat legturii afiat n momentul n care mouse-ul se afl deasupra legturii
Legtura poate fi:

pagin aflat n acelai director, realizat cu ajutorul atributului href, astfel:
<a href="nume_fiier_2.html">;
pagin de pe acelai disc local se folosete adresa relativ la acel fiier:
<a href="exemple/list/listex_11.html"> ;
legtur ctre un site particular:
<a href="http://www.ub.ro">;
imagine;
adres de e-mail:
<a href='mailto:test@test.ro?subject="subiect prestabilit"'>Trimite e-mail</a>;
ctre un fiier oarecare:
<a href="fiier.zip">
3.2. Ancore - ntr-o pagin foarte lung pot exist puncte de reper ctre care se definesc legturi.
O ancor se definete de asemenea prin eticheta <a>. Pentru a defini ancor se utilizeaz atributul name care
primete ca valoare un nume atribuit ancorei (de exemplu "leg1").
Pentru a insera o legtura ctre "leg1" definit n aceeai pagin se utilizeaz eticheta <a> avnd atributul href
de valoare "#leg1".
Pentru a introduce o legtur ctre o ancor definit n alt document (alt pagin) aflat n acelai director,
atributul href primete o valoare de forma "nume_fiier.html#nume_ancora".
Exemplu
Ancora
<a name="nume">Ancora</a>
Link ctre ancora aflat n aceeai pagin
<a href="#nume">Inapoi la ancora</a>
Link ctre ancora aflat n alt pagin
<a href="pagina.html#nume">Inapoi la ancora din

pagina.html</a>
3.3. Liste - Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de definiii,
referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic,
urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi gestionat printr-o
lista de definiii, care este inclus ntr-o pereche de marcaje de lista de definiii: <dl>...</dl> (de la "definition
list" = lista de definiii).
Observaii:
un termen al listei este iniiat de eticheta <dt> (de la "definition term" = termen definit);
definiia unui termen este iniiata de eticheta <dd> (de la "definition description" = descrierea definiiei);
definiia unui termen ncepe pe o linie nou i este indentat.

3.3.1. Liste neordonate - O list neordonat este un bloc de text delimitat de etichetele corespondente
<ul>...</ul> ("ul" vine de la "unordered list" = list neordonat). Fiecare element al listei este iniiat de eticheta
<li> (list item). Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou.
Tag-urile <ul> i <li> pot avea un atribut type care stabilete caracterul afiat n faa fiecrui element al
listei. Valorile posibile al acestui atribut sunt:
o "circle" (cerc)
"disc" (disc plin) (valoarea prestabilit);
(patrat)
Listele neordonate pot fi imbricate pe mai multe niveluri:

Exemplu:
<html> <head><title>liste_1</title></head>
<body><h1 align="center">O list neordonat: </h1><hr>
<ul>
<li type = "square">Rosu</li>
<li type = "circle">Galben</li>
<li type = "disc">Albastru</li>
</ul>
</body> </html>
3.3.2. Liste ordonate - O list ordonat de elemente este un bloc de text delimitat de etichetele corespondente
<ol>...</ol> ("ol" vine de la "ordered list" = list ordonat). Fiecare element al listei este iniiat de eticheta <li>
(list item). Tag-urile <ol> i <li> pot avea un atribut type care stabilete tipul de caractere utilizate pentru
ordonarea listei. Valorile posibile sunt:
" A " pentru ordonare de tipul A, B, C, D etc. ( litere mari );
" a " pentru ordonare de tipul a, b, c, d etc. ( litere mici );
" I " pentru ordonare de tipul I, II, III, IV etc. ( cifre romane mari );
" i " pentru ordonare de tipul i, ii, iii, iv etc. ( cifre romane mici );
" 1 " pentru ordonare de tipul 1, 2, 3, 4 etc. ( cifre arabe - opiune prestabilit );
Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniial a secvenei de ordonare.Valoarea acestui
atribut trebuie s fie un numr ntreg poziiv. Tag-ul <li> poate avea un atribut value care stabilete valoare
pentru elementul respectiv al listei. Valoarea acestui atribut trebuie s fie un numr ntreg poziiv. Listele
ordonate pot fi imbricate ntre ele sau cu liste neordonate, ca n exemplul urmtor.
Exemplu
<html> <head><title>listex_8</title></head>
<body><h1 align="center">O lista ordonata de liste ordonate i neordonate</h1><hr>
<ol>Un sistem informaic include:
<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol> </body> </html>
Tema
Lucrarea 4 Principalele structuri n HTML: tabele, cadre

4.1. Tabele - Tabelele ne permit s crem o reea complex de cmpuri (celule), iar tabelele stau la baza
construirii marii majoriti a paginilor Web. Fiecare celul a tabelului are propriile opiuni pentru culoarea
fondului, culoarea textului, alinierea textului etc.
Instruciuni:
<table></table> - insereaz un tabel;
<tr></tr> - insereaz un rnd (tabel row);
<td></td> - insereaz o celul cu date;
Atributele tabelului (tabel/rnd/celul):
border - un numr ntreg ce definete grosimea bordurii tabelului (poate fi 0 = lips bordur valoare
implicit): <table border="4">;
align aliniaz tabelul n pagina Web, i poate lua valorile left, center i right: <table align="left"> ;
hspace i vspace dau distana dintre tabel i celelalte elemente din pagina Web;
bgcolor determin culoarea de fundal a tabelului sau a celulei, cu urmtoarea prioritate: celul (<td>),
linie (<tr>) i tabel (<table>): <table border="3" bgcolor="green"> <tr bgcolor="blue"> <td
bgcolor="red">; Culoarea textului din fiecare celula se poate stabili cu ajutorul expresiei: <font
color="white">...</font>. ;
cellspacing atribut al tag-ului <table>, ce definete distana (n pixeli) dintre celulele tabelului
valoarea implicit este 2: <table cellspacing="4">;
cellpadding definete distana dintre marginea unei celule i coninutul ei, valoarea implicit este 1:
<table border="0" cellpadding="20">;
width i height stabilesc limea i nlimea unui tabel/celul pot fi nr ntregi sau procente din
dimensiunea paginii: <table width="200" height="50%">;
<caption> - atribuie un titlu tabelului, i poate lua valorile: bottom, top, left i right: <table
border="0"><caption align="top">Titlu_tabel;
<th> - table header definete celule cap de tabel, coninutul lor este scris cu caractere aldine i centrat:
<th>Cap_tabel</th> ;
align aliniaz pe orizontal coninutul unei celule, i poate lua valorile: left, center, right, char (aliniere
fa de un caracter): <td align="left">stnga</td>;
valign
aliniaz
coninutul
celulei
pe
vertical:
baseline,
bottom,
middle,
top:
<td
valign="bottom">jos</td>;
colspan mpreun cu <td> i <th> extinde o celul peste celulele din dreapta s - 3 celule unite: <td
colspan="3">celule</td>;
rowspan mpreun cu <td> i <th> extinde o celul peste celulele de dedesubt - 4 celule unite: <td
rcwlspan="4">celule</td>;
o nowrap aparine elementelor <td> i <th> i interzice ntreruperea unei linii de text o coloan cu o
lime orict de mare: <td nowrap>celula_mare</td>;
o &nbsp introduce caracterul spaiu ntr-o celul, astfel nct aceasta s aib chenar (celulele vide nu au
chenar) se folosete cu <td>;
o <br> - are acelai efect ca i
o frame specific prile din chenar care vor fi afiate, i ia valorile:
void - elimin toate muchiile exterioare ale tabelului;
above - afieaz o muchie n partea superioar a cadrului tabelului;
below - afieaz o muchie n partea inferioar a cadrului tabelului;
hsides - afieaz cate o muchie n partea superioar i inferioar cadrului tabelului;
lhs - afieaz o muchie n partea din stnga a cadrului tabelului;
rhs - afieaz o muchie n partea din dreapta a cadrului tabelului;
vsides - afieaz o muchie n partea din stnga i din dreapta a cadrului tabelului;
box - afieaz o muchie pe toate laturile cadrului tabelului;
border - afieaz o muchie pe toate laturile cadrului tabelului;
Exemplu Tabel_1:
<html> <head><title>tabelex_4</title></head>
<body><h1 align=center>Un tabel simplu colorat</h1><hr>
<table border="3" bgcolor="green">
<tr>
<td>verde 11</td>
<td bgcolor="red">rosu 11</td>
</tr>
<tr bgcolor="blue">
<td>albastru 21</td>
<td bgcolor="yellow">galben 22</td>
</tr>
<tr bgcolor="cyan">
<td>cell 31</td>
<td>cell 32</td>
</tr>
<tr>
<td>cell 41</td>
<td bgcolor="white">cell 42</td>
</tr>
</table> </body> </html>
Exemplu Tabel_2: cu titlu i cap de tabel
<html>
<head><title> Tabel_2</title></head>
<body><h1 align=left>Tabel cu titlu</h1>
<table border="3"><caption align="top"> Catalog
<tr><th>Student</th> <th>Matematica</th> <th>Romn</th> <th>Fizica</th> <th>Chimie</th></tr>
<tr align="center" bgcolor="red"><th>Popescu Vasile</th> <td>10</td>
<td>10</td><td>10</td><td>6</td></tr>
<tr align="center"><th bgcolor="blue"> <font color="white">Ionescu Sorin</font></th> <td>9</td>
<td>6</td><td>8</td><td>9</td></tr>
</table>
</body> </html>
Exemplu Tabel_3
Afiare
Cod HTML
<table border="1">
<tr>
<td bgcolor="white">R1 C1</td>
<td bgcolor="yellow">R1 C2</td>
</tr>
<tr>
<td colspan="2" bgcolor="red">R2 C1+C2</td>
<td bgcolor="red">R2 C4</td>
</tr>
<tr>
<td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td>
R1 C1
R2 C1+C2
R3 C1 +
R4 C1
R1 C2 R1 C3 R1 C4
R2 C3 R2 C4
R3 C2 R3 C3 R3 C4
R4 C2 R4 C3 R4 C4

</tr>
<tr>
</tr>
</table>
4.2. Ferestre sau cadre n HTML - Ferestrele sau (cadrele) permit definirea n fereastra principal a unor
subferestre n care s fie ncrcate documente HTML diferite.
Sub-ferestrele sunt definite ntr-un fiier HTML special, n care blocul <body>...</body> este nlocuit de blocul
<frameset>...</frameset>.
n interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa URL a documentului
HTML care va fi ncrcat n acel frame. Definirea cadrelor se face prin mprirea ferestrelor (i a subferestrelor) n linii i coloane astfel:
mprirea n linii se face cu atributul rows al etichetei <frameset>;
mprirea n coloane se face cu atributul cols al etichetei <frameset>;
valoarea atributelor cols i rows este o list de elemente desprite prin virgul, care descriu modul n
care se face mprirea, i pot fi:
un numr ntreg de pixeli;
procente din dimensiunea ferestrei (1 99 %); n nseamn n pri din spaiul rmas;
Exemplu 1: Se creeaz o pagin Web cu trei cadre mixte. Se mparte fereastra n dou subferestre orizontale, se
umple prima subfereastr cu fiierul index.html, dup care se mparte a doua subfereastr n dou coloane, una
se umple cu winxp.gif i cealalt cu index2.html.
<html>
<head><title>cadre</title></head>
<frameset rows="*,*">
<frame src="index.html">
<frameset cols="35%,*">
<frame src="winxp.gif">
<frame src="index2.html">
</frameset>
</frameset>
</body> </html>
Atribute ale chenarelor:
culori pentru chenare: bordercolor are valori specifice pentru culori, i pot nsoi etichetele
<frameset> i <frame>;
dimensionarea chenarului unui cadru: border pentru <frameset> are valoarea n pixeli, 0 = cadru
fr chenar.;
frameborder = 0 nu se afieaz chenarul cadrului;
bare de defilare scrolling pentru <frame> - adaug unui cadru o bar de derulare, valori posibile:
"yes", "no" i "auto";
noresize mpiedic redimensionarea cadrului cu mouse-ul;
marginheight i marginwidth stabilesc distana n pixeli dintre coninutul cadrului i marginile

verticale/orizontale, i pot lua valorile: numr de pixeli sau procent din lime/nlimea cadrului;
Cadre interne
Un cadru intern este specifict prin intermediul blocului <iframe>...</iframe>.
Un cadru intern se insereaz ntr-o pagina Web n mod asemntor cu o imagine aa cum rezult din urmtorul
exemplu:
<iframe src="pagina1.html" height=40% width=50%> </iframe>
n acest caz, s-a specifict o fereastr de cadru intern care are 40% din nlimea i 50% din limea paginii
curente. Atributele acceptate de eticheta <iframe> sunt n parte preluate de la etichetele <frame> i
<frameset>, cum ar fi: rc, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name,
noresize; sau de la eticheta <img> vspace, hspace, align, width, height;
Exemplu:
<html> <head><title>Cadre_interne</title> </head>
<body> <a href="index1.html" target="icad">Pagina1</a><br>
<a href="index2.html" target="icad">Pagina2</a><br>
<a href="index3.html" target="icad">Pagina3</a><br>
<a href="index.html" target="icad">Acas</a><br>
<center><iframe width="60%" height="50%" border=2 bordercolor=red name="icad"
src="acasa.html">
Dac vedei acest text nseamn c browserul dvs. nu suport cadre interne.
<a href="p0.html">Pagina fr cadre interne</a> </iframe></center> </body> </html>
Tema
Lucrarea 5 Stiluri CSS

5.1. Introducere n CSS - Fiierul CSS (cascading style sheet = foi de stil n cascad) permite separarea
coninutului (X)HTML de stilul de afiare n pagin. Se utilizeaz codul (X)HTML pentru aranjarea
coninutului n pagina, ns toat prezentarea (fonturi, culori, fundaluri, borduri, etc) se realizeaz din fiierul
CSS. n acest moment, se pot folosi CSS-uri n dou moduri, i anume interne sau externe.
5.1.1. Stilurile interne
n acest caz, codul CSS va fi plasat n interiorul fiecrei pagini html n care vom folosi stilurile respective, i v
codul CSS va fi scris ntre tagurile <head></head>. Acest lucru se face dup cum se poate vedea n exemplul
de mai jos:
<head>
<title>titlu pagina</ti<style type="text/css">Aici se definesc stilurile CSS</style>
</head>
Folosind aceast metod (stilurile interne), fiecare fiier (X)HTML va conine codul CSS folosit la stilizare.
Asta nseamn c atunci cnd se dorete realizarea unei schimbri de stil, (mrimea fontului, culoare, etc) va
trebui s se opereze modificarea n toate paginile ce conn acel stil. Metoda descris pn acum este bun atunci
cnd avem de stilizat dou, trei pagini, ns cnd avem de a face cu siteuri de zeci sau sute de pagini este destul
de neplcut s modificm toate paginile.
5.1.2. Stilurile externe
n acest caz, se creeaz un fiier CSS extern (cu orice editor de text simplu: Notepad, Wordpad) sau cu editoare
avansate. De reinut c fiierul CSS va conine doar cod CSS i trebuie salvat cu extensia *.css.
Inserarea acestui fiier .css n pagina (X)HTML se face foarte simplu, prinplasarea unui link n seciunea
<head></head> a fiecrei pagini n care dorim s folosim stilul respectiv. Iat un exemplu de inserare a unui
fiier extern .css ntr-o pagin (X)HTML:
<link rel="stylesheet" type="text/css" href="Calea catre fiierul.css" />
sau se poate folosi metoda de import dup cum urmeaz:
<style type="text/css">@import url( Calea catre fiierul.css )</style>
Oricare dintre metode este bun i se obine plasnd unul dintre codurile de mai sus n seciunea <head>
</head> a paginii, dup cum se exemplific mai jos:
Exemplul 1
<head>
<title> titlu pagina </title>
<link rel="stylesheet" type="text/css" href="stil.css" /> </head>
Exemplul 2
<head>
<title> titlu pagina </title>
<style type="text/css"> @import url( Calea catre fiierul.css ) </style>
</head>
Folosind metoda fiierelor CSS externe, toate paginile (X)HTML vor folosi acelai fiier de stil. Asta nseamn
c dac dorii s facei o schimbare care s aib efect n toate paginile, este de ajuns s modificai un singur
fiier, i anume cel de stil (.css), i efectul se va observa pe toate paginile (X)HTML ce folosesc acel fiier.
Astfel facei schimbri n tot siteul, indiferent de cte pagini are, fr efort i mai ales foarte repede.
Iat cteva motive pentru care aceasta metod este mai bun:
o ntreinere mai uoar;
o dimensiuni reduse ale paginilor;
o economie de band internet;
o flexibilitate;
o ordinea cascadelor
De reinut c se pot folosi att stilurile externe ct i cele interne simultan, dar mai exist o posibilitate, i anume
a stilurilor n linie (inline style).
5.1.3. Stilurile n linie
Acest tip de stil (nu tocmai recomandat) se definesc chiar n codul (X)HTML, n elementul pe care dorim s l
stilizm, aa cum se vede mai jos:
<p style="color: #ff0000;">Text rou</p>
Stilurile n linie nu permit schimbri rapide i facile, pe mai multe fiiere n acelai timp, fiecare element
necesitnd atenia dvs, pe toate paginile, etc.
Metoda cea mai bun este, n mod firesc, aceea care ne avantajeaz cel mai mult. Trebuie reinut ordinea
folosirii lor pentru o interpretare corect de ctre browsere. Toate metodele, se vor executa n cascada, ntr-o
"pseudofoaie de stil", n ordinea urmtoare:
stiluri n linie;
foaie de stil intern;
foaie de stil extern.
Dac ne referim la "care este mai bun", putem spune c depinde de ceea ce v-ai propus s realizai/obinei.
Dac avei o singur pagin pe care trebuie s o stilizai, putei folosi metoda stilurilor interne fr nici o
problem. Pe de alt parte, dac avei de stilizat un numr mare de pagini, cel mai bine este s folosii foile de
stil externe. Modul n care se vor implementa foile externe n pagini rmne la latitudinea proiectantului, i se
poate alege ntre metoda cu link sau metoda cu @import, dup cum s exemplificat mai sus.
Trebuie specifict ns c metoda importului (@import) va fi un pic mai greoaie, fiind posibil s dureze o
secund, dou, pn se ncarc foaia de stil, timp n care coninutul este afiat nestilizat.
Folosirea foilor de stil externe mai are un avantaj major, i anume permit vizualizarea coninutului paginii html
i de ctre utilizatorii cu disabiliti. De exemplu, utilizatorul respectiv, poate renuna la folosirea foii de stil pe
care ai definit-o dvs i poate aplica o foaie de stil special, a lui, care l ajut s vizualizeze pagina ntr-un mod
facil. Poate mri fontul, poate schimba culorile, etc.
Probleme de browser: nu toate browserele interpreteaz la fel stilurile. CSS-ul va fi interpretat diferit de
browsere, ceea ce va cauza dureri de cap. Exist totui metode de rezolvare a acestor probleme, care vor fi
explicate la momentul potrivit.
5.2. Sintaxa css

Sintaxa CSS-ului este diferit de cea a (X)HTMLului, ns nu este foarte dificil de neles
Sintaxa CSS-ului este compus doar din 3 pri:
5.2.1. Selectorul: selector { proprietate: valoare }
Selectorul este elementul (X)HTML pe care doreti s l stilizezi. Proprietatea este chiar titlul (numele)
proprietii respective, iar valoarea reprezint stilul pe care l aplici proprietii.
Fiecare selector poate avea multiple proprieti, i fiecare proprietate din acel selector are valori independente.
Proprietatea este separat de valoare cu semnul ":". Toate proprietile mpreun cu valorile lor, aparinnd
aceluiai selector sunt cuprinse ntre acolade "{}". Multiplele valori din aceeai proprietate sunt separate prin
virgul "," i dac o valoare conine mai mult de un cuvnt, acestea se cuprind ntre ghilimele '"'.
Exemplu:
body {
background: #eeeeee;
fontfamily: "Trebuchet MS", Verdana, Arial, serif;
}
Dup cum se observ, culoarea fundalului (background) este separat de font (fontfamily) cu ajutorul semnului
";" i un tab (semicoloana), diferitele valori pentru font sunt desprite prin virgule, iar valoarea "Trebuchet
MS", deoarece conine dou cuvinte, este cuprins ntre ghilimele.
Aplicnd acest stil vom obine un corp de pagina (body) de culoare gri deschis, iar fontul folosit va fi
unul despre care suntem siguri c majoritatea utilizatorilor l au instalat pe sistemele lor.
Layoutul codului se poate modifica, ns este mai uor de citit dac fiecare proprietate este pe o linie
separat, una sub alta, fiecare cu un tab n fa.
5.2.2. Motenirea:
Atunci cnd se plaseaz un element n interiorul altuia, elementul plasat va moteni proprietile
elementului n care a fost plasat. Asta doar dac nu se atribuie aceleai proprieti ns cu valori diferite fiecrui
element. De exemplu, un font specifict pentru corp (body) va fi folosit n toat pagina, indiferent de elementul
unde este folosit, doar dac nu se specific un font diferit pentru elementul respectiv.
body {fontfamily: Verdana, serif;}
n acest caz, tot textul din fiierul (X)HTML va folosi fontul Verdana. Dac se dorete folosirea unui alt font
pentru un element anume (de exemplu pentru paragraf sau pentru H1), va trebui s se defineasc acest lucru,
cum este i n exemplul de mai jos:
h1 {fontfamily: Georgia, sansserif;}
p {fontfamily: Tahoma, serif;}
Acum toate tagurile vor folosi fontul Georgia i toate paragrafele (<p>) vor folosi Tahoma, lsnd totui restul
textului (dn alte taguri) neschimbat, folosind n coninuare Verdana. Exist ns i cazuri n care elementele
plasate n interiorul altor elemente, nu motenesc proprietile acestora din urm. De exemplu, dac marginea
pentru corp este setat la valoarea de 20 pixeli, celelalte elemente din pagina nu vor avea i ele marginea setat
la 20 de pixeli.
body {margin: 20px;}
5.2.3. Combinarea selectorilor - Se pot combina elementele unui selector astfel:
h1, h2, h3, h4, h5, h6

{
color: #009900;
fontfamily: Georgia, sansserif;
}
Dup cum se observ n exemplul de mai sus, am grupat toate elementele de tip header ntr-un singur selector.
Ele sunt separate de virgule. Rezultatul acestui stil este acela c toate tagurile header vor fi de culoare verde cu
font Georgia. Dac un utilizator nu are instalat pe sistem primul font (Georgia), atunci se va folosi n mod
automat urmtorul font, i anume sansserif.
5.2.4. Tagurile de comentarii
Comentariile, ca i n cazul programrii n alte limbaje, sunt foarte folositoare, i pot ajuta la identificarea rapid
a unui anume element sau rolul pe care acel element l are. Se pot folosi comentariile i n fiierele .css, dup
cum se exemplific n coninuare:
/* Acesta este un comentariu i nu va fi interpretat de browsere */
Se poate observa c modul de inserare al comentariilor este identic ca n C++ i php, testul este introdus ntre
caracterele /* */.
5.3. Clasele CSS - Clasele ne permit s stilizm anumite taguri sau elemente din codul (X)HTML, difereniat.
Similar cu metoda "n linie" din introducere n css. Excepia n cazul claselor const n faptul c stilurile pot fi
schimbate prin schimbarea foii de stil. Astfel se poate folosi acelai selector n fiierul (X)HTML i totui
pagina va arta diferit, n funcie de foaia de stil utilizat.
Exemplu: Ca s o spunem cat mai simplu, propoziia pe care o citii, este definit n foaia de stil CSS astfel:
p
{
fontsize: small;
color: #333333;
}
Simplu, ns, dac doresc s schimb culoarea cuvntului "propoziia" n verde, bold, lsnd ns restul
propoziiei neschimbat? Se va folosi urmtorul cod n fiierul (X)HTML:
Ca s o spunem cat mai simplu, <span class = "verdeboldtext"> "propoziia" </span> pe care o citii, este
definit n foaia de stil CSS astfel:
.verdeboldtext
{
fontsize: small;
color: #008080;
fontweight: bold;
}
Propoziia" pe care o citii, este definit n foaia de stil CSS.
De reinut c definirea unei clase ncepe cu semnul punct (.). Numele de "verdeboldtext" este dat doar de
exemplu, se poate folosi orice denumire, ns recomandarea este s se foloseasc denumiri intuitive, care s
spun rapid cum arat stilul respectiv. Se poate folosi clasa ".verdeboldtext" ori de cte ori este nevoie.
5.4. ID-urile CSS

ID-urile sunt similare cu clasele, cu excepia ca un ID nu poate fi folosit pe aceeai pagin (X)HTML dect o
singur dat. n general, ID-urile se folosesc pentru stilizarea elementelor dintr-o pagin care apar doar o
singur dat, altfel, folosirea claselor este recomandat. Containerul principal al paginii din exemplul de mai jos,
este definit astfel: <div id="container"> Tot coninutul paginii este plasat n acest container. </div> S-a folosit
ID-ul n loc de clas, deoarece elementul respectiv apare o singur dat pe pagin. Urmeaz codul din fiierul
CSS, care arat astfel:
#container { width: 80%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; }
De observat c selectorul IDurilor ncepe cu semnul diez (#) i nu cu punct (.) cum se ntmpl n cazul claselor.
Exemplu: un fiier HTML cu un CSS extern:
Fiierul HTML:
<html> <head>
<LINK REL= "stylesheet" TYPE= "text/css" HREF= "stil.css">
<title>Pagina de text stilizat</title> </head>
<body>
<H2>Acesta este text formatat ca Header 1</H2>
<p>Acesta este un paragraf</p>
<H3>Acesta este text formatat ca Header 2, urmat de un tabel</H3>
<table width="500" border="1">
<tr>
<th align="left">Nume</th>
<th align="left">Prenume</th>
<th align="left">Telefon</th>
<th align="left">E-mail</th>
</tr>
<tr>
<td width="25%">Popescu</td>
<td width="25%">Valentin</td>
<td width="25%">4433978</td>
<td width="25%">popescu@yahoo.com</td>
</tr>
<tr>
<td width="25%">Ionescu</td>
<td width="25%">Mihai</td>
<td width="25%">5599786</td>
<td width="25%">ionescu@yahoo.com</td>
</tr>
</table>
<br>
<h3>Acesta este un text formatat ca Header 3, urmat de 2 liste:</h3>
<ol>
<li>Date personale student;</li>
<li>Calificari student;</li>
<li>Program zilnic:</li>
</ol>
<ul>
<li>Program dimineata</li>
<li>Pauza de masa</li>
<li>Program dupamiaza</li>
</ul>
<br>
urmeaza un text Header1, de marime 80:
<H1>Sfarsit</H1>
</body> </html>
Fiierul stil.css conine:
H2,H3,h3 { color:#483d8b; font-family: "lucida calligraphy", "arial"; }

H1 { color:#01faf1; font-family: "comic sans ms", "tahoma"; font-size:80; }
p, table, li { font-family: "lucida calligraphy", "arial"; margin-left: 10pt; }
body { background-color:#fffaf0; }
li,p,th,td { font-size: 80%; }
table {border-style:outset}
li {list-style: square;)
Tema
Lucrarea 6 Stiluri CSS

6.1. Divizii
Divizia poate fi definit ca: element de tip bloc folosit pentru definirea unor zone din fiierul (X)HTML. O
divizie poate conine toate prile care alctuiesc siteul dvs., incluznd alte divizii, spanuri, imagini, text, etc. Se
poate defini o divizie ntr-un fiier (X)HTML, plasnd urmtorul cod ntre tagurile <body> </body>:
<div>
Coninutul sitului este plasat aici
</div>
Bineneles, acesta poate fi stilizat un pic. Se modific n acest caz, astfel:
<div id="container">
Coninutul sitului este plasat aici
</div>
Iar n fiierul css avem urmtorul cod:
#container
{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
Acum, tot coninutul din divizia noastr va fi stilizat dup regula "container", pe care am definit-o n fiierul css.
O divizie, realizeaz implicit o trecere la linie nou (linebreak). Se pot folosi att ID-urile ct i clasele pentru
stilizarea unei divizii n cadrul siteului.
6.2. Spanul CSS

Spanurile sunt similare diviziilor cu excepia c sunt de tipul "n linie" i nu de tip "bloc". Spanurile nu execut
implicit linie nou dup inserarea lor. Se poate folosi spanul pentru stilizarea unor zone de text, dup cum
urmeaz:
<span class="italic">Acest text este italic</span>
n fiierul CSS avem:
.italic
{
fontstyle: italic; }
Rezultatul final este: Acest text este italic.
6.3. Marginile CSS

Motenite: NU
Dup cum probabil v dai seama, proprietatea "margine" se refer la marginea (spaiul) dintre un element
(X)HTML i celelalte elemente din jurul lui. Marginea poate fi setat pentru extremitile "sus", "stnga",
"dreapta" i "jos" ale unui element. Vezi exemplul de mai jos:
margintop: lungime / procente sau auto;
marginleft: lungime / procente sau auto;
marginright: lungime / procente sau auto;
marginbottom: lungime / procente sau auto;
Dup cum se observ n exemplul de mai sus, avem la dispoziie 3 variante pentru valori pentru margine:
lungime, procent, auto. De asemenea, se pot declara toate cele 4 margini ntr-o singur proprietate:
margin: 10px 10px 10px 10px;
Dac se folosete varianta din urm, ordinea marginilor este urmtoarea:
1. sus
2. dreapta
3. jos
4. stnga
Dac este declarat o singur valoare, aceasta este valabil pentru toate cele 4 margini:
margin: 10px;
n cazul n care se declar doar dou sau trei dintre margini, valorile nedeclarate sunt "luate" din partea opus:
margin: 10px 10px; /* 2 valori */
margin: 10px 10px 10px; /* 3 valori */
Se poate seta marginea i cu valori negative. n cazul n care nu se declar marginile unui element, acestea sunt
n mod implicit egale cu zero.
margin: 10px;
Elementele precum paragrafele (<p>) au margini implicite n anumite browsere, aa c va trebui s fie declarat
marginea egal cu zero ca s nu existe diferene de rndare n browsere diferite. Acest lucru se obine astfel:
p {margin: 0;}
OBS: dac valoarea care se atribuie marginii este egal cu zero, nu mai este necesar specificrea unitii de
msur, fie ea pixel, punct, sau oricare alta.
Se poate observa n exemplul de mai jos, cum elementele sunt setate la 20px (pixeli) fa de corp (body).
body
{
margin: 20px;
background: #eeeeee;
fontsize: small;
fontfamily: Tahoma, Arial, "Trebuchet MS", Helvetica, sansserif;
textalign: left;
}
6.4. Padding CSS

Motenit: NU
Paddingul este distana dintre bordura unui element (X)HTML i coninutul lui. Majoritatea regulilor de la
marginile css se aplica i la padding, cu excepia c aici nu exist valoarea "auto" i nu pot fi declarate valori
negative.
paddingtop: lungime / procent;
paddingleft: lungime / procent;
paddingright: lungime / procent;
paddingbottom: lungime / procent;
Se poate observa n exemplul de mai sus, c avem la dispoziie dou posibiliti pentru proprietatea "padding":
lungime i procent. Este posibil s se declare paddingul pentru un element ntr-o singur proprietate, astfel:
padding: 10px 10px 10px 10px;
Dac se declar toate cele patru valori, ca n exemplul de mai sus, ordinea lor este urmtoarea: 1. sus; 2. dreapta;
3. jos; 4. stnga
n cazul n care se declar o singura valoare, aceasta este valabila pentru toate cele patru laterale ale elementului
respectiv.
padding: 10px;
Dac se declar doar dou sau trei valori, valorile nedeclarate sunt luate din prile opuse: padding: 10px 10px;
/* 2 valori */ padding: 10px 10px 10px; /* 3 valori */ Dup cum tii ordinea celor 4 valori este: sus, dreapta,
jos, stnga. Cnd declarai doar primele dou nseamn ca ai declarat valoarea pentru sus i pentru dreapta.
Valorile pentru celelalte dou vor fi: jos=sus, stnga=dreapta. Dac nu declarai paddingul unui element, acesta
va fi implicit egal cu zero.
NOT: dac valoarea pe care o atribuii marginii este egala cu zero, nu mai este necesara specificrea unitii
de msur, fie ea pixel, punct, sau oricare alta. Se poate vedea mai jos, cum containerul principal are paddingul
setat la 30px (pixeli) ntre marginea lui i textul coninut. #container{ width: 70%; margin: auto; padding: 30px;
border: 1px solid #666; background: #ffffff; }
6.5. Fonturi CSS

Motenit: DA
Proprietile fontului pot stabili stilul, mrimea, nlimea liniei i tipul fontului folosit: font: italic bold normal
small/1.4em Verdana, sansserif; Exemplul de mai sus seteaz textul unui element, ca fiind italic, bold, de
mrime relativ, cu distana ntre linii de 1.4em i un font Verdana sau orice alt font de tipul sansserif.
Familia de fonturi - Se poate stabili ce font va fi folosit la afiare cu ajutorul proprietii "fontfamily". Exist
dou posibiliti pentru valori:
* familyname
* generic family
Dac se stabilete o anumit familie de fonturi, este bine s se specifice la sfrit i o familie generic de fonturi.
Ca i cum ar fi o list de prioriti. Astfel nct, dac vizitatorul nu are instalate fonturile preferate de dvs, vor fi
folosite fonturile din familia generic. fontfamily: Verdana, sansserif;
Mrimea fontului Mrimea textului este dat de proprietatea "fontsize": fontsize: valoare;
Exist o mulime de posibiliti pentru valoare: xxlarge, xlarge, larger, large, medium, small, smaller, xsmall,
xxsmall, length, % (procent).
Stilul fontului Proprietatea "fontstyle" specific stilul fontului: fontstyle: valoare; Posibilele valori pot fi:
normal. Itailc, oblique.
Varianta fontului Putem stabili varianta fontului cu ajutorul proprietii fontvariant: fontvariant: valoare; Pentru
"valoare" se pot folosi urmtoarele variante: normal, smallcaps
Grosimea fontului Grosimea fontului folosit este controlata de proprietatea "fontweight": fontweight: valoare;
Posibilele valori sunt: lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder.
6.6. Ancore, linkuri i pseudo clase n coninuare se prezint cteva metode prin care se poate utiliza CSSul pentru a stiliza link-urile:
a:link {color: #009900;} - seteaz culoare unui link implicit, cnd nu are loc nici un eveniment; a:visited
{color: #999999;} - ne arata ce culoare are linkul, cnd vizitatorul a vizitat deja pagina respectiv, mai exact a
executat click anterior pe acel link
a:hover {color: #333333;}- seteaz culoarea linkului atunci cnd mouseul este deasupra lui. Este evenimentul
cunoscut ca i "mouseover" (mouse deasupra);
a:focus {color: #333333;} - este asemntoare cu cea anterioar, ns are efect cnd utilizatorul folosete
tastatura pentru navigare (tasta "Tab") i nu mouseul;
a:active {color: #009900;} specific culoarea unui link atunci cnd acesta este apsat. La click pe link,
culoarea se va schimba cu cea specifict n aceast linie.
NOT: Trebuie declarat "a:link" i "a:visited" nainte de "a:hover". Mai mult, trebuie declarat "a:hover"
naintea lui "a:active". Folosind regula general de mai sus, toate linkurile din pagina dvs vor fi afectate, i vor
folosi aceast regul. Se pot seta stiluri de linkuri separate pentru anumite poriuni din pagin, dac se dorete
acest lucru.
6.7. Pseudo Clasele - Este posibil setarea de culori diferite pentru linkurile din pagin (de exemplu meniul
de o culoare, linkurile din text de o alt culoare, etc ) folosind pseudoclasele.
De exemplu, s spunem c se dorete ca linkurile din text s fie diferite de cele din coloana din stnga
sau dreapta. Se poate obine acest lucru astfel:
#content a:link {color: #009900;}
#content a:visited {color: #999999;}
#content a:hover {color: #333333;}
#content a:focus {color: #333333;}
#content a:active {color: #009900;}
Presupunnd ca avem coninutul principal ntr-un div numit "content", toate linkurile din acest div vor fi
stilizate de acest selector. Dac div-ul are alt nume este de ajuns s se schimbe numele n foaia de stil din
"#content" n unul potrivit.
Apoi, linkurile dintr-o coloan se stilizeaz aa:
#column a:link {color: #009900;}
#column a:visited {color: #999999;}
#column a:hover {color: #333333;}
#column a:focus {color: #333333;}
#column a:active {color: #009900;}
nc odat, presupunem ca divul coloanei se numete "column". Aceeai metod se aplic i pentru a declara o
clasa n loc de un Id.
a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: #333333;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}
n acest caz ns, va trebui s atribuim fiecrui link clasa potrivit:

<a class="column" href="#" title="textul linkului"> textul linkului </a>
Exist totui o cale mai uoar:
.column a:link {color: #009900;}
.column a:visited {color: #999999;}
.column a:hover {color: #333333;}
.column a:focus {color: #333333;}
.column a:active {color: #009900;}
... urmnd ca n fiierul (X)HTML s avem:
<div class="column">
<a href="#" title="textul linkului"> textul linkului </a>
< /div>
Sunt i alte proprieti care pot fi aplicate linkurilor, aproape orice proprietate folosit la stilizarea textului poate
fi aplicat i la linkuri.
6.8. Fundaluri CSS

Motenit: NU
Fundalul - Fundalul unui element poate fi stilizat cu o declaraie de proprietate adecvat.
background: #ffffff url(calea_catre_imagine) top left norepeat fixed;
Valori: attachment color image position repeat
Sau, se poate seta fiecare proprietate separat, dup cum urmeaz:
Ataament fundal
Dac se folosete o imagine ca fundal, se poate specific dac fundalul se mic o dat cu pagina (la scroll
vertical) sau este fix cu ajutorul proprietii "backgroundattachment".
backgroundattachment: valoare;
Valori: fixed, scroll
Culoarea fundalului Proprietatea "backgroundcolor" specific culoarea fundalului:
backgroundcolor: valoare;
Posibile valori: color name, hexadecimal number, RGB color code, transparent
Imaginea de fundal Se poate seta o imagine ca fundal al unui element, cu proprietatea "backgroundimage".
backgroundimage: url(calea_catre_imagine);
Valori: url, none
Poziia fundalului - Imaginea folosit cu rol de fundal se poate poziiona cu ajutorul proprietii
backgroundposition.
backgroundposition: valoare;
Valorile posibile sunt: top left, top center, top right, center left, center center, center right, bottom left,
bottom center, bottom right, x%, y%, xpos, ypos.
Repetarea fundalului - Se poate face ca imaginea folosit la fundal s se repete pe axa x sau pe axa y a
ecranului folosind proprietatea "backgroundrepeat".
backgroundrepeat: valoare;
Valori: norepeat, repeat, repeatx, repeaty.
Tema
Lucrarea 7 Joomla
7.1. Ce este Joomla
Joomla este un Content Management System (CMS), premiat n nenumrate ocazii, care ajut la
construirea websiteuri i alte puternice aplicaii online. n plus, Joomla este o soluie Open Source
disponibila tuturor, gratuit.
Joomla este folosita peste tot n lume, ca infrastructura, de la mici pagini personale pana la aplicatii web
complexe:
Websiteuri pentru corporaii sau portaluri
Aplicaii intra i extranet pentru corporaii
web
Websiteuri pentru coli i biserici
Comer on-line
Websiteuri personale sau familiale
Websiteuri pentru firme mici
Portaluri pentru comuniti on-line
Websiteuri pentru organizaii non-profit
Websiteuri pentru reviste i ziare
Aplicaii guvernamentale
Joomla poate fi folosita pentru a administra cu usurinta orice componenta a websiteului, de la adugarea de
coninut i imagini, la actualizarea unui catalog cu produse sau sondaje on-line. Pachetul de baza Joomla este
conceput pentru a putea fi instalat cu uurin, chiar i de non-programatori. Odat Joomla instalat i
funcional, este foarte simplu, chiar i pentru utilizatorul non-tehnic, de a aduga coninut, a actualiza
imagini i administra datele care ajut la funcionarea optim a organizaiei.
Printr-o interfa web simpla, vei putea aduga foarte uor tiri, articole sau declaraii de pres, s
administrai pagini cu detaliile angajailor, oferta de munc, imagini cu produse i s creai un numr
nelimitat de seciuni sau pagini pe site.
7.2. Instalare i configurare CMS- ului Joomla

7.2.1. Instalare local
Vom descarca de la adresa de mai jos kit-ul Joomla: http://www.joomla.ro. Arhiva se va salva i dezarhiva
n dosarul Htdocs al serverului ntr-un folder pe care-l denumim Joomla.
Primul pas n instalarea Joomlei este realizarea unei baze de date cu ajutorul serverului Xampp, care
conine i un server de baze de date. Se va deschide serverul prin Xampp_Start. Va apare fereastra de
mai sus Xampp Control Panel Application i o fereastra de Internet Explorer ca n fig de mai sus.
Pentru a realiza baza de date n fereastra din browser se alege din meniul din stnga
Tools/phpmyadmin. Apoi n noua fereastea se alege opiunea de creare a bazei de date. Ii vom da
denumirea Proba.
Nu inchidem serverul Xampp.
ntr-o noua fereastr Internet Explorer se introduce http://localhost/joomla. Acum are loc practic
instalarea.
Este foarte important ca n zona Required Settings Check s nu apara nici o eroare.
Urmeaza pasul de confirmare ca suntem de acord cu conditiile de licentiere GNU. Prin alegerea
butonului Next din aceasta fereastra va apare fereastra de mai jos n care avem de introdus:
denumire server: localhost
denumire utilizator MySql: root
denumire baza de date: Proba
Prin activarea butonului next va apare fereastra aferent pasului 3. Aici trebuie s completam E-mailul i o parola pentru administrator.
Pasul urmator va fi s tergem folderul installation din htdocs/joomla.

Pentru a realiza site-ul ne vom folosi pe http:/localhost/joomla.
Pentru a vizualiza ceea ce se realizeaza pe partea de administrator vom introduce
http:/localhost/joomla/administrator
7.2.2. Instalare server

Dac exist un site Joomla pe o main local, acesta poate fi transferat pe un server. Ca site-ul s
funcioneze i online trebuie: fiierele de pe maina local i baza de date.
Presupunnd c exist deja un cont pe un server de hosting, c exist acces la cpanel, deci un user i o parol
trebuie:
s se realizeze logarea pe server
s se creeze o baza de date MySQL, de obicei folosim phpMyAdmin
baza de date trebuie s aib acelai nume ca cea de pe local, ca s nu trebuiasca s se modifice
ulterior, prin configurri mai dificile. OBS: atenie la user full rights
Odat creat, se poate vizualiza c nu exist niciun tabel. Baza de date local trebuie importat. Pentru
acesta, din phpMyAdmin, pe local:
se va selecta baza de date,
Browse i Export. Astfel vom avea baza de date exportat sub forma de fiier,
pe serverul online se va alege Import.
Rmne doar ca fiierele din htdocs de pe serverul local s fie i ele copiate:
cu un client de FTP pe server, (preferabil SmartFTP sau WinSCP) se va copia coninutul folderului
(site-ului) local pe server. Se vede n imaginea de mai jos unde sunt situate fiierele (local server
XAMPP), online ele fiind adugate sub public_html sau htdocs, depinde de server.
se poate face un zip cu fiierele locale, s se uploadeze zip.ul i s s fie dezarhivat online dac
exist aceast opiune.
trebuie s fie consultate setarile din configuration.php, pentru c eventualele erori numai de acolo
vin. Fiindc exist acelai nume la baza de date, trebuie s se adauge o parol pe baza de date, ceea
ce e obligatoriu pentru funcionarea pe server (pe local de obicei nu exist parola), dar e bine s
verificam tot, nu dureaza foarte mult.
Frontend user - site user

Acest tip de user are access n site i dup logare i poate crea i publica articole n site. Ei nu pot accesa
partea de administrare sau partea de grafic a siteului. Ei pot aduga coninut direct de pe site utiliznd un
editor de text. Administratorul site-ului le poate da anumite roluri, n funcie de acestea ei vor avea definite
nite nume regsite n lista de useri din admin: Site -> User Manager.
Dup cum se poate vizualiza n imaginea de mai sus, userii se mpart n:
Registered - acest tip de user nu are niciun drept s creeze, modifice sau s publice coninut n Joomla.
Ei au access la articolele de tip registered unde vizitatorii normali nu au.
Author - poate scrie coninut/articole pentru site, poate specifica data de publicare sau controla aezarea
n pagina.
Editor - are aceleai drepturi ca un autor, n plus poate s editeze coninutul articolelor lui i ale celor
adugate de autor.
Publisher - are drepturile editorului dar poate s i publice articolele n site. Numai administratorul
siteului poate modifica rolul oricrui user specificat mai sus.
Backend user - administration user - Aceti useri se pot loga n partea de administrare a siteului.
Fiecare din ei poate avea un anumit rol:
o
Manager - este un publisher cu acces n partea de administrare a siteului. Are acces asupra
coninutului din site dar nu poate schimba grafica/template, s tearg sau s adauge extensii n
site. Deasemenea nu au access asupra managementului userilor, nu pot aduga useri sau s le
schimbe profilul celor existeni.
Administrator - are acces peste manager, poate terge sau instala extensii n site, poate schimba
template-ul siteului i poate altera/schimba profilele userilor care sub nivelul lui. Nu poate edita
profilul Super Administratorului, i nu are access n zona de configurri globale (Global Config).
Super Administrator - are acces nelimitat la tot ce nseamn Joomla. Numai el poate s
transforme un user n Super Administrator sau s creeze noi Super Administratori pentru site.
La instalarea Joomla, singurul user din site este Super Administratorul i are control total asupra prii de
administrare a siteului.
7.3. Prezentare general - partea de administrare

Dup instalarea site-ului:
Se poate naviga pe site sau frontend sau View Site prin http://www.adresa.ro
Sau se poate naviga pe backend sau ctre partea de administrare (Administration) prin
http://www.adresa.ro/administrator/
Personalizarea site-ului, se va realiza printr-o serie de setri i activiti de creare de coninut. Toate aceste
activiti se vor realiza pe partea de administrare. Pentru a avea acces la partea de administrare se va
introduce userul i parola n fereastra care apare accesnd adresa numesite.ro/administrator.
Prima fereastra deschis este Control Panel, n care pe stnga se pot vizualiza nite iconite (sunt scurtaturi
ctre sitemul de management) i pe dreapta cteva date despre site. Revenirea la aceast fereastr se poate
realiza oricnd, cu ajutorul butonului "Home" - e primul din stnga pe meniul principal.
n partea stnga se pot vizualiza:
Add New Content - ne duce direct n fereastra de adugare a unui nou articol;
Content Items Manager - ne duce n ferestra unde pot vedea lista de articole dinamice existente pe
site;
Static Content Manager - ne duce n ferestra unde se poate vedea lista de articole statice existente pe
site;
Front Page Manager - fereastra de unde se poate face managementul layout-ului paginii de inceput a
siteului n cazul n care folosim componenta Front Page;
Section Manager - lista seciunilor din site;
Category Manager - lista categoriilor din site;
Media Manager - o fereastr care ne prezint folderul images/, folder unde se afl imaginile cu care
se lucreaz n Joomla. Putei crea un alt folder i s uploadai o imagine. La o trece cu mouse pe
deasupra imaginilor se pot vedea diverse informaii: numele imaginii, limea, nlimea,
dimensiunea pe care o ocup pe disk, se poate selecta pentru a o vedea n marime natural (Click to
Enlarge) i deasemenea i se poate afla codul [Click for Image Code];
Trash Manager - n acest fereastr se pot vizualiza ce articolele i meniuri am sters (vezi n dreapta
un selector: Content Items - sunt articolele pe care le-am sters i Menu Items - sunt meniurile sterse
de noi), se pot lsa acolo n cazul n care vreodata le vom mai folosi, pentru ca se pot readuce n site
(click n dreptul lor i pe butonul din dreapta sus - Restore), sau se pot terge definiiv (fara
posibilitate de recuperare pentru ca se sterg i din baza de date). Sfat: daca nu va trebuie tergeti-le.
Menu Manager - fereastra unde se poate administra meniurile din site
User Manager - fereastra de unde se poate face managementul userilor siteului.
Global Configuration - fereastra configurrilor globale a siteului
n partea dreapt se poate vizualiza un selector cu taburi:

Logged se vizualizeaz ci useri sunt logai n site, informaii despre tipul userului .
Components - se vizualizeaz informaii despre componentele instalate n site, afiate n ordine
alfabetic - "Full Component List";
Popular - se vizualizeaz informaii despre cele mai populare articole din site, ordonate n funcie de
numrul de clickuri care s-au dat pe ele (de cate ori au fost vizitate);
Latest Items - o lista cu ultimele 10 articole adugate n site;
Menu Stats - lista meniurilor din site.
Schimbarea interfeei folosind Templates-Admin i Language Manager pentru adugarea elementelor
aferente interfeei n limba romn
Pentru a schimba interfaa n romn se descarc de pe http://www.joomla.ro versiunea n romn cu
diacritice i pentru a o instala se folosete din fereastra de mai sus Language Manager.
Schimbarea interfeei, adic a ferestrei vizualizate de un user obinuit se face numai de ctre
administrator folosind Templates-Admin.
7.4. Schimbare parol - S-au ntmplat cazuri cnd din diferite motive administratorii site-urilor joomla
uit parola sau este schimbat de alt super administrator.
Soluia 1 - O soluie ar fi s se tearg site-ul i s fie reinstalat. Dar dac acel site are o anumit vechime i
un trafic n cretere sau utilizatori n numr din ce n ce mai mare. n acest caz reinstalarea iese din discuie.
Soluia 2 - www.numesite.ext/cpanel
Se va face logarea pe serverul pe care este gzduit site-ul, n cpanel i se va intra la seciunea dedicat bazei
de date. Odat identificat baza de date corect se va identifica tabela jos_users
n acea tabel se pot vedea urmtoarele:
1.Id-ul respectivului utilizator- care este un numr
2.Numele acelui utilizator
3.Pseudonimul- Cunoscut ca i "username"
4.Parola (password) - La parola se va vedea o nregistrare de genul: b54e49f4df1ee015c2793a39dbc (parola

este codat n sistem MD5 i fiind un ir alfa numeric - ir de cifre i litere)
5.Tipul de utilizator
6. Din tabela respectiv se va alege numele utilizator care corespunde i se va edita. Pentru schimbarea
parolei uitate trebuie s se adauge o parol nou dar tot n sistem MD5
B.Schimbarea parolei se face astfel:

1. Se va introduce n browser adresa: www.miraclesalad.com/webtools/md5.php
2. n cmpul "string" se va aduga noua parol (Ex. 1234)
3. Se va genera un cod MD5 pentru parola aleas exemplu: Pentru 1234 codul va arta astfel:
81dc9bdb52d04dc20036dbd8313ed055
C. Se va reveni la tabela jos_users din baza de date n cmpul "Password" se va nlocui vechiul ir
alfanumeric cu noul ir, dup care se va salva.
Soluia 3 - folosind phpMyAdmin, se deschide baza de date n care a fost instalat Joomla i se execut
comanda sql:
Cod:
UPDATE `jos_users` SET `password` = md5('parola_noua') WHERE `id` = id_user;
n care se nlocuiete parola_noua cu noua parol i id_user cu numrul de identificare a userului
cruia i se schimb parola.
7.5. "Welcome to the Front Page"

Dup instalarea kitului Joomla, la o navigare pe site, pe pagina Home page, se va observa c titlul paginii
este "Welcome to the Front Page". Acest mesaj vine de la componenta Front Page, component care este
pagina de start a unui site Joomla. Deobicei acest mesaj nu corespunde necesitilor de design i trebuie s
schimbat sau ters.
Pentru acest lucru se vor parcurge paii urmtori:
1. Ne vom loga pe partea de administrator cu site.ro/administrator
2. Se va selecta Menu - mainmenu
3. Alegem Home
4. Se va deschide o pagina ca n imaginea de mai jos
7.6. "Joomla! is Free Software released under the GNU/GPL License."

Cum se modific declaraia din footer n Joomla 1.0
"Joomla is Free Software released under the GNU/GPL License" apare n pagina footer.php care se afla n
folderul includes\, de pe server sau locahost. Prin editarea fiierul footer.php, o s vizualizm urmtorul cod:
<div align="center">
<?php echo $_VERSION->URL; ?>
</div>
Exist dou posibiliti:
Se terge cu totul acest linie, i n loc de:
<?php echo $_VERSION->URL; ?>
se va aduga
"Acesta este site-ul meu"
deci:
<div align="center">
Acesta este site-ul meu.
</div>
Alta posibilitate este s se modifice textul n fiierul version.php din acelai folder. Linia de cod este:
/** @var string URL */
var $URL
= '<a href="http://www.joomla.org">Joomla</a> is Free Software released under the
GNU/GPL License.';
care poate deveni:
/** @var string URL */

var $URL
= '<a href="http://www.numesite.ro">numesite</a> acesta e site-ul meu.';
Cum se modific declaraia din footer n Joomla 1.5 - n Joomla 1.5 este publicat un modul numit Footer.
Tot ce trebuie realizat este s se seteze ca unpublish modulul.
Pentru a modifica Powered By Joomla, trebuie s editm fiierul index.php care se afl n template-ul
utilizat.
<p id="power_by">
<?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla</a>.
<?php echo JText::_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a>
<?php echo JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</p>
putem terge prima linie:
<p id="power_by">
<?php echo JText::_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a>
<?php echo JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
</p>
sau se poate schimba <a href="http://www.joomla.org">Joomla</a> cu alte date.
7.7. Cum se schimb favicon-ul n site-ul Joomla

Orice site Joomla 1.0, vine cu favicon-ul default Joomla; favicon fiind prescurtarea de la "favorites icon".
Acesta este un icon de 16pxX16px i ne apare n browser n bara de adrese, n Firefox i IE7 apare i pe
taburile browser-ului.
Deci dup ce se va instala Joomla, n browser se va vedea un favicon ca n imaginea de mai jos:
Deobicei site-urile profesioniste au favicon-uri personalizate, deci este bine s schimbai acest favicon cu
unul care s reprezinte domeniul site-ului sau logo-ul firmei, ca n imaginea de mai jos.
Cum s v creai propriul vostru favicon:

1. Dimensionare imagine favicon: ideal este s avei un logo de forma unui ptrat ca s nu se distorsioneze
prea mult la resize. Cu ajutorul unui program de prelucrat imagini (Fireworks sau Photoshop), se poate
aduce logo-ul la un ptrat cu dimensiunile de 16pixeli X 16pixeli. Se va salva imaginea ca "favicon.png" sau
"favicon.gif"
2. Convertirea imaginii n "favicon.ico" se poate realiza foarte uor prin utilizarea un favicon generator
(http://tools.dynamicdrive.com/favicon/), nu trebuie dect dat calea ctre imaginea i apsat "Create Icon.
3. Inlocuirea favicon-ului :
Joomla! 1.0: sitename.ro/images/favicon.ico se va nlocui imaginea cu noul favicon;
Joomla! 1.5: la unele template favicon-ul este locat n root-ul folderului acelui template [root template =
site.ro/templates/numetemplate/ ] i template-ul are codul pentru afiare favicon, dac nu are, se poate
aduga cu paste n root-ul template-ului i n index.php:
Refresh" n site i dac noul favicon nu va apare, se va goli cache-ul browserului "Clear Cache" i
apoi "Refresh".
7.8. Cum se modific sau se adaug meta taguri n Joomla 1.5

Dac site-ul e realizat cu cu Joomla 1.5 se pot modifica sau aduga meta taguri la fel de simplu ca n Joomla
1.0. Schimbrile se fac din fiierul html.php care se gsete libraries\joomla\document\html\html.php
Codul original arat aa:
//set default document metadata
$this->setMetaData('Content-Type', $this->_mime . '; charset=' . $this->_charset, true );
$this->setMetaData('robots', 'index, follow' );
dup modificare
//set default document metadata
$this->setMetaData('Content-Type', $this->_mime . '; charset=' . $this->_charset, true );
$this->setMetaData('robots', 'index, follow' );

$this->setMetaData('expire', 'never' );
$this->setMetaData('revisit-after', '1 day' );
7.9. Configurare SEO, cum se activeaz linkuri SEF n Joomla

SEO - Search Engine Optimization - se refer la tehnicile de optimizare
SEF - Search Engine Friendly - se refer la linkurile paginilor din site
La prima privire linkurile sunt de genul:

www.site.ro/index.php?option=com_content&view=article&id=19&Itemid=27
ceea ce face dificil identificarea lor de ctre un motor de cutare.
Pentru ca paginile site-ului s fie uor regsite pe Internet (adic s aib forma www.site.ro/joomlaoverview), se vor parcurge paii urmtori:
1. Ne vom loga pe partea de administrator cu site.ro/administrator
2. Se va selecta Site -> Global Configuration
3. n dreapta avem un tab: SEO Settings i sub el:
Search Engine Friendly URLs: No
Use Apache mod_rewrite: No
4. Se va introduce Da (Yes) la ambele i se va salva configurarea.
5. Ultimul pas este s se modifice numele fiierului htaccess.txt n .htaccess, fiierul htaccess.txt se
gsete n root (dac se va rtci el se afl i n pachetul Joomla.)
OBS: aceste informaii sunt coninute de fiierul configuration.php care se afla n root-ul site-ului. Din
motive de SECURITATE, acest fiier este bine s nu aib drepturi de scriere (644), astfel c dup ce se fac
modificrile pentru SEO, trebuie restabilite drepturile iniale. Dac n momentul cnd se salveaz va apare
un mesaj: An Error has occurred! Unable to open configuration.php file to write! nseamn ca fiierul
este pe 644. Aceste setri sunt valabile pentru un site publicat pe un server, i atunci din cPanel sau FTP
trebuie schimbat dreptul de acces n 666, i apoi back 644.
Tema
Lucrarea 8 Joomla
8.1. Meniuri n Joomla
Un meniu reprezint o bara de butoane cu linkuri ctre diferite pagini cu articole din site, ctre componente,
ctre mapa siteului, sau ctre URL-uri externe siteului.
n Joomla, v trebuie cel puin un meniu publicat, de obicei este n partea de sus a siteului sau pe stnga,
putei pune meniuri pe orice poziie din site, n josul paginii (footer) sau pe dreapta, le putei organiza cum
vrei, trebuie s inei cont de flow-ul siteului i de faptul ca trebuie s oferii vizitatorilor o navigare ct mai
simpl i concret la coninutul siteului.
8.1.1. Meniurile de baz din Joomla

Meniurile instalate de Joomla sunt n numr de patru, le vedei imediat ce trecei cu mouse-ul pe deasupra
tabului "Menu" n admin.
1. mainmenu - meniul principal este de regula acel meniu care apare n site i ofer cele mai
importante linkuri ctre coninutul siteului;
2. othermenu - este un meniu optional, l putei folosi schimbndu-i numele i adresa ctre care pleac
linkurile n site;
3. topmenu - chiar dac se traduce "meniul din top", nu este obligatoriu s l utilizai n topul paginii,
deasemenea i putei schimba numele i l putei folosi dac v trebuie;
4. usermenu - este un meniu care apare n site numai vizitatorilor care au un cont i sunt logai.
Sunt butoane cu linkuri ctre diferite detalii ale acelui user. Le putei schimba numele, modifica putei crea
altele.
Important - Meniul mainmenu are o importan aparte n Joomla: conine pe prima poziie un link (este de
fapt primul buton care ne apare pe meniu n site) care va fi linkul ctre prima pagin a siteului.
8.1.2. Cum se adaug un nou meniu
Este foarte uor s adugm un nou meniu n Joomla, sunt civa pai de urmat.
1. mergei n Menu -> Menu Manager;
2. dai click pe New, n dreapta sus;
3. introducei numele meniului (Menu Name);
4. introducei titlul modulului (Module Title), titlul este folosit pentru a putea fi identificat n lista de
module, pentru ca v aparea i acolo, se poate modifica foarte simplu mai tarziu;
5. click pe Save pentru a-l salva.
Se observ c n lista din imaginea de mai jos sunt acum 5 meniuri. n site nu o s vedei acest meniu,
deoarece el fiind un modul trebuie publicat i pus pe o poziie din template.
Deci de la Module ->Site Modules, cutam dup mod_mainmenu, i o s vedem meniul/modulul nostru n
lista cu un X rou n dreptul lui - asta nseamn c nu e publicat.
8.1.3. Cum se adaug un nou buton n meniu

Ca s adugm o nou buton (un nou link) la un anumit meniu n Joomla, mergem n tabul Menu, alegem
meniul care dorim, mainmenu de exemplu i dam click pe el.
O s vedem o lung list de itemuri (butoane) care sunt deja atribuite acelui meniu, prin click pe New, o s
apar cteva liste sub form de tabele, se alege un tip oarecare de acolo, apoi prin Next, introducei un nume
i unde s duc linkul, dup care salvai.
Ferastra se nchide i v duce n lista general, o s vedei butonul adaugat n josul listei, este ultimul. Dac
intrai acum pe site, o s vedei i butonul vostru, dai click pe el i v duce n pagina unde a fost atribuit.
8.1.4. Tipuri de butoane pentru meniuri

La un meniu putem s i adugm o mulime de butoane ctre diverse pri din site, fie c sunt simple
articole sau componente.
Putei s facei o lista pe diversele categorii existente: content, componente, diverse, linkuri i adugare de
coninut. Toate acestea le vedei n Joomla n admin, mergnd pe un meniu i dand click pe New (adugare
de buton nou n meniu).
a. Content (legtura ctre articole din site)
Blog - Content Category - este un link ctre o pagina n format de blog, care conine articole din una
sau mai multe categorii;
Blog - Content Category Archive - este un link ctre o pagina n format de blog, care conine articole
arhivate din una sau mai multe categorii;
Blog - Content Section - este un link ctre o pagina n format de blog care conine articole din mai
multe seciuni;
Blog - Content Section Archive - este un link ctre o pagina n format de blog care conine articole
arhivate din mai multe seciuni;
Link - Content Item - link ctre un articol publicat n site;
Link - Static Content - link ctre un articol ncadrat la content static;
List - Content Section - link ctre o lista de articole din diverse categorii dar o anume seciune;
Submit - Content - de aici vizitatorii pot adauga n site propriile lor articole;
Table - Content Category - link ctre o pagin cu articole dintr-o anume categorie, prezentate sub
forma tabelar;
b. Miscellaneous (legtura ctre diverse)
Separator / Placeholder - v creaz un separator ntre celelalte ramuri ale meniului;
Wrapper - n pagina nou creat v putei un site extern sau o pagina din siteul vostru.
c. Submit (adugare content)
Submit - Content - link pentru vizitatorii care vor s adauge noi articole n site.
d. Components (componente)
Component - face legtura cu pagina unei componente;
Link - Component Item - un link ctre o componenta care exist n Joomla
Link - Contact Item - link ctre un contact din site.
Link - Newsfeed - link ctre un feed de la o tire publicata;
Table - Contact Category - link ctre datele de contact dintr-o anumit categorie, sub forma tabelara;
Table - Newsfeed Category - link ctre feeduri din o a numita categorie;.
Table - Weblink Category - link ctre o pagina cu date Weblink dintr-o categorie Weblink;
e. Links (linkuri)
Link - Component Item - link direct ctre o component;
Link - Contact Item - link direct ctre un contact;
Link - Content Item - link direct ctre un articol;
Link - Newsfeed - link direct ctre un feed;
Link - Static Content - link direct ctre un content static;
Link - Url - link direct ctre un URL. Incepei linkul cu http://

OBS. Specificaiile din explicaii "link ctre", trebuiesc nelese ca o adugare a unui nou buton n meniu
care are pe el link ctre....
8.1.5. Cum se adaug un submeniu
Sunt dou modaliti n Joomla prin care putei face un buton pentru submeniu, fie s transformai unul
existent, fie s facei unul nou.
Ca s transformai un buton existent:
mergei n Menu ->mainmenu (sau alt meniu)
dai click pe butonul pe care vrei s-l transformai
alegei din Parent Item, pe care legtura din meniu s fie noul link
salvai acest opiune.
ca s facem unul nou:
mergei n Menu ->mainmenu (sau alt meniu)
dai click pe New
alegei-v tipul pe care vrei s l creati
alegei din Parent Item, pe care legtura din meniu s fie noul link
salvai aceast opiune.
Dac mergei n site acum o s vedei ca la o un buton din meniu o s avei o subramur, este noul buton
creat de voi.
8.1.6. Ce butoane se pot terge din meniu
n Joomla, meniul principal are incluse nc de la instalare foarte multe butoane. Multe din ele nu sunt utile
i deci le putei terge.
Dac le lasai n meniuri, poate din greeal o s le publicai i o s duc ctre un content care nu are legtur
cu site-ul (vechiul content Joomla) - nu dorii acest lucru, aa c e de preferat s trecei prin toate butoanele
i oprii doar ce v trebuie.
Principalele butoane din Man Menu sunt:
Home - acesta este un link ctre component numit the Front Page. Dac vrei s utilizai Front
Page ca i pagin principal a siteului putei s l oprii.
Joomla! License - nu avei nevoie de acest buton, l putei terge.
News - nu avei nevoie de acest buton, l putei terge, l putei aduga mai trziu.
Blog - nu avei nevoie de acest buton
Links - l putei folosi dac avei o colecie interesant de linkuri pentru vizitatorii dumneavoastr,
dac nu, l tergei i pe acesta.
Contact Us - acest buton poate fi oprit, l vom redenumi Contact i se va seta mai tarziu.
Search - acest buton duce ctre componenta de cutare prin site, este destul de interesant aa c se
va redenumi Caut.
News Feeds - nu avei nevoie de acest buton
Dei au mai ramas doar cteva butoane n meniul principal, oricnd putem aduga altele noi.
8.2. Cum se va ncrca o imagine pe server n site

Cea mai rapid i simpl metod de a ncrca o imagine n site este cea n care se folosete un client de
FTP.
Joomla pune la dispoziie o alt metoda, simpl dar mai nceat.
o
Site -> Media Manager. n fereastra ce va apare se pot vizualiza folderele i imaginile din folderul
images. Folderele sunt M_images, banners, smiles, stories, n plus mai sunt imaginile folosite de
Joomla.
Stories este cel mai important folder i se va utiliza pentru a stoca imaginile, deoarece marea
majoritate a componentelor "caut" acolo imaginile.
8.3. Cum se va crea un nou folder n stories

Se va selecta stories, dup care sus n dreapta la Create Directory se va aduga numele nostru. Este
bine s folosim numai un cuvant pentru nume, sau mai multe desprite cu underscore (_). Apoi se va
selecta Create, i se poate trece la pasul urmtor.
Se va selecta noul folder, i se va folosi File Upload/Browse, se va selecta imaginea pe calculator, i
apoi Upload din meniul de sus din dreapta. Imaginea este acum pe server, i se poate folosi n site.
8.4. Find us on facebook - n primul rnd se va crea o pagin n contul de facebook (OBS! NU CONT CI
PAGINA).
Pasul 1. Se va crea pagina folosind link-ul urmtor - http://www.facebook.com/pages/create.php
Pasul
2.
dup
ce
s-a
creat
pagina,
se
va
introduce
browser
http://developers.facebook.com/docs/reference/plugins/like-box/ i se va trece link-ul paginii n csua cu
"Facebook page URL", iar mai jos se pot vizualiza nite opiuni (spre exemplu "show stream" arat doar cine
a dat "like", "GET CODE" pentru a primi codul ce trebuie pus pe site-ul dvs..
Pasul 3. Se va copia codul i se va pune pe pagina site-ului unde vrem s afiam box-ul.
8.5. Sondaj sau Poll
Pasul 1. Din panoul de control al administratorului, se va selecta "Components" i apoi "Poll".
Pasul 2. Se va selecta "New" din colul din dreapta sus, se va scrie titlul, iar n dreapta se vor scrie opiunile
pe care vrem s le afieze.
Pasul 3. Se va selecta "SAVE" i poll-ul va fi creat.
8.6. Pagina de contact

Pagina Contact este deasemenea o pagina standard pe un site.
Vrem ca vizitatorii s ne contacteze, s ne intrebe de site, s ne
trimita sugestii.
Joomla ne pune la dispozitie o astfel de pagina "gata facuta" Contact Us. Este deja adugata de Joomla n meniul principal i
arat cam asa:
Ca s se poat vizualiza informaiile din aceast pagin trebuie

fcute cteva modificri:- Components ->Contacts -> Manage
Contacts
se va cuta un contact name;
apsnd contact name, se va deschide o pagin cu informaii deja completate care se pot terge i
completate cu informaiile dvs.;
nu eeste obligatoriu a le completa pe toate, putnd fi lasate i goale;
din tabul Images, se poate alege o imagine reprezentativ n locul celei existente;
din tabul Parameters, se poate alege ce informaii s afiai n pagin;
La o navigare pe site, n pagina de Contact, se vor afia informaiile dvs.
Tema
Lucrarea 9 Joomla
Accesarea panoului de configurare Joomla se face la adresa: http://www.adresa.ro/administrator/ unde
adresa.ro reprezint numele de domeniu al site-ului dumneavoastra.
Prima fereastra deschis este Control Panel. n partea de sus stnga avem meniul principal Joomla, iar sub
acesta pe partea stnga avem niste iconite (sunt scurtaturi catre sistemul de management pe care nsa nu le
vom folosi deocamdata). Ne putem ntoarce n aceasta fereastra oricnd prin accesarea meniului Site >
Control Panel. Pe aceeasi linie cu meniul Joomla, dar n dreapta, avem butonul Preview cu care accesam
rapid site-ul pentru a vizualiza modificrile efectuate i butonul Logout de ieire din panoul de configurare.
Ultima csua din bara este cea a editorului text. Dac modificati aceasta opiune va trebui s ieii din
panoul de administrare i s va autentificai din nou pentru a se ncarc editor ales.
NU UITATI ca la terminarea sesiunii s dati logout intotdeauna. nchiderea browserului nu termina sesiunea
i laa o portita deschis pentru accesul persoanelor neautorizate.
9.1. Meniul Joomla
Meniul general Joomla este structurat n urmtoarele categorii:

Site partea de configurare general a site-ului i management a utilizatorilor.
Menus partea de configurare a meniurilor site-ului.
Content configurarea coninutului site-ului: seciuni, categorii, articole.
Components aici vei gasi toate componentele instalate n Joomla: VirtueMart, ccNewsletter,
sh404SEF, PhocaGallery, SOBI2, etc.
Extensions partea de configurare a extensiilor instalate: tema grafica, module, pluginuri.
Tools unelte interne Joomla: mesagerie, cache.
Help linkuri de ajutor.
9.2. Administrarea utilizatorilor

Pentru a administra utilizatorii nregistrai sau pentru a crea un nou cont, navigati n meniul Site -> User
Manager.
Pentru a crea un utilizator nou facei click pe "New", iar pentru a edita un cont existent facei click pe
numele respectiv din lista. Atenie la grupul n care situati un anumit utilizator. Implicit un nou cont este pus
n grupul Registered, opiunile fiind limitate.
9.3. Configuraiile de baza ale site-ului

n meniul Site -> Global Configuraion se pot modifica opiunile de baza ale site-ului, platformei i accesului
serverului. n partea de sus a ferestrei (vezi imaginea de mai jos) avem o bara cu trei opiuni:
Site - configuraii de baza ale site-ului (dezactivarea site-ului, descrierea i cuvintele cheie globale);
System - configuraii de baz ale platformei Joomla;
Server - configuraii de baz privind interaciunea platformei cu serverul.
Cum acest manual este destinat utilizatorilor fr cunotine de programare web, recomandam s nu efectuati
modificri n aceasta seciune.
9.4. Seciuni, Categorii i Articole

Coninutul unui site Joomla, reprezint partea de text i imagini ce apar pe paginile site-ului. Joomla face ca
adugarea de articole s fie o treaba foarte usoara i intuitiva, nu va trebuie cunotine de programare.
Utiliznd partea de administrare a site-ului, putei adauga foarte usor coninut, utiliznd un editor care
seamana cu Microsoft Word Document. Imediat ce salvai n panoul de administrare, noul coninut va fi
automat afiat n paginile site-ului.
Coninutul (Content n meniul panoului de configurare) este organizat pe 3 niveluri: Seciuni (Section
Manager), Categorii(Category Manager) i Articole (Article Manager).
Articolele n site-ul Joomla, sunt coninute n categorii i categoriile fac parte din seciuni. Este un mod
foarte util de a va tine toate articolele ntr-o perfecta ordine. Administrarea acestora se face din panoul
Joomla, din meniul Content.
Primul pas, dac nu aveti deja creat o structura cu seciuni i categorii, ar fi crearea unei noi seciuni. Pentru
aceasta navigati n meniul Content > Section Manager i facei click pe butonul New. Completai numele
acesteia i aliasul (NU folosii spaii sau litere majuscule). Salvai.
Pentru crearea unei categorii pasii sunt similari doar ca de aceasta data navigati n meniul Content >
Category Manager. n plus la categoria creat trebuie s precizai seciunea din care face parte.
Odata creat structura de seciuni i categorii dorit se pot crea sau modifica articolele existente. Accesnd
meniulContent > Article Manager vei vedea un tabel asemntor cu cel din imaginea de mai jos.
Tabelul cu articole conine mai multe coloane cu urmtoarele informaii:

# - numr curent,
csua de selectare,
Title - titlul articolului,
Published indic dac un articol este publicat sau nu,
Front Page indica articolul afiat pe prima pagina,
Order ordinea articolelor n cadrul categoriei (prin click pe sgei se poate muta un articol mai sus
sau mai jos n lista),
Access Level indica cine are acces la citirea articolului (implicit este Public),
Section seciunea din care face parte categoria,
Category categoria din care face parte articolul,
Author autorul articolului,
Date data la care a fost creat articolul,
Hits numr de accesari de la publicare (accesari din panoul de configurare n vederea revizuirii, i
nu accesari de catre vizitatori),
ID - identificator unic.
Spre exemplu, pentru a terge un articol se bifeaz csua din dreptul numelui articolului, i se face click pe
butonul Trash. Articolul nu este ters complet, ci este mutat n Content > Article Trash. Pentru tergerea
definiiva a unui articol, acesta trebuie eliminat i din coul de gunoi. Pentru editare se poate da click pe titlu
sau se poate selecta articolul i apoi se face click pe butonul Edit din meniul de sus. Pentru crearea unui
articol nou se va apsa pe butonul New.
9.4.1. Editarea unui articol n Joomla

Adugarea unei noi pagini n site presupune doi pasi mari: crearea coninutului (articolul propriu-zis) i
adugarea link-ului n meniul site-ului. n acest tutorial va fi prezentata doar partea de creare i editare a unui
articol. Accesnd meniulContent > Article Manager vom ajunge n pagina unde se regsesc toate articolele
din site.
Dac site-ul dumneavoastra conine foarte multe articole este mai usor s afiati doar articolele dintr-o
anumit categorie sau
. Pentru aceasta se pot folosi listele de selecie aflate sub meniul din partea de sus, deasupra capului tabelului
n care sunt listate articolele (indicate n imaginea urmtoare).
Pentru a crea un articol nou se alege din meniul din dreapta sus opiunea "New", iar pentru a edita un articol
deja existent se bifeaz csua corespunztoare acestuia i se alege opiunea "Edit" (sau mai simplu se face
click pe titlul articolului).
n coninuare s analizam pagina de editare a unui articol. n partea dreapta sus avem meniul paginii cu
butoanele Save (salvare i ieire), Apply (salvare fr a iesi din pagina de editare), Close (ieire fr salvare).
Zona de editare este mprita n doua coloane. Coloana stnga conine cmpurile de setare a titlului
articolului, a linkului prietenos (alias) i a seciunii i categoriei din care face parte articolul. Folosii un Titlu
sugestiv pentru articol, care s aib maxim 65 de caractere. Alias-ul reprezint titlul folosit n linkul site-ului
i acesta este recomandat s fie scris doar cu litere mici i fr spaii. Mai jos gasim cmpul de editare
propriu-zis ce are doua bare de instrumente. Sus sunt butoanele de formatare a textului, similare cu cele din
Word, iar n partea de jos vom gasi butoane suplimentare de inserare imagini, video sau sfrsit de pagina.
Bara de formatare a textului poate diferi n funcie de editorul de text ales. Coloana din dreapta conine 3
zone (Parameters Article, Parameters Advanced i Metadata Informaion) ce reprezint o serie de parametri
pentru modul n care este afiat articolul n site. Este recomandat s lasai setarile globale pentru Parametri,
ntruct acestea pot fi configurate pentru ntreg site-ul n meniul Content -> Article Manager -> Parameters.
n zona Metadata informaion pot fi adugate descrierea (Description) i cuvintele cheie (Keywords)
pentru articolul respectiv. Descrierea trebuie s aib maxim 160 de caractere, ea nu apare pe site, ci doar n
codul sursa, avnd importanta doar pentru SEO. Cuvintele cheie trebuie s fie n numr de 5 8, desprite
prin virgula i scrise cu litere mici i fr caractere speciale sau diacritice. Dac nu completai aceste
cmpuri, nu este nici o problema pentru ca articolul va moteni descrierea i cuvintele cheie globale ale siteului.
Sunt cteva lucruri simple pe care e bine s le tii nainte de a va lovi de unele probleme suparatoare n
editarea articolelor:
Cnd editati un articol aveti grij ct stai pn salvai, pentru c se poate ca timpul sesiunii voastre
de administrator s expire i s avei neplcuta surpriz s fii dai afar din panoul de control i s
pierdei articolul la care tocmai ai muncit. De aceea este bine s salvai ct mai des sau s redactai
textul n Notepad, s l copiai n editorul Joomla i apoi s realizai formatarea finala a acestuia.
Avem 2 posibilitati s salvam n timpul editarii: Apply i Save, adic aplic schimbrile sau salveaz
definiiv. Care este diferenta: odat ce ai dat click pe Apply, salvrile se aplic (le putei vedea n
site) i fereastra de lucru ramne deschis; cnd apsai pe Save se salveaza editarile facute, nsa
fereastra de lucru se nchide.
Exist i Cancel, putei renunta la editare cu ajutorul acestui buton, fereastra de lucru se nchide i nu se
salveaza ceea ce ati scris de la ultima salvare.
Dac ieii din editare n alt mod dect Apply, Save sau Cancel (sa zicem ca nchideti browserul sau se
opreste curentul electric), cnd o s reveniti n lista de articole o s vedeti ca apare un lacatel mic n fata
numelui articolului. Acel lacatel ne arata ca articolul este n "editare", nu a fost salvat. Nu-i nimic, intrai pe
acel articol i la ieire utilizai unul din butoanele prezentate mai sus. Evitati s copiai text direct din Word.
Odata cu textul, se vor insera i coduri invizibile ce vor ncarc suplimentar pagina site-ului. Dac totui
aveti text redactat n Word, copiai-l mai nti n NotePad i de acolo copiai-l n editorul Joomla.
9.4.2. Adugarea imaginilor ntr-un articol
Adugarea unei imagini ntr-un articol se face foarte usor din bara aflat n subsolul editorului articolului.
Puneti cursorul de la mouse n locul unde vrei s inserai imaginea i apsai pe butonul "Image". Alegei o
imagine existent pe server (n site) sau apsai pe Browse pentru a alege o imagine de pe calculatorul dvs.
Nu uitati s dati apoi click pe Start upload pentru a ncarca pe server poza de pe calculator. Adaugati detalii
ca Image description i Title pentru ca acestea servesc att utilizatorilor ce au activata funcia de blocare a
imaginilor din site-uri ct i motoarelor de cutare (Google). Apsai Insert. Pentru aliniere pe centru n
cadrul articolului, click pe poza i alegei aliniere centru n pagina de editare a articolului.
9.4.3. Adugarea linkurilor n cadrul articolelor

Pentru adugarea unui link n cadrul articolului se redacteaz nti paragraful complet. Apoi se selecteaz
textul care va deveni link, i se alege pe pictograma din bara de instrumente sub forma unor zale de lan. n
noua fereasta se trece linkul n csua URL i se alege pe Insert. Textul selectat se va transforma ntr-un link
de culoare albastr, subliniat.
9.4.4. Adugarea tabelelor n cadrul articolelor

Exist cazuri cnd n cadrul unui articol trebuie inserat un tabel (fie cu date, fie din motive de formatare
spre exemplu adugarea unor imagini pe aceeasi linie cu textul). Pentru aceasta se alege pe iconita ce
reprezint un tabel cu un creion. Pentru configurare va trebui s fii ateni la ce parametri configurai. n
tabul General va trebui s introducem numrul de coloane (Cols) i rnduri (Rows). Ceilali parametri sunt:
Alignment alinierea textului n tabel
Border grosimea liniilor tabelului n pixeli. Pentru linii invizibile se laa valoarea 0 (zero).
n tabul Advanced mai avem doi parametri ce pot fi modificati usor:
Border color (culoarea liniilor)
Background color(culoarea fundalului pentru ntreg tabelul).
Dac nu dorii ca tabelul s aib culori speciale se vor laa parametri implicii. dup inserarea tabelului
acesta poate fi modificat dandu-se click dreapta pe el. Avem urmtoarele opiuni:
Insert a new table insereaza un tabel n celula n care se afla cursorul.
Table properties se redeschide fereastra prezentat mai devreme, cu proprietile tabelului. Astfel
se pot modifica parametri acestuia.
Delete table tergerea tabelului.
Cell proprietile unei singure celule.

Row proprietile unui singur rnd, inserare sau tergere.
Col inserare sau tergere coloane
Insert/Edit image inserarea unei imagini n tabel.
9.4.5. Administrarea meniurilor n Joomla

Un meniu reprezint o bara de butoane cu linkuri catre diferite pagini cu articole din site, catre componente,
catre harta site-ului, sau catre URL-uri (linkuri) externe site-ului.
Pentru crearea unui link nou sau pentru administrarea meniului siteului mergei n Menu > Menu Manager.
vei vedea n pagina nou deschis o lista cu meniuri ca n figura urmtoare:
n dreptul meniului n care dorii s adaugati linkul, apsai pe pictograma de pe coloana Menu Items. Se va
deschide o pagina noua cu toate linkurile din meniul respectiv. Pentru a adauga un link nou, facei click pe
"New" n noua pagindeschis apoi alegei Internal Link > Articles > Article Layout.
Introducei titlul linkului (aa cum dorii s apar acesta n site n meniu) i introducei un alias asemntor
care va fi folosit pe post de link efectiv (nu folosii majuscule sau spaii). Alegei poziia linkului n cadrul
meniului (Parent Items). Dac dorii ca acesta s apar direct n meniu, lasai opiunea implicita Top. Dac
dorii ca linkul s apara n submeniu, va trebui s alegei sub care link s fie creat noul link. n coloana din
dreapta apsai pe Select i alegei articolul care va fi deschis la alegerea respectivului link n site. Salvai
modificrile.
9.5. Extensii n Joomla

Joomla este o platforma puternic de administrare a coninutului, iar flexibilitatea acesteia este data de faptul
ca suport instalarea unor extensii cu ajutorul crora funciile de baz sunt mbuntite i extinse cu noi
funcii specializate. Extensiile se mpart n mai multe tipuri principale:
Components - componente
Modules - module
Plugins - pluginuri
Templates - teme grafice
Languages - pachete lingvistice
9.5.1. Componente (components)

Componentele sunt cele mai importante extensii, deoarece ele genereaza coninutul paginilor. Exist ns i
componente care nu genereaza coninut, aa cum ar fi componenta JoomlaPack de back-up al site-ului sau
componentele de newsletter. Componentele au propriile panouri de configurare accesibile prin meniul
Joomla Components i se folosesc mpreun cu module i pluginuri care sunt dezvoltate special pentru
fiecare tip de componenta.
Administrarea componentelor n Joomla - Componentele se gsesc n panoul de administrare Joomla n
meniul Components, fiecare avand opiuni specifice.
9.5.2. Module (modules)

Modulele ajut componentele sau siteul s afieze anumite poriuni de coninut sau anumite informaii, pe
marginile paginii sau n locuri special create pentru a fi ocupate de acestea. Un template Joomla are integrate
poziii n jurul coninutului principal al paginii, pe stnga, dreapta, n antet i subsol, deci modulele se vor
afiaza "n jurul" componentei care genereaza pagina.
Cele mai importante module din site sunt cele de tip meniu (mod_mainmenu), cutare (mod_search), feed
RSS (mod_syndicate) sau login (mod_login).
Administrarea modulelor n Joomla- Administrarea modulelor este mult mai simpla decat adugarea unui
nou articol pe site, ns presupune cunoastereapoziiilor n care se pot dispune acestea pe pagina web. Dac
analizam un template general Joomla, vom vedea ca poziiile modulelor sunt denumite: hornav, left, right,
breadcrumb, user1, user2 i aa mai departe. Deci pentru a publica un modul este necesar s tim unde l
vom plaa pe pagina. Spre exemplu dac dorim s l adaugam n coloana din stnga, atunci va trebui s
alegem poziia "left" n general. Totul tine de modul n care a fost realizat template-ul pe care l folosii.
Dac
nu
cunoasteti
dispunerea
modulelor
pe
pagina
atunci
putei
folosi
linkul
http://www.site.ro/index.php?tp=1unde n loc de site.ro trecei numele dvs de domeniu. Un strat transparent

se va afia peste prima pagina indicand poziia i numele modulelor.
Administrarea modulelor se face din meniul Extensions -> Module Manager.
Pagina care se va deschide conine o lista cu toate modulele existente. O parte din acestea sunt active (cele
care n coloana Enabled au o pictograma verde), iar altele sunt inactive (cele cu pictograma roie). La
instalarea unui modul, acesta va fi afiat n lista, dar nu va fi activat. Pentru activare sau configurare se
selecteaz modulul dorit i se alege din meniul dreapta-sus opiunea Enable sau Edit. Fiecare modul are doua
seturi de parametri:
Parametri comuni - titlu, opiune activare, ordine a poziiei n locaie i locatia poziiei (left, right,
user1, user2, etc.);
Parametri specifici - acestia depind de la un modul la altul.
Nu toate modulele care apar n lista se datoreaz instalarii unei extensii. Se pot crea module apasand butonul
"New" i selectand tipul de modul dorit dintr-o lista predefinita de Joomla. Lista cu tipuri de module
implicite include:
Modul login - afieaz pe pagina casutele username i password pentru login utilizatori;
Modul search - afieaz pe pagina o csua de cutare;

Modul menu - afieaz un meniu;
Modul custom HTML - afieaz coninut personalizat de administrator;
Modul syndicate - afieaz un link de abonare la fluxul RSS (n cazul unui blog sau portal de stiri);
Modul poll - afieaz un sondaj de opinie.
Acestea sunt doar cteva din modulele implicite Joomla, lista fiind mai lunga. Am prezentat ns doar acele
module care prezinta interes n general.
Adaugare poziii pentru module - Ca s adaugm o nou poziie n template de Joomla, codul "magic" este:
<jdoc:include type="modules" name="pozitienoua" style="xhtml" />
unde se va nlocui "pozitienoua" cu poziia dorit.
Pasul urmtor ns va fi s adugm
pozitianoua n lista de poziii (drop-
down).
Exist 2 metode pentru a folosi noua
poziie
adugat n template:
1. Este necesar ca i n fiierul templateDetailed.xml s se adauge o line de genul:
< position >pozitienoua< /position >
2. Se va tasta noua poziie, dup ce s-a ters cea care apare n csua de opiuni.
9.5.3. Pluginuri (plugins)

Pluginurile sunt funcii care ruleaza n pagina fr a afia coninut sau care afieaz n cadrul unei
componente opiuni suplimentare. Exemple de pluginuri sunt funciile de autentificare, editoarele text,
funcia de cutare sau funciile de sistem (debug, log, cache, etc.).
9.5.4. Templateuri (templates)

Template-urile Joomla ne ajut s schimbam din cteva clickuri design-ul site-ului web. Template-urile pot
fi vazute ca un pachet ce conine n esen un fiier (index.php) ce stabileste asezarea modulelor n pagina i
un fiier (template_style.css) care stabileste tema grafica / designul paginii. n jurul acestor doua fiiere sunt
adugate restul fiierelor, imaginilor i funciilor ce dau dinamism i culoare unui site web (spre exemplu
funciile javascript).
9.5.5. Pachete lingvistice (languages)

Pachetele lingvistice sunt fiierele care ne ajut s traducem site-ul sau anumite extensii din site. Pentru
limba romn exist doua pachete de traducere, unul pentru site (front-end) i unul pentru panoul de
administrare (back-end). Extensiile Joomla pot la rndul lor s suporte pachete lingvistice, ns n acest caz
depinde de tipul extensiei i pachetele disponibile pentru a fi instalate. Nu toate extensiile ofera posibilitatea
traducerii, iar din cele care ofera o astfel de posibilitate, nu toate au i un pachet de limba romn disponibil.
9.5.6. Instalare extensii

Pentru instalarea unei extensii se navigheaza n meniul Extensions -> Install/Uninstall. Se alege pachetul
(arhivat zip) pe care dorim s l instalam i apoi se alege pe Upload File & Install. Dac instalarea se
efectueaz cu succes, un mesaj i descrierea extensiei vor fi afiate.
Pentru tergerea unei extensii se alege din meniul din partea de sus a ferestrei tipul de extensie (componenta,
modul, plugin, etc). O lista cu extensiile instalate va fi afiat, cu posibilitatea de selecie i dezinstalare a
acestora.
Tema
Lucrarea 10 VirtueMart
Soluie ecommerce VirtueMart-Joomla - Soluia de comert electronic VirtueMart este cea mai fiabil,
profesional i complet soluie de comer electronic Open Source la ora actual pentru magazine de nivel
mic i mediu care ofer i o mulime de extensii open source i pay, create de o comunitate n continu
dezvoltare care adaug noi funcii alturi de multitudinea de funcii cu care vine deja VirtueMart de la
dezvoltator.
Cu o rapid acesiune n popularitate n topul platformelor eCommerce de nivel mic i mediu, multiple
premii de la diverse organizaii de prestigiu care fac top-uri anual i studii pentru scripturi de comer
electronic, este vzut ca o soluie de viitor n continu dezvoltare i din ce n ce mai folosit n randul
magazinelor de comer electronic fiind o bun i fiabil soluie de comer electronic Open Source.
Interfa de administrare produse, categorii i funcii foarte complex i intuitiv n acelai timp. Editoare tex
WYSIWYG n partea administrare i de creare descrieri produse, categorii, email-uri i pagini foarte uor de
administrat, uor de inserat imagini n text i de ncrcat pentru produse, suport multiple imaginii per
produs, alturi de multe alte funcii.
Iat mai jos o parte din caracteristicele generale ale VirtueMart:
Caracteristici generale
Administrare adrese de livrare (clienii pot introduce adresa lor de livrare, pot folosi adrese multiple)
Istoric comenzi: Clienii pot vizualiza comenzile lor precedente, stadiul comenzii actuale, detalii
comanda, etc.
Email confirmare comanda (configurabil) este trimis ctre proprietarul magazinului
Se pot utiliza valute multiple (putei permite clienilor s i aleag moned i s cumpere folosind o
alt moned alternativ dect cea standard)
Se pot utiliza multile limbi pentru comer internaional
Modul sondaje
Top 10 cele mai vndute produse
Produse adugate recent/produse noi
Funcie de sugerare produse asociate n pagina detalii produse
Caracteristici catalog produse

Interfaa panou administrare
Administrare numr nelimitat de produse / produse copil (subproduse) i categorii / subcategorii
Poate fi folosit ca magazin online sau ca un catalog online de produse (cu afiare pre sau fr a afia
preul)
Cautare rapida produse, categori i producatori/furnizori; filtrare dup caracteristici sau produse cu
reduceri
Comentarii i vot produse (moderate sau autopublicate)

Posibilitate de a seta (promova anumite produse pe prima pagin) specifica produsele selectnd
"Produs special"
Produse disponibile: afiai ct de repede un client poate primi livrarea produsului
Suport multiple taxe de livrare i curieri multipli configurati dup cum dorii dvs. expediere gratis
de la anumite sume n sus setate de dvs. etc.
"Produsul a revenit n stoc"- notificare pentru clienii care s-au abonat pentru aceast facilitate pentru
anumite produse ieite din stoc
Trimite unui prieten prin email, printati, salvare ca pdf, etc.
Ordonarea produselor afiate dup diferite criterii
Creare cupoane cu reduceri de pre (sum fix sau procent) de unic folosin sau permanente
Produse cu reduceri de pre afiate, multiple reduceri de pre, etc.
Funcie - ntrebai ceva despre acest produs
Descriere scurt produs n categorie i descriere detaliat n pagina produsului
Creare imagine mic (dimensiune configurabil) la ncarcarea pozei, foarte uor de introdus pozele la
produse
Caracteristici administrare
Multiple imagini per produs
Atribute produs (ca de ex: marime, culoare, etc.) pot fi adugate la produse
Tip produse pentru clasificare (ca de ex: monitoare, aparate foto sau camere video) cu diferite
atribute prestabilite
Grupuri clieni (se pot folosi diferite niveluri de preuri pentru fiecare grup i diferite optuni de plata),
Multiple preuri per Produs (Bazat pe cantitate sau/si pre bazat pe grup clieni)
Afiare pre flexibila (Format numr i valuta; incluzand sau excluzand taxele)
Conversie valutara pre intre diferitele valute utiliznd Live Rates de la ECB sau alte banci sau curs
introdus manual
Statistici magazin / panou administrare cu sumar al noilor comenzi, noi clieni
Control nivel stoc pentru produse i articole
Adinistrare comenzi cu istoric comenzi, notificare clieni i editare funcii comenzi, etc..
Caraceristici raport de baz: produse vndute sptamnal/lunar/anual
Administrare/configurare stadiu comenzi
Administrare diferite valute, ri, taxe ale acestor ri, etc.
Editor text performant dar i foate intuitiv care ofer toate avantajele de formatare text n xhtml,
introducere de poze, fiiere video, tabele, linkuri fr a avea nevoie de cunotine de programare web.
10.1. Instalare
1.
Se
va
downloada
arhiva
"VirtueMart_1.1.5-COMPLETE_PACKAGE.j15"
de
pe
Internet
(http://virtuemart.net/downloads).
2. Se va dezarhiva, obinndu-se un folder cu "modules", un folder "plugins", i arhiva
"com_virtuemart_1.1.5.j15"
3. com_virtuemart se va instala ca orice extensie obinuit.
10.2. Instalare manual

Traducere http://sourceforge.net/projects/virtuemart/files/
Pentru c limita de upload impiedica uneori instalarea pe server, atunci este necesara o instalare manuala.
Fisierul de virtuemart are peste 2Mb iar daca in php.ini de pe server e limitat la 2 Mega marimea fisieruluise
descarca
Language
Pack-ul
pentru
VirtueMart,
se
extrage
directorul
"languages"
in
.../administrator/components/com_virtuemart/ (cum este explicat in ReadMe).

Daca nici aceasta varianta nu merge atunci se face un backup la engleza.php din dir.
administrator\components\com_virtuemart\languages\.
Apoi
din
pachetul
downloadat
de
la
http://sourceforge.net/project/showfiles.php?group_id=147802 se ia romanian.php si se redenumeste in

english.php, apoi se copiaza in administrator\components\com_virtuemart\languages\
10.3. VirtueMart i Joomla

Dup ce se va instala VirtueMart, pentru a crea un link n meniu ctre magazinul online, se va selecta Menus
i Main Menu. Din noua fereastr se alege butonul New pentru a aduga un link n meniu.
Din lista aprut se va selecta VirtueMart, pentru a crea un link ctre magazinul online.
n fereastra urmtoare trebuie se va ataa o denumire sau un titlu, ce va constitui cuvntul sau cuvintele de
legtur pentru intrarea n magazinul virtual. Ieirea din fereastr se va ncheia cu save sau apply..
10.4. Instalare extensie pentru VirtueMart

Instalarea Modulului PaySecure n Joomla - Virtuemart
1. Trebuie s fie instalat Joomla mpreun cu modulul VirtueMart activat
2. Se intr la Components -> VirtueMart
3. Din meniul vertical stnga se va selecta Store -> Add Payment Method i se va completa aa cum apare n
figura de mai jos.
4. Se va selecta tabul Configuration i introducei tot codul aflat n fiierul Configuration.php i completai
CUI-ul i CHEIA DE ENCRIPTARE care apare n panoul de admin de la https://paysecyre.ro/clieni (avei
grij s nu stergei cele dou semn de ' ).
5. Se salveaz setrile cu butonul "save" din dreapta sus.
6.
Se
copie
fiierul
checkout.paysecure_result.php
pe
server
n
root/administrator/components/com_virtuemart/html/- . Din acest moment modalitatea de plata Paysecure
plata este activ (trebuie contactai cei de la Paysecure.ro pentru a confirma reuita testelor i activarea
contul LIVE).
Anexa 1 Taguri Html

1. Elemente de baza (taguri).
<HTML> </HTML>
Definete un fiier n format Web
<HEAD> </HEAD>
Antetul documentului
<TITLE> </TITLE>
Titlul documentului
<BODY> </BODY>
Corpul paginii HTML
BGCOLOR = culoare
Culoarea de fond a paginii
TEXT=culoare
Culoarea textului pe pagin
LINK=culoare
Culoarea legturilor nevizitate din pagin
VLINK=culoare
Culoarea legturiilor vizitate din pagin
ALINK=culoare
Culoarea legturilor pe durata clicului exacutat de utilizator
BACKGROUND = url
Imaginea de fond pentru pagin
<P>
Paragraf
<Hn> <Hn>
Nivel de subtitlu al documentului (n = 1-6)
<FONT> </FONT>
Specific atribute ale textului incadrat
SIZE=n
Dimensiunea textului este 1-7
FACE="a,b"
Specific fontul: a, dac este disponibil, sau b
COLOR=s
Culoarea textului: fie un nume de culoare, fie o valoare RGB
<BR>
Linie noua
<PRE> </PRE>
Informaie preformatata

Comenatriu HTML
<CENTER> </CENTER>
Centreaza materialul n pagina
<HR>
Rigla orizontal
SIZE=x
nlimea riglei n pixeli
WIDTH=x
Limea riglei n pixeli sau n procente
NOSHADE
Dezactiveaz afiarea umbrei pentru rigla orizontal
ALIGN=x
Alinierea riglei orizontale n pagina (left, center, right)
COLOR=x
Culoarea riglei orizontale (numai pentru IE)
<A> </A>
Marcaj de tip ancor
HREF=url
Referin hipertext
HREF=#nume
Referin ctre o ancor intern
Name=nume
Definiia unei ancore interne
2. Elemente pentru liste .

<DD>
Descriere definiie
<DL> </DL>
Lista de tip
<DT>
Termen de definiie
<LI>
Element de list
<OL
Lista ordonat (numerotat)
TYPE=tip
Tipul numerotrii. Valori posibile: A, a, I, i, 1
START=x
Numrul de nceput al listei ordonate
<UL
Lista neordonat (marcat)
TYPE=forma
Forma marcajului. Valori posibile: circle, square, disc.
3. Elemente pentru formatarea caracterelor

<B> </B>
Afieaz text cu caractere aldine
<I> </I>
Afieaz text cu caractere cursive
<U> </U>
Afieaz text subliniat
<TT> </TT>
Text cu font monospaiu
<CITE> </CITE>
Citare bibliografic
<CODE> </CODE>
Listing de program
<EM> </EM>
Stil logic de evideniere
<KBD> </KBD>
Text de la tastatur
<STRONG> </STRONG>
Evideniere logic puternic
<VAR> </VAR>
Program sau variabil
<BASEFONT SIZE = n>
Specific dimensiunea implicit a fontului din pagin
4. Elemente pentru cadre

<FRAMESET>
</FRAMESET>
Definirea redactrii paginii
COLS=x
Numrul i marimea relativ a coloanelor
ROWS=x
Numrul i marimea relativ a liniilor
BORDER=x
Specific starea "on" (activ) sau "off" (inactiva) pentru chenarul cadrului
FRAMESET (1 sau 0)
FRAMEBORDER = x
Specific mrimea chenarului
FRAMESPACING = x
Mrimea spaiului dintre dou cadre adiacente
<FRAME>
Definiia unui anumit cadru
SRC=url
URL-ul surs pentru cadru
NAME=nume
SCROLLING=scrl
Numele cadrului (utilizat mpreun cu TARGET=nume ca parte component a

marcajului de tip ancor <a>
Definete opiunea barei de derulare.Valori posibile: on(activ), off(inactiv), auto
(automat)
FRAMEBORDER=x
Mrimea chenarului din jurul cadrului
MARGINHEIGHT=x
Spaiul suplimentar de deasupra i dedesubtul unui anumit cadru
MARGINWIDTH=x
Spaiul suplimetar la stnga i la dreapta unui anumit cadru
<NOFRAMES>
</NOFRAMES>
Seciunea de pagin afiat pentru utilizatorii care nu pot vedea un cadru
<IFRAME>
Cadru intern (numai pentru (IE)
SRC=url
Sursa cadrului
NAME=s
Numele ferestrei (util pentru TARGET)
HEIGHT=x
nlimea cadrului nglobat
WIDTH=x
Limea cadrului inglobat
5. Elemente pentru tabele

<TABLE> </TABLE>
Tabel HTML
BORDER=x
Chenarul tabelului
CELLPADDING=x
Spaiul suplimentar n cadrul celulelor tabelului
CELLSPACING=x
Spaiul suplimentar ntre celulele tabelului
WIDTH=x
Limea impus tabelului
FRAME=valoare
Ajustarea fin a tabelului
RULES=valoare
Ajustarea fin a riglelor tabelului
BORDERCOLOR = culoare
Specific culoarea chenarului tabelului
BORDERCOLORLIGHT = culoare
Cea maideschis culoare din cele dou culori specificte
BORDERCOLORDARK = culoare
Cea mai inchis culoare din cele doua culori specificte
ALIGN=left
ALIGN=right
Aliniaz tabelul la marginea din stnga a paginii, iar textul curge n partea
dreapt
Aliniaz tabelul la marginea din dreapta a paginii, iar textul curge n partea
stng
HSPACE=x
Spaiu suplimetar pe orizontal, n jurul tabelului
VSPACE=x
Spaiul suplimetar pe vertical, n jurul tabelului
COLS=x
Specific numrul de coloane ale unui tabel
<COLGROUP> </COLGROUP>
Definete un set de definiii de coloane cu ajutorul marcajului <col>
<COL WIDTH=x>
Definete limea unei coloane exprimata n pixeli
<THEAD> </THEAD>
Definete titlul tabelului
<BODY> </TBODY>
Definete corpul tabelului
<TR </TR>
Linie de tabel
BGCOLOR=culoare
Specific culoarea de fond pentru intreaga linie
ALIGN=aliniere
Alinierea celulelor de pe linia curenta (left, center, right)
<TD </TD>
Celula de date a tabelului
BGCOLOR=culoare
Specific culoarea de fond pentru celula de date
COLSPAN=x
Numrul de coloane pe care se ntinde celula curent de date
ROWSPAN=x
Numrul de linii pe care se intinde celula curenta de date
ALIGN=aliniere
VALIGN=aliniere
Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right,

center)
Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile:
(top, bottom, middle)
BACKGROUND=url
Specific imaginea de fond pentru celula tabelului
NOWRAP
Nu permite desprirea textului pe linii n cadrul unei celule
ALIGN=baseline
Aliniaz celule de date cu linia de baza a textului adiacent
ALIGN=caracter
Aliniaz o coloana fata de un anumit carcater (caracterul prestabilit este ".")
ALIGN=justify
Aliniaz atat marginea din stnga cat i marginea din dreapta a unui text
6. Elemente pentru adaugarea imaginilor

<IMG
Marcajul de introducere a imaginilor
SRC=url
Sursa fiierului grafic
ALT=text
Textul alternativ de afiat, dac este necesar
ALIGN=aliniere
Alinierea imaginii n pagina. Valori posibile: top (sus), middle(n mijloc), bottom (jos), left (n
stnga), right (la dreapta)
HEIGHT=x
nlimea imaginii (n pixeli)
WIDTH=x
Limea imaginii
BORDER=x
Chenarul din jurul imaginii, atunci cnd aceasta este utilizata ca hiperlegatur
HSPACE=x
Spaiul suplimentar pe orizontal din jurul imaginii (n pixeli)
VSPACE=x
Spaiul suplimentar pe vertical din jurul imaginii (n pixeli)
7. Elemente pentru formulare

<FORM> </FORM>
Formular HTML activ
ACTION=url
Programul CGI de pe serverul care recepioneaz datele
METHOD=metoda
Modul n care datele sunt transmise serverului(GET sau POST)
<INPUT
Camp de text sau alte date de intrare
TYPE=opiune
Tipul cmpului de intrare <INPUT>. Valori posibile: text, password, checkbox,

hidden, file, radio, submit, reset, image.
NAME=nume
Numele simbolic al valorii cmpului
VALUE=valoare
Coninutul prestabilit al cmpului de text
CHECKED= opiune
Buton/caset marcat n mod prestabilit
SIZE=x
Numrul de caractere al unui cmp de text
SIZE=x
Numrul maxim de caractere acceptate
<SELECT> </SELECT>
Grup de casete de validare
NAME=nume
SIZE=x
Numrul de articole de meniu care se afieaz odat (prestabilit=1)
MULTIPLE=x
Permite selecia unor articole de meniu multiple
<OPTION
Alegerea particular ntr-un domeniu <SELECT>
VALUE=valoare
Valoarea rezultanta a acestei selecii din meniu
<TEXTAREA>
</TEXTAREA>
Cmp de intare de tip text pe linii multiple
NAME=nume
ROWS=x
Numrul de linii al casetei de text
COLS=x
Numrul de coloane (caractere) pe linie al casetei de text
<FIELDSET>
</FIELDSET>
Imparte formularul n pri logice
<LEGEND> </LEGEND>
Numele asociat setului de campuri (fieldset)
ALIGN=s
Specific alinierea legendei (explicaiei) afiate (top, bottom, left, right)
TABINDEX=x
Specific ordinea elementelor atunci cnd utilizatorul apaa tasta Tab
ACCESKEY=c
Specific tasta care asigur comanda rapid de la tastatura asociat unui anumit
element
DISABLED
Elementul este inactiv, dar este afiat pe ecran
READONLY
Elementul este afiat pe ecran dar nu poate fi editat
8. Elemente avansate
<STYLE> </STYLE>
Specific informaii referitoare modelul de stiluri
TYPE=val
Tipul modelului de stiluri. De regula "text/css"
<SCRIPT> </SCRIPT> Include un script de regula Javascript, n pagina Web

LANGUAGE=limbaj
Limbajul utilizat
EVENT=eveniment
Eveniment care declaneaz execuia unor scripturi specifice
FOR=numeobiect
Numele obiectului din pagina asupra cruia acioneaz scriptul

Indrumar Laborator CE

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Indrumar Laborator CE

Încărcat de

Drepturi de autor:

Formate disponibile

Caiet

Autor lect. dr. Enache Maria Cristina

6.4. Padding CSS ............................................................................................................................................................... 30

9.3. Configuraiile de baza ale site-ului ............................................................................................................................. 56

Elemente de baza (taguri). ......................................................................................................................................... 74

Elemente pentru liste . ............................................................................................................................................... 75

Elemente pentru formatarea caracterelor ................................................................................................................... 75

Elemente pentru cadre ............................................................................................................................................... 76

Elemente pentru tabele .............................................................................................................................................. 76

Elemente pentru adaugarea imaginilor ...................................................................................................................... 78

Elemente pentru formulare ........................................................................................................................................ 78

Elemente avansate ..................................................................................................................................................... 79

1.1. Cerine proiect:

1.3. Operatori, cuvinte cheie HTML

1.3.1. mprirea n paragrafe i linii

Informaii despre adres i autor

Corp pagin HTML

Informaie de formatare HTML

Nivel de subtitlu document (n=1-6)

Definete un fiier n format Web

<html><head> <title>Pagina 2!</title></head>

<html><head> <title>Pagina 3!</title></head>

<h3>Acesta este tag-ul HTML pentru cel titlu h2</h3>

<html><head> <title>Prima 5!</title></head>

1.4. Culoarea de fond - O culoare poate fi precizat n dou moduri:

1.5. Fonturi - Un font este caracterizat de urmtoarele atribute:

culoare (stabilit prin atributul color);

tipul sau stilul (stabilit prin atributul face)

mrimea (definit prin atributul size) ;

mrimea n puncte tipografice (stabilit prin atributul point-size);

width = limea imaginii;

height = nlimea imaginii;

border = chenar (0 = lips bordur)

Lucrarea 3 Principalele structuri n HTML: legturi, liste

Legtura poate fi:

Link ctre ancora aflat n aceeai pagin

<a href="#nume">Inapoi la ancora</a>

Link ctre ancora aflat n alt pagin

<a href="pagina.html#nume">Inapoi la ancora din

definiia unui termen ncepe pe o linie nou i este indentat.

Listele neordonate pot fi imbricate pe mai multe niveluri:

Lucrarea 4 Principalele structuri n HTML: tabele, cadre

<td bgcolor="white">R3 C3</td>

frameborder = 0 nu se afieaz chenarul cadrului;

noresize mpiedic redimensionarea cadrului cu mouse-ul;

marginheight i marginwidth stabilesc distana n pixeli dintre coninutul cadrului i marginile

Lucrarea 5 Stiluri CSS

5.1.2. Stilurile externe

5.1.3. Stilurile n linie

5.2. Sintaxa css

5.2.1. Selectorul: selector { proprietate: valoare }

body {margin: 20px;}

5.2.3. Combinarea selectorilor - Se pot combina elementele unui selector astfel:

h1, h2, h3, h4, h5, h6

5.4. ID-urile CSS

H2,H3,h3 { color:#483d8b; font-family: "lucida calligraphy", "arial"; }

Lucrarea 6 Stiluri CSS

6.2. Spanul CSS

Rezultatul final este: Acest text este italic.

6.3. Marginile CSS

6.4. Padding CSS

6.5. Fonturi CSS

n acest caz ns, va trebui s atribuim fiecrui link clasa potrivit:

6.8. Fundaluri CSS