Ministerul Educaiei Naionale

Liceul Simion Stolnicu Comarnic

Lucrare pentru atestarea competenelor profesionale

Specializare: Matematica Informatica
Tema: DROGURILE

Profesor coordonator:

Elev:

Peticila Elena

Savu Vladu - Ilie

Mai 2014

Cuprins

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

Harta Site-ului

Argument
Din pcate prea des se
expresiile
uoare i droguri
mea exist doar
ru care las
traume. Chiar dac
mici sau mai mari.
consumatori nu va
niciodat
nainte.

vehiculeaz
droguri
tari. n opinia
DROGURI. Un
ntotdeauna
acestea sunt
Pentru muli
mai exista
elementul ca

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 <eticheta> i alta de nchidere
</eticheta>, mai exist i cazuri n care nu se nchid, atunci se folosete <eticheta /> 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: <eticheta
atribut="valoare"> ... </eticheta>
Componenta unui document HTML este: 1. versiunea HTML a documentului 2. zona head
cu etichetele <head> </head> 3. zona body cu etichetele <body> </body> sau <frameset>
</frameset>
Versiunea HTML poate fi:

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

HTML 5

<!DOCTYPE HTML>
Toate paginile HTML ncep i se termin cu etichetele <html> i </html>. n interiorul
acestor etichete gsim perechile <head>, </head> i <body>, </body>.
head conine titlul paginii ntre etichetele <title> i </title>, descrieri de tip <meta>, 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: <META NAME="nume"
CONTENT="continut">
Exemplu: link ctre un fisier extern CSS: <link rel="stylesheet" type="text/css"
href="css.css">
body gzduiete practic toate etichetele afiate de browser pe ecran.
Exemplu: o pagin HTML cu titlul Exemplu iar coninutul Coninut pagin
<html> <head> <title>Titlu</title> </head> <body> Continut pagina </body> </html> 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:
<h1>Fotbal</h1>

Direcioneaza 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:
<strong>ngroat</strong>

Va 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:
<a href="http://ro.wikipedia.org/">Wikipedia Romneasc</a>

Va 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
<html>
<head>
<title>Titlul</title>
</head>
<body>
</body>
</html>

ntre tagurile <body></body> se scriu celelalte "instruciuni". Tagul <body> permite

stabilirea fundalului i a culorii hiperlinkurilor.
<body bgcolor="#ff0000"> - culoarea fundalului paginii devine rosie
<body background="fundal.jpg"> - pune o imagine n fundalul paginii

<body link="#ff0000" alink="#00ff00" vlink="#0000ff"> - 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

<HTML>
<HEAD>
<TITLE>SISTEMUL PERIODIC AL ELEMENTELOR</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Sistemul periodic al elementelor (Tabelul periodic al lui Mendeleev).</H2>
<table cellpadding="6" cellspacing="2">
<TR>
<TD BGCOLOR=#FFAAFF align="center" title="Hidrogen">H</TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>

<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD BGCOLOR=#00FFFF align="center" title="Heliu">He</TD>
</TR>
<TR>
<TD BGCOLOR=#00FF00 align="center" title="Litiu">Li</TD>
<TD BGCOLOR=#CCCCC align="center" title="Beriliu">Be</TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD BGCOLOR=#0099FF align="center" title="Bor">B</TD>
<TD BGCOLOR=#FFAAFF align="center" title="Carbon">C</TD>
<TD BGCOLOR=#FFAAFF align="center" title="Azot">N</TD>
<TD BGCOLOR=#FFAAFF align="center" title="Oxigen">O</TD>
<TD BGCOLOR=#AABB22 align="center" title="Fluor">F</TD>
<TD BGCOLOR=#00FFFF align="center" title="Neon">Ne</TD>
</TR>
<TR>
<TD BGCOLOR=#00FF00 align="center" title="Sodiu">Na</TD>
<TD BGCOLOR=#CCCCCC align="center" title="Magneziu">Mg</TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD BGCOLOR=#FFBBBB align="center" title="Aluminiu">Al</TD>
<TD BGCOLOR=#0099FF align="center" title="Siliciu">Si</TD>
<TD BGCOLOR=#FFAAFF align="center" title="Fosfor">P</TD>
<TD BGCOLOR=#FFAAFF align="center" title="Sulf">S</TD>
<TD BGCOLOR=#AABB22 align="center" title="Clor">Cl</TD>
<TD BGCOLOR=#00FFFF align="center" title="Argon">Ar</TD>
</TR>
<TR><TD BGCOLOR=#00FF00 align="center" title="Potasiu">K</TD>
<TD BGCOLOR=#CCCCCC align="center" title="Calciu">Ca</TD>
<TD BGCOLOR=#00CCCC align="center" title="Scandiu">Sc</TD>
<TD BGCOLOR=#00CCCC align="center" title="Titan">Ti</TD>
<TD BGCOLOR=#00CCCC align="center" title="Vanadiu">V</TD>
<TD BGCOLOR=#00CCCC align="center" title="Crom">Cr</TD>
<TD BGCOLOR=#00CCCC align="center" title="Mangan">Mn</TD>
<TD BGCOLOR=#00CCCC align="center" title="Fier">Fe</TD>
<TD BGCOLOR=#00CCCC align="center" title="Cobalt">Co</TD>
<TD BGCOLOR=#00CCCC align="center" title="Nichel">Ni</TD>
<TD BGCOLOR=#00CCCC align="center" title="Cupru">Cu</TD>
<TD BGCOLOR=#00CCCC align="center" title="Zinc">Zn</TD>
<TD BGCOLOR=#FFBBBB align="center" title="Galiu">Ga</TD>
<TD BGCOLOR=#0099FF align="center" title="Germaniu">Ge</TD>
<TD BGCOLOR=#0099FF align="center" title="Arsenic">As</TD>

