Curs BWD Ro-Bazele 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
Noiuni de baz ....................................................................................................................... 40
Adugarea Coninutului ........................................................................................................... 51
Comunicarea ........................................................................................................................... 59
Crearea Execiiilor ........................................................................................................................... 67
Introducere n XML .................................................................................................................. 68
Introducere n Flash ................................................................................................................. 72
Exerciii interactive .................................................................................................................. 75
Ce este un exerciiu 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 studenilor, profesori, formatori, cercettori, cursanii aduli,
factorii de decizie de nvmnt, educaia i formarea profesional a formatorilor i a
altor profesioniti din domeniul educaional. 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 coninut de nvare multimedia bogat pe ecranele Tablet
PC-ului. Fiind o form de coninut digital, acest rezultat va oferi metodele de punere
n aplicare i utilizare efectiv didactice a tehnologiilor inovatoare n domeniul mobile
de nvare. n ceea ce privete competenele cheie de la Lisabona, aceasta iesire va fi
legata de dezvoltarea competenelor digitale.

BAZELE WEB
n aceast seciune, vom vedea ce este WWW,cum funcioneaz, i o
scurt prezentare a tehnologiilor ce stau la baza sa.
La sfaritul acestei seciuni vei fi capabil s :
nelegi mecanismul de baza
enumeri cel puin 4 limbaje folosite n web
s alegi unealta potrivit de dezvoltare
Nivel: nceptor
Timp Estimat : 20min
Bazele WWW

Dedesupt sunt cteva ntrebari, cu rspunsuri, referitoare la nite aspecte de baza

ale WWW i Internet. Rspunsurile vor conferi o baza. Cuvintele sau frazele ngroate
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
conine 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 aplicaie soft care permite unui

utilizator s afieze text, imagini, video, muzica, jocuri i
alte informaii gsite ntr-o pagin web din WWW (Word
Wide Web) localizat ntr-o reea local.Textul i
imaginile dintr-o pagin web conin deobicei hiperlink-uri
ctre aceeai sau alt pagin web. Un website este un set
de pagini web interconectate. Browserele web permit
utilizatorului s acceseze uor informaia 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. Totui, este
mai intuitiv s foloseti 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 crui 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 referina care poate fi accesata direct din

cadrul unui document hypertext. Aceast zon din care hyperlinkul poate fi activat se numete ancora. inta este locul ctre ceea ce
indica link-ul,aceasta putnd fi o alt locaie n cadrul aceleai pagini
sau aceluiai document, o alta pagin sau document, sau o locaie
specific n interiorul unei alte pagini sau document- depinde de
tipul de hypertext.Aciunea 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 dect text)

este o forma de text care confera o funcionalitate mai bogat
comparativ cu textul normal, prin faptul c permite
utilizatorului capacitatea de a explora noi link-uri ctre alte
pagini legate(linked) de cuvinte sau imagini specifice. Spre
deosebirede textul normal hypertext poate conine tabele,
imagini i alte elemente ce faciliteaza o prezentare. Oricare dintre acestea poate fi
un hyperlink. Alte forme de interaciune pot fi deasemenea prezente, spre exemplu
o bula coninnd text poate s apar cnd 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 considerai tehnologiile care
urmeaza a fi folosite.
HTML
HTML (Hypertext Markup Language) este un limbaj de marcat folosit pentru a

encoda pagini Web. Suplinete browser-ului informaii despre aezarea i
prezentarea componentelor. HTML este limbajul Web-ului, i fiecare dezvoltator ar
trebui s aibe cunosinte de baza asupra sa.
CSS - Cascading Style Sheets -Stiluri n cascada
Stilurile definesc cum elementele HTML vor fi afiate. Stilurile externe permit
schimbarea aparenei i aezarii fiecarei pagin din site-ul tu, 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 afieaza
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 reaciona 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 cruia se poate livra mai mult coninut dinamic. Cu scripting pe partea de
server se pot:

Edita dinamic, schimba sau aduga noi elemente

Rspunde 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
Diferenia 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. Cunotinele SQL sunt importante pentru
oricine vrea s stocheze sau s obina 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 usurina n scrierea codului i o
funcionalitate
sporit.
Nici nu e nevoie s stii HTML ca s faci o pagin web. Exista o mulime 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). Templateuri, 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 cunoaterea 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 ataata 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 primeti
editoarele html ofera o interfaa de editare care se aseaman cu pagina vazuta la

final intr-un browser web. Deoarece utilizarea unui editor wysiwyg nu necesit
cunotine html sunt mai uor de folosit de un nceptor.
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, gsirea 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 ctre nceptori.
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 att vei
ntelege mai bine cum s proiectezi pagini funcionale i atractive. Editoarele
prietenoase precum FrontPage pot fi bune pentru a face rapid cateva pagini, dar
daca intenionezi s aprofundezi web design-ul, vei avea nevoie de o cunosinte
solide n HTML-ul de baza.


Ghid HTML
Aceasta sectiune este un ghid pentru nvatarea HTML-ului, limbajul
folosit n crearea paginilor web.
La sfrsitul acstei seciuni, 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 apsnd pe text special numit
hyperlink care te direcioneaz ctre alte pagini. Prin hyper se nelege neliniar
adic, poi ajunge ctre orice loc de pe Internet cand vrei apsnd 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 folosete limbajul HTML pentru a indica
modul n care va fi format textul cand va fi afiat - adic va diferenia textul pe categorii: linkuri, titluri, paragrafe, liste etc, - i pentru a nsoi textul cu forme interactive, imagini
ncadrate i alte obiecte
Fundamental, este un fiier text cu extensia .html sau htm. Aa 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 fiier de tip text numit
simplepage.html. La stanga poti vedea pagina web aa 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 adpostit n partea vestica a insulei,
lng
<a title="Satul Anavatos Chios"
href="anavatos.asp">Anavatos</a> 
Este o minunat plaj cu mult nisip i ape limpezi, ideala
pentru not i scufundri.


Nu departe de mal se afla o ruina a unei vechi nave romane.
 
Numele Elinda sau Alinda deriva de la vechiul cuvnt 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 cnd 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 conine un nume de etichet i, uneori,
atributele tag-ului. El i spune browser-ului c ai dori s efectuai o aciune de formatare
din acel punct al textului. Eticheta de nchidere spune browser-ului, cu "/" (numit forward
slash), urmat de acelai nume al tag-ului, c dorii s oprii aciunea la acel punct al
textului.

