+ All Categories

Atestat

Date post: 22-Dec-2015
Category:
Upload: elena
View: 7 times
Download: 2 times
Share this document with a friend
Description:
doc
72
COLEGIUL NAŢIONAL “FRAŢII BUZEŞTI”, CRAIOVA PROIECT DE ATESTAT LA INFORMATICĂ Tema: „Cele 7 minuni ale lumii moderne” Elev: Profesor îndrumător: MAI 2010
Transcript
Page 1: Atestat

COLEGIUL NAŢIONAL “FRAŢII BUZEŞTI”, CRAIOVA

PROIECT DEATESTAT LA

INFORMATICĂ

Tema:

„Cele 7 minuni ale lumii moderne”

Elev: Profesor îndrumător:Stănculescu Dochia

Diana-Mihaela Marinela

MAI 2010

Page 2: Atestat

Cuprins:

I. Motivul alegerii temei .................................................. 2

II. Despre HTML .............................................................. 3

2.1. Introducere ..................................................... 3

2.2. Istoria HTML-ului .......................................... 4

2.3. Editoare HTML .............................................. 5

III. NOŢIUNI DE BAZĂ .................................................. 6

3.1. Elemente de marcare ...................................... 7

3.2. Texte ............................................................... 8

3.3. Liste ................................................................ 11

3.4. Tabele ............................................................. 12

3.5. Imagini ............................................................ 15

3.6. Link-uri şi poziţionare .................................... 16

3.7. Formulare ....................................................... 18

3.8. Cadre .............................................................. 21

IV. STRUCTURA APLICAŢIEI ...................................... 22

V. CODURILE SURSĂ ................................................... 23

VI. BIBLIOGRAFIE ......................................................... 57

1

Page 3: Atestat

I. MOTIVUL ALEGERII TEMEI

Ca urmare a numeroaselor căutari pe Internet efectuate în ultima vreme am

descoperit câteva articole interesante ce făceau referire la “Cele 7 minuni ale lumii

moderne/contemporane”. În urma unor căutari mai documentate am descoperit că

acestea reprezintă o listă cu şapte monumente arhitecturale alese în urma unei

acţiuni organizate de NewSevenWonders Foundation în anul 1999 cu scopul de a se

da o replică modernă celor "Şapte minuni ale lumii antice".

Am decis să aleg această temă pentru a prezenta o parte din minunile

arhitecturale ale lumii, unele dintre acestea nefiind cunoscute de multă lume.

2

Page 4: Atestat

II. DESPRE HTML

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru

crearea paginilor web ce pot fi afişate într-un browser (sau navigator). Scopul HTML

este mai degrabă prezentarea informaţiilor – paragrafe, fonturi, tabele ş.a.m.d. – decât

descrierea semanticii documentului.

Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni sau comenzi, ci

etichete, acestea fiind numite şi balize, elemente sau tag-uri.

2.1. INTRODUCERE

HTML sau HyperText Markup Language este, aşa cum o sugerează şi definiţia,

un limbaj de marcare pentru hypertext.

Prin hyipertext se înţelege un document ( evident în sensul utilizat în

informatică: fişier creat printr-un editor, procesor etc) care conţine, pe lângă text

(conţinutul clasic al unui document), graficã, imagini, animaţie, înregistrãri audio,

legãturi cãtre alte documente. Un hypertext poate fi gândit într-un spaţiu cu mai multe

dimensiuni, fiecare axã reprezentând un alt mijloc de comunicare: text, audio, video

etc.

Temenul hypertext se referă la modalitatea în care se fac legăturile între diferite

documente HTML. În fapt, hipertext trebuie înţeles ca un text mai profund decât un

text normal. De exemplu, o pagină de hypertext nu este doar o simplă pagină de text.

Ea este o pagină care, pe lângă textul propriu-zis, mai conţine şi nişte legături

(hiperlegături) către alte texte care abordează acelaşi subiect ca şi cel tratat în pagina de

unde se fac legăturile ( hiperlegăturile sunt acele texte subliniate sau nu, de cele mai

multe ori scrise cu albastru şi, la poziţionarea cu mouse-ul asupra lor, cursorul devine

activ).

Astfel se poate constata că, pentru un subiect oarecare, se dispune de o

documentaţie impresionantă ce poate fi accesată de la o simplă pagină de hipertext

3

Page 5: Atestat

(prin intermediul hiperlegăturilor ). Datorită acestor trimiteri către alte texte se poate

constata că textul iniţial are o profunzime mai mare decât ar avea un text normal care

este limitat doar la ceea ce se vede. În esenţă, hypertextul trebuie înţeles ca un text cu

legături către alte texte.

1.2. ISTORIA HTML-ULUI

Conceptul de hypertext a apãrut în iulie 1945 când Vannevar Bush a imaginat,

în articolul „As we may think”, scris pentru Atlantic Monthly, o maşină care putea

opera cu texte şi grafice on-line.

În 1960, Th.H. Nelson (Computer Lib/Dream Machines) a unit termenul de

hypertext cu cel de hipermedia, lucrarea lui influentând introducerea Web. În anii

1970, Nelson a iniţiat proiectul XANADU, orientat cãtre biblioteci digitale şi sisteme

hypertext, proiect nefinalizat însã.

Dupã anii 1980, apariţia sistemelor de help în produsele Apple şi Microsoft,

sisteme care permit utilizatorilor sã navigheze prin selectãri de butoane sau termeni, au

fãcut ca noţiunea de hypertext sã devinã una obişnuitã, deşi hypertextele respective nu

aveau o complexitate foarte mare.

Hypertextul permite pãrãsirea modului tradiţional de citire a unui document:

linie dupã linie, paginã dupã paginã etc. Legãturile activate produc o desfăşurare a

documentului dupã nevoile utilizatorului plus posibilitatea de pãstrare a atenţiei

cititorului prin utilizarea legãturilor grafice, audio etc.

World Wide Web, sau WWW, sau Web a apãrut la sfârşitul anilor '80 când

cercetãtorii de la CERN, Laboratorul European pentru fizica particulelor, au dezvoltat

o retea pentru a avea acces mai uşor la documentele produse de diversele laboratoare.

În 1990, ei au introdus un browser doar pentru texte şi au dezvoltat HTML. În 1991 au

implementat Web la CERN.

În 1992 cercetãtorii de la CERN au introdus Web în comunitatea Internet şi

aceasta a început revoluţia.

4

Page 6: Atestat

Ceea ce diferenţiazã WWW de celealte componente ale Internet-ului este tocmai

hypertextul, care şi-a gãsit în Web calea idealã de exprimare. Toate documentele

accesibile în Web sunt legate între ele indiferent de serverul pe care sunt memorate şi

indiferent de locul geografic unde sunt.

Trecerea de la un document la altul, de la un subiect la altul, de la un loc la altul

etc produce o impresie puternicã asupra utilizatorului, îi dã acestuia certitudinea cã

totul este potrivit intereselor lui, potrivit ritmului propriu de înţelegere.

HTML, sau HyperText Markup Language, a fost proiectat sã poatã opera cu

funcţionalităţile multimedia ale WWW.

Limbajul de marcare permite transformarea oricãrui text într-un hypertext prin

introducerea unor marcaje care vor indica modul cum se efectueaza legãturile

documentului, cum vor apãrea paginile documentului etc. Un document HTML poate fi

fãcut public dacã este pe un calculator care are acces la Internet. Un document fãcut

public poate fi vãzut din orice punct al Internet-ului.

2.3. EDITOARE HTML

Principalul editor HTML este nimeni altul, decat NOTEPAD, acel NOTEPAD

din familia Windows. Deşi este mai puţin cunoscut, acest editor de texte este foarte util

şi foarte prietenos. Pentru a salva fişierele în care sunt prezente structuri HTML, este

necesar ca acestea sa fie salvate cu extensia :html. De exemplu: SAVE AS==>

index.html.

   Imediat dupa salvare, fişierele vor avea aspect pagina WEB, şi se vor deschide

in BROWSER ( internet Explorer).

De-a lungul anilor au apărut soft-uri ce servesc drept editoare HTML şi alte

limbaje, fie ele de programare web, sau numai web design. Acestea prezintă un avantaj,

şi anume acela de a ajuta cu noi etichete şi atribute  HTML, fie ele şi de alte limbaje.

5

Page 7: Atestat

III.NOŢIUNI DE BAZĂ

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

<etichetă> şi alta de închidere </etichetă>. Browserul interpretează aceste etichete

afişând rezultatul pe ecran. Majoritatea tag-urilor funcţionează în acest mod: se pun

înaintea informaţiei pe care dorim sa o prezentăm într-un anume mod iar apoi la

sfârşitul acesteia. Unele etichete permit utilizarea de atribute care pot avea anumite

valori: <etichetă atribut="valoare"> ... </etichetă>. Trebuie ţinut cont de faptul că tag-

urile trebuie închise în ordine inversă faţă decât cum au fost deschise.

HTML nu este un limbaj case sensitiv (nu face deosebirea între litere mici şi

mari).

Pagina principală a unui domeniu este fişierul index.html. Această pagină este

