Baze Web Design

MENUET – Mobile E- Novative Use of
E- learning Technologies
Project No. LLP-LdV/ToI/2008/RO/010
BAZELE WEB-DESIGN
Table of Contents
BAZELE WEB......................................................................................................................................... 2
Bazele WWW............................................................................................................................. 3
Tehnologii de dezvoltare web .................................................................................................... 6
Dezvoltarea paginilor Web......................................................................................................... 8
Ghid HTML ...................................................................................................................................... 11
Introducere la HTML ................................................................................................................ 12
Server-Side Scripting ....................................................................................................................... 30
Introducere în Server Side Scripting ......................................................................................... 31
Introducere în PHP .................................................................................................................. 32
Introducere în baze de date ..................................................................................................... 35
Content Management Systems ........................................................................................................ 38
Prezentare ............................................................................................................................... 39
Noţiuni de bază ....................................................................................................................... 40
Adăugarea Conţinutului ........................................................................................................... 51
Comunicarea ........................................................................................................................... 59
Crearea Execiţiilor ........................................................................................................................... 67
Introducere în XML .................................................................................................................. 68
Introducere în Flash ................................................................................................................. 72
Exerciţii interactive .................................................................................................................. 75
Ce este un exerciţiu interactiv? ................................................................................................ 75
Forums - Wikis – Blogs..................................................................................................................... 80
Forumuri.................................................................................................................................. 81
Wikis ....................................................................................................................................... 84
Bloguri ..................................................................................................................................... 86
Anexa A – Tabel de Simboluri ................................................................................................... 87
Despre acest curs

Acest curs este format din suport de curs electronic si aplicatii pentru
WEB şi se adresează studenţilor, profesori, formatori, cercetători, cursanţii adulţi,
factorii de decizie de învăţământ, educaţia şi formarea profesională a formatorilor şi a
altor profesionişti din domeniul educaţional. Cursul "Bazele Web Design-ului"
prezinta principiile de web design care au ca domenii de instruire: analiza publicul,
aspectul ierarhie şi tehnici de proiectare, integrare software-ul, şi publicare. Aceasta
carte electronic va aduce conţinut de învăţare multimedia bogat pe ecranele Tablet
PC-ului. Fiind o formă de conţinut digital, acest rezultat va oferi metodele de punere
în aplicare şi utilizare efectivă didactice a tehnologiilor inovatoare în domeniul mobile
de învăţare. În ceea ce priveşte competenţele cheie de la Lisabona, aceasta iesire va fi
legata de dezvoltarea competenţelor digitale.
BAZELE WEB
În această secţiune, vom vedea ce este WWW,cum funcţionează, şi o

scurtă prezentare a tehnologiilor ce stau la baza sa.
La sfarşitul acestei secţiuni vei fi capabil să :

 înţelegi mecanismul de baza
 enumeri cel puţin 4 limbaje folosite în web
 să alegi unealta potrivită de dezvoltare
Nivel: Începător
Timp Estimat : 20min
Bazele WWW
Dedesupt sunt câteva întrebari, cu răspunsuri, referitoare la nişte aspecte de baza

ale WWW şi Internet. Răspunsurile vor conferi o baza. Cuvintele sau frazele îngroşate
se refera la WWW.
Ce este WWW (World Wide Web)?
World Wide Web (WWW sau scurt "Web") este un

sistem de documente hipertext interconectate, denumite
pagini web şi accesate prin Internet. Paginile Web pot
conţine text, imagini, video, şi alte elemente multimedia.
Se navighează între ele cu hiperlink-uri (en: hyperlinks).
Paginile web pot fi vizionate cu un browser web.
Ce este un browser web?
Un browser web este o aplicaţie soft care permite unui

utilizator să afişeze text, imagini, video, muzica, jocuri şi
alte informaţii găsite într-o pagină web din WWW (Word
Wide Web) localizată într-o reţea locală.Textul şi
imaginile dintr-o pagină web conţin deobicei hiperlink-uri
către aceeaşi sau altă pagină web. Un website este un set
de pagini web interconectate. Browserele web permit
utilizatorului să acceseze uşor informaţia de pe mai multe
pagini web prin parcurgerea acestor link-uri.
Ce este un server web?
Serverul Web este un computer care furnizeaza pagini web, ceea ce implica că acele
pagini web sunt stocate pe el. Fiecare server are o adresa IP (Internet Protocol) şi
posibil un nume de domeniu. O adresa IP arată astfel: 150.140.142.81. Totuşi, este
mai intuitiv să foloseşti un URL (Uniform Resource Location), care include un nume
de domeniu. De exemplu, dacă tastezi URL-ul http://www.upatras.gr/index.html in
browser, acesta trimite o cerere serverului al cărui nume de domeniu este
upatras.gr. Acest server apoi intoarce pagina numită index.html şi o trimite
browserului.
Ce este un Hyperlink?
Un hyperlink, descrie o referinţa care poate fi accesata direct din

cadrul unui document hypertext. Această zonă din care hyperlink-
ul poate fi activat se numeşte ancora. Ţinta este locul către ceea ce
indica link-ul,aceasta putând fi o altă locaţie în cadrul aceleaşi pagini
sau aceluiaşi document, o alta pagină sau document, sau o locaţie
specifică în interiorul unei alte pagini sau document- depinde de
tipul de hypertext.Acţiunea de a insera un hyperlink în alt loc poartă
denumirea “a pune link”.
Ce este un Hypertext?
Hypertext (vine de la "more than just" - “mai mult decât” text)

este o forma de text care confera o funcţionalitate mai bogată
comparativ cu textul normal, prin faptul că permite
utilizatorului capacitatea de a explora noi link-uri către alte
pagini legate(linked) de cuvinte sau imagini specifice. Spre
deosebirede textul normal hypertext poate conţine tabele,
imagini şi alte elemente ce faciliteaza o prezentare. Oricare dintre acestea poate fi
un hyperlink. Alte forme de interacţiune pot fi deasemenea prezente, spre exemplu
o bula conţinând text poate să apară când mouse-ul trece pe o anumita zona, un
video poate fi pornit sau oprit, sau un form poate fi completat şi trimis.Cel mai bun
exemplu de hypertext astazi este World Wide Web.
Tehnologii de dezvoltare web
Aici sunt prezentate cele mai comune tehnologii folosite pentru a crea un Website.
Înainte de a incepe crearea unei pagini web ar trebui să consideraţi tehnologiile care
urmeaza a fi folosite.
HTML
HTML (Hypertext Markup Language) este un limbaj de marcat folosit pentru a

encoda pagini Web. Suplineşte browser-ului informaţii despre aşezarea şi
prezentarea componentelor. HTML este limbajul Web-ului, şi fiecare dezvoltator ar
trebui să aibe cunosţinte de baza asupra sa.
CSS - Cascading Style Sheets -Stiluri în cascada
Stilurile definesc cum elementele HTML vor fi afişate. Stilurile externe permit
schimbarea aparenţei şi aşezarii fiecarei pagină din site-ul tău, prin simpla editare a
unui singur document.
XML – Unealta pentru a descrie datele
XML NU ESTE un inlocuitor pentru HTML. XML descrie date, în timp ce HTML afişeaza
date.
XML rulează pe mai multe platforme de soft şi are o unealta independenta de
hardware pentru a transmite date
JavaScript - Scripting pe partea de client
Scripting pe partea de client se referă la programarea comportamentului unui

browser.
 JavaScript permite designerilor HTML o unealtă de baza la programare

 JavaScript poate face textul dinamic intr-o pagină Web
 JavaScript poate reacţiona la evenimente
 JavaScript poate modifica elemente HTML
 JavaScript poate fi folosit pentru a valida date.
ASP or PHP – Scripting pe partea de server
Scripting pe partea de server este despre programarea unui serviciu pe Internet în

urma căruia se poate livra mai mult conţinut dinamic. Cu scripting pe partea de
server se pot:
 Edita dinamic, schimba sau adăuga noi elemente

 Răspunde la cereri ale utilizatorului
 Accesarea unei baze de date şi întoarcerea rezultatului
 Accesa fisiere şi intoarcerea unui rezultat în browser
 Transformarea XML în date HTMl şi intoarcerea rezultatului
 Personaliza o pagină web pentru a o face mai folositoare fiecarui utilizator în
parte
 A conferi securitate la accesul paginilor web
 Diferenţia output-ul în functie de browser
 Limita pe cat posibil transmiterea de date în retea
Prelucrarea datelor cu SQL
SQL este limbajul standard pentru accesarea şi manipularea bazelor de date.SQL este
folosit pentru a accesa şi manipula date în MySQL, SQL Server, MS Access, Oracle,
Sybase, DB2, şi alte sisteme baze de date. Cunoştinţele SQL sunt importante pentru
oricine vrea să stocheze sau să obţina date dintr-o baza de date.
Dezvoltarea paginilor Web
De ce soft ai nevoie pentru a dezvolta pagini HTML?
Desi HTML-ul unei pagini web poate fi scris în orice editor de text (ex : Notepad),
editoare specializate de HTMLpot oferi o usurinţa în scrierea codului şi o
funcţionalitate sporită.
Nici nu e nevoie să stii HTML ca să faci o pagină web. Exista o mulţime de forme în
care poti edita HTML: text, object şi WYSIWYG (prezentat mai jos)
Ce ofera editoarele de sursa?
Editoarele text de HTML de regula oferă formatare de text (highlighting). Template-

uri, Text, toolbar-uri, şi keyboard shortcuts pot insera rapid elemente şi structuri
HTML. Există unelte de auto completare care pot fi de un real ajutor. Folosirea
editoarelor text presupune cunoaşterea de HTML şi de orice alte tehnologii care
urmeaza a fi folosite ca de exemplu CSS, Javascript şi limbaje de scripting pe partea
de server. În imaginea ataşata se poate vedea un document html într-un editor html
care permite formatarea corespunzatoare (highlighting) a textului.
Ce este o unealta WYSIWYG ?

What You See Is What You Get (WYSIWYG) – ceea ce vezi e ceea ce primeşti –
editoarele html ofera o interfaţa de editare care se aseamană cu pagina vazuta la
final intr-un browser web. Deoarece utilizarea unui editor wysiwyg nu necesită
cunoştinţe html sunt mai uşor de folosit de un începător.
Ce este un editor de web-site-uri?
Acete programe nu sunt concepute doar pentru a face pagini web, ci şi

