Colegiul Naional Roman-Vod

Proiect pentru obinerea atestatului de competene profesionale

Profesor: Gavril Petru Florin

Elev: Enea Elena Corina

2012

Pagin web - Vlad epe

~ ntre legend i realitate ~

Argument
Am ales s realizez acest website cu tema Vlad epe datorit admiraiei profunde pe care am cptat-o pentru marele domnitor romn. Doresc s realizez prin aceast lucrare o comemorare a personajului care a rmas in istorie ca o emblem a conducatorului drept i iubitor de ar, i care aduce faim rii noastre i n ziua de astzi, prin imaginea Contelui Dracula. Am folosit pentru aceast prezentare dou mari instrumente de web-design, i anume limbajul HTML(Hypertext Markup Language), respectiv CSS(Cascade Style Sheeting). Aplicaia realizat ncearc s ofere informaii bine organizate i utile despre viaa i domnia marelui voievod al rii Romneti, Vlad epe, cel mai crud i mai drept domn pe care l-au avut rile Romne.

Cuprins

Cap. I: Noiuni introductive........................................................................................pag. 4 I.1 Istoria Internetului.................................................................................... pag. 4 I.1.2 Caracteristici tehnice... pag. 7 I.2 Despre web-design........................................ ....................pag. 9 I.2.1 Despre CSS........pag. 10 I.2.2 Despre HTML....... pag. 11 Cap. II: Descrierea bazei teoretice a lucrrii........................................................... pag.19 II.1 Logo...................................................................pag.15 II.2 Meniu Lateral.....................................................................................pag.16 II.3 Galerie Foto......................................................................................pag.18

Bibliografie...............................................................................................................pag.22

Cap. I: Noiuni introductive I.1 Istoria Internetului I.1.1 Noiuni de baz

Internetul s-a nscut la mijlocul anilor 60 n forma ARPAnet (Advanced Research Projects Agency Net) - o reea ntre mai multe computere din unele instituii americane, ce lucrau pentru ARPA, un departament de cercetare din cadrul Pentagonului. ARPA a fost pus n funciune ca reacie la succesul sovietic al lansrii satelitului Sputnik n spaiu n 1957. Unul din obiectivele ARPAnet era crearea unei reele, care s nu fie distrus datorit atacurilor asupra sistemului. Rzboiul Rece fiind la apogeu, scenariul unui dezastru era considerat fie lansarea unei bombe fie un atac nuclear. De aici a rezultat un proiect de reea, unde reeaua nsi era permanent n pericol de atac. n consecin:- doar un minimum de informaii era cerut de la computerele client n reea - oricnd transmisia de date ntlnea un obstacol, sau una dintre adrese era de negsit, se gsea o alt cale ctre adresa cutat. Toate acestea au fost codificate ntr-un protocol care reglementa transmisia de date pe Internet. n forma sa final, acesta era TCP/IP (Transmission Control Protocol / Internet protocol), care este i acum baza Internetului. TCP/IP face posibil ca modele diferite de calculatoare, de exemplu IBM compatibile sau Mac's, folosind sisteme diferite de operare, cum ar fi UNIX, Windows, MacOS etc. s se "neleag" unele cu altele. n acest fel, Internetul era i este cu adevrat o platform-independent. Internet-ul "civil" a nceput ca o reea de patru computere ntre Universitile din Utah, Santa Barbara i Los Angeles i Institutul de Cercetare din Stanford. n curnd, cercettori din alte instituii de stat au devenit interesai. Deoarece folosirea computerelor era costisitoare, ei au vzut imediat avantajele folosirii n comun a unei reele. La sfritul anilor 60 i nceputul anilor 70, cnd Internetul numra n jur de 50 de computere, s-au dezvoltat primele dintre servicii, folosite nc i azi pentru transferul informaiei:- File Transfer Protocol pentru trimiterea i regsirea fiierelor - Telnet pentru accesarea i folosirea bazelor de date, a bibliotecilor i a cataloagelor din toat lumea E-Mail pentru trimiterea mesajelor personale. Internetul era n mod categoric n ascenden. Cu noi grupuri de utilizatori care se alturau, n urmtoarea decad, Internetul a crescut la o reea de 200 de computere. Partea militar era organizat ntr-o reea separat, Milnet.

