Ministerul Educaiei NaionaleLiceul Simion Stolnicu Comarnic

Lucrare pentru atestarea competenelor profesionaleSpecializare: Matematica InformaticaTema: DROGURILE

Profesor coordonator: Elev:Peticila ElenaSavu Vladu - Ilie

Mai 2014

Cuprins

Harta site-ului3 Argument...4 Despre HTML5 Web Page Maker13 Prezentarea site-ului...15 Codul sursa.21 Bibliografie.22

1

Harta Site-ului

Argument

Din pcate prea des se vehiculeaz expresiile droguri uoare i droguri tari. n opinia mea exist doar DROGURI. Un ru care las ntotdeauna traume. Chiar dac acestea sunt mici sau mai mari. Pentru muli consumatori nu va mai exista niciodat elementul ca nainte. Efectele pe termen lung produse de droguri se msoar n sntate, viei, familii afectate, probleme sociale.n paginile acestui site gsii material informativ n acest sens.Este infinit mai uor s evii orice contact cu orice tip de drog, dect s supori consecinele dependenei cu toate aspectele ce deriv din aceasta.

HTML(HyperText Markup Language)

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator). Scopul HTML este mai degrab prezentarea informaiilor paragrafe, fonturi, tabele .a.m.d. dect descrierea semanticii documentului.

Introducere

HTML este o form de marcare orientat ctre prezentarea documentelor text pe o singura pagin, utiliznd un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaz mijloacele prin care coninutul unui document poate fi adnotat cu diverse tipuri de metadate i indicaii de redare. Indicaiile de redare pot varia de la decoraiuni minore ale textului, cum ar fi specificarea faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la scripturi sofisticate, hri de imagini i formulare. Metadatele pot include informaii despre titlul i autorul documentului, informaii structurale despre cum este mprit documentul n diferite segmente, paragrafe, liste, titluri etc. i informaii cruciale care permit ca documentul s poat fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).HTML este un format text proiectat pentru a putea fi citit i editat de oameni utiliznd un editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine solide de HTML i este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemntor cu documetele Word, dar cu observaia c aceste programe genereaz un cod HTML care este de multe ori de proast calitate.HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wiki-uri i forumuri web genereaz pagini HTML.HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat i multe liste de mail le blocheaz intenionat.

Noiuni de baz

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri i au extensia .html sau .htm .n marea lor majoritate aceste etichete sunt pereche, una de deschidere i alta de nchidere , mai exist i cazuri n care nu se nchid, atunci se folosete browserul interpreteaz aceste etichete afind rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea ntre litere mici i mari). Pagina principala a unui domeniu este fisierul index.html respectiv index.htm Aceast pagin este setat a fi afiat automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afiat pagina www.nume.ro/index.html.Unele etichete permit utilizarea de atribute care pot avea anumite valori: ... Componenta unui document HTML este: 1. versiunea HTML a documentului 2. zona head cu etichetele 3. zona body cu etichetele sau Versiunea HTML poate fi: HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

HTML 5

Toate paginile HTML ncep i se termin cu etichetele i . n interiorul acestor etichete gsim perechile , i , .head conine titlul paginii ntre etichetele i , descrieri de tip , stiluri pentru formatarea textului, scripturi i linkuri ctre fisiere externe (de exemplu scripturi, fiiere de tip CSS sau favicon).Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre autor, informaii utile motoarelor de cutare i au urmtorul format: Exemplu: link ctre un fisier extern CSS: body gzduiete practic toate etichetele afiate de browser pe ecran.Exemplu: o pagin HTML cu titlul Exemplu iar coninutul Coninut pagin Titlu Continut pagina i n HTML poate fi introdus un comentariu, care bineneles nu va fi afiat de browser:

Elementele de marcare

