Në këtë punim do të përpiqemi t’ju njoftojmë me procesin se si krijohet një faqe interneti (Ang. Web Page) nga zerro deri në krijimin e produktit final.

2. Ylber Veliu
Si ta krijojmë një faqe interneti
nga 0 (zerro) deri në produkt final
Kumanovë, 2014

3. Përmbajtja
Hyrje ..... 3
Çka synojmë ..... 3
Çka përfshihet ..... 4
Definimi i natyrës së faqes ..... 4
Grumbullimi i materialit ..... 5
a. Teksti ..... 5
b. Multimedia (Foto, Video) ..... 5
Skicimi i faqeve ..... 6
Çka kemi përdorur ..... 11
Finalizimi i projektit ..... 12
Çka ka në CD ..... 35
Rreth autorit ..... 36
Referencat ..... 37

4. 1. Hyrje
Të nderuar lexues jemi dëshmitarë se po jetojme kohën në të cilën teknologjia po zhvillohet
vrullshëm, deshtëm apo nuk deshtëm duhet ta pranojmë faktin që teknologjia ka hyrë në jetën
e secilit prej nesh, një numër i madh njerëzish janë bërë edhe të nvarur prej saj.
Interneti i dha shpirtë teknologjisë, rrjetet sociale, portalet, bixhozi online dhe shumë të tjera
janë pjellë e “dashurisë” njeri-kompjuter(Internet).
Web-i (Servuesi) i ofron të gjitha shërbimet klientëve anekënd botës!
Është koha që edhe ne shqiptarët të bëhemi pjesë e botës virtuale.
Në këtë punim do të përpiqemi t’ju njoftojmë me procesin se si krijohet një faqe interneti (Ang.
Web Page) nga zerro deri në krijimin e produktit final.
2. Çka synojmë
Librat për dizajnimin e faqeve të internetit janë shumë vëllimore, e rëndojnë dhe i marrin kohën
studentëve!
Andaj ne synojmë që përmes këtij punimi ti ofrojmë studentëve efektin e njejtë por për kohë
më të shkurtër.
Do të krijojmë një ueb faqe statike dhe të thjeshtë me qëllim që materiali të jetë i kapshëm
edhe për fillestarët. Synimi jonë është që të kuptohet koncepti bazë, hulumtimi dhe
eksperimentimi me përmbajtje komplekse është një punë e thjeshtë pasi ti keni kuptuar
konceptet bazë.

5. 3. Çka përfshihet
Do të krijojmë një faqe interneti që do të përbëhet prej 5 faqeve, në të do të përfshihen të
gjitha komponentat e web-it siç janë: tipografia, linqet, listat, tabelat, multimedia, format, etj.
4. Definimi i natyrës së faqes
Do të krijojmë një faqe interneti që ofron shitje e librave online.
Faqet:
 Ballina
 Librat
 Galeria
 Rreth nesh
 Kontakti
Për krijimin e faqes na është e nevojshme të kemi njohuri në:
HTML
CSS
Photoshop (Për editimin e fotografive)
Javascript/jQuery.

6. 5. Grumbullimi i materialit
Teksti
Tekstin e faqes do ta gjeni në dokumentin teksti_i_faqes.pdf
Multimedia (Foto, Video)
Foto-t i gjeni në dosjen: foto/
Video-t i gjeni në dosjen: video/

7. 6. Skicimi i faqeve
Skica për faqen: Ballina

8. Skica për faqen: Librat

9. Skica për faqen: Galeria

10. Skica për faqen: Rreth nesh

11. Skica për faqen: Kontakti

12. 7. Çka kemi përdorur
Për realizimin e këtij proekti kemi përdorur:
a. Sublime Text 3 – Si hapsirë punuese
b. Can I Use – Ueb faqe e cila jep informata mbi kompatibilitetin e elementeve të HTML-it
dhe vetive të CSS-it me shfletuesit (Ang. Browsers)
c. Chrome Developer Tools – mjet i integruar në shfletuas për inspektim të elementeve dhe
verifikim të skriptave (tregon për gabimet që kemi bërë ne Javascript).