n acelai timp, au aprut alte reele, mai ales n sectorul academic. Important printre acestea era (i este) USENET sau Users' Network, care a nceput n 1979, cnd cteva UNIX-computere au fost conectate mpreun. USENET. n sute de grupuri de discuii despre orice subiect imaginabil, oamenii fceau schimb de nouti i imagini, n ciuda distanelor i a hotarelor. Alte reele s-au dezvoltat de-a lungul USENETului. Toate formau baza unui spaiu de comunicaie radical democratic. De exemplu, naintea unei noi discuii pe care grupul o ncepea, comunitii Netului i se cerea un vot de accept. Grupurile de discuii joac nc un rol mare pe Internet. Exist mii i zeci de mii n ntreg Internetul. Alt motenire a USENET este "Netiquette", sau regulile de comportament pe Internet. 10 ani dup ce USENET i ncepuse dezvoltarea, Internetul a crescut la 80.000 de computere. A nceput s fie un factor de luat n considerare n politic. i curnd, expresia "Information SuperHighway" (autostrada informaiei) a devenit uzual. n aceast metafor, Internetul era vzut ca o important infrastructur pentru transportul unor bunuri vitale - informaiile. n anii 80 i nceputul anilor 90, cnd Internetul era folosit doar de un numr mic de cercettori, arat mult diferit fa de prezent. Principalele aplicaii erau atunci pota electronic i grupurile de discuii (Newsgroups) plus diverse rutine de cutare i mecanisme de transfer al fiierelor. Aceasta era o lume UNIX, n care toate comunicaiile existau doar ca text sau numere, i liniile de comand trebuiau memorate i tiprite. Cnd pota electronic, dar mai ales programele de cutare i de transfer al fiierelor au trebuit s fac fa unor cerine mai complexe, s-au dezvoltat noi navigatoare. Software-ul pentru fiecare trebuia s fie obinut i configurat separat. Folosirea fiecruia trebuia s fie nvat. Pe scurt: datorit metalimbajului foarte dificil, folosirea Internetului n acea perioad era restrns la un mic grup de oameni din universiti i institute de cercetare. Marea schimbare a nceput n 1989, cnd Tim Berners Lee de la CERN (Centrul European pentru Fizica Nucleara) din Geneva a pus bazele n 1989 dezvoltrii primului prototip al World Wide Web (WWW sau 3W). Ca de obicei n istoria Internetului, scopul iniial al WWW-ului era destul de limitat.

Era destinat s fie o platform intern de comunicaii pentru cercettorii din ntreaga lume care lucrau pentru CERN. Sarcina principal era s asigure un sistem care s fac legtura ntre varietatea de platforme ale diverselor calculatoare. Soluia de baz era ideea de a face legtura ntre documente via "hipertext". Hipertext nseamn, a marca irurile de text sau alte obiecte i de a le lega cu alte obiecte, care ar putea fi din punct de vedere fizic la mare distan de obiectul original. Cnd legtura este selectat, cineva poate "sri" la documentul legat. n acest fel este posibil de a lega un numr nelimitat de documente ntre ele ntr-o structur web neierarhic. Pentru a putea deosebi aceste documente i pentru a le regsi, fiecare are o adres unic. Aceasta este Unique Resource Locator (URL). URL-urile constau ntr-un protocol de transmitere (n cazul WWW-ului acesta este Hypertext Transfer Protocol http), urmat de www (n cele mai multe cazuri) i de domeniu (de exemplu numele serverului i numele paginii). Prima versiune a programelor pentru a naviga pe www, aa numitele "browsere" urmau nc tradiia original a Internetului - erau numai text. De aceea, sistemul a rmas, n principiu, neprietenos cu utilizatorii. n septembrie 1992 nu existau mai mult de 20 de servere web n ntreaga lume. Schimbarea radical s-a produs cnd NCSA (National Center for Supercomputing Applications) din SUA a scos "Mosaic" - Browser n 1993, care era bazat pe o interfa grafic (Windows). Enorma cretere a web-ului a nceput virtual, dintr-o dat: n iunie 1993, 130 servere Web erau nregistrate, n 1994 erau deja 11.576 servere. Dar web-ul nu a fcut doar s se dezvolte. De asemenea, posibilitile de a prezenta datele au crescut dramatic. Curnd au aprut poze i animaii pe situri web, urmate de sunete . Doar un mic pas mai era necesar pentru a aduce cataloage, directoare i formulare de comand pe situri web. Astfel, civa ani mai trziu s-a nscut E-Commerce.

