Sunteți pe pagina 1din 37

Cele 7 minuni ale Lumii

LUCRARE PENTRU ATESTAREA COMPETENELOR


PROFESIONALE

Elev : Gheorghe Vasile Adrian


Profesor indrumtor: Riza Liviu
Unitatea colar: Liceul Voievodul Mircea
Sesiunea: Mai 2015

Cuprins
1. Motivul alegerii temei
1

Pagina
3

2. Structura sitului
3. Detalii tehnice
4. Despre HTML
5. Resurse de hard i soft necesare
6. Folosirea programelor
7. Bibliografie

4
14
18
35
36
37

1. Motivul alegerii temei

Avnd n vedere c lumea este un trm n care fr dar i poate am putea


gsi un col de rai unde s ne putem relaxa si s privim meleagurile acestea,
lumea are un standard de minuni alese. Acestea sunt cele 7 minuni ale Lumii
Antice.
Lectur plcuta!

2. Structura sitului

Situl conine o form principal alcatuit din mai multe pagini precum:
- Pagina Home.html conine informaii generale despre cele 7 minuni ale
Lumii Antice

- Pagina despre_atestat.html conine informatii generale despre atestat

Pagina Marea Piramid din Giza.html conine informatii despre Marea


Piramida din Giza

- Pagina Grdinile suspendate ale Semiramidei conine informatii despre


Grdinile suspendate ale Semiramidei

- Pagina Templul zeiei Artemis din Efes conine informatii despre Templul
zeiei Artemis din Efes

Pagina Statuia lui Zeus din Olympia conine informatii despre Statuia lui
Zeus din Olympia

Pagina Mausoleul din Halicarnas conine informaii despre Mausoleul din


Halicarnas

10

11

Pagina Colosul din Rodos conine informaii despre Colosul din Rodos

Pagina Farul din Alexandria


Alexandria

12

conine informaii despre Farul din

- Pagina Sitemap conine harta sitului.

13

3.Detalii tehnice
Codul surs al primei pagini, Home.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=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Cele 7 minuni ale lumii antice</title>
</head>
<body id="sus">
<a href="home.html" ><img src="imagini/titlu.png" style="width:260px"/></a>
<a href="Marea Piramid din Giza.html" class="meniu-imagini" style="marginleft:30px" title="Marea Piramid din Giza"><img src="imagini/piramidameniu.png" class="imagini-meniu" /></a>
<a href="Grdinile suspendate ale Semiramidei.html" class="meniu-imagini"
title="Grdinile suspendate ale Semiramidei"><img src="imagini/gradinameniu.png" class="imagini-meniu" /></a>
<a href="Templul zeiei Artemis din Efes.html" class="meniu-imagini"
title="Templul zeiei Artemis din Efes"><img src="imagini/templu-meniu.png"
class="imagini-meniu" /></a>
<a href="Statuia lui Zeus din Olympia.html" class="meniu-imagini"
title="Statuia lui Zeus din Olympia"><img src="imagini/statuie-meniu.png"
class="imagini-meniu" /></a>
<a href="Mausoleul din Halicarnas.html" class="meniu-imagini" title="Mausoleul
din Halicarnas"><img src="imagini/mausoleum-meniu.png" class="imagini-meniu"
/></a>
<a href="Colosul din Rodos.html" class="meniu-imagini" title="Colosul din
Rodos"><img src="imagini/colosus-meniu.png" class="imagini-meniu" /></a>
<a href="Farul din Alexandria.html" class="meniu-imagini" title="Farul din
Alexandria"><img src="imagini/farul-meniu.png" class="imagini-meniu" /></a>
<br/>
<div class="principal">
<table class="main">
<tbody>
<tr>
<th class="meniu" valign="top">
<a href="home.html" class="meniu-activ" >Home</a><br/>
<a href="despre_atestat.html" class="meniu" >Despre atestat</a><br/>
<br/>
<a href="Marea Piramid din Giza.html" class="meniu" title="Marea
Piramid din Giza">Marea Piramid din Giza</a><br/>
<a href="Grdinile suspendate ale Semiramidei.html" class="meniu"
title="Grdinile suspendate ale Semiramidei">Grdinile suspendate</a><br/>
<a href="Templul zeiei Artemis din Efes.html" class="meniu"
title="Templul zeiei Artemis din Efes">Templul zeiei Artemis</a><br/>
<a href="Statuia lui Zeus din Olympia.html" class="meniu"
title="Statuia lui Zeus din Olympia">Statuia lui Zeus din Olympia</a><br/>
<a href="Mausoleul din Halicarnas.html" class="meniu"
title="Mausoleul din Halicarnas">Mausoleul din Halicarnas</a><br/>