<TD BGCOLOR=#FFAAFF
<TD BGCOLOR=#AABB22
<TD BGCOLOR=#00FFFF
</TR>
<TR>
<TD BGCOLOR=#00FF00
<TD BGCOLOR=#CCCCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#FFBBBB
<TD BGCOLOR=#FFBBBB
<TD BGCOLOR=#0099FF
<TD BGCOLOR=#0099FF
<TD BGCOLOR=#AABB22
<TD BGCOLOR=#00FFFF
</TR>
<TR>
<TD BGCOLOR=#00FF00
<TD BGCOLOR=#CCCCCC
<TD></TD>
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#00CCCC
<TD BGCOLOR=#FFBBBB
<TD BGCOLOR=#FFBBBB
<TD BGCOLOR=#FFBBBB
<TD BGCOLOR=#0099FF
<TD BGCOLOR=#AABB22
<TD BGCOLOR=#00FFFF
</TR>
<TR>
<TD BGCOLOR=#00FF00
<TD BGCOLOR=#CCCCCC
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>

align="center" title="Seleniu">Se</TD>
align="center" title="Brom">Br</TD>
align="center" title="Kripton">Kr</TD>
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"

title="Rubidiu">Rb</TD>
title="Stroniu">Sr</TD>
title="Ytriu">Y</TD>
title="Zirconiu">Zr</TD>
title="Niobiu">Nb</TD>
title="Molibden">Mo</TD>
title="Techneiu">Tc</TD>
title="Ruteniu">Ru</TD>
title="Rodiu">Rh</TD>
title="Paladiu">Pd</TD>
title="Argint">Ag</TD>
title="Cadmiu">Cd</TD>
title="Indiu">In</TD>
title="Staniu">Sn</TD>
title="Antimoniu">Sb</TD>
title="Telur">Te</TD>
title="Iod">I</TD>
title="Xenon">Xe</TD>

align="center" title="Cesiu">Cs</TD>
align="center" title="Bariu">Ba</TD>
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"
align="center"

title="Hafniu">Hf</TD>
title="Tantal">Ta</TD>
title="Wolfram">W</TD>
title="Reniu">Re</TD>
title="Osmiu">Os</TD>
title="Iridiu">Ir</TD>
title="Platina">Pt</TD>
title="Aur">Au</TD>
title="Mercur">Hg</TD>
title="Taliu">Tl</TD>
title="Plumb">Pb</TD>
title="Bismut">Bi</TD>
title="Poloniu">Po</TD>
title="Astatiniu">At</TD>
title="Radon">Rn</TD>

align="center" title="Franciu">Fr</TD>
align="center" title="Radiu">Ra</TD>