I.1.2 Caracteristici tehnice

n ziua de astzi, Internetul este susinut i ntreinut de o mulime de firme comerciale. El se bazeaz pe specificaii tehnice foarte detaliate, ca de exemplu pe aa-numitele "protocoale de comunicaie", care descriu toate regulile de transmitere a datelor n reea. Vezi i articolul despre Modelul de Referin OSI. Protocoalele fundamentale ale Internetului, care asigur interoperabilitatea ntre orice dou calculatoare sau aparate inteligente care le implementeaz, sunt Internet Protocol (IP), Transmission Control Protocol (TCP) i User Datagram Protocol (UDP). Aceste trei protocoale reprezint ns doar o parte din nivelul de baz al sistemului de protocoale Internet, care mai include i protocoale de control si aplicative, cum ar fi: DNS, PPP, SLIP, ICMP, POP3, IMAP, SMTP, HTTP, HTTPS, SSH, Telnet, FTP, LDAP, SSL, WAP i SIP. Din cauza multelor fuziuni dintre companiile de telefonie i cele de Internet (Internet Service Providers, prescurtat ISP) au aprut o serie de probleme n sensul c nu erau clar delimitate sarcinile fiecreia. S presupunem c un client sun la ISP-ul su pe o linie telefonic normal. Modem-ul este o plac din calculatorul clientului care convertete semnalele digitale n semnale analoage, care pot circula n reeaua telefonic. Aceste semnale sunt transferate la punctul de livrare (Point Of Presence, POP) al ISP-ului, unde sunt preluate din sistemul telefonic i transferate n reeaua regional de web a ISP-ului. Din acest punct sistemul este n ntregime digital i se bazeaz pe transmiterea de pachete (packet switching; n acest sistem de transmisie, informaia care trebuie transmis este "mrunit" n multe pachete mici, care sunt apoi transmise n mod independent unele de altele; sigur c la destinaie pachetele trebuiesc reasamblate n ordinea corect). Reeaua regional a ISP -ului este format prin interconectarea routerelor din diverse orae pe care le deservete compania. Dac pachetul este destinat unui calculator-gazd deservit direct de ctre reeaua ISP, pachetul va fi livrat direct lui. Altfel, el este dat mai departe operatorului (firmei) care furnizeaz companiei ISP servicii de comunicare prin backbone-ul reelei. (In engleza backbone nseamn in general ira spinrii, iar n informatic nseamn reeaua de baz pentru interconectarea reelelor). n partea superioar a acestei ierarhii se gsesc operatorii principali de la nivelul backbone-ului reelei, companii cum ar fi AT&T sau SPRINT. Acetia rspund de backbone-uri mari cu mii de routere conectate prin fibr optic cu band larg de transfer.