13. 8. Finalizimi i projektit
Pasi ti kemi krijuar dosjet dhe skedarët si në figurën e më poshtme vazhdojmë me kodimin e
faqes.
Kodi do të jetë i organizuar sipas kësaj rënditje: Elementet në HTML, stilizimi në CSS dhe
Javascript (nëse kemi ngjarje (Ang. Events) në forma apo elemente tjera të faqes).
Struktura e dosjeve/skedarëve të projektit.

14. Kod i përbashkët për të gjitha faqet
Pejesa e sipërme (ku është logo dhe një thënje) dhe menyja.
Pjesa e sipërme dhe menyja – HTML kodi.
Stilizimi në CSS për pjesën e sipërme, header.
CSS kodi për pjesën e sipërme.

15. Stilizimi në CSS për menynë, menu.
CSS kodi për menynë.

16. Kodi i përbashkët për të gjitha faqet është gjithashtu edhe HTML kodi për pjesën e poshtme –
footer.
HTML kodi për pjesën e poshtme – footer
Stilizimi i pjesës së poshtme – footer
Pjesa e parë

17. Pjesa e dytë

18. Pjesa e tretë
Stilizimi i pjesës së poshtme – footer.

19. Stilzimi i përbashkët gjithashtu është edhe për trupin e faqes (dmth body tagun), div elementi
me klasën wrapper dhe grumbullimi i elementeve: h1-h6, ul tagjeve si në vijim:
Stilizimet e përbashkëta.

20. Kodi për faqen – “Ballina”
Tek ballina përpos elementeve të përbashkëta (header, menu dhe footer) kemi edhe elementet
që definojnë pjesën ku tregohet teksti që i dëshiron vizituesve mirëseardhje dhe u tregon për
çka është faqja, gjithashtu edhe pjesa ku tregohen librat e fundit, si në vijim.
Pjesa ku i dëshirohet vizitorëve mirëseardhje:
HTML kodi i pjesës ku i dëshirohet mirëseardhje vizitorëve.
Kodi për stilizimin e kësaj pjese duket si në vijim:
Stilizimi në CSS.

21. Pjesa ku shfaqen librat e rinj:
HTML kodi i pjesës ku shfaqen librat e rinj.

22. Pjesa e parë:

23. Pjesa dytë:
CSS stilizimi i pjeses ku shfaqen librat e rinj.

24. Pasi ta kemi shkruar kodin e mësipërm (për faqen Ballina) do të fitojmë pamjen si në foton e
mëposhtme:

25. Kodi për faqen – “Librat”
Kodi për faqen librat është i njejt sikurse kodi tek librat më të rinj:
HTML kodi për krijimin pamjes së librave.
Gjithashtu edhe kodi për stilizimin është i njejtë me atë të librave të rinj.
Nuk do ta përsërisim.

26. Pasi ta kemi shkruar kodin e mësipërm (për faqen Librat) do të fitojmë pamjen si në foton e
mëposhtme:

27. Kodi për faqen – “Galeria”
Në krijim e kësaj faqe nuk kemi pasur synim të dizajnojmë një galeri të thjeshtë (po deshët ta
krijoni ndiqni hapat e mësipërm, si e krijuam kodin për librat e rinj) po qëllimi ynë ka qenë që
t’ju njoftojmë me meta tagjet, këtu kemi përdorur meta tagun i cili shërben për redirect në faqe
tjetër pas disa sekondave, si në vijim.
Si funksionon meta tagu për redirect:
Në atributin http-equiv kemi specifikuar se çka dëshirojmë të bëjmë, në rastin tonë dëshirojmë
ta bëjmë faqen refresh.
Në atributin content kemi specifikuar pas sa sekondave ku dëshirojmë (në cilën adresë) të na
dërgojë kur të ndodhë freskimi i faqes (dmth refresh).
Kuptimi i meta tagut:
Pas 10 sekondave freskoje faqen dhe dërgona në adresën
www.facebook.com/zlberveliji/photos

