Post on 30-Aug-2019
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
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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
3 milioane de utilizatori in 2003
4 milioane de utilizatori in 2004
5 milioane de utilizatori in 2005
5,5 milioane de utilizatori in 2006
ATESTAT INFORMATICĂ Bonsai
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%).
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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ă
ATESTAT INFORMATICĂ Bonsai
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:
ATESTAT INFORMATICĂ Bonsai
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 < (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>
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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ă
(;)
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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:
<style type="text/css">
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:
<style type="text/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.
ATESTAT INFORMATICĂ Bonsai
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:
<style type="text/css">
@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:
ATESTAT INFORMATICĂ Bonsai
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>
...
ATESTAT INFORMATICĂ Bonsai
Pagina | 19
Acum iată cum pot fi definiţi aceştia în interiorul unei foi de stil:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#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; ... }
.nume_clasa { 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.
ATESTAT INFORMATICĂ Bonsai
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
ATESTAT INFORMATICĂ Bonsai
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
ATESTAT INFORMATICĂ Bonsai
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
ATESTAT INFORMATICĂ Bonsai
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,
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
Pagina | 28
Codul HTML este dat mai jos.
<div id="header">
<div class="container">
<!-- .nav -->
<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>
<li class="item3"><a
href="istorie.html">istorie</a></li>
<li class="item4"><a
href="modelare.html">modelare</a></li>
<li class="item5"><a
href="stiluri.html">stiluri</a></li>
<li class="item6"><a
href="galerie.html">galerie</a></li>
</ul>
<!-- /.nav -->
<!-- .logo-box -->
<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>
<!-- /.logo-box -->
<img src="images/big-model.png" alt="" class="png
extra-img"/>
</div>
ATESTAT INFORMATICĂ Bonsai
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)}
#header .nav li.item2 a {background-image:url(images/m2.jpg)}
#header .nav li.item3 a {background-image:url(images/m3.jpg)}
#header .nav li.item4 a {background-image:url(images/m4.jpg)}
#header .nav li.item5 a {background-image:url(images/m5.jpg)}
#header .nav li.item6 a {background-image:url(images/m6.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="container">
<div class="indent">
<h2><span>Articole</span> recente</h2>
<div class="wrapper">
<div class="col-1 maxheight">
<!-- .box -->
<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>
<!-- /.box -->
</div>
<div class="col-2 maxheight">
<!-- .box -->
<div class="box maxheight">
ATESTAT INFORMATICĂ Bonsai
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>
<!-- /.box -->
</div>
<div class="col-3 maxheight">
<!-- .box -->
<div class="box maxheight">
<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>
<!-- /.box -->
</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">
ATESTAT INFORMATICĂ Bonsai
Pagina | 31
<div class="container">
<div class="indent">
<div class="wrapper">
<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>
<a rel="galerie1" href="images/galerie2/2.jpg"><img
src="images/galerie2/2.jpg" alt="" /></a>
<a rel="galerie1" href="images/galerie2/3.jpg"><img
src="images/galerie2/3.jpg" alt="" /></a>
<a rel="galerie1" href="images/galerie1/2.jpg"><img
src="images/galerie1/2.jpg" alt="" /></a>
<a rel="galerie1" href="images/galerie1/4.jpg"><img
src="images/galerie1/4.jpg" alt="" /></a>
<a rel="galerie1" href="images/galerie1/6.jpg"><img
src="images/galerie1/6.jpg" alt="" /></a>
</div>
</div>
<div class="aside">
<!-- .box1 -->
<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>
<!-- /.box1 -->
</div>
</div>
</div>
</div>
ATESTAT INFORMATICĂ Bonsai
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" />
ATESTAT INFORMATICĂ Bonsai
Pagina | 33
- div-ul footer (subsol) ce conţine numele autorului
<div id="footer">
<div class="container">
<div class="inside">
<div class="wrapper">
<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%}
ATESTAT INFORMATICĂ Bonsai
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}
.p2 {margin-bottom:20px}
.p3 {margin-bottom:30px}
3.2. Pagina despre îngrijirea Bonsai-lor [ingrijire.html]
Conţine informaţii despre îngrijirea Bonsai-lor.
ATESTAT INFORMATICĂ Bonsai
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:
<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#imagine").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true
});
});
</script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"
type="text/css" media="screen" />
ATESTAT INFORMATICĂ Bonsai
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ă.
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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:
ATESTAT INFORMATICĂ Bonsai
Pagina | 39
O parte din codul jquery cu care s-a realizat acest efect este dat 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>';
}
});
$("a[rel=galerie2]").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>';
ATESTAT INFORMATICĂ Bonsai
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:
ATESTAT INFORMATICĂ Bonsai
Pagina | 41
<div class="continut">
<h5>Bonsai - O mica minune (video)</h5>
<iframe width="420" height="315"
src="http://www.youtube.com/embed/ZtRFf5yiWXc" frameborder="0"
allowfullscreen></iframe>
</div>
<div class="continut">
<h5>Bonsai Chicago Botanical Gardens (video)</h5>
<iframe width="560" height="315"
src="http://www.youtube.com/embed/3KzoslHZaJs" frameborder="0"
allowfullscreen></iframe>
</div>
<div class="continut">
<h5>Chuhin Japanese Maple (video)</h5>
<iframe width="420" height="315"
src="http://www.youtube.com/embed/a6HdPlO6VI8" frameborder="0"
allowfullscreen></iframe>
</div>
ATESTAT INFORMATICĂ Bonsai
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.
ATESTAT INFORMATICĂ Bonsai
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/