Corporaiile i firmele de hosting utilizeaz aa-numitele ferme de servere rapide (= multe servere, situate eventual n aceeai sal sau cldire), conectate direct la backbone. Operatorii ncurajaz pe clienii lor s foloseasc aceast conectare direct prin nchirierea de spaiu n rack-uri = dulapuri speciale pentru echipamentul clientului, care se afl n aceeai camer cu router-ul, conducnd la conexiuni scurte i rapide ntre fermele de servere i backbone-ul reelei. Dac un pachet trimis n backbone este destinat unui ISP sau unei companii deservite de aceeai coloan, el este transmis celui mai apropiat router. Pentru a permite pachetelor s treac dintr-un backbone n altul, acestea sunt conectate n NAPuri (Network Access Point). n principiu un NAP este o camer plin cu routere, cel puin unul pentru fiecare backbone conectat. O reea local conecteaz toate aceste routere astfel nct pachetele s poat fi retransmise din orice coloan n orice alta. n afar de conectarea n NAP-uri, backbone-urile de dimensiuni mari au numeroase conexiuni directe ntre routerele lor, tehnic numit conectare privat (private peering). Unul dintre paradoxurile Internet-ului este acela c ISP-urile, care se afl n competiie ntre ele pentru ctigarea de clieni, coopereaz n realizarea de conectri private i ntreinerea Internetului.

I.2 Despre web-design I.2.1 Despre CSS

CSS este un acronim provenind din Cascading Style Sheets, care nseamn "foi de stil n cascada". n documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML. CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagina web folosind numai CSS, care a fost proiectat astfel nct sa conlucreze cu HTML-ul. Tagurile HTML au fost initial destinate pentru a defini continutul unui document. Pentru a afisa "Acesta este un antet", "Acesta este un paragraf" sau "Acesta este un tabel", trebuiau folosite taguri ca <h1>,<p>,<table> etc. Modul de aranjare al documentului era sarcina browser-ului, fara a fi folosite taguri de structura. Pe masura ce Netscape si IE continuau sa adauge noi taguri HTML si atribute (ca tagul <font> si atributul color) sintaxei HTML originale, devenea din ce n ce mai greu sa creezi site-uri web n care continutul documentelor HTML sa fie separat clar de aranjamentul documentului. Stilurile definesc cum sa fie afisate elementele HTML 4.0, asa cum face tagul font sau atributul color n HTML 3.2. Stilurile sunt salvate n mod normal n fisiere diferite de cele cu extensia html. Foile de stil externe va permit sa schimbati aparitia si aranjarea tuturor paginilor n site-ul dvs. web, doar prin editarea unui singur document CSS. Daca ati ncercat vreodata sa schimbati fontul sau culoarea tuturor anteturilor din paginile web pe care le-ati creat, veti ntelege cum CSS va poate scuti de multa munca inutila. Proiectantii CSS-ului au urmarit ndeosebi separarea ntre continutul paginii (textul destinat vizitatorului si imaginile din pagina) si codul-sursa. Folosind CSS, se ajunge la un control mai fin asupra paginii web, la scaderea d imensiunii n octeti a paginii web, atunci cnd codul CSS e continut ntr-un fisier extern. Modificnd fisierul CSS extern, modificam simultan toate paginile web n care acesta e inclus. Se pot crea efecte mai sofisticate dect cele produse de codul HTML: suprapunerea unei imagini peste alta imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari dect h1 etc. CSS este foarte util n Web design, deoarece le permite developerilor sa controleze stilul si chenarul mai multor pagini web n acelasi timp. Ca web developer puteti defini un stil pentru fiecare element HTML si sa-l aplicati ctor pagini web doriti. Pentru a face o schimbare globala, schimbati stilul si toate elementele din paginile web vor fi
10

modificate automat. Dezavantaj lucrului cu CSS este ca pagina continnd cod CSS poate arata diferit n navigatoare diferite, deoarece nu toate browserele interpreteaza codul CSS la fel. Adaugnd cod JavaScript, se obtin efecte si mai sofisticate, chiar de animatie. CSS + JavaScript = DHTML (Dynamic HTML). Aceste efecte spectaculoase justifica titulatura de "artisti CSS" sau "artizani CSS" acordata unor creatori de pagini web. Foile de stil dau posibilitatea specificarii informatiei despre stil n mai multe feluri. Stilurile se pot specifica ntr-un singur element HTML, n interiorul elementului <head> al unei pagini HTML sau ntr-un fisier extern CSS. Dintr-un singur document HTML se pot face referiri catre mai multe foi de stil externe. Deci, un stil din interiorul unui element HTML are cea mai mare prioritate, ceea ce nseamna ca va suprascrie fiecare stil declarat n tagul <head>, ntr-o foaie de stil externa si n browser.

