lucrare pentru atestarea - competentedigitale.ro · (cnipmmr) în lunile aprilie-mai 2005 pe un...

COLEGIUL NAŢIONAL „FRAŢII BUZEŞTI” CRAIOVA

PROFILUL: MATEMATICĂ-INFORMATICĂ

LUCRARE PENTRU ATESTAREA

COMPETENŢELOR PROFESIONALE

CRAIOVA, 2016

ELEV: Dan Iulia Alexandra

CLASA: a XII-a

PROFESOR COORDONATOR:

Prof. Şchiopu Liliana

ATESTAT INFORMATICĂ Bonsai

Pagina | 2

CUPRINS

INTRODUCERE ................................................................................................................. 3

CAPITOLUL I – INTERNET, NOŢIUNI INTRODUCTIVE ...................................................... 4

CAPITOLUL II – CREAREA PAGINILOR WEB ..................................................................... 9

2.1. Limbaje de programare utilizate pentru crearea paginilor web.......................... 9

2.2. Aplicaţii software pentru realizarea şi vizualizarea paginilor web .................... 22

CAPITOLUL III Realizarea paginii web ........................................................................... 27

3.1. Pagina principală [index.html] ........................................................................... 27

3.2. Pagina despre îngrijirea Bonsai-lor [ingrijire.html] ............................................ 34

3.3. Pagina despre istoria Bonsai-lor [istorie.html] ................................................. 36

3.4. Pagina despre modelare [modelare.html] ......................................................... 37

3.5. Pagina despre stiluri de Bonsai [stiluri.html] ..................................................... 37

3.6. Pagina galerie [galerie.html] .............................................................................. 38

Concluzii ........................................................................................................................ 42

Bibliografie .................................................................................................................... 43


Pagina | 3

INTRODUCERE

În ultimii ani, paginile web au cunoscut o dezvoltare şi accesare nemaiîntâlnită

până acum. Nevoia de informaţie şi uşurinţa prin care aceasta este satisfăcută

folosind un PC (Personal Computer) şi o conexiune la Internet, a dus la dezvoltarea a

nenumărate pagini web cu conţinut informaţional vast.

O simplă căutare pe motorul google ne aduce pe ecranul calculatorului informaţie

suficientă despre orice dorim, informaţie ce altfel ar necesita nenumărate ore de

căutare prin cărţi şi literatură de specialitate.

Acesta a fost impulsul care a dus la alegerea unui site (pagină web) ca soluţie

pentru atestarea competenţelor profesionale. Fiind pasionată de Bonsai, am ales ca

temă realizarea unei pagini web despre aceşti copaci în miniatură.

Pentru realizarea acestei pagini web a trebuit să studiez limbaje noi, cum ar fi

HTML şi CSS, să urmăresc diverse „tutoriale” pe internet despre realizarea paginilor

web, toate acestea ajutându-mă în dezvoltarea unui site modern, bogat în informaţie

şi care respectă standardele privind codul HTML. Paginile web sunt realizate fie prin

cod HTML, fie folosind tehnologii animate precum Adobe Flash. Dintre acestea am

ales prima variantă, limbajul HTML, acesta fiind un limbaj de „programare”, mai

corect spus de „scripting”, cu grad redus de dificultate. Pentru scrierea codului HTML

se pot folosi fie editoare text simple (precum Notepad) fie editoare avansate (ce

oferă avantaje precum evidenţierea codului, completarea codului etc.) sau chiar

editoare profesionale de tip WYSIWYG (What You See Is What You Get) ce oferă

editare grafică a paginii.

Pentru conţinutul informaţional al site-ului am folosit internetul ca sursă de

informare, astfel toate informaţiile din site-ul realizat, de la text până la imagini, au

fost luate de pe internet.


Pagina | 4

CAPITOLUL I – INTERNET, NOŢIUNI INTRODUCTIVE

Internetul reprezintă o modalitate facilă şi rapidă de acces la informaţie oriunde pe

Glob. Este o sursă operativă şi amplă de noutăţi din orice domeniu. Îl folosim în

fiecare zi, şi poate nu ne-am întrebat niciodată ce reprezintă de fapt Internetul.

Îl putem defini simplu ca o reţea mondială ce dispune de calculatoare interconectate

şi informaţia ce ajunge la destinatar prin intermediul lor. De ce Internet şi nu alt

termen? Pentru că aceasta este abrevierea din limba engleză a expresiei “reţea

interconectată”, (interconnected network).

Toţi, indiferent de continentul pe care ne aflăm, avem acces la unul şi acelaşi

Internet, de aceea el nu aparţine în principiu nimănui şi totuşi există organe abilitate

care urmăresc activitatea în sistem, astfel încât ea sa nu devină haotică şi periclitantă

pentru societate. Nu putem însă să vorbim despre Internet fără să facem referire la

binecunoscuta “pânză de păianjen mondială”, adică World Wide Web, pentru

necunoscători, www.

Această noţiune şi efectele sale atât de benefice pentru fiecare dintre noi, sunt

destul de recente. A fost creată în 1992, la Geneva, în Elveţia, în cadrul Centrului

European de cercetări nucleare. S-a dovedit a fii atât de practică şi de uşor de utilizat,

încât a devenit accesibilă unui număr uriaş de utilizatori Internet. Multitudinea de

informaţii pe care ne-o pune la dispoziţie acest sistem ne poate face sa credem că au

fost necesari sute de ani pentru ca lucrurile să fie atât de bine puse la punct. În

realitate, Internetul nu are mai mult de 30 de ani, iar accesul masiv al populaţiei

datează de 5-6 ani.

Naşterea Internetului este legată de structura strămoş a reţelei, ARPANET-ul. Aceasta

a funcţionat într-un circuit închis, fiind accesibilă doar militarilor şi instituţiilor de

apărare din SUA.

A avut o apariţie subită şi o ascensiune fulminantă, pentru că are unul din atributele

esenţiale ale unui sistem ce se adresează omului: permite comunicarea. Nici o fiinţă

umană nu ar putea trăi fără sa comunice, iar Internetul permite accesul la o

comunicare în timp real şi la o informaţie atât de rapidă, cât apeşi “enter”. Până în


Pagina | 5

prezent, în afara telefonului, nici o altă descoperire tehnică nu a creat o astfel de

revoluţie în ceea ce priveşte comunicarea.

Internetul în cifre

Doar 64% dintre firme accesează internetul.

În România dotarea cu computere a firmelor se apropie de nivelul atins în Uniunea

Europeană, dar procentul celor care au conexiune la internet este sensibil mai mic

decât cel înregistrat la nivel european. Aceasta este una dintre concluziile studiului

realizat de Consiliul Naţional al Întreprinderilor Private Mici şi Mijlocii din România

(CNIPMMR) în lunile aprilie-mai 2005 pe un eşantion de 1.399 de IMM-uri (micro,

mici şi mijlocii) ce activează în întreaga economie, din toate cele opt regiuni de

dezvoltare ale tării.

Studiul dat publicităţii arată că 81,90% dintre firmele autohtone au în dotare

computere, 64,16% accesează internetul iar 56,51% utilizează e-mail-ul. Circa 27,97%

dintre IMM-uri deţin site-uri proprii şi 7,51% din întreprinderi recurg la

