Documentatie Atestat
Documentatie Atestat
Documentatie Atestat
2012
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
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.
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.
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.
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:
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.
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
n urmtoarele pagini voi prezenta modalitatea de construire a site-ului, utilizand screen-shot-uri ale website-ului si coduri sursa.
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:
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
Rezultat:
în legendă, legate de domnia lui Vlad Ţepeş, al consemnărilor unor cronicari ai vremii, cu intenţia de a-l pune pe marele voievod într-o lumină nefavorabilă, amplificate în secolele urmatoare prin asocierea cu personajul romanului de ficţiune "Dracula", apărut în Anglia, in 1897, avându-l ca autor pe scriitorul irlandez Bram Stoker. Adevărul despre domnitorul Ţării Româneşti Vlad Ţepeş este cunoscut din numeroase lucrări aparţinând istoricilor români şi străini. </p> <p class="text"> Iată câteva creeaţii apărute de-a lungul vremurilor, care consemnează adevărul istoric despre domnitorul Vlad Ţepeş. </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ă apărută la Nurnberg in 1499, ce reprezintă pedeapsa trasului n ţeapă </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>
Internet:
www.wikipedia.org www.youtube.com
23