pentru managementul site-ului. Ele permit crearea temelor pentru site, găsirea şi
înlocuirea de text de-a lungul mai multor pagini web, etc.
Ele sunt mult mai puternice decat editoarele de pagini web comune dar sunt, de
regula, mai greu de folosit de către începători.
Aceste instrumente “automate” genereaza adesea cod în limbaj HTML de o
mai slaba calitate sau crează fisiere enorme şi structuri de directoare complicate. De
aemenea, odata ce ai creat o pagină folosind unul din aceste intrumente WYSIWYG,
ar putea fi dificil sau chiar imposibil să o editezi cu un alt instrument, din cauza unor
extensii HTML care nu corespund standardelor.
Web-ul este construit cu HTML şi, cu cat ştii mai mult despre el, cu atât vei
întelege mai bine cum să proiectezi pagini funcţionale şi atractive. Editoarele
“prietenoase” precum FrontPage pot fi bune pentru a face rapid cateva pagini, dar
daca intenţionezi să aprofundezi web design-ul, vei avea nevoie de o cunosţinte
solide în HTML-ul de baza.
Ghid HTML
Aceasta sectiune este un ghid pentru învatarea HTML-ului, limbajul

folosit în crearea paginilor web.
La sfârsitul acstei secţiuni, vei fi capabil să:

 shimbi font-ul textului
 adaugi imagini paginilor tale web
 creezi tabele, liste şi forme
 pagini web cu CSS
Nivel: Incepator
Timp estimat: 2h
Introducere la HTML
Ce este HTML?
HTML este prescurtarea pentru HyperText Markup Language.
 HyperText este metoda prrin care navighezi pe web – apăsând pe text special numit
hyperlink care te direcţionează către alte pagini. Prin hyper se înţelege neliniar –
adică, poţi ajunge către orice loc de pe Internet cand vrei apăsând pe link-uri – nu
există ordine prestabilită în care se fac lucrurile.
 Markup este ceea ce extensiile HTML fac textului din interiorul lor. Îl marcheză ca
un anumit tip de text (text în italic, de exemplu).
 HTML este un limbaj, avand codul şi sintaxa sa, ca orice alt limbaj.
Ce este o pagină HTML?
O pagină HTML este un document care foloseşte limbajul HTML pentru a indica
modul în care va fi format textul cand va fi afişat - adică va diferenţia textul pe categorii: link-
uri, titluri, paragrafe, liste etc, - şi pentru a însoţi textul cu forme interactive, imagini
încadrate şi alte obiecte
Fundamental, este un fişier text cu extensia “.html” sau “htm”. Aşa arată o pagină
web simpla atunci cand este deschisa cu un browser web.
Cum arată codul HTML?
Consideră că avem o pagină web simpla salvată într-un fişier de tip text numit
“simplepage.html”. La stanga poti vedea pagina web aşa cum arata cand este deschisa cu un
browser web. La dreapa poti vedea codul paginii web, asa cum arata cand este deschisă cu
un editor de text.
<html>
<head>
<title> Elinda Beach </title>
</head>
<body bgcolor="gold">
<h1 align="center"> Elinda </h1>
<div align="center">
<img alt="puma" src="elindabeach.jpg">
</div>
<div align="center">

Elinda este un golf bine adăpostit în partea vestica a insulei,

lângă
<a title="Satul Anavatos Chios"
href="anavatos.asp">Anavatos</a> 
Este o minunată plajă cu mult nisip şi ape limpezi, ideala

pentru înot şi scufundări.


Nu departe de mal se afla o ruina a unei vechi nave romane.

 
Numele Elinda sau Alinda deriva de la vechiul cuvânt grec

"alios" care înseamnă “soldat”.

</div>
</body>
</html>
Tag-uri de bază
Ce este un tag?
HTML utilizează "tag-uri" pentru a specifica modul în care textul va fi formatat atunci când se
va folosi un web browser. Tag-urile sunt înconjurate de paranteze în unghi. Tag-urile vin de
cele mai multe ori în perechi. În fiecare pereche, există o etichetă de deschidere "<>" şi o
etichetă de închidere "</> '. Tag-ul de deschidere conţine un nume de etichetă şi, uneori,
atributele tag-ului. El îi spune browser-ului că aţi dori să efectuaţi o acţiune de formatare
din acel punct al textului. Eticheta de închidere spune browser-ului, cu "/" (numit “forward
slash”), urmată de acelaşi nume al tag-ului, că doriţi să opriţi acţiunea la acel punct al
textului.
Cum pot schimba stilul in text?
Bold (îngroşat)
Pentru a face cuvintele să apară boldate (bold), înconjuraţi textul cu taguri .
Trenul Consecinţelor ⇨ Trenul Consecinţelor
Italic (înclinat)
Pentru a face cuvintele să pară înclinate spre dreapta, înconjuraţi textul cu

taguri .
 Aproape Onest ⇨ Aproape Onest
Subscript (indice)
Pentru a face cuvintele să apară ca jumătate din înălţime şi 50% sub linie, înconjuraţi
textul cu taguri .
În ora mea cea mai întunecată ⇨ În ora mea cea mai întunecată
Superscript (exponent)
Pentru a face cuvintele să apară ca jumătate din înălţime şi 50% peste linie,
înconjuraţi textul cu taguri .
Poduri arzânde ⇨ Poduri arzânde
Cum pot folosi un heading?
O poziţie în text este creată cu <H1> tag. Există de fapt 6 poziţii de tag-uri: <H1> (cel
mai mare) şi <H6> (cel mai mic).
Text formatat HTML markup solicitat
Înapoi în zi <H1> Înapoi în zi</H1>
Tornada sufletelor <H3>Tornada sufletelor</H3>
Adevărul trebuie zis

<H6>Adevărul trebuie zis</H6>
Cum pot decora textul?
Există o mulţime de lucruri pe care le puteţi face pentru a schimba aspectul fontului.
Primul lucru este să utilizaţi un font diferit. Cum puteţi face asta? Puteţi face acest lucru
folosind atributul face astfel:
Elysian Fields⇨ Elysian Fields
Aveţi aici mai multe fonturi pe care le puteţi încerca:
Arial
Arial Black
Arial Narrow
Book Antiqua
Bookman Old Style
Century Gothic
Comic Sans MS
Courier New
Garamond
Times New Roman
Verdana
Puteţi de asemenea să schimbaţi mărimea fontului. Faceţi acest lucru folosind

atributul mărime (size) ,astfel:
Sângele eroilor ⇨ Sângele eroilor
Insomnie ⇨ Insomnie
Voi fi acolo ⇨ Voi fi acolo

Şi în sfârşit,puteţi schimba culoarea textului, folosind atributul pentru culoare
(color).Astfel:
Trezire grosolană ⇨ Trezire grosolană

Paragrafe şi linia nouă
Un nou paragraf se începe cu tag-ul , şi poate fi, încheiat, opţional, cu tag-ul
invers al alineatului.
O linie nou este creată de tag.
Priviţi exemplul următor:
Text formatat HTML markup solicitat

Ultima linie din paragraf. Ultima linie din paragraf.

Prima linie dintr-un nou paragraf. Prima linie dintr-un paragraf nou.
O din text. 
O linie din text. Pe o linie nouă.
Pe o linie nouă.
Cum pot adăuga Caractere speciale?
Există mai multe moduri de a adăuga simboluri pentru paginile dumneavoastră.

Probele următoare ilustrează utilizarea fiecărei metode de cod. Pentru a plasa un simbol
într-o pagină HTML, copiaţi şi inseraţi codul corespunzător în dosarul în care doriţi simbolul.
HTML Cod Numeric