vânzările/cumpărăturile on-line. Totuşi, un procent destul de ridicat de IMM-uri

(15,52%) nu deţin computere/site propriu şi nu utilizează internetul, e-mail-ul şi

vânzările/cumpărăturile on-line, în vreme ce 0,79% dintre firme folosesc alte

componente IT, cum ar fi telefonia IP, programe de proiectare asistată sau intranetul.

Un sondaj asemănător, realizat la nivel european pe 7.662 de IMM-uri, a evidenţiat

că 85,3% dintre microfirme, 91% din firmele mici şi 95% dintre firmele mijlocii au în

dotare computere. De asemenea, 73% dintre microîntreprinderile investigate au

conexiune la internet, comparativ cu numai 54,59% dintre microfirmele româneşti. E-

mail-ul este folosit de aproximativ 68% dintre microfirmele europene şi de 53,11%

din cele româneşti.

Sursa: http://www.bizcity.ro/index.php?x=readnews&sid=18430 - 25 iulie 2005

Conform unui raport realizat de Pricewaterhouse Coopers, rata creşterii numărului

de utilizatori de internet din Romania este de un milion pe an. În 2006, 5,5 milioane

de români vor accesa, conform raportului, internetul.

Daca în 2000 doar 3,6 % dintre români deţineau un calculator, în 2003 această cifră a

crescut la 10%, potrivit statisticilor. Datele furnizate de Ministerul Comunicaţiilor şi

Tehnologiei informaţiilor arată că în 2003 la nivelul tării existau 2,1 milioane de

calculatoare personale.


Pagina | 6

Reţeaua Internet utilizată tot mai frecvent pentru obţinerea de informaţii pentru

vacanţe şi călătorii şi pentru achiziţionarea aranjamentelor de călătorie.

Termen aproape necunoscut publicului larg în urmă cu mai puţin de un deceniu,

Internet a devenit astăzi una dintre principalele modalităţi de comunicare şi de

informare, a lumii moderne. Numărul de utilizatori ai reţelei Internet se apropie de

stabilizare în ţările dezvoltate şi creşte într-un ritm susţinut în ţările în curs de

dezvoltare. În ţările dezvoltate ale lumii orice persoană educată foloseşte în mod

curent reţeaua Internet pentru a obţine informaţii, în legătură cu cele mai diverse

domenii.

Statisticile în legătură cu numărul de utilizatori Internet în lume sunt dinamice însă

datele care urmează pot să ofere o imagine generală în legătură cu amplasarea

fenomenului Internet în lume.

Numărul de utilizatori Internet în unele ţări ale lumii:

Ţara Utilizatori Internet (milioane)

Utilizatori Internet (% din total populaţie adultă)

SUA 170 68%

Japonia 56 65%

Germania 39 60%

Coreea de Sud 23 70%

Marea Britanie 23 54%

Franţa 18 43%

Canada 16 71%

Date cu privire la utilizatorii Internet din Statele Unite ale Americii:

1 milion de utilizatori in 2001

2 milioane de utilizatori in 2002




5,5 milioane de utilizatori in 2006


Pagina | 7

Circa 65% dintre familiile americane au acces Internet la domiciliu. Până la sfârşitul

anului 2005, 38% dintre familiile americane şi 51% dintre familiile canadiene vor

dispune de acces Internet rapid (broadband), la domiciliu.

În anul 2003, 65 de milioane de americani (30% din populaţia adultă a SUA) au folosit

Internet pentru obţinerea de informaţii/ planificarea călătoriilor/vacanţelor.

Analiştii estimează că valoarea produselor şi a serviciilor achiziţionate prin reţeaua

Internet, în SUA, va fi în acest an, 2012 de circa 200 miliarde de dolari.

În anul 2003 valoarea aranjamentelor de călătorie achiziţionate prin reţeaua

Internet, în SUA, a fost de aproximativ 41 miliarde dolari SUA.

Folosirea Internet pentru obţinerea de informaţii şi perfectarea de aranjamente de

călătorie va continua să câştige popularitate.

Americanii folosesc în medie 70 de minute pe zi pentru comunicare şi obţinere de

informaţii prin reţeaua Internet (cifra include comunicare prin e-mail). În SUA,

Internet ocupă locul al treilea în rândul celor mai frecvent utilizate medii pentru

informare şi divertisment, după televiziune şi radio.

Date cu privire la utilizatorii Internet din Europa:

Număr de utilizatori Internet în Europa, la sfârşitul anului 2003

Indicator Numar utilizatori Internet (milioane)

Total 208

Europa de Vest 165

Europa Centrala/ de Est

43

73% dintre utilizatorii Internet din Europa apelează la site-uri care oferă informaţii

despre produsele sau serviciile pe care doresc sa le achiziţioneze.

Peste 50% dintre utilizatorii Internet din Europa au vizitat site-uri care furnizează

informaţii pentru turism şi călătorii.

8% dintre utilizatorii Internet din Europa au achiziţionat servicii prin Internet.

Biletele de avion sunt aranjamentele de călătorie tranzacţionate cel mai frecvent prin

Internet (56,7% din totalul tranzacţiilor în Europa) urmate de rezervările pentru

camere de hotel (15,8%) şi tururi/ pachete turistice (13,3%).


Pagina | 8

13,8 milioane de britanici au folosit Internet pentru achiziţionare de produse şi

servicii. 5,5 milioane dintre aceştia au cumpărat bilete de avion prin Internet.

Principalele motive care ii determină pe europeni să folosească Internet pentru

obţinerea de informaţii de călătorie şi pentru a achiziţiona servicii prin Internet:

(extrapolare a rezultatelor sondajului de opinie realizat de PhoCus Wright).

~ Posibilitatea găsirii celor mai bune preţuri sau tarife (50%),

~ Acces facil şi convenabil (29%),

~ Posibilităţi de informare şi comparare a ofertelor existente (26%).

Repartizarea utilizatorilor Internet pe ţări/continente:

Continent (% din total mondial utilizatori Internet):

America de Nord 30%

Europa 31%

Asia 32%

Oceania, America de Sud, Africa,

7%

Alte date în legătură cu folosirea Internetului în lume

Companiile de transport, hoteliere şi de turism folosesc în mod curent mijloacele

electronice de comunicare pentru a transmite informaţii clienţilor potenţiali.

Aproximativ 35 de milioane de americani sunt abonaţi la buletine informative,

transmise prin e-mail, cu privire la oferte de turism şi călătorii.

Forrester Research estimează că 10 milioane de americani au luat decizia să

călătorească/ achiziţioneze anumite aranjamente de călătorie în urma primirii de

buletine informative şi oferte prin e-mail.


Pagina | 9

CAPITOLUL II – CREAREA PAGINILOR WEB

2.1. Limbaje de programare utilizate pentru crearea paginilor web

Pentru realizarea paginilor web se folosesc o multitudine de limbaje de programare,

începând cu limbajul standard HTML şi terminând cu limbaje de scripting (javascript,

jquery) sau chiar limbaje de programare profesionale (precum php, java, asp.net

etc.).

A. HTML

HTML este acronimul de la HyperText Markup Language şi reprezintă un limbaj

pentru crearea şi marcarea (formatare, aranjare) unui document astfel încât să poată

fi publicat pe World Wide Web şi vizualizat cu ajutorul unui browser (Internet

Explorer, Netscape, Opera etc.).

Termenul de hypertext desemnează un material sub formă de text şi imagine,

interconectat într-o manieră complexă, nesecvenţială, în care utilizatorul poate

naviga, căuta informaţii referitoare la un obiect. Hypertext-ul trebuie interpretat ca

un text care semnalează o legătură la o altă informaţie web, de obicei un alt

document web, şi este identificat prin subliniere sau culoare, pentru a-l deosebi de

textul simplu.

Hypermedia este un termen aproape sinonim celui de hypertext, singura deosebire

fiind faptul că subliniază prezenţa şi a unor elemente care nu sunt de tip text, cum ar

fi animaţii, secvenţe sonore sau secvenţe video.

HTML se utilizează din 1990, cunoscând câteva versiuni de dezvoltare, fiecare dintre

acestea îmbunătăţind performantele limbajului. Ultima varianta (la data elaborării

acestui ghid) este HTML 5 ce include facilităţile versiunilor anterioare (tag-uri de

marcare, tag-uri pentru hiperlegături, antete, paragrafe, liste, elemente de meniu,

formatare caractere, imagini in-line şi tag-uri pentru schimbul de date dinamic între

utilizatori), adăugând facilităţi şi extensii pentru numere, tabele şi elemente de

control.

Documentele HTML – structură


Pagina | 10

Un document HTML este format dintr-o succesiune de blocuri de informaţie. Aceste

blocuri pot fi incluse unul în altul. Un bloc este delimitat de simboluri speciale,

numite tag-uri (etichete). Modul în care un document este marcat cu elemente şi cu

atribute ale acestor elemente se realizează în conformitate cu Document Type

Definition (DTD – definiţia tipului de document). Aceasta conţine regulile ce

caracterizează fiecare tip de document.

Sursa autorizată pentru furnizarea de informaţii despre HTML şi HTML DTD este

World Wide Web Consortium (W3C) având adresa http://www.w3.org.

Tag-ul este termenul consacrat pentru a defini elementele cu care sunt marcate

textul şi grafica într-o pagina web. Fiecare tag este încadrat de semnele "<" (mai mic)

şi ">" (mai mare).

De exemplu: <B>Acest text se va vedea îngroşat într-un browser</B>

Primul cuvânt sau caracter ce apare în interiorul acestor paranteze poartă numele

de element.

Majoritatea elementelor au un tag de deschidere şi unul de închidere cu aceeaşi

structură, dar cu prezenţa caracterului "/" în faţa denumirii elementului.

De exemplu: </FONT> este un tag de închidere

Cuvântul sau cuvintele ce urmează după element şi despărţite de acesta printr-un

spaţiu, poartă denumirea de atribute, având rolul de a descrie proprietăţile

elementelor.

Atributele sunt urmate de semnul "=" şi pot avea diferite valori. Valoarea unui

atribut este trecută, de obicei, între ghilimele.

De exemplu: <FONT COLOR="BLUE">Acest text va fi albastru</FONT>

Elementele HTML pot avea unul sau mai multe atribute:

De exemplu: <FONT COLOR="BLUE" SIZE="+1">Acest text va fi albastru şi cu o

unitate mai mare decât normal</FONT>

De remarcat că atributele nu apar şi în tag-urile de închidere.

Elementele HTML specifică structura logică a unui document web şi sugerează

prezentarea vizuală a documentului. HTML furnizează doua tipuri de elemente:

http://www.w3.org/


Pagina | 11

- tag-urile care permit delimitarea antetelor, paragrafelor, listelor, tabelelor,

legăturilor, imaginilor, etc;

- referinţele de entitate caracter care permit utilizarea în documentele HTML a

simbolurilor declarate drept caractere de control. Acestea se identifică uşor deoarece

întotdeauna încep cu ampersand "&". De exemplu, pentru a reprezenta simbolul

"<" într-un document HTML, se va utiliza referinţa de entitate caracter &lt (less

then).

Nota: Tag-urile se închid în ordinea inversă deschiderii lor, sintaxa corecta a

unei formatări cu mai multe tag-uri fiind reprezentată astfel:

<TAG1><TAG2>...<TAGn> obiect formatat </TAGn>...</TAG2></TAG1>

Elemente de bază

Orice pagină web (document HTML) are în structură trei elemente obligatorii: un

element numit HTML, care cuprinde întregul document, şi două sub-elemente ale

acestuia: HEAD (antet, cap) şi BODY (corp).

Tag-ul <HTML> este primul tag care trebuie sa apară într-un fişier HTML. El va încadra

alături de tag-ul sau corespunzător de închidere (</HTML>) întreaga pagină web.

Tag-ul <HEAD> va marca partea de antet a paginii web. Are tag corespunzător de

închidere (</HEAD>).

Tag-ul <BODY> va încadra conţinutul paginii web. Are tag corespunzător de închidere

(</BODY>).

Tag-ul <TITLE> marchează titlul unui document HTML, cel care va fi afişat în bara de

titlu a browser-ului. Acest tag se foloseşte numai în interiorul tag-ului HEAD. Daca

acest tag lipseşte, atunci în bara de titlu va apărea numele fişierului.

Iată un model de structură a unui document HTML:

<HTML>

<HEAD>

<TITLE>Titlul documentului</TITLE>

<BODY>

Conţinutul documentului

</BODY>

</HTML>


Pagina | 12

Şi iată cum arată un document HTML ce utilizează tag-urile din structura

anterioară:

Notă: Modul de scriere al denumirii tag-urilor este indiferent de caz, scrierea

lor cu caractere majuscule sau cu caractere minuscule nu influenţează

comportamentul acestora: <TAG> este echivalent cu <tag> şi cu <Tag> sau cu

<taG> etc. Pentru evidenţierea mai pronunţată a acestora, am optat pentru

scrierea cu majuscule a denumirii tag-urilor pe parcursul întregii lucrări.

B. CSS

O problemă importantă când avem un site cu multe pagini este atunci când dorim să

facem anumite schimbări în elementele pagini: fondul, grafica sau fontul textelor din

pagini.

Prin utilizarea CSS (Cascading Style Sheets), în traducere "foi de stil în cascadă", acest

lucru nu mai este o problemă, realizându-se relativ uşor, prin schimbarea sau

adăugarea unor elemente în codul CSS, nefiind nevoie să lucram la fiecare pagină sau

la fiecare element din pagină.

CSS se ocupă în general cu aspectul şi controlul grafic al elementelor din pagină, cum

ar fi: textul, imaginile, fondul, culorile şi aşezarea acestora în cadrul ferestrei paginii.


Pagina | 13

CSS foloseşte stiluri, acestea înglobează, sub un anumit nume, atribute de formatare

care se aplică asupra unui element individual din pagină, asupra unui grup de

elemente sau la nivelul întregului document.

CSS funcţionează cu HTML, însă nu este HTML. El extinde funcţionalităţile HTML,

permiţând redefinirea etichetelor HTML existente.

Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element individual

din interiorul său, poate fi controlat mult mai uşor. Stilurile pot fi aplicate asupra unui

element, a unui document sau chiar asupra unui întreg site web.

Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel că

documentele HTML sunt afişate ca şi cum CSS n-ar exista, dar cele mai cunoscute şi

utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer, Opera, şi altele, sunt

compatibile CSS.

Codurile CSS pot fi scrise în interiorul paginii sau într-un fişier extern cu

extensia".css".

Codul CSS, ca formă generală, este alcătuit din: obiectul care va fi formatat.

proprietăţile acestuia şi valoarea (sau atributele) fiecărei proprietăţi.

Când este adăugat în documentul HTML, trebuie scris în cadrul unui tag <style> în

secţiunea HEAD a documentului HTML, după cum se vede în formula generală de mai

jos;

<html>

<head>

<title>Titlul</title>

<style type="text/css">

obiect_css {

proprietate:valoare;

alta_proprietate:valoare;

}

</style>

</head>

<body>

... Continut ...

</body>

</html>

- Observaţi sintaxa codului CSS. Perechile proprietate:valoare se scriu între acoladele

obiectului CSS pe care-l definesc, între "proprietate" şi "valoare" trebuie să fie un

caracter două-puncte (:) iar la sfârşitul perechii se adaugă un caracter punct-şi-virgulă

(;)


Pagina | 14

- Când este adăugat într-un fişier extern ".css", codul CSS se scrie la fel, dar nu se mai

adaugă tag-ul <style>.

1. Obiectele (regulile) CSS

Există trei tipuri principale de obiecte CSS: selector, clasă şi identificator.

- Selectorul HTML

Selectorul HTML se foloseşte pentru a redefini modul de afişare a conţinutului

etichetei HTML.

Un selector HTML reprezintă partea etichetei HTML care indică navigatorului tipul de

etichetă.

Iată un exemplu:

h1 { font-family:"Arial"; font-size:15px; }

- Aici selectorul este "h1".

Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei HTML.

Selectorul şi eticheta deşi par identice, totuşi nu sunt.

- Clasa

Clasa este un obiect care poate fi aplicat oricărei etichete HTML.

O clasă trebuie creată în interiorul etichetei HTML înainte de a fi definită într-un cod

CSS. Crearea clasei în înteriorul etichetei se face simplu, prin specificarea

cuvântului class şi numele clasei, ca în exemplul de mai jos:

<h1 class="nume_clasa"> Text </h1>

- "nume_clasa", poate fi orice nume dorim.

- Apoi în înteriorul codului CSS, clasa trebuie definită prin adăugarea unui caracter

punct (.) înaintea numelui clasei, ca în exemplul următor:

.nume_clasa { font-family:"Arial"; font-size:15px; }

Numele aceleiaşi clase poate fi atribuit mai multor etichete HTML din aceeaşi pagină,

şi toate vor prelua acelaşi stil css.

- Identificator

Obiectele de tip identificator (ID) sunt asemănătoare cu clasele. Pot fi aplicate

oricărei etichete HTML, dar spre deosebire de clase, numele unui identificator

trebuie atribuit numai unei singure etichete HTML dintr-o pagină, pentru alta

etichetă se adaugă un ID cu nume diferit.


Pagina | 15

Ca şi clasa, identificatorul trebuie întăi creat în interiorul etichetei HTML. Modul de

creare este simplu, prin specificarea cuvantului id şi numele identificatorului, ca în

exemplul de mai jos:

<h1 id="nume_id"> Text </h1>

- "nume_id", poate fi orice nume dorim.

În interiorul codului CSS, identificatorul este definit prin adăugarea unui caracter diez

(#) înaintea numelui, ca în exemplul următor:

#nume_id { font-family:"Arial"; font-size:15px; }

2. Componentele unui obiect CSS

Obiectele CSS, indiferent de tipul lor, au în componenţă următoarele elemente:

Selectorii - identifică un obiect; pot fi selectori de etichete HTML, clase sau

identificatori.

Proprietăţile - identifică o proprietate a obiectului; se referă în special la aspect.

Valorile - sunt atributele unei proprietăţi; pot fi cuvinte cheie, valori numerice sau

procentuale, tipul valorii depinzând de proprietate.

Sintaxa generală a unei reguli CSS este următoarea:

selector {proprietate: valoare; }

Proprietăţile şi valorile constituie definiţia regulii (obiectului) CSS. Acestea se

regăsesc sub forma de perechi, despărţite de caracterul două puncte ”:”, fiecare

pereche se termină cu un caracter punct şi virgulă ";".

Etichetele HTML nu sunt sensibile la diferenţa între majuscule şi litere mici. Dar odată

cu apariţia limbajului XHTML, acesta face distincţie între majuscule şi minuscule,

astfel că toate etichetele şi toţi selectorii trebuie scrişi cu litere mici.


Pagina | 16

Crearea Foilor de Stil

1. Etichete HTML ş i stiluri CSS

CSS oferă posibilitatea de a schimba aspectul fiecărei etichete în parte, prin stabilirea

unui anume stil în interiorul ei, cu atributul "style". Acest lucru este util mai ales

pentru a anula alte stiluri ale elementului respectiv sau de a da elemente grafice de

stil doar etichetei respective.

Sintaxa pentru definirea stilurilor în interiorul unei etichete HTML este următoarea:

<eticheta style="proprietate:valoare;"> text ... </eticheta>

CSS permite şi definirea unor reguli de stil generale într-o pagină web. Acest set de

reguli trebuie scris în secţiunea de antet (head) a documentului, în cadrul tag-ului

<style>.

Sintaxa pentru definirea CSS într-un document HTML, în interiorul etichetei <head>

</head>, este următoarea:


selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... }

...

selector_n {proprietate1:valoare1; proprietate2:valoare2; ... }

</style>

- Definirea tuturor stilurilor într-o locaţie comună uşurează modificarea mai rapidă a

unei pagini.

Iată un exemplu practic de cod css:


h1 { font-family:’Arial’; font-size:15px; font-weight:bold;

color:#1111ff; }

p {font-family:’Arial’; font-size:12px; color:blue; }

</style>

Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci şi la nivel de întreg site.

Astfel, trebuie creată o foaie de stil externă într-un fisier separat, de preferat cu

extensia ".css", care poate fi inclus în pagina HTML prin două procedee: legatură sau

import.

Crearea unei foi de stil externe se face scriind codul CSS într-un fişier text cu ajutorul

unui editor de texte simplu (de exemplu Notepad în Windows), sau specializat în

acest sens (precum Notepad++). În fişierul extern creat se adaugă reguli CSS, fără însă

ca aceste reguli să fie încadrate în etichete STYLE.


Pagina | 17

După ce a fost creată foaia de stil externă, aceasta poate fi folosită de un document

HTML utilizând următoarea sintaxă, în interiorul tag-ului <head> </head>:

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

- Eticheta LINK apare în antetul documentului (sectiunea head), iar atributele folosite

transmit navigatorului tipul de legătură ("rel" – legătura cu o foaie de stil, "type" -

tipul codului din fişier) şi locaţia înspre fişierul ce conţine codul CSS ("href" – calea şi

numele complet al fişierului, inclusiv extensia).

O altă modalitate de utilizare a foilor de stil externe într-un document HTML o

reprezintă importul acestora folosind comanda @import.

Sintaxa pentru importul unei foi de stil externe este următoarea:


@import url(nume_fisier.css);

</style>

Pentru a importa un fişier CSS extern se foloseşte în cadrul secţiunii HEAD a

documentului HTML eticheta STYLE. În cadrul acestei etichete este adaugată

instrucţiunea "@import" de mai sus, unde "nume_fisier.css" reprezintă calea şi

numele fişierului ce conţine regulile CSS definite.

Alături de instrucţiunea "@import", în cadrul etichetei STYLE, pot fi adăugate definiţii

şi selectori suplimentari.

Legătura la un fişier CSS extern sau importul acestuia într-un document HTML are

acelaşi efect ca şi cum stilurile incluse ar fi fost definite direct în eticheta STYLE din

sectiunea HEAD a documentului HTML.

2. Definirea selectorilor

- Selectorii HTML pot fi definiţi prin adăugarea unui număr de definiţii compatibilie cu

eticheta HTML la care se referă, având următoarea formă generală:

selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... }

Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul

HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietăţile

prestabilite existente nu sunt anulate, ci se adaugă altele noi.

Utilizarea selectorilor de tip clasă oferă posibilitatea configurării unor stiluri care se

pot aplica doar acelor elemente care sunt etichetate cu clasa respectivă. Sintaxa

generală de definire a unei clase CSS este:


Pagina | 18

.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

Există cazul în care o clasă este asociată unui selector HTML, ceea ce înseamnă că

acea clasă poate fi folosită doar cu eticheta HTML respectivă. Pentru a defini o clasă

care să afecteze în mod direct un anume selector HTML, se foloseşte următoarea

sintaxă:

selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

Selectoarele de clasă sunt acceptate de toate navigatoarele. Numele unei clase e

recomandat să fie diferit de cuvintele rezervate JavaScript.

- Asemănător cu selectorii de clasă se definesc şi identificatorii (id-ul). Aceştia sunt

folosiţi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML

dintr-o pagină. Sintaxa generală de definire a unui identificator este:

#identificator { proprietate1:valoare1; proprietate2:valoare2; ... }

Identificatorii permit definirea unui element sub forma unui obiect, fiind folosiţi doar

o singură dată în cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel

poate fi manipulat şi cu ajutorul funcţiilor JavaScript.

Numele unui identificator e recomandat să fie diferit de cuvintele rezervate

JavaScript.

3. Crearea etichetelor HTML personalizate

Majoritatea etichetelor HTML au unele proprietăţi prestabilite. Acestea fie rămân aşa

cum sunt, fie pot fi redefinite. Există însă cazuri în care se doreşte crearea unor

etichete personalizate, pornind de la zero. În acest caz se folosesc

etichetele <span> şi <div>.

Eticheta <span> nu are proprietăţi moştenite. Ea reprezintă doar o locaţie vidă care

crează o etichetă în linie.

Pentru a configura o etichetă în linie trebuie definită o clasă sau identificator care sa

poată fi aplicat apoi unei etichete <span>. Iată un exemplu cu, forma generală, în

care selectori sunt precedati de eticheta <span> :

...

<span class="nume_clasa"> ... </span>

...

<span id="span1"> ... </span>

...

<span class="clasa_span"> ... </span>

...


Pagina | 19

Acum iată cum pot fi definiţi aceştia în interiorul unei foi de stil:


#span1 { proprietate1:valoare1; proprietate2:valoare2; ... }

span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ...

}

În momentul în care se doreşte configurarea unui bloc separat de restul conţinutului

unui document HTML, soluţia este eticheta <div>. Aceasta crează o zonă proprie în

pagină, cu linie nouă atât deasupra sa cât şi dedesubtul său.

Pentru crearea etichetelor DIV se procedează la fel ca şi în cazul etichetelor în linie

SPAN, prin definirea mai întâi a unei etichete de tip clasă sau identificator, urmată

apoi de aplicarea ei asupra unei etichete <div>.

Iată forma generală de aplicare a unei etichete <div> într-o pagină HTML :

...

<div class="nume_clasa"> ... </div>

...

<div id="div1"> ... </div>

...

Definirea acestor etichete <div> într-un cod CSS se face astfel:

div { proprietate1:valoare1; proprietate2:valoare2; ... }


#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }

Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca şi

celelalte tipuri de selectoare, în secţiunea "head" a documentului în interiorul

etichetei "style", sau într-un fişier extern care ulterior este legat sau importat în

documentul HTML.

4. Definirea de reguli similare

Dacă mai mulţi selectori folosesc aceleaşi definiţii css, aceştia pot avea aceeaşi listă

de elemente, fiind scrişi separat prin virgule. Sintaxa generală pentru definirea unei

liste cu mai mulţi selectori este următoarea:

selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... }

Împreună cu selectorii pot fi de asemenea definiţi identificatorii şi clasele.

Dezavantajul ar fi că în momentul în care este modificată o valoare a unei proprietăţi

incluse în definiţie, valoarea respectivă se va modifica în toate etichetele

reprezentate de aceşti selectori.


Pagina | 20

5. Definirea etichetelor în context (imbricate)

Când o etichetă este înconjurată de alte etichete (aflându-se astfel una în interiorul

alteia), spunem că aceste etichete sunt imbricate. Eticheta exterioară se numeste, în

acest caz, eticheta părinte, iar cea inferioară se numeşte copil. Se pot crea reguli care

revin numai etichetelor copil, sintaxa generală a unei astfel de reguli fiind:

selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ... }

- Unde "selector1" este selectorul părinte iar "selector2" este selectorul copil.

Lista de selectori imbricaţi poate fi mai mare de doi, ultimul selector din listă este cel

care primeşte toate stilurile incluse în regulă şi în plus le moşteneşte şi pe cele ale

părinţilor.

Ca şi selectorii singuri, selectorii imbricaţi pot include în listă clase, identificatori sau

selectori HTML.

Toate etichetele HTML, cu excepţia etichetei BODY, au cel puţin o etichetă părinte

care le înconjoară. De cele mai multe ori stilurile etichetelor din interior preiau

stilurile etichetelor părinte (există însă cazuri în care proprietăţile nu sunt moştenite

de etichetele imbricate). Acest mecanism se numeşte moştenirea stilurilor.

Prin redefinirea unui selector, eticheta nu-şi pierde proprietăţile prestabilite, doar în

cazul în care acestea sunt modificate. Astfel proprietăţile moştenite pot fi anulate

prin redefinirea acestora în lista de definiţii a etichetei imbricate.

6. Creşterea priorităţii unei definiţ ii

Valoarea !important adăugată unei definiţii atribuie maximum de prioritate în

determinarea ordinii unei execuţii.

Valoarea !important trebuie plasată înaintea caracterului ’;’, ca în exempul următor:

selector { proprietate1:valoare1; proprietate2:valoare2 !important; ... }

7. Determinarea ordinii execuţ iei

Deoarece există mai multe moduri de a aplica stilurile, pot apare situaţii în care unei

etichete să-i fie aplicate mai multe stiluri. Foile de stil din două sau mai multe surse,

folosite simultan, pot cauza contradicţii. De aceea există câteva reguli care determină

ordinea execuţiei (numită şi cascadă), acestea sunt:

Regulile CSS scrise în interiorul paginii HTML, în cadrul etichetei "style" din secţiunea

"head" au o prioritate mai mare decat cele scrise într-un fisier extern, iar regulile


Pagina | 21

scrise în interiorul etichetelor au o prioritate mai mare decât cele din cadrul etichetei

"style" din secţiunea "head".

2. Existenţa atributului !important – conferă prioritate maximă la afişare definiţiei în

care este utilizat.

3. Sursa regulilor – există numeroase navigatoare care permit utilizatorului să-si

definească propriile foi de stil. Totuşi, foile de stil ale autorului le anulează pe cele ale

vizitatorului daca acestea din urmă nu au valoarea "!important".

4. Specificitate – cu cât o regulă dispune de mai mulţi selectori HTML, de clasă şi de

identificator, cu atât prioritatea ei creşte. ID-urile au valoarea 100, clasele au

valoarea 10, iar selectorii HTML au valoarea 1.

5. Momentul apariţiei – cu cât un stil apare mai târziu, cu atât importanţa lui este

mai mare. Astfel, definiţiile unei etichete copil au prioritatea mai mare şi anulează

toate stilurile precedente cu care intră în conflict.

C. jQuery – Librărie JavaScript

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și

îmbunătăți procese precum traversarea arborelui DOM în HTML, managementul

inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie

cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și

să respecte filosofia "Unobtrusive JavaScript". Biblioteca a fost lansată in 2006 de

către John Resig.

Caracteristici

jQuery se poate folosi pentru a rezolva următoarele probleme specifice programării

web:

selecții de elemente în arborele DOM folosind propriul motor de selecții open

source Sizzle, un proiect născut din jQuery.

parcurgere și modificarea arborelui DOM (incluzând suport pentru

selectori CSS 3 și XPath simpli)

înregistrarea și modificarea evenimentelor din browser

manipularea elementelor CSS

efecte și animații

cereri tip AJAX

http://ro.wikipedia.org/wiki/Platforme_dezvoltare_Web

http://ro.wikipedia.org/wiki/JavaScript

http://ro.wikipedia.org/w/index.php?title=DOM&action=edit&redlink=1

http://ro.wikipedia.org/wiki/HTML

http://ro.wikipedia.org/wiki/AJAX

http://ro.wikipedia.org/w/index.php?title=Unobtrusive_JavaScript&action=edit&redlink=1

http://ro.wikipedia.org/wiki/2006

http://ro.wikipedia.org/w/index.php?title=John_Resig&action=edit&redlink=1

http://ro.wikipedia.org/w/index.php?title=Document_Object_Model&action=edit&redlink=1

http://sizzlejs.com/

http://ro.wikipedia.org/wiki/CSS

http://ro.wikipedia.org/wiki/XPath

http://ro.wikipedia.org/wiki/CSS

http://ro.wikipedia.org/wiki/AJAX


Pagina | 22

extensii ( vezi mai jos )

utilităti - versiunea browser-ului, funcția each.

Extensii

Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery.

Arhitectura sa permite programatorilor să dezvolte subaplicații bazate în biblioteca

principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. În acest

fel biblioteca principală poate ocupa foarte puțin spațiu, iar extensiile necesare în

anumite pagini web pot fi încarcate la cerere, doar când este nevoie de ele. Există un

set de extensii principal numit jQuery UI( jQuery User Interface) [3]. jQuery UI oferă

un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din

biblioteca de bază și teme de culori. Avantajul jQuery UI față de alte extensii este că

dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea

bibliotecii principale, minimizând riscul de incomptibilitate.

Orice programator poate crea o extensie și jQuery oferă publicare în catalogul de pe

pagina proiectului în diversele categorii disponibile.

Licență

Dublu licențiată sub licență MIT și GNU General Public License, jQuery

este software liber din categoria open source.

2.2. Aplicaţii software pentru realizarea şi vizualizarea paginilor web

Editoare simple

Notepad

Notepad++

Subime Text 2

Editoare grafice

Adobe Page Maker

http://ro.wikipedia.org/w/index.php?title=JQuery_UI&action=edit&redlink=1

http://ro.wikipedia.org/wiki/JQuery#cite_note-2

http://ro.wikipedia.org/w/index.php?title=Licen%C8%9B%C4%83_MIT&action=edit&redlink=1

http://ro.wikipedia.org/wiki/GNU_General_Public_License

http://ro.wikipedia.org/wiki/Software_liber

http://ro.wikipedia.org/wiki/Open_source


Pagina | 23

Microsoft Front Page

Adobe Dreamweaver

Browser-e

Internet Explorer

Mozilla Firefox

Google Chrome

Safari

Opera

Pentru realizarea fişierelor HTML folosind cod HTML, CSS sau Javascript, este

suficient editorul de texte Notepad, inclus în orice versiune a sistemului de operare

Windows. În figura următoare este prezentată aplicaţia Notepad, cu un fişier HTML

deschis.

Această aplicaţie, fiind un editor clasic de texte, nu oferă facilităţi pentru editarea

fişierelor HTML. În acest scop se găsesc nenumărate editoare de cod. Dintre acestea,


Pagina | 24

un editor gratis şi destul de bun este Notepad++. Acesta poate fi descărcat de pe

adresa: http://notepad-plus-plus.org/.

Nu gratuit, dar destul de agreat mai ales de către utilizatorii de MacOS, dar şi de cei

de Windows, este editorul Sublime Text 2. Aplicaţia poate fi descărcată gratuit de pe

adresa http://www.sublimetext.com/2.

http://notepad-plus-plus.org/

http://www.sublimetext.com/2


Pagina | 25

Pentru cei obişnuiţi să creeze pagini web prin scrierea de cod HTML, CSS sau chiar

Javascript, aceste două editoare, faţă de clasicul Notepad, oferă avantaje deosebite,

cum ar fi: colorarea codului în funcţie de cuvinte cheie/rezervate, sugestiile oferite în

timp ce scriem codul, închiderea automată a tag-urilor HTML.

Pe lângă aceste editoare de cod, cei care creează pagini web, pot folosi şi editoare

grafice, numite si WYSIWYG (What You See Is What You Get). În aceste aplicaţii, web

designer-ul lucrează pe pagina web afişată aşa cum va apărea şi în browser, deci pe

lângă modul de lucru pe cod, se poate lucra şi în modul grafic. Dintre cele trei

enumerate mai sus se remarcă Adobe Dreamweaver, aplicaţie de la Adobe, care nu

este gratuită, dar se poate folosi pentru o perioadă de 30 de zile în modul de

evaluare.

Actuala versiune este Dreamweaver CS6.

Pagina web prezentată în această lucrare a fost editată pe versiunea CS5.5.

În figura următoare este prezentată pagina de pornire a aplicaţiei.


Pagina | 26

Schimbarea între modul text de editare a codului şi modul grafic se face foarte

simplu de pe bara de unelte.

Pagina web creată s-a realizat în modul Code prin scrierea de fişiere HTML, CSS şi, în

diferite situaţii chiar şi cod jQuery.


Pagina | 27

CAPITOLUL III REALIZAREA PAGINII WEB

În acest capitol voi prezenta modul cum a fost realizată pagina web pe secţiuni