14

<a href="Colosul din Rodos.html" class="meniu" title="Colosul din


Rodos">Colosul din Rodos</a><br/>
<a href="Farul din Alexandria.html" class="meniu" title="Farul din
Alexandria">Farul din Alexandria</a>
</th>
<th>
</th>
<th class="informatii" valign="top"><h2 style="textalign:center"><br/>Cele apte minuni ale lumii antice</h2><hr/><br/>
<p>
Cele apte minuni ale lumii antice este o list bine-cunoscut a
apte edificii din antichitate. Lista era n principal un ghid turistic pentru
cltorii din lumea antic ce voiau s vad cele mai cunoscute destinaii din
acea perioad.</p>
<img src="imagini/piramida.jpg" class="imagini-home" align="left"
style="margin-top:-20px" title="Marea Piramid din Giza"/>
<p>
Cea mai veche versiune cunoscut a listei i aparine lui Antipater
din Sidon i a fost elaborat n secolul al II-lea .Hr.; se pare c se bazeaz
pe ghidurile populare printre cltorii eleni i cuprinde doar cldiri din
jurul Mrii Mediterane, unde sigurana cltoriilor era oarecum asigurat. Cele
apte minuni erau considerate minuni deoarece erau printre cele mai populare
destinaii; nc din 1600 .Hr. turitii au zgriat inscripii pe monumentele
din Valea Regilor n Egipt (n acea perioad Sfinxul avea deja o mie de ani).
Toate minunile erau construcii antropice; destinaiile naturale nu erau
incluse, nefiind populare.</p>
<img src="imagini/gradini.jpg" class="imagini-home" align="left" style="margintop:-50px" title="Grdinile suspendate ale Semiramidei"/>
<table style="margin:0px;border:1px black solid;">
<tbody>
<tr>
<th style="width:300px;font-weight:bold;backgroundcolor:#99CCFF;text-align:center">Numele construciei</th>
<th style="width:100px;font-weight:bold;backgroundcolor:#99CCFF;text-align:center">Data construciei</th>
<th style="width:120px;font-weight:bold;backgroundcolor:#99CCFF;text-align:center">Constructori</th>
<th style="width:120px;font-weight:bold;backgroundcolor:#99CCFF;text-align:center">Data distrugerii</th>
<th style="width:100px;font-weight:bold;backgroundcolor:#99CCFF;text-align:center">Cauza distrugerii</th>
</tr>
<tr>
<th class="stanga">Marea Piramid din Giza</th>
<th class="mijloc">2550 .Hr.</th>
<th class="mijloc">egiptenii</th>
<th class="mijloc">-</th>
<th class="dreapta">-</th>
</tr>
<tr>
<th class="stanga">Grdinile suspendate ale Semiramidei</th>
<th class="mijloc">600 .Hr.</th>
<th class="mijloc">babilonienii</th>
<th class="mijloc">sec. II .Hr.</th>
<th class="dreapta">cutremur</th>
</tr>
<tr>
<th class="stanga">Templul zeiei Artemis din Efes</th>
<th class="mijloc">550 .Hr.</th>
<th class="mijloc">lidienii, greci</th>
<th class="mijloc">356 .Hr.</th>

15

</tr>
<tr>

<th class="dreapta">incediu</th>
<th
<th
<th
<th
<th

class="stanga">Statuia lui Zeus din Olympia</th>


class="mijloc">435 .Hr</th>
class="mijloc">grecii</th>
class="mijloc">sec. V-VI d.Hr.</th>
class="dreapta">incendiu</th>

<th
<th
<th
<th
<th

class="stanga">Mausoleul din Halicarnas</th>


class="mijloc">351 .Hr.</th>
class="mijloc">carienii, greci</th>
class="mijloc">1493 d.Hr.</th>
class="dreapta">cutremur</th>

<th
<th
<th
<th
<th

class="stanga">Colosul din Rodos</th>


class="mijloc">292-280 .Hr.</th>
class="mijloc">Grecia elenistic</th>
class="mijloc">224 .Hr.</th>
class="dreapta">cutremur</th>

<th
<th
<th
<th
<th

class="stanga">Farul din Alexandria</th>