exemplu: pentru a face o acoladă,{ tastaţi {
Font Face Tag

exemplu: pentru a scrie xA, tastaţi x
∈A
HTML Literal Code

exemplu: pentru a face simbolul gradului, °,tastaţi °
Este prezentat un tabel ce conţine simbolurile şi codurile corespunzătoare ale

acestora în Appendix A.
Structura de bază a unei pagini HTML
Care este structura de bază a unui document HTML?
Aceasta este structura de bază a unei pagini HTML:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Tag-urile HTML
Un document HTML începe cu un element HTML care conţine HEAD şi BODY
Pentru a începe o pagină HTML:
 Tastează <html> pentru a începe partea HTML din documentul dumneavoastră

 Lasaţi câteva spaţii pentru crearea restului paginii dumneavoastră
 Tastaţi </html>
Tag-ul HEAD
Secţiunea head este locul unde vei defini titlul paginii tale, incluzând informaţii
despre pagina ta, pentru motoarele de căutare precum Google, stabileşte locaţia paginii,
adaugă stil foii tale şi scrie script-urile.
Pentru a crea secţiunea head:
 Imediat după deschiderea tag-ului html, tastaţi <head>.

 Lasă câteva spaţii pentru secţiunea capului de pagină.
 Tastează </head>.
Tag-ul BODY
Body documentului tău HTML include conţinutul paginii tale de Web, care este,
partea pe care vizitatorii tăi o vor vedea, inclusiv textul şi elementele de grafică.
Pentru a crea cuprinsul:
 După ultimul </head> tag, tastează <body>

 Lasă câteva spaţii pentru conţinutul paginii tale de Web
 Tastează</body>
Crearea Listelor şi Tabelelor
Cum pot crea o listă?
Acesta este modul prin care poţi crea o listă simplă:
1. Tastează<ol> pentru o listă ordonată sau <ul> pentru a începe o lista neordonată.
2. Tastează <li> pentru a începe primul item al listei.
3. Tastează textul care urmează să fie inclus în item.
4. Tastează</li> pentru a completa fiecare item al listei.
5. Continuă acest proces introducând caţi mai mulţi itemi ai listei care sunt necesari
pentru a-ţi completa lista ordonată.Nu există o limită a numărului de itemi pe care-i
poate avea o listă.
6. Pentru a încheia lista., introdu un sfârşit </ol> or </ul> pentru a marca tag-ul de
început după ultimul item al listei.
Exemplu de listă:
Cum pot crea un tabel?
Un tabel este un element structurat care constă în rânduri şi coloane de celule. Ai

posibilitatea să introduci orice fel de conţinut doreşti în aceste celule: text, imagini, şi chiar
alte tabele.
Acesta este modul în care puteţi crea un tabel simplu:
1. Tastează <table> tag.

2. Tastează <tr> pentru a marca începutul primului rând.
3. Tastează <td> pentru a marca începutul celulei.
4. Tastează conţinutul celulei.
5. Completează celula introducând un tag de închidere: </td>
6. Repetă paşii 3. până la 5. pentru fiecare celula pe care doreşti să o adăugaţi
rândului. Când rândul dvs. este terminat, mută-te la următoarea linie şi
introduceţi un tag de încheiere </tr> aliniat vertical cu tag-ul de deschidere <tr>,
pentru a crea lizibilitate.
<tabel>
<tr>
<td>celula 1 </td>
<td>celula 2 </td>
<td>celula 3 </td>
</tr>
7. Repetă paşii 2. până la 7. pentru fiecare rând.
8. Dupa ce completezi numărul de rânduri dorit, tastează tag-ul </table> pentru a

termina tabelul.
Exemplu de tabel:
Frames
Ce sunt frames?
Cu frames, poţi afişa mai mult de un document HTML în aceeaşi fereastră de

browser.Fiecare document HTML se numeşte frame şi fiecare frame este independentă de
celelalte.
<html>
<head>
<title></title>
</head>
<frameset cols="15%,*">
<frame src="sidebar.html" name=sidebar noresize>
<frame src="content.html" name=announces>
</frameset>
</html>
Acesta este un exemplu de o pagină Web care foloseşte frames:
Poţi vedea o linie verticală ce divide ecranul în două parţi. Cea din stânga este
o bară laterală în timp ce cea din dreapta este o listă cu anunţuri pentru o lecţie de
zoologie. Acestea sunt două documente separate HTML pe care, până în acest
moment, ar trebui să fii capabil să le creezi singur, deci haide să ne concentrăm pe

codul pe care urmează să-l foloseşti pentru a pune toate acestea într-o pagină de
Web.
Tag-ul Frameset
Tag-ul <frameset> defineşte modul în care se poate împărţi fereastra în frame-uri.

Fiecare frameset defineşte un set de rânduri / coloane. Valorile rândurilor / coloanelor indică
cât din suprafaţa ecranului va fi ocupată de fiecare rând / coloană.
Tag-ul frame
Tag-ul <frame> defineşte ce document HTML trebuie să fie pus în fiecare frame. În
exemplul de mai sus, am creat un set de frames cu două coloane. Prima coloană ocupă 15%
din browser-ul total al ecranului, iar a doua coloană ocupă restul. Documentul HTML
"sidebar.html" este pus în prima coloană, şi documentul HTML "content.html" este pus în a
doua coloană.
Reţine că, dacă doreşti să previi un utilizator să redimensioneze un frame (prin

tragerea de cadru) adaugă cuvintele “noresize” frame-ului pe care doreşti să-l blochezi.
Mai mult, după cum se poate observa în exemplul de mai sus, tag-ul <body> lipseşte.
Aceasta este din cauză că nu se poate utiliza tag-ul <body>, împreună cu tag-ul <frameset>.
Stilul CSS
Ce este CSS?
CSS vine de la Cascading Style Sheets. În timp ce HTML oferă paginilor tale de
Web, structura lor de bază, CSS (Cascading Style Sheets) defineşte aspectul lor.
Ce este stilul unei foi?
Stilul unei foi este pur şi simplu un fişier text care conţine una sau mai multe reguli
care determină modul în care anumite elemente din pagina ta de Web trebuie să fie afişate.
Codul CSS se poate găsi într-un fişier separat şi poţi doar să link-ezi acest fişier într-o pagină
HTML, astfel încât să se modifice cu uşurinţă aspectul său. Desigur, CSS ar putea fi scris doar
în interiorul paginii HTML, în cazul în care constă în câteva linii de cod.
Care este structura Regulilor de Stil?
O regulă de stil este alcătuita dintr-un selector (care indică ce elemente vor fi
formatate), precum şi o declaraţie (care descrie formatarea care ar trebui să fie executată).
În declaraţie trebuie separate de punct şi virgulă multiplele perechi de proprietate/valoare.
h1{
color;red;
background:yellow;
}
Selectorul este aici h1. Ai observat, probabil, că <h1> este tag-ul pentru antet (cel
mai mare). De asemenea, avem două declaraţii, "color: red" şi "background: yellow". Prima
declaraţie stabileşte culoarea antetului (culoarea textului), în roşu, iar al doilea set,
stabileşte culoarea de fundal a antetului, în galben. În cazul în care vom adăuga acest cod
CSS pentru o pagină HTML, ori de câte ori vom crea un antet utilizând tag-ul <h1>, aceasta va
avea atributele definite mai sus.
În loc de h1 am putea folosi alte elemente, de exemplu body, p, etc şi putem de

asemenea folosi şi alte declaraţii, de exemplu font-family: Arial; (schimbarea fontului în
Arial).
Cum pot crea un Style Sheet Extern?
Stilul extern al foii, este un fişier CSS, ce conţine codul CSS ca acela explicat în
exemplul de mai sus. Extensia fişierelor CSS este .css . Aceste fişiere pot fi legate de pagini
HTML prin definirea unui tag <link> corespunzator în interiorul tag-ului<head> a paginii
HTML, astfel:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head> 
Dacă vom adăuga acest cod HTML la pagina noastră, va încărca stilurile definite în
fişierul “mystyle.css" şi apariţia HTML nostru se va schimba cu uşurinţă. Îţi poţi denumi
fişierele CSS oricum doreşti. Aici, după cum poţi vedea, acesta este numit "mystyle.css" şi
este situat în acelaşi folder în care se află şi fişierul nostru HTML.
Cum pot crea un Style Sheet Intern?
O foaie de stil internă ar trebui să fie utilizată atunci când un singur document are un
stil unic. Poţi defini stiluri interne, în secţiunea head, prin utilizarea tag-ul <style>, astfel:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("imagini/back40.gif")}
</style>
</head>
Crearea Formularelor
Cum pot crea un formular simplu?
Un formular este pur şi simplu o zonă care poate să conţină câmpuri de formulare.
Câmpurile din formular sunt obiecte care permit vizitatorilor de a introduce informaţii – de
exemplu casete de text, meniuri derulante sau butoane radio. Cele mai comune utilizări ale
formularelor sunt sondajele, formulare on-line de comandă, feedback-ul, sau chiar orice
pagină Web, în care este necesar un input din partea utilizatorului, în vederea îndeplinirii
unei sarcini date sau de a furniza un serviciu utilizatorului.
Aceasta este modalitatea prin care poţi crea un formular simplu:
Cum pot crea un buton radio?

Butoanele radio sunt utilizate atunci când doreşti ca utilizatorul să selecteze una
dintr-un număr limitat de opţiuni şi trebuie să aibă o "valoare". Input-urile radio trebuie să
aibă acelaşi “nume”, deoarece ele nu fac decât să-i dea utilizatorului o opţiune posibilă. Este
posibil să oferim mai multe opţiuni utilizatorului cu input-urile radio, oferindu-le un alt
“nume”.
Acesta este modul in care creezi un radio box simplu:
Cum pot crea un checkbox?
Checkbox sunt utilizate atunci când vrei ca utilizatorul să selecteze una sau mai
multe opţiuni dintr-un număr limitat de variante şi permite utilizatorilor tăi de a face mai
mult de o selecţie într-o listă.
Acesta este modul in care se creaza un checkbox simplu:
Un exemplu al unui drop down menu:

Drop down menu sunt probabil cele mai flexibile obiecte pe care le poţi adăuga
formularelor. Avantajul unui drop down menu, în comparaţie cu radio buttons sau cu check
box, este acela ca ocupă mai puţin spaţiu.
Aceasta este modalitatea prin care creezi un drop down menu simplu:
Multimedia
Cum pot adăuga o imagine paginii mele de Web?
Să presupunem că avem fişierul de imagine "cat.jpg", şi vrem să îl punem pe site-ul

nostru. Pentru a face acest lucru, vom folosi tag-ul <img> oriunde dorim în pagina HTML,
pentru ca imaginea să fie afişată.
Codul, în forma sa cea mai simplă, este ca acesta:
<img src=”cat.jpg”>
Singurul impediment pentru ca acest cod sa funcţioneze, este acela că avem o

imagine cu numele de “cat.jpg”, în acelaşi folder cu pagina noastră de HTML.
În cazul în care imaginea este într-un director diferit, tastăm atât calea, cât şi numele
fişierului, de exemplu, daca îl păstrăm într-un folder separat, numit “imagini”, codul va fi:
<img src="images/cat.jpg"/>
Cum pot schimba mărimea unei imagini in pagina mea de Web?

Prin specificarea valorilor atributelor "înălţime" şi "lăţime", putem modifica

dimensiunea imaginii în pagina noastră de Web. Pentru a modifica aceste atribute, trebuie
doar sa le adaugi la codul tău <img> tag-ul, astfel:
<img src="cat.jpg" width="48" height="48" />
Acest atribut poate lua valori diferite, putând specifica alinierea imaginii, după cum e
desemnat prin valoare. Valorile ar putea fi: "top", "middle", "bottom", left", "center",
"right".
Cum pot folosi o imagine ca fundal?
Acest lucru este un pic diferit de ceea ce am văzut mai sus, deoarece pentru a seta o
imagine ca fundal nu trebuie modificate atributele tagului imagine (<img>), dar trebuie
schimbat tag-ul corpului (<body>). Acest lucru este logic, pentru că tag-ul <body> defineşte
corpul principal al paginii web, care este, de fapt, cea mai mare unitate vizibilă a corpului
documentului.
Deci, ce trebuie să facem este să definim imaginea de fundal a paginii web, astfel:
<body background="background.jpg">
Observaţi că modul implicit pentru browser pentru a afişa imaginea este în funcţie
de dimensiunea sa iniţială, deci, dacă este vorba de o imagine mică, aceasta se va repeta şi
va crea un efect de teracotă.
Cum pot încorpora alte tipuri de date multimedia în pagina mea de web?
Puteţi adăuga diverse tipuri de date multimedia la pagina dvs. Web într-un mod
similar cu adăugarea de imagini. În loc de a utiliza <img> tag-ul, care este utilizat numai
pentru imagini, puteţi utiliza tag-ul <object>, care este mai generic. Tot ce trebuie să faceţi
este să definţi tipul de datelor multimedia pe care vreţi să le incorporaţi.
Cum pot să adaug sunet la pagina mea web?
Acesta este un exemplu:
<object type="audio/x-mpeg" data="yoursound.mp3"> </ object>

Cu type = "audio / x-MPEG" transmitem browser-ului Web că este dorit ca un fişier

audio să fie ataşat, fişier de tip mpeg(mp3). Apoi, cu data = "yoursound.mp3" vom
transmite numele (adresa) fişierului care trebuie ataşat.
Cum pot adăuga fişiere video la pagina mea web?
Acesta este un exemplu:
<object data="test.mpg" type="video/mpeg" width="320" height="255"> </ object>
Cu type = "video / MPEG" transmitem browser-ului Web că este dorit ca un fişier

video să fie ataşat, fişier de tip mpeg(mp3). Apoi, cu data = "test.mpg" vom transmite
numele (adresa) fişierului care trebuie ataşat. De asemenea, se pot specifica înălţimea şi
lăţimea cu care acesta să apară în pagina web.
Server-Side Scripting
(scripting “din partea server-ului”)
În această secţiune, vom vedea cum putem crea pagini web dinamice,
capabile să se conecteze la bazele de date.
La sfârșitul acestei secțiuni, veți putea:

 explica mecanismul de bază a Server-Side
Scripting-ului cu PHP.
 crea o bază de date simplă.
Nivel: Avansat
Durată estimată: 1h
Introducere în Server Side Scripting
Ce este Server Side Scripting?
Scripting-ul “din partea serverului” (SSS) este o tehnologie web, în care cererea unui
utilizator este îndeplinită prin rularea unui script direct de pe serverul paginii web curente.
Acesta este de obicei folosit pentru a oferi unei pagini Web interactive acces la baze de date
sau alte tipuri de date înmagazinate.
Care este scopul Server Side Scripting-ului?
Server Side Scripting-ul este folosit la "programarea" comportamentului unui server.

Serverele pot edita dinamic, modifica sau adăuga orice conţinut la o pagină Web. Acest
limbaj este pur şi simplu un instrument pentru crearea paginilor web dinamice prin rularea
de script-uri de pe server. Server Side Scripting-ul este cel mai frecvent utilizat pe site-uri
care conţin componente interactive pentru utilizatori.
Cum funcţionează Server Side Scripting-ul?
Atunci când un utilizator solicită o pagină web, serverul returnează acest pagină, dar
dacă pagina conţine un server-side script, script-ul din interiorul paginii HTML este executat
de server înainte ca aceasta să fie returnată la browser-ul ca şi cod HTML pur. Serverul se
poate, de exemplu, să răspundă la query-urile utilizatorului sau a datelor transmise de la
form-uri HTML şi poate accesa bazele de date, returnând datele cerute de utilizatori.
Ce limbi tehnologii / sunt folosite?
Unele dintre cele mai frecvent folosite limbaje server side scripting sunt:
• ASP - ASP.NET
• ColdFusion Markup Language
• Java prin intermediul paginii JavaServer
• PHP
• Perl
• Python
• SQL
Introducere în PHP
Introducere PHP
PHP e prescurtarea pentru: (H)ypertext (P)reprocessor (P) şi este un limbaj de

programare pentru construirea site-uri web dinamice. Acesta este un server-side scripting
care poate fi încorporat într-o pagina HTML. Spre deosebire de o pagină obişnuită HTML,
PHP este numai server-side, ceea ce înseamnă că nu poate interacţiona direct cu computerul
utilizatorului. Un script PHP nu este trimis direct la un client de către server; în schimb, este
analizat de modulul de PHP pe server. Acesta funcţionează mână în mână cu serverul dvs.
Web pentru a procesa codul sursă al unei pagini înainte ca această pagină să fie trimisă la
browser-ul utilizatorului. Acest lucru înseamnă că merge prin intermediul paginii de sus în
jos, în căutarea secţiunilor de PHP, pe care va încerca să le execute.
Cum funcţionează PHP?
PHP permite serverului web să facă mult mai mult decât să returneze pagini HTML
pentru utilizator, cum ar fi efectuarea de calcule complexe, lucrul cu baze de date, şi multe
altele. Scripturile PHP sunt executate pe server si pot crea dinamic codul HTML care
generează pagina Web. PHP si MySQL se combină pentru a uşura crearea de pagini web
dinamice interactive. HTML poate crea pagini foarte bine formatate. Cu un adaos de PHP si
MySQL aveţi posibilitatea să culegeţi date de la utilizatorii dvs., şi face multe lucruri pe care
HTML singur nu le poate susţine. Frumuseţea PHPului ca şi limbă este faptul că acesta este
conceput pentru a fi utilizat împreună cu HTML.
Exemplu de cod PHP
Într-o pagină HTML, codul PHP este delimitat de tag-urile speciale pentru PHP. Se
începe un bloc de cod PHP cu "<?php" şi se încheie cu "?>"
Când un vizitator deschide o pagină, serverul efectuează procesele de cod PHP şi

apoi trimite datele HTML de ieşire (nu codul PHP propriu-zis) în browser-ul vizitatorului.
PHP şi baze de date
Una din caracteristicile definitorii ale PHP este uşurinţa cu care vă puteţi conecta la
baze de date cât şi de a le manipula. PHP poate interacţiona cu baze de date pentru a stoca
informaţii de la utilizator, cât şi să preia informaţii care pot fi afişate pentru utilizator. PHP
pune în aplicare funcţii predefinite pentru conectarea la o gamă largă de sisteme de baze de
date cum ar fi:
• MySQL
• Oracle
• MSSQL
• Interbase
şi multe altele.
Introducere în baze de date
Ce este o bază de date?
O baza de date este o colectie organizată de informaţii care este formată din
înregistrările aferente. Aceasta este aranjată într-un mod care face cât mai uşoară obţinerea
de informaţii. Fiecare înregistrare din baza de date este compusă dintr-un set de câmpuri,
care conţin elementele individuale de informaţii pentru un anumit element. Baza de date
este stocată în tabele. Fiecare tabel este identificat printr-un nume (de exemplu, "Pontaj"
sau "Cărţi").
Acesta este un exemplu de tabel:
Ce este SQL?
Structured Query Language (SQL) cuprinde una din pietrele de temelie ale
arhitecturii moderne a bazelor de date. SQL defineşte metodele utilizate pentru a crea şi
manipula baze de date relaţionale pe toate platformele majore. SQL este un limbaj standard
pentru a face interogări (query-uri) interactive pentru manipularea (stocarea, extragerea,
actualizarea, ştergerea) unei baze de date. Interogările iau forma unei limbi de comandă
care vă permite să selectaţi, inseraţi, updataţi, să aflaţi locaţia unor anumite date, şi aşa mai
departe. Există, de asemenea, o interfata de programare.
Cum se poate crea o simplă bază de date MySQL?
În zilele noastre, aplicatii de management cum ar fi Joomla sau Moodle sunt

dinamice. Scopul lor este de a oferi depozitare pentru articole, posturi, povestiri, poze, filme
şi alte tipuri de conţinut. În scopul de a păstra toate datele organizate şi pentru o afişare mai
rapidă, aceste cereri sunt folosind baze de date MySQL. Baza de date MySQL este compusă
din tabele şi la fiecare dintre acestea MySQL stochează informaţii specifice pentru aplicaţia
curentă.
Imaginea de mai jos arată modul în care o simplă bază de date MySQL este
organizată pentru a stoca date. Baza de date este numit bookstore (librărie) şi constă în
tabele ordonate logic (ordonare de tip tree).
Există mai multe moduri în care puteţi crea o nouă bază de date MySQL. Cel mai
rapid şi mai mai uşor este cu ajutorul instrumentului phpMyAdmin. Imaginea de mai jos
arată mai pe larg un tabel MySQL.
Fiecare tabel cuprinde rânduri şi coloane. Coloanele precizează tipul de date. Datele
in sine sunt stocate pe rânduri. Numele acestui tabel este book (carte) şi este folosit pentru
a stoca informaţii despre cărţi.
Informaţiile despre cărţi stocate în baza noastră de date sunt afişate mai jos:
Interogări (query-uri) SQL şi manipularea datelor

În scopul de a accesa datele unui tabel folosim SQL query pentru a comunica cu
baza de date. O interogare SQL deschide legătura cu baza de date, găseşte tabelul care
conţine datele dorite şi modifică înregistrările necesare.
De exemplu, următoarea declaraţie SQL va selecta toate înregistrările din tabelul “Persons”:
SELECT * FROM Persons
Putem insera, actualiza sau chiar şterge datele dintr-un tabel cu ajotorul comenzilor
SQL. Mai important este că această manipulare a datelor se poate face prin intermediul unui
site web, precum şi cu multele posibilităţi pe care PHP le oferă.
HTML, PHP şi baze de date
Un utilizator poate interacţiona cu un site web care afişează form-uri cu ajutorul

web browser-ului lui / ei. Atunci când utilizatorul apasă pe butonul submit a form-ului, o
cerere poate fi trimisă la serverul care conţine baze de date şi interogări (query-uri) pot fi
făcute spre tabelele unei baze de date. Rezultatele care sunt returnate de server pot fi
afişate pe pagina web. Toate aceste pagini web pot fi scrise într-o combinaţie de HTML, PHP
şi SQL.
Content Management Systems

(sisteme de management a conţinutului)
La sfârșitul acestei secțiuni veți putea:
 defini termenul "Content Management System"
 crea un curs cu Moodle
 să vă inregistrați într-un curs Moodle
 să adăugați conținut cursului dvs. Moodle
 să creați un forum în cursul dvs. Moodle
 să creați o pagină de tip “wiki” în cursul dvs. Moodle
Nivel: Intermediar
Durată estimată: 2h
Prezentare
Ce este Content Management System (CMS)?
Web-ul este un instrument pentru schimbul de informaţii. Pentru a face posibilă

afişarea acestor informaţii (sau "conţinut"), pe o varietate de computere diferite, oamenii au
inventat un limbaj, numit HTML, care spune fiecărui tip de computer cum să afişeze acest
conţinut, fapt foarte folositor.
Din păcate, din perspectiva cuiva care vrea să facă schimb de informaţii,
accesibilitatea acestuia la postarea acestor informaţii pe Internet este limitată de
cunoştinţele sale de HTML.
Content Management Systems au fost dezvoltate pentru a rezolva această dilemă.

Un CMS vă ajută să creaţi şi să stocaţi conţinut într-un depozit comun, fără a fi nevoie să
cunoaşteţi HTML sau alte limbaje.
Ce este Moodle?
Moodle este un acronim pentru Modular Object-Oriented Dynamic Learning

Environment. Este un sistem de gestionare a conţinutului online, care este proiectat pentru
a crea posibilităţi de interacţiune între profesori şi studenţi/elevi.
Să începem prezentarea Moodle cu o analogie Lego - ce este acesta, principalele sale

caracteristici, gândirea din spatele său şi unele elemente ale lumii Moodle.
Cum să descărcaţi şi să instalaţi Moodle pe serverul dvs. web
Moodle este un software gratuit. Acest lucru înseamnă că toată lumea poate
descărca un pachet arhivat Moodle de pe http://download.moodle.org/. După aceea, puteţi
să-l instalaţi pe serverul dvs. web şi să-l folosiţi.
Dacă întâmpinaţi probleme, puteţi să accesaţi

http://docs.moodle.org/en/Installing_Moodle/.
Noţiuni de bază
Cum se poate crea un curs cu Moodle?
Pasul 1. Presupunând că v-aţi conectat cu succes la site, apăsaţi pe Adăugaţi un nou curs.
Figura 1.
Pasul 2. Acum, puteţi edita setările cursului pe care vreţi să îl creaţi. Scrieţi un nume
complet pentru cursul dvs., cât şi unul prescurtat. De asemenea, scrieţi un scurt cuprins al
cursului.
Figura 2.
Pasul 3. Modificaţi formatul pentru cursul dvs. la formatul Topics. Există multe opţiuni după
cum puteţi vedea, dar cele mai frecvent utilizate sunt Weekly şi Topics. Dacă nu sunteţi
sigur care ar fi opţiunea potrivită pentru dvs., apăsaţi pe butonul Help (semnul de întrebare
de culoare galbenă) din stânga pentru o descriere.
Figura 3.
Pasul 4. Acum, uitaţi-vă la blocul de Enrolment (înscriere). Aţi văzut că opţiunea implicită
este de Internal Enrolment. Asta înseamnă că, dacă un elev apasă pe numele cursului,
sistemul va cere în mod automat, dacă el / ea ar dori să adere la curs. Puteţi face cursul, de
asemenea, să nu funcţioneze pe bază de înscriere (se pot înscrie studenţi manual de
dumneavoastră mai târziu) sau să funcţioneze pe bază de înscriere doar pentru o durată
limitată de timp. Dar nu faceţi nici o schimbare acum. Amintiţi-vă că puteţi reveni mai târziu.
Figura 4.
Pasul 5. Apăsaţi pe Salvaţi modificările. (Să nu vă fie frică să experimentaţi singur cu orice
opţiune care ar putea părea de ajutor).
Figura 5.
Pasul 6. Pe ecranul următor, aveţi posibilitatea să atribuiţi roluri în cursul dumneavoastră.

Observaţi că încă nu există profesori pentru curs. Apăsaţi pe opţiunea Teacher din coloana
Roles.
Figura 6.
Pasul 7. Selectaţi-vă din lista de potenţiali utilizatori (în cazul dumneavoastră lista va fi mult
mai mare şi aţi putea dori să utilizaţi butonul de căutare de mai jos), apăsaţi pe Add şi apoi
apăsaţi pe Assign roles in Course.
Figura 7a.
Figura 7b.
Pasul 8. Acum modelele anterioare s-au modificat. Puteţi observa prezenţa unui nou
profesor, dumneavoastră!!! Apăsaţi pe Click here to enter your course (Fig. 8).
Figura 8.
Pasul 9. Pagina de start a cursului va apărea pe ecran (Fig. 9).
Figura 9.
Cum se înregistrează studenţii manual în cursul Moodle?
Pasul 1. Apăsaţi pe Settings din meniul Administration situat în stânga paginii de start (Fig.
9).
Pasul 2. Acum sunteţi înapoi la ecranul Settings (Fig. 2). Puteţi modifica din nou dacă doriţi
anumite opţiuni.
Pasul 3. În meniul Enrolments, modificaţi cursul în non enrollable (Fig. 4). Apăsaţi pe Save
changes (Fig. 5).
Pasul 4. Apăsaţi opţiunea Student din coloana Roles (Fig. 6).
Pasul 5. Găsiţi studentul/studenţii pe care doriţi să îi îinscrieţi în curs şi apăsaţi Add. Apoi
apăsaţi pe Assign roles in Course (Fig. 10).
Figura 10a.
Figura 10b.
Pasul 6. Acum puteţi vedea studenţii înscrişi la curs (Fig. 11). Apăsaţi pe Click here to enter
your course.
Figura 11.
Pasul 7. Apăsaţi pe Participants din meniul People aflat în partea stângă a pagini de
start. Acum îi puteţi vedea pe toţi cei ce participă la curs (Fig. 12).
Figura 12a.
Figura 12b.
Cum se poate edita cursul Moodle?
Pasul 1. Apăsaţi pe Turn editing on aflat în colţul din dreapta sus a paginii de start. Vor
apărea diverse iconiţe pe ecran, însă nu intraţi în panică deoarece veţi avea ocazia să vedeţi
exact ce funcţie are fiecare dintre ele (Fig. 13).
Figura 13a.
Figura 13b.
Pasul 2. Apăsaţi pe iconiţa Edit summary aflată chiar sub tabul Topic Outline. Scrieţi
“Welcome to the ODL course.”, aplicaţi funcţia bold şi apăsaţi Save changes (Fig. 14).
Figura 14.
Pasul 3. Textul inserat apare sub forma unei etichete. Acum apăsaţi pe iconiţa Move right
aflată lângă News forum. Hyperlinkul News forum se muta puţin în dreapta (Fig. 15).
Figura 15a.
Figura 15b.
Pasul 4. Apăsaţi iconiţa Move de langă News forum. Apare un set de mici sloturi. Puteţi
muta News forum pe slotul preferat. Mutaţi-l pe cel de-al doilea topic. News forum este
mutat (Fig. 16).
Figura 16a.
Figura 16b.
Pasul 5. Apăsaţi iconiţa Delete situată lângă News forum. Un mesaj de atenţionare apare în
care sunteţi rugat să confirmaţi acţiunea anterioară. Desigur, este decizia dumneavoastră,
dar pentru moment apăsaţi No (Fig. 17).
Figura 17.
Pasul 6. Apăsaţi pe iconiţa Hide situată lângă News forum. News forum devine gri (Fig. 18).
Asta înseamnă că acum News forum nu poate fi accesat de studenţii înscrişi în curs. Această
funcţie este folositoare în cazul în care nu vreţi să prezentaţi anumite resurse studenţilor.
Figura 18.
Pasul 7. Apăsaţi pe butonul Turn editing off din colţul din dreapta sus şi întoarceţi-vă la
pagina de start.
Adăugarea Conţinutului
Cum poate fi adaugat un fisier in cursul Moodle?
Pasul 1. Apăsaţi butonul Turn editing on din colţul din dreapta sus al paginii de start (Fig.
19).
Figura 19.
Pasul 2. Din meniul drop-down Add a resource, selectaţi Link to a file or web site (Fig. 20).
Figura 20.
Pasul 3. Inseraţi un nume şi o scurtă descriere a fişierului pe care doriţi să îl adăugaţi. În
blocul Link to a file or web site, apăsaţi Choose or upload a file (Fig. 21).
Figura 21.
Pasul 4. Apăsaţi Upload a file (Fig. 22).
Figura 22.
Pasul 5. Apăsaţi Browse apoi găsiţi fişierul pe care doriţi să îl adăugaţi, ca şi cum ar fi fost un
fişier ataşat unui e-mail. Apăsaţi Upload this file (Fig. 23).
Figura 23.
Pasul 6. Apare un mesaj care vă înştiinţează că fişierul a fost uploadat cu succes. Apăsaţi
Choose din coloana Action de langă fişier (Fig. 24).
Figura 24.
Pasul 7. În blocul Window, din meniul drop-down, selectaţi New window. Apăsaţi Save and
return to course (Fig. 25).
Figura 25.
Cum poate fi adăugat un link în cursul Moodle?
Pasul 1. Apăsaţi butonul Turn editing on din colţul din dreapta sus a paginii de start (Fig. 19).
Pasul 2. Din meniul drop-down Add a resource, selectaţi Link to a file or web site (Fig. 20).
Pasul 3. Inseraţi un nume şi o scurtă descriere a paginii web căreia doriţi să îi creeaţi un link
către curs. În blocul Link to a file or web site, inseraţi URL-ul paginii web (Fig. 26).
Figure 26.
Cum poate fi adaugată propria pagină web în cursul Moodle?
Pasul 1. Apăsaţi butonul Turn editing on din colţul din dreapta sus a paginii de start (Fig. 19).
Pasul 2. Din meniul drop-down Add a resource, selectaţi Compose a web page (Fig. 27).
Figura 27.
Pasul 3. Inseraţi un nume şi o scurtă descriere a paginii web pe care doriţi să o adăugaţi (Fig.
28).
Figura 28.
Pasul 4. Creeaţi propria dumneavoastră pagină web. După cum puteţi observa puteţi utiliza
o mulţime de opţiuni, precum schimbarea fontului sau culorii textului, adăugarea unei
imagini, unui link, unui tabel etc. (Fig. 29).
Figura 29.
Cum să lucraţi cu fisiere şi dosare.
Pasul 1. Apăsaţi pe Files din blocul Administration aflat în stânga jos paginii de start (Fig. 30).
Figura 30.
Pasul 2. Apasă Make a folder (Fig. 31).
Figura 31.
Pasul 3.Scrie numele foderului si apasă Create (Fig. 32).
Figura 32.
Pasul 4. Folderul a fost creat cu succes. Bifează căsuţele din stânga fişierelor pe care vrei să
le muţi şi din meniul drop-down, alege Move to another folder (Fig. 33).
Figura 33.
Pasul 5. Apare un mesaj care te ghidează pe parcursul restului procedurii. Se merge la
folderul destinaţie şi se apasă Move files to here.
Comunicarea
Cum se crează şi se rulează un formular cu Moodle?
Pasul 1. Se apasă butonul Turn editing on din partea dreapta sus a paginii principale a
cursului . Din meniul Add an activity, se selectează Forum (Fig. 34).
Figura 34.
Pasul 2. Se scrie numele şi o scurtă introducere pentru forum, avand posibilitatea de a îi
adăuga o scură descrie şi reguli. Se selectează tipul de Forum cel mai potrivit (Pentru Help se
apasă semnul galben de intrebare). Se apasă Save and return to course (Fig. 35).
Figura 35a.
Figura 35b.
Pasul 3. Se apasă pe E-learning forum (Fig. 36).
Figura 36.
Pasul 4. Se apasă Add a new discussion topic (Fig. 37).
Figura 37.
Pasul 5.Se scrie un subiect scurt şi mesajul. Se apasă Save changes (Fig. 38).
Figura 38a.
Figura 38b.
Pasul 6. Un câmp (thread) este creat.Se apasă pe subiectul unei discuţi (discussion) pentru a
se vedea toate postările acelei discuţii(Fig. 39). Se explorează toate opţiunile posibile.
Figura 39a.
Figura 39b.
How to create a wiki with Moodle?
Pasul 1. Se apasă pe butonul Turn editing on din colţul dreapta sus a paginii principale a
cursului.Din meniul drop-down Add an activity, se alege Wiki (Fig. 40).
Figura 40.
Pasul 2.Se scrie numele şi o scurtă descriere. Se apasă Save and display (Fig. 41).
Figura 41a.
Figura 41b.
Pasul 3. Pagina wiki este editata prin tastarea unui răspuns. Se apasă Save (Fig. 42).
Figura 42.
Pasul 4. Pagina wiki va fi updatată. Se apasă ODL home de la baza paginii (Fig. 43).
Figura 43.
Pasul 5. Acum, se presupe ca studentul sau profesorul se logheză şi află despre pagina wiki.
El/Ea apasă pe numle paginii wiki, apoi pe tabul Edit , adaugând contribuţia ei/lui şi apoi
salvează schimbările(Fig. 44).
Figura 44a.
Figura 44b.
Pasul 6. Pagina wiki a fost iar updatată. Ca professor se poate vizualiza istoricul paginii wiki
sau folosirea unor versiuni mai vechi(Fig. 45). Nu vă feriţi să experimentaţi până înţelegeţi
modul de funcţionare.
Figura 45.
Crearea Execiţiilor
In În această secţiune se va arăta cum se pot crea exerciţii interactive
folosind XML si Flash.
La sfârşitul acestei secţiuni veţi ştii cum să

 structuraţi informaţia folosind XML
 scrieţi cod simplu în Flash folosind
Actionscript
 combinaţi XML cu Flash
 creaţi exerciţii interactive
Nivel: Avansat
Timp estimat: 2h
Introducere în XML
Ce este XML?
Definiţia pentru XML este EXtensible Markup Language (Limbaj extensibil de marcare).
 XML este un limbaj de marcare care seamă mult cu HTML

 XML a fost creat pentru portarea datelor, nu pentru a le afisa.
 Tagurile XML nu sunt predefinite. Trebui definite taguri proprii.
Diferenta de bază dintre XML şi HTML este că HTML este folosit pentru afişarea datelor, în
timp ce XML este pentru portarea informaţiei. Deci XML Nu este un înlocuitor pentru HTML.
Cum arată un document XML?
Mai jos este prezentat un document XML, structurat în aşa fel încât să reprezinte un
catalog de CD-uri care conţine descrierea a două CD-uri cu muzică. A se observa ca tagurile
(CD, CATALOG, etc) au fost definite de catre noi, în aşa fel încât să creeze o structură mai
inteligibilă.
<CATALOG>
<CD>
<TITLE>Cryptic Writings</TITLE>
<ARTIST>Megadeth</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>16.98</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Draconian Times</TITLE>
<ARTIST>Paradise Lost</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Music for Nations</COMPANY>
<PRICE>11.98</PRICE>
<YEAR>1995</YEAR>
</CD>
</CATALOG>
How can we write an XML document?
Un document XML, este un fişier cu extensia .xml. Nu este nevoie de nici un editor sau
program special pentru a crea un document XML, se poate folosi un editor text simplu.
Structura unui document XML, oricât de maleabilă ar fi, trebuie să respecte anumite reguli
precum urmatoarele:
1. Toate elementele XML trebuie să abie un tag de închidere.
În XML, nu se poate omite un tag de închidere. Toate elementele trebuie să aibă tag
de închidere:
Acesta este un paragraf

Acesta este un alt paragraf
2. Tagurile XML sunt Case Sensitive
În XML, tag-ul este diferit de tag-ul. Tagurile de închidere şi de deschidere trebuie

scrise cu acelaşi tip de litere:
<message>Acesta este incorect</Message>

<message>Acesta este corect</message>
3. Tagurile XML trebuie să fie încapsulate corespunzător
În HTML, pot fi observate taguri încapsulate necorespunzător:
This text is bold and italic
În XML, toate elementele trebuie să încapsulate corespunzător unul în celălat:
This text is bold and italic
4. Documentele XML trebuie sa aiba un element rădăcină
Documentele XML trebuie să conţină un element care este părintele tuturor

celorlate elemente. Acesta se numeşte element rădăcină (sau root).
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
5. Valorile atributelor XML trebuie să fie între ghilimele
Elementele XML pot avea attribute în perechi nume/valoare la fel ca în HTML. În

XML valoarea atributului trebuie sa fie mere între ghilimele. Urmăreşte cele doua
documente XML de mai jos. Primul este incorect, al doilea este corect:
<note date=12/11/2007>
<to>Tove</to>
<from>Jani</from>
</note>
<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>
Cum se poate adauga informaţie ce poate fi vizualizată pentru XML?
Este posibil să folosirea CSS-ului pentru a formata un document XML. Jos este un exemplu
despre folosirea unui CSS pentru a formata un document XML:
Urmăreşte acest document XML: catalog.xml
Este un document XML ce conţine informaţi pentru un catalog de CD-uri, având date pentru
doua CD-uri.
Urmăreşte acest style sheet: cd_catalog.css
CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}
În acesta este CSS-ul care va formata documentul XML. Trebuie definite doar valorile
atributelor pentru tagurile care ne interesează.
În cele din urma vom avea :
Fişierul este la fel precum catalog.xml, singura diferentă fiind linia care leaga fişierul XML de
CSS, astefel formatând fişierul XML.
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>