setată a fi afişată automat la vizitarea unui domeniu. De exemplu la vizitarea

domeniului www.nume.ro este afişata pagina www.nume.ro/index.html.

Componenţa 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>

Toate paginile HTML încep şi se termină cu etichetele <html> si </html>. În

interiorul acestor etichete găsim perechile <head>, </head> şi <body>, </body>.

Head conţine titlul paginii între etichetele <title> şi </title>, descrieri de tip

<meta>, stiluri pentru formatarea textului, scripturi şi linkuri către fişiere externe (de

exemplu scripturi, fişiere de tip CSS sau favicon).

Etichetele de tip meta conţin cuvinte cheie, descrierea paginii, date despre autor,

informaţii utile motoarelor de căutare şi au următorul format: <META NAME="nume"

CONTENT="conţinut">

Body găzduieşte practic toate etichetele afişate de browser pe ecran.

6

Page 8: Atestat

Exemplu: o pagină HTML cu titlul Exemplu iar conţinutul „Conţinut pagină”

<html> <head> <title> Exemplu </title> </head> <body> Conţinut pagină </body>

</html>

Tag-urile <HTML>...</HTML>, <HEAD>...</HEAD>, <TITLE>...</TITLE>

si <BODY>...</BODY> vor apărea o singură dată în cadrul unui fişier HTML

Şi in HTML poate fi introdus un comentariu, care bineînţeles nu va fi afişat de

browser.

3.1. ELEMENTE DE MARCARE

Mai jos sunt tipurile de elemente de marcare în HTML:

Marcare structurală. Descrie scopul unui text. De exemplu:

<h1>Fotbal</h1>

Direcţioneaza 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 afişate.

De exemplu, titlurile importante (h1, h2, etc.) sunt aldine şi mai mari decât

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 funcţiile

sale. De exemplu:

<b>îngroşat</b> - Textul va fi afişat "îngroşat" 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 când tag-ul "strong" (adică strong

emphasis) dă un înţeles paginii, şi mai important, asemenea tag-uri pentru prezentare

doar încarcă o pagină cu informaţii şi o fac astfel mai greu de încărcat, iar apoi dacă

ataşezi 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 îngroşat, plus că în CSS avem avantajul de a

7

Page 9: Atestat

putea preciza cât de mari sau mici să fie literele în pixeli «px», în puncte «pt», etc.) are

acelaşi efect ca şi când am schimba 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.

Marcare pentru hyperlink. Leagă părţi ale unui document cu alte documente.

De exemplu:

<a href="http://ro.wikipedia.org/">Wikipedia Românească</a>

Va reda Wikipedia românească ca hyperlink către 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

conţinutul din interiorul marcatorului va fi prezentat. Ceilalţi marcatori spun browser-

ului ce obiecte să redea sau ce funcţii să execute.

3.2. TEXTE

Cel mai important element al unei pagini Internet este desigur, textul. Într-o

formă simplă, acesta poate fi scris efectiv intr-o pagina HTML.

Voi prezenta în continuare elemente de formatare a textului. Două lucruri

trebuie menţionate în primul rând, legate de formatarea textelor: utilizarea spaţiilor şi

trecerea la un nou rând.

3.2.1. SPAŢIEREA

Într-un fişier HTML afişarea mai multor spaţii consecutive nu este posibilă prin

scrierea directă în fişierul html, ci folosind de mai multe ori sintagma &nbsp;. Astfel,

pentru a pune trei spaţii între cuvinte va trebui sa se scrie în fişierul HTML astfel:

&nbsp; &nbsp; &nbsp;

Deşi este utilizată pentru inserarea de spaţii, sintagma are o altă semnificaţie.

&nbsp; înseamnă caracterul special Non Breaking Space definit cu ajutorul entităţii

8

Page 10: Atestat

&nbsp;. Prezenţa acestui caracter special între două cuvinte împiedică plasarea lor pe

rânduri separate.

Pe lângă acestă entitate, mai există şi altele. Entităţile, constituie o metodă de

reprezentare a caracterelor care nu ar putea fi redate corect în cadrul unui document

HTML dacă ar fi scrise ca atare, direct de la tastatură, sau care nu sunt disponibile la

tastatură. O entitate va fi scrisă sub forma &nume_entitate;. Mai jos sunt exemplificate

câteva entităţi precum şi caracterele aferente:

&alt; ( < ) – semnul mai mic decât

&gt; ( > ) – semnul mai mare decât

&copy; ( © ) – semnul pentru copyright

&beta; ( β ) – semnul beta din alfabetul grecesc

&amp; ( &) – semnul amperstand

3.2.2. RÂND NOU

Trecerea la un nou rând nu se face apasând Enter în fişierul HTML, ci

utilizând tag-ul <BR> ( acest tag se utilizează singur; nu se foloseşte cu </BR>).

Astfel, pentru a scrie "rând" pe un rând, a lasa un rând liber, şi "nou" pe un rând

separat, vom folosi:

rând <br><br> nou.

9

Page 11: Atestat

3.2.3 FONT-UL

Tag-ul utilizat pentru formatarea modului de afişare a textului este

<FONT>...</FONT>. Tag-ul FONT suportă mai mulţi parametri, printre care:

Size = x, unde x este dimensiunea fontului (1 fiind dimensiunea cea mai mică);

Color = #RRGGBB - culoarea cu care se va afişa fontul. Culoarea implicită

este negru;

Face = font - fontul cu care va fi scris textul respectiv. Fontul implicit este

Times New Roman. Acest parametru poate primi mai multe fonturi.

Aceşti parametri poti fi utilizaţi separat sau simultan în cadrul tag-ului FONT,

însă nu se despart prin virgulă, ci printr-un spaţiu. Astfel, instrucţiunea de mai jos

afişează text folosind culoarea albastru:

<font color=#0000AA>Cele 7 minuni ale lumii moderne </font>

Textul care se doreşte a fi introdus în pagina HTML poate fi organizat pe

paragrafe. În cazul unui browser acest lucru se specifică prin intermediul tag-ului <p>.

Browserul va afişa ca un paragraf tot textul cuprins între tagurile <p>....</p>. În cazul

în care este omisă utilizarea acestor tag-uri întregul text cuprins între tag-urile

elementului BODY va fi tratat ca un unic paragraf.

Paragrafele pot fi aliniate în diverse moduri prin utilizarea atributului ALIGN:

<p align=”right”> Acest text este aliniat la dreapata </p>

Alte formatări de text sunt :

< B > Acest text este Bold

< I > Acest text este Italic

< U > Acest text este Underline

< STRIKE> Acest text este Strike

< BIG > Acest text este Big

< SUB > Acest text este SUBscript

< SUP > Acest text este SUPrascript

10

Page 12: Atestat

3.3 LISTE

Textul mai poate fi prezentat şi sub forma unor liste. Acestea pot fi de două

feluri: ordonate ( numerotate ) sau neordonate. Tag-urile folosite pentru acestea sunt :

<OL> ...</OL> pentru liste ordonate şi <UL> ...</UL> pentru liste neordonate.

<ul> <ol>

<li> Elementul 1 </li> <li> Text 1 </li>

<li> Elementul 2 </li> <li> Text 2 </li>

<li> Elementul 3 </li> <li> Text 3 </li>

</ul> </ol>

O listă ordonată este un bloc de text delimitat de etichetele corespondente

<ol>...</ol> ( „ol” vinde de la „ordered list” ). Fiecare element al listei este iniţiat de

eticheta <li> ( list item ). Lista va fi indentată faţă de restul paginii Web şi fiecare

element al listei începe pe un rând nou.

Tag-urile <ol> şi <li> pot avea un atribut type care stabileşte tipul de caractere

utilizate pentru ordonarea listei. De asemenea tag-ul <ol> poate avea atributul start

care stabileşte valoarea iniţială a secvenţei de ordonare. Valoarea acestui atribut trebuie

să fie un număr întreg pozitiv.

Listele neordonate pot fi imbricate pe mai multe niveluri.

Listele ordonate pot fi imbricate între ele sau cu liste neordonate.

11

Page 13: Atestat

3.4. TABELE

Tabelele se utilizează folosind tag-ul <TABLE>...</TABLE>. Tabelele sunt

organizate pe rânduri ( rows - linii orizontale de casuţe ) şi coloane.

1        

         

         

Tabelul de mai sus conţine 3 rânduri, fiecare rând conţinând 5 elemente. În

interiorul unui tag de tip TABLE, rândurile sunt declarate folosind tag-ul

<TR>...</TR>, iar în cadrul fiecarui tag TR elementele sunt declarate cu tag-ul

<TD>...</TD>. Fiecare element (casuţă) poate conţine text, imagini, link-uri, etc. Un

tabel de tipul celui de mai sus ar fi codificat astfel:

<TABLE>

    <TR><TD>1</TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>

    <TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>

    <TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>

</TABLE>

Tag-urile de definire a tabelelor pot avea diverse atribute, pentru formatarea

tabelului. Astfel, tag-ul <table> poate avea:

Width = x sau Width = x% - acesta specifică lungimea întregului tabel în

