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
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
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
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
(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
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
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
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
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 . Astfel,
pentru a pune trei spaţii între cuvinte va trebui sa se scrie în fişierul HTML astfel:
Deşi este utilizată pentru inserarea de spaţii, sintagma are o altă semnificaţie.
înseamnă caracterul special Non Breaking Space definit cu ajutorul entităţii
8
. 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
> ( > ) – semnul mai mare decât
© ( © ) – semnul pentru copyright
β ( β ) – semnul beta din alfabetul grecesc
& ( &) – 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
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
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
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
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
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
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
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
Î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
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
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
- 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
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
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
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
<p><font color="#000000" size="+1"><br> 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>
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
<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>© 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
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
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
<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 /> 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 /> 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
<center> <a name="asezare"><h2><u><a href="#introducere">ASEZARE</a></u></h2></a></center><br /><p><font size="+1"> 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 /> 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"> 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 /> 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 /> "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"> 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
<center><a name="pas"><h2><u><a href="#introducere">LA PAS PRIN PETRA</a></u></h2></a></center><br /><p><font size="+1"> 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 /> 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 /> 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 /> "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>© 2010</div></td> </tr> </table></body></html>
30
Codul sursă al paginii despre Marele Zid Chinezesc, Zidul Chinezesc.html este:
31
<!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
</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"> 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
<p><font size="+1"> 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 /> 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 /> 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 /> 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 /> 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" /> <img src="GreatWallOfHanDynasty.png" height="273"/> <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"> 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
<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>© 2010</div></td>
</tr></table></body></html>
Codul sursă al paginii despre Colosseum, Colosseum.html este:
35
<!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
<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">   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 /> 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
</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"> 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 /> 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 /> 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"> ...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 /> ...Î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 /> ...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>© 2010</div></td></tr></table></body></html>
38
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
<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"> <a href="Colosseum-galerie.html" onclick="return popup(this, 'notes')"><img src="foto_5755.gif" width="180" height="180"/> </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> </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> </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
<p>© 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
<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
<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>© 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
<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
} } } }</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
<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 />             Daca
site-ul nostru ti s-a parut folositor lasa-ne un comentariu sau scrie-ne la adresa de              e-mail<a href="mailto:[email protected]">[email protected]</a><br /><br />
             <textarea name="" cols="35" rows="7"></textarea><br />
             Nick*:                      <input name="Nume" type="text" size="15" maxlength="15" /><br />
             Adresa de e-mail*:<input name="e-mail" type="text" /><br />
46
             <input name="Posteaza" type="submit" value="Posteaza" /> <br /><br /><br />
<font size="-1">
             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>© 2010</div></div></body></html>
VI. BIBLIOGRAFIE
47
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