I.2.2 Despre HTML

11

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. Specificaiile HTML sunt dictate de World Wide Web Consortium (W3C). 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.

12

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 si au extensia .html sau .htm. In marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>. browserul interpreteaza aceste etichete afisand rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari). Pagina principala a unui domeniu este fisierul index.html. Aceasta pagina este setata a fi afisata automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afisata 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 "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional HTML 4.01 Transitional//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset HTML 4.01 Frameset//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD "http://www.w3.org/TR/html4/frameset.dtd">

Toate paginile HTML incep si se termina cu etichetele <html> si </html>. In interiorul acestor etichete gasim perechile <head>, </head> si <body>, </body>.

13

head contine titlul paginii intre etichetele <title> si </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu scripturi, fisiere de tip CSS sau favicon). Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile motoarelor de cautare si au urmatorul format: <META NAME="nume" CONTENT="continut"> Exemplu: link catre un fisier extern CSS: <link rel="stylesheet" type="text/css" href="css.css"> body gazduieste practic toate etichetele afisate de browser pe ecran. Exemplu: o pagina HTML cu titlul Exemplu iar continutul Continut pagina <html> <head> <title>Titlu</title> </head> <body> Continut pagina </body> </html> Si in HTML poate fi introdus un comentariu, care bineinteles nu va fi afisat 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
14

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 "fontweight: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 tagurile 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.

15

II. Descrierea bazei teoretice a lucrrii

n urmtoarele pagini voi prezenta modalitatea de construire a site-ului, utilizand screen-shot-uri ale website-ului si coduri sursa.

Logo-ul Cod: HTML

<div id="header"> <h1><a &#354epe&#351</a></h1><br><br> href="index.html">Vlad

<h2>&#206ntre legend&#259 &#351i realitate</h2> </div>

