Documente Academic
Documente Profesional
Documente Cultură
STRUCTURA
La inceput apare home page-ul de unde puteti naviga oriunde pe site :
In meniul home-pageului apare si zona cu cele mai solicitate produse. Aceasta zona este
reprezentata de:
Despre Noi
Contact
Produse
Submeniul Creveti:
Submeniul Hrana:
Submeniul Acvarii:
HTML
1 Limbajul 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, 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.
marcaje de baz - cele care delimiteaz pagina / documentul HTML, titlul acesteia si
corpul paginii;
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.
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:
<HEAD> </HEAD> si
<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>
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).
<B> </B>;
<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.
10
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, è pentru e.
Avnd n vedere semnificatia special a caracterelor <, > si &, aparitia lor n documente trebuie
specificat sub forma caracterelor speciale: < , > , respectiv & .
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>
11
textul este extins pentru a ocupa ntregul ecran si este afisat cu un corp de liter diferit
fat de sursa HTML;
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:
12
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>
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;
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 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;
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 <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.
14
<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>
SRC indic (dup semnul '=') URL-ul imaginii, respectiv calea fisierului dac acesta este
local; uzual, se accept fisiere n format GIF sau JPEG;
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.
15
Astfel, introducerea simpl a unei imagini se poate realiza cu <IMG SRC="specificareimagine">. Un exemplu de imagine inserat ntr-o pagin
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 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 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 dar tratarea ulterioar a informatiilor transmise necesit cunostinte de
specialitate.
16
Detalii Tehnice
Codul sursa :
(home page)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aquatic</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!-.style2 {
font-size: 18px;
font-weight: bold;
}
.style3 {color: #0099FF}
.style4 {
color: #00CCFF;
font-weight: bold;
}
.style5 {font-weight: bold}
-->
</style>
</head>
<body>
<div id="mainPan">
<div id="topPan">
<a href="index.html"><img src="images/logo.gif" alt="Aquatic" width="136"
height="31" border="0" class="logo" title="Aquatic"/></a> <b>
<p class="caption style4"><font color="#0099FF"> Cu noi aduci natura in casa ta</font>
</p></b>
</div>
<div id="headerPan">
<ul class="leftmenu style5">
<li></li>
<li>
<div align="left"><a href="index.html">Home</a></div>
17
</li>
<li>
<div align="left"><a href="resurse/Produse.html">Produse </a><a
href="resurse/Despre Noi.html">Despre Noi</a><a
href="resurse/Contact.html">Contact</a></div>
</li>
</ul>
</div>
<div id="bodyPan">
<div id="leftPan">
<h2>Parteneri </h2>
<ul>
<li><a href="http://www.acvariu.ro"
target="http://www.acvariu.ro">acvariu.ro</a></li>
<li><a href="http://www.reef.ro" target="http://www.reef.ro">reef.ro</a></li>
<li><a href="http://www.pepika.ro"
target="http://www.pepika.ro">pepika.ro</a></li>
<li> </li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="rightPan">
<p> </p>
<p> Aquatic este singura firma din Romania ce se ocupa cu
fabricarea integrala a, acvarilor , oferind o gama larga de produse (acvarii de dimensiuni
diverse sau la dimensiunea ceruta de client , echipamente specifice , hrana pesti , pesti etc .)</p>
<p>Pentru a vedea gama noastra de produse accesati pagina produselor .</p>
<p> </p>
<p> </p>
<p>Mai jos puteti vedea cele mai comandate produse din saptamana trecuta.</p>
<p> </p>
<p> </p>
<p class="more"><span class="style2">Cele mai solicitate produse
...</span></p>
<ul class="events">
<li class="captionthree style3"></li>
<li><a href="resurse/Stand PAL.html">Stand acvariu PAL </a><a
href="resurse/Filtru DIY.html">FIltru extern DIY</a></li>
18
<li></li>
<li><a href="resurse/acvarii.html">Acvarii</a> </li>
<li><a href="resurse/Capac PAL.html">Capac PAL la comanda</a></li>
</ul>
<p><img src="images/Aquascape-Takashi-Amano.jpg" width="161" height="115"
align="right"></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<p class="copyright">aquatic. All right reserved. </p>
<p class="copyright">design by Roxana Dobre</p>
</div>
</div>
</body>
</html>
Fisierul Style.css:
/* CSS Document */
body{padding:0px; margin:0px; background:url(images/main-bg.gif) 0 0 repeat-x #fff;
color:#5F7A77; font:13px/19px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, h5, img{padding:0px; margin:0px;}
ul{list-style-type:none}
/*----MAIN PANEL----*/
#mainPan{width:778px; position:relative; margin:0 auto;}
/*----TOP PANEL----*/
#topPan{width:778px; height:65px; background:url(images/topbg.jpg) 0 0 no-repeat #fff;
color:#828282; position:relative; margin:0 auto;}
#topPan img.logo{width:136px; height:31px; position:absolute; top:12px; left:235px;}
#topPan p.caption{width:200px; background:#fff; color:#828282; position:absolute; top:43px;
left:235px;}
#topcontactPan{width:181px; height:36px; background:url(images/icon1.jpg) 68px 0px norepeat; position:absolute; top:11px; left:567px; padding:7px 0 0;}
#topcontactPan p.callus{width:63px; height:17px; display:block; background:#DDC40C;
color:#fff; font:14px/17px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; texttransform:uppercase; text-align:center;}
19
21
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan p.copyright{width:250px; margin:10px 0 0 92px;}
#footerPan ul.templateworld{width:250px; background:#D3F0F0; color:#007163; display:block;
font-size:10px; position:absolute; top:49px; left:92px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#D3F0F0; display:block; color:#007163; textdecoration:none; padding:0px; font-size:10px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:35px;
left:549px;}
#footerPanhtml a{width:64px; height:24px; display:block; background:url(images/htmlnormal.gif) 0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:23px; fontweight:bold; text-decoration:none;text-transform:uppercase; padding:0 0 0 7px;}
#footerPanhtml a:hover{background:url(images/html-hover.gif) 0 0 no-repeat #D3F0F0;
color:#fff;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:35px; left:624px;}
#footerPancss a{width:49px; height:24px; display:block; background:url(images/css-normal.gif)
0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:24px; font-weight:bold; textdecoration:none; text-transform:uppercase; padding:0 0 0 10px;}
#footerPancss a:hover{background:url(images/css-hover.gif) 0 0 no-repeat #D3F0F0; color:#fff;
text-decoration:none;}
/*----/FOOTER PANEL----*/
23