Cum pot schimba stilul in text?
Bold (ngroat)
Pentru a face cuvintele s apar boldate (bold), nconjurai textul cu taguri .
Trenul Consecinelor Trenul Consecinelor
Italic (nclinat)
Pentru a face cuvintele s par nclinate spre dreapta, nconjurai textul cu
taguri .
 Aproape Onest Aproape Onest
Subscript (indice)
Pentru a face cuvintele s apar ca jumtate din nlime i 50% sub linie, nconjurai
textul cu taguri .
n ora mea cea mai ntunecat n ora mea cea mai ntunecat
Superscript (exponent)
Pentru a face cuvintele s apar ca jumtate din nlime i 50% peste linie,
nconjurai textul cu taguri .
Poduri arznde Poduri arznde
Cum pot folosi un heading?

O poziie n text este creat cu <H1> tag. Exist de fapt 6 poziii 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>
Adevrul trebuie zis
<H6>Adevrul trebuie zis</H6>
Cum pot decora textul?

Exist o mulime de lucruri pe care le putei face pentru a schimba aspectul fontului.
Primul lucru este s utilizai un font diferit. Cum putei face asta? Putei face acest lucru
folosind atributul face astfel:
Elysian Fields Elysian Fields

Avei aici mai multe fonturi pe care le putei ncerca:
Arial
Arial Black
Arial Narrow
Book Antiqua
Bookman Old Style
Century Gothic
Comic Sans MS
Courier New
Garamond
Times New Roman
Verdana
Putei de asemenea s schimbai mrimea fontului. Facei acest lucru folosind

atributul mrime (size) ,astfel:
Sngele eroilor Sngele eroilor

Insomnie Insomnie
Voi fi acolo Voi
fi acolo
i n sfrit,putei 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, opional, cu tag-ul
invers al alineatului.
O linie nou este creat de tag.
Privii exemplul urmtor:
Text formatat
HTML markup solicitat
Ultima linie din paragraf.
Ultima linie din paragraf.


Prima linie dintr-un paragraf nou.
Prima linie dintr-un nou paragraf.

O linie din text.
Pe o linie nou.
O din text. 
Pe o linie nou.
Cum pot aduga Caractere speciale?
Exist mai multe moduri de a aduga simboluri pentru paginile dumneavoastr.

Probele urmtoare ilustreaz utilizarea fiecrei metode de cod. Pentru a plasa un simbol
ntr-o pagin HTML, copiai i inserai codul corespunztor n dosarul n care dorii simbolul.
HTML Cod Numeric

