Atestat informatica

Prezentare proiect



LUCRARE PENTRU
ATESTAREA
COMPETENELOR
PROFESIONALE
*
White Star Line




Absolvent : Benegui Anisia Teodora

Profesor ndrumtor :Boian Flavius

Colegiul: Mihai Viteazul Bumbesti-J iu

Sesiunea : mai 2015
Atestat Informatica
Prezentare Proiect
2

Cuprins:




Descrierea aplicaiei................................................................................3
Modul de utilizare...................................................................................4
Structura aplicatiei..................................................................................5
Motivul alegerii temei..............................................................................6
Detalii tehnice..........................................................................................7
Resurse hard i soft.14
Despre HTML..15
Bibliografie..............................................................................................28










Atestat Informatica
Prezentare Proiect
3


Descrierea aplicaiei

Aplicaia reprezint un site ce a fost realizat n limba romn, cu
ajutorul limbajului HTML. Textul a fost prealabil dactilografiat in Microsoft
Word, iar imaginile au fost preluate din anumite surse.
Pentru a insera codurile necesare crerii site-ului am folosit editor-ul
NotePad++, datorit interfaei sale grafice uor de utilizat.





Atestat Informatica
Prezentare Proiect
4


Modul de utilizare

Cine are acas un calculator conectat la internet ar putea naviga pe
ceea ce am creat eu foarte uor i simplu, deoarece are o grafic prietenoas
nct orice utilizator se poate descurca cu usurin n navigarea site-ului
indiferent de nivelul de cunostine pe care le are acesta n folosirea unei astfel
de interfee. Astfel prin simpla apsare a unui buton utilizatorul poate ajunge
cu usurin la informaiile dorite.
Toate informaiile sunt bine structurate, astfel nct chiar i cineva care
ar ajunge pe acest site din intmplare s poat nelege despre ce e vorba aici.
Se poate accesa site-ul i prin deschiderea fisierului index.html.






















Atestat Informatica
Prezentare Proiect
5


Structura aplicaiei

Programul conine o form principal alctuit din mai multe meniuri:





Meniul Home:reprezint pagina de
start a site-ului unde avem
prezentate informatii generale
despre compania White Star Line.

Meniul Inceputurile: adduce
informatii despre cum a luat
nastere compania si care au fost
primele nave construite
Meniul Nave din clasa
Olimpicului: prezinta compania
rivala si principalele rute ale
navelor construite de compania
White Star Line.

Meniul Cele mai importante nave: prezinta intocmai cele mai cunoscute si
cele mai mari nave construite de companie , printer care si binele cunoscutul
RMS Titanic,iar urmatoarele 4 submeniuri aduc informatii despre fiecare nava
imparte.

Meniul Imagini: ne duce la o galerie de imagini cu navele construite de
companie, sedii ale acesteia si sigla companiei.

Atestat Informatica
Prezentare Proiect
6


Motivul alegerii temei
Am ales tema prezentata deoarece inca de mic am fost pasionat de nava
RMS Titanic, aceasta pasiune a inceput imediat dupa vizionarea filmului cu
acelas nume. Am ramas impresionat de dimensiunile navei si de performantele
tehnice ce le indeplinea. Asadar aceasta scurta aplicatie si indatoreaza vechiei
mele pasiuni.


















Atestat Informatica
Prezentare Proiect
7


Detalii tehnice
Pentru a crea documentele am utilizat programul NotePad++, un editor
de text cu o interfa util n crearea tagurilor. Am folosit HTML,CSS,
JavaScript.

Fisierul style.css : este present pentru a da forma aplicatiei. Fecare din
paginile atestatului are o legatura la acest document pentru ca toate sa aiba aceasi
forma si stil.

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-
serif;
font-size: 14px;
background-
image:url(imagini/mount3.jpg);
}

#tot {
margin: 0 auto;
width: 1200px;

}
#header {
width: 1196px;
float: left;
border: 0px solid #ccc;
height: 300px;
margin: 0px 0px 0px 0px;
background-
image:url(imagini/logo.jpg);
}
#borderstanga{
border: 2px solid #ccc;
margin: 0px 0px 0px 0px;

height: 500px;
width: 276px;
float: left;
}
#stanga{
color: #333;
border: 0px solid #ccc;
background-
image:url(imagini/stanga.png);
margin: 0px 0px 0px 0px;

height: 490px;
width: 300px;
float: left;
padding-top:10px;

}

#stanga a{
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding-left:10px;
padding-right:60px;
padding-top:10px;
padding-bottom:10px;

}
#stanga a:hover{
background-color:#2C75FF;
}




Atestat Informatica
Prezentare Proiect
8

#dreapta {
float: left;
color: #333;
border: 2px solid #ccc;
background-
image:url(imagini/back1.jpg);
margin: 0px 0px 0px 0px;
padding:10px;
height: 480px;
width: 896px;

}
#footer {
width: 1196px;
height:70px;
clear: both;
color: #333;
border:2px solid #ccc;
background-color: #000000;
margin: 0px 0px 10px 0px;
padding-top:10px;
}
p{
color:#ffffff;
font-size:11px;
text-align:center;}
h1{
color:#ABD6F1;
font-size:18px;
}
h2{
color:#000000;
font-size:18px;
text-align:center;
}
a:link{
text-decoration:none;}
a:hover {text-decoration: underline;}
img {
border: 1px solid #666666;
}



Fisierul index.html: reprezinta codul in format html pentru prima pagina a
aplicatiei aceasta contine informatiile generale despre tema aleasa, in cazul
meu compania White Star Line. Aceasta pagina reprezentata printr-o imagine
este pe prima pagina a acestui document. Codul in HTML arata in felul
urmator:

<!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>
<title>Atestat-Andrei Iuga</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="Shortcut icon" href="imagini/favicon.ico">
</head>

<body>
<div id="tot">
<div id="header">
</div>
<div id="borderstanga">
<div id="stanga">
<div id="navigare">
Atestat Informatica
Prezentare Proiect
9

<a href="index.html">Home</a><br>
<br>
<a href="inceputurile.html">Inceputurile</a><br>
<br>
<a href="navedinclasaolimpicului.html">Nave din clasa
Olimpicului</a></br>
<br>
<a href="celemaiimportantenave.html">Cele mai importante
nave</a><br>
<br>
<a href="imagini.html">Imagini</a><br>
</div>
</div>
</div>
<div id="dreapta" style="overflow:scroll">
<center><h2><font face="comic sans ms" size=6> White Star Line</font>
.</h2></center>
<br>
<br>
<br>
<h1><font color=black>White Star Line sau The Oceanic Steam Navigation
Company a fost o remarcabila firma si companie maritima britanica, renumita astazi pentru
multitudinea si calitatea vapoarelor pe care aceasta le-a lansat la apa. Printre cele mai
renumite vapoare construite de White Star Line se numara RMS Titanic si HMHS Britannic
(nava-geamana Titanicului).</font></h1>
<center><img src="imagini/HMHS Britannic.jpg"><img
src="imagini/titanic.jpg"></center>
</div>
<div id="footer">
<p> Copyright 2014 Toate drepturile rezervate De Andrei Iuga</p><br>
</div>
</div>
</body>
</html>

Fisierul celemaiimportantenave.html
<!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>
<title>Atestat-Andrei Iuga</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="Shortcut icon" href="imagini/favicon.ico">
</head>


<body>


Atestat Informatica
Prezentare Proiect
10

<div id="tot">

<div id="header">
</div>
<div id="borderstanga">
<div id="stanga">
<div id="navigare">
<a href="index.html">Home</a><br>
<br>
<a href="inceputurile.html">Inceputurile</a><br>
<br>
<a href="navedinclasaolimpicului.html">Nave din clasa
Olimpicului</a></br>
<br>
<a href="celemaiimportantenave.html">Cele mai importante
nave</a><br>
<br>
<a href="hmhsbritannic.html"># HMHS Britannic</a>
<br>
<br>
<a href="rmstitanic.html"># RMS Titanic</a>
<br>
<br>
<a href="rmsolympic.html"># RMS Olympic</a>
<br>
<br>
<a href="rmsadriatic.html"># RMS Adriatic</a>
<br>
<br>
<a href="imagini.html">Imagini</a><br>



</div>
</div>
</div>
<div id="dreapta" style="overflow:scroll">
<center><h2><font face="comic sans ms" size=6> Cele mai importante nave</font>
.</h2></center>
<br>
<br>
<br>
<h1><font color=black>

</font></h1>
<center><a href="hmhsbritannic.html"><img
src="imagini/Titanic...jpg"></a>
<br><a href="hmhsbritannic.html"><img src="imagini/Br4.jpg"></a>
<br><a href="rmsadriatic.html"><img src="imagini/4.jpg"></a>
Atestat Informatica
Prezentare Proiect
11

<br><a href="rsmolympic.html"><img
src="imagini/Olympic1.jpg"></a></center>

</div>
<div id="footer">
<p> Copyright 2014 Toate drepturile rezervate De Andrei Iuga</p><br>

</div>

</div>

</body>

</html>
Fisierul navedinclasaolipicului.html
<!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>
<title>Atestat-Andrei Iuga</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="Shortcut icon" href="imagini/favicon.ico">
</head>


<body>


<div id="tot">

<div id="header">
</div>
<div id="borderstanga">
<div id="stanga">
<div id="navigare">
<a href="index.html">Home</a><br>
<br>
<a href="inceputurile.html">Inceputurile</a><br>
<br>
<a href="navedinclasaolimpicului.html">Nave din clasa
Olimpicului</a></br>
<br>
<a href="celemaiimportantenave.html">Cele mai importante
nave</a><br>
<br>
<a href="imagini.html">Imagini</a><br>



Atestat Informatica
Prezentare Proiect
12

</div>
</div>
</div>
<div id="dreapta" style=overflow:scroll>
<center><h2><font face="comic sans ms" size=6 color="#22427C">Nave din clasa
Olimpicului</font> .</h2></center>
<br>
<br>
<br>
<h3>Firma maritima Cunard Line a fost cel mai mare rival al White Star. Ca raspuns
la provocarea Cunard Line (ce consta in lansarea vapoarelor RMS Lusitania si RMS
Mauretania), White Star a lansat la apa vapoarele RMS Olimpic, RMS Titanic si HMHS
Britannic. In timp ce navele firmei Cunard Line erau foarte rapide, cele ale firmei White Star
Line erau cele mai mari si cele mai luxoase din Intreaga lume. Britannic a fost numit, la
inceput, Gigantic si avea n jur de 1000 de picioare lungime. Numele ?i dimensiunile sale au
fost schimbate imediat dupa ce avut loc scufundarea Titanicului, anume in anul 1912. Dintre
toate cele trei nave, numai Olimpicul a fost profitabil pentru White Star Line. RMS Titanic s-a
scufundat in turul sau inaugural, n timp ce HMHS Britannic a fost rechizi?ionat de catre
guvernul britanic, inainte sa fie mobilat in totalitate. El a fost folosit ca nava-spital n Primul
Razboi Mondial, pana ce s-a scufundat lovind o mina exploziva pe 21 noiembrie 1916.</h3>
<center><br><font face="comic sans ms" color="silk" size=5>Principalele
rute</font>
<font face="comic sans ms" color="silk" size=5>
<br>1872-1960 Liverpool - New York
<br>
<br>1872-1960 Liverpool - Boston / Philadelphia
<br>
<br>1899-1934 Liverpool - Melbourne - Sydney
<br>
<br>1883-1926 Liverpool - Noua Zeelanda
<br>
<br>1872-1873 Liverpool - Valparaiso
<br>
<br>1872-1873 Liverpool - Suez - Calcutta
<br>
<br>1875-1883 San Francisco - Yokohama - Hong Kong.
<br>
<br>1903-1909 New York - Azore - Gibraltar - Napoli - Genoa.
<br>
<br>1907-1934 Southampton - Cherbourg - New York.
<br>
<br>1909-1939 Liverpool - Belfast / Glasgow - Quebec - Montreal.
<br>
<br>1922-1926 Hamburg / Bremen - Quebec - Montreal
<br>
<br>1928-1930 Londra - Le Havre - Southampton - Quebec - Montreal</font></center>

</div>
<div id="footer">
<p> Copyright 2014 Toate drepturile rezervate De Andrei Iuga</p><br>
Atestat Informatica
Prezentare Proiect
13


</div>

</div>

</body>

</html>

In felul acesta arata si restul paginilor , diferenta fiin doar la continutul
informatiilor pe care le afiseaza aplicatia in timpul rulari de catre un utilizator.

La crearea pagini imagini.html am facut apel la un set de coduri realizate in
JavaScript, pentru a efectua rularea si redarea imaginilor intr-un mod mai
estetic si mai fluid. Acest set de coduri este intitulat Lightbox si se poate
descarca de pe internet. In cazul meu am adaptat programul la informatiile
referitoare la aplicatia mea.









Atestat Informatica
Prezentare Proiect
14

Resurse hard i soft

Pentru realizarea acestui site au fost utilizate ca programe de
lucru,Microsft Office Picture Manager 2010, HTML & CSS, precum i
browserele Mozilla Firefox i Google Chrome.
Cerinele de sistem a programelor utilizate nu sunt exagerate i
corespund n mare parte, acestea sunt:


Resurse minime:
Hardware
- Procesor (CPU) : 900 MHz+
-Memorie (RAM) : 64Mb
-Spatiu liber : 190Mb
-Monitor : VGA 16-bit color
Software
-Sistem de operare : Windows XP
-Internet Browser : Google Chrome sau Mozilla Firefox 3.0.4

Resurse recomandate:
Hardware
- Procesor (CPU) : 1200 MHz+
-Memorie (RAM) : 512Mb
-Spaiu liber : 380Mb
-Monitor : VGA (1028 x 768)
Software
-Sistem de operare : Windows XP
-Internet Browser : Google Chrome sau Mozilla Firefox 3.0.4





Atestat Informatica
Prezentare Proiect
15

. Despre 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 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
Atestat Informatica
Prezentare Proiect
16

ferestre continnd fiecare cte o pagin. Introducerea si gestiunea frame-urilor se
realizeaz foarte convenabil folosind editoarele HTML.
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>
Atestat Informatica
Prezentare Proiect
17

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:
aldine - n acest scop pentru acel text se aplic marcajele <B> </B>;
cursive (italice) - pentru acel text se aplic marcajele <I> </I>;
subliniate - textul se introduce ntre marcajele <U> </U>.
Atestat Informatica
Prezentare Proiect
18

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; .
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>
Atestat Informatica
Prezentare Proiect
19

<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>

Afisarea cu Netscape Navigator a unui document HTML simplu
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;
Atestat Informatica
Prezentare Proiect
20

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);
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
Atestat Informatica
Prezentare Proiect
21


<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>
Atestat Informatica
Prezentare Proiect
22


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>:
HREF - permite asocierea unei adresei URL, crearea unei legturi locale prin
specificarea numelui si cii fisierului corespunztor sau a unei legturi
Atestat Informatica
Prezentare Proiect
23

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 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
Atestat Informatica
Prezentare Proiect
24

<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 milioane
lei</TD>
</TABLE>
</BODY>
</HTML>
Atestat Informatica
Prezentare Proiect
25


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);
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 n 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.
Atestat Informatica
Prezentare Proiect
26

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
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
Atestat Informatica
Prezentare Proiect
27

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 script-
urilor 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[1] 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 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






















Atestat Informatica
Prezentare Proiect
28

BIbliografie

Pentru a realiza aceasta aplicatie am vizionat un tutorial video din care am desprins
cateva idei despre cum se creeaza un site web. Linkul catre tutorialul respective este
acesta : http://www.youtube.com/watch?v=7lFjVW_47QU
De asemenea am citit si cartile :
-Prezentri multimedia pe Web. Limbajele XHTML+TIME i SMIL, Editura
Polirom de Mihaela Brut, Sabin Buraga, Iai, 2004.
- HTML 4.01 Specification, Recomandare a Consoriului Web de Dave Raggett,
Arnaud Le Hors, Ian Jacobs.