şi anume: pagina principală, îngrijire, istorie, modelare, stiluri de Bonsai şi galerie

foto şi video.

3.1. Pagina principală [index.html]

Pagina principală a fost împărţită în secţiuni folosind codul DIV. Au fost create

următoarele div-uri:

- div-ul pentru antetul paginii, numit header, conţine meniul site-ului, titlul

paginii şi o imagine în partea dreaptă. Acest div este prezent în toate paginile

site-ului.

Pagina | 28

Codul HTML este dat mai jos.

<div id="header">

<div class="container">



<ul class="nav">

<li class="item1"><a href="index.html"

class="current">home</a></li>

<li class="item2"><a

href="ingrijire.html">ingrijire</a></li>


href="istorie.html">istorie</a></li>


href="modelare.html">modelare</a></li>


href="stiluri.html">stiluri</a></li>


href="galerie.html">galerie</a></li>

</ul>





<div class="logo-box">

<h1><a

href="index.html"><strong>Bonsai</strong> World</a></h1>

<h2>ATESTAT | Informatica</h2>

<p>Toate informatiile de care aveti nevoie

despre bonsai: istoria lor, ingrijire, crestere, modelare, stiluri,

galerie foto si video si multe altele.</p>

</div>



<img src="images/big-model.png" alt="" class="png

extra-img"/>

</div>

Pagina | 29

</div>

Codul CSS pentru realizarea meniului este următorul:

#header .nav {position:absolute;left:40px;top:0;width:240px}

#header .nav li {display:inline;text-indent:-9999em}

#header .nav li a {float:left;width:40px;height:350px;background-

repeat:no-repeat;background-position:0 0}

#header .nav li a:hover, #header .nav li a.current {background-

position:-40px 0}

#header .nav li.item1 a {background-image:url(images/m1.jpg)}






Se observă că meniul a fost construit din imagini, aplicate ca Background.

Aceste imagini au fost create folosind aplicaţia Adobe Photoshop.

- div-ul conţinut este împărţit în două secţiuni, prima conţine legături către

ultimele articole apărute pe site, codul HTML fiind următorul:

<div id="top-content">


<div class="indent">

<h2><span>Articole</span> recente</h2>

<div class="wrapper">

<div class="col-1 maxheight">



<div class="box maxheight">

<div class="right-bot-corner

maxheight">

<div class="inner">

<div

class="wrapper">

<img

src="images/ingrijire5.jpg" alt="" class="img-indent" />

<h5>Ghid

ingrijire Bonsai</h5>

Un ghid

complet pentru ingrijirea Bonsai-lor.

In sectiunea

<a href="ingrijire.html">ingrijire</a>

</div>

</div>

</div>

</div>



</div>

Pagina | 30

<div class="right-bot-corner

maxheight">

<div class="left-bot-

corner maxheight">

<div

class="inner1">

<div

class="wrapper">

<img

src="images/modelare5.jpg" alt="" class="img-indent" />

<h5>Tundere Bonsai</h5>

Ghid

complet de tundere a Bonsai-lor.

In

sectiunea <a href="modelare.html">modelare</a>

</div>

</div>

</div>

</div>

</div>



</div>





<div class="left-bot-corner

maxheight">

<div class="inner1">

<div

class="wrapper">

<img

src="images/stiluri2.jpg" alt="" class="img-indent" />

<h5>Stiluri

de Bonsai</h5>

O prezentare

a principalelor stiluri de Bonsai.

In sectiunea

<a href="stiluri.html">stiluri</a>

</div>

</div>

</div>

</div>



</div>

</div>

</div>

</div>

</div>

- al doilea div de conţinut, conţine în partea stângă o mini galerie foto iar în

partea dreaptă un div cu întrebările frecvente.

<div id="content">

Pagina | 31


<div class="indent">


<div class="mainContent">

<h2><span>Mini</span> Galerie

foto</h2>

<div class="continut">

<a rel="galerie1" href="images/galerie2/1.jpg"><img

src="images/galerie2/1.jpg" alt="" /></a>











</div>

</div>

<div class="aside">



<div class="box1">

<div class="top">

<div class="bottom">

<div class="faq">

<h3>Intrebari

Frecvente</h3>

<ul

class="img-list">

<li>

<img src="images/faq1.jpg" alt="" /><h4><strong>13 aprilie

2012</strong><br /><a href="intrebari_frecvente.html">Ce specie de

bonsai am?</a></h4>Spre deosebire de tarile vestice, in Romania

speciile de bonsai gasite in comert nu sunt numeroase.

</li>

<li

class="last">

<img src="images/faq2.jpg" alt="" /><h4><strong>24 aprilie

2010</strong><br /><a href="intrebari_frecvente.html">Unde trebuie

sa tin bonsaiul?</a></h4>Majoritatea bonsailor adora lumina, nu, nu

lumina filtrata sau semi-umbra, ci lumina directa!

</li>

</ul>

</div>

</div>

</div>

</div>



</div>

</div>

</div>

</div>


Pagina | 32

</div>

În ce priveşte galeria foto s-a folosit un script numit fancybox, script de tip

jQuery, cu ajutorul căruia imaginile sunt afişate în prim plan şi se poate trece foarte

uşor de la o imagine la alta.

Codul jquery este inclus în cel HTML în zona <head> şi prezentat mai jos:

<script type="text/javascript" src="fancybox/jquery.fancybox-

1.3.4.pack.js"></script>

<script type="text/javascript" src="fancybox/jquery.easing-

1.4.pack.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("a[rel=galerie1]").fancybox({

'transitionIn' : 'elastic',

'transitionOut' : 'elastic',

'speedIn' : 600,

'speedOut' : 200,

'titlePosition' : 'over',

'titleFormat' : function(title,

currentArray, currentIndex, currentOpts) {

return '<span id="fancybox-title-

over">Imaginea ' + (currentIndex + 1) + ' / ' + currentArray.length

+ (title.length ? ' ' + title : '') + '</span>';

}

});

});

</script>

<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"

type="text/css" media="screen" />


Pagina | 33

- div-ul footer (subsol) ce conţine numele autorului

<div id="footer">


<div class="inside">


<div class="fleft">Lucrare pentru ATESTAT

la Informatica AUTOR: Dan Iulia Alexandra</div>

<div class="fright">Colegiul Național

"Frații Buzești" - 2016</div>

</div>

</div>

</div>

</div>

<script type="text/javascript">Cufon.now();</script>

</body>

</html>

Pagina principală, scrisă în fişierul index.html, conţine legături către 2 fişiere CSS ce

se ocupă cu aşezarea obiectelor în pagină şi „stilizarea” elementelor HTML.

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

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

Fişierul cel mai important, style.css conţine următoarea secţiune de cod:

* {margin:0;padding:0}

html, body {height:100%}

html {min-width:1000px}

body {background:#276803;font-family:Arial, Helvetica, sans-

serif;font-size:100%;line-height:1.25em;color:#767676}

img {border:0;vertical-align:top;text-align:left}

object {vertical-align:top;outline:none}

ul, ol {list-style:none}

table, table td {padding:0;border:none;border-collapse:collapse}

.fleft {float:left}

.fright {float:right}

.clear {clear:both}

.col-1, .col-2, .col-3 {float:left}

.alignright {text-align:right}

.aligncenter {text-align:center}

.wrapper {width:100%;overflow:hidden}

/* GLOBAL */

.container {width:1000px;margin:0 auto;font-

size:.875em;position:relative}

#header {height:363px;background:url(images/header-bg.jpg) no-repeat

50% 0}

#header.small {height:231px;background:url(images/header-bg-

small.jpg) no-repeat 50% 0}

#top-content {background:#f5f5f5;width:100%}

#content {background:#fff;width:100%}


Pagina | 34

#content .mainContent {float:left;width:552px;margin-

right:44px;padding:20px 0 20px 0}

#content .aside {float:left;width:319px}

.ic, .ic a

{border:0;float:right;background:#fff;color:#f00;width:50%;line-

height:10px;font-size:10px;margin:-110% 0 0

0;overflow:hidden;padding:0}

#footer {height:127px;background:url(images/footer-bg.jpg) 50% 0

repeat-x}

/* forms parameters */

input, select, textarea {font-family:Arial, Helvetica, sans-

serif;font-size:1em;vertical-align:middle;font-weight:normal}

/* other */

.img-indent {width:100px; border:3px solid #5b990e; border-

radius:4px;margin:0 20px 0 0;}

.continut {width:100%;overflow:hidden;padding-bottom:12px; text-

align:justify; font-size:12px;}

.continut img {float:left;margin:10px 16px 10px 0; width:120px;

border:3px solid #5b990e; border-radius:4px;}

.extra-wrap {overflow:hidden}

p {margin-bottom:20px}

.p1 {margin-bottom:10px}



3.2. Pagina despre îngrijirea Bonsai-lor [ingrijire.html]

Conţine informaţii despre îngrijirea Bonsai-lor.


Pagina | 35

Pentru e evita încărcarea acestei pagini cu multă informaţie, s-a ales folosirea de cod

jQuery, pentru afişarea doar a unui porţiuni de informaţii şi un link pentru afişarea

întregului conţinut al articolului.

Fiecare imagine din această secţiune este afişată în prim plan atunci când se execută

click pe aceasta.

Codul jQuery folosit în acest sens este următorul:







$("a#imagine").fancybox({

'titlePosition' : 'inside',



'speedIn' : 600,

'speedOut' : 200,

'overlayShow' : true

});

});

</script>

<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"

type="text/css" media="screen" />


Pagina | 36

Iată în imaginea următoare acest efect:

3.3. Pagina despre istoria Bonsai-lor [istorie.html]

Conţine informaţii text şi imagini despre istoria Bonsai-lor. Imaginile au acelaşi efect

ca şi cele din pagina anterioară.


Pagina | 37

3.4. Pagina despre modelare [modelare.html]

Conţine informaţii despre modelarea Bonsai-lor. Efectele folosite aici sunt

identice cu cele din pagina despre îngrijire.

3.5. Pagina despre stiluri de Bonsai [stiluri.html]

Conţine informaţii importante despre principalele stiluri de Bonsai. De asemenea,

clasificarea Bonsai-lor după înălţime, după unghiul pantei.


Pagina | 38

Şi în această pagină s-a păstrat efectul jQuery pentru aducerea imaginii în prim plan

atunci când se efectuează click pe ea.

3.6. Pagina galerie [galerie.html]

Conţine o multitudine de imagini, grupate în colecţii. Fiecare colecţie este construită

de tip slideshow, astfel că la efectuarea de click pe imagine, aceasta este adusă în

prim plan, şi se poate trece foarte uşor de la o imagine la alta.

Aceste efecte sunt prezentate în imaginile următoare:


Pagina | 39

O parte din codul jquery cu care s-a realizat acest efect este dat mai jos.










'speedIn' : 600,

'speedOut' : 200,







}

});




'speedIn' : 600,

'speedOut' : 200,








Pagina | 40

}

});

Pe lângă acest lucru, imaginile din pagină, ca de altfel toate imaginile din site sunt

afişate folosind o bordură cu colţuri rotunde, efect posibil datorită CSS versiunea 3.

.continut img {float:left;margin:10px 16px 10px 0; width:120px;

border:3px solid #5b990e; border-radius:4px;}

În această pagină sunt adăugate şi 4 filme, preluate de pe youtube.com şi adăugate

în site cu cod de tip EMBED prezentat mai jos:


Pagina | 41


<h5>Bonsai - O mica minune (video)</h5>

<iframe width="420" height="315"

src="http://www.youtube.com/embed/ZtRFf5yiWXc" frameborder="0"

allowfullscreen></iframe>

</div>


<h5>Bonsai Chicago Botanical Gardens (video)</h5>


src="http://www.youtube.com/embed/3KzoslHZaJs" frameborder="0"


</div>


<h5>Chuhin Japanese Maple (video)</h5>


src="http://www.youtube.com/embed/a6HdPlO6VI8" frameborder="0"


</div>


Pagina | 42

CONCLUZII

În această lucrare pentru atestarea competenţelor profesionale la disciplina

Informatică am ales să realizez o pagină web în care să prezint informaţii despre

Bonsai.

Pagina web a fost creată folosind cod HTML şi CSS, iar pentru diferite efecte

(galerie de imagini alternante, aducere de imagini în prim plan) am folosit cod jquery.

În ce priveşte jquery, pe internet se găsesc o multitudine de exemple în ce priveşte

utilizarea acestuia pentru diferite efecte ale paginilor web. Acest lucru face ca

paginile create să fie mai atractive, urmând evoluţia Web 2.0 privind design-ul

paginilor web.

A fost utilizat ca editor HTML unul de tipul grafic şi anume Adobe

Dreamweaver, versiunea 5.5. Acest editor profesional este unul dintre cele mai

utilizate în lumea web designer-ilor ca urmare a performanţelor sale şi facilităţilor pe

care le oferă.

Ca rezultat al dezvoltării acestui site am încercat să înţeleg limbajul HTML şi,

alături de acesta limbajul CSS. Dobândind aceste noţiuni, am elaborat lucrarea de

faţă cu scopul ca aceasta să fie utilă şi altor elevi de liceu care doresc să realizeze

pagini web având ca ajutor un ghid cu exemple, atât în ce priveşte codul sursă cât şi

imagini.


Pagina | 43

BIBLIOGRAFIE

1. Mark Pilgrim HTML 5: Ghidul Incepatorului, Editura 3D Media Communications, 2011

2. Molly E. Holzschlag Spring into HTML and CSS, Ed. Paperback, 2005

3. Eric T. Freeman Head First HTML with CSS, Ed. Paperback, 2005

4. John Duckett Beginning HTML, xHTML, CSS and Javascript, Ed. WROX, 2009

5. Jason Cranford Teague

DHTML şi CSS, Editura Teora 2002

6. Tom Negrino, Dori Smith

Javascript pentru World Wide Web, Ghid de învăţare rapidă prin imagini, Editura Corint

* * * http://www.marplo.net/html/

* * * http://www.marplo.net/curs_css/

http://www.marplo.net/html/

http://www.marplo.net/curs_css/

lucrare pentru atestarea - competentedigitale.ro · (cnipmmr) în lunile aprilie-mai 2005 pe un...

Documents