Introducere în Flash
Ce este Flash?
 Flash este un program de grafică, specializat pentru Web

 Flash permite crearea de “Filme” interactive pentru Web
 Flash foloseşte grafică vectorială, astfel încât graficele create in el pot fi scalate fara
să piardă din calitate.
 Flash nu necesită cunoştinte de programare şi este uşor de învătat.
Filmele Flash au extensia .swf.
Cum port adăuga filme flash în pagina mea?
În secţiunea HTML, Integrarea Multimedia, vom arăta cum se pot adăuga fişiere video în
pagina web. Acelaşi lucru se aplică cand trebuie adăugat un film flash. Cu toate asta există şi
o metodă alternativă pentru a adauga flash in pagina web:
<object width="550" height="400">

<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>
Cine poate vedea şi crea filme flash?
Pentru a vedea filme flash e nevoie de Adobe Flash Player. Dacă nu este instalat Adobe
Flash Player poate fi downloadat gratis de pe siteul Adobe.
Pentru a putea crea filme flash este nevoie trebuie cumpărat un program Flash. Ultima
versiune de la Adobe este Adobe Flash Professional CS4 Dacă nu este instalat vreun
program Flash, poate fi luat un trial de 30 de zile.
Cum se poate crea un obiect care se mişcă?
1. Se crează un fişier Flash nou (File->New sau Ctrl+N). Se alege Flash Document.
2. În timeline-ul care apare, există un layer (Layer 1) cu un blank keyframe(Keyframe
gol).
Se selectează un keyframe şi folosind Oval Tool şi o culoare la alegere.
3. Selectăm frame-ul 30 din timeline şi prin click-dreapta adăugam frame-uri.
Astfel, poza dinamica pe care am creat-o va avea o durata de 30 de frame-uri.
4. Selectăm orice frame din timeline şi intrăm in Properties Panel şi dintre parametri
alegem mişcarea.
5. Selectăm frame-ul 30 prin dublu click dreapta şi îl convertim in cadru-cheie.
6. Urmând aceeaşi procedura, adăugam un cadru-cheie in frame-ul 2, frame-ul 15 şi