28. Pasi ta kemi shkruar kodin e mësipërm (për faqen Galeria) do të fitojmë pamjen si në foton e
mëposhtme:

29. Kodi për faqen – “Rreth nesh”
HTML kodi për krijimin e përmbajtjes rreth nesh është si në vijim:
HTML kodi – për div tagun me klasën content, faqja Rreth nesh.
Nga HTML kodi i mësipërm është e udhës që tju japim një hyrje në temën multimedia në web.
Do ta sqarojmë video tagun i cili shërben për vendosjen e videos në web.
HTML kodi për vendosjen e videove në web.

30. Për çka shërben secili prej tagjeve dhe atributeve:
a. Tagu <video> - shërben për krijimin e video elementit
a. Atributi width – i cakton madhësinë video elementit
b. Atributi controls – ti shfaq apo jo kotrolat (play, stop dhe rregullimi i zërit)
c. Atributi poster – shërben për vendosjen e një fotoje si prapaskenë e videos
b. Tagu <source> - burim, nga vjen video
a. Atributi src – ku saktësishtë gjindet video
b. Atributi type – e çfar formati është video

31. Pasi ta kemi shkruar kodin e mësipërm (për faqen Rreth nesh) do të fitojmë pamjen si në foton
e mëposhtme:

32. Kodi për faqen – “Kontakti”
HTML kodi për krijimin e faqes Kontakti është si në vijim:
HTML kodi për krijimin e faqes Kontakt.

33. Stilizimi i kodit të mësipërm është si në vijim:
CSS kodi i faqes Kontakti.

34. Pasi ta kemi shkruar kodin e mësipërm (për faqen Kontakti) do të fitojmë pamjen si në foton e
mëposhtme:

35. Ky ishte kodi i faqes, për çdo paqartësi na kontaktoni.
Ne e pamë të udhës që këtu ta japim edhe hartën e faqes (shpresojmë ti shërben ndokujtë që
është fillestarë në navigimin e skedarëve dhe dosjeve).
Harta e faqes:
Ballina: projekti_final/ballina.html
Librat: projekti_final/librat.html
Galeria: projekti_final/galeria.html
Rreth nesh: projekti_final/reth_nesh.html
Kontakti: projekti_final/kontakti.html
Ju sugjerojmë që mos ta kopjoni kodit po ta shkruani në menyrë që të fitoni shprehi pune.
Suksese.

36. Çka ka në CD
Në CD janë të përfshira: projekti final, libri dhe skicat.
Nëse ndonjëra nga këto mungon në përmbajtjen e CD-së tuaj na kontaktoni.

37. 9. Rreth autorit
Ylber Veliu
I lindur me 30 Prill 1990 në Kumanovë. Shkollimin fillorë
dhe të mesëm e kreu në Kumanovë ndërsa studimet
univerzitare në Univerzitetin “Shën Qirili dhe Metodi” –
Shkup, Fakulteti për elektroteknikë dhe teknologji të
informimit.
Nga viti 2009 e këtej punon si programer i pavarur dhe
është krijues i dhjetra aplikacioneve (desktop dhe të
bazuara në web) dhe web faqeve.
Autorë i librit elektronik “Bootstrap - Hyrje në dizajnin e
adaptueshëm”.
Pasion ka laximin, fotografinë dhe basketbollin.
Si mund të na kontaktoni:
E-Mail: ylber.veliu@yahoo.com
Mob. Tel. +389 72 749 855

38. 10. Referencat
Libra:
Dizajnimi dhe zhvillimi i web-it (Konceptet bazë) – Zamir Dika & Artan Luma
HTML, XHTML, CSS and Javascript – Jon Duckett
HTML5 Digital Classroom – Jeremy Osborn
HTML Application development fundamentals – Microsft
Burime nga Interneti:
http://www.w3schools.com/
http://css-tricks.com/
http://caniuse.com/
http://stackoverflow.com/