pixeli sau în procente faţă de lungimea întregii ferestre;

Height = x sau Height = x% - similar cu Width, dar pentru înălţimea î

ntregului tabel;

Border = x - daca x este 1 atunci tabelul va avea si "cadru" (linii de

delimitare a elementelor). Dacă x este 0, atunci acestea vor lipsi;

12

Page 14: Atestat

Cellspacing = x - specifică spaţiul dintre căsuţe, în pixeli;

Cellpadding = x - specifică spaţiul dintre marginea unei căsuţe şi

conţinutul acesteia, în pixeli.

Şi în acest caz pot fi folosite toate aceste atribute împreună, numai o parte a lor

sau nici unul.

Şi tag-ul TD poate avea diverse atribute, unele dintre ele putând fi:

Width = x sau Width = x% - lungimea căsuţei în pixeli sau ca procent din

lungimea întregului tabel;

Height = x sau Height = x% - înălţimea casuţei în pixeli sau ca procent din

înălţimea întregului tabel;

Bgcolor = #RRGGBB - culoarea fundalului căsuţei

Alight = Right, Align = Left sau Align = Center - modul cum va fi poziţionat

conţinutul căsuţei în casuţă: la dreapta, la stânga sau central;

Valight = Right, Valign = Left sau Valign = Center - similar, dar pentru

poziţionarea pe verticală: sus, jos sau central.

De asemenea în HTML pot fi inserate şi tabele atipice precum cele ce urmează :

CELULA 1 CELULA 2 CELULA 3

CELULA 4

Acest tabel se va codifica astfel :

<TABLE>

    <TR><TD>CELULA 1</TD><TD>CELULA 2</TD><TD>CELULA

3</TD></TR>

    <TR><TD COLSPAN=3>CELULA 4</TD></TR>

</TABLE>

Utilizarea atributului COLSPAN=valoare spune că celula respectivă se

"întinde" pe lungimea unui număr de celule din structura normală a tabelului. Desigur,

13

Page 15: Atestat

acest rând va conţine numai o singură celula, nu mai multe. Similar se poate proiecta

un tabel cu o celulă care se întinde pe verticală pe spaţiul a mai multe celule:

CELULA 1 CELULA 2CELULA 3

CELULA 4 CELULA 5

Şi codul este:

<TABLE>

    <TR><TD>CELULA 1</TD><TD>CELULA 2</TD>

    <TD ROWSPAN=2>CELULA 3</TD></TR>

    <TR><TD>CELULA 4</TD><TD>CELULA 5</TD></TR>

</TABLE>

Se observă utilizarea atributului ROWSPAN=2 în a treia celula a primului rând

al tabelului. Acesta spune că această celulă se întinde pe verticală pe "înălţimea" a două

rânduri. Desigur, cel de-al doilea rând conţine numai două celule (nu trei), întrucât a

treia vine din rândul de sus.

Tabelele pot reprezenta un instrument foarte puternic în cadrul unui fişier

HTML. O tehnică interesantă de poziţionare cât mai exactă a unor informaţii constă în

utilizarea unor tabele în tabele (tag-uri TD care au drept conţinut un tabel, de exemplu).

În acest caz este foarte importantă succesiunea corectă a tag-urilor TD, TR şi TABLE

pentru o afişare corectă. O altă tehnică interesantă este utilizarea tabelelor cu

BORDER=0 ( fără cadru ) pentru gruparea unor date fără a da impresia existenţei unui

tabel propriu-zis.

3.5. IMAGINI

14

Page 16: Atestat

Pentru inserarea unei imagini în fişierele HTML se va utiliza tag-ul IMG.

Atributele acestuia sunt următoarele :

Src – reprezintă adresa la care se află imaginea precum şi numele acesteia;

Alt – text alternativ pentru descrierea imaginii text;

Width – lăţimea imaginii în pixeli;

Height – imaginea imaginii în pixeli;

Align – poziţionarea pe verticală sau orizontală a imaginii: top, middle, bottom,

left, right;

Usemap – atribut care specifică adresa unde se găseşte definiţia unei imagini de

tip hartă aflată pe partea de client;

Ismap – specifică utilizarea unei imagini de tip hartă al cărei fişier de definiţie se

află pe server

Border – stabileşte dimensiunea marginilor care înconjoară o imagine ce este

folosită drept legătură

Atributul SRC indică adresa sau locul und se află fişierul imagine ce urmează a

fi introdus în pagină precum şi numele acestuia. În termeni tehnici se spune că acest

atribut are drept valoare un URL ( Uniform Resource Locators ). Un URL trebuie

înţeles ca fiind o simplă adresă de Internet.

Exemple: SRC = „nume_imagine.gif”

SRC = „imagini/nume_imagine.gif”

SRC = http://www.numesite.com/imagini/nume_imagine.gif

Primele două adrese se mai numesc şi adrese relative şi au drept punct de

referinţă locul de unde se face inserarea. Ultimul exemplu reprezintă o adresă absolută,

adică o adresă de Internet completă unde se regăseşte un anumit fişier. Spre deosebire

de adresele relative care se modifică odată cu modificarea punctului de referinţă,

adresele absolute rămân neschimbate.

15

Page 17: Atestat

3.6. LINK-URI ŞI POZIŢIONARE

Un element important al oricărei pagini web îl constituie link-urile către alte

pagini. Acestea pot fi link-uri externe, care fac referire la un alt site, sau link-uri interne

care fac referire către alte pagini ale aceluiaşi site. Ambele tipuri se codifică

asemănător prin folosirea unui tag de tipul <A HREF=link.html>...</A> ( pentru un

link intern ) sau <A HREF=http://www.minunile_lumii.ro>...</A> ( pentru un link

extern ).

Pentru a specifica modul în care se va încărca o pagină se va folosi atributul

TARGET="nume", unde „nume” este numele pe care vrem să îl dăm unei noi ferestre

unde se va încărca pagina. Se poate folosi şi TARGET="_blank" pentru o fereastră

nouă sau TARGET="_self" pentru încărcarea în aceeaşi fereastră.

O altă variantă este posiblitatea transmiterii unui e-mail. Astfel, codul de mai jos

afişează "Scrie-ne!", text care prin apasare va deschide o fereastra pentru transmiterea

unui mesaj la adresa [email protected]:

<A HREF="mailto:[email protected]">Scrie-ne!</A>

În acelaşi mod o pagină HTML poate fi împârţită în mai multe "capitole"

(secţiuni), în cazul în care este foarte lungă. Astfel, fiecărei secţiuni i se va asigna un

nume, nume ce va putea fi utilizat în încărcarea paginii respective, astfel încât să se

afişeze exact secţiunea respectivă.

Fie fişierul index.html pe care îl împărţim în două secţiuni. Codul care face

acest lucru ar fi:

<A NAME=unu>Secţiunea 1</A>

    ...text pentru secţiunea 1...

<A NAME=doi>Secţiunea 2</A>

    ...text pentru secţtiunea 2...

Apoi, daca dorim sa încărcăm fişierul index.html din altă pagina, dar astfel încât

să se încarce direct secţiunea 2, vom utiliza:

<A HREF=index.html#doi>Apasă aici</A>

16

Page 18: Atestat

În mod similar se pot afişa fişiere text ( cu extensia txt ) sau se poate da

posibilitatea vizitatorului să salveze pe disc un alt tip de fişier ( zip de exemplu ) :

<A HREF=raport.txt>Raport</A> sau

<A HREF=program.zip>Salveaza programul</A>

De asemenea pot fi utilizate ca legături şi imagini:

<A HREF=http://minunile_lumii.ro” ><IMG SRC=„Taj_mahal.jpg”></A>

3.7. FORMULARE

17

Page 19: Atestat

Un formular este un ansamblu de zone active alcătuit din butoane, casete de

selecţie, câmpuri de editare, etc. Formularele asigură construirea unor pagini Web care

să permită utilizatorilor sa introducă efectiv informaţii şi să le transmită serverului.

Formularele pot varia de la o simplă casetă de text, pentru introducerea unui şir

de caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor de

căutare din Web, până la o structură complexă, cu multiple secţiuni, care oferă facilitaţi

puternice de transmisie a datelor.

Un formular este definit într-un bloc delimitat de etichetele corespondente

<form> şi </form>.

Există două atribute esenţiale ale elementului <form>:

1. Atributul "Action" precizează ce se va întâmpla cu datele formularului

odată ce acestea ajung la destinaţie. De regula, valoarea atributului "Action" este adresa

URL a unui script aflat pe un server WWW care primeşte datele formularului,

efectuează o prelucrare a lor şi expediază către utilizator un răspuns.

2. Atributul "Method" precizează metoda utilizată de browser pentru

expedierea datelor formularului. Sunt posibile urmatoarele valori:

- "Get" (valoarea implicita). In acest caz, datele din formular sunt adaugate la

adresa URL precizata de atributul "Action".

- "Post". In acest caz datele sunt expediate separat.

Pentru ca un formular să fie funcţional trebuie precizat ce se va întâmpla cu el

după completare şi expediere. Cel mai simplu mod de utilizare a unui formular este