frame-ul 29.Acum, timeline-ul ar trebui să arate astfel:
7. Selectăm frame-ul 2 şi mutam mingea pe care am creat-o cu 2-3 pixeli deasupra

poziţiei iniţiale. Apoi selectăm frame-ul 15 şi mutam mingea mai departe in sus. Apoi
selectăm frame-ul 29 şi facem ceea ce am făcut şi in frame-ul 2.Astfel am terminat
animaţia mingii.
8. In scopul de a face ca mişcarea obiectului să para cat mai reala, putem adăuga o
umbra care va urmări mişcarea sa. Astfel, cream un nou strat sub stratul creat
pentru minge.
9. Adăugam 30 de frame-uri exact cum am făcut pentru minge şi cu Oval Tool cream o
elipsa pe care o coloram gri.
10. Selectăm din Properties Panel parametrul dintre forma, la fel cum am ales mişcarea
la paragraful 4.Parametrul Ease va avea valoarea -100. Timeline-ul ar trebui să arate
astfel:
11. Adăugam un cadru-cheie in frame-ul 15 şi micşoram mărimea umbrei utilizând Free

Transform Tool.
12. Acum putem vizualiza lucrarea noastră apăsând Ctrl+Enter şi o salvam cu o extensie
Flash (.swf) movie file.
Exerciţii interactive
Ce este un exerciţiu interactiv?
Un exerciţiu interactiv este un exerciţiu care presupune participarea utilizatorului, astfel