CSS
*{ padding: 0; margin: 0; width: auto; height: auto;} body{ background: url('images/bg.jpg') repeat-x; font: 12px Verdana, Arial, Sans-Serif; line-height: 150%; color : #454545; } #header { height: 185px; width: 275px; margin-bottom: 0px; color: #454545; overflow: hidden; text-align: center; background: url('images/titlu.png') no-repeat;}

16

Rezultat:

Elementele CSS principale sunt extrase din fiierul style.css.

Meniul lateral Cod: HTML

<div id="left"> <div id="meniu"> <h2>Meniu</h2> <ul> <li><a style="color: #9c5e5e; font-weight: bold" href="#bzx" title="">Pagina principal&#259 </a></li> <li><a href="domnie.html" title="">Domn al &#354&#259rii Rom&#226ne&#351ti</a></li> <li><a href="legenda.html" title="">&#206ntre legend&#259 &#351i realitate</a></li> <li><a href="galerie.html" title="">Sec&#355iunea foto/video</a></li> </ul> </div> </div>

CSS
17

#left{ float: left; width: 200px; height: auto; padding-top: 0px; padding-right: 10px; margin-left: -580px; margin-top: 20px; text-align: left; margin-bottom: 15px;} #left h2{ margin: 0 10px 10px 0;} #meniu { background: lightyellow; width: 200px; height: 180px; padding-top: 0px; padding-right: 10px; text-align: left; margin-bottom: 15px;} #meniu h2{ padding: 5px; margin: 0 10px 10px 0;} #meniu a { background:url('images/a.gif') no-repeat left; padding-left: 17px; color: #666; } #meniu a:hover{ text-decoration: underline; } #meniu ul{ padding: 0; margin: 0;} #meniu li{ width: 120%; text-align: left; list-style-type: none; padding-bottom: 15px;} #meniu li:hover{ padding-left: 20px; line-height: 250%; font-weight: bold;} 18

Elementele CSS sunt extrase din fisierul style.css.

Rezultat:

Galerie foto Cod: HTML

<ul class="galerie"> <li> <ul class="activ"> <p class="text"> Vlad &#354epe&#351 este cunoscut ca fiind cel mai crud, &#351i, &#238n acela&#351i timp, cel mai drept &#351i iubitor de &#355ar&#259 domnitor pe care l-au avut &#354&#259rile Rom&#226ne de-a lungul istoriei. </p> <p class="text"> Imaginea sa, a&#351a cum este perceput&#259 ast&#259zi, constituie rezultatul interferen&#355ei unor fapte istorice reale, intrate 19

&#238n legend&#259, legate de domnia lui Vlad &#354epe&#351, al consemn&#259rilor unor cronicari ai vremii, cu inten&#355ia de a-l pune pe marele voievod &#238ntr-o lumin&#259 nefavorabil&#259, amplificate &#238n secolele urmatoare prin asocierea cu personajul romanului de fic&#355iune "Dracula", ap&#259rut &#238n Anglia, in 1897, av&#226ndu-l ca autor pe scriitorul irlandez Bram Stoker. Adev&#259rul despre domnitorul &#354&#259rii Rom&#226ne&#351ti Vlad &#354epe&#351 este cunoscut din numeroase lucr&#259ri apar&#355in&#226nd istoricilor rom&#226ni &#351i str&#259ini. </p> <p class="text"> Iat&#259 c&#226teva creea&#355ii ap&#259rute de-a lungul vremurilor, care consemneaz&#259 adev&#259rul istoric despre domnitorul Vlad &#354epe&#351. </p> </ul> </li> <li> <img src="images/galerie/1.jpg" alt="" /> <ul class="gal"> <img src="images/galerie/1.jpg" alt="" /> <p class="text"> Gravur&#259 ap&#259rut&#259 la Nurnberg in 1499, ce reprezint&#259 pedeapsa trasului n &#355eap&#259 </p> </ul> </li> /*i aa mai departe*/ </ul>

CSS
20

.galerie{ display: block; list-style-type: none; position: relative; width: 90%; height: auto; margin-top: 410px; margin-bottom: 100px; margin-left: 10%; background: inherit;} .galerie img{ height: 100px; width: auto;} .galerie li{ width: auto; float: left; border: 2px lightgrey solid;} .galerie li:hover{ border: 2px grey solid;} .galerie ul.gal{ list-style-type: none; display: none;} .galerie ul.activ{ background: lightyellow; list-style-type: none; z-index: 10; display: block; position: absolute; top:-410px; left:10%; width: 60%; height: 350px; padding: 15px 15px; margin-bottom: 10px; border: 5px lightgrey outset;} .galerie li:hover ul.gal{ background: white; z-index: 11; display: block; position: absolute; top: -410px; left: 10%; height: 350px; width: 60%; 21

padding: 15px 15px; margin-bottom: 10px; border: 5px lightgrey outset;} .galerie .gal img, .galerie .activ img{ position: relative; clear: both; margin-left: 15%; height: auto; width: 70%;} .galerie .gal .text, .galerie .activ .text{ position: relative; padding: 20px; padding-bottom: 0; width: auto; clear: both; text-indent: 30px; text-align: center; font-family: "Arial"; font-size: 12px;} Elementele CSS fac parte din fiierul galerie.css.

De asemenea, au fost incluse n aplicaie o serie de materiale video, ilustrnd fragmente din filmul Vlad epe. Acestea nu mi aparin, fiind preluate de pe site-ul www.youtube.com.

Codul HTML utilizat pentru integrarea acestor materiale n aplicaie este de forma:
<iframe width="420" height="315" src="http://www.youtube.com/embed/C5ag5H2t2Vg" frameborder="0" allowfullscreen></iframe>

Bibliografie Mic almanah scolar Casa Editorial REGINA Iai 2002

22

Neagu Djuvara De la Vlad epe la Dracula Vampirul Editura Humanitas

Internet:
www.wikipedia.org www.youtube.com

23