expedierea acestuia prin e-mail. Pentru aceasta se foloseşte un atribut al etichetei

<form> şi anume "Action" care primeşte ca valoare "mailto:" concatenat cu o adresă

validă de e-mail către care se va expedia formularul completat.

18

Page 20: Atestat

3.7.1. Butoane radio

Butoanele radio permit alegerea, la un moment dat, a unei singure variante de

răspuns din mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu

atributul " type" având valoarea "radio".

Exemplu: <form action="mailto:[email protected]" method="post">

Alegeti sexul:<input type="radio" name="sex" value="b"><br>

Femeiesc:<input type="radio" name="sex" value="f"><br>

<input type="reset"> <input type="submit"> </form>

3.7.2. Casete de validare

O casetă de validare (checkbox) permite selectarea sau deselectarea unei

opţiuni. Pentru inserarea unei casete de validare se utilizează eticheta <input> cu

atributul " type" configurat la valoarea "checkbox". Observaţii:

- fiecare casetă poate avea un nume definit prin atributul "name".

- fiecare casetă poate avea valoarea prestabilită "selectat" definită prin atributul

"checked".

Exemplu: <form action="mailto:[email protected]" method="post">

Alegeti meniul:<br>

Pizza <input type="checkbox" name="pizza" value="o portie">

Nectar <input type="checkbox" name="nectar" value="un pahar">

<input type="reset"> <input type="submit"> </form>

3.7.3. Formulare de selecţie

Un formular de selecţie permite utilizatorului să aleagă unul sau mai multe

elemente dintr-o lista finita. Lista de selecţie este inclusă în formular cu ajutorul

etichetelor corespondente <select> şi </select>. O listă de selecţie poate avea

următoarele atribute:

- Atributul "name", care ataşează listei un nume .

19

Page 21: Atestat

- Atributul "size", care precizează câte elemente din listă sunt vizibile la un moment

dat pe ecran.

Exemplu: <form action="mailto:[email protected]" method="post">

Universitatea absolvita:<br><br>

<select name="universitate" size="3"> <option value="B"> Universitatea

din Cluj

<option value="UNBM" selected> Universitatea de Nord Baia Mare

<option value="UTT"> Universitatea Technica din Timisoara

<option value="UTB"> Universitatea Technica din Brasov

</select><br><br>

<input type="reset"> <input type="submit">

</form>

20

Page 22: Atestat

3.8. CADRE

Ferestrele sau (cadrele) ne permit să definim în fereastra browserului

subferestre în care să putem încadra documente noi HTML. Sub-ferestrele sunt definite

într-un fişier HTML special, în care blocul <body>...</body> este înlocuit de blocul

<frameset>...</frameset>. În interiorul acestui bloc, fiecare cadru este introdus prin

eticheta <frame>.

Un atribut obligatoriu al etichetei <frame> este "src", ce primeşte ca valoare

adresa URL a documentului HTML care va fi încărcat în acel frame. Definirea cadrelor

se face prin împărţirea ferestrei ecran (şi a subferestrelor) în linii şi coloane:

1. împărţirea unei ferestre într-un număr de subferestre de tip coloană se face cu

ajutorul atributului "cols" al etichetei <frameset> ce descrie acea fereastră;

2. împărţirea unei ferestre într-un număr de subferestre de tip linie se face cu ajutorul

atributului "rows" al etichetei <frameset> ce descrie acea fereastră;

3. valoare atributelor "cols" şi "rows" este o listă de elmente separate prin virgulă, care

descriu modul în care se face împărţirea.

Exemplu: "cols=200,*,50%,*" înseamnă o împărţire în 4 subferestre, dintre care

prima are 200 pixeli lăţime, a treia ocupă jumătate din spaţiul total disponibil iar a doua

şi a patra ocupă în mod egal restul de spaţiu rămas disponibil.

Observaţii:

- daca mai multe elemente din listă sunt configurate cu *, atunci spaţiul disponibil

rămas pentru ele se va împărţi în mod egal.

- o subfereastra poate fi un singur cadru (folosind <frame>)  - în care se va încărca un

document HTML - sau poate fi împărţită la rândul ei în alte subfereste constituind

cadre noi (folosind <frameset>).

Există browsere care nu suportă cadre. Pentru aceasta se utilizează în interiorul

blocului <frameset> eticheta <noframes>. Daca programul de navigare ştie să

interpreteze cadre, va ignora ce se găseşte în această porţiune, iar daca nu, materialul

cuprins în zona <noframes>...</noframes> va fi singurul care va fi înţeles şi afişat.

21

Page 23: Atestat

IV. STRUCTURA APLICAŢIEI

Proiectul realizat conţine o formă principală alcătuită din mai multe butoane

precum:

Home – prezintă o introducere în tema proiectului;

Marile Minuni - conţine linkuri spre alte subcategorii precum :Marele Zid

Chinezesc, Taj Mahal, Machu Picchu, Chichen Itza, Colosseum-ul, Iisus

Mântuitorul din Rio de Janeiro, Cetatea de la Petra;

Galerie – conţine link-uri spre Galerie Foto şi Galerie Video;

Contact

22

Page 24: Atestat

V. CODURILE SURSĂ

Codul sursă al paginii principale, Home.html este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>HOME</title><link rel="stylesheet" href="styles.css" type="text/css" /><link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /></head><body background="bgrund.jpg"><div id="container" class="button" >

<div id="header" style="background-color:#000000"><h1><font size="30" style="text-shadow: #A1A1A1 5px 5px 2px;" >CELE 7

MINUNI</h1></font><p><font size="+1">ALE LUMII MODERNE</font></p>

</div><div class="nav"><div class="table"><div class="menu">

<ul><li><a href="Home.html" >HOME</a></li><li><a href="Machu Picchu.html" id="current">MINUNILE LUMII</a>

<ul><li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li><li><a href="Petra.html">Cetatea de la Petra</a></li><li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Rio.html">Statuia lui Iisus</a></li><li><a href="Chichen Itza.html">Chichen Itza</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li>

</ul></li><li><a href="Galerie foto.html">GALERIE</a>

<ul> <li><a href="Galerie foto.html">Galerie Foto</a></li> <li><a href="Galerie video.html">Galerie Video</a></li> </ul> </li>

<li><a href="Contact.html">CONTACT</a></li></ul></div><div id="content" style="background-color:#7F7F7F">

<div id="page"><BR /><br />

<h2>INTRODUCERE</h2>

23

Page 25: Atestat

<p><font color="#000000" size="+1"><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Umanitatea are, de anul trecut, 7 noi minuni ale lumii.

Monumentele au fost desemnate in cadrul unui concurs controversat. Organizatorii competitiei au declarat ca aceasta a fost o sansa de a ridica aria culturala globala si de a recunoaste realizarile unor societati din afara Europei si a Orientului Mijlociu. <br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cele sapte noi minuni ale lumii reprezinta o lista cu sapte monumente arhitecturale alese în urma unei actiuni organizate de NewSevenWonders Foundation în anul 1999 cu scopul de a se da o replica moderna celor "Sapte minuni ale lumii antice". Initiativa a apartinut lui Bernard Weber, producator de filme si fost aviator canadian, în colaborare cu întreprinderea de marketing "Deureka". </font></p><br /> <br /> <br /> <center> <img src="Harta 7 minuni.JPG" usemap="#Harta minuni" alt="" style="border-style: none;"><MAP id="Harta minuni" NAME="Harta minuni"><!-- #$-:Image Map file created by Map THIS! --><!-- #$-:Map THIS! free image map editor by Todd C. Wilson --><!-- #$-:Please do not edit lines starting with "#$" --><!-- #$VERSION:1.30 --><!-- #$AUTHOR:Diana --><!-- #$DATE:Wed May 12 02:03:38 2010 --><!-- #$PATH:C:\Documents and Settings\Administrator\Desktop\ATESTAT\Atestat copie\Copie\Meniu\ --><!-- #$GIF:Harta 7 minuni.JPG --><AREA SHAPE=POLY COORDS="656,153,593,165,608,183,650,183,657,194,725,195,722,153,656,153" HREF="Zidul Chinezesc.html" ALT="Marele Zid Chinezesc, China"><AREA SHAPE=POLY COORDS="561,203,558,233,595,242,628,235,618,202,561,203" HREF="Taj Mahal.html" ALT="Taj Mahal, India"><AREA SHAPE=POLY COORDS="453,192,460,238,506,244,539,231,531,193,453,192" HREF="Petra.html" ALT="Cetatea din Petra, Iordania"><AREA SHAPE=POLY COORDS="385,144,383,174,391,188,423,174,477,173,502,173,499,146,388,143,388,146,385,144" HREF="Colosseum.html" ALT="Colosseum-ul, Italia"><AREA SHAPE=POLY COORDS="263,341,238,388,269,413,344,408,336,337,263,341" HREF="Rio.html" ALT="Statuia lui Iisus, Brazilia"><AREA SHAPE=POLY COORDS="173,331,121,336,128,379,189,379,194,334,173,331" HREF="Machu Picchu.html" ALT="Machu Picchu, Peru"><AREA SHAPE=POLY COORDS="111,222,113,260,188,266,225,223,113,222,111,222" HREF="Chichen Itza.html" ALT="Chichen Itza, Mexic"></MAP> </center> </div><br /><br />

<div id="sidebar"><h4><font size="+1">Cele 7 minuni ale lumii</h4><ul>

<li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li><li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li><li><a href="Chichen Itza.html">Chichen Itza</a></li>

24

Page 26: Atestat

<li><a href="Petra.html">Cetatea de la Petra</a></li><li><a href="Rio.html">Iisus Mantuitorul</a></li>

</ul></div><div class="clear"></div></div><div id="footer"><p>&copy; 2010</div>

</div></body></html>

Codul sursă al foii de stil pentru meniu, menu_style.css este:

.menu{border:none;

border:0px;margin:0px;padding:0px;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#003399;}

.menu ul{background-color:#A1A1A1;height:43px;list-style:none;margin:0;padding:0;}.menu li{

float:left;}

.menu li a{color:#000000;display:block;font-weight:bold;line-height:43px;padding:0px 25px;text-align:center;text-decoration:none;}.menu li a:hover{

color:#003399;text-decoration:none;}

.menu li ul{

25

Page 27: Atestat

background:#e0e0e0;border-left:2px solid #0079b2;border-right:2px solid #0079b2;border-bottom:2px solid #0079b2;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:200px;z-index:200;/*top:1em;/*left:0;*/}

.menu li:hover ul{display:block;}

.menu li li {display:block;float:none;width:200px;}

.menu li ul a{display:block;font-size:12px; font-style:normal;padding:0px 10px 0px 15px;text-align:left;}.menu li ul a:hover{

background:#949494;color:#000000;opacity:1.0;filter:alpha(opacity=100);}

.menu p{clear:left;}

.menu #current{background-color:#A1A1A1;color:#000000;}

26

Page 28: Atestat

Codul sursă al paginii despre Cetatea de la Petra, Petra.html este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Cetatea de la Petra</title><link rel="stylesheet" href="styles.css" type="text/css" /><link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /><SCRIPT TYPE="text/javascript"><!--function popup(mylink, windowname){if (! window.focus)return true;var href;if (typeof(mylink) == 'string') href=mylink;else href=mylink.href;window.open(href, windowname, 'width=700,height=500,scrollbars=yes');return false;}//--></SCRIPT></head><body bgcolor="#FF6A22"><div id="container" class="button" > <CENTER><a name="meniu"></a><table width="100%" border="0" bgcolor="#FFA87D"> <tr> <td><div id="header" style="background-image:url(portocaliu.jpg)">

<h1><font color="#000000">Cetatea de la Petra</font></h1></div></td>

</tr> <tr> <td><div class="nav"><div class="table"><a name="meniu"></a><div class="menu">

<ul><li><a href="Home.html" >HOME</a></li><li><a href="Machu Picchu.html" id="current">MINUNILE LUMII</a>

<ul><li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li><li><a href="Petra.html">Cetatea de la Petra</a></li><li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Rio.html">Statuia lui Iisus</a></li>

27

Page 29: Atestat

<li><a href="Chichen Itza.html">Chichen Itza</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li>

</ul> </li><li><a href="Galerie foto.html">GALERIE</a>

<ul> <li><a href="Galerie foto.html">Galerie Foto</a></li> <li><a href="Galerie video.html">Galerie Video</a></li> </ul> </li>

<li><a href="Contact.html">CONTACT</a></li></ul>

</div></td> </tr> <tr> <td width=""><div id="content">

<div id="page"><BR /><br />

<a name="introducere"><h2>INTRODUCERE</h2></a><p>

<font size="+1"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Petra este un fost oras antic, situat în Iordania. Este unul din cele mai celebre situri arheologice din lume, datorita templelor sapate direct în stânca, cel mai cunoscut fiind "Trezoreria", în stil grecesc, cu o înaltime de 42 m, unde s-a turnat si partea finala a filmului <i><b>"Indiana Jones si ultima cruciada"</b></i>.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Orasul a fost „uitat” timp de 1000 ani si a fost redescoperit în anul 1812. Situat într-un canion adânc, accesul în oras se face prin speldidul defileu colorat în 11 nuante naturale.<br /><br /><center> <img src="foto_3698.gif.jpg" /></center></p><br /></font> </div><br /><br /><div id="sidebar"><h4><font size="+1">Continut</h4>

<ul><li><a href="#introducere">Introducere</a></li><li><a href="#asezare">Asezare</a></li><li><a href="#descoperire">Descoperirea</a></li><li><a href="#pas">La pas prin Petra</a></li>

</ul><br /><h4><font size="+1">Galerii</h4>

<ul><li><a href="Petra-galerie.html" onClick="return popup(this, 'notes')">Galerie

Foto</a></li><li><a href="Petra-video.html" onClick="return popup(this, 'notes')"> Galerie

Video</a></li></ul></div></td></tr>

<tr> <td><br />

<center><hr width="80%" /></center><br />

28

Page 30: Atestat

<center> <a name="asezare"><h2><u><a href="#introducere">ASEZARE</a></u></h2></a></center><br /><p><font size="+1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Petra, "orasul de piatra" ce impresioneaza pe tot pelerinul, este un sit arheologic aflat in sud-vestul Iordaniei. Orasul se intinde de-alungul poalelor Muntelui Hor, strabatand un lung defileu si intinzandu-se apoi pe laterala estica a vaii Arabah, cunoscuta sub denumirea de "Wadi Araba" - larga vale ce se intinde de la Marea Moarta si pana la Golful Aqaba. <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Orasul este renumit mai ales pentru arhitectura acestuia, sapata aproape in intregime in piatra muntelui pe care se sprijina majoritatea cladirilor. <br /><br /><br /></p></font><center><hr width="80%" /></center><br /><center><a name="descoperire"><h2><u><a href="#introducere">DESCOPERIREA</a></u></h2></a></center><br /><p><font size="+1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Orasul, alaturi de intreaga zona, a ramas necunoscut lumii vestice pana in anul 1812, cand acesta a fost descoperit de catre exploratorul elvetian Johann Ludwig Burckhardt. Descoperirea exploratorului a fost descrisa intr-un sanet al lui John William Burgon drept "un oras rosiatic-trandafiriu vechi cat de jumatate de vreme". <br /><br /><center> <img src="IMG_0331-petra-2.jpg" /></center> <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; In scurt timp, orasul a captat atentia intregii lumi. Astfel, reprezentantii monumentelor mondiale, in cadrul programului UNESCO, au descris monumentul din valea Iordaniei drept "una dintre cele mai pretioase mosteniri culturale ale omenirii". Astfel, in data de 6 decembrie 1985, orasul antic Petra a fost declarat monument mondial.<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Rekem", numele antic al orasului Petra, este un nume care apare in Manuscrisele de la Marea Moarta, fiind asociat si cu Muntele Seir. Pe langa aceasta marturie, istoricul Eusebiu si Fericitul Ieronim mentioneaza si ei faptul ca "Rekem" este numele nativ al orasului Petra. <br /> </font> <br /> <center> <table width="80%" border="0"> <tr> <td><center><img src="IMG_3068-petra-2.jpg"</td></center> <td><center><img src="petra-23.jpg"</td></center> </tr></table></center><br /><font size="+1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Acestia din urma se bazeaza pe autoritatea lui Iosif Flaviu, a lui Plinius cel Tanar si a celorlalti scriitori care au identificat orasul Petra drept capitala a nabataenilor - semiti vorbitori de limba aramaica - si centru al caravanelor ce se ocupau cu comertul.<br /></font><br /></p><br /><center><hr width="80%" /></center><br /><p><br />

29

Page 31: Atestat

<center><a name="pas"><h2><u><a href="#introducere">LA PAS PRIN PETRA</a></u></h2></a></center><br /><p><font size="+1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Intrarea in defileu, din partea estica a vaii, este una impresionanta ce uimeste pe orice trecator. Defileul numit de localnici "Siq" - "sageata" - este unul foarte ingust in inalt, pe alocuri peretii sai apropiindu-se pana la o distanta de 3-4 metri. La capatul acestui minunat defileu se afla cea mai cunoscuta si impresionanta ruina din orasul antic Petra, si anume "Al Khazneh" - Trezoreria - care este sapata in intregime in peretele de piatra auriu-rosiatica.<br /><br /><center><img src="IMG_03721-petra-2.jpg" /></center><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Continuand drumul prin minunatul defileu, si trecand de impresionanta Trezorerie, la poalele muntelui numit "en-Nejr" se afla un imens "Teatru", amplasat intr-o asa pozitie incat din el sa se vada cea mai mare parte a mormintelor din apropiere.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;La capatul defileului, in punctul in care valea se deschide brusc, orasul Petra se infatiseaza in toate splendoarea acestuia, uimind pe cea abia iesit dintre stancile inguste si inalte. <br /><br /> <center><table width="80%" border="0"> <tr> <td><center><img src="petra-25.jpg"</td></center> <td><center><img src="IMG_3088a-petra-2c.jpg"</td></center> </tr></table></center><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "Amfiteatrul" a fost sapat in peretele de piatra, in timpul constructiei acestuia mutandu-se si unele dintre mormintele peste care s-a dat. In incinta acestuia se mai vad inca urmele unora dintre morminte - gropi rectangulare imprastiate. Formand aproape trei laterale complete, peretele rosiatic din piatra ofera locului conditiile perfecte cerute de un amfiteatru. Pe marginile sale, tot din piatra, au fost sapate si ridicate turnuri de observatie. <br /> <br /></p><a href="#meniu">Intoarce-te la meniu</a></td> </tr></table></center></td> </tr> <tr> <td><div class="clear"></div>

</div><div id="footer">

<p>&copy; 2010</div></td> </tr> </table></body></html>

30

Page 32: Atestat

Codul sursă al paginii despre Marele Zid Chinezesc, Zidul Chinezesc.html este:

31

Page 33: Atestat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Marele Zid Chinezesc</title><link rel="stylesheet" href="styles.css" type="text/css" /><link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /><SCRIPT TYPE="text/javascript"><!--function popup(mylink, windowname){if (! window.focus)return true;var href;if (typeof(mylink) == 'string') href=mylink;else href=mylink.href;window.open(href, windowname, 'width=700,height=500,scrollbars=yes');return false;}//--></SCRIPT></head><body background="great_wall.jpg" style="background-attachment:fixed"><div id="container" class="button" style="background-color:#444444"><CENTER><a name="meniu"></a><table width="100%" border="0" bgcolor="#F89D23"> <tr> <td><div id="header" style="background-image:url(orange-windows-vista-wallpaper.jpg)">

<h1><font face="_Mariage,Verdana" color="#000000">MARELE ZID CHINEZESC</h1>

</div></td> </tr> <tr> <td><div class="nav"><div class="table"><div class="menu">

<ul><li><a href="Home.html" >HOME</a></li><li><a href="Machu Picchu.html" id="current">MINUNILE LUMII</a>

<ul><li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li><li><a href="Petra.html">Cetatea de la Petra</a></li><li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Rio.html">Statuia lui Iisus</a></li><li><a href="Chichen Itza.html">Chichen Itza</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li>

</ul>

32

Page 34: Atestat

</li>li><a href="Galerie foto.html">GALERIE</a>

<ul> <li><a href="Galerie foto.html">Galerie Foto</a></li> <li><a href="#">Galerie Video</a></li> </ul> </li>

<li><a href="Contact.html">CONTACT</a></li></ul>

</div></td> </tr> <tr> <td width=""><div id="content">

<div id="page"><BR /><br /><a name="introducere"><h2>INTRODUCERE</h2></a><br /><p>

<p> <font size="+1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Marele Zid Chinezesc este o constructie strategica de mii de kilometri lungime cu rol de aparare. Zidul a fost construit cu scopul de aparare a granitei imperiului chinez contra atacurilor popoarelor nomade din nordul Chinei. Este o constructie gigantica considerata dupa volum ca cea mai mare de pe glob, cu o lungime controversata, dupa datele mai recente ar fi avut o lungime de 6 350 km, zidul principal având 2 400 km lungime. Zidul a fost construit dupa un sistem care leaga între ele mai multe fragmente de vârsta diferita. Lungimea zidului declarata de China se considera exagerata, la 10 000 de unitati Li de lungime, se considera în calcul 1 Li = 575,5 m ceea ce ar corespunde cu ca. 5.755 km.</p></font><br /></font>

<center><hr width="80%" /></center><br /> </div>

<br /><br /><div id="sidebar"><h4><font size="+1">Continut</h4><ul>

<li><a href="#introducere">Introducere</a></li><li><a href="#istorie">Istorie</a></li><li><a href="#galerie">Galerie foto</a></li>

</ul><br /><h4><font size="+1">Galerii</h4><ul>

<li><a href="Marele zid-galerie.html" onClick="return popup(this, 'notes')">Galerie Foto</a></li>

<li><a href="Zidul Chinezesc-video.html" onClick="return popup(this, 'notes')"> Galerie Video</a></li>

</ul></div></td> </tr>

<tr><td><center> <table width="300" border="0"> <tr><td><h2><u><a name="istorie"><a href="#introducere">ISTORIE</a></a></u></h2></td></tr> </table></center><br />

33

Page 35: Atestat

<p><font size="+1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prima portiune a zidului a fost construita probabil în a doua jumatate a secolului V î.e.n. în timpul dezbinarii Imperiului chinez (475 - 221 î.H ) cu scop de aparare împotriva nomazilor din nord <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In anul 214 î.H lasa împaratul Qin Shi Huangdi, sa se construiasca prima parte a zidului de la fluviul Galben ca aparare fata de poporul nomad Xiongnu (numiti în Europa huni). Spre deosebire de zidul construit mai devreme care se întinde si în vai, zidul acesta era construit numai pe crestele muntilor.Din lipsa de argila s-a folosit la constructia zidului numai piatra asezata pe straturi. Din acele timpuri zidul a fost mereu recladit, atingând în timpul dinastiei Ming lungimea maxima. <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In anul 1493 a început împaratul Hongzhi constructia zidului dinastiei Ming care servea ca aparare contra mongolilor si pentru o supraveghere mai buna a drumurilor comerciale, ca portiunea centrala a drumului matasii. Grosimea zidului este foarte diferita astfel de exemplu în regiunea Peking, zidul are o grosime între 4 si 8 m, la coama zidului 8 iar la baza 10 m grosime, La intervale de câteva sute de metri s-au construit turnuri de 12 m înaltime cu rolul de observare, transmitere de semnale si depozit de arme. Se apreciaza ca ar fi existat ca. 25 000 de asemenea turnuri integrate în zid si 15 000 de turnuri pentru semnalizare care faceau legatura cu capitala situata lânga Kashgar. Codul de semnale era simplu, daca se observa agresorul se facea foc în turn. <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Constructie gigantica a lumii antice, Marele Zid Chinezesc masoara 10 000 de kilometri lungime, fiind si astazi “cel mai lung zid de pe Terra”. Nu se stie cu exactitate care din formatiunile statale chineze a hotarât înconjurarea teritoriului sau cu valuri de pamânt si piatra. <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Suferind stricaciuni mari de-a lungul unui mileniu, Marele Zid Chinezesc a fost refacut pe circa 6400 kilometri în timpul dinastiei Ming (1368-1644), dinastie ce a fixat si capitala statului la Beijing (forma în care s-a pastrat pâna astazi). Serpuind pe crestele muntilor si ale dealurilor, dar si prin vaile adânci, zidul, prevazut din loc în loc cu forturi cu aspect paralelipipedic si turnuri înalte de aparare, are o înaltime de 8 metri si o latime de 6,5 metri. Pavat cu piatra, era folosit ca sosea strategica dar si ca drum comercial. </font> </p> <br /> <center> <table width="200" border="1"> <tr> <td colspan="3"><a href="745px-Map_of_the_Great_Wall_of_China.jpg" target="_blank"><img src="745px-Map_of_the_Great_Wall_of_China.jpg" width="933" height="413"/></a></td></tr> <tr> <td colspan="3"><marquee behavior="scroll" direction="left" scrollamount="80%" scrolldelay="2"> <img src="GreatWallofQinDynasty.png" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="GreatWallOfHanDynasty.png" height="273"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="800px-Great_Wall_of_China_location_map.PNG" height="273"/> </marquee></td></tr> <tr> <td><center> <b><i>Marele Zid al Dinastiei Qin</i></b> </center></td></center></td> <td><center> <b><i>Marele Zid al Dinastiei Ming</i></b></center></td></tr> </table> </center><br /><center><hr width="80%" /></center><br /><p><font size="+1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lasat în paragina începând cu secolul al XIX-lea, Marele Zid Chinezesc a fost luat sub protectie guvernamentala din 1952, fiind declarat monument istoric al Chinei. Cu toate astea, numai o mica portiune din zid a fost reabilitata si accesibila turistilor.</p></font><br /><br /></p>

34

Page 36: Atestat

<center><table width="300" border="0"> <tr> <td><h2><a name="galerie"><a href="#introducere"><u>GALERIE FOTO</u></h2></a></a></td> </tr></table></center><br /><center><table width="200" border="2" align="center" cellpadding="3" cellspacing="2"> <tr> <td colspan="4"><img src="PANORAMA ZID.jpg" /></td> </tr> <tr> <td class="style2"><center><img src="450px-Greatwall_simatai.JPG" /></center></td> <td><center><img src="800px-Greatwall_simatai2.jpg" /></center></td> <td><center><img src="799px-Greatwall_badaling.jpg" /></center></td> <td><center><img src="799px-Greatwall_badaling4.jpg" /></center></td> </tr> <tr> <td><center><b><i>Zidul chinezesc la Simatai</center></b></i></td> <td><center><b><i>Simatai</center><b><i></td> <td><center><b><i>Zidul chinezesc la Badaling</center></b></i></td> <td><center><b><i>De la Badaling la Simatai</center></b></i></td> </tr></table></center><br /><font size="+1"><a href="#meniu">Intoarce-te la meniu</a></td> </tr> <tr> <td><div class="clear"></div>

</div><div id="footer"><p>&copy; 2010</div></td>

</tr></table></body></html>

Codul sursă al paginii despre Colosseum, Colosseum.html este:

35

Page 37: Atestat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Colosseum-ul</title><link rel="stylesheet" href="styles.css" type="text/css" /><link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /><script type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}

function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script><SCRIPT TYPE="text/javascript"><!--function popup(mylink, windowname){if (! window.focus)return true;var href;if (typeof(mylink) == 'string') href=mylink;else href=mylink.href;window.open(href, windowname, 'width=700,height=500,scrollbars=yes');return false;}//--></SCRIPT></head><body bgcolor="#9FB0D7" onload="MM_preloadImages('colosseum.jpg')"><div id="container" class="button" >

36

Page 38: Atestat

<a name="meniu"></a> <CENTER><table width="100%" border="0" bgcolor="#9FB0D7"> <tr> <td><div id="header" style="background-image:url(magnetic-field-lines.jpg)">

<h1><font color="#999999">COLOSSEUM-UL</font></h1></div></td>

</tr> <tr> <td><div class="nav"><div class="table">

<div class="menu"><ul>

<li><a href="Home.html" >HOME</a></li><li><a href="Machu Picchu.html" id="current">MINUNILE LUMII</a>

<ul><li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li><li><a href="Petra.html">Cetatea de la Petra</a></li><li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Rio.html">Statuia lui Iisus</a></li><li><a href="Chichen Itza.html">Chichen Itza</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li>

</ul> </li><li><a href="Galerie foto.html">GALERIE</a>

<ul> <li><a href="Galerie foto.html">Galerie Foto</a></li> <li><a href="Galerie video.html">Galerie Video</a></li> </ul> </li>

<li><a href="Contact.html">CONTACT</a></li></ul>

</div></td> </tr> <tr> <td width=""><div id="content">

<div id="page"><BR /><br />

<a name="introducere"><h2>INTRODUCERE</h2></a><br /><p><font size="+1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp Colosseumul din Roma este un amfiteatru urias, care a fost construit, in secolul I d.H., pentru gloria Imeriului roman. Astazi, desi se cunosc cruzimile luptelor de gladiatori si ale jocurilor organizate in monument, aproape toate stadioanele de sport imita structura Colosseumului.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Cunoscut initial sub numele de Amfiteatrul Flavian, Colosseumul era cea mai mare constructie a vremurilor sale si astazi este cel mai mare amfiteatru antic care poate fi vizitat.<br /><br /></p><br /><center><hr width="80%" /></center><br />

37

Page 39: Atestat

</font></div><br /><br /><div id="sidebar"><h4><font size="+1">Continut</h4>

<ul><li><a href="#introducere">Introducere</a></li><li><a href="#istorie">Istorie</a></li><li><a href="#stiati">Stiati ca</a></li>

</ul><br /><h4><font size="+1">Galerii</h4><ul>li><a href="Colosseum-galerie.html" onClick="return popup(this, 'notes')">Galerie Foto</a></li><li><a href="Colosseum-video.html" onClick="return popup(this, 'notes')"> Galerie Video</a></li>

</ul></div></td> </tr>

<tr> <td><center><a name="istorie"><h2><u><a href="#introducere"> ISTORIE</a></u></h2></a></center><br /><p><font size="+1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Imparatul Vespasian, fondatorul dinastiei Flavian, a inceput constructia Coloseumului in anul 72 d.c, iar dupa sapte ani de munca intensa, constructia nu atinsese mai mult de trei sferturi din inaltimea stabilita a amfiteatrului. Insa, dupa doar un an, cladirea era terminata si inaugurata de catre Titus, fiul si urmasul la tron al lui Vespasian. Festivitatile de inaugurare au durat o suta de zile. <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pentru inceput, Coloseumul a servit pentru luptele intre fiare, apoi a venit randul oamenilor sa lupte cu animalele, urmati de gladiatorii care se infruntau intre ei pe viata si pe moarte. In prezent, monumentul este unul dintre cele mai vechi repere istorice si reprezinta o carte deschisa pentru orice turist.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Uriasul amfiteatru a fost construit in locul unui lac artificial, parte dintr-un parc construit de Nero in centrul Romei, care includea deasemenea Domus Aurea si statuia Colossus. Aceasta gigantica statuie a lui Nero, inspirata probabil de Colosul din Rodi, a dat numele actual al monumentului.<br /><br /></p></font><center><hr width="80%" /></center><br /><center><h2><a name="stiati"><h2><a href="#introducere">STIATI CA...</a></u></h2></a></center><br /><p><font size="+1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...Termenul de Colosseum provine de la statuia colosala, de 36 de metri, care il reprezenta pe Nero in chip de zeu al soarelui, odinioara amplasata langa amfiteatru, demolata ulterior. <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...În conformitate cu Calendarul Codex din 354, Colosseumul ar putea gazdui 87.000 de oameni, cu toate ca estimarile moderne pun cifra la aproximativ 50.000. <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...Intrecerile prilejuite de inaugurarea Colosseumului au durat 100 de zile si nopti, in timpul carora mii de animale si de gladiatori au fost angajati in lupte. </font><br /><BR /> </p> <center><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','colosseum.jpg',1)"><img src="colosseum-picture1.jpg" alt="Colosseum-ul" width="600" height="366" border="0" id="Image1" /></a></center><br /><font size="+1"><a href="#meniu">Intoarce-te la meniu</a></font></td> </tr> <tr><td><div class="clear"></div> </div>

<div id="footer"><p>&copy; 2010</div></td></tr></table></body></html>

38

Page 40: Atestat

Codul sursă al paginii ce conţine toate galeriile foto, Galerie Foto.html este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Galerie foto</title><link rel="stylesheet" href="styles.css" type="text/css" /><link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /><SCRIPT TYPE="text/javascript"><!--function popup(mylink, windowname){if (! window.focus)return true;var href;if (typeof(mylink) == 'string') href=mylink;else href=mylink.href;window.open(href, windowname, 'width=700,height=500,scrollbars=yes');return false;}//--></SCRIPT></head><body background="whisper_1600.jpg" style="background-attachment:fixed"><div id="container" class="button" style="background:url(whisper_1600.jpg)" > <table width="100%" border="0"> <tr> <td><div id="header">

<h1><font size="30" style="text-shadow: #A1A1A1 5px 5px 2px;" >GALERIE FOTO</h1></font>

</div></td> </tr> <tr> <td><div class="nav"><div class="table"><div class="menu">

<ul><li><a href="Home.html" >HOME</a></li><li><a href="Machu Picchu.html" id="current">MINUNILE LUMII</a>

<ul><li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li><li><a href="Petra.html">Cetatea de la Petra</a></li>

39

Page 41: Atestat

<li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Rio.html">Statuia lui Iisus</a></li><li><a href="Chichen Itza.html">Chichen Itza</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li>

</ul> </li><li><a href="Galerie foto.html">GALERIE</a>

<ul> <li><a href="Galerie foto.html">Galerie Foto</a></li> <li><a href="Galerie video.html">Galerie Video</a></li> </ul> </li>

<li><a href="Contact.html">CONTACT</a></li></ul></div></td></tr> <tr> <td><br /><br /><br /><center> <table width="200" border="0" background="abstract-background-pattern-or-wallpaper-in-subtle-pastel-shades-of-blue-pink-orange-thumb1522858.jpg"> <tr> <td><center><a href="Machu Picchu-galerie.html" onClick="return popup(this, 'notes')"><img src="foto_5756.jpg" width="180" height="180"/></A></center></td><td></td> <td><center><a href="Chichen Itza-galerie.html" onClick="return popup(this, 'notes')"><img src="3101.jpg" width="180" height="180"/></A></center></td> </tr> <tr> <td><center><b><i>Machu Picchu</i></b></center></td> <td rowspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="Colosseum-galerie.html" onclick="return popup(this, 'notes')"><img src="foto_5755.gif" width="180" height="180"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> </td> <td><center><b><i>Chichen Itza</i></b></center></td> </tr> <tr> <td><center><a href="Petra-galerie.html" onClick="return popup(this, 'notes')"><img src="i_Petra1.jpg" width="180" height="180"/></A></center></td> <td><center><a href="Taj Mahal-galerie.html" onClick="return popup(this, 'notes')"><img src="taj_mahal_small.jpg" width="180" height="180"/></A></center></td> </tr> <tr> <td><center><b><i>Petra</i></b></center></td> <td><center><b><i>Colosseumul</i></b></center></td> <td><center><b><i>Taj Mahal</i></b></center></td></tr> <tr> <td><center><a href="Marele zid-galerie.html" onClick="return popup(this, 'notes')"><img src="great_wall_of_china.jpg" width="180" height="180"/></A></center></td> <td>&nbsp;</td> <td><center><a href="Iisus-galerie.html" onClick="return popup(this, 'notes')"><img src="foto_5758.gif" width="180" height="180"/></A></center></td> </tr> <tr> <td><center><b><i>Marele zid chinezesc</i></b></center></td> <td>&nbsp;</td> <td><center><b><i>Statuia lui Iisus</i></b></center></td> </tr></table> </center><br /><br /> <br /> <center><hr size="6" color="#000000" width="75%"> </center> <br></td> </tr> <tr> <td><div class="clear"></div>

</div><div id="footer">

40

Page 42: Atestat

<p>&copy; 2010</div></td> </tr></table></body></html>

Codul sursă al unei pagini ce conţine galerie foto este (Machu Picchu-galerie.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Machu Picchu</title></head>

<body bgcolor="#339900"><table width="200" border="0"> <tr> <td><center><font size="+2"><a href="Machu Picchu6.html"> << </a><img src="foto_5756.jpg" width="350" height="350" /><a href="Machu Picchu2.html">>></a></center></font></td> </tr> <tr> <td><table width="200" border="1"> <tr> <td><a href="Machu Picchu-galerie.html"><img src="foto_5756.jpg" width="150" height="150" /></a></td> <td><a href="Machu Picchu2.html"><img src="300px-peru_machu_picchu_sunset.jpg" width="150" height="150" /></a></td>

41

Page 43: Atestat

<td><a href="Machu Picchu3.html"><img src="09_Machu_Picchu.jpg" width="150" height="150" /></a></td>

<td><a href="Machu Picchu4.html"><img src="AHI_Peru2008.jpg" width="150" height="150" /></a></td>

<td><a href="Machu Picchu5.html"><img src="machu-picchu.gif" width="150" height="150" /></a></td>

<td><a href="Machu Picchu6.html"><img src="Machu_Picchu_Locn.png"width="150" height="150" /></a></td> </tr></table></td> </tr></table></body></html>

Codul sursă al paginii ce conţine toate galeriile video, Galerie Video.html este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Galerie video</title><link rel="stylesheet" href="styles.css" type="text/css" /><link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /><SCRIPT TYPE="text/javascript"><!--function popup(mylink, windowname){if (! window.focus)return true;var href;if (typeof(mylink) == 'string') href=mylink;else href=mylink.href;window.open(href, windowname, 'width=750,height=520,scrollbars=yes');return false;}//--></SCRIPT></head><body bgcolor="#9933CC" style="background-attachment:fixed"><div id="container" class="button" style="background-image:url(Video.JPG)" > <table width="100%" border="0"> <tr> <td><div id="header" style="background-image:url(fundal video.JPG)"><h1><font size="30" style="text-shadow: #A1A1A1 5px 5px 2px;" >GALERIE VIDEO</h1></font>

</div></td> </tr> <tr> <td><div class="nav"><div class="table"><div class="menu">

<ul><li><a href="Home.html" >HOME</a></li><li><a href="Machu Picchu.html" id="current">MINUNILE LUMII</a>

<ul><li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li>

42

Page 44: Atestat

<li><a href="Petra.html">Cetatea de la Petra</a></li><li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Rio.html">Statuia lui Iisus</a></li><li><a href="Chichen Itza.html">Chichen Itza</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li> </ul> </li><li><a href="Galerie foto.html">GALERIE</a>

<ul> <li><a href="Galerie foto.html">Galerie Foto</a></li> <li><a href="Galerie video.html">Galerie Video</a></li> </ul> </li>

<li><a href="Contact.html">CONTACT</a></li></ul></div></td> </tr> <tr> <td><br /><br /><br /><center>

<table width="200" border="0" > <tr> <td><center><a href="Video.html" onClick="return popup(this, 'notes')"><img src="14aam2p.jpg" width="250" height="250"/></A></center>;</td> </tr> <tr> <td><center><font color="#CCCCCC"><b>GALERIE VIDEO <BR /> 7 MINUNI ALE LUMII MODERNE</center></b></b></td> </tr></table></td> </td></tr></table> </center> <br /><br /><br /> <br> </td> </tr> <tr></tr></table> <td><div class="clear"></div>

</div><div id="footer">

<p>&copy; 2010</div></td> </tr></table></body></html>

Codul galeriei video, Video.html este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

43

Page 45: Atestat

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>GALERIE VIDEO</title></head><frameset cols="25%,*" frameborder="no" border="0" framespacing="0"> <frame src="Alege.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" /> <frame src="Taj Mahal-video.html" name="Cadru1" id="Cadru1" title="Cadru1" /></frameset><noframes><body></body></noframes></html>

Codul unui fişier video ( Taj Mahal.html ) este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">function MM_CheckFlashVersion(reqVerStr,msg){ with(navigator){ var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1); var isWin = (appVersion.toLowerCase().indexOf("win") != -1); if (!isIE || !isWin){ var flashVer = -1; if (plugins && plugins.length > 0){ var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : ""; desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc; if (desc == "") flashVer = -1; else{ var descArr = desc.split(" "); var tempArrMajor = descArr[2].split("."); var verMajor = tempArrMajor[0]; var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r"); var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0; flashVer = parseFloat(verMajor + "." + verMinor); } } // WebTV has Flash Player 4 or lower -- too low for video else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

var verArr = reqVerStr.split(","); var reqVer = parseFloat(verArr[0] + "." + verArr[2]); if (flashVer < reqVer){ if (confirm(msg)) window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";

44

Page 46: Atestat

} } } }</script></head><body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Macromedia Flash Player. Do you want to download it now?');" bgcolor="#9FB0D7"><center><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="500" id="FLVPlayer"> <param name="movie" value="FLVPlayer_Progressive.swf" /> <param name="salign" value="lt" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_2&streamName=Taj_Mahal_-_Islamic_Arts_and_Culture&autoPlay=false&autoRewind=false" /> <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Corona_Skin_2&streamName=Taj_Mahal_-_Islamic_Arts_and_Culture&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="500" height="500" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></center></body></html>

Codul sursă al paginii Contact.html este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

45

Page 47: Atestat

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>CONTACT</title><link rel="stylesheet" href="styles.css" type="text/css" /><link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /></head><body bgcolor="#999999"><div id="container" class="button" > <div id="header" style="background-image:url(contact_logo.JPG)"><h1><font size="30" style="text-shadow: #A1A1A1 5px 5px 2px;" color="#009900" >CONTACTEAZA-NE</h1></font></div><div class="nav"><div class="table"><div class="menu">

<ul><li><a href="Home.html" >HOME</a></li><li><a href="Machu Picchu.html" id="current">MINUNILE LUMII</a>

<ul><li><a href="Taj Mahal.html">Taj Mahal</a></li><li><a href="Zidul chinezesc.html">Marele Zid Chinezesc</a></li><li><a href="Petra.html">Cetatea de la Petra</a></li><li><a href="Colosseum.html">Colosseum-ul</a></li><li><a href="Rio.html">Statuia lui Iisus</a></li><li><a href="Chichen Itza.html">Chichen Itza</a></li><li><a href="Machu Picchu.html">Machu Picchu</a></li>

</ul> </li><li><a href="Galerie foto.html">GALERIE</a>

<ul> <li><a href="Galerie foto.html">Galerie Foto</a></li> <li><a href="Galerie video.html">Galerie Video</a></li> </ul></li>

<li><a href="Contact.html">CONTACT</a></li></ul></div><div id="content" style="background-color:#009900">

<div id="page"><br /><br />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;Daca

site-ul nostru ti s-a parut folositor lasa-ne un comentariu sau scrie-ne la adresa de &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;e-mail<a href="mailto:[email protected]">[email protected]</a><br /><br />

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;<textarea name="" cols="35" rows="7"></textarea><br />

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;Nick*:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp <input name="Nume" type="text" size="15" maxlength="15" /><br />

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;Adresa de e-mail*:<input name="e-mail" type="text" /><br />

46

Page 48: Atestat

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;<input name="Posteaza" type="submit" value="Posteaza" /> <br /><br /><br />

<font size="-1">

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;Campurile marcate cu *) sunt obligatorii.</font><br /><br /><br /><br /></div> <br /><br />

<div id="sidebar"><h4><font size="+1">Spune-ne opinia:</h4><br /><br>

<input name="Alege" type="radio" value="" /> Foarte interesant<br /><input name="Alege" type="radio" value="" /> Acceptabil<br /><input name="Alege" type="radio" value="" /> Nu ma intereseaza tema<br /><input name="Alege" type="radio" value="" /> Inutil<br /><br /><input name="Posteaza" type="submit" value="Posteaza" /></div><div class="clear"></div></div><div id="footer"><p>&copy; 2010</div></div></body></html>

VI. BIBLIOGRAFIE

47

Page 49: Atestat

1. Burţa, Alin – Manual de Informatică pentru clasa a XII-a, Editura All, 2007

2. D. Taylor - Crearea paginilor WEB cu HTML, Editura TEORA, 2002

3. http://www.afaceri-online.net/proiectare-site-web/html/limbajul-html.htm

4. http://www.ecursuri.ro/cursuri/html-pe-intelesul-tuturor.php

5. http://www.eed.usv.ro

48


Recommended