făcând procesul de invătare mai distractiv, interesant şi eficient. Iată un exemplu al unui test
cu alegere multipla:
Cum putem să cream un exerciţiu interactiv?
Pasul 1:Cream un nou document

a. Alegem File > New.
b. In caseta dialog din noul document, selectăm Flash File (ActionScript 2.0) şi apoi dam click
pe OK.
Pasul 2:Setările documentului

Click-dreapta pe scena, selectăm Document Properties, apoi apare caseta dialog din
Document Properties. Ea afişează scena curenta la mărimea de 550 x 400 pixeli şi culoarea
de pe fundal a swatch-ului e setata alba. Puteţi să schimbaţi mărimea şi culoarea scenei
daca doriţi.
Pasul 3:Importarea unei imagini in etapa

Alegeţi File > Import > Import to Stage, şi apoi selectaţi imagine ape care o doriţi. De
asemenea, puteţi să inseraţi imaginea prin combinaţia de taste Ctrl+R.
Pasul 4: Adăugarea de variante multiple de întrebare la etapa

a. Selectaţi Text tool (T).
b. In Property inspector (Window > Properties), selectaţi Static Text type pentru a specifica
tipul câmpului text şi apoi puneţi întrebarea “Care este regizorul filmului “Vertigo”?”.De
asemenea, puteţi seta mărimea fontului şi culoarea textului.
Pasul 5:Adăugarea componentei ComboBox

a. Selectaţi Window > Components.
b. Dublu-click pe ComboBox in Components panel.

c. Selectaţi componentele din Stage şi numiţi, de exemplu, ca şi căsuţa din properties panel.
Pasul 6:Adăugarea de opţiuni de răspunsuri:
a. Selectaţi Window > Component Inspector. In Component Inspector,daţi click pe data, apoi
apare Value dialog box.
b. Click + pentru a adăuga opţiuni de răspunsuri şi apoi înlocuiţi valoarea implicita cu