class="mijloc">sec. III .Hr.</th>
class="mijloc">Egiptul elenistic</th>
class="mijloc">1303-1480 d.Hr.</th>
class="dreapta">cutremur</th>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</tbody>
</table>
<img src="imagini/templu.jpg" class="imagini-home" align="left" style="margintop:-160px" title="Templul zeiei Artemis din Efes"/>
<p>
n lista iniial a lui Antipater, Farul din Alexandria era nlocuit
cu Zidurile Babilonului. Lista de mai sus a fost folosit ncepnd cu secolul
al VI-lea d.H. Dintre aceste minuni, singura care s-a pstrat este Marea
Piramid din Giza. Existena Grdinilor suspendate nu a fost nc dovedit
100%. nregistrrile istorice indic faptul c celelalte cinci minuni au fost
distruse prin dezastre naturale. Templul zeiei Artemis din Efes i Statuia lui
Zeus din Olympia au fost distruse de incendii, iar Farul din Alexandria,
Colosul din Rodos i Mausoleul din Halicarnas au fost distruse de
cutremure.</p>
<img src="imagini/statuie.jpg" class="imagini-home" align="left" style="margintop:-200px" title="Statuia lui Zeus din Olympia"/>
<p>
n stabilirea celor apte minuni ale lumii antice, grecii au avut un
rol important. Istoricul Herodot, cltorind n Egipt in anul 450 .Hr. spunea
c: Nicieri n lume nu se pot vedea attea lucruri de o mareie att de greu
de definit. El exemplifica aceasta afirmaie cu dou mari construcii egiptene
apreciind c, sunt chiar superioare piramidelor: Lacul artificial Moeris i
Labirintul de la Fayum. Acesta fusese construit de faraonul Amenemhet III
(1842-1798 .Hr.) i este de fapt un templu funerar cu dou niveluri i 3000 de
camere, coridoare, coloane i intrri secrete.</p>
<img src="imagini/mausoleu.jpg" class="imagini-home" align="left"
style="margin-top:-210px" title="Mausoleul din Halicarnas"/>
<p>
Tot Herodot i-a informat pe greci despre giganticele ziduri ale
Babilonului, groase de 27 metri. Dei se cunoteau aceste relatri, cele dou
mari construcii nu au fost considerate minuni ale lumii antice, menionndu-se

16

cinci monumente greceti: Templul zeiei Artemis din Efes, Mausoleul din
Halicarnas, Colosul din Rodos i Farul din Alexandria, la care s-au mai adugat
Marea Piramid din Giza i Grdinile suspendate ale Semiramidei din
Babilon.</p>
<img src="imagini/colosus.jpg" class="imagini-home" align="left" style="margintop:-185px" title="Colosul din Rodos"/>
<p>
Nu a fost menionat nici Zidul Chinezesc, care n timpul mparatului
Qin Huangdi (259-240 .Hr.) avea o lungime, peste muni i vi, de aproape 4000
km, iar n primele secole ale erei noastre de peste 6000 km.</p>
<img src="imagini/farul.jpg" class="imagini-home" align="left" style="margintop:-120px" title="Farul din Alexandria"/>
<ul><u style="margin-left:-20px">Zidul Chinezesc a fost ns inclus n <b>Lista
celor 7 noi minuni ale lumii</b> din 2007:</u>
<li>Zidul Chinezesc</li>
<li>Vechiul ora Petra (Iordania)</li>
<li>Machu Picchu (Peru)</li>
<li>Chichen Itza (Mexic)</li>
<li>Colosseum-ul din Roma (Italia)</li>
<li>Taj Mahal (India)</li>
<li>Statuia lui Christos Mntuitorul din Rio de Janeiro (Brazilia)</li></ul>
<img src="imagini/zidul.gif" class="imagini-home" align="left" style="margintop:-160px" title="Marele Zid Chinezesc"/></th>
</tr>
</tbody>
</table>
<a href="#sus" id="top" style="margin-top:-20px"><img src="imagini/top.png"
alt="sus" title="Mergi sus?" class="sus" /></a><br/>
</div>
<div class="copybar"><br/>
<a href="sitemap.html" class="sitemap">Sitemap</a>
|
Gheorghe Vasile
Adrian - 12 B
|
</div>
</body>
</html>

17