exemplu: pentru a face o acolad,{ tastai {
Font Face Tag
exemplu: pentru a scrie xA, tastai x
∈A
HTML Literal Code
exemplu: pentru a face simbolul gradului, ,tastai °
Este prezentat un tabel ce conine simbolurile i codurile corespunztoare 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 conine HEAD i BODY
Pentru a ncepe o pagin HTML:
Tasteaz <html> pentru a ncepe partea HTML din documentul dumneavoastr

Lasai cteva spaii pentru crearea restului paginii dumneavoastr
Tastai </html>

Tag-ul HEAD
Seciunea head este locul unde vei defini titlul paginii tale, incluznd informaii
despre pagina ta, pentru motoarele de cutare precum Google, stabilete locaia paginii,
adaug stil foii tale i scrie script-urile.
Pentru a crea seciunea head:
Imediat dup deschiderea tag-ului html, tastai <head>.

Las cteva spaii pentru seciunea capului de pagin.
Tasteaz </head>.
Tag-ul BODY
Body documentului tu HTML include coninutul paginii tale de Web, care este,
partea pe care vizitatorii ti o vor vedea, inclusiv textul i elementele de grafic.
Pentru a crea cuprinsul:
Dup ultimul </head> tag, tasteaz <body>

Las cteva spaii pentru coninutul paginii tale de Web
Tasteaz</body>
Crearea Listelor i Tabelelor

Cum pot crea o list?
Acesta este modul prin care poi crea o list simpl:
1.
2.
3.
4.
5.
Tasteaz<ol> pentru o list ordonat sau <ul> pentru a ncepe o lista neordonat.
Tasteaz <li> pentru a ncepe primul item al listei.
Tasteaz textul care urmeaz s fie inclus n item.
Tasteaz</li> pentru a completa fiecare item al listei.
Continu acest proces introducnd cai mai muli itemi ai listei care sunt necesari
pentru a-i completa lista ordonat.Nu exist o limit a numrului de itemi pe care-i
poate avea o list.
6. Pentru a ncheia lista., introdu un sfrit </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 rnduri i coloane de celule. Ai
posibilitatea s introduci orice fel de coninut doreti n aceste celule: text, imagini, i chiar
alte tabele.
Acesta este modul n care putei crea un tabel simplu:
1.
2.
3.
4.
5.
6.
Tasteaz <table> tag.

Tasteaz <tr> pentru a marca nceputul primului rnd.
Tasteaz <td> pentru a marca nceputul celulei.
Tasteaz coninutul celulei.
Completeaz celula introducnd un tag de nchidere: </td>
Repet paii 3. pn la 5. pentru fiecare celula pe care doreti s o adugai
rndului. Cnd rndul dvs. este terminat, mut-te la urmtoarea linie i
introducei 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 paii 2. pn la 7. pentru fiecare rnd.
8. Dupa ce completezi numrul de rnduri dorit, tasteaz tag-ul </table> pentru a
termina tabelul.
Exemplu de tabel:
Frames

Ce sunt frames?
Cu frames, poi afia mai mult de un document HTML n aceeai fereastr de
browser.Fiecare document HTML se numete 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 folosete frames:
Poi vedea o linie vertical ce divide ecranul n dou pari. Cea din stnga este
o bar lateral n timp ce cea din dreapta este o list cu anunuri pentru o lecie de
zoologie. Acestea sunt dou documente separate HTML pe care, pn n acest

moment, ar trebui s fii capabil s le creezi singur, deci haide s ne concentrm pe

codul pe care urmeaz s-l foloseti pentru a pune toate acestea ntr-o pagin de
Web.
Tag-ul Frameset
Tag-ul <frameset> definete modul n care se poate mpri fereastra n frame-uri.
Fiecare frameset definete un set de rnduri / coloane. Valorile rndurilor / coloanelor indic
ct din suprafaa ecranului va fi ocupat de fiecare rnd / coloan.
Tag-ul frame
Tag-ul <frame> definete 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.
Reine c, dac doreti s previi un utilizator s redimensioneze un frame (prin
tragerea de cadru) adaug cuvintele noresize frame-ului pe care doreti s-l blochezi.
Mai mult, dup cum se poate observa n exemplul de mai sus, tag-ul <body> lipsete.
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) definete aspectul lor.
Ce este stilul unei foi?

Stilul unei foi este pur i simplu un fiier text care conine una sau mai multe reguli
care determin modul n care anumite elemente din pagina ta de Web trebuie s fie afiate.
Codul CSS se poate gsi ntr-un fiier separat i poi doar s link-ezi acest fiier ntr-o pagin
HTML, astfel nct s se modifice cu uurin aspectul su. Desigur, CSS ar putea fi scris doar
n interiorul paginii HTML, n cazul n care const n cteva linii de cod.

Care este structura Regulilor de Stil?

O regul de stil este alctuita dintr-un selector (care indic ce elemente vor fi
formatate), precum i o declaraie (care descrie formatarea care ar trebui s fie executat).
n declaraie 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 declaraii, "color: red" i "background: yellow". Prima
declaraie stabilete culoarea antetului (culoarea textului), n rou, iar al doilea set,
stabilete culoarea de fundal a antetului, n galben. n cazul n care vom aduga acest cod
CSS pentru o pagin HTML, ori de cte ori vom crea un antet utiliznd 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 declaraii, de exemplu font-family: Arial; (schimbarea fontului n
Arial).
Cum pot crea un Style Sheet Extern?

Stilul extern al foii, este un fiier CSS, ce conine codul CSS ca acela explicat n
exemplul de mai sus. Extensia fiierelor CSS este .css . Aceste fiiere 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 aduga acest cod HTML la pagina noastr, va ncrca stilurile definite n
fiierul mystyle.css" i apariia HTML nostru se va schimba cu uurin. i poi denumi
fiierele CSS oricum doreti. Aici, dup cum poi vedea, acesta este numit "mystyle.css" i
este situat n acelai folder n care se afl i fiierul nostru HTML.
Cum pot crea un Style Sheet Intern?

O foaie de stil intern ar trebui s fie utilizat atunci cnd un singur document are un
stil unic. Poi defini stiluri interne, n seciunea 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 conin cmpuri de formulare.
Cmpurile din formular sunt obiecte care permit vizitatorilor de a introduce informaii de
exemplu casete de text, meniuri derulante sau butoane radio. Cele mai comune utilizri 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 poi crea un formular simplu:
Cum pot crea un buton radio?

Butoanele radio sunt utilizate atunci cnd doreti ca utilizatorul s selecteze una
dintr-un numr limitat de opiuni i trebuie s aib o "valoare". Input-urile radio trebuie s
aib acelai nume, deoarece ele nu fac dect s-i dea utilizatorului o opiune posibil. Este
posibil s oferim mai multe opiuni 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 cnd vrei ca utilizatorul s selecteze una sau mai
multe opiuni dintr-un numr limitat de variante i permite utilizatorilor ti de a face mai
mult de o selecie 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 poi aduga
formularelor. Avantajul unui drop down menu, n comparaie cu radio buttons sau cu check
box, este acela ca ocup mai puin spaiu.
Aceasta este modalitatea prin care creezi un drop down menu simplu:
Multimedia
Cum pot aduga o imagine paginii mele de Web?
S presupunem c avem fiierul 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 afiat.
Codul, n forma sa cea mai simpl, este ca acesta:
<img src=cat.jpg>
Singurul impediment pentru ca acest cod sa funcioneze, este acela c avem o
imagine cu numele de cat.jpg, n acelai folder cu pagina noastr de HTML.
n cazul n care imaginea este ntr-un director diferit, tastm att calea, ct i numele
fiierului, de exemplu, daca l pstrm ntr-un folder separat, numit imagini, codul va fi:
<img src="images/cat.jpg"/>
Cum pot schimba mrimea unei imagini in pagina mea de Web?

Prin specificarea valorilor atributelor "nlime" i "lime", putem modifica

dimensiunea imaginii n pagina noastr de Web. Pentru a modifica aceste atribute, trebuie
doar sa le adaugi la codul tu <img> tag-ul, astfel:
<img src="cat.jpg" width="48" height="48" />
Acest atribut poate lua valori diferite, putnd 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 vzut 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> definete
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">
Observai c modul implicit pentru browser pentru a afia imaginea este n funcie
de dimensiunea sa iniial, 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?
Putei aduga diverse tipuri de date multimedia la pagina dvs. Web ntr-un mod
similar cu adugarea de imagini. n loc de a utiliza <img> tag-ul, care este utilizat numai
pentru imagini, putei utiliza tag-ul <object>, care este mai generic. Tot ce trebuie s facei
este s defini tipul de datelor multimedia pe care vrei s le incorporai.
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 fiier

audio s fie ataat, fiier de tip mpeg(mp3). Apoi, cu data = "yoursound.mp3" vom
transmite numele (adresa) fiierului care trebuie ataat.
Cum pot aduga fiiere 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 fiier

video s fie ataat, fiier de tip mpeg(mp3). Apoi, cu data = "test.mpg" vom transmite
numele (adresa) fiierului care trebuie ataat. De asemenea, se pot specifica nlimea i
limea cu care acesta s apar n pagina web.

Server-Side Scripting
(scripting din partea server-ului)
n aceast seciune, vom vedea cum putem crea pagini web dinamice,
capabile s se conecteze la bazele de date.
La sfritul acestei seciuni, vei 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 aduga orice coninut 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 conin componente interactive pentru utilizatori.
Cum funcioneaz Server Side Scripting-ul?
Atunci cnd un utilizator solicit o pagin web, serverul returneaz acest pagin, dar
dac pagina conine 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 rspund la query-urile utilizatorului sau a datelor transmise de la
form-uri HTML i poate accesa bazele de date, returnnd 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 obinuit HTML,
PHP este numai server-side, ceea ce nseamn c nu poate interaciona direct cu computerul

utilizatorului. Un script PHP nu este trimis direct la un client de ctre server; n schimb, este
analizat de modulul de PHP pe server. Acesta funcioneaz mn n mn 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 cutarea seciunilor de PHP, pe care va ncerca s le execute.
Cum funcioneaz PHP?
PHP permite serverului web s fac mult mai mult dect 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 uura crearea de pagini web
dinamice interactive. HTML poate crea pagini foarte bine formatate. Cu un adaos de PHP si
MySQL avei posibilitatea s culegei date de la utilizatorii dvs., i face multe lucruri pe care
HTML singur nu le poate susine. Frumuseea 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 "?>"
Cnd un vizitator deschide o pagin, serverul efectueaz procesele de cod PHP i
apoi trimite datele HTML de ieire (nu codul PHP propriu-zis) n browser-ul vizitatorului.

PHP i baze de date

Una din caracteristicile definitorii ale PHP este uurina cu care v putei conecta la
baze de date ct i de a le manipula. PHP poate interaciona cu baze de date pentru a stoca
informaii de la utilizator, ct i s preia informaii care pot fi afiate pentru utilizator. PHP
pune n aplicare funcii 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 informaii care este format din
nregistrrile aferente. Aceasta este aranjat ntr-un mod care face ct mai uoar obinerea
de informaii. Fiecare nregistrare din baza de date este compus dintr-un set de cmpuri,
care conin elementele individuale de informaii pentru un anumit element. Baza de date
este stocat n tabele. Fiecare tabel este identificat printr-un nume (de exemplu, "Pontaj"
sau "Cri").
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 definete metodele utilizate pentru a crea i
manipula baze de date relaionale pe toate platformele majore. SQL este un limbaj standard
pentru a face interogri (query-uri) interactive pentru manipularea (stocarea, extragerea,
actualizarea, tergerea) unei baze de date. Interogrile iau forma unei limbi de comand
care v permite s selectai, inserai, updatai, s aflai locaia unor anumite date, i aa 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 coninut. n scopul de a pstra toate datele organizate i pentru o afiare 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 informaii specifice pentru aplicaia
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 (librrie) i const n
tabele ordonate logic (ordonare de tip tree).
Exist mai multe moduri n care putei crea o nou baz de date MySQL. Cel mai
rapid i mai mai uor este cu ajutorul instrumentului phpMyAdmin. Imaginea de mai jos
arat mai pe larg un tabel MySQL.
Fiecare tabel cuprinde rnduri i coloane. Coloanele precizeaz tipul de date. Datele
in sine sunt stocate pe rnduri. Numele acestui tabel este book (carte) i este folosit pentru
a stoca informaii despre cri.
Informaiile despre cri stocate n baza noastr de date sunt afiate mai jos:
Interogri (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 legtura cu baza de date, gsete tabelul care
conine datele dorite i modific nregistrrile necesare.
De exemplu, urmtoarea declaraie SQL va selecta toate nregistrrile 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 posibiliti pe care PHP le ofer.
HTML, PHP i baze de date
Un utilizator poate interaciona cu un site web care afieaz form-uri cu ajutorul

web browser-ului lui / ei. Atunci cnd utilizatorul apas pe butonul submit a form-ului, o
cerere poate fi trimis la serverul care conine baze de date i interogri (query-uri) pot fi
fcute spre tabelele unei baze de date. Rezultatele care sunt returnate de server pot fi
afiate pe pagina web. Toate aceste pagini web pot fi scrise ntr-o combinaie de HTML, PHP
i SQL.

Content Management Systems

(sisteme de management a coninutului)
La sfritul acestei seciuni vei putea:

defini termenul "Content Management System"
crea un curs cu Moodle
s v inregistrai ntr-un curs Moodle
s adugai coninut cursului dvs. Moodle
s creai un forum n cursul dvs. Moodle
s creai 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 informaii. Pentru a face posibil
afiarea acestor informaii (sau "coninut"), pe o varietate de computere diferite, oamenii au
inventat un limbaj, numit HTML, care spune fiecrui tip de computer cum s afieze acest
coninut, fapt foarte folositor.
Din pcate, din perspectiva cuiva care vrea s fac schimb de informaii,
accesibilitatea acestuia la postarea acestor informaii pe Internet este limitat de
cunotinele sale de HTML.
Content Management Systems au fost dezvoltate pentru a rezolva aceast dilem.
Un CMS v ajut s creai i s stocai coninut ntr-un depozit comun, fr a fi nevoie s
cunoatei HTML sau alte limbaje.
Ce este Moodle?
Moodle este un acronim pentru Modular Object-Oriented Dynamic Learning
Environment. Este un sistem de gestionare a coninutului online, care este proiectat pentru
a crea posibiliti de interaciune ntre profesori i studeni/elevi.
S ncepem prezentarea Moodle cu o analogie Lego - ce este acesta, principalele sale
caracteristici, gndirea din spatele su i unele elemente ale lumii Moodle.
Cum s descrcai i s instalai Moodle pe serverul dvs. web

Moodle este un software gratuit. Acest lucru nseamn c toat lumea poate
descrca un pachet arhivat Moodle de pe http://download.moodle.org/. Dup aceea, putei
s-l instalai pe serverul dvs. web i s-l folosii.
Dac ntmpinai probleme, putei s accesai
http://docs.moodle.org/en/Installing_Moodle/.

Noiuni de baz
Cum se poate crea un curs cu Moodle?
Pasul 1. Presupunnd c v-ai conectat cu succes la site, apsai pe Adugai un nou curs.
Figura 1.
Pasul 2. Acum, putei edita setrile cursului pe care vrei s l creai. Scriei un nume
complet pentru cursul dvs., ct i unul prescurtat. De asemenea, scriei un scurt cuprins al
cursului.
Figura 2.

Pasul 3. Modificai formatul pentru cursul dvs. la formatul Topics. Exist multe opiuni dup
cum putei vedea, dar cele mai frecvent utilizate sunt Weekly i Topics. Dac nu suntei
sigur care ar fi opiunea potrivit pentru dvs., apsai pe butonul Help (semnul de ntrebare
de culoare galben) din stnga pentru o descriere.
Figura 3.
Pasul 4. Acum, uitai-v la blocul de Enrolment (nscriere). Ai vzut c opiunea 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. Putei face cursul, de
asemenea, s nu funcioneze pe baz de nscriere (se pot nscrie studeni manual de
dumneavoastr mai trziu) sau s funcioneze pe baz de nscriere doar pentru o durat
limitat de timp. Dar nu facei nici o schimbare acum. Amintii-v c putei reveni mai trziu.
Figura 4.

Pasul 5. Apsai pe Salvai modificrile. (S nu v fie fric s experimentai singur cu orice

opiune care ar putea prea de ajutor).
Figura 5.
Pasul 6. Pe ecranul urmtor, avei posibilitatea s atribuii roluri n cursul dumneavoastr.

Observai c nc nu exist profesori pentru curs. Apsai pe opiunea Teacher din coloana
Roles.
Figura 6.

Pasul 7. Selectai-v din lista de poteniali utilizatori (n cazul dumneavoastr lista va fi mult
mai mare i ai putea dori s utilizai butonul de cutare de mai jos), apsai pe Add i apoi
apsai pe Assign roles in Course.
Figura 7a.
Figura 7b.

Pasul 8. Acum modelele anterioare s-au modificat. Putei observa prezena unui nou
profesor, dumneavoastr!!! Apsai pe Click here to enter your course (Fig. 8).
Figura 8.
Pasul 9. Pagina de start a cursului va aprea pe ecran (Fig. 9).
Figura 9.

Cum se nregistreaz studenii manual n cursul Moodle?

Pasul 1. Apsai pe Settings din meniul Administration situat n stnga paginii de start (Fig.
9).
Pasul 2. Acum suntei napoi la ecranul Settings (Fig. 2). Putei modifica din nou dac dorii
anumite opiuni.
Pasul 3. n meniul Enrolments, modificai cursul n non enrollable (Fig. 4). Apsai pe Save
changes (Fig. 5).
Pasul 4. Apsai opiunea Student din coloana Roles (Fig. 6).
Pasul 5. Gsii studentul/studenii pe care dorii s i inscriei n curs i apsai Add. Apoi
apsai pe Assign roles in Course (Fig. 10).
Figura 10a.

Figura 10b.
Pasul 6. Acum putei vedea studenii nscrii la curs (Fig. 11). Apsai pe Click here to enter
your course.
Figura 11.
Pasul 7. Apsai pe Participants din meniul People aflat n partea stng a pagini de
start. Acum i putei vedea pe toi cei ce particip la curs (Fig. 12).

Figura 12a.
Figura 12b.

Cum se poate edita cursul Moodle?

Pasul 1. Apsai pe Turn editing on aflat n colul din dreapta sus a paginii de start. Vor
aprea diverse iconie pe ecran, ns nu intrai n panic deoarece vei avea ocazia s vedei
exact ce funcie are fiecare dintre ele (Fig. 13).
Figura 13a.
Figura 13b.
Pasul 2. Apsai pe iconia Edit summary aflat chiar sub tabul Topic Outline. Scriei
Welcome to the ODL course., aplicai funcia bold i apsai Save changes (Fig. 14).

Figura 14.
Pasul 3. Textul inserat apare sub forma unei etichete. Acum apsai pe iconia Move right
aflat lng News forum. Hyperlinkul News forum se muta puin n dreapta (Fig. 15).
Figura 15a.
Figura 15b.

Pasul 4. Apsai iconia Move de lang News forum. Apare un set de mici sloturi. Putei
muta News forum pe slotul preferat. Mutai-l pe cel de-al doilea topic. News forum este
mutat (Fig. 16).
Figura 16a.
Figura 16b.
Pasul 5. Apsai iconia Delete situat lng News forum. Un mesaj de atenionare apare n
care suntei rugat s confirmai aciunea anterioar. Desigur, este decizia dumneavoastr,
dar pentru moment apsai No (Fig. 17).

Figura 17.
Pasul 6. Apsai pe iconia Hide situat lng News forum. News forum devine gri (Fig. 18).
Asta nseamn c acum News forum nu poate fi accesat de studenii nscrii n curs. Aceast
funcie este folositoare n cazul n care nu vrei s prezentai anumite resurse studenilor.
Figura 18.
Pasul 7. Apsai pe butonul Turn editing off din colul din dreapta sus i ntoarcei-v la
pagina de start.
Adugarea Coninutului
Cum poate fi adaugat un fisier in cursul Moodle?
Pasul 1. Apsai butonul Turn editing on din colul din dreapta sus al paginii de start (Fig.
19).
Figura 19.
Pasul 2. Din meniul drop-down Add a resource, selectai Link to a file or web site (Fig. 20).

Figura 20.
Pasul 3. Inserai un nume i o scurt descriere a fiierului pe care dorii s l adugai. n
blocul Link to a file or web site, apsai Choose or upload a file (Fig. 21).
Figura 21.
Pasul 4. Apsai Upload a file (Fig. 22).

Figura 22.
Pasul 5. Apsai Browse apoi gsii fiierul pe care dorii s l adugai, ca i cum ar fi fost un
fiier ataat unui e-mail. Apsai Upload this file (Fig. 23).
Figura 23.
Pasul 6. Apare un mesaj care v ntiineaz c fiierul a fost uploadat cu succes. Apsai
Choose din coloana Action de lang fiier (Fig. 24).

Figura 24.
Pasul 7. n blocul Window, din meniul drop-down, selectai New window. Apsai Save and
return to course (Fig. 25).
Figura 25.
Cum poate fi adugat un link n cursul Moodle?
Pasul 1. Apsai butonul Turn editing on din colul din dreapta sus a paginii de start (Fig. 19).
Pasul 2. Din meniul drop-down Add a resource, selectai Link to a file or web site (Fig. 20).
Pasul 3. Inserai un nume i o scurt descriere a paginii web creia dorii s i creeai un link
ctre curs. n blocul Link to a file or web site, inserai URL-ul paginii web (Fig. 26).

Figure 26.
Cum poate fi adaugat propria pagin web n cursul Moodle?
Pasul 1. Apsai butonul Turn editing on din colul din dreapta sus a paginii de start (Fig. 19).
Pasul 2. Din meniul drop-down Add a resource, selectai Compose a web page (Fig. 27).
Figura 27.
Pasul 3. Inserai un nume i o scurt descriere a paginii web pe care dorii s o adugai (Fig.
28).

Figura 28.
Pasul 4. Creeai propria dumneavoastr pagin web. Dup cum putei observa putei utiliza
o mulime de opiuni, precum schimbarea fontului sau culorii textului, adugarea unei
imagini, unui link, unui tabel etc. (Fig. 29).
Figura 29.

Cum s lucrai cu fisiere i dosare.

Pasul 1. Apsai pe Files din blocul Administration aflat n stnga 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 csuele din stnga fiierelor pe care vrei s
le mui 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 destinaie 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
aduga 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 cmp (thread) este creat.Se apas pe subiectul unei discui (discussion) pentru a
se vedea toate postrile acelei discuii(Fig. 39). Se exploreaz toate opiunile posibile.
Figura 39a.

Figura 39b.
How to create a wiki with Moodle?

Pasul 1. Se apas pe butonul Turn editing on din colul 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 rspuns. 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 , adaugnd contribuia ei/lui i apoi
salveaz schimbrile(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 ferii s experimentai pn nelegei
modul de funcionare.

Figura 45.

Crearea Execiiilor
In n aceast seciune se va arta cum se pot crea exerciii interactive
folosind XML si Flash.
La sfritul acestei seciuni vei tii cum s
structurai informaia folosind XML
scriei cod simplu n Flash folosind
Actionscript
combinai XML cu Flash
creai exerciii interactive
Nivel: Avansat
Timp estimat: 2h

Introducere n XML
Ce este XML?
Definiia 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 afiarea datelor, n
timp ce XML este pentru portarea informaiei. Deci XML Nu este un nlocuitor pentru HTML.
Cum arat un document XML?
Mai jos este prezentat un document XML, structurat n aa fel nct s reprezinte un
catalog de CD-uri care conine descrierea a dou CD-uri cu muzic. A se observa ca tagurile
(CD, CATALOG, etc) au fost definite de catre noi, n aa fel nct 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 fiier 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, orict 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 acelai tip de litere:
<message>Acesta este incorect</Message>
<message>Acesta este corect</message>
3. Tagurile XML trebuie s fie ncapsulate corespunztor
n HTML, pot fi observate taguri ncapsulate necorespunztor:
This text is bold and italic
n XML, toate elementele trebuie s ncapsulate corespunztor unul n cellat:

This text is bold and italic
4. Documentele XML trebuie sa aiba un element rdcin
Documentele XML trebuie s conin un element care este printele tuturor
celorlate elemente. Acesta se numete element rdcin (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. Urmrete 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 informaie 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:
Urmrete acest document XML: catalog.xml
Este un document XML ce conine informai pentru un catalog de CD-uri, avnd date pentru
doua CD-uri.
Urmrete 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 :
Fiierul este la fel precum catalog.xml, singura diferent fiind linia care leaga fiierul XML de
CSS, astefel formatnd fiierul 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 folosete grafic vectorial, astfel nct graficele create in el pot fi scalate fara
s piard din calitate.
Flash nu necesit cunotinte de programare i este uor de nvtat.
Filmele Flash au extensia .swf.

Cum port aduga filme flash n pagina mea?
n seciunea HTML, Integrarea Multimedia, vom arta cum se pot aduga fiiere video n
pagina web. Acelai lucru se aplic cand trebuie adugat 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 cumprat 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 mic?

1. Se creaz un fiier 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. Selectm frame-ul 30 din timeline i prin click-dreapta adugam frame-uri.
Astfel, poza dinamica pe care am creat-o va avea o durata de 30 de frame-uri.

4. Selectm orice frame din timeline i intrm in Properties Panel i dintre parametri
alegem micarea.
5. Selectm frame-ul 30 prin dublu click dreapta i l convertim in cadru-cheie.
6. Urmnd aceeai procedura, adugam un cadru-cheie in frame-ul 2, frame-ul 15 i

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

poziiei iniiale. Apoi selectm frame-ul 15 i mutam mingea mai departe in sus. Apoi
selectm frame-ul 29 i facem ceea ce am fcut i in frame-ul 2.Astfel am terminat
animaia mingii.
8. In scopul de a face ca micarea obiectului s para cat mai reala, putem aduga o
umbra care va urmri micarea sa. Astfel, cream un nou strat sub stratul creat
pentru minge.

9. Adugam 30 de frame-uri exact cum am fcut pentru minge i cu Oval Tool cream o
elipsa pe care o coloram gri.
10. Selectm din Properties Panel parametrul dintre forma, la fel cum am ales micarea
la paragraful 4.Parametrul Ease va avea valoarea -100. Timeline-ul ar trebui s arate
astfel:
11. Adugam un cadru-cheie in frame-ul 15 i micoram mrimea umbrei utiliznd Free

Transform Tool.
12. Acum putem vizualiza lucrarea noastr apsnd Ctrl+Enter i o salvam cu o extensie
Flash (.swf) movie file.

Exerciii interactive
Ce este un exerciiu interactiv?
Un exerciiu interactiv este un exerciiu care presupune participarea utilizatorului, astfel
fcnd procesul de invtare mai distractiv, interesant i eficient. Iat un exemplu al unui test
cu alegere multipla:
Cum putem s cream un exerciiu interactiv?

Pasul 1:Cream un nou document
a. Alegem File > New.
b. In caseta dialog din noul document, selectm Flash File (ActionScript 2.0) i apoi dam click
pe OK.
Pasul 2:Setrile documentului
Click-dreapta pe scena, selectm Document Properties, apoi apare caseta dialog din
Document Properties. Ea afieaz scena curenta la mrimea de 550 x 400 pixeli i culoarea
de pe fundal a swatch-ului e setata alba. Putei s schimbai mrimea i culoarea scenei
daca dorii.

Pasul 3:Importarea unei imagini in etapa

Alegei File > Import > Import to Stage, i apoi selectai imagine ape care o dorii. De
asemenea, putei s inserai imaginea prin combinaia de taste Ctrl+R.
Pasul 4: Adugarea de variante multiple de ntrebare la etapa
a. Selectai Text tool (T).
b. In Property inspector (Window > Properties), selectai Static Text type pentru a specifica
tipul cmpului text i apoi punei ntrebarea Care este regizorul filmului Vertigo?.De
asemenea, putei seta mrimea fontului i culoarea textului.
Pasul 5:Adugarea componentei ComboBox
a. Selectai Window > Components.
b. Dublu-click pe ComboBox in Components panel.

c. Selectai componentele din Stage i numii, de exemplu, ca i csua din properties panel.
Pasul 6:Adugarea de opiuni de rspunsuri:

a. Selectai Window > Component Inspector. In Component Inspector,dai click pe data, apoi
apare Value dialog box.
b. Click + pentru a aduga opiuni de rspunsuri i apoi nlocuii valoarea implicita cu

urmtoarele opiuni de rspuns: Alfred Hitchcock, Michael Curtiz, Billy Wilder, John Huston.
Apoi, dai click pe OK.
c. In Component Inspector, dai click pe etichete i apoi vor aprea valorile casetei dialog.
Urmai aceeai pai ca mai nainte pentru a aduga valorile prin butonul+ .
Step 7 Adugarea butonului de trimitere:

a. Selectai Window > Common Libraries > Buttons, apoi Libraries buttons dialog pop up.
b. Alegei un buton i glisai-l in etapa.
c. Dublu-click pe buton, i apoi redenumii butonul:Submit. De asemenea, putei seta

mrimea butonului din Propertites panel.
Pasul 8 Inserarea unui cadru-cheie i tergerea elementelor cadrului
Pasul 9 In frame-ul cheie 2, inserai o caseta text dinamica
a. Selectai Text tool (T).

b. In Property inspector (Window > Properties), selectai tipul textului dinamic.
c. Desenai o csua text dreptunghiulara. Acesta este aria feedback-ului atunci cnd cei care
fac testul aleg rspunsul corect sau greit.
d. Selectai csua text dreptunghiulara i inserai variabila jg in Variable box din Properties
panel.

Pasul 10 In frame-ul cheie 2, adugai butonul Back

Urmai aceeai procedura ca la pasul 8 pentru a aduga un buton, pe care l vei
redenumiBack.
Pasul 11 Deschidei Action panel i adugai scenarii
a. Adugai script-uri in butonul Back. Dai click pe el i adugai urmtoarele script-uri:
on (release) { gotoAndStop(1); jg = ''; }
b. Adugai script-uri in butonul Submit. Dai click pe butonul Submit i inserai urmtoarele
script-uri:
on (press) { if (box.getValue() == 'Alfred Hitchcock') { jg = 'Felicitari'; } if (box.getValue() ==
'Michael Curtiz') { jg = ' Rspuns greit!Va rugam, selectai din nou!'; } if (box.getValue() ==
'Billy Wilder') { jg = ' Rspuns greit!Va rugam, selectai din nou!'; } if (box.getValue() == 'John
Huston') { jg = ' Rspuns greit!Va rugam, selectai din nou!'; } gotoAndStop(2); }
c. Adugai script-uri in frame-ul 1.Dati click pe frame-ul 1 i inserai urmtoarele scrituri:stop();

Forums - Wikis Blogs

In aceast seciune, vom introduce trei tipuri de aplicaii web utilizate pe
scara larga in internet
La sfritul acestei seciuni, vei fi capabil sa:
explici care este fiecare aplicaie
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 discuii online. Din punct
de vedere tehnologic, forumurile sunt aplicaii web care gestioneaz coninutul
generat de utilizator. Participanii la un forum pot crea legturi 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 conine 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 conine detaliile utilizatorului
i data cnd a fost trimis. Posturile sunt coninute in subiecte de discutie(threaduri), unde
apar ca i csue una dup alta. Primul post ncepe subiectul. Acesta poate fi denumit postul
original. Posturile insiruite din fir trebuie s continue discuiile despre acel post sau s
rspund altor replici.
Un subiect de discutie este o colecie de posturi, de obicei afiate de la primul la ultimul, dei
opiunea pentru o vizualizare a subiectului poate fi valabila.(se vizualizeaz aplicaia
structurii logice de rspunsuri nainte de ordinea cronologica).Un fir este definit de un titlu i
de o descriere adiionala care poate s rezume discuia destinata.

Subiectele care sunt importante dar primesc rar posturi sunt stickyed(sau, in anumite
software-uri, pinned).Un subiect sticky va aprea ntotdeauna in fata subiectelor normale,
de multe ori in propria lor seciune.
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 nenregistrat al siteului este cunoscut ca invitat sau
vizitator. Invitaii acorda acces tuturor funciilor care nu cer bazei de
date modificri.
Moderatorii (mod)sunt utilizatori ai forumului care acorda acces posturilor i firelor in
scopul moderrii discuiilor si, de asemenea, al pstrrii forumului curat.Totodat,
moderatorii rspund la problemele utilizatorilor legate de forum, la ntrebri generale,
precum i la reclamaii. Privilegiile comune ale moderatorilor includ:tergeri, fuziuni, mutri
i mpriri ale posturilor i ale firelor;nchiderea, redenumirea, stickying threadsurilor;interzicerea, permiterea accesului,avertizarea membrilor;sau adugarea, 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 seciuni i sub-seciuni, precum i s interpreteze operaiile bazei de
date(database backup, etc).Administratorii se comporta adesea ca moderatori. De
asemenea, administratorii fac anunuri pe forum sau schimba aspectul(skin-ul) forumului.
Cum putem s cream un forum?
Sunt variate pachetele de forumuri pe internet pe care le putei descarc.

Majoritatea implementrilor forumului sunt Free i Open Source Software (F/OSS),
dar sunt de asemenea i unele aplicaii valabile foarte bune dar restricionate.
Forumurile trebuie s nglobeze i posturile undeva. Majoritatea sistemelor folosesc
o baza de date pentru a realiza acest lucru, altele, in schimb, folosesc fiiere text
simple. Tipul de sistem de depozit pe care vrei s l alegei aici depinde de ceea ce
este valabil pe serverul dumneavoastr. Vom vedea acum un exemplu al forumului
phpBB , cel mai des folosit forum de soluii. Acesta are un panou de administrare i
un proces de instalare uor de realizat, ceea ce va permite s avei un forum creat in
cteva minute.

Decomprimai arhiva phpBB3 intr-un director local al sistemului vostru.

ncrcai fiierele coninute in aceasta arhiva(reinnd directorul sursa) intrun director web accesibil pe serverul vostru sau pe contul gzduit.
Folosind browser-ul web, vizitai locaia pe care ai plasat-o phpBB3 cu adresa
pentru instalare install/index.php.
Dai click pe INSTALL tab, urmai paii i completai toate Informaiile 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,

permind crearea mai uoara i editarea oricrui numr 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 comunitii 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 cunotine. 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 menionata ca o pagina wiki,
in timp de ntreaga colecie de pagini, care este de obicei interconectata prin hyperlinkuri, este the wiki.O wiki este in mod esenial o baza de date pentru crearea i
cutarea de informaii.
Exemplu de pagina wiki:

Cum funcioneaz wikis?
Un wiki invita toi 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,
fcnd crearea paginii link aproape uoara i artnd 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 desfurare, care schimba
constant peisajul site-ului web. O caracteristica definitorie a tehnologiei wiki este uurina cu
care paginile pot fi create i updatate. In mod general, nu se fac revizuiri nainte ca
modificrile s fie acceptate. Multe wikis sunt deschise degradrii de ctre publicul general
fr a li se cere s se nregistreze ca utilizatori de conturi. Uneori, logarea pentru o sesiune
este recomandata, pentru crearea unei semnturi wiki cookie pentru semnarea modificrii in
mod automat .Oricum, multe editri pot fi fcute in timp real i pot aprea 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 putei crea un Wiki?
Sunt multe pachetele de software wiki, care va permit crearea uoara a unui wiki.
Unele dintre ele, ca DokuWiki, funcioneaz pe fiiere text clare si, astfel, nu necesita
nici o baza de date. Au o sintaxa simpla, dar puternica, ceea ce face ca fiierele de
date s poat fi citite in afara wiki. Instalarea DokuWiki este foarte simpla-in general
tine doar de despachetarea i setarea permisiunilor.
Descrcai cea mai noua versiune din Download Page.

Despachetai distribuia arhivei i uploadati/copiai fiierele in spaiul web.
Deschidei install.php in browser i urmai instruciunile.

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 nregistrri regulate
de comentarii, descrieri de evenimente sau alte materiale grafice
sau video. nregistrrile sunt afiate in ordine cronologica inversa.
Multe bloguri furnizeaz comentarii sau tiri ale unui subiect
particular;altele au funcia 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 postri 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 ntreinerea weblog-urilor. Ca specialitate a
sistemelor de management al coninutului, aplicaiile weblog susin editarea i
publicarea de potari i comentarii, cu funcii speciale de gestionare a imaginii,
sindicalizare de web, precum i moderarea de posturi i comentarii. Multe aplicaii

weblog pot fi descrcate i instalate pe sistemele de utilizator. Unele dintre acestea
sunt furnizate in conformitate cu free-software i licene open-spurce, permindu-le
s fie utilizate, modificate i redistribuite in mod liber. Altele sunt reprezentate de
software-ul proprietar care trebuie s fie liceniat.

Anexa A Tabel de Simboluri
Simboluri operaionale
NUME
SIMBOL
COD
NUMERIC
FONT FACE="Symbol" Cod
COD
LITERAL
Oricare
∀
"
∀
Exist
∃
$
∃
Negaie
¬
Ø
¬
∧
Ù
&and;
Sau
∨
Ú
&or;
Intersecie
∩
Ç
∩
Uniune
∪
È
∪
Plus sau minus
±
±
±
nmulire
×
´
×
Derivat parial
∂
¶
∂
Punct Solid
∙
·
Nu exist
Punct de Mijloc
·
×
·
nmulit ncercuit
⊗
Ä
&otimes;
Plus ncercuit
⊕
Å
&oplus;
mprire
÷
¸
÷
Produs
∏
Õ
∏
Sum
∑
å
∑
Radical
√
Ö
√
Integral
∫
Nu exist
∫

Simboluri Relaionale
NUME
SIMBOL
COD
NUMERIC
COD
LITERAL
Conine elementul
∍
'
Nu exist
Aparine
∈
Î
∈
Nu aparine
∉
Ï
∉
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;
Mulimea vid
∅
Æ
∅
Include
⊃
É
⊃
Include egal
⊇
Ê
&supe;
Nu este inclus
⊄
Ë
&nsub;
Inclus
⊂
Ì
⊂
Inclus egal
⊆
Í
&sube;

Sgei i paranteze
NUME
SIMBOL
COD
NUMERIC
COD
LITERAL
Parantez stnga
[
[
Nu exist
Parantez dreapta
]
]
Nu exist
Parantez unghiular stnga
None
<
Nu exist
Parantez unghiular dreapta
None
>
Nu exist
Acolad stnga
{
{
Nu exist
Acolad dreapta
}
}
Nu exist
Sgeat dubl
↔
«
↔
Sgeat stnga
←
¬
←
Sgeat sus
↑

↑
Sgeat dreapt
→
®
→
Sgeat jos
↓
¯
↓
Sgeat dubl mare
⇔
Û
⇔
Sgeat dubl stnga
⇐
Ü
⇐
Sgeat dubl sus
⇑
Ý
&uArr;
Sgeat dubl dreapt
⇒
Þ
⇒
Sgeat dubl jos
⇓
ß
&dArr;
Puncte de suspensie
…
¼
…
Ghilimele stnga
«
Nu exist
«
Ghilimele dreapta
»
Nu exist
»

Simboluri greceti
NOT: Doar literele mici sunt afiate. Pentru a obine majuscule folosii caracterul
echivalent cu majuscule.
NUME
SIMBOL
COD
NUMERIC
COD
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
NUME
SIMBOL
Spaiu
COD
NUMERIC
COD
LITERAL
None
 

Diez
None
#
Nu exist
Procent
%
%
Nu exist
Ampersand
&
&
&
Apostrof
′
¢
′
Apostrof dublu
″
²
″
Citat
"
None
²
"
Aadar
∴
\
&there4;
Bar sus
None
`
Nu exist
Infinit
∞
¥
∞
Grad
°
°
°
Liniu de
desprire
None
¾
Nu exist
Aleph
ℵ
À
&alefsym;
Unghi
∠
Ð
&ang;
Nabla
∇
Ñ
∇
Jumtate
½
Nu exist
½
Semn Cent
¢
Nu exist
¢
Semn
nregistrat
®
Ò
®
Semn Copyright
©
Ó
©
Semn
Trademark

Ô
™

Curs BWD Ro-Bazele Web-Design

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs BWD Ro-Bazele Web-Design

Încărcat de

Drepturi de autor:

Formate disponibile

MENUET Mobile E- Novative Use of

MENUET Mobile E- Novative Use of

Despre acest curs

MENUET Mobile E- Novative Use of

MENUET Mobile E- Novative Use of

Dedesupt sunt cteva ntrebari, cu rspunsuri, referitoare la nite aspecte de baza

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

Ce este un browser web?

Un browser web este o aplicaie soft care permite unui

MENUET Mobile E- Novative Use of

Un hyperlink, descrie o referina care poate fi accesata direct din

Hypertext (vine de la "more than just" - mai mult dect text)

MENUET Mobile E- Novative Use of

Tehnologii de dezvoltare web

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

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

MENUET Mobile E- Novative Use of

Edita dinamic, schimba sau aduga noi elemente

Prelucrarea datelor cu SQL

MENUET Mobile E- Novative Use of

Dezvoltarea paginilor Web

Ce este o unealta WYSIWYG ?

MENUET Mobile E- Novative Use of

Ce este un editor de web-site-uri?

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

MENUET Mobile E- Novative Use of

MENUET Mobile E- Novative Use of

MENUET Mobile E- Novative Use of

Ce este o pagin HTML?

MENUET Mobile E- Novative Use of

Cum arat codul HTML?

MENUET Mobile E- Novative Use of

MENUET Mobile E- Novative Use of

Cum pot schimba stilul in text?

Cum pot folosi un heading?

MENUET Mobile E- Novative Use of

HTML markup solicitat

<H1> napoi n zi</H1>

Adevrul trebuie zis

<H6>Adevrul trebuie zis</H6>

Cum pot decora textul?

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

Putei de asemenea s schimbai mrimea fontului. Facei acest lucru folosind

<font size="1">Sngele eroilor</font> Sngele eroilor

i n sfrit,putei schimba culoarea textului, folosind atributul pentru culoare

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

MENUET Mobile E- Novative Use of

Paragrafe i linia nou

HTML markup solicitat

Ultima linie din paragraf.

Ultima linie din paragraf.

Prima linie dintr-un nou paragraf.

Cum pot aduga Caractere speciale?

Exist mai multe moduri de a aduga simboluri pentru paginile dumneavoastr.

HTML Cod Numeric

MENUET Mobile E- Novative Use of

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:

Pentru a ncepe o pagin HTML: