documentatie atestat 2

PROIECT PENTRUPROIECT PENTRUSUSŢINEREA ATESTATULUI PROFESIONALSUSŢINEREA ATESTATULUI PROFESIONAL

LA INFORMATICĂLA INFORMATICĂ

FILIERĂ: FILIERĂ: TEORETICTEORETICĂĂ PROFIL: PROFIL: REALREAL SPECIALIZARE: SPECIALIZARE: MATEMATICĂ-INFORMATICĂ INTENSIV LB.ENGLEZAMATEMATICĂ-INFORMATICĂ INTENSIV LB.ENGLEZA

CANDIDAT,CANDIDAT,ELEV: Alexe Andrei ClaudiuELEV: Alexe Andrei Claudiu

CLASA CLASA : a XII-a B: a XII-a B

COORDONATOR PROIECT, COORDONATOR PROIECT, PROF. Dumbrava Adriana PROF. Dumbrava Adriana

- 1 -

CUPRINS

1.Motivul alegerii temei pag.4

2.Noţiuni HTML şi Internet pag.5-24

3.Structura aplicaţiei pag.25-28

4.Resurse de hard şi soft necesare pag.29-30

5.Modalităţi de utilizare pag.31

1.Motivul alegerii temei

- 2 -

Am ales ca temă pentru site-ul meu prezentarea pescuitului sportiv deoarece in zilele noastre exista tendinta de a despartii cele doua concepte(recreativ/sportiv) interpretate ca un tot unitar, pescutul sportiv insemnand numai pescuitul de competitie. Pentru multi, pescuitul nu mai este doar un hobby, ci o pasiune devoratoare, de dragul careia merita strabatut intreg Pamantul pentru punerea in practica a artelor invatate de-a lungul timpului.

- 3 -

2.Noţiuni HTML şi Internet

INTRODUCERE

Ca proiect pentru atestat am ales realizarea unui site web cu tema „Pescuitul Sportiv”. În ziua de azi tot mai

multă lume accesează internetul, fiind modul cel mai simplu prin care poţi găsi informaţiile căutate. De asemenea

consider că proiectarea unui site web pe lângă faptul că se poate învăţa destul de uşor, poate fi un mod plăcut în care

îţi poţi dezvolta creativitatea şi imaginaţia. Acestea sunt motivele pentru care am ales pentru atestat realizarea unui

proiect HTML, iar motivul alegerii temei “Pescuitul Sportiv” este dorinţa de a cunoaşte castelul mai bine.

Activitatea de proiectare a site-urilor Web implică: imaginaţie, capacitatea de analiză, creativitate şi o

cunoaştere temeinică a limbajului HTML. Proiectarea unui site are mai multe etape: identificarea cu exactitate a

obiectivului, culegerea şi selectarea informaţiilor, proiectarea structurii şi a aspectului grafic al site-ului, implementarea,

testarea, publicarea şi etapa de promovare.

Editoarele utilizate pentru proiectarea paginilor web pot fi: de texte (Notepad), HTML (FrontPage, Macromedia

Dreamweaver), grafice (Flash, Switch Max). Pentru realizarea site-ului „Pescuitul Sportiv” am folosit aplicaţia Web-

design Macromedia DREAMWEAVER 8 ca editor HTML.

Proiectarea site-ului Pescuitul Sportiv a fost realizată pe următoarea arhitectură hardware & software:

procesor AMD E-350 2CPUs,~1,6GHz, 4096 MB RAM, HDD 1000 GB, placă video AMD Radeon 6310 1963 MB,

sistem de operare Windows 7 Ultimate x64 , aplicaţie Web design – Macromedia Dreamweaver 8.

Lucrarea de atestat cuprinde 5 capitole. În primul capitol „Noţiuni generale despre internet” am vorbit despre

istoricul lNTERNET-ului şi despre apariţia şi funcţionarea World Wide Web (www). În capitolul al doilea m-am axat pe

limbajul HTML: structura unui document HTML, liste şi referinţe, imagini şi sunete, tabele, cadre, formulare şi altele.

Capitolul al treilea cuprinde noţiuni generale despre web design: principii de organizare vizuală, folosirea culorilor,

design pentru Web. În capitolul al patrulea am descris în detaliu modul de realizare a site-ului „Magazin – secţiunea

alimente”, proiectul meu de atestat, iar capitolul cinci cuprinde concluzii finale.

CAPITOLUL I

- 4 -

NOŢIUNI GENERALE DESPRE INTERNET

1.1. Istoricul INTERNET- uluiReţeaua Internet a apărut acum 20 de ani, printr-un efort de a conecta reţeaua Departamentului Apărării

Statelor Unite (cunoscută sub numele de ARPAnet – Advanced Research Projects Agency) cu alte reţele conectate prin

dispozitive radio sau satelit.

ARPAnet a fost o reţea experimentală proiectată să asigure suportul pentru cercetarea militară - în particular,

cercetări privind construirea unor reţele care puteau rezista cu succes unor întreruperi parţiale.

Una din cele mai importante reţele noi apărute ulterior a fost NSFNET, înfiinţată de NSF (National Science

Fundation), o agenţie guvernamentală

americană. Spre sfirşitul anilor ‘80 această

organizaţie a creat cinci noduri de comunicaţii

puternice în centrele universitare americane cele

mai importante. Problema care apărea acum era

datorată costului ridicat al serviciului

telefonic prin linii telefonice închiriate pe

distanţe foarte mari.

Soluţia a constat în înfiinţarea unor

centre regionale. Astfel, aproape fiecare campus

universitar a fost conectat la centrul Internet

cel mai apropiat.

În 1982 - ARPANet s-a unit cu MILNet (Reţea militară), cu NSFNet (cercetători şi oameni de ştiinţă) şi cu alte

reţele (de exemplu BITNet şi USENet, reţele concepute pentru schimbul de ştiri).

În anii ‘90 Internetul creşte cu o viteză pe care cercetătorii sau fondatorii acestei reţele nici nu au visat-o. Noi

companii se lansează cu o viteză fenomenală şi multe persoane accesează Internetul prin distribuitori sau servicii

familiare.

În prezent mediul Internet este constituit din circa 23 000 de sisteme de reţele direct accesibile prin Internet

(date care la ora redactării acestei lucrări pot fi deja învechite!!!).

Viitorul Internetului este deosebit de promiţător, programele folosite devin din ce în ce mai prietenoase şi mai

uşor de folosit. De asemenea, conexiunile se realizează cu viteze din ce în ce mai mari.

Serviciile on-line (CompuServe, America Online, Delphi, Microsoft Network), sunt companii care deţin propriile

reţele pentru a furniza diverse servicii, ca de exemplu ştiri internaţionale, servicii de comerţ etc.

1.2. Apariţia World Wide Web (WWW)

- 5 -

Cu aproximaţie WWW-ul a apărut în luna martie a anului 1989. Tim Berners Lee de la Laboratorul European de

Fizica particulelor din Geneva (CERN) a pus în circulaţie propunerea de a dezvolta un sistem hypertext în vederea unei

eficiente partajări a informaţiei între echipele de cercetători din High Energy Physics Community, situate în zone

geografice diferite.

1.3. Funcţionarea World Wide Web Cea mai importantă caracteristică a WWW o constituie simplitatea modului de acces la resurse. În mare

măsură aceasta se datorează protocolului de comunicaţie implementat numit HTTP (HyperText Transport Protocol).

O sesiune de transfer se desfăşoară astfel:

se realizează o conexiune client-server;

clientul lansează o cerere (request);

serverul furnizează clientului răspunsul la cererea formulată;

serverul încheie conexiunea.

Prima etapă, cea de conectare, este vizibilă prin apariţia în bara de stare a browser-ului a mesajului

„Connecting to HTTP server”. Dacă conexiunea nu se poate realiza apare mesajul de eroare „Can’t connect to server”,

însoţit de motiv. Odată conexiunea la un server HTTP stabilită, clientul lansează cererea. Aceasta specifică tipul de

protocol folosit, resursa solicitată (fişierul sau grupul de fişiere) şi în ce fel trebuie să răspundă server-ul (metoda).

Protocolul împreună cu resursa alcătuiesc un URL (Uniform Resource Locator).

Tipul protocolului este partea cea mai importantă a unui URL. Fără acesta browser-ul nu ar şti cum să trateze

resursa respectivă.

Protocoalele URL existente sunt:

file - pe lângă informaţia accesată prin Internet browserele sunt capabile să afişeze conţinutul fişierelor

locale; un URL de tip file este de forma: file://litera_disc_cale/nume_fişier.extensie; ftp - dacă link-ul pointează către un fişier situat pe un FTP-server cu acces public (anonymous FTP

server), atunci resursa trebuie specificată ca fiind de tip ftp:

ftp://ftp.sorosis.ro/pub/windows/www/netscape.zip; http - toate documentele scrise în format HTML sunt stocate pe un WWW server. HTTP se referă la

protocolul folosit de aceste servere;

gopher - browserele WWW pot „naviga” şi pe servere gopher folosind această definiţie de protocol;

mailto - este un tip special de URL care permite trimiterea mesajelor prin e-mail; news – link-urile care pointează către un newsgroup trebuie să fie declarate folosind acest protocol;

telnet - pentru a indica faptul că un link necesită deschiderea unei sesiuni telnet URL-ul trebuie să fie de tip

telnet. Majoritatea browserelor nu pot deschide sesiuni telnet, dar lansează, în schimb, programe client

externe atunci când se selectează un link de acest tip;

wais - este un tip de protocol (Wide Area Information Server) care permite căutarea de informaţie în baze

de date indexate pornite de la cuvinte descrise în limbaj natural. Metoda semnifică comanda explicită a

- 6 -

clientului către server. Dacă cererea este acceptata server-ul produce răspunsul şi transferă informaţia

(acest lucru este vizibil în bara de stare a browser-ului, afişându-se progresiv informaţii de transfer).

CAPITOLUL II

LIMBAJUL HTML

2.1. Coduri HTML

2.1.1. Noţiuni generale despre paginile webPaginile web sunt fişiere text, care se pot realiza cu un editor obişnuit, apoi salvate ca „text only”, însă extensia

trebuie să fie obligatoriu .htm sau .html. Adaosul la textul obişnuit sunt codurile HTML (pot fi numite tag-uri, etichete,

marcaje sau balize) care marchează documentul.

Comparaţia potrivită ar fi cu editorul Word: pentru a marca titluri şi subtitluri, mărim dimensiunea fontului,

apăsăm butonul bold etc., sau îi schimbăm stilul în Heading 1 şi Heading 2. Similar, în limbajul HTML, care este un

limbaj de marcare (HyperText Markup Language) adăugăm balizele H1, B etc.

Un „navigator” (cum ar fi: Internet Explorer, Opera sau Netscape) citeşte aceste fişiere text şi interpretează

codurile pentru a afişa corect conţinutul documentului. Balizele nu sunt afişate, ele doar „spun” navigatorului (browser-

ului) cum să afişeze conţinutul lor.

2.2. Limbajul HTMLHTML (HyperText Markup Language) a fost dezvoltat iniţial de Tim Berners-Lee în anul 1989, ca urmare a

necesităţii de publicare a informaţiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2,

HTML 4 şi cel mai recent HTML 4.01), fiecare versiune oferind noi facilităţi. Trăsăturile limbajului HTML sunt:

independenţa de platforma (modul de afişare al unui document este acelaşi, indiferent de computerul pe care

se realizează afişarea);

structurarea formatării;

posibilităţile hypertext (orice cuvânt, imagine sau alt element al documentului vizualizat de utilizator poate face

referinţă la un alt document, ceea ce uşurează navigarea în cadrul aceluiaşi document sau între documente

diferite).

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se inserează într-un text pentru a

adăuga informaţii despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem

pentru definirea tipurilor de documente structurate, destinat să reprezinte instanţe ale acestor tipuri de documente. La

baza SGML şi a HTML se află acelaşi principiu: descrierea conţinutului unui document se face într-un fişier text obişnuit

- 7 -

(ASCII). Se urmăreşte ca aceste fişiere să fie editabile cu aplicaţii software nepretenţioase (exemplu Notepad,

WordPad).

În cadrul unui document HTML, un marcaj (tag, în limba engleză) va avea forma <nume_marcaj>. Parantezele

unghiulare sunt elementele care indică prezenţa unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind

senzitiv la literele mari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie în marcajul

de început:

<nume_marcaj optiune1=valoare1 optiune2=valoare2 ...>................</nume_marcaj>

Există două tipuri de marcaje:

- individuale (exemplu <br>);

- perechi (exemplu <p>...</p>) - de menţionat că sfârşitul unui marcaj este indicat prin utilizarea caracterului

„/” în faţa numelui de marcaj.

În funcţie de modul de formatare a paginii, avem marcaje de tip:

- block: este afişat sub elementul anterior (exemplu <p>);

- inline: este afişat după elementul anterior (exemplu <span>);

- table: este afişat sub forma unui tabel.

Marcajele perechi pot fi imbricate:

<nume_marcaj1><nume_marcaj2>................</nume_marcaj2></nume_marcaj1>

Browserele vor ignora marcajele şi opţiunile pe care nu le recunosc.

2.3. Structura unui document HTMLUn document HTML 4 are următoarea structură:

1. o linie conţinând versiunea HTML;

2. secţiunea HEAD, delimitată de marcajele <HEAD> ... </HEAD>;

3. secţiunea BODY, delimitată de marcajele <BODY> ... </BODY> sau <FRAMESET> ... </FRAMESET>.

2.3.1 Secţiunea HEADCuprinde informaţii care nu vor fi afişate în browser, cu excepţia marcajului <title>. Marcajul <title> este

obligatoriu şi poate apare doar în secţiunea HEAD. El va conţine un titlu relevant pentru pagină, fiind deosebit de

important pentru motoarele de căutare.

Alte marcaje care apar în secţiune HEAD:

- 8 -

<META> - poate conţine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecvenţa (teoretică) cu

care motoarele de căutare ar trebui să reindexeze pagina etc. Declaraţiile META implică în general declararea

unei proprietăţi şi a valorii asociate acelei proprietăţi.

<META NAME="nume" CONTENT="continut">

<style>- cascading style sheets - stiluri pentru formatarea textului din documentul HTML.

<style type="text/css">...</style>

<script> - scripturi JavaScript sau VBScript.

<script language="JavaScript1.2" type="text/javascript" src="lib.js"></script>

<base> - stabileşte URL-ul de „bază” al documentului. Toate referinţele (<a href=""></a>, respectiv <img src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>.

<head> <base href="http://www.xprim.ro/index.php" target="_top"></head>

<link> - stabileşte o legătură cu un document extern, spre exemplu un fişier de definiţii CSS.

<link rel="stylesheet" href="stiluri.css" type="text/css">

2.3.2 Secţiunea BODYEste inclusă între marcajele <body>...... </body>

Marcajul de sfârşit (</BODY>) nu este obligatoriu.

În secţiunea BODY se găseşte informaţia care va fi afişată în browser (text, imagini etc.) (<body>.... </body>).

Ca în orice limbaj de programare, în HTML există posibilitatea de a introduce comentarii, folosind marcajul

.

Marcaje specifice:

<p> - trecerea la un nou paragraf

<hn>...</hn> - aplicarea stilului heading (n ia valori de la 1 la 6 si defineste nivelul de titlu)

Pentru formatarea textului pot fi folosite şi marcajele:

<b>...</b> - caractere îngroşate;

<i>...</i> - caractere înclinate;

<u>...</u> - caractere subliniate; - 9 -

<s>...</s> - caractere „tăiate”;

<pre>...</pre> - marcajul de informaţie preformatată;

<sup>...</sup> - exponent;

<sub>...</sub> - indice;

<br> - „rupe” textul, trecând pe o linie nouă - poate apare oriunde în text;

<hr> - trasează o linie subţire orizontală.

Marcajul <font>...</font> oferă posibilitatea modificării dimensiunii, culorii şi a tipului de font utilizat.

Marcajele <span> şi <div> (ambele necesită marcaj de închidere):

<span> este un marcaj de tip „inline”. Se foloseşte în general în interiorul marcajelor de tip „block” (exemplu

<p>) în combinaţie cu stilurile CSS, pentru a impune o formatare diferită de restul conţinutului din marcajul

„block” respectiv;

spre deosebire de <span>, marcajul <div> este de tip „block”. Se foloseşte în general pentru poziţionare în

cadrul documentului şi pentru specificarea unor proprietăţi CSS care să fie aplicate textului din interiorul lui.

2.4. Liste şi referinţe

2.4.1 ListeHTML oferă mai multe mecanisme pentru specificarea listelor de informaţii. Există 3 tipuri de liste, fiecare tip

trebuie să includă cel puţin un element:

1. liste de tip definiţie;

2. liste ordonate (numerotate);

3. liste neordonate (marcate).

2.4.1.1. Liste de tip definiţieUnul dintre cele mai obişnuite elemente în paginile HTML este un set de definiţii, referinţe sau indexuri. Un

exemplu concret îl reprezintă glosarele.

Lista de tip definiţie este introdusă de marcajele:

<dl>...</dl> - lista definiţii (definition list); <dt> - termenul definit (definition term); <dd> - definiţie (definition).

2.4.1.2. Liste neordonateSunt introduse de marcajele:

<ul>...</ul> - listă neordonată (unordered list);

- 10 -

<li> - element listă (list).

2.4.1.3. Liste ordonateSunt introduse de marcajele:

<ol>...</ol> - listă ordonată (ordered list); <li> - element listă (list).

2.4.2. Referinţe (link-uri)Marcajul HTML principal pentru introducerea referinţelor către alte pagini HTML sau către elemente din cadrul

aceleiaşi pagini web este <a>. El trebuie să conţină atribute, în caz contrar neafectând formatarea documentului.

Referinţele pot fi absolute (<a href= http: /www.domeniu.ro pagina.html" http://www. domeniu.ro/pagina.html <a>) sau relative (ex. <a href="pagina.html">pagina.html<a>).

Referinţele relative sunt folosite în interiorul site-urilor. Ele funcţionează pe baza faptului că browser-ul adaugă

automat numele domeniului la fiecare referinţă (presupunând că există o pagină la adresa

http://www.hostx.ro/director/pagina.html şi o referinţă relativă către pagina2.html, browserul va construi referinţa

http://www.hostx.ro/director/pagina2.html în momentul în care pagina2.html este solicitată).

Referinţele absolute se vor folosi atunci când se doreşte trimiterea utilizatorului pe un alt site (domeniu); pot fi

folosite şi în interiorul unui site, însă va implica un efort mai mare în scrierea paginilor, iar în cazul în care se mută site-

ul pe un alt domeniu se vor re-edita toate referinţele.

2.4.2.1. AncoreAncorele asigură uşurinţa în navigare în paginile de dimensiuni mari, având următorul format:

<a name="nume_ancora">...</a>Numele ancorelor nu poate conţine spaţii şi trebuie să fie unic în pagina respectivă !

Odată definită ancora trebuie definită şi legătura activă către ancora respectivă. Ea va fi o referinţă hypertext în

formatul următor:

<a href="#nume_ancora">Link catre ancora</a>.Există posibilitatea de a crea referinţe către ancore aflate în documente externe:

<a href="pagina.htm#nume_ancora">Link catre ancora externa</a>

2.5. Imagini şi sunete

2.5.1. ImaginiÎn principal, utilizarea imaginilor (pozelor) în cadrul paginilor HTML are ca scop îmbunătăţirea modului de

transmitere a mesajului către utilizatori. O pagină în care imaginile sunt combinate cu textul poate transmite un mesaj

mult mai bine decât o pagină care conţine doar text.

Formatele de fişiere grafice universal recunoscute de browse-re sunt: - 11 -

http://www/

GIF - GRAPHICS INTERCHANGE FORMAT - este un format de compresie fără pierdere de calitate;

JPG - format introdus de JOINT PHOTOGRAPHIC EXPERT GROUP - este un format de compresie cu

pierdere de calitate. Prin salvarea repetată a unei imagini, ea va pierde din calitate, devenind în final

inutilizabilă;

PNG - PORTABLE NETWORK GRAPHIC - este un format de compresie fără pierdere de calitate. Are în

general dimensiuni mai mari decât primele două formate menţionate. Introducerea unei imagini într-o pagina

HTML se face prin marcajul <img>.

Atributul src specifică locaţia imaginii. Alături de src, marcajul <img> are următoarele atribute:

alt - specifică un text alternativ pentru cazul în care imaginea nu poate fi afişată. Este important şi pentru

motoarele de căutare;

border - trasează un chenar în jurul imaginii;

width, height - specifică lăţimea, respectiv înălţimea imaginii. Nu sunt obligatorii, însă utilizarea lor este

recomandată deoarece va reduce timpul de procesare a paginii web de către browser;

hspace, vspace - specifică spaţiul care va fi păstrat în jurul unei imagini.

2.5.2. Inserarea de fişiere audio în paginile HTMLIntroducerea de secvenţe audio se poate face în două modalităţi:

sub forma unei referinţe (link);

prin intermediul marcajelor embed sau bgsound.

Marcajul embed are următoarele atribute: autostart - dacă este setat true, fişierul audio va fi rulat imediat după încărcarea paginii HTML;

hidden - dacă este setat true, interfaţa pentru rularea fişierului audio nu va fi afişată;

loop - dacă este setat true, secvenţa audio va fi reluată la „nesfărşit”;

volume - setează volumul cu care va fi redată secvenţa audio.

Marcajul bgsound va rula o secvenţă audio în fundal. Este o extensie Microsoft, deci va funcţiona numai în

Internet Explorer.

2.6. TabeleDefinirea unui tabel în HTML se face folosind perechea de marcaje <table>...</table>. Prin intermediul acestei

perechi de marcaje se definesc atribute valabile pentru întregul tabel. Majoritatea acestor atribute pot fi însă redefinite

pentru anumite celule ale tabelului.

Semnificaţiile atributelor marcajului <table> sunt:

border - specifică grosimea chenarului tabelului. Dacă are valoarea „0” sau atributul lipseşte, tabelul nu va

avea chenar;

- 12 -

frame - defineşte modul de afişare a chenarului exterior. Funcţionează în prezenţa atributului „border”. Atributul

frame poate avea următoarele valori:

o above - afişează latura superioară a chenarului;

o below - afişează latura inferioară a chenarului;

o border - afişează chenarul complet;

o box - afişează chenarul complet (la fel ca şi border);

o hsides - afişează părţile inferioară, respectiv superioară ale chenarului;

o vsides - afişează parţile laterale (stânga, dreapta) ale chenarului;

o lhs - afişează latura stânga a chenarului;

o rhs - afişează latura dreapta a chenarului;

o void - fără bordură exterioară;

rules - defineşte modul de afişare a chenarului interior dintre celulele tabelului. Funcţionează în prezenţa

atributului „border”. Atributul rules poate avea următoarele valori:

o none - nu se afişează chenar interior;

o groups - afişează chenar între grupurile de celule definite de thead, tbody, colgroup, col, tfoot;

o rows - afişează chenar între linii;

o cols - afişează chenar între coloane;

o all - afişează chenar între toate celule interioare;

width, height - specifică lăţimea, respectiv înălţimea tabelului. În cazul în care valorile specificate nu sunt

suficiente pentru afişarea conţinutului celulelor, valorile vor fi modificate automat de către browser astfel încât

tot conţinutul să fie afişat. Valorile se pot exprima absolut, în pixeli, sau relativ la lăţimea ecranului ( width),

respectiv la înălţimea ecranului (height). Trebuie menţionat că atributul „heigh” nu face parte din specificaţiile

HTML.

bgcolor - specifică culoarea pentru fundalul tabelului;

bordercolor - specifică culoarea chenarului;

bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este

recomandată folosirea de culori complementare pentru a obţine efectul scontat; sunt extensii Microsoft;

background - URL-ul imaginii care va fi utilizată ca fundal al tabelului. În cazul în care dimensiunile imaginii

sunt mai mici decât cele ale tabelului, ea va fi repetată astfel încât să acopere întregul fundal al tabelului; este

extensie Microsoft;

cellspacing - specifică distanţa dintre celule;

cellpadding - specifică marginea interioară a celulelor;

align - specifică alinierea pe orizontală a tabelului (stanga | centru | dreapta);

valign - specifică alinierea pe verticală a tabelului (sus | mijloc | jos);

Marcaje ce pot apărea în cadrul unui tabel:

- 13 -

<thead>...</thead> este un marcaj care conţine unul sau mai multe rânduri de celule care reprezintă antetul

tabelului. Poate apărea o singură dată în cadrul unui tabel;

<tbody>...</tbody> este un marcaj care conţine unul sau mai multe rânduri de celule. Pot fi definite mai multe

astfel de secţiuni în cadrul aceluiaşi tabel (exemplu, în cazul în care există stiluri de formatare diferite pentru

secţiuni diferite ale tabelului);

<tfoot>...</tfoot> este un marcaj care conţine unul sau mai multe rânduri de celule care reprezintă subsolul

tabelului. Poate apărea o singură dată în cadrul unui tabel. Este obligatoriu să apară înaintea marcajului

<tbody>.

Un alt marcaj care poate apărea în cadrul unui tabel este <caption>, cu sintaxa:

<caption [align=top|bottom|left|center|right] [valign=top|bottom]>...</caption>

Marcajul caption adaugă o scurtă descriere (titlu) a tabelului. Poate fi utilizat numai în cadrul unui marcaj

<table>, imediat după acesta.

Are următoarele atribute:

align - în mod normal browser-ul va afişa titlul aliniat central deasupra/dedesubtul tabelului. În HTML 4.0

atributul align a fost abandonat în favoarea formatării prin CSS (text-align şi vertical-align);

valign - precizează poziţia titlului în raport cu tabelul (sus/jos).

Marcajul <tr> defineşte o linie într-un tabel. Poate avea următoarele atribute:

align - specifică modul în care va fi aliniat pe orizontală conţinutul liniei de tabel;

valign - specifică modul în care va fi aliniat pe verticală conţinutul liniei de tabel;

bgcolor - specifică culoarea pentru fundalul liniei de tabel;

bordercolor - specifică culoarea chenarului celulelor din linia de tabel;

bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului de

tabel.

Marcajul <th> defineşte o celulă din antetul tabelului. Poate avea următoarele atribute:

align, valign - indică alinierea orizontală şi verticală a conţinutului, în celulă;

colspan - specifică numărul de coloane peste care se întinde celula curentă spre dreapta;

rowspan - specifică numărul de linii peste care se întinde celula curentă în jos;

nowrap - împiedică „ruperea” textului din celulă pe mai multe linii;

bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor menţionate

mai sus.

Marcajul <td> defineşte o celulă din tabel. Atributele marcajului <td> au efecte similare cu cele prezentate mai sus,

în cazul marcajului <th>.

- 14 -

Atributele colspan şi rowspan extind o celulă pe mai multe coloane, respectiv linii ale tabelului.

2.7. CadreCadrele sunt introduse prin perechea de marcaje <frameset>...</frameset>, respectiv marcajul <frame>.

Frameset defineşte modul de împărţire al ferestrei (spaţiul alocat fiecărui cadru în parte).

Marcajul <frameset> are următoarele atribute:

border - defineşte lăţimea chenarului; numai frameset-ul exterior va răspunde la valoarea acestui atribut; este

o extensie Microsoft/Netscape;

bordercolor - specifică culoarea chenarului, în format RGB; este o extensie Microsoft/Netscape;

cols - defineşte (pe verticală) dimensiunile sau proporţiile cadrelor în cadrul unui <frameset>. Dimensiunile pot

fi precizate ca:

o valoare absolută (în pixeli);

o valoare relativă (în procente);

o * - semnifică spaţiul rămas disponibil după afişarea cadrelor anterior definite;

rows - defineşte (pe orizontală) dimensiunile sau proporţiile cadrelor în cadrul unui <frameset>. Dimensiunile

pot fi precizate la fel ca la atributul cols.

Marcajul <frame> are următoarele atribute:

frameborder - specifică dacă un cadru va afişa sau nu chenar. În cazul în care un cadru are setat

frameborder=no, iar cadrele adiacente au specificată afişarea chenarului, acest atribut nu va avea efect pentru

cadrul cu frameborder=no;

longdesc - specifică un link către o descriere „lungă” a cadrului respectiv. Scopul acestei descrieri este de a

completa descrierea realizată prin atributul title;

src - specifică link-ul către conţinutul iniţial care va fi încărcat în elementul <frame>. Link-ul poate fi o cale

absolută (http://www.domeniu.ro/pagina.html) sau relativă (pagina.html); name - atribuie un nume cadrului curent. Acest nume poate fi folosit în combinaţie cu marcajul a (<a

href="pagina.html" target="RightFrame">...</a>) pentru a încărca o pagină într-un anumit cadru;

noresize - cadrele pot fi redimensionate de către utilizatori. Prin folosirea atributului noresize browser-ul va

bloca redimensionarea cadrelor de către utilizator;

scrolling - specifică browser-ului afişarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate lua

următoarele atribute:

o auto - afişarea barei de scroll se face atunci când este necesar (conţinutul depăşeşte spaţiul afişabil);

o yes - bara de scroll este permanent afişată;

o no - bara de scroll nu va fi afişată, chiar şi în eventualitatea în care este necesară.

marginwidth, marginheight - specifică distanţa dintre marginea interioară a cadrului şi conţinutul afişabil.

Atributul marginheight stabileşte distanţa pentru marginea superioară/inferioară a cadrului. Atributul

marginwidth stabileşte distanţa pentru marginea stânga/dreapta a cadrului.

- 15 -

2.8. FormulareFormularele sunt introduse prin marcajul <form>...</form>. Perechea <form>...</form> este o secţiune a

paginii HTML (container) care include mai multe controale (elemente).

Într-o pagină HTML pot exista mai multe formulare, însă numai informaţiile dintr-un singur formular pot fi trimise

la un anumit moment către server.

Există două metode (method) prin care un browser poate transmite informaţiile către server:

metoda „get” - informaţiile din formular sunt adăugate la URL;

metoda „post” - informaţiile din formular nu sunt adăugate la URL.

Atributul action specifică fişierul sau aplicaţia de pe server căreia îi vor fi trimise informaţiile din formular,

pentru prelucrare.

În general, câmpurile unui formular destinate introducerii datelor, se specifică prin intermediul marcajului

<input>.

Marcajul <input> are următoarele atribute:

type

o button - un buton pe care se poate face „click”, declanşând astfel o acţiune prin intermediul unui script

(exemplu, JavaScript);

o checkbox - caseta de validare. Opţiunea checked permite să specificăm dacă această casetă este

„marcată” sau nu;

o file - permite utilizatorului să selecteze un fişier din computerul propriu, pentru a-l încărca pe server;

o hidden - este „invizibil” utilizatorului. Păstrează o pereche variabilă/valoare care nu este vizibilă

utilizatorului;

o submit - informaţiile din formular sunt trimise către server;

o image - un buton având o imagine „aplicată”, având o funcţie asemănătoare cu submit;

o password - un câmp de tip text, care înlocuieşte fiecare caracter tastat cu un asterix (*), din motive de

securitate;

o radio - buton cu interblocare; un grup de elemente radio au acelaşi nume, însă numai un singur

element poate fi selectat;

o text - permite introducerea de text de către utilizator;

o reset – „curaţă” întregul formular, revenind la valorile implicite;

name - numele controlului (elementului);

value - valoarea atribuită elementului;

size - numărul de caractere care vor fi vizibile într-un câmp de tip text sau password;

maxlength - numărul maxim de caractere care pot fi introduse într-un câmp de tip text sau password;

disabled - dezactivează un element;

readonly - un element poate fi citit, dar nu poate fi modificat.

- 16 -

Un alt marcaj în cadrul formularelor este <textarea>...</textarea>. El permite realizarea unor spaţii largi pentru

introducerea de informaţii (de tip text).

Atributele rows şi cols specifică dimensiunea (numărul de rânduri, respectiv coloane) ale câmpului de tip text

rezultat.

Marcajul <select>...</select> este folosit pentru afişarea meniurilor derulante.

CAPITOLUL III

NOŢIUNI GENERALE DESPRE WEB DESIGN

3.1. Principii de organizare vizualăAplicarea în design a câtorva principii de organizare a textului va conduce la orientarea mai uşoară în pagină,

la structurarea mentală mai uşoară a conţinutului. Se vor crea astfel condiţii pentru a spori capacitatea vizitatorului de a

manipula şi reţine informaţia transmisă.

Principiile de organizare vizuală, de care trebuie să se ţină cont în proiectare, sunt următoarele:

Claritate şi eleganţă - O atenţie corespunzătoare acordată esteticii conţinutului, prezentarea sa într-o formă

accesibilă cititorului - sunt obiectivele majore care conferă textului atributele unei componente eficiente a

proiectării paginilor pentru Internet.

Predictabilitate şi regularitate - Odată stabilită, structura de prezentare a materialului trebuie să rămână

constantă de la o pagină din site la alta. În cazul când apar variaţii de structură, modificarile se vor justifica prin

necesităţi de tip funcţional, dar nu vor fi făcute schimbări de dragul schimbărilor, chiar dacă vor ţinti către un

design mai performant.

Standardizare şi consistenţă în folosirea unui stil - Acest principiu se referă la producerea unui aranjament

care să permită focalizarea rapidă şi fără ezitări pe elementele importante.

Orientare facilă în conţinut - Meniul, prezent în fiecare pagină, va permite accesul direct sau foarte rapid la

secţiunile majore din site.Textul principal de prezentare (sinteza conţinutului unei pagini) se recomandă să fie

relativ scurt, pe cât posibil să încapă într-un singur ecran (fără derulare). Prin încărcarea rapidă a informaţiei

relevante, utilizatorul va putea decide dacă doreşte să citească, să revadă sau să abandoneze pagina curentă.

Unitate şi simplitate - Autorii de conţinuturi şi designerii materialelor pentru web au tendinţa să includă prea

multe detalii. Este indicat ca o pagină să conţină ideile principale şi link-uri de acces de tip „pentru mai multe

informaţii”.

- 17 -

Poziţionarea în ordinea importanţei - Informaţiile vor fi poziţionate în pagină în ordinea importanţei şi

relevanţei lor, locul privilegiat fiind în stânga sus (pentru indivizii din culturile europeană şi americană, care sunt

obişnuiţi să parcurgă vizual materialele într-o formă de „Z”).

Gruparea elementelor după semnificaţie - Acest principiu include câteva sugestii de „topografia” paginii.

Elementele subsumate aceleiaşi idei trebuie să fie demarcate de alte elemente sau grupuri de elemente prin

folosirea spaţiilor libere, casetelor cu cadru, culorilor diferite şi altor modalităţi de grupare-etichetare.

Includerea listelor şi tabelelor pentru structurarea conţinutului - Un tabel poate rezuma informaţii

complexe într-o manieră ce favorizează înţelegerea. Sugestiile de aranjare a listelor sunt utile pentru un

aranjament vizual eficient: folosirea „bulinelor” de marcare a fiecărui item sau numerotării identate, aranjarea

listelor se va face pe verticală, alinierea va fi la stânga.

Spaţiere - Este indicat ca textul propriu-zis să ocupe între 25-50% din spaţiul total al paginii. Evidenţierea

unităţilor de text prin folosirea atributelor: text subliniat, îngroşat sau caractere aldine. O culoare diferită scoate

în evidenţă anumite informaţii considerate importante. Spaţierea dintre linii va ţine cont de marimea corpului de

literă.

Echilibru şi simetrie - Textul trebuie distribuit echilibrat în pagină şi ponderat prin includerea de grafice şi

imagini. Avalanşa de informaţii brute, neprelucrate din punct de vedere vizual, este contraindicată, conducând

la dezorientarea vizitatorilor.

3.2. Folosirea culorilor. Semnificaţii.Constatarea că utilizarea unui câmp cromatic variat sporeşte randamentul activităţii intelectuale a propulsat şi

diversificat cercetările despre influenţa culorilor asupra psihicului uman. O îmbinare adecvată de culori este un element

important al materialelor de prezentare.

Efectul asupra psihicului este diferit de la o culoare la alta. Astfel, unele culori facilitează deconectarea

nervoasă sau sporesc gradul de concentrare a atenţiei, în timp ce altele influenţează pozitiv realizarea asociaţiilor

mentale, reţinerea uşoară a informaţiilor prezentate etc.

3.2.1. Coduri de culoareModalitatea recomandată pentru introducerea unei culori în pagina web este folosirea codurilor

hexazecimale.

- 18 -

Acest cod este analog sistemului binar, de exemplu, care traduce orice număr din sistemul zecimal, utilizat de

noi frecvent, într-un număr care foloseşte doar cifrele 0 şi 1.

Un număr scris „în hexa” foloseşte sistemul de numeraţie hexazecimal, în care cea mai mică cifră este 0, iar ultima, a

16-a, este F.

Sistemul folosesc următoarele cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.

Orice culoare folosită pentru paginile web este un amestec de trei culori principale: roşu, verde şi albastru (RGB). Codul de culoare pe care trebuie scris are 6 cifre şi este compus din trei părţi: prima parte (primele 2 cifre) este

pentru cantitatea de roşu, a doua parte este pentru verde, iar a treia pentru albastru.

3.2.2. Culoarea în paginile pentru webÎn materialele de pe web, culorile se pot utiliza la nivelul textului, la nivelul ilustraţiilor şi pentru fundal. Utilizarea

culorii se justifică în primul rând funcţional, însă determină în mare măsură caracterul şi ţinuta materialelor, şi implicit

prestanţa întregului site.

A. La nivelul textului, în cazul utilizării corespunzătoare a contrastelor cromatice, precizia şi rapiditatea

percepţiei şi memorării informaţiilor transmise creşte cu 40-50% comparativ cu contrastele simple în alb-negru.

Cercetările psihologice asupra contrastelor cromatice au stabilit următoarea ordine descrescătoare de

intensitate a contrastelor cromatice pentru text din punct de vedere al lizibilităţii de la distanţă şi al preferinţei în procesul

de reţinere de informaţii:

1. negru pe galben;

2. verde pe fond alb;

3. roşu pe fond alb;

4. albastru pe fond alb;

5. alb pe fond albastru;

6. negru pe fond alb;

7. galben pe fond negru;

8. alb pe fond roşu;

9. alb pe fond verde;

10. alb pe fond negru;

11. roşu pe fond negru;

12. verde pe fond roşu.

B. La nivelul ilustraţiilor, utilizarea culorilor sporeşte valoarea de semnificaţie. Cititorul receptează,

prelucrează şi interpretează o ilustraţie color mult mai rapid şi mai eficient decât o ilustraţie în tonuri de gri.

De asemenea, simbolurile indiciale care semnalează vizual prezenţa unui conţinut de un anumit tip (meniu,

informaţii utile, link-uri recomandate, atenţionări etc.) îşi vor îndeplini mai bine funcţia orientativă prin apelul la culori

folosite constant şi ţinând seama de semnificaţiile convenţionale (galben - precauţie, roşu - atenţie etc.).

- 19 -

Există, desigur, şi imagini care au efect mai mare dacă sunt în tonuri de gri. Fotografiile alb-negru sunt deseori

(când reprezintă acţiuni) mai pregnante, mai elocvente şi mai sugestive, mai dramatice decât cele color; portretele alb-

negru pun mai bine în valoare expresia unei persoane.

Însă un grafic, o histogramă, o schemă sau o hartă vor fi mult mai bine puse în evidenţă prin culori şi devin

astfel mai uşor lizibile, mai puţin obositoare.

Ordinea contrastelor cromatice pentru acestea este următoarea:

1. albastru pe alb;

2. negru pe galben;

3. verde pe alb;

4. negru pe alb;

5. verde pe roşu.

C. Fundalul (background-ul). Diferenţierea cromatică a paginilor fiecărei secţiuni sau teme se poate dovedi

foarte utilă în orientarea generală în materialul de prezentare pe Internet. Dar cel mai important aspect al utilizării culorii

pentru fond se referă la funcţia culorilor de influenţare a conduitei, prin declanşarea de trăiri afective, intenţii, atitudini

pozitive.

3.3. Design pentru Web

3.3.1. Sugestii de designPrezentarea pe Web va fi în acord cu aceste caracteristici ale comportamenului utilizatorilor de Internet, în

elaborarea materialului ţinându-se cont de câteva sugestii deduse logic:

Vizitatorul poate fi ajutat să se orienteze/reorienteze prin introducerea unor organizatori vizuali:

o titluri şi intertitluri din pagină simple şi clare ce permit o orientare rapidă în conţinut;

o titluri de pagină semnificative ce ajută la recunoaşterea sitului chiar dacă este minimizat pe task-

bar.

Designer-ul trebuie să pornească de la premisa că vizitatorul nu îşi mai aminteşte paşii de navigare ce l-au

adus în faţa unui anumit material:

o se dovedeşte utilă inserarea în antet a unui „fir al Ariadnei” (de exemplu antetul acestei pagini) care indică poziţia actuală în succesiunea sau în structura ierarhică a site-ului web;

o păstrarea culorilor standard pentru legăturile active (albastru pentru link-uri nevizitate şi roşu închis

pentru link-uri vizitate) uşurează orientarea, recunoaşterea şi structurarea mentală a conţinutului

informaţional ce se parcurge.

Folosirea unei terminologii standard elimină timpul suplimentar acordat de vizitator pentru recorelări şi

circumscrieri de sens la schimbarea rapidă a contextului.

- 20 -

- 21 -

3.Structura aplicaţiei

Aplicaţia este structurată în secţiuni ca :

Pesti – Conţine informaţii despre mai multe tipuri de pesti, modul cum pot fii prinsi si unde traiesc acestia.

Ape – Cele mai bune locatii pentru pescuitul sportiv.

Nade si momeli – Prezentarea fiecarui tip de nada si momeala si intrebuintarea acestora.

Prima pagină – Prezintă informatii generale despre pescuitul sportiv.

- 22 -

Câteva detalii tehnice de implementare :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Magazin - Sectiunea Alimente</title><link href="style.css" rel="stylesheet" type="text/css"></head>

<body class="thrColFixHdr">

<div id="container"> <div id="header"></div> <div id="sidebar1"> <h3><a href="index.html"> Home</a></h3><ul> <li>» <a href="contact.html">Contact</a></li></ul> <h3>Alimente baza</h3> <ul> <li>» <a href="faina.html">Faina</a></li> <li>» <a href="gris_pesmet.html">Gris, Pesmet</a></li> <li>» <a href="orez.html">Orez</a></li> <li>» <a href="oua.html">Oua</a></li> <li>» <a href="ulei.html">Ulei</a></li> <li>» <a href="zahar.html">Zahar</a></li> </ul> <h3>Bauturi</h3> <ul> <li>» <a href="acidulate.html">Acidulate</a></li> <li>» <a href="neacidulate.html">Neacidulate</a></li> <li>» <a href="alcoolice.html">Alcoolice</a></li> <li>» <a href="energizante.html">Energizante</a></li>

- 23 -

</ul> </div> <div id="sidebar2"> <h3>Fructe Legume</h3> <ul> <li>» <a href="fructep.html">Fructe Proaspete</a></li> <li>» <a href="fructec.html">Fructe Congelate</a></li> <li>» <a href="legumep.html">Legume Proaspete</a></li> <li>» <a href="legumec.html">Legume Congelate</a></li> </ul> <h3>Dulciuri</h3> <ul> <li>» <a href="biscuiti.html">Biscuiti</a></li> <li>» <a href="ciocolata.html">Ciocolata</a></li> <li>» <a href="croissant.html">Croissante</a></li> <li>» <a href="napolitane.html">Napolitane</a></li> <li>» <a href="cereale.html">Cereale</a></li> <li>» <a href="gem.html">Gem</a></li> </ul> </div> <div id="mainContent"> <h1> Oferte Speciale</h1> <p><img src="images/baneasa.jpg" align="left"> <b>Baneasa faina alba superioara 000</b><br> <b>Gramaj:</b> 1kg<br> <b>Pret vechi:</b><span class="vechi"> 2,80 lei</span><br> <b>Pret nou:</b><span class="oferta"> 2,60 lei</span><br> <a href="faina.html">vezi alimente de baza » faina</a> </p> <br> <p><img src="images/deroni.jpg" align="left"><br> <b>Deroni orez pentru sarmale</b> <br> <b>Gramaj:</b> 1kg<br> <b>Pret vechi:</b><span class="vechi"> 9,60 lei</span><br> <b>Pret:</b><span class="oferta"> Pret: 9.40 Lei</span><br> <a href="orez.html">vezi alimente de baza » orez</a> </p><br> <p><img src="images/7days.jpg" align="left"><br> <b>7days mini croissante sampanie</b><br> <b>Gramaj:</b> 200g<br> <b>Pret vechi:</b><span class="vechi"> 5 lei lei</span><br> <b>Pret:</b> <span class="oferta">4,9 lei</span><br> <a href="croissant.html">vezi alimente de baza » croissante</a> </p><br></div><br class="clearfloat" /></div></body></html>

Structura programului este următoarea:

- 24 -

- 25 -

4.Resurse de hard şi soft necesare

Pentru realizarea acestui site au fost utilizate ca programe de lucru Adobe Dreamweaver, Notepad.

Cerinţele de sistem a programelor utilizate nu sunt exagerate şi corespund în mare parte, acestea sunt:

Resurse minime:

1) Hardware - Procesor (CPU) : 900 MHz+-Memorie (RAM) : 64Mb-Spatiu liber : 190Mb-Monitor : VGA 16-bit color

2) Software

-Sistem de operare : Windows XP - Internet Browser : Internet Explorer 7.0 sau Mozilla Firefox 3.4.0

Resurse recomandate:

- 26 -

Hardware - Procesor (CPU) : 1200 MHz+-Memorie (RAM) : 256Mb-Spaţiu liber : 380Mb-Monitor : VGA (1028 x 768)

Software

-Sistem de operare : Windows XP - Internet Browser : Internet Explorer 7.0 sau Mozilla Firefox 3.4.0

Pentru o rularea normală a site-ului este necesară instalarea în system (recomandat Pentium 3, sau mai performant) a programului Java, cu o rezoluţie optimă de 1024 pe 768 pixeli. Am folosit aceste programe atât din pricina cerinţelor acceptabile de sistem a programelor cât şi usurinţa cu care se poate lucra cu ele. Din cauza acestei usurinţe se ajunge la a se lucra cu o viteză deosebit de mare care oferă un avantaj destul de considerabil in crearea unui proiect, site etc.

5.Modalităţi de utilizare

Cine are acasă un calculator conectat la internet ar putea naviga pe ceea ce am creat eu foarte uşor şi simplu, deoarece are o grafică prietenoasă încât orice utilizator se poate descurca cu usurinţă în navigarea site-ului indiferent de nivelul de cunostinţe pe care le are acesta în folosirea unei astfel de interfeţe.Astfel prin simpla apăsare a unui buton utilizatorul poate ajunge cu usurinţă la informaţiile dorite. Toate informaţiile sunt bine structurate, astfel încât chiar şi cineva care ar ajunge pe acest site din intâmplare să poată înţelege despre ce e vorba aici.

- 27 -

documentatie atestat 2

Documents

Transcript of documentatie atestat 2