MENUET Course Basics of 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
MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010
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 <H1> napoi n zi</H1> <H3>Tornada sufletelor</H3> <H6>Adevrul trebuie zis</H6>
napoi n zi
Tornada sufletelor
Adevrul trebuie zis
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 Ultima linie din paragraf. Prima linie dintr-un nou paragraf. O linie din text. Pe o linie nou.
HTML markup solicitat

Ultima linie din paragraf. Prima linie dintr-un paragraf 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.
Pasul 4. n blocul Window, din meniul drop-down, selectai New window. Apsai Save and return to course (Fig. 25). 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.
Pasul 5. n blocul Window, din meniul drop-down, selectai New window. Apsai Save and return to course (Fig. 25).
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
COD NUMERIC ∀ ∃ ¬ ∧ ∨ ∩ ∪ ± × ∂ ∙ · ⊗ ⊕ ÷ ∏ ∑ √ ∫ COD LITERAL
NUME
SIMBOL
FONT FACE="Symbol" Cod " $ Ø Ù Ú Ç È ± ´ ¶ · × Ä Å ¸ Õ å Ö
Oricare Exist Negaie i Sau Intersecie Uniune Plus sau minus nmulire Derivat parial Punct Solid Punct de Mijloc nmulit ncercuit Plus ncercuit mprire Produs Sum Radical Integral
∀ ∃ ¬ &and; &or; ∩ ∪ ± × ∂ Nu exist · &otimes; &oplus; ÷ ∏ ∑ √ ∫
Nu exist
Simboluri Relaionale
NUME SIMBOL COD NUMERIC ∍ ∈ ∉ < > ≅ ⊥ | FONT FACE="Symbol" Cod ' Î Ï COD LITERAL
Conine elementul Aparine Nu aparine Mai mic Mai mare Izomorfism Perpendicular Bar vertical Linie vertical Mai mic egal Mai mare egal Diferit Echivalent cu Aproximativ Similar cu Mulimea vid Include Include egal Nu este inclus Inclus Inclus egal
< >
Nu exist ∈ ∉ < > &cong; &perp; Nu exist Nu exist ≤ ≥ ≠ &equiv; ≈ &sim; ∅ ⊃ &supe; &nsub; ⊂ &sube;
Nu exist Nu exist
@ ^ | ½ £ ³ ¹ º » ~ Æ É Ê Ë Ì Í
None
≤ ≥ ≠ ≡ ≈ ∼ ∅ ⊃ ⊇ ⊄ ⊂ ⊆
Sgei i paranteze
NUME SIMBOL COD NUMERIC [ ] FONT FACE="Symbol" Cod [ ] < > { } « ¬ ® ¯ Û Ü Ý Þ ß ¼ COD LITERAL
Parantez stnga Parantez dreapta Parantez unghiular stnga Parantez unghiular dreapta Acolad stnga Acolad dreapta Sgeat dubl Sgeat stnga Sgeat sus Sgeat dreapt Sgeat jos Sgeat dubl mare Sgeat dubl stnga Sgeat dubl sus Sgeat dubl dreapt Sgeat dubl jos Puncte de suspensie Ghilimele stnga Ghilimele dreapta
Nu exist Nu exist Nu exist Nu exist Nu exist Nu exist ↔ ← ↑ → ↓ ⇔ ⇐ &uArr; ⇒ &dArr; … « »
None None
{ } ↔ ← ↑ → ↓ ⇔ ⇐ ⇑ ⇒ ⇓ … « »
Nu exist Nu exist
Simboluri greceti NOT: Doar literele mici sunt afiate. Pentru a obine majuscule folosii caracterul echivalent cu majuscule.
NUME SIMBOL COD NUMERIC α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω FONT FACE="Symbol" Cod a b g d e z h q i k l m n x o p r s t u j c y w COD LITERAL
alpha Beta gamma Delta epsilon Zeta Eta Theta Iota kappa lambda Mu Nu Xi omicron Pi Rho sigma Tau upsilon Phi Chi Psi omega
α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω
Simboluri Diverse
NUME SIMBOL COD NUMERIC FONT FACE="Symbol" Cod # % & ¢ ² ² \ ` ¥ ° ¾ À Ð Ñ COD LITERAL
Spaiu Diez Procent Ampersand Apostrof Apostrof dublu Citat Aadar Bar sus Infinit Grad Liniu de desprire Aleph Unghi Nabla Jumtate Semn Cent Semn nregistrat Semn Copyright Semn Trademark "
None None
% & ′ ″
Nu exist Nu exist & ′ ″ " &there4; Nu exist ∞ ° Nu exist &alefsym; &ang; ∇ ½ ¢ ® © ™
None
∴
None
∞ °
None
ℵ ∠ ∇ ½ ¢ ® ©
Nu exist Nu exist
Ò Ó Ô

MENUET Course Basics of 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

MENUET Course Basics of Web-Design

Încărcat de

Drepturi de autor:

Formate disponibile

MENUET Mobile E- Novative Use of E- learning Technologies Project No.

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Despre acest curs

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Nivel: nceptor Timp Estimat : 20min

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Ce este un browser web?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Tehnologii de dezvoltare web

ASP or PHP Scripting pe partea de server

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Prelucrarea datelor cu SQL

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Dezvoltarea paginilor Web

Ce este o unealta WYSIWYG ?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Ce este un editor de web-site-uri?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Nivel: Incepator Timp estimat: 2h

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum arat codul HTML?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum pot schimba stilul in text?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

i n sfrit,putei schimba culoarea textului, folosind atributul pentru culoare (color).Astfel:

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

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

HTML markup solicitat

Cum pot aduga Caractere speciale?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Structura de baz a unei pagini HTML

Care este structura de baz a unui document HTML?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Crearea Listelor i Tabelelor

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Acesta este modul n care putei crea un tabel simplu:

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

<tabel> <tr> <td>celula 1 </td> <td>celula 2 </td> <td>celula 3 </td> </tr>

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Acesta este un exemplu de o pagin Web care folosete frames:

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

<head> <style type="text/css"> hr {color:sienna} p {margin-left:20px} body {background-image:url("imagini/back40.gif")} </style> </head>

Aceasta este modalitatea prin care poi crea un formular simplu:

Cum pot crea un buton radio?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Acesta este modul in care creezi un radio box simplu:

Un exemplu al unui drop down menu:

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum pot aduga o imagine paginii mele de Web?

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Nivel: Avansat Durat estimat: 1h

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Introducere n Server Side Scripting

MENUET Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Ce limbi tehnologii / sunt folosite?