Punim Diplome Bachelor - Dizajnimi i Ueb Faqeve HTML CSS JavaScript

UNIVERSITETI I PRISHTINËS “HASAN PRISHTINA”

FAKULTETI I EDUKIMIT

DEPARTAMENTI TEKNOLOGJI DHE INFORMATIKË

DIZAJNIMI I UEB FAQEVE ME GJUHËT HTML, CSS DHE JAVASCRIPT

( Punim i Diplomës në Studimet Bachelor )

Mentori Studenti:

Prof. ass. Kyvete SHATRI Ferid SHAQIRI

Prishtinë, Korrik, 2014

ii

Ky punim diplome u mbrojt më: _______________________ para

Komisionit vlerësues në përbërje:

1. ___________________________ Kryetar

2. ___________________________ Anëtar

3. ___________________________ Anëtar

E vlerësoi punimin me notën: _____________

Nënshkrimet e anëtarëve të Komisionit Vlerësues:

1. _______________________.

2. _______________________.

3. _______________________.

Prishtinë, 2014

iii

ABSTRAKT

Në këtë temë diplome do të trajtohet krijimi i ueb faqeve në gjuhët programuese HTML,

CSS dhe JavaScript.

HTML është një gjuhë që shërben për krijimin dhe dizajnimin e ueb faqeve në internet.

Në këtë punim do të trajtojmë çështjet që kanë të bëjnë me njohjen e programimit të

këtillë që përmban komanda ( urdhra ) për ndërtimin e një dokumenti hypertekst i cili do

të përmbajë të dhëna apo informata në formate të ndryshme si tekst, imazhe, muzikë etj.

Po ashtu do të prezantojmë shembuj të ndryshëm të komandave kodeve në gjuhën CSS

dhe JavaScript, dhe në kapitullin e fundit do ta prezantojmë ueb faqen të cilën e kemi

punuar në kuadër të këtij punimi.

iv

FALËNDERIM

Në radhë të parë dua të falënderoj familjen time, për mbështetje në çdo hap të shkollimit

dhe në realizimin përfundimtar të këtij punimi.

Falënderim të veçantë kam për profesoreshën Kyvete Shatri, e çmoj shumë për durimin

që pati për diskutimet, këshillat dhe rekomandimet që mi dha për ta përfunduar këtë

punim diplome.

Falënderoj të gjithë ata që ndihmuan në këtë punim në çfarëdo mënyre që të marr

formatin e duhur.

Një falënderim të posaçëm kam edhe për shoqërinë e Fakultetit posaçërisht për kolegët

Adhurim Ismaili dhe Mensur Lohaj.

v

PËRMBAJTJA E TEMËS

1. Hyrje .....................................................................................................................................1

Kapitulli I

2. Bazat për Ueb dizajn .............................................................................................................2

2.1. Hapat e parë në ueb dizajn ..................................................................................................... 2

2.2. Dreamweaver .......................................................................................................................... 3

Kapitulli II

3. Hyrje në gjuhën programuese HTML .....................................................................................4

3.1. Hyrje në HTML ......................................................................................................................... 4

3.2. Përdorimi i HTML-së në krijimin e ueb-it ................................................................................ 6

3.3. Krijimi i një dokumenti në HTML ............................................................................................. 6

3.4. Sintaksa e HTML elementeve .................................................................................................. 7

3.5. Struktura e një programi në HTML ......................................................................................... 8

3.6. Formatizimi i dokumentit ........................................................................................................ 9

4. Teksti në HTML...................................................................................................................11

4.1. Fonti ...................................................................................................................................... 11

4.2. Titujt ...................................................................................................................................... v2

4.3. Paragrafët .............................................................................................................................. v3

4.4. Elementet për formatizim ..................................................................................................... v4

4.5. Madhësia e tekstit ................................................................................................................. v5

5. Listat në HTML ....................................................................................................................16

5.1. Listat e pa numëruara ........................................................................................................... 16

5.2. Listat e numruara .................................................................................................................. 17

5.3. Listat e definuara................................................................................................................... 17

6. Imazhet në HTML ................................................................................................................18

6.1. Vendosja e imazhit në HTML ................................................................................................. 18

6.2. Ndryshimi i madhësisë së imazhit ......................................................................................... 19

6.3. Atributet e imazhit ................................................................................................................ 20

7. Linqet në HTML ...................................................................................................................21

7.1. Insertimi i linqeve .................................................................................................................. 21

vi

7.2. Krijimi i linqeve me imazhe ................................................................................................... 22

7.3. Linku me e-mail ..................................................................................................................... 23

8. Tabelat në HTML .................................................................................................................24

8.1. Krijimi i tabelës ...................................................................................................................... 24

8.2. Formatizimi i tabelës ............................................................................................................. 27

Kapitulli III

9. Hyrje në CSS........................................................................................................................29

9.1. Çfarë është CSS ..................................................................................................................... 29

9.2. Përparësitë e përdorimit të CSS në ueb ................................................................................ 30

9.3. Mënyra e aplikimit të CSS në ueb faqe ................................................................................. 30

9.3.1. Stilet brenda elementit .................................................................................................... 30

9.3.2. Stilet e bashkangjitura ...................................................................................................... 31

9.3.3. Stilet e jashtme ................................................................................................................. 32

9.4. Selektorët .............................................................................................................................. 33

9.5. Selektorët elementarë .......................................................................................................... 34

9.6. Selektorët klasë ..................................................................................................................... 34

9.7. Selektorët ID .......................................................................................................................... 34

10. Prapavijat në CSS ..............................................................................................................35

10.1. Teksti në CSS ......................................................................................................................... 36

10.2. Fontet në CSS ........................................................................................................................ 38

10.3. Kufijtë në CSS ........................................................................................................................ 40

10.4. Margjinat në CSS ................................................................................................................... 43

10.5. Listat në CSS .......................................................................................................................... 44

Kapitulli IV

11. Hyrje në JavaScript ............................................................................................................47

11.1. Konceptet bazike të JavaScript ........................................................................................... 48

11.1.1. Sintaksa e JavaScript ...................................................................................................... 49

11.1.2. Variablat ......................................................................................................................... 49

11.1.3. Operatorët ...................................................................................................................... 50

11.1.4. Strukturat kontrolluese .................................................................................................. 52

12. Deklarimi i kushtëzuar ......................................................................................................52

vii

13. Kontrolli me ciklet përsëritëse ..........................................................................................53

13.1. Funksionet ........................................................................................................................... 53

Kapitulli V

14. Zhvillimi i ueb-it ................................................................................................................55

15. Konkluzione ......................................................................................................................71

16. Literatura ..........................................................................................................................72

1

DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT

1.Hyrje

Të dhënat, informatat si ( teksti, fotografitë, muzika, video klipe etj.) që ndodhen brenda

shfletuesit, janë paraqitur për përdoruesit dhe gjenerohen në mënyrë dinamike (në një

format të veçantë p.sh.në gjuhën programues e “HTML”, duke përdorur CSS–n si

dizajnues i web faqes ). Të gjitha këto të dhëna, informata apo ( ueb- aplikacione)

ndodhen në një Web-server. Gjuhët programuese janë një ndër elementet më të

rëndësishme për zbatimin e tyre në shkolla gjatë procesit edukativo-arismore, kryesisht

në lëndën e informatikës, duke kompletuar kështu një bazë të mirë për zhvillimin e

njohurive bashkëkohore të teknologjisë së informimit dhe komunikimit. Nuk mundë të

kemi një përparim në të kuptuarit e lëndës së informatikës, në qoftëse nxënësit nuk e

përvetësojnë në mënyrë të duhur dhe të nevojshme mënyren e programimit në

përgjithësi e kështu edhe krijimin e web aplikacioneve në HTML si gjuhë programuese në

veçanti. Për këtë qëllim, së pari do t`i paraqes njohuritë e nevojshme për krijimin e web

aplikacioneve në HTML, konkretisht për kodimin e aplikacioneve, në mënyrë që të bëhet

sa më e kuptueshme jo vetëm për nxënësit por edhe për lexuesin në përgjithësi. Duke e

pas parasysh këtë nevoje të domosdoshme teknologjike, është nje arsye e madhe pse e

kam zgjedhur këtë temë për diplomim në fakultetin e edukimit, drejtimi “Teknologji-

Informatikë”.

2


2.Bazat për Ueb dizajn

2.1 Hapat e pare në ueb dizajn

Sigurohuni të zhvilloni një ueb dizajn i cili tërheq shikuesit në mënyrë efektive dhe të

përcjellë mesazhin tuaj në mënyrë që ju të merrni rezultate.

Të fokusoheni në Ueb dizajn duke e bërë atë që të jetë më i lehtë për t'u shikuar, pa

kompromentuar cilësinë estetike.

Është e rëndësishme për projektuesit e rinjë të faqeve ueb që të mësojnë bazat e ueb

dizajnit në mënyrën e duhur, në mënyrë që ata të mund të krijojnë faqet e internetit sa

më të paraqitshme si dhe funksionale. Janë të shumta burimet në dispozicion që

ndihmojnë fillestarët në ueb dizajn, kështu që këshillat apo shembujt e ilustruara me

fotografi në këtë punim do ti ndihmojë ueb dizajnerat të kapërcejnë vështirësitë e fillimit.

Merrni ndihmë nga një profesionist. Ka shumë për të mësuar nga dikush i cili ka zotëruar

tashmë ueb dizajn-in. Në këtë mënyrë, ju do të siguroheni që nuk do të bëni gabime

fillestare dhe gjithashtu do të keni një rast më të madh për t’u bërë një profesionist dhe

të vazhdoni të mësoni ueb dizajn.

3


2.1 Dreamweaver

Për dizajnimin e ueb faqeve kemi aplikacione të ndryshme të cilat na ndihmojnë apo

edhe na e lehtësojnë punën gjatë shkruarjes së komandave gjatë programimit. Më

poshtë i kemi listuar disa prej tyre që janë më të njohur:

- Adobe Dreamweaver CC

- Adobe Fireworks

- Apache

- MySQL

- Notepad ++

- Sublime Text

Adobe Dreamweaver CC është

lider i programeve aplikative për

ndërtimin e web faqeve.

Dreamweaver është një program

aplikativ me të gjitha veglat, që ua

mundëson shfrytëzuesve të vet

ndërtimin e web faqeve dinamike, që

mbështet të gjitha gjuhët

programuese për ndërtimin e faqeve

dinamike, por njëkohësisht ua mundëson edhe shfrytëzuesve personal (amatorëve)

ndërtimin e faqeve statike. Njëri nga përparësitë e programit dreamweaver është se

shfrytëzimi është i lehtë dhe është një urë që na shpie drejtë profesionalizimit. Programi

frontpage (microsoft), është njëri prej programeve që me lehtësi mund të ndërtojmë web

faqe, por, pas një periudhe, p.sh, nëse numri i dokumenteve të web-it kalojnë mbi 50-

100, fillon të komplikohet puna. Ndërsa në dreamweaver nuk përballemi me probleme të

natyrve të tilla. Në këtë pjesë, do të mësojmë se si në mënyrën më efiçente, do të mund

të përfitojmë nga pjesët punuese të programit.1

1 Ramë Likaj, Dizajnimi i Ueb faqeve me Dreamweaver CS3.

4


3.Hyrje në gjuhën programuese HTML

3.1 Hyrje në HTML

Ueb faqja paraqet një dokument tekstual që gati gjithmonë në vete përmban

informatë të formatuar dhe linqe me datoteka tjera. Regjistrimi i një informate special të

tillë në dokument tekstual realizohet me ndihmën e elementeve special tekstuale, të

quajtura tags ( komanda në formë etiketash, nofkash apo prapashtesash programore ).

Formati dhe domethënia e tyre përcaktohen nga e ashtuquajtura HTML ( HyperText

Markup Language ) ose gjuha për formatim hiperteksti, respektivisht gjuhë formatuese

hipertekstuale.

HTML në esence paraqet gjuhë për definim të ueb-dokumenteve. Ajo definon sintaksën

dhe udhëzon shfletuesin ( browser ) se si duhet ta paraqesë tekstin, fotografitë dhe

përmbajtjet tjera në një dokument, si një tërësi e integruar. Poashtu ajo i përshkruan

lidhjet në mes datotekës tekstuale, që krijohet në program tekstual ose me HTML vegël,

dhe asaj që mund të shihet kur paraqitet ueb-faqja nga kërkuesi i rrjetit.

Ueb-dokumentet mund të krijohen në çdo program tekstual ose në program për

formatizim teksti. Programi tekstual është program që formaton tekst të thjeshtë, ku nuk

ka zgjedhje shkronjash të ndryshme ( fonte ), tekst me ngjyrë më të theksuar

( bold ), shkronja kurzive ( italic ) ose stile të ndryshme. Kur shkruhet një tekst në një

program të këtillë, ajo përmbajtje shkruhet si tekst i pastër, pa kode për formatim.

5


Por, është fakt se sot Ju mund të krijoni ueb-sajte edhe pa pasur fare njohuri nga HTML-

ja, edhe atë përmes përdorimit të veglave për solucione vizuele dhe krijimit të ueb-

faqeve, të cilat i “fshehin” HTML prapashtesat, respektivisht kodin HTML.

Këto vegla, që ndryshe janë të njohura edhe me emrin formatues WYSIWYG ( What You

See Is What You Get – merr atë që sheh ), që varësisht nga prania e elementeve në një

dokument dhe nga formatimi i tekstit në atë dokument, automatikisht gjenerojnë HTML

datoteka. Përparsia e këtyre veglave është se reduktojnë të shkruarit e vazhdueshëm të

komandave apo prapashteshave dhe krijimin e datotekave pa njohuri paraprake të

HTML-së. Mangësia kryesore është se dokumenti i prodhuar në vete përmban shumë

elemente të panevojshme, e disavantazh ka edhe pamundësinë që të bëhen prezantime

më komplekse. Për këtë arsye, preferohet që secili të ketë njohuri bazike për HTML-në.

Në gjuhën programuese HTML përodren edhe teknologji tjera të cilat luajnë rolin e

ndihmësit. Këto lehtësojnë punën në dizajnimin e faqes, shkruhen si nënprograme dhe

pastaj thirren sa herë që ka nevojë të përdoren.

Këto teknologji janë: JavaScript, CSS ( Cascading Style Sheets ), CGI ( Common Gateway

Interface ), VBScript ( Visual Basic Script ), por mund të ketë edhe teknologji të tjera.2

2 Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 147.

6


3.2 Përdorimi i HTML-së në krijimin e ueb-it

Përhapja kaq e shpejtë e internetit dhe rëndësia e tij, kanë sfiduar programuesit

në internet që të krijojnë mjete, të cilat do të mundësonin krijimin e faqeve, përmbajtjeve

në ueb pa ndonjë përgatitje paraprake nga shkencat kompjuterike, apo teknikat e

programimit. Shtrohet pyetja pse të mësojmë HTML kur kemi mundësi të krijojmë ueb

faqe edhe vetëm nëse e njohim softverin përkatës dhe teknikat e dizajnimit? Përgjigja

është se, megjithatë, editorët e gatshëm të ueb faqeve nuk kujdesen edhe për detaje të

tjera që do të mundësonin të arrinim efektet edhe më të përkryera nga aspekti i detajeve

dizajnuese, përdorshmërisë dhe efikasitetit të ueb faqeve. Pra, nëse dëshironi të

specializoheni në fushën e dizajnit në ueb dhe të dalloheni nga performansat “mesatare”

të dizajnuesve softuerikë patjetër duhet të zhvilloni njohuri dhe shkathtësi pë përdorimin

e instruksioneve të HTML-së dhe aspektet e kodimit.3

3.3 Krijimi i një dokumenti në HTML

Dokumenti i tipit HTML është fajll i thjesht tekstual, i njohur edhe si fajll ASCII.

Edhe fajlli, si çdo ASCII fajll, mund të krijohet me çfardo tekst editori. Tekst editori është

program i cili përdoret për editimin e tekstit. Një tekst editor i cili është editori Notepad,

i cili instalohet me instalim të Windowsit.

Një dokument i tipit HTML mund të krijohet edhe me tekst procesor, siç është Word-i.

Ekzistojnë edhe programe të njohura si HTML editor, të cilat janë editor që ofrojnë edhe

disa lehtësi për krijuesit e HTML dokumenteve.

HTML dokumentet krijohen për t’u prezantuar në World Wide Web. HTML dokumentet

duhet të vendosen në kompjuterë të lidhur në Internet të njohur si Web Server, të cilët u

ofrojnë këto dokumente të gjithë atyre që kanë lidhje në Internet. 4

3 Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 149. 4 Ismail Kuksi, Programimi në HTML, Prizeren, 2012, faqe 3.

7


Për shkak se HTML dokumentet e sotme janë dokumente me përmbajtje të llojllojshme

tekstuale dhe audio-vizuele. Vetëm përdorimi i tekst editorëve, ose HTML editorëve, do

të ndikonte shumë në produktivitetin e krijuesve të përmbajtjeve për Ueb. Për këtë arsye

sot përdoren aplikacione shumë të fuqishme për krijimin e ueb faqeve. Njëri nga këto

aplikacione është Dreamweaver i prodhuesit Macromedia, aplikacion tjetër i njohur është

edhe Front Page i Microsoft-it. Për krijimin e ueb dokumentit mund të nevojiten edhe

shumë aplikacione të tjera për përpunimin e figurave, fotografive, zërit dhe përmbajtjeve

të tjera që mund të jenë në një ueb faqe.

3.4 Sintaksa e HTML dokumenteve

Për të qenë sa më i suksesshëm në shkrimin dhe përpilimin e një HTML dokumenti

t’i japim disa rregulla sintaksore të cilat duhet në mënyrë të përpiktë të zbatojmë për të

mos pas problem më vonë gjatë ekzekutimit të programit:

Një element në HTML fillon me një tag / etiketë e hapjes në fillim.

Një element në HTML përfundon me një tag / etiketë të mbylljes në fund.

Përmbajtja e çdo elementi është në mes të etiketës së fillimit dhe të fundit.

Disa prej elementeve në HTML kanë përmbajtje të zbrazët.

Elementet e zbrazëta janë të mbyllura në etiketën e fillimit.

Atributet sigurojnë informata shtesë në lidhje me një element.

Atributet janë të vendosura gjithmonë me etiketën fillore.

Atributet shtohen me emër dhe vlerë.

Vlerat e atributeve duhet të jenë gjithmonë të mbyllura me thonjëza.

Thonjëzat e dyfishta janë më të zakonshme, por edhe thonjëzat e vetme janë të

lejuara gjithashtu.

Komentet mund të futen në dokumentin HTML për ta bërë atë më të lexueshëm

dhe të kuptueshëm. Komentet janë të injoruara nga shfletuesit dhe nuk shfaqen

në ueb faqe.5

5 Ismail Kuksi, Programimi në HTML, Prizeren, 2012, faqe 4.

8


Atributet e HTML-Së shfrytëzohen për zgjerimin e veprimit të etiketave. Kemi lloje të

ndryshme të atributeve:

Class atributet ose ID

Name atributet

Stil atributet

Align atributet

Valign atributet

3.5 Struktura e një programi në HTML

Gjdo dokument në HTML fillon me elementin <html> brenda shkruhen të gjitha kodet

tjera në html dhe mbyllet me elementin përkatës mbyllës </html>, pastaj html

dokumentet përmbajnë kokën dhe trupin e tyre. Në kokën e html dokumentit shkruhen

të gjitha kodet që kanë për detyrë të manipulojnë kodin i cili gjendet në trupin e html

dokumentit. Dhe kuptohet në trupin e html dokumentit shkruhen të gjitha html kodet dhe

përmbajtja tekstuale apo grafike të cilën dëshirojmë të shfaqim në shfletues ( browser ).

Në kokë të html dokumentit mund të përcaktojmë se si elementet dhe përmbajtja tek

trupi do të duken.6

6 Jon Ducket, HTML & CSS Design and Build Websites.

<html> <head> <title>Faqja ime e pare</title> </head> <body> <h1>Welcome</h1> </body> </html>

9


Këtu kemi skeleton e një html dokumenti dhe siq treguam më lartë se gjdo gjë në html

shkruhet brenda <html></html> elementeve dhe në brendi kemi kokën dhe trupin. Pra

gjdo html dokument ka kokën dhe trupin dhe në kodin më lart me elementin

<head></head> përcaktojm kokën e dokumentit. Fillimisht në elementin <head></head>

kemi një element <title> i cili përcakton titullin e faqes që do të shfaqet lart në shfletues.

Nga ky shembull mund të kuptojmë edhe një gjë, brenda një html elementi mund të

shkruajmë disa html elemente tjera. Dhe brenda këtyre html elementeve mund të

shkruajmë dhe disa elemente tjera. Thellësia vazhdon në bazë të nevojave që kemi dhe

logjikisht nga kërkesat strukturojmë html elementet në dokument. Siq shohim brenda

elementit <body> kemi elementin <h1>Welcome</h1>. Si fillim do të punojmë në trupin

e dokumentit pra brenda elementeve <body> pasi jemi në hapat fillestar dhe më vonë do

të sqarojm se si mund ti manipulojmë këto elemente në kokën e dokumentit për t’u dhënë

pamje të ndryshme madhësi apo ngjyra.

3.6 Formatizimi i dokumentit

Të gjitha dokumentet e HTML-së ( ueb faqet ) duhet të përdorin këtë format

themlorë si bazë, në të cilin do të mbështetet faqja. Ky format është i përkryer me katër

pale të etiketave, të cilat janë:

Etiketa e HTML-së tregon browserit tuaj se faqja është një dokument HTML. Etiketa

<html> duhet të jetë patjetër etiketa e pare në dokumentin tuaj HTML, kurse etiketa

</html> është etiketa e fundit në dokumentin HTML.7

7 Learn HTML and CSS with w3schools.

<html> dhe </html>

<head> dhe </head>

<title> dhe </title>

<body> dhe </body>

10


Etiketat <head> përmbajnë etiketat e titullit të faqes, etiketat META të cilët janë makina

të kërkimit, që përdoren për të hartuar treguesin e faqes suaj, ndonjë etiketë bazë të

HTML-së, dhe disa kode të JavaScript-it. Sa për tani nuk duhet të koncentrohemi në etikatat

META, etiketat bazë të HTML-së, dhe kodet e JavaScript-it, sepse këto do të diskutohen

më vonë. Ju mund të ndërtoni ueb faqe edhe pa këto etiketa, dhe të shtoni ato më vonë

kur ju bëheni të rahatshëm me gjuhën programuese HTML.

Etiketat <title> janë të vendosura ndërmjet etiketave <head>, dhe përfshijnë titullin e

faqes ashtu si duket në shiritin e gjendjes ( status bar ), në anën e majt në këndin e lart të

ekranit. Ky titull do të jetë përshkrues i faqes suaj, por jo më tepër se 64 simbole me

gjatësi.

Etiketat <body> janë aty ku ju vendosni tërë përmbajtjen ( tekstet, fotografit dhe lidhjet

) që ju dëshironi të shihen në faqen tuaj. Etiketa body e fillimit është poashtu vendi ku ju

mund të cilësoni ngjyrën e sfondit ( background ), ngjyrën e tekstit, lidhjeve ( link ) dhe

ngjyrën e lidhjeve të vizatuara ( vlink ).

Më poshtë do të shihni se si ato duhet të jenë të rregulluara.

<html>

<head>

<title>Titulli i faqes suaj këtu </title>

<Meta name=”description” content=”Përshkrimi i faqes suaj këtu”>

</head>

<body>

E gjithë përmbajtja e faqes suaj shkruhet këtu..!

</body>

</html>

11


4. Teksti në HTML

4.1 Fonti

Për të specifikuar fontin e përgjithshëm për faqen tuaj, shkruani instruksionin <basefont>

në fillim të pjesës <body>.

Shembull: Në figurën 1 është treguar pamja e ueb faqes në browser ( shfletues ).

HTML kodi për ta paraqitur shembullin e më sipërm është paraqitur në figurën 1.1.

Vetia color bënë përzgjedhjen e ngjyrës së dëshiruar për tekstin e caktuar. Vetia face

zgjedh tipin e dëshiruar të fontit, kurse vetia size specifikon madhësinë e dëshiruar të

fontit.8

8 Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 154-156.

12


4.2 Titujt

Elementet për paraqitjen e titujve janë h1,

h2, h3 deri në h6. Sipas numrit elementi h1

ka përparsi më të madhe në një dokument

dhe elementi h6 ka përparsi më të vogël. Me

përparsi nënkuptojmë që nëse një tekst

rrethohet me elementin h1 ai do të shfaqet

më i madhi në tërë dokumentin. Gjithashtu

ueb shfletuesi përcjell këto elemente për të

kuptuar fillimin apo titullin e faqes në të

cilën po shfaqet teksti. Më saktësisht

strukturimi i tillë i faqeve ju ndihmon

motorëve të kërkimit siq është Google për të identifikuar më leht strukturën e ueb sajtit

që po kërkohet. Në figurën 1.2 kemi paraqitur pamjen në browser me ç’rast kemi

demostruar titujt duke filluar me elementin h1 deri tek ai h6.9

Për të parë html kodin shih figurën 1.3.

9 Learn HTML and CSS with w3school, faqe 9.

13


4.3 Paragrafët

Elementi për paraqitjen e paragrafëve

është <p></p>. Ne mund të shfaqim

tërë tekstin në një paragraph të vetëm,

por zakonisht kur kemi të bëjmë me të

dhëna që nxjerren prej bazës së të

dhënave ( database ) në vend të

ndryshme paragrafi do duhet të

mbyllet dhe të shfaqet ndonjë element

tjetër që ka specifika tjera dhe pastaj

përsëri të fillohet me paragraph të ri.

Gjithashtu gjatë shfaqjes së

informacioneve në ueb sajt duhet të jemi kreativ, dhe të ndërtojmë strukturën e tekstit

që do të tërheq sytë e lexuesve. Në figurën 1.4 shihet pamja e paragrafëve të paraqitur

në shfletues.10

HTML kodi është paraqitur në figurën 1.5.

10 Learn HTML and CSS with w3school, faqe 10.

14


4.4 Elementet për formatizim

Gjatë shkruarjes së një teksti duhet të jemi kreativ, në raste të ndryshme duhet të

përdorim kryerreshta dhe në raste të ndryshme të cilat duhet të tërheqin vëmendje tek

vizitorët. Në HTML egzistojnë elemente të posaqme për formatizim të teksteve në një

dokument. Në tabelën e mëposhtme kemi paraqitur instruksionet për formatim të tekstit:

<b>Teksti ketu</b> E paraqet tekstin si bold.

<i>Teksti ketu</i> E paraqet tekstin si Italic.

<u>Teksti ketu</u> E paraqet tekstin si të nënvizuar.

<sub>Teksti ketu</sub> E ‘ul’ dhe ‘e zvogëlon’ tekstin.

<sup>Teksti ketu</sup> E ‘ngrit’ dhe ‘e zvogëlon’ tekstin.

<strike>Teksti ketu</strike> Paraqet një vijë përmes tekstit.

<tt>Teksti ketu</tt> E paraqet tekstin si me makinë shtypi.

<pre>Teksti ketu</pre> E paraqet tekstin ashtu siç është, duke

përfshirë vendet e zbrazëta.

<em>Teksti ketu</em> Zakonisht e bënë tekstin italic.

<strong>Teksti ketu</strong> Zakonisht e bënë tekstin bold.

Tabela 1. Instruksionet për formatizim të tekstit.

15


Në figurën 1.6 kemi disa shembuj të përdorimit të këtyre elementeve dhe rezultati që

shfaqin në shfletues.

Shënim: elementi <br> në figurën 1.6 është përdorur vetëm për ti ndar rreshtat.

4.5 Madhësia e tekstit

Në vazhdim janë dhënë elementet për ndërrimin e madhësisë së fontit:

<big>Teksti ketu</big> E rrit madhësinë e tekstit për një njësi.

<small> Teksti ketu </small> E zvogëlon madhësinë për një njësi.

<h1> Teksti ketu </h1> E paraqet tekstin si titull të madh.

<h6> Teksti ketu </h6> E paraqet tekstin si titull të vogël.

<font size=”1”>Tekst</font> E paraqet tekstin me madhësinë më të vogël (8 pt).

<font size=”7”>Tekst</font> E paraqet tekstin me madhësinë më të madhe (36 pt).

Tabela 2. Instruksionet për formatizim të tekstit.

Shembull: ( shih figurën 1.7 )

16


5. Listat në HTML

Listat në gjuhën HTML, krijohen për të theksuar ose ndarë tekstet ose vlerat që kanë një

strukturë dhe një lidhshmëri logjike në mes veti. Këto lista mund të jenë:

Të pa numëruara ( ang. uncordered list)

Të numëruara ( ang. ordered list )

Të definuara ( ang. definition list )

5.1 Lista të pa numëruara

Lista të pa numëruara janë listat ku

ndarja e teksteve nuk ka nevojë për

vendosjen e numrave rendor. Këto lista

me tekste mund të vendosen me

etiketën <ul> dhe <li>. Ndarjet në lista

bëhet me etiketën <li> e cila nuk ka

nevojë për etiketë fundore </li>.

Struktura e listave të pa numëruara

është paraqitur në figurën 1.8 po ashtu

html kodin mund të shikoni në figurën

1.9.

17


5.2 Lista të numëruara

Këto lista me tekste mund të vendosen me etiketën <ol> </ol>. Ndarjet në lista bëhet me

etiketën <li> e cila nuk ka nevojë për etiketën fundore </li>. Struktura e listave të

numëruara duket si në figurën 1.10.

5.3 Lista e definuara

Listat e definuara nuk paraqesin listë elementesh, më tepër paraqesin një listë termesh

dhe sqarime të termeve. Kjo listë përbëhet prej tri tag-eve:

<dl> ( ang.definition list ) që definon listën e definimit.

<dt> ( ang.definition term ) që definon termin në listën e definimit.

<dd> ( ang.definition description ) që definon përshkrimin e termit në listën e

definimit.

Në figurën 1.11 kemi paraqitur një shembull me listat e definuara.

Pra listat e definicioneve janë të përshtatshme për të dhënë sqarimin e shkurtesave që

paraqiten në tekst. Nëse teksti brenda etiketave <DT> dhe <DD> është i gjatë, ai mund të

ndahet në paragrafë të markuar <P>.

18


6. Imazhet në HTML

6.1 Vendosja e imazhit në HTML

Për insertimin e imazheve në ueb faqe ne kemi zgjedhur dy mënyra, mënyrën nëpërmjet

folderit ku gjendet imazhi ( foto ) dhe mënyrën nëpërmjet link-ut.

Tek mënyra e parë ne do të tregojmë se si bëhet insertimi i imazheve nëpërmjet folderit

ku gjendet imazhi, pra përmes shteg-ut ( ang.path ).11

Një shembull konkret mund të shikoni në figurën 1.12.

11 Craig Grannell, CSS and HTML Web Design, faqe 125.

19


Në figurën 1.12 është

paraqitur imazhi me emër

“itshqip.png”. Vetia ‘src’

tregon vendin ku ndodhet

imazhi që duam ta vendosim

në ueb faqe. Kodi që tregohet

në figurën 1.12 do të thotë se

imazhi ndodhet në folderin e

njejtë me atë të ueb faqes.

Se si do të duket imazhi në shfletues është paraqitur në figurën 1.13.

6.2 Ndryshimi i madhësisë së imazhit

Madhësia e imazhit në ueb faqe mund të ndërrohet dhe preferohet që të jetë sa më e

vogël, në mënyrë që fajlli HTML të mos ngarkohet. Kontrolli i madhësisë së imazhit mund

të bëhet nëse në tag-un për vendosje të imazhit shënojmë gjerësinë ( width ) apo

gjatësinë ( height ). Një shembull të till e kemi paraqitur në figurën 1.14.

20


6.3 Atributet e imazhit

Në figurën 1.12 në elementin për shfaqje të imazheve kemi përdorur atributin src i cili

tregon rrugën apo burimin se ku ndodhet imazhi që dëshirojmë ta shfaqim në ueb faqe.

Gjatë programimit me html do të shohim se elementet kanë një ose më shumë atribute

brenda tyre dhe se ndonjëri nuk ka asnjë. Dhe kjo është e logjikshme sikurse në rastin e

elementit për kryerresht tek i cili nuk nevojitet asnjë atribut pasi që puna e tij është vetëm

hedhje në kryerresht. Por në rastine elementit për imazh e kemi patjetër atributin src me

të cilin i tregojmë shfletuesit se ku ta gjen fotografin që dëshirojmë ta shfaqim në

dokumentin tonë. Në tabelën e mëposhtme kemi paraqitur atributet e imazhit dhe

funksionin e tyre:

width Tregon gjerësinë e imazhit.

height Tregon largësin e imazhit.

border Përcakton kufit e imazhit.

src Specifikon shtegun URL-n e imazhit.

alt Përcakton një tekst alternativ nëse imazhi është zhdukur.

21


align Përcakton drejtimin horizontal të imazhit dhe merr vlerë majtas, djathtas apo në qendër.

valign Përcakton drejtimin vertikal të imazhit dhe merr vlerë lart, posht apo në qendër.

hspace Hapsira horizontale rreth imazhit.

vsapce Hapsira vertikale rreth imazhit.

name Përcakton emrin e imazhit në dokument.

id Përcakton ID-n e imazhit në atë dokument.

style Kjo përdoret vetëm atëher kur përdorim CSS.

title Përcakton titullin ose emërton imazhin me emrin të cilin ju e vendosni, shfletuesit në mënyrë automatike e identifikojnë emrin e imazhit në momentin që ju e vendosni kursorin mbi imazh.

Tebela 3. Atributet e imazhit.

7. Linqet në HTML

7.1 Insertimi i linqeve

Linqet janë pjesa më

themelore e World Wide Web-

it. Pikërisht, linqet janë ato që

I bëjnë të gjitha lidhjet në web.

Link-u ose Hyperlink-u

paraqet një lidhje që

mundëson leximin e një teksti

( dokumenti ) nga një pike ku

është emri i link-ut te një pikë

tjetër të dokumentit. 12


22


HTML kodin e një linku e kemi demonstruar në figurën 1.15.

7.2 Krijimi i linqeve me imazhe

Është e mundshme që një imazh të shndërrohet në link për më tepër faqe, varësisht se

në cilën pjesë të imazhit do të klikojmë.

Për të përdorur elementin <img> si një link vendoseni tagun <img> brenda një tagu <a>

si në figurën 1.15.

23


Shembulli i mësipërm i demostruar në shfletues ( browser ), figura 1.16.

7.3 Linku me e-mail

Shembull nëse dëshirojmë të lidhemi në e-mail adresë të një ueb serveri

www.hotmail.com me linkun Më dërgo e-mail, kodi në HTML do të duket si vijon:

http://www.hotmail.com/

24


Në këtë mënyrë, vizitorët shumë

leht munden të dërgojnë komentet

dhe vërejtjet e tyre për faqen tuaj,

si një informatë mjaft e

rëndësishme për zhvillimin e ueb-it.

Rezultati në shfletues, pas

ekzekutimit të kodit HTML mund të

shihni në figurën 1.17.

8. Tabelat në HTML

Tabelat paraqesin një element shumë të përshtatshëm për paraqitjen e të dhënave në

ueb faqe. Përveq mënyrës klasike të përdorimit të tabelave, në HTML tabelat

shfrytëzohen edhe për kontrollimin e vendosjes së teksteve dhe fotografive në ueb faqe.

Vendosja e elementeve të ueb faqes në fushat e tabelës paraqet një teknikë të ueb

dizajnerit. Në fushat e tabelës mund të vendosim elemente si p.sh tekst, fotografi, link

dhe tabela të tjera. Tabela formohet nga rreshtat ( ang.row ) dhe nga kolonat (

ang.column ), pikëpremja e tyre formon celulat ( ang.cell ).

8.1 Krijimi i tabelës

Tabelat përshkruhen me ndihmën e etiketës së përbërë <table> e cila mund të ketë më

shumë atribute:

Border përshkruan gjerësinë e kornizës së jashtme të tabelës.

Cellsapcing përshkruan gjerësinë e vijave ndarëse të dy celulave.

25


Cellpadding përshkruan hapsirën rreth përmbajtjes së celulës.

Width përshkruan gjerësinë e plotë të tabelës.

Nëntitulli i tabelës mund te jepet me etiketën caption e cila shkruhet mbi tabelë, dhe

mund të ketë atributin align:

Top, middle, bottom për rrafshim vertical.

Left, center, right për rrafshim horizontal.

Çdo rresht në tabelë përshkruhet në mes etiketave <tr> dhe </tr> ( ang.table row ). Edhe

etiketa <tr> mund të ketë atributet:

Align me vlera: left, center, right për rrafshim horizontal.

Valign me vlera: top, middle, bottom për rrafshim vertical.

Celulat përshkruhen në mes etiketave <td> dhe </td>. Etiketa <td> i ka këto atribute:

Align për rrafshim horizontal.

Valign për rrafshim vertikal.

Rowspan për bashkim horizontal të celulave.

Colspan për bashkim vertikal të celulave.

Etiketa <th> i ka vetitë e njejta si etiketa <td> vetëm se tekstin e qendërzon dhe e thekson

si titull të kolonës.13

Kodi HTML i një tabele duket si në figurën 1.17.

13 Learn HTML and CSS with w3schools, faqe 65-88.

26


Rezultati në shfletues, pas ekzekutimit të kodimit.

27


8.1 Formatizimi i tabelës

Ekzistojnë veti të ndryshme që mund të shtohen në instruksionet për themelimin e

tabelës, të cilat mundësojnë që tabelat të jenë një mjet i fuqishëm në dizajnimin në ueb.

Karakteristikat në vazhdim mund të shtohen në instruksionin <table>.

Vetia Përshkrimi

align= left, center, right Pozicionim majtas i tabelës. Qendërzim i tabelës. Pozicionim djathtas i tabelës.

background=emri i fajllit Imazh i vendosur brenda tabelës.

bgcolor=#rrggbb Ngjyra e prapavijës.

border=n Trashësia e kufirit

bordercolor=#rrggbb Hija e kufirit

cellpadding=n Distanca ndërmjet celulës dhe përmbajtjes.

cellspacing=n Hapsira ndërmjet celulave të tabelës.

nowrap Mbron nga rreshtat e rinj në rastin kur përmbajtja është më e gjerë se dritarja e shfletuesit.

frame= void above below lhs rhs hsides vsides box

I heq të gjithë kufijtë e jashtëm. Tregon kufirin në pjesën e sipërme. Tregon kufirin në pjesën e poshtme. Tregon kufirin në anën e majtë të tabelës. Tregon kufirin në anën e djathtë të tabelës. Tregon kufirin në të dy anët horizontale. Tregon kufirin në të dy anët vertikale. Tregon kufirin në të gjitha anët.

valign= top bottom

Pozicionon përmbajtjen në pjesën e epërme të celulave. Pozicionon përmbajtjen në pjesën e poshtme të celulave.

width= n, n n, n%

Gjerësia minimale e tabelës në pikselë. Gjerësia minimale në përqindje të madhësisë së dritares.

Tebela 4. Instruksionet e tabelës.

28


Karakteristikat e tabelës vendosen për tërë tabelën. Në disa raste, karekteristika të

caktuara, vendosen për një celulë të vetme dhe ato kanë prioritet më të madh për dallim

nga karakteristikat e përgjithshme të tabelës.

Këto karakteristika mund t’u shtohen instruksioneve <tr> dhe <td>.

Vetia Përshkrimi

align= left right center

Pozicionim i përmbajtjes, majtas celulës. Qendërzim i përmbajtjes. Pozicionim i përmbajtjes djathtas celulës.

background=emri i fajllit. Vendos imazh në prapavijën e celulës.

Bgcolor=#rrggbb Vendos ngjyrë në prapavijën e celulës.

Bordercolor=#rrggbb Vendos ngjyrë në kufirin e celulës.

Bordercolordark=#rrggbb Vendos ngjyrë për hijen e kufirit të celulave.

Valign= top middle bottom

Pozicionon lartë celulës. Pozicionon në mes celulës. Pozicionon poshtë celulës.

width= n n%

Specifikon gjerësinë minimale të celulave, në pikselë. Specifikon gjerësinë minimale të celulave, në përqindje të gjerësisë së tabelës.

height= n n%

Lartësia minimale e celulave në pikselë. Lartësia minimale e celulave në përqindje të lartësisë së tabelës.

Tebela 5. Instruksionet e tabelës.

29


9.Hyrje në CSS

9.1 Çfarë është CSS

CSS nënkupton shkurtesën për Cascading Style Sheets që në përkthim të lire do të thotë:

‘Shtresat për vendosjen e stileve në mënyrë kaskade’.

CSS është një fajll ( file ) stili i cili i jep forma, dimension, ngjyra kodit HTML. Janë disa

versione të CSS, dhe më i fundit është ai CSS3 me më shumë atribute, por kujdes, pasi

CSS3 suportohet vetëm nga shfletuesit e fundit: Firefox, Chrome, Opera dhe disa atribute

në IE9 ( internet explorer ).

Pra CSS është hartuar kryesisht per te mundesuar ndarjen e permbajtjes se dokumentit i

shkruar ne html ose ne nje gjuhe te ngjashme markup, duke perfshire elemente te tilla si

ngjyra, layout, fonts etj

30


9.2 Përparësitë e përdorimit të CSS në ueb

Duke përcaktuar paraqitjen të ndarë nga

përmbajtja, Style Sheets na mundëson të

ruajmë të gjitha informatat për stilin dhe

mënyrën e paraqitjes së elementeve të

një dokumenti HTML në një fajll të

vetëm. Ky fajll, që njihet si ‘shtresa e

jashtme për stilet’, përveç që ruan të

gjitha informatat për paraqitjen e

elementeve në ueb faqe, si e till, na

mundëson që në rast nevoje për ndryshimin e stilit të ndonjë elementi ta bëjmë atë nga

një vend i vetëm, i cili në mënyrë të njëhershëm do të vlejë për të gjitha faqet e lidhura

me të. Pra, me editimin e vetëm një CSS fajlli të jashtëm, mund të gjeneroni azhurimin e

përmbajtjes së të gjitha ueb faqeve të lidhura me të. Pikërisht kjo, është një ndër vetitë e

CSS, që shënoi ndryshimin në mënyrën e zhvillimit dhe dizajnimit të ueb faqes. 14

9.3 Mënyra e aplikimit të CSS në ueb faqe

Ka tri mënyra të vendosjes së stileve në një ueb dokument dhe atë:

Inline Styles ( stili brenda elementit );

Embedded Style Sheets ( stile të bashkangjitura në ueb dokument );

External Style Sheets ( stile të përcaktuara në fajlle të jashtme );

9.3.1 Stilet brenda elementit ( Inline Styles )

Me Inline Styles mundësohet vendosja e stileve drejtpërdrejt në elementin përkatës, duke

shfrytëzuar atributin style. Pra, në vetë strukturën e dokumentit mund të intervenohet

14 Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 212-215.

31


me stil, duke përzier përmbajtjen dhe prezantimin e elementit. Në vazhdim është

paraqitur një e till, që do të përcaktoj ngjyrën dhe margjinën e majtë të paragrafit:

Apo siq shihet në figurën 1.19 paraqitja në shfletues:

Pra, Inline Styles si një përzierje e konceptit të CSS preferohet të përdoret vetëm në

raste të rralla. Dizajnuesit e përdorin vetëm atëherë kur dëshirojnë të zëvendësojnë

prioritetin e aplikimit të stilit, kur kemi të bëjmë me ‘stile konfliktuale’ për të cilat do të

flasim pak më poshtë.

9.3.2 Stilet e bashkangjitura ( Embedded Style Sheets )

Embedded Style Sheet mund të shfrytëzohet kur një ueb faqe, spo një dokument përmban

një stil unik. Ky lloj stili, i bashkangjitet dokumentit në ballinën e tij, duke e paraqitur atë

me instruksionin <style>, mbasi shfletuesi e shfaq dokumentin duke e lexuar kodin e tij

rresht për rresht. Rreshti <style> i tregon shfletuesit se në vazhdim pasojnë instruksione

të shkruara me sintaksën dhe rregullat e CSS, si në vijim:

<p style="color: red; margin-left: 20px"> Ndryshimi i margjines se majt</p>

32


Shfletuesi tani do ta lexoj stilin dhe do ta implementojë atë sa here që do të hasë në

HTML instruksionet <body>, <p> apo <hr>.

9.3.3 Stilet e jashtme ( External Style Sheet )

Mënyra më efikase dhe më e përdorur për vendosjen e stileve në dokumentet e uebit

është mënyra e të shkruarit në një fajll, që ndodhet jashtë tij. Pra, me External Style Sheet,

nënkuptohet një fajll i jashtëm, i cili përmban stilet që përcaktojnë paraqitjen e

elementeve të ueb faqeve. Ky fajll i jashtëm mund të lidhet me secilin dokument që duam

dhe i njejti , në mënyrë automatike, do të kujdeset për prezantimin e të gjitha faqeve të

lidhura me të, duke i azhurnuar ato drejtpërdrejt.

External Style Sheet mund të shkruhet nga ndonjë editor tekstual dhe të ruhet me

prapashtesën ”.css”. Që një dokument të mund të shfrytëzojë stilet e definuara në fajllin

e stileve të jashtme, duhet të lidhet me të, duke shfrytëzuar instruksionin <link>, i cili

shkruhet në kokën e dokumentit HTML, sipas sintaksës vijuese:

Pra, shfletuesi do të lexojë definimet e stilit në fajllin ‘stili.css’ dhe formaton dokumentin,

duke e zbatuar atë.

Në figurën 1.20, është ilustruar një shembull i përdorimit të External Style Sheets.

<head> <style type=”text/css”> hr {color: red} p {margin-left: 20px} body {background-image: url(“foto/logo.png”)} </style> </head>

<head>

<link rel=”stylesheet” type=”text/css” href=”stili.css” />

</head

33


9.4 Selektorët

Selektorët përdoren për selektimin e elementeve të HTML-së ( apo çfarëdo gjuhe ) të

cilat do të manipulohen me CSS.

Pra për ti identifikuar këto grupime në CSS përdorim selektorë ose ndryshe këta

selektorë ‘i thërrasim’ nga sektori body i html-së në sektorin style nëpërmjet

selektorëve. Disa prej slektorëve që përdoren më shumë do ti sqarojmë në vazhdim.15

15 http://forum.itshqip.com/index.php?forums/html-css-javascript.61/

http://forum.itshqip.com/index.php?forums/html-css-javascript.61/

34


9.5 Selektorët elementarë

Selektori bazë, apo elementar është më i përdoruri në CSS. Përmes tij mund të specifikoni

vetitë e një HTML elementi, duke e paraqitur atë në mënyrë të drejtëpërdrejtë. Selektorët

elementarë definohen për çdo element. Shembulli i mëposhtëm tregon përcaktimin e

ngjyrës së tekstit dhe të prapavijës për të gjitha elementet a në dokument:

9.6 Selektorët klasë

Selektori klasë ( ang.class ) është një emërtim që krijojmë ne për të identifikuar grupime

kudo qofshin në faqe p.sh, <div class=”sidebar”></div> na jep mundësinë të stilojmë me

CSS elemente që përbëjnë sidebari-in e pare, këtu ka rëndësi të madhe që ta “thërrasim”

me të njejtin emërtim kur e përdorim si selektor. Shembulli i dhënë më posht tregon se si

të përdoren selektorët klasë:

9.7 Selektorët ID

Përmes selektorit ID mund t’i definoni vetitë e caktuara për një element unik në HTML.

Selektori ID shënohet me shenjën ‘#’. Shembulli i mëposhtëm do të vendosë stilin për

elementin që e ka identifikuesin me emrin lajmi:

a {

color: white;

background-color: green;

}

.sidebar {

text-align: right;

color: red;

padding: 10px;

}

35


10. Prapavijat në CSS

Ka qenë praktikë që kur përcaktojmë prapavijën ( backgroundin ) e një dokumenti ta

bëjmë atë duke inkorporuar atributin bgcolor në HTML elementin body. Ndërsa me CSS

mundësohet jo vetëm të përcaktojmë prapavijën për tërë dokumentin, por në mënyrë

efikase mundemi të përcaktojmë ngjyra apo prapavija edhe për bllok elemente apo

elemente të vetme. Në tabelën në vazhdim janë përshkruar atributet e mundshme në CSS

si dhe përshkrimi dhe vleraqë mund të marrin ata ( vetitë e elementeve në CSS sipas

standardeve të definuara nga World Wide Web.16

Atributet Përshkrimi Vlera

Background Vendos prapavijën background-color background-image background-repeat background-attachment background-position

background-attachment Përcakton nëse imazhi i prapavijës është i fiksuar ose lëviz deri në fund të faqes.

scroll fixed

background-color Cakton ngjyrën e prapavijës në një element.

color-rgb color-hex color-name transparent

background-image Cakton një imazh si prapavijë.

url (URL) none

background-position Cakton pozitën e një imazhi të prapavijës.

top left; cener; right center left; center; right bottom left; center; right x% y% xpos ypos


#lajmi {

color: green;

size: 12px;

}

36


background-repeat Vendosë nëse/si një imazh si prapavijë do të përsëritet.

repeat repeat-x repeat-y no-repeat

Tabela 6. Atributet për prapavijën në CSS

Shembull:

10.1 Teksti në CSS

Tiparet për tekstin në CSS mundësojnë të kontrollojmë paraqitjen e tekstit. Përmes kësaj

mund të ndryshoni ngjyrën e tekstit, të zmadhoni apo zvogloni hapsirën midis shkronjave

në tekst, të radhitni tekstin, dekoroni etj. Në vazhdim është dhënë tabela për mundësitë

e manipulimit me tekstin në CSS.17


Color Cakton ngjyrën e tekstit. color

Direction Rregullon drejtimin e tekstit. ltr rtl

Line-height Rregullon distanën në mes vijave. normal number length

Letter-spacing Zvogëlon dhe zmadhon hapsirën midis karaktereve.

normal length

Text-align Cakton se nga cila anë do të vendoset teksti i çdo elementi.

left right


body {

background-image: url ( ‘logo.png’ );

background-repeat: no-repeat;

background-attachment: fixed;

}

37


center justify

Text-decoration Shton dekorimin në tekst. none underline overline line- through blink

Text-indent Praqitja e kryerreshtit. Length %

Text-shadow Përcakton hijen. none color length

Text-transform Kontrollon shkronjat në një element. none capitalize uppercase lowercase

White-sapce Vendos hapësirën e bardh brenda një elementi.

normal pre nowrap

Word-spacing Zvoglon dhe zmadhon hapësirën midis fjalëve në tekst.

normal length

Tabela 7. Atributet për formatizimin e tekstit.

Shembull:

h1 {

color: #f77a14;

letter-spacing: -3px;

}

h2 {

color: #dda0dd;

letter-spacing: 0.5cm;

}

p {

color: rgb(247.122.20)

}

38


Shembulli më lart i demostruar në shfletues, figura 1.21.

10.2 Fontet në CSS

Atributet e fonteve në CSS na mundësojnë që të ndryshojmë disa veti të tekstit si: llojin e

fonti, madhësinë e tij, stilin, trashësinë etj. Në tabelën në vijim janë paraqitur atributet

për fontin:18


Font Deklarimi i instruksionit font për të gjitha tiparet.

font-style font-variant font-weight font-size line-height font-family caption icon menu

icon menu caption icon menu message-box small-caption status-bar

font-family Përcakton font family family-name generic-family

font-size Përcakton madhësin e fontit

xx-small z-small

x-large xx-large


39


small medium large

smaller larger length

font-size-adjust Specifikon vlerën e një elementi

none number

font-stretch Ngushton ose zgjeron font family

normal wider narrower ultra-condensed extra-condensed condensed

semi-condensed semi-expanded expanded extra-expanded ultra-expanded

font-style Përcakton stilin e fontit normal italic oblique

font-variant Paraqet tekstin në shkronja të vogla – të mëdha ose normale.

normal small-caps

font-weight Përcakton trashësinë e fontit.

normal bold bolder lighter

100; 200; 300; 400; 500; 600; 700; 800; 900;

Tabela 8. Atriutet për formatizimin të tekstit.

Shembull:

Ky shembull demonstron se si të ndryshoni formatin e tekstit, duke e përdorur External

Style Sheet, shih figurën 1.22.

40


10.3 Kufijtë në CSS ( borders )

Atributet për kufijtë në CSS ju mundësojnë të specifikoni ngjyrën dhe stilin e një kufiri të

elementit. Në HTML janë tabelat që kujdesen për paraqitjen e kufijve përreth tekstit

përderisa në CSS nëpërmjet vetisë për kufijtë mund të vendosen kufij me efekte të

ndryshme, të cilat mund të zbatohen për çdo element. Në vazhdim, janë dhënë të gjitha

mundësitë e CSS kufijve:19

Atributi Përshkrimi Vlera

border Vetia për vendosjen e kufirit. Border-width border-style border-color

19 Learn HTML and CSS with w3schools, faqe 66. 20 Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 237-239.

41


Border-bottom Vetia për vendosjen e kufirit të poshtëm me mundësi të vetisë për shkurtesa.

Border-bottom-width border-style border-color

Border-bottom-color Vendos ngjyrën në kufirin e poshtëm.

Border-color

Border-bottom-style Vendos stilin në kufirin e poshtëm.

Border-style

Border-bottom-width Vendos gjerësinë e kufirit të poshtëm.

Thin medium

thick length

Border-color Vendos ngjyrën për katër kufijtë dhe mund të vendosen katër ngjyra të veçanta.

Color

Border-left Vetia për vendosjen e kufirit të majt me mundësi të vetisë për shkurtesa.

Border-left-width border-style border-color

Border-left-color Vendos ngjyrën për kufirin e majt. Border-color

Border-left-style Vendos stilin për kufirin e majt. Border-style

Border-left-width Vendos gjerësinë e kufirit të majt. Thin medium

thick length

Border-right Vetia për vendosjen e kufirit të djathtë me mundësi të vetisë për shkurtesa.

Border-right-width border-style border-color

Border-right-color Vendos ngjyrën për kufirin e djathtë.

Border-color

Border-right-style Vendos stilin për kufirin e djathtë. Border-style

Border-right-width Vendos gjerësinë e kufirit të djathtë.

Thin medium

thick length

Border-style Vendos stilin për të katër kufijtë me mundësi për përcaktimin e katër vetive të veçanta.

None dotted dashed solid double

Groove ridge inset outset

Border-top Vetia përvendosjen e kufirit të sipërm me mundësi të vetisë për shkurtesa.

Border-top-width border-style border-color

Border-top-color Vendos ngjyrën për kufirin e lartë. Border-color

Border-top-style Vendos stilin për kufirin e lartë. Border-style

42


Border-top-width Vendos gjerësinë e kufirit të lartë. Thin medium

thick length

Border-width Vetia për vendosjen e gjerësisë së kufirit.

Thin medium

thick length

Tabela. 9 Atributet për formatizimin e vijave.

Shembull:

Ky shembull demonstron se si t’i definoni vetitë e kufirit në tekst, duke përdorur ‘External

Style Sheet’.

43


10.4 Margjinat në CSS

Margjinat mund të marrin vlera të caktuara për të definuar sasinë e hapsirës që do të

vendoset në ndonjërën anë të elementit, siç mund të jetë ajo lart, djathtas, posht ose

majtas, apo në katër anët e elementit përnjëherë, duke shfrytëzuar vetinë për shkurtesa.

Margjinat mund të marrin edhe vlera negative, në rastin kur dëshirojmë të mbulojmë

përmbajtjen. Në vazhdim janë dhënë atributet për margjinat:20


margin Deklaron vendosjen e margjinës.

Margin-top margin-right margin-bottom margin-left

Margin-bottom Vendos margjinën e poshtme të elementit

Auto length %

Margin-left Vendos margjinën e majt të një elementi.

Auto length %

Margin-right Vendos margjinën e djatht të një elementi.

Auto length %

Margin-top Vendos margjinën e sipërme të një elementi.

Auto length %

Tabela. 10 Atributet për dizajnimin e margjinave.

Shembull:

Ky shembull demonstron si t’i ndryshoni të gjitha margjinat me një deklarim. Nëse

dëshirojmë të rrethojmë një tekst të caktuar me margjina në të gjitha anët: ajo e sipërmja

10px, e djathta 20px, e poshtmja 10px dhe e majta 20px, atëherë duke shfrytëzuar vetinë

për shkurtesa do të shkruanim:


44


Dhe, si rezultat, për një tekst të ballinë, me stil italic, ku katrori me ngjyrë portokalli tregon

boxin përreth tekstit, në të cilin vendosen margjiant, do të fitonim paraqitjen si në figurën

1.24.

10.5 Listat në CSS

Në kapitullin II u shpjegua rëndësia e HTML elementit për vendosjen e listave, të cilat

gjeneroheshin automatikisht, me qëllim që autori të mundet me lehtësi të ndryshojë

mënyrën e listimit si dhe pamjen e vijave ndarëse në listë ( me vijë, me pika – bullets,

katrorë apo me numra dhe shkronja të ndryshëm ). Kjo, bëhej përmes elementeve ul dhe

ol. Atributet e CSS rregullës për stile të listave janë dhënë në vijim:21

21 Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 244,245.

h1 {

margin: 10px 20px 10px 20px;

}

45



list-style Deklaron vendosjen e listës duke përkrahur edhe vetinë e shkurtesave për të definuar të gjithë vetitë në një deklarim.

list-style-type list-style-position list-style-image

list-style-image Vendos stilin – imazhin none url

list-style-position Tregon vendodhjen e shenjës së listës në listën konkrete.

Inside outside

list-style-type Vendos tipin e shenjës – markuesit në listë.

none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin

upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha

marker-offset auto length

Tabela. 11 Atributet për rregullimin e listave në CSS.

46


Shembull:

Ky shembull, demonstron se si të ndryshoni llojet e listave, duke përdorur CSS atributet

për lista.

47


11. JavaScript

11.1 Hyrje në JavaScript

JavaScript përbën një mjet të rëndësishëm për përdorim ngase mundëson dhënien e

interaktivitetit për HTML ueb faqet. JavaScript është një gjuhë skriptimi, një gjuhë

skriptimi është një gjuhë programimi e leht ( e thjeshtuar ). JavaScript është një gjuhë e

interpretuar ( dmth që skriptat ekzekutohen pa patur nevojë që të komplimohen /

përkthehen paraprakisht ).

Pra është një gjuhë skriptimi më popullore në internet dhe punon në të gjithë shfletuesit

kryesor si: IE ( internet explorer ), Firefox, Chrome, Opera, Safari.

48


11.1 Konceptet bazike të JavaScript

JavaScript paraqitet si një tekst i integruar me HTML që përdoret për të gjeneruar ueb

faqe. Kjo, nënkupton se për ta shkruar JavaScript-in do të jetë i mjaftueshëm edhe një

editor tekstual i thjeshtë. Karakteristikat kryesore të JavaScript janë:22

Skripta mund të përbëhet vetëm nga një sekuencë komandash;

Nuk ka nevojë për paraqitjen statike të variablave, sepse ato mund të

deklarohen kudo në program;

Objektet e paracaktuara në JavaScript

Është kompatibile me të gjitha platformat.

JavaScript mund të vendoset kudo përbrenda instruksioneve <html> në faqe. Në vazhdim,

është dhënë struktura e sintaksës për deklarimin e JavaScrip në faqe:

Instruksioni <script> përdoret për t’i treguar shfletuesit se në vazhdim pason skripta e

kodit, që do të zgjasë deri kur të haset instruksioni i njejtë, por i mbyllur.


<html>

<head>

<title>JavaScript</title>

<script type=”text/javascript”>

Këtu vendoset skripta

</script>

</head>

</html>

49


11.1.1 Sintaksa e JavaScript

Gjatë shkrimit të skripteve, si dhe gjatë përpilimit të programeve në gjuhët tjera,

preferohet përdorimi i komenteve përgjatë kodit. Komentet përbëjnë shënime për

programuesin, ose për ata që do ta lexojnë kodin, me qëllim të shpjegimit të logjikës së

përdorur, krahasuar me gjuhën natyrale. Komentet janë të mirëseardhura sidomos gjatë

procesit të testimit, kur identifikohen gabimet në kod edhe për çdo dyshim preferohet të

vendoset një koment, si shkaktar i mundshëm i gabimit, me mundësi për t’u rikthyer më

vonë. Si edhe në gjuhët tjera komenti shkruhet si në vijim:23

Gjithashtu, mund të shkruhen edhe komente më të gjata, që mund të shtrihen në disa

rreshta. Teksti që ndodhet midis shenjës për komente, në më shumë rreshta, do të

injorohet nga kompjuteri, apo interpretuesi në këtë rast:

11.1.2 Variablat

Variabla përbën një vend në memorien RAM, e cila mund të përdoret për të mbajtur,

ruajtur një vlerë, apo nëse ka nevojë edhe të ndryshohet më vonë nga programi. Kur

deklarohet një variable, kompjuterit i urdhërohet të rezervojë një vend në memorie, ku

do të ruhet lloji i të dhënës dhe vlera e tij.


// Ky është një koment

/* Ky është një koment shumërreshtash

apo një bllok koment */

50


Pra, kur deklarojmë një variable, gjithashtu duhet të identifikojmë edhe emrin e variables.

Në JavaScript deklarimi i variables bëhet nëpërmjet fjalës së rezervuar var. Forma e

përgjithshme e deklarimit është paraqitur në vijim:

Në tabelën e më poshtme janë dhënë disa deklarime të sakta dhe të pasakta të

variablave:

Emërtimi i saktë Emërtimi i pasaktë

emri1 10 emri

cmimi_fix Cmimi.fix

_abc emri#mbiemri

Abc_22 A-23

A23 5

11.1.3 Operatorët

Në JavaScript egzistojnë disa kategori të operatorëve si: aritmetikorë apo matematikorë,

krahasues dhe logjikë.24

Operatorët aritmetikorë përdoren për kryerjen e funksioneve matematikore.

Operatorët më të përdorur janë:

Mbledhja(+)

është një operacion aritmetikor që përdoret për të mbledhur dy

madhësi:

24 Learn JavaScript and Ajax with w3schools, faqe 27.

var emri i variablës

var sum = 2+9;

51


Variablën mund ta paraqesë edhe si vlerë numerike për të kryer operacionin aritmetikor:

Operatori ‘+’ mund të përdoret edhe për të bashkangjitur disa fjalë në një të vetme. E

njejta gjë mund të bëhet edhe për bashkëngjitjen e numrit me fjalën. Të dy rastet janë

paraqitur më poshtë:

Zbritja(-)

përbën një operacion aritmetikor që bënë zbritjen e madhësisë së dytë

nga madhësia e pare:

Shumëzimi(*)

përbën një operacion aritmetikor i cili shumëzon du madhësi:

Pjesëtimi(/)

është një operacion aritmetikor që pjesëton madhësinë e pare me atë të

dytë.

var numri = 6;

var sum = numri +10;

var emri = ‘JavaScript’ + ‘’ + ‘CAC’

// Rezultati do të jetë teksti ‘JavaScript CAC’

var num = 20 + ‘15’ : // Rezultati do të jetë ‘2015’

var zbritja = 5-2;

var prodhimi = 49*12;

52


11.1.4 Strukturat kontrolluese

Strukturat kontrolluese i mundësojnë programit që të kontrollojë rrjedhjen e programit,

duke përcaktuar rendin, ekzekutimin dhe përsëritjen e komandave përbrenda structures

kontrolluese. Ato janë të varura nga shprehjet e quajtura ‘kushte’, të cilat mund të marrin

vlerën e skate ose e pasaktë.

12. Deklarimi i kushtëzuar – if else

Deklarimi if…else i mundëson programit të ekzekutojë shprehjet, në mënyrë, të

kushtëzuar. Përdoret në rastin kur kemi dy zgjedhje të mundshme. Ai provon nëse kushti

është i saktë ( true ) dhe vazhdon me ekzekutimin sipas sintaksës në vijim:25


var numri1 = 45;

var numri2 = 9;

var herësi = numri1 / numri2;

if ( shprehja për kushtin )

{

pjesa e kodit që do të ekzekutohet nëse kushti është i saktë – true

}

else{

pjesa e kodit që do të ekzekutohet nëse kushti është i pasaktë – false

}


 ()</li>

<li><a href="dekanati/index.html">DEKANATI</a></li>

<li ><a href="programet/index.html">PROGRAMET</a></li>

<li><a href="lajme_ngjarje/index.html">LAJME & NGJARJE</a></li>

<li><a href="regjistrimi/index.html">BËHU PJESË E EDUKIMIT</a></li>

<li><a href="studentet/index.html">STUDENTËT</a></li>

<li><a href="galeria/index.html">GALERIA</a></li>

<li><a href="kontakt/index.html">KONTAKT</a></li>

58


.trungu2 {

margin-top: 2px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

width: 100%;

height: 60px;

background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));

border-top: 2px solid #939393;

position: relative;

margin-bottom: -70px; }

ul { margin: 0;

padding: 0; }

ul.menu {

height: 60px;

order-left: 1px solid rgba(0,0,0,0.3);

border-right: 1px solid rgba(255,255,255,0.3);

float:left; }

.trungu-menu ul.menu li {

list-style: none;

float:left;

height: 59px;

text-align: center;

background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(153, 0, 0, 1)), to(rgba(102, 0, 0, 0.86)) );

background: -moz-radial-gradient(center 60px 45deg, circle cover, rgba(153, 0, 0, 1) 0%, rgba(102, 0, 0, 0.86) 100%); }

59


Fig.1.27 Paraqitja e menus

.trungu-menu ul li a {

display: block;

padding: 0 16.9px;

border-left: 1px solid rgba(255,255,255,0.1);

border-right: 1px solid rgba(0,0,0,0.1);

text-align: center;

line-height: 59px;

background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));

background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); }

ul li a:hover {

background: transparent none; }

ul li.active a{

background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(153, 0, 0, 1)), to(rgba(102, 0, 0, 0.86)) );

background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(153, 0, 0, 1) 0%, rgba(102, 0, 0, 0.86)) 100%); }

ul a{

text-decoration:none;

color:#FFF;

font-size:13px; }

60


Në pjesën ballore të ueb faqes kemi rezervuar një pjes për lajmet të cilat do të postohen

në këtë faqe, ( të cilën do ta quajm pjesa e parë e lajmeve ) në këtë pjesë kemi gjithësej

4 lajme ku do të shfaqen, lajmi i fundit do të shfaqet në pjesën e majt dhe ka një

madhësi më të madhe se 3 lajmet tjera, poashtu në pjesën e djatht kemi vendosur 3

butona të cilët pasi të klikojm ndonjërin prej tyre na drejton në lidhjen e caktuar, më

posht kemi paraqitur kodin HTML dhe CSS të cilin e kemi përdorur për këtë pjesë:

<div class="trupi-kryesor">

<div class="lajmi-kryesor">

<div id="foto"> <a link href="lajme_ngjarje/artikujt/1.html"><img src="lajme_ngjarje/images/foto_artikujt/e_vogel/image11.jpg" width="200" height="200" /></a> </div>

<div class="teksti">

<br>

<h3><a link href="lajme_ngjarje/artikujt/1.html">Rektori Gashi bëri inaugurimin e infoterminaleve</h3>

</a>

<p>Në kuadër të projektit “Kompetencat në Universitetin e Prishtinës”, financuar nga Komisioni Evropian përmes programit TEMPUS...</p> </div>

<div class="mesi">

<div class="lajmi-vogel-1"> <a link href="lajme_ngjarje/artikujt/2.html"><img src="lajme_ngjarje/images/foto_artikujt/e_vogel/image-2.jpg" width="70" height="60"></a> </div>

<div class="lajmi-vogel-2"> <a link href="lajme_ngjarje/artikujt/3.html"><img src="lajme_ngjarje/images/foto_artikujt/e_vogel/image-3.jpg" width="70" height="60"></a> </div>

<div class="lajmi-vogel-3"> <a link href="lajme_ngjarje/artikujt/4.html"><img src="lajme_ngjarje/images/foto_artikujt/e_vogel/image-4.jpg" width="70" height="60"></a> </div> </div>

61


<div class="djatht"> <a href="#">

<div class="apliko"></div>

</a> <a href="#">

<div class="fletparaqitja"></div>

</a> <a href="#">

<div class="fletpagesa"></div>

</a> </div>

</div>

62


.trupi-kryesor { width: 959px; height: 600px; margin: auto; border:0px solid; margin-top:80px; } .lajmi-kryesor{ border:0px solid; width:946px; height:250px; margin-left:5px; margin-top:5px; } #foto{ padding-left:10px; padding-top:10px; padding-bottom:10px; border:0px solid; background-color:#e4e5e0; width:550px; height:200px; } .teksti{ border:0px solid; width:345px; height:130px; margin-left:215px; margin-top:-220px; overflow:hidden; } .teksti a{ text-decoration:none; color:#b20303; } .teksti a:hover{ color:#666; }

.lajmi-vogel-1{ border:5px solid #e4e5e0; width:70px; height:60px; margin-left:570px; margin-top:-130px; } .lajmi-vogel-1:hover{ border:5px solid #9f1010; } .lajmi-vogel-2{ border:5px solid #e4e5e0; width:70px; height:60px; margin-left:570px; margin-top:6px; } .lajmi-vogel-2:hover{ border:5px solid #9f1010; } .lajmi-vogel-3{ border:5px solid #e4e5e0; width:70px; height:60px; margin-left:570px; margin-top:6px; } .lajmi-vogel-3:hover{ border:5px solid #9f1010; }

63


.djatht{ margin-left:665px; margin-top:-222px; border:0px solid; width:280px; height:220px; } .apliko{ width:280px; height:70px; margin-bottom:5px; background-image:url(../images/butonat/buton%203/11.png); } .apliko:hover{ background-image:url(../images/butonat/buton%203/11-.png); } .fletparaqitja{ width:280px; height:70px; margin-bottom:5px; background-image:url(../images/butonat/buton%203/22-.png); } .fletparaqitja:hover{ background-image:url(../images/butonat/buton%203/22.png); } .fletpagesa{ width:280px; height:70px; background-image:url(../images/butonat/buton%203/33-.png); } .fletpagesa:hover{ background-image:url(../images/butonat/buton%203/33.png); }

64


Fig.1.28 Pamja e lajmeve dhe butonave në shfletues

Po ashtu në pjesën ballore të kësaj ueb faqe-je kemi rezervu edhe një pjesë tjetër për

lajme, të cilat lajme do të kalojn nga pjesa e parë e lajmeve në këtë pjes.

Fig.1.29. Pamja e lajmeve në shfletues.

65


Në këtë pjes lajmi do të ketë një fotografi me dimensione me të mëdha ( 300x176px ),

një titull dhe një pjes të përmbajtjes së lajmit. Pamja e kësaj pjese do të duket si në

figurën 1.29. Kodin HTML dhe CSS të kësaj pjese do ta shihni në vazhdim.

<div class="lajmi1">

<a link href="#"><img src="images/st.jpg" width="300" height="176"> <p id="titulli"><b>Titulli i lajmit</b></a>

<p class="permbajtja">Permbajtja e lajmit permbajtja e lajmit permabjtja e lajmit</p>

</div>




</div>

<div class="meshum"> <a href="lajme_ngjarje/index.html">

<div class="meshum"></div> </a> </div> </div>

<div class="lajmet"> <img src="images/butonat/40.png" width="630" height="40" />




</div>



<p class="permbajtja">Permbajtja e lajmit permbajtja e lajmit permabjtja e lajmit</p> </div>

66


.lajmet{ border-radius:10px; border:1px solid #e4e5e0; width:640px; height:auto; padding:5px; margin-top:0px; margin-left:5px; } p#titulli{ width: 300px; margin: 5px 0px; } p#titulli a{ text-decoration: none; color: black; } p#titulli :hover{ text-decoration: underline; } .lajmi1{ margin-left: 2px; margin-top: 5px; } .lajmi2{ margin-left: 327px; margin-top: -248px; margin-bottom: 20px; } p.permbajtja{ width: 300px; margin: 5px 0px; }

67


Rezultatet të cilat do të publikohen në këtë ueb faqe gjithashtu do të ketë edhe një pjes

në kryefaqe, në këtë pjes do të shfaqen 5 rezultatet e fundit të cilat do të postohen, se si

duket kjo pjesë në shfletues, do ta shihni në figurën 1.30.

Fig.1.30. Pamja e lajmeve në shfletues.

68


Për pjesën e rezultateve kodi HTML dhe CSS është si vijon:

<div class="rezultatet">

<div class="rezultatet-logo">

<img src="images/butonat/Rezultate.png" /> </div>

<a href="rezultatet/rezultatet.pdf">

<h3><img src="images/PDF_logo.png" width="40" height="40" />Rezultatet e provimit master</h3>

</a> <a href="rezultatet/rezultatet.pdf">

<h3><img src="images/PDF_logo.png" width="40" height="40" />Rezultatet : Programim në rrjeta dhe www</h3>


<h3><img src="images/PDF_logo.png" width="40" height="40" />Rezultatet : Burimet e ripertritshme te energjis</h3>


<h3><img src="images/PDF_logo.png" width="40" height="40" />Rezultatet : Algoritme dhe programim</h3>


<h3><img src="images/PDF_logo.png" width="40" height="40" />Rezultatet : Konstruksion dhe dizajn</h3> </a>

<a href="rezultatet/me_shum_rezultate/rezultatet.html"><div class="meshum_rez">

</div></a>

</div>

69


.rezultatet-logo{

padding:5px;

}

.rezultatet{

border:1px solid #e4e5e0;

border-radius:10px;

width:650px;

height:auto;

margin-left:5px;

margin-top:20px;

}

.rezultatet h3{

padding-left:10px;

padding-bottom:10px;

border:px solid;

border-radius:0 0 10px 10px;

width:610px;

height:35px;

margin-left:10px;

background-color:#;

border-bottom:dotted #666;

}

.rezultatet h3:hover{

background-color:#CCC;

}

.rezultatet a{

text-decoration:none;

color:#000;

font-size:12px;

}

Pamja e tërë ballinës në shfletues duket si në figurën 1.31. të cilin ueb mund ta shikoni

edhe në lidhjen http://teknologji-informatik.tk/

http://teknologji-informatik.tk/

70


71


Konkluzione

Në këtë punim jemi përpjekur të interpretojm me shembuj të ndryshëm kodet e

Gjuhëve programuese si HTML, CSS dhe JavaScript. Të gjithë shembujt jemi munduar ti

sqarojm si është më së miri, po ashtu shembujt i kemi ilustruar edhe me fotografi në

mënyrë që të jenë më të kuptueshëm për lexuesit.

Tani nga ky punim ne kemi njohuri të mjaftueshme për dizajnimin e ueb faqeve në

HTML, CSS dhe JavaScript. Këtë punim ne e kemi punuar në 5 kapituj gjithësej, ku në

kapitullin e parë kemi folur për Bazat e ueb dizajnit, pra lexuesit qysh në fillim duhet të

dijnë për këtë se cilët janë aplikacionet që përdoren për dizajnimin e ueb faqeve, pastaj

kemi vazhduar me kapitullin e dytë ku kemi shtjelluar Gjuhën Programuese HTML si

hyrje më pastaj kemi vazhduar me shembuj të ndryshëm sqarimin e kodeve, kurse në

kapitullin e tretë kemi ilustruar shembuj të ndryshëm me kodet e CSS, kemi sqaruar se si

bëhet ndërhyrja në kodet html nga css etj, duke vazhduar me kapitullin e katër të cilin e

kemi rezervuar për JavaScript, në këtë kapitull së pari kemi folur për konceptet bazike të

JavaScript, Variablat, Operatorët e duke përfunduar këtë kapitull me disa shembuj të

ndryshëm në kodet e JavaScript.

Ndërsa kapitullin i pestë dhe të fundit e kemi rezervuar për sqarimin e kodeve të cilat i

kemi përdorur në dizajnimin e një ueb faqe-je në kuadër të këtij punimi.

72


Literatura

1. Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007.

2. Jon Ducket, HTML & CSS Design and Build Websites.

3. Learn HTML and CSS with w3schools.

4. Learn JavaScript and Ajax with w3schools.

5. Ramë Likaj, Dizajnimi i UEB faqeve Dreamveawer CS3.

6. http://forum.itshqip.com/index.php?forums/html-css-javascript.61/

7. Craig Grannell, CSS and HTML Web Design.

http://forum.itshqip.com/index.php?forums/html-css-javascript.61/

Documents

Punim Diplome Bachelor - Dizajnimi i Ueb Faqeve HTML CSS JavaScript