Mai jos sunt tipurile de elemente de marcare n HTML:Marcare structural. Descrie scopul unui text. De exemplu:FotbalDirecioneaza browserul pentru a reda "Fotbal" ca pe cel mai important titlu. Marcarea structural nu are un anumit stil predefinit, dar cele mai multe browsere web au standardizat modul n care acestea sunt afiate. De exemplu, titlurile importante (h1, h2, etc.) sunt aldine i mai mari dect restul textului.De notat c "h1" este folosit doar o singur dat per pagin deoarece cu el este marcat titlul ei.Marcare pentru prezentare. Descrie cum apare un text, indiferent de funciile sale. De exemplu:ngroatVa afia textul "ngroat" cu litere groase, aldine.Not: Html a inceput n ultimii ani s nceap s nu mai foloseasc acest gen de tag-uri pentru c "b" nu d sens paginii, pe cnd tag-ul "strong" (adic strong emphasis) d un neles paginii, i mai important, asemenea tag-uri pentru prezentare doar ncarc o pagin cu informaii i o fac astfel mai greu de ncrcat, iar apoi dac ataezi un document CSS la pagin, o singur modificare la CSS (de ex: de la "font-weight:italic" la "font-weight:bold" va schimba tot textul selectat, i de exemplu, link-urile vor trece de la text nclinat la text ngroat, plus c n CSS avem avantajul de a putea preciza ct de mari sau mici s fie literele n pixeli px, n puncte pt, etc.)avem acelai efect ca i cnd am avea de schimbat toate tag-urile de "i" de pe pagin n tag-uri de "b", munc care chiar i la un website mic este enorm, ce s mai vorbim de unul de genul wikipedia. Aa c dac vrei s ncepei o carier n html sau un hobby (i s avei succes) nu folosii aceste taguri, nu degeaba s-a inventat CSS-ul.Marcare pentru hiperlink. Leag pri ale unui document cu alte documente. De exemplu:Wikipedia RomneascVa reda Wikipedia romneasc ca hiperlink ctre un URL specificat.Elemente speciale (widget). Creeaz obiecte, cum ar fi butoanele i listele.Doar marcatorii de prezentare (mpreun cu foile de stiluri - CSS) determin cum coninutul din interiorul marcatorului va fi prezentat. Ceilali marcatori spun browserului ce obiecte s redea sau ce funcii s execute.

Tag-uri

Orice fiier html are urmtoarea structur

Titlul

ntre tagurile se scriu celelalte "instruciuni". Tagul permite stabilirea fundalului i a culorii hiperlinkurilor. - culoarea fundalului paginii devine rosie - pune o imagine n fundalul paginii - stabileste culoarea linkurilor nevizitate si vizitate.

Un document simplu

S ncepem cu un document simplu: Scrie acest cod ntr-un editor de text oarecare (Notepad de exemplu) i salveaz-l cu numele de index.html

Acum deschide fiierul cu un browser web i vei vedea o pagin cu titlul "Un document simplu" n care scrie Textul documentului l scrii aici!Exemplu - Sistemul periodic al lui Mendeleev

SISTEMUL PERIODIC AL ELEMENTELOR

Sistemul periodic al elementelor (Tabelul periodic al lui Mendeleev).

H

He

LiBe

BCNOFNe

NaMg

AlSiPSClAr

KCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKr

Rb SrYZrNbMoTcRuRhPdAgCdInSnSbTeIXe

CsBa

HfTaWReOsIrPtAuHgTlPbBiPoAtRn

FrRa

LaCePrNdPmSmEuGdTbDyHoErTmYbLu

AcThPaUNpPuAmCmBkCfEsFmMdNoLr

NemetaleMetaloizi

Metale alcalineHalogeni

Metale alcalino pmntoaseGaze nobile

Metale de tranziieLantanide

Metale de post-tranziieActinide

Cum arata in browser

Web page maker

Web Page Maker este un editor de HTML cu o interfa grafica , care permite crearea paginilor web fr a deine cunostiinte de HTML . Diferitele obiecte ( text , imagini , linkuri ,butoane etc ) pot fi plasate n zona de lucru cu mouse-ul care pot fi mutate uor , terse , sau schimbate dimensiunea . Programul include i interfee predefinite .Este uor s foloseti unelte de design web , care permit crearea profesional a paginilor de internet in puin minute , fr a avea cunostiinte HTML . Interfa premite drag&drop a diferitelor obiecte i poziionarea lor n zona de lucru . Programul include cteva pagini simple care pot fi schimbate de utilizator cu ajutorul tastaturii .

La deschidere ,prima pagina arat astfel :

Bara de lucru

- Butonul "New ofer posibilitatea de a ncepe un nou proiect;- Al doilea buton ne permite deschiderea unui proiect salvat anterior;- Dischet salveaz progresul fcut la un proiect.

-Butonul Text ofer posibilitatea de a introduce un text;-Urmtorul buton ofer posibilitatea de a insera o imagine;-Butonul Navigation Bar ofer posibilitatea de insesrare a butoanelor care ne direcioneaz ntr-un subdomeniu al site-ului;-Ultimul buton ne ofer posibilitatea de a crea anumite forme i anume : dreptunghice , dreptunghice rotunjite , elipsoide .

-Urmtorul buton ne ofer posibilitatea de a select fondul pagini , ct i pentru a selecta o culoare din interiorul paginii;- Butonul "Hyperlink ofer posibilitatea de a naviga ntr-un document existent n pagin;-Lupa ofer posibilitatea de a vizializa proiectul ntr-un browser;- Butonul Publicare ne ofer posibilitatea de a ne publica proiectul .Bara lateral

Aici avem butoane ce ne permit adugarea , clonarea sau eliminarea paginilor , ct i ordinea lor.Puteam naviga toate paginile site-ului .

Prezentarea site-ului

Interfa site-ului a fost realizat cu ajutorul programului Adobe Photoshop CS5. Toate elementele ce se regsesc n prima pagin sunt produsul finit al unui proces de creare de la 0.

Tot coninutul paginii a fost relizat i salvat n format .png, iar apoi prin obtiunea "Adugare imagine" regsit n bara de instrumente, a fost inserat. Dup ce am inserat coninutul, am aranjat, rezultnd interfaa primei pagini.Butoanele paginii

Butoanele au fost create n Adobe Photoshop i salvate n format .jpg. Prin opiunea "Adugare imagine" regsit n bara de instrumente, am inserat butoanele. Fiecare buton n parte face trimitere la o alt pagin din site. Modul prin care s-a realizat trimiterea de la un buton la o bagina este astfel: Click drepta pe buton -> Link to -> URL (iar de aici am fcut trimiterea la pagina respectiv)

Celelalte elemente ale paginii au fost adugate prin opiunea "Adugare imagine" din bara de instrumente, apoi au fost aranjate n site.

Am selectat imaginea, iar apoi am dat chick pe "Open". Dup aceast operaie, imaginea selectat a fost inserat n Web Page Maker.Background-ul a fost realizat n Adobe Photoshop, inserat prin opiunea "Adugare imagine", iar apoi, pentru a evita aceeai operaie de mai multe ori, am folosit opiunea "Include on all pages", iar imaginea a fost setat pe toate paginile site-ului. Adugare imagine -> Click dreapta -> Include on all pages

Dup ce am setat background-ul pe fiecare pagin, am apsat click dreapta, iar apoi am ales opiunea "Lock" pentru l bloca, evitnd ulterioar micare de deplasare nedorit.

Butonul dechide pagina:

n aceast pagin regsim informaii generale din istoria drogurilor.

Butonul deschide pagina:

Aceast pagin conine o serie de butoane, fiecare buton fcnd trimitere n pagin specific textului scris pe buton. n pagina redirecionat regsim informaii generale despre drogul respectiv.

De exemplu, dnd click pe butonul "Marijuana", se face redirecionarea ctre pagina cu informaiile generale.

Butonul deschide pagina:

Butonul deschide pagina:

n aceast pagin sunt prezentate avantajele i dezavantajele consumului de droguri.

Codul sursa

Untitled

Bibliografie

www.wikipedia.comDictionar de droguri C.H. Beck