<TD></TD>
<TD></TD>
<TD BGCOLOR=#EEEE00 align="center" title="Lantan">La</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Ceriu">Ce</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Praseodim">Pr</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Neodim">Nd</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Promeiu">Pm</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Samariu">Sm</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Europiu">Eu</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Gadoliniu">Gd</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Terbiu">Tb</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Disprosiu">Dy</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Holmiu">Ho</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Erbiu">Er</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Tuliu">Tm</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Yterbiu">Yb</TD>
<TD BGCOLOR=#EEEE00 align="center" title="Luteiu">Lu</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD BGCOLOR=#00CC44 align="center" title="Actiniu">Ac</TD>
<TD BGCOLOR=#00CC44 align="center" title="Toriu">Th</TD>
<TD BGCOLOR=#00CC44 align="center" title="Protactiniu">Pa</TD>
<TD BGCOLOR=#00CC44 align="center" title="Uraniu">U</TD>
<TD BGCOLOR=#00CC44 align="center" title="Neptuniu">Np</TD>
<TD BGCOLOR=#00CC44 align="center" title="Plutoniu">Pu</TD>
<TD BGCOLOR=#00CC44 align="center" title="Americiu">Am</TD>
<TD BGCOLOR=#00CC44 align="center" title="Curiu">Cm</TD>
<TD BGCOLOR=#00CC44 align="center" title="Berkeliu">Bk</TD>
<TD BGCOLOR=#00CC44 align="center" title="Californiu">Cf</TD>
<TD BGCOLOR=#00CC44 align="center" title="Einsteiniu">Es</TD>
<TD BGCOLOR=#00CC44 align="center" title="Fermiu">Fm</TD>
<TD BGCOLOR=#00CC44 align="center" title="Mendeleeviu">Md</TD>
<TD BGCOLOR=#00CC44 align="center" title="Nobeliu">No</TD>
<TD BGCOLOR=#00CC44 align="center" title="Lawreniu">Lr</TD>
</TR>
</TABLE><BR>
</center>
<center>
<TABLE>
<TR>
<TD BGCOLOR=#FFAAFF WIDTH="40"></TD><TD>Nemetale</TD>
<TD BGCOLOR=#0099FF WIDTH="40"></TD><TD>Metaloizi</TD>
</TR>
<TR>
<TD BGCOLOR=#00FF00 WIDTH="40"></TD><TD>Metale alcaline</TD>
<TD BGCOLOR=#AABB22 WIDTH="40"></TD><TD>Halogeni</TD>
</TR>
<TR>
<TD BGCOLOR=#CCCCC WIDTH="40"></TD><TD>Metale alcalino pmntoase</TD>
<TD BGCOLOR=#00FFFF WIDTH="40"></TD><TD>Gaze nobile</TD>
</TR>
<TR>
<TD BGCOLOR=#00CCCC WIDTH="40"></TD><TD>Metale de tranziie</TD>
<TD BGCOLOR=#EEEE00 WIDTH="40"></TD><TD>Lantanide</TD>
</TR>
<TR>
<TD BGCOLOR=#FFBBBB WIDTH="40"></TD><TD>Metale de post-tranziie</TD>
<TD BGCOLOR=#00CC44 WIDTH="40"></TD><TD>Actinide</TD>
</TR>
</TABLE>
</CENTER>
</BODY></HTML>

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 ntrun 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<meta name="generator" content="Web Page Maker">
</head>
<body>
<div id="g_image1" style="position:absolute; overflow:hidden; left:0px; top:-32px; width:1280px; height:800px; zindex:0"><img src="images/weed_wallpaper_by_thedeviant426-d36wscb.jpg" alt="" title="" border=0 width=1280
height=800></div>
<div id="image1" style="position:absolute; overflow:hidden; left:251px; top:0px; width:720px; height:288px; zindex:1"><img src="images/header.png" alt="" title="" border=0 width=720 height=288></div>
<div id="image3" style="position:absolute; overflow:hidden; left:50px; top:32px; width:0px; height:0px; zindex:2"><img src="images/istoric" alt="" title="" border=0 width=0 height=0></div>
<div id="image5" style="position:absolute; overflow:hidden; left:251px; top:129px; width:400px; height:400px; zindex:3"><a href="page3.html"><img src="images/lista drogurilor.png" alt="" title="" border=0 width=400
height=400></a></div>
<div id="image6" style="position:absolute; overflow:hidden; left:568px; top:33px; width:400px; height:400px; zindex:4"><a href="page13.html"><img src="images/dezavantaje si avantaje.png" alt="" title="" border=0 width=400
height=400></a></div>
<div id="image7" style="position:absolute; overflow:hidden; left:854px; top:12px; width:400px; height:400px; zindex:5"><a href="page14.html"><img src="images/drogurile medicinale.png" alt="" title="" border=0 width=400
height=400></a></div>
<div id="image10" style="position:absolute; overflow:hidden; left:63px; top:336px; width:180px; height:380px; zindex:6"><img src="images/12-insignia5x_180x380.jpg" alt="" title="" border=0 width=180 height=380></div>
<div id="image11" style="position:absolute; overflow:hidden; left:1014px; top:341px; width:180px; height:380px; zindex:7"><img src="images/49-wireless-d-link-850l.jpg" alt="" title="" border=0 width=180 height=380></div>
<div id="image12" style="position:absolute; overflow:hidden; left:965px; top:0px; width:139px; height:107px; zindex:8"><img src="images/online.gif" alt="" title="" border=0 width=139 height=107></div>
<div id="image4" style="position:absolute; overflow:hidden; left:175px; top:23px; width:0px; height:0px; zindex:9"><img src="images/istoric" alt="" title="" border=0 width=0 height=0></div>
<div id="image13" style="position:absolute; overflow:hidden; left:13px; top:11px; width:400px; height:400px; zindex:10"><a href="page2.html"><img src="images/Istoric.png" alt="" title="" border=0 width=400
height=400></a></div>
<div id="image2" style="position:absolute; overflow:hidden; left:210px; top:283px; width:831px; height:515px; zindex:11"><img src="images/chenar.png" alt="" title="" border=0 width=831 height=515></div>
</body>
</html>

Bibliografie
www.wikipedia.com
Dictionar de droguri C.H. Beck