următoarele opţiuni de răspuns: Alfred Hitchcock, Michael Curtiz, Billy Wilder, John Huston.
Apoi, daţi click pe OK.
c. In Component Inspector, daţi click pe etichete şi apoi vor apărea valorile casetei dialog.
Urmaţi aceeaşi paşi ca mai înainte pentru a adăuga valorile prin butonul”+” .
Step 7 – Adăugarea butonului de trimitere:

a. Selectaţi Window > Common Libraries > Buttons, apoi Libraries buttons dialog pop up.
b. Alegeţi un buton şi glisaţi-l in etapa.
c. Dublu-click pe buton, şi apoi redenumiţi butonul:Submit. De asemenea, puteţi seta

mărimea butonului din Propertites panel.
Pasul 8 – Inserarea unui cadru-cheie şi ştergerea elementelor cadrului
Pasul 9 – In frame-ul cheie 2, inseraţi o caseta text dinamica
a. Selectaţi Text tool (T).

b. In Property inspector (Window > Properties), selectaţi tipul textului dinamic.
c. Desenaţi o căsuţa text dreptunghiulara. Acesta este aria feedback-ului atunci când cei care
fac testul aleg răspunsul corect sau greşit.
d. Selectaţi căsuţa text dreptunghiulara şi inseraţi variabila jg in Variable box din Properties
panel.
Pasul 10 – In frame-ul cheie 2, adăugaţi butonul “Back”
Urmaţi aceeaşi procedura ca la pasul 8 pentru a adăuga un buton, pe care îl veţi

redenumi”Back”.
Pasul 11 – Deschideţi Action panel şi adăugaţi scenarii
a. Adăugaţi script-uri in butonul Back. Daţi click pe el şi adăugaţi următoarele script-uri:

on (release) { gotoAndStop(1); jg = ''; }
b. Adăugaţi script-uri in butonul Submit. Daţi click pe butonul Submit şi inseraţi următoarele
script-uri:
on (press) { if (box.getValue() == 'Alfred Hitchcock') { jg = 'Felicitari'; } if (box.getValue() ==
'Michael Curtiz') { jg = ' Răspuns greşit!Va rugam, selectaţi din nou!'; } if (box.getValue() ==
'Billy Wilder') { jg = ' Răspuns greşit!Va rugam, selectaţi din nou!'; } if (box.getValue() == 'John
Huston') { jg = ' Răspuns greşit!Va rugam, selectaţi din nou!'; } gotoAndStop(2); }
c. Adăugaţi script-uri in frame-ul 1.Dati click pe frame-ul 1 şi inseraţi următoarele scrit-
uri:stop();
Forums - Wikis – Blogs
In această secţiune, vom introduce trei tipuri de aplicaţii web utilizate pe

scara larga in internet
La sfârşitul acestei secţiuni, vei fi capabil sa:

 explici care este fiecare aplicaţie
prezentata
 creezi un forum simplu, wiki sau blog
Nivel: Intermediar
Timp estimat: 20min
Forumuri
Ce este un forum?
Un forum, sau un departament de mesaje este un site de discuţii online. Din punct
de vedere tehnologic, forumurile sunt aplicaţii web care gestionează conţinutul
generat de utilizator. Participanţii la un forum pot crea legături sociale şi grupuri de
interes pentru un subiect.
Here is an example of a forum about Books & Literature:
Care este structura unui forum?
Un forum consta dintr-un arbore ca structura directoare care conţine temeincadrate in

diferite categorii. Logic, forumurile sunt organizate intr-un set finit de subiecte generice(de
obicei cu un subiect principal) conduse şi actualizate de un grup de membri şi guvernate de
un grup de moderatori.
Un post e un mesaj trimis de utilizator, anexat intr-un bloc ce conţine detaliile utilizatorului
şi data când a fost trimis. Posturile sunt conţinute in subiecte de discutie(threaduri), unde
apar ca şi căsuţe una după alta. Primul post începe subiectul. Acesta poate fi denumit postul
original. Posturile insiruite din fir trebuie să continue discuţiile despre acel post sau să
răspundă altor replici.
Un subiect de discutie este o colecţie de posturi, de obicei afişate de la primul la ultimul, deşi
opţiunea pentru o vizualizare a subiectului poate fi valabila.(se vizualizează aplicaţia
structurii logice de răspunsuri înainte de ordinea cronologica).Un fir este definit de un titlu şi
de o descriere adiţionala care poate să rezume discuţia destinata.
Subiectele care sunt importante dar primesc rar posturi sunt stickyed(sau, in anumite
software-uri, “pinned”).Un subiect sticky va apărea întotdeauna in fata subiectelor normale,
de multe ori in propria lor secţiune.
Ce tipuri de useri sunt intr-un forum?
Pe plan intern, forumurile organizează vizitatori şi logheaza membri

in grupurile utilizatorilor. Privilegiile şi drepturile sunt repartizate pe
baza acestor grupuri. Un utilizator al forumului poate fi promovat
automat intr-un grup mai privilegiat, bazat pe un set de criterii
stabilite de administrator.
Un utilizator neînregistrat al siteului este cunoscut ca invitat sau

vizitator. Invitaţii acorda acces tuturor funcţiilor care nu cer bazei de
date modificări.
Moderatorii (“mod”)sunt utilizatori ai forumului care acorda acces posturilor şi firelor in

scopul moderării discuţiilor si, de asemenea, al păstrării forumului “curat”.Totodată,
moderatorii răspund la problemele utilizatorilor legate de forum, la întrebări generale,
precum şi la reclamaţii. Privilegiile comune ale moderatorilor includ:ştergeri, fuziuni, mutări
şi împărţiri ale posturilor şi ale firelor;închiderea, redenumirea, stickying threads-
urilor;interzicerea, permiterea accesului,avertizarea membrilor;sau adăugarea, editarea,
eliminarea firelor.
Administratorii(“admin”) gestionează detaliile tehnice cerute pentru rularea site-ului.Ca

atare, ei pot să promoveze şi să retrogradeze membrii in moderatori, să gestioneze
regulile, să creeze secţiuni şi sub-secţiuni, precum şi să interpreteze operaţiile bazei de
date(database backup, etc).Administratorii se comporta adesea ca moderatori. De
asemenea, administratorii fac anunţuri pe forum sau schimba aspectul(skin-ul) forumului.
Cum putem să cream un forum?
Sunt variate pachetele de forumuri pe internet pe care le puteţi descarcă.

Majoritatea implementărilor forumului sunt Free şi Open Source Software (F/OSS),
dar sunt de asemenea şi unele aplicaţii valabile foarte bune dar restricţionate.
Forumurile trebuie să înglobeze şi posturile undeva. Majoritatea sistemelor folosesc
o baza de date pentru a realiza acest lucru, altele, in schimb, folosesc fişiere text
simple. Tipul de sistem de depozit pe care vreţi să îl alegeţi aici depinde de ceea ce
este valabil pe serverul dumneavoastră. Vom vedea acum un exemplu al forumului
phpBB™ , cel mai des folosit forum de soluţii. Acesta are un panou de administrare şi
un proces de instalare uşor de realizat, ceea ce va permite să aveţi un forum creat in
câteva minute.
 Decomprimaţi arhiva phpBB3 intr-un director local al sistemului vostru.

 Încărcaţi fişierele conţinute in aceasta arhiva(reţinând directorul sursa) intr-
un director web accesibil pe serverul vostru sau pe contul găzduit.
 Folosind browser-ul web, vizitaţi locaţia pe care aţi plasat-o phpBB3 cu adresa
pentru instalare install/index.php.
 Daţi click pe INSTALL tab, urmaţi paşii şi completaţi toate Informaţiile cerute.
Php BB3 ar trebui să fie acum valabil.
Wikis
Ce este un Wiki?
Un wiki este un site web care utilizează software-ul wiki,

permiţând crearea mai uşoara şi editarea oricărui număr de
pagini web legate intre ele, prin folosirea unui limbaj de
marcare simplificat sau a unui editor de text in interiorul
browser-ului. Wikis sunt des utilizate pentru a crea site-uri
web de colaborare, pentru a spori puterea site-urilor web ale comunităţii şi pentru a
lua note. Enciclopedia de colaborare Wikipedia este unul dintre cele mai cunoscute
wikis. Wikis sunt folosite in afaceri pentru a furniza rapid cunoştinţe. O wiki permite
scrierea cooperativa a documentelor intr-un limbaj de marcare simplu folosind un
browser web. O singura pagina dintr-un site wiki este menţionata ca o “pagina wiki”,
in timp de întreaga colecţie de pagini, care este de obicei interconectata prin hyper-
linkuri, este “the wiki”.O wiki este in mod esenţial o baza de date pentru crearea şi
căutarea de informaţii.
Exemplu de pagina wiki:

Cum funcţionează wikis?
Un wiki invita toţi userii să editeze orice pagina sau să creeze noi
pagini in web site-ul wiki, folosind numai un browser web clar. Wiki
promovează asocieri de subiecte semnificative intre diferite pagini,
făcând crearea paginii link aproape uşoara şi arătând daca o pagina
ţinta exista sau nu.
Un wiki nu este un site artizanal pentru vizitatori ocazionali. In schimb, încearcă să implice
vizitatorul intr-un proces de creare şi colaborare in curs de desfăşurare, care schimba
constant peisajul site-ului web. O caracteristica definitorie a tehnologiei wiki este uşurinţa cu
care paginile pot fi create şi updatate. In mod general, nu se fac revizuiri înainte ca
modificările să fie acceptate. Multe wikis sunt deschise degradării de către publicul general
fără a li se cere să se înregistreze ca utilizatori de conturi. Uneori, logarea pentru o sesiune
este recomandata, pentru crearea unei semnături wiki cookie pentru semnarea modificării in
mod automat .Oricum, multe editări pot fi făcute in timp real şi pot apărea aproape
instantaneu online. Asta poate facilita abuzul de sistem. Serverele wiki private cer
autentificare utilizatorilor pentru a edita paginile si, uneori, chiar şi pentru a le citi.
Cum puteţi crea un Wiki?
Sunt multe pachetele de software wiki, care va permit crearea uşoara a unui wiki.
Unele dintre ele, ca DokuWiki, funcţionează pe fişiere text clare si, astfel, nu necesita
nici o baza de date. Au o sintaxa simpla, dar puternica, ceea ce face ca fişierele de
date să poată fi citite in afara wiki. Instalarea DokuWiki este foarte simpla-in general
tine doar de despachetarea şi setarea permisiunilor.
 Descărcaţi cea mai noua versiune din Download Page.

 Despachetaţi distribuţia arhivei şi uploadati/copiaţi fişierele in spaţiul web.
 Deschideţi install.php in browser şi urmaţi instrucţiunile.
Bloguri
Ce este un blog?
Un blog (o prescurtare a termenului “weblog”) este un tip de site

web, de obicei administrat de o persoana, cu înregistrări regulate
de comentarii, descrieri de evenimente sau alte materiale grafice
sau video. Înregistrările sunt afişate in ordine cronologica inversa.
Multe bloguri furnizează comentarii sau ştiri ale unui subiect

particular;altele au funcţia de jurnale personale online. Un blog tipic combina text, imagini şi
linkuri ale altor bloguri, pagini web,etc. Posibilitatea cititorilor de a posta comentarii intr-un
format interactiv este o parte importanta a multor bloguri. Majoritatea blogurilor sunt
bazate pe text, altele se axează pe arta(artlog), fotografii(photoblog), schite(sketchblog),
filme(vblog), muzica(MP3 blog), audio(podcasting). Micro-blogging-ul este un alt tip de
blogging, unde figurează postări foarte scurte.
Cum pot să creez un blog?
Software-ul weblog(de asemenea numit şi blog software sau blogware) este un software
realizat pentru a simplifica crearea şi întreţinerea weblog-urilor. Ca specialitate a
sistemelor de management al conţinutului, aplicaţiile weblog susţin editarea şi
publicarea de poştari şi comentarii, cu funcţii speciale de gestionare a imaginii,
sindicalizare de web, precum şi moderarea de posturi şi comentarii. Multe aplicaţii
weblog pot fi descărcate şi instalate pe sistemele de utilizator. Unele dintre acestea
sunt furnizate in conformitate cu free-software şi licenţe open-spurce, permiţându-le
să fie utilizate, modificate şi redistribuite in mod liber. Altele sunt reprezentate de
software-ul proprietar care trebuie să fie licenţiat.
Anexa A – Tabel de Simboluri
Simboluri operaţionale
COD COD
NUME SIMBOL FONT FACE="Symbol" Cod
NUMERIC LITERAL
Oricare ∀ ∀ " ∀

Există ∃ ∃ $ ∃
Negaţie ¬ ¬ Ø ¬
Şi ∧ ∧ Ù &and;
Sau ∨ ∨ Ú &or;
Intersecţie ∩ ∩ Ç ∩
Uniune ∪ ∪ È ∪
Plus sau minus ± ± ± ±
Înmulţire × × ´ ×
Derivată parţială ∂ ∂ ¶ ∂
Punct Solid  ∙ · Nu există
Punct de Mijloc · · × ·
Înmulţit încercuit  ⊗ Ä &otimes;
Plus încercuit  ⊕ Å &oplus;
Împărţire  ÷ ¸ ÷
Produs  ∏ Õ ∏
Sumă  ∑ å ∑
Radical  √ Ö √
Integrală ∫ ∫ Nu există ∫
Simboluri Relaţionale
COD COD
NUMERIC LITERAL
Conţine elementul  ∍ ' Nu există

Aparţine ∈ ∈ Î ∈
Nu aparţine ∉ ∉ Ï ∉
Mai mic < < Nu există <
Mai mare > > Nu există >
Izomorfism ≅ ≅ @ &cong;
Perpendicular ⊥ ⊥ ^ &perp;
Bară verticală  | | Nu există
Linie verticală  None ½ Nu există
Mai mic egal ≤ ≤ £ ≤
Mai mare egal ≥ ≥ ³ ≥
Diferit ≠ ≠ ¹ ≠
Echivalent cu ≡ ≡ º &equiv;
Aproximativ ≈ ≈ » ≈
Similar cu ∼ ∼ ~ &sim;
Mulţimea vidă ∅ ∅ Æ ∅
Include ⊃ ⊃ É ⊃
Include egal ⊇ ⊇ Ê &supe;
Nu este inclus ⊄ ⊄ Ë &nsub;
Inclus ⊂ ⊂ Ì ⊂
Inclus egal ⊆ ⊆ Í &sube;
Săgeţi şi paranteze
COD COD
NUMERIC LITERAL
Paranteză stânga  [ [ Nu există

Paranteză dreapta  ] ] Nu există
Paranteză unghiulară stânga  None < Nu există
Paranteză unghiulară dreapta  None > Nu există
Acoladă stânga  { { Nu există
Acoladă dreapta  } } Nu există
Săgeată dublă ↔ ↔ « ↔
Săgeată stânga ← ← ¬ ←
Săgeată sus ↑ ↑ ↑
Săgeată dreaptă → → ® →
Săgeată jos ↓ ↓ ¯ ↓
Săgeată dublă mare ⇔ ⇔ Û ⇔
Săgeată dublă stânga ⇐ ⇐ Ü ⇐
Săgeată dublă sus ⇑ ⇑ Ý &uArr;
Săgeată dublă dreaptă ⇒ ⇒ Þ ⇒
Săgeată dublă jos ⇓ ⇓ ß &dArr;
Puncte de suspensie … … ¼ …
Ghilimele stânga « « Nu există «
Ghilimele dreapta » » Nu există »
Simboluri greceşti
NOTĂ: Doar literele mici sunt afişate. Pentru a obţine majuscule folosiţi caracterul
echivalent cu majuscule.
COD COD
NUMERIC LITERAL
alpha α α a α

Beta β β b β
gamma γ γ g γ
Delta δ δ d δ
epsilon ε ε e ε
Zeta ζ ζ z ζ
Eta η η h η
Theta θ θ q θ
Iota ι ι i ι
kappa κ κ k κ
lambda λ λ l λ
Mu μ μ m μ
Nu ν ν n ν
Xi ξ ξ x ξ
omicron ο ο o ο
Pi π π p π
Rho ρ ρ r ρ
sigma ς σ s σ
Tau τ τ t τ
upsilon υ υ u υ
Phi φ φ j φ
Chi χ χ c χ
Psi ψ ψ y ψ
omega ω ω w ω
Simboluri Diverse
COD COD
NUMERIC LITERAL
Spaţiu None 

Diez  None # Nu există
Procent  % % Nu există
Ampersand  & & &
Apostrof ′ ′ ¢ ′
Apostrof dublu ″ ″ ² ″
Citat " None ² "
Aşadar ∴ ∴ \ &there4;
Bară sus  None ` Nu există
Infinit ∞ ∞ ¥ ∞
Grad ° ° ° °
Liniuţă de
 None ¾ Nu există
despărţire
Aleph ℵ ℵ À &alefsym;
Unghi ∠ ∠ Ð &ang;
Nabla ∇ ∇ Ñ ∇
Jumătate ½ ½ Nu există ½
Semn Cent ¢ ¢ Nu există ¢
Semn
® ® Ò ®
Înregistrat
Semn Copyright © © Ó ©
Semn
™ Ô ™
Trademark

Baze Web Design

Î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

Baze Web Design

Încărcat de

Drepturi de autor:

Formate disponibile

MENUET – Mobile E- Novative Use of

Despre acest curs

În această secţiune, vom vedea ce este WWW,cum funcţionează, şi o

La sfarşitul acestei secţiuni vei fi capabil să :

Dedesupt sunt câteva întrebari, cu răspunsuri, referitoare la nişte aspecte de baza

Ce este WWW (World Wide Web)?

World Wide Web (WWW sau scurt "Web") este un

Ce este un browser web?

Un browser web este o aplicaţie soft care permite unui

Ce este un server web?

Un hyperlink, descrie o referinţa care poate fi accesata direct din

Hypertext (vine de la "more than just" - “mai mult decât” text)

Tehnologii de dezvoltare web

HTML (Hypertext Markup Language) este un limbaj de marcat folosit pentru a

CSS - Cascading Style Sheets -Stiluri în cascada

XML – Unealta pentru a descrie datele

JavaScript - Scripting pe partea de client

Scripting pe partea de client se referă la programarea comportamentului unui

 JavaScript permite designerilor HTML o unealtă de baza la programare

ASP or PHP – Scripting pe partea de server

Scripting pe partea de server este despre programarea unui serviciu pe Internet în

 Edita dinamic, schimba sau adăuga noi elemente

Prelucrarea datelor cu SQL

Dezvoltarea paginilor Web

De ce soft ai nevoie pentru a dezvolta pagini HTML?

Ce ofera editoarele de sursa?

Editoarele text de HTML de regula oferă formatare de text (highlighting). Template-

Ce este o unealta WYSIWYG ?

Ce este un editor de web-site-uri?

Acete programe nu sunt concepute doar pentru a face pagini web, ci şi

Aceasta sectiune este un ghid pentru învatarea HTML-ului, limbajul

La sfârsitul acstei secţiuni, vei fi capabil să:

HTML este prescurtarea pentru HyperText Markup Language.

Ce este o pagină HTML?

Cum arată codul HTML?

Elinda este un golf bine adăpostit în partea vestica a insulei,

Este o minunată plajă cu mult nisip şi ape limpezi, ideala

Nu departe de mal se afla o ruina a unei vechi nave romane.

Numele Elinda sau Alinda deriva de la vechiul cuvânt grec

Cum pot schimba stilul in text?

<b>Trenul Consecinţelor</b> ⇨ Trenul Consecinţelor

Pentru a face cuvintele să pară înclinate spre dreapta, înconjuraţi textul cu

<i> Aproape Onest</i> ⇨ Aproape Onest

<sub>Poduri arzânde</sup> ⇨ Poduri arzânde

Cum pot folosi un heading?

Text formatat HTML markup solicitat

Înapoi în zi <H1> Înapoi în zi</H1>

Tornada sufletelor <H3>Tornada sufletelor</H3>

Adevărul trebuie zis

Cum pot decora textul?

<font face= Comic Sans Ms >Elysian Fields</font>⇨ Elysian Fields

Aveţi aici mai multe fonturi pe care le puteţi încerca:

Puteţi de asemenea să schimbaţi mărimea fontului. Faceţi acest lucru folosind

<font size="1">Sângele eroilor</font> ⇨ Sângele eroilor

<font size="3">Insomnie</font> ⇨ Insomnie

<font size="5">Voi fi acolo</font> ⇨ Voi fi acolo

<font color="orange">Trezire grosolană</font> ⇨ Trezire grosolană

Paragrafe şi linia nouă

O linie nou este creată de <BR/> tag.

Priviţi exemplul următor:

Text formatat HTML markup solicitat

Cum pot adăuga Caractere speciale?

Există mai multe moduri de a adăuga simboluri pentru paginile dumneavoastră.

HTML Cod Numeric