4.Despre HTML
HTML (Hypertext Markup Language) este un limbaj creat n scopul de a
descrie, n mod text, formatul paginilor Web; fisierele create n acest limbaj vor fi
interpretate de navigatoare, care vor afisa paginile n forma dorit (cu texte
formatate, liste, tabele, formule, imagini, hiperlegturi, obiecte multimedia etc.).
HTML a aprut ca o aplicatie ISO standard (apartine standardului SGML Standard Generalized Markup Language, specializat pentru hipertext si adaptat la
Web).
Asa cum se poate deduce din numele limbajului, HTML descrie
caracteristicile de format ale elementelor incluse prin procedee de marcare.
Acestea pot fi asemnate intuitiv cu marcajele folosite n tipografie pentru a
indica scrierea unui text cu un anumit tip de caractere. Fiecare element va fi
introdus ntre dou marcaje ("tags", n limba englez) - de nceput si sfrsit (uzual) de forma <marcaj> </marcaj>. Caracterele speciale de delimitare a
marcajelor "<", ">" permit deosebirea acestora de textul propriu-zis. De exemplu,
pentru textele aldine (ngrosate), marcajul de nceput este <B> iar de sfrsit </B>.
n informatic, limbajele de marcare sunt foarte convenabile fiindc comenzile
lor pot fi interpretate simplu. LaTeX-ul, de exemplu, este tot un limbaj de
marcare; prin interpretarea fisierelor .tex descrise n acest limbaj se va genera
formatul dorit al documentelor pe diverse tipuri de sisteme de calcul (n cazul,
LaTeX-ului, se obtine uzual format PostScript sau PDF). n schimb, procesoarele
de documente uzuale nu au un limbaj de marcare standardizat, care s ofere
compatibilitate ntre diverse tipuri de calculatoare si sisteme de operare. Astfel,

18

se poate spune c avantajele aplicrii limbajelor de marcare constau n


portabilitate si flexibilitate: fisierele create cu ajutorul lor pot fi transferate pe
orice tip de sistem, unde vor fi interpretate cu ajutorul unor programe specifice.
De fapt, procesoarele de texte uzuale folosesc adesea procedee de marcare
pentru formatri (de exemplu, formatrile de tip caracter din Word); n acest caz
ns, caracterele de control introduse sunt ascunse iar rezultatul editrii este direct
vizibil ("What You See Is What You Get"). n schimb, n limbajele de marcare inclusiv HTML - marcajele sunt introduse n text, astfel nct acestea sunt
exclusiv succesiuni de caractere (litere, cifre, caractere speciale) - fisiere de tip
text.
Referitor la legtura dintre procesoarele de documente uzuale si limbajul
HTML, mai trebuie mentionat faptul c ultimele versiuni ale editoarelor de
documente ofer facilitti de salvare n format HTML - de exemplu, Word,
ncepnd cu versiunea Microsoft Office '97. Mai mult, toate produsele incluse n
aceast gam dedicat biroticii (MS Office) ofer compatibilitate cu formatul
HTML.
Procesele de standardizare si de includere a comenzilor de marcare n fisierele
HTML permit navigatoarelor s citeasc si s formateze paginile Web, lucru
foarte important n conditiile n care ele contin nu numai texte alb-negru, ci si
culori, imagini, hiperlegturi, diverse obiecte. Practic, marcajele HTML asigur
controlul asupra modului de afisare a obiectelor corespunztoare n cadrul
programelor de vizualizare a documentelor HTML - navigatoarele.
Limbajul HTML a evoluat n versiuni succesive, odat cu evolutia
protocolului HTTP si a programelor de navigare. Astfel, HTML 1.0 era

19

compatibil cu Mosaic, primul program de navigare, dar dup aparitia unor


navigatoare noi, a fost necesar introducerea unui standard oficial Internet pentru
construirea paginilor (HTML 2.0) si extinderea sa cu noi facilitti: formule
matematice, tabele, moduri avansate de descriere a organizrii paginilor
(ncepnd cu HTML 3.0).
Standardizarea oficial a limbajului HTML a fost realizat de consortiul
WWW si dezvoltat de diversi productori de soft (unii dintre acestia urmresc
chiar promovarea navigatoarelor proprii prin introducerea unor particularitti n
formatele oficiale).
Paginile HTML se pot crea cu orice editor de texte de ctre utilizatorii care
cunosc limbajul HTML sau, mai simplu, se pot utiliza editoare speciale, n care
obiectele se introduc interactiv iar codul HTML se genereaz automat. Avnd n
vedere c si n acest caz este util cunoasterea marcajelor generate pentru
corectarea eventualelor erori (mai ales n cazul link-urilor), vom prezenta n
continuare entittile care se pot introduce n paginile HTML si marcajele
caracteristice acestora:
Elementele limbajului HTML
Toate obiectele HTML sunt introduse ntre marcaje care le definesc;
majoritatea acestora sunt de forma <tip_obiect> (la nceput) si </tip_obiect>
(la sfrsit). Tipul standard al obiectului poate fi specificat cu majuscule sau
minuscule; totusi, se recomand utilizarea majusculelor fiindc astfel marcajele
ies n evident.
Majoritatea navigatoarelor permit vizualizarea paginii curente n formatul
surs HTML (forma pe care o interpreteaz pentru afisarea paginii). La

20

interpretare, programele de navigare ignor spatiile si <Enter>-urile, aplicnd


formatarea specificat.
Exist ns si marcaje cu parametri; acestea au forma <tip_obiect
param1=valoare1 param2=valoare2 >. De exemplu, obiectele de tip imagine
sunt introduse cu delimitatorul <IMG>, care are diversi parametri. Pentru
definirea hiperlegturilor se foloseste marcajul <A>, care are de asemenea
parametri proprii. Codurile de marcare HTML pot fi clasificate n urmtoarele
categorii:
1 marcaje de baz - cele care delimiteaz pagina / documentul HTML, titlul
acesteia si corpul paginii;
2 marcaje pentru structurarea documentului - care permit introducerea de
subtitluri, paragrafe, linii de delimitare;
3 marcaje pentru formatarea textului si crearea listelor;
4 marcaje pentru crearea hiperlegturilor (hyperlinks);
5 marcaje pentru introducerea de obiecte - tabele, formule, imagini sau
obiecte multimedia preluate din fisiere, formulare.
Vom descrie n paragrafele urmtoare, elementele caracteristice fiecreia din
aceste categorii.
Pentru structurarea si organizarea informatiilor din paginile web se pot
utiliza frame-uri (marcajul <FRAME>), prin care la un moment dat se afiseaz
mai multe ferestre continnd fiecare cte o pagin. Introducerea si gestiunea
frame-urilor se realizeaz foarte convenabil folosind editoarele HTML.

21

Mai mentionm faptul c n ultimele versiuni ale limbajului HTML si ale


browser-elor s-a introdus posibilitatea integrrii, respectiv lansrii n executie
prin navigator, a unor aplicatii. Acestea sunt scrise n limbajul Java, un limbaj
cu caracteristici distribuite si obiectuale, adaptat programrii n Web; ele se
numesc "applet"-uri si se introduc n sursele HTML cu marcajul <APP> sau
<APPLET> . Ultimele versiuni de editoare HTML permit introducerea
interactiv a applet-urilor Java.
Marcaje de baz
O pagin Web este delimitat de marcajele <HTML> si </HTML> care indic
nceputul si finalul documentului si contine:

zon de antet cuprins ntre marcajele: <HEAD> </HEAD> si

un corp delimitat de marcajele: <BODY> </BODY>.

Zona de antet este utilizat de ctre programele de cutare pe site-urile web si


permite specificarea titlului paginii care va fi afisat de navigator (nu apare
propriu-zis n continutul paginii).
titlul, introdus n antet, este cuprins ntre marcajele <TITLE> </TITLE>.
Astfel, o form extrem de simpl a unui document HTML ar putea fi cea din
urmtorul exemplu:
<HTML>
<HEAD><TITLE>Titlul documentului </TITLE>
</HEAD>
<BODY>Document HTML foarte simplu</BODY></HTML>

22

Marcaje pentru structurarea documentului


Programele de navigare asigur afisarea diferentiat a unot titluri si
subtitluri pentru sectiunile paginii, dup criteriile implementate n acest scop la
conceperea sa (litere mai mari sau mai mici, diverse culori, litere aldine sau
simple, unul sau mai multe rnduri libere dup titlu etc.).
Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde
n este o cifr ntre 1 si 6 care specific nivelul titlului (1 este titlul principal iar 6
corespunde celui mai sczut nivel). Astfel:
<H1> </H1>

indic un subtitlu de nivelul 1

<H6> </H6>

indic un subtitlu de nivelul 6.

Pentru separarea zonelor paginii se pot folosi treceri la:

linie nou - cu marcajul <BR>, eventual cu desenarea unei linii orizontale


- marcajul <HR>;

paragraf nou - cu marcajul <P> (se insereaz o linie nou si eventual se


face o indentare). Marcajul </P> desemneaz sfrsitul de paragraf dar
este mai rar folosit (se poate omite).

Marcaje pentru formatarea textului si crearea listelor


Formatrile uzuale de texte permit scrierea cu caractere:

23

aldine - n acest scop pentru acel text se aplic marcajele

<B> </B>;

cursive (italice) - pentru acel text se aplic marcajele

subliniate - textul se introduce ntre marcajele

<I> </I>;

<U> </U>.

Unele programe mai vechi de navigare nu permiteau reprezentarea acestor


formate; n acest caz, se aplicau alte moduri de evidentiere a textelor respective
(culori, video invers).
Alte tipuri de formatri de caractere care se pot defini se refer la:
dimensiunea fonturilor si culori - se va utiliza marcajul cu parametri:
<FONT SIZE=x COLOR=y> </FONT> , care indic utilizarea unui font de
dimensiune x si culoare y.

x poate fi un numr ntre 1 si 12, indicnd mrimea exact, sau un numr


cu semn, indicnd mrimea relativ la dimensiunea curent.

y poate fi numele unei culori standard, specificat n limba englez si ntre


ghilimele, sau, eventual, descompunerea unei culori n componentele RGB,
sub form hexazecimal (cte dou cifre hexa pentru fiecare component).

Suplimentar, se pot crea pagini de stiluri, n care s se defineasc stiluri logice,


modificabile ulterior; n acest scop, se folosesc marcajele <DN> - definitie,
<EM> - punere n evident, <STRONG> - accentuare puternic.
Pentru tastaturile care suport numai codurile ASCII, caracterele speciale se pot
crea folosind formatul &nume_caracter - de exemplu, &egrave; pentru e. Avnd
n vedere semnificatia special a caracterelor <, > si &, aparitia lor n
documente trebuie specificat sub forma caracterelor speciale: &lt; , &gt; ,
respectiv &amp; .

24

Prezentm n continuare un exemplu de document HTML, precum si modul


n care acesta este afisat de Netscape Navigator.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Pagina simpla</title>
</head>
<body>
<p>Acesta este un exemplu simplu de o
pagina HTML. Ea arata cum
pot aparea caractere <strong>bold</strong>, <em>italic</em>,
<font size="5">mai mari</font>,
<font size="1">mai mici</font>,
respectiv insera
o mica imagine
<img src="Handshake8114.gif"
width="20" height="14">.
</p>
</body>
</html>

n figura, se observ c textul propriu-zis al documentului poate fi delimitat


fat de codurile de marcare, iar formatarea textului din documentul HTML nu
corespunde cu cea afisat de programul de vizualizare:

textul este extins pentru a ocupa ntregul ecran si este afisat cu un corp de
liter diferit fat de sursa HTML;

25

terminatorii de linie nu sunt respectati;

spatiile albe suplimentare din documentul surs sunt ignorate.

Introducerea obiectelor de tip imagine (marcajul <IMG>) este detaliat mai jos.
Limbajul HTML permite definirea mai multor tipuri de liste si imbricarea
lor (includerea unor liste n altele), caz n care trebuie verificat cu atentie
corespondenta dintre marcajele de nceput si sfrsit pentru fiecare list.
Formatarea listelor la afisarea paginii (introducerea bulinelor, numerotrii etc.) se
face de ctre programul de navigare.
Elementele listelor se introduc ntre marcajele <LI> </LI> ("list item").
Modul de aparitie al elementelor depinde de tipul de list n care sunt incluse (cu
buline, numerotate etc.), determinat de marcajul specific.
Astfel, listele pot fi:

neordonate (cu buline) - delimitate de marcajele <UL> </UL>


("unordered list"); elementele lor se afiseaz cu buline;

ordonate (numerotate) - delimitate de marcajele <OL> </OL>


("ordered list"); elementele lor se vor numerota;

de tip meniu - delimitate de marcajele <MENU> </MENU>; elementele


acestor liste apar ntr-o reprezentare compact pe ecran (multicoloan);

glosare (liste de definitii) delimitate de marcajele <DL> </DL>


("definition list"); elementele acestora au cte dou componente, introduse
respectiv cu marcajele <DT> (pentru nume) si <DD> (pentru semnificatia
asociat);

26

tabele scurte - create cu marcajul <DIR>.

Listele utilizate cel mai frecvent sunt cele ordonate si neordonate. Prezentm
n continuare un exemplu simplu de pagin HTML care contine aceste tipuri de
liste.
<html>
<head>
<title>Pagina cu liste</title>
</head>
<body>
<p>Aceasta pagina exemplifica crearea listelor</p>
<p>Cele mai uzual folosite tipuri de liste sunt:
<ul>
<li>neordonate</li>
<li>ordonate</li>
</ul>
<p>O lista ordonata este o lista numerotata:
<ol>
<li>primul element;</li>
<li>al doilea element...</li>
</ol>
</body>
</html>

27

Exemple de liste ntr-o pagin HTML


Marcaje pentru crearea hiperlegturilor
Hiperlegturile ("hyperlinks") se introduc cu marcajele <A> </A> ("anchor")
aplicate asupra unui text sau a unei imagini. Ele se pot crea ctre:
adrese URL - astfel se asigur accesul n cadrul procesului de navigare (prin
protocoale specifice), nu numai la paginile web, ci si la diverse servicii
Internet;
fisiere / resurse locale adic aflate pe acelasi calculator cu pagina creat link-uri locale ; acestea ar putea fi accesate si printr-un URL cu protocolul
"file" dar pentru mai mult simplitate, este suficient specificarea numelui
si cii fisierului local;
o zon din documentul HTML curent - link-uri interne.
n fiecare din aceste cazuri, un click pe textul sau imaginea respectiv va
determina activarea legturii si afisarea prin intermediul navigatorului a resursei
asociate link-ului.
Resursa asociat unei legturi este descris prin parametrii marcajului <A>:

28

HREF - permite asocierea unei adresei URL, crearea unei legturi locale
prin specificarea numelui si cii fisierului corespunztor sau a unei legturi
interne documentului; este cel mai important parametru pentru construirea
de hiperlegturi;
NAME - numele hiperlegturii sau al zonei dintr-o pagin ctre care se face
referirea, n cazul unui link intern;
METHODS - metodele de acces (acest parametru se utilizeaz doar n
prelucrri

speciale).

Astfel, un link local sau ctre o adres URL se poate defini pe un text cu:
<A HREF="resursa"> text </A>.
O legtur intern ctre o zon a documentului curent se indic folosind marcajul
<A NAME="nume-zona">.
Marcaje pentru introducerea de obiecte
Prima versiune de HTML (1.0) nu permitea descrierea tabelelor sau a
informatiilor formatate. Asemenea obiecte trebuiau create formatat si introduse
ca obiect deja formatat, cu marcajele <PRE>, </PRE>. Aceste marcaje indicau
navigatorului c textul inclus trebuia afisat caracter cu caracter, fr vreo
interventie de formatare. n versiunile ulterioare ale limbajului HTML, s-au
introdus ns facilitti elegante de formatare, de includere a tabelelor si a altor
obiecte.
n HTML 3.0 s-au introdus obiectele de tip tabel, formate din linii
orizontale si coloane verticale la a cror intersectie se formeaz celulele. Acestea
pot contine intrri diverse: texte, figuri sau chiar alte tabele. Se pot realiza reuniri

29

de celule (de exemplu, pentru titluri mai lungi). Atributele de formatare a


tabelului (aliniere, stilul chenarului si marginilor etc.) se definesc n proiectarea
paginii dar modul lor de afisare va depinde si de programul de navigare.
Tabelele se introduc ntre marcajele <TABLE> </TABLE>, crora li se
pot atasa (optional) parametrii BORDER si RULES. Un titlu pentru tabel se
poate introduce cu marcajul <CAPTION>. Fiecare coloan se defineste cu
marcajul <COL>, avnd ca parametru ALIGN - modul de aliniere a informatiilor
din acea coloan (LEFT, CENTER, RIGHT).
Antetul tabelului se poate indica ntre marcajele <TH></TH> ("Table
Header"), pentru trecerea la o linie nou se utilizeaz marcajul <TR> ("Table
Row") iar celulele individuale se marcheaz cu <TD> ("Table Data"), eventual
cu parametru de aliniere. Se mai pot specifica alinieri orizontale sau verticale ale
celulelor, grupri de celule etc. Aceste marcaje permit navigatorului s afiseze
diferentiat informatiile din tabel.
Prezentm n continuare un exemplu simplu de tabel.
<HTML>
<HEAD>
<TITLE>Pagina cu tabel</TITLE>
</HEAD>
<BODY>
<H1>Aceasta pagina da un exemplu de folosire a unui
tabel</H1>
<H3>Vanzari anuale:</H3>
<TABLE> <TH>1996</TH><TH>1997</TH><TH>1998</TH><TR>
<TD>125 milioane lei</TD><TD>160 milioane lei</TD><TD>231

30

milioane lei</TD>
</TABLE>
</BODY>
</HTML>

Exemplu de tabel ntr-o pagin HTML


Mrimea liniilor si a coloanelor poate fi controlat suplimentar prin marcajele
<ROWSPAN=x> si respectiv <COLSPAN=y>, fiecare indicnd mrimea n
"celule normale". n plus, se poate indica trasarea unei margini pentru tabel, prin
marcajul <TABLE BORDER>.
Includerea imaginilor se face folosind marcajul <IMG>, care are parametri
specifici:

SRC indic (dup semnul '=') URL-ul imaginii, respectiv calea fisierului
dac acesta este local; uzual, se accept fisiere n format GIF sau JPEG;

ALLIGN controleaz alinierea imaginii fat de limita inferioar a textului


(TOP, MIDDLE sau BOTTOM); este un parametru optional;

ALT furnizeaz textul afisat n locul imaginii dac utilizatorul dezactiveaz


optiunea de afisare a imaginilor (parametru optional);

31

ISMAP este un indicator optional pentru imaginile care sunt hrti


selectabile.

Astfel, introducerea simpl a unei imagini se poate realiza cu <IMG


SRC="specificare-imagine">. Un exemplu de imagine inserat ntr-o pagin
HTML

este

prezentat

figura

de

mai

sus.

Remarcm faptul c, utiliznd parametri specifici, marcajul <IMG> se poate


folosi si pentru inserarea unor fisiere multimedia, cum ar fi secventele video.
Avnd n vedere c aceste operatii se realizeaz mai usor folsind un editor
HTML.
Formulare. HTML 1.0 permitea uzual doar transferarea informatiilor de la
furnizori ctre utilizatori, transferul n sens invers fiind foarte dificil. Odat cu
dezvoltarea Web-ului si mai ales cu utilizarea sa n scopuri comerciale si n
diverse alte domenii, s-a fcut simtit necesitatea comunicrii n dublu sens
pentru preluri de comenzi, completarea unor fise de nregistrare, distribuirea de
produse soft, administrarea de chestionar, transmiterea unor informatii personale
etc. Acestea au fost motivatiile introducerii formularelor n HTML 2.0.
Formularele contin obiecte de control care permit utilizatorilor introducerea de
informatii prin completarea unor cmpuri specifice (casete de text), prin
selectarea sau activarea unor optiuni (comutatoare, grupuri sau liste de optiuni).
Aceste informatii vor fi transmise, dup activarea butonului SUBMIT
(echivalent cu tastarea lui <Enter>) proprietarului paginii, introduse n baze de
date dedicate si prelucrate cu aplicatii specifice.
Formularele se introduc prin marcajelele <FORM> ... </FORM> , crora li se
ataseaz parametri specifici care definesc metodele de transmitere si tratare a

32

datelor. Un formular poate contine obiecte de control de diverse tipuri, definite cu


marcajul <INPUT> si o varietate de parametri care stabilesc, pentru obiectul
definit, tipul, dimensiunea si modul lui de afisare. Astfel, se pot crea cmpuri de
text (care vor fi completate cu texte de ctre utilizator), liste de alternative,
comutatoare, grupuri de optiuni, butoane, hrti active etc.
Datele preluate prin intermediul formularelor se trateaz conform standardului
CGI (Common Gateway Interface) prin intermediul unor programe sau script-uri
CGI. n plus, un asemenea script poate interactiona cu baza de date creat pentru
realizarea unor actiuni specifice (de exemplu, hrtile active folosesc script-uri
CGI pentru a executa diferite actiuni, n functie de zona selectat de utilizator).
Script-urile CGI pot executa si alte operatii dect prelucrarea formularelor,
producnd iesiri convenabile. Dac o hiperlegtur indic spre un script CGI, la
selectarea legturii se va executa script-ul (cu anumite variabile de context care
retin diverse informatii de stare). Script-ul va produce un fisier, de exemplu o
pagin web, care va fi interpretat() de navigator. Acest mecanism permite scripturilor s genereze, aproape instantaneu, pagini web care s satisfac diverse
cerinte ale utilizatorilor, furniznd anumite rspunsuri asteptate n urma unor
actiuni.
Crearea interactiv a formularelor, folosind produse soft specializate n
realizarea de pagini Web este relativ accesibil pentru utilizatorii familiarizati cu
caracteristicile obiectelor de control specifice aplicatiilor soft dar tratarea
ulterioar a informatiilor transmise necesit cunostinte de specialitate.
Numele, simbolurile si procedura de introducere interactiv dintr-un editor
HTML (de exemplu, Microsoft Front Page) a obiectelor de control sunt extrem

33

de apropiate de cele asociate obiectelor similare din formularele sau rapoartele


Microsoft Access. Pentru utilizatorii mai putin avizati ns, crearea, chiar
interactiv, a formularelor este mai dificil.

34

5.Resurse de hard i soft necesare


Situl a fost realizat cu ajutorul programelor Notepad, Adobe Photoshop si Windows
Movie Maker. Cerinele de sistem ale programului nu sunt exagerate.

Resurse minime :
1) Hardware :
- Procesor (CPU) : 500 MHz +
- Memorie (RAM): 64 MB
- Spaiu liber pe hard-disk : 30 MB
- Monitor :1024*768
- Un browser oarecare: Internet explore ,Mozilla, Opera
2) Software :
- Sistem de operare : Windows 98/XP
Resurse recomandate:
1) Hardware :
- Procesor (CPU) : 1000 MHz +
- Memorie (RAM): 128 MB
- Spaiu liber pe hard-disk : 30 MB
- Monitor : VGA 32-bit color (1024x768)
- Un browser oarecare: Internet explorer ,Mozilla,Opera
2) Software :
-Sistem de operare :
Windows XP,Vista,7

35

6. Folosirea programelor
Adobe Photoshop editarea imaginilor
Notepad Crearea si editarea codului sursa al sitului

36

7.Bibiografie
http://ro.wikipedia.org/
http://www.tutorialehtml.com/

37