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

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

ii

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.

iii

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.

iv

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 v

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

vi

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

vii

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 “TeknologjiInformatikë”.

1


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.

2


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 50100, 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.

3


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.

4


Por, është fakt se sot Ju mund të krijoni ueb-sajte edhe pa pasur fare njohuri nga HTMLja, edhe atë përmes përdorimit të veglave për solucione vizuele dhe krijimit të uebfaqeve, 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.

5


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ë

3


4

Ismail Kuksi, Programimi në HTML, Prizeren, 2012, faqe 3.

lidhje

në

Internet.

4

6


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.

7


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 brenda shkruhen të gjitha kodet tjera në html dhe mbyllet me elementin përkatës mbyllës , 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 Faqja ime e pare
Welcome

6

Jon Ducket, HTML & CSS Design and Build Websites.

8


Këtu kemi skeleton e një html dokumenti dhe siq treguam më lartë se gjdo gjë në html shkruhet brenda 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 përcaktojm kokën e dokumentit. Fillimisht në elementin kemi një element 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<br /> <br /> 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.<br /> <br /> 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ë: <html> dhe </html> <head> dhe </head> <title> dhe dhe

Etiketa e HTML-së tregon browserit tuaj se faqja është një dokument HTML. Etiketa duhet të jetë patjetër etiketa e pare në dokumentin tuaj HTML, kurse etiketa është etiketa e fundit në dokumentin HTML.7

7

Learn HTML and CSS with w3schools.

9


Etiketat 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 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.<br /> <br /> <html> <head> <title>Titulli i faqes suaj këtu E gjithë përmbajtja e faqes suaj shkruhet këtu..!

10


4. Teksti në HTML 4.1 Fonti Për të specifikuar fontin e përgjithshëm për faqen tuaj, shkruani instruksionin në fillim të pjesës . 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.

11


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.

12


4.3 Paragrafët Elementi për paraqitjen e paragrafëve është
. 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.

13


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: Teksti ketu

E paraqet tekstin si bold.

Teksti ketu

E paraqet tekstin si Italic.

Teksti ketu

E paraqet tekstin si të nënvizuar.

_{Teksti ketu}

E ‘ul’ dhe ‘e zvogëlon’ tekstin.

^{Teksti ketu}

E ‘ngrit’ dhe ‘e zvogëlon’ tekstin.

~~Teksti ketu~~

Paraqet një vijë përmes tekstit.

Teksti ketu

E paraqet tekstin si me makinë shtypi.

Teksti ketu

E paraqet tekstin ashtu siç është, duke përfshirë vendet e zbrazëta.

Teksti ketu

Zakonisht e bënë tekstin italic.

Teksti ketu

Zakonisht e bënë tekstin bold.

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

14


Në figurën 1.6 kemi disa shembuj të përdorimit të këtyre elementeve dhe rezultati që shfaqin në shfletues. Shënim: elementi
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: Teksti ketu

E rrit madhësinë e tekstit për një njësi.

Teksti ketu

E zvogëlon madhësinë për një njësi.

Teksti ketu

E paraqet tekstin si titull të madh.

Teksti ketu

E paraqet tekstin si titull të vogël.

Tekst

E paraqet tekstin me madhësinë më të vogël (8 pt).

Tekst

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 )

15


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
dhe
. Ndarjet në lista bëhet me etiketën
e cila nuk ka nevojë

për

etiketë

fundore

.

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.

16


5.2 Lista të numëruara Këto lista me tekste mund të vendosen me etiketën

. Ndarjet në lista bëhet me etiketën
e cila nuk ka nevojë për etiketën fundore
. 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: 

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



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



( 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
dhe
është i gjatë, ai mund të ndahet në paragrafë të markuar
.

17


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.

18


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.

19


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.

20


align valign

Përcakton drejtimin horizontal të imazhit dhe merr vlerë majtas, djathtas apo në qendër. 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 Webit. Pikërisht, linqet janë ato që I bëjnë të gjitha lidhjet në web. Link-u

ose

paraqet

një

Hyperlink-u lidhje

që

mundëson leximin e një teksti ( dokumenti ) nga një pike ku është emri i link-ut te një pikë tjetër

12

të

dokumentit.

12


21


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 si një link vendoseni tagun brenda një tagu si në figurën 1.15.

22


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:

23


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ë
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.

24




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 dhe ( ang.table row ). Edhe etiketa 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 . Etiketa
dhe 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 i ka vetitë e njejta si etiketa 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.

25


Rezultati në shfletues, pas ekzekutimit të kodimit.

26


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 . Vetia align= left, center, right

Përshkrimi

background=emri i fajllit

Pozicionim majtas i tabelës. Qendërzim i tabelës. Pozicionim djathtas i tabelës. 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 cellspacing=n nowrap

Distanca ndërmjet celulës dhe përmbajtjes. Hapsira ndërmjet celulave të tabelës. 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 valign= top bottom width= n, n n, n%

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. Pozicionon përmbajtjen në pjesën e epërme të celulave. Pozicionon përmbajtjen në pjesën e poshtme të celulave. 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.

27


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 dhe

. Vetia

Përshkrimi

align= left right center background=emri i fajllit.

Pozicionim i përmbajtjes, majtas celulës. Qendërzim i përmbajtjes. Pozicionim i përmbajtjes djathtas celulës. 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 Valign= top middle bottom width= n

Vendos ngjyrë për hijen e kufirit të celulave.

n% height= n n%

Pozicionon lartë celulës. Pozicionon në mes celulës. Pozicionon poshtë celulës. Specifikon gjerësinë minimale të celulave, në pikselë. Specifikon gjerësinë minimale të celulave, në përqindje të gjerësisë së tabelës. 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.

28


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

29


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.

30


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:

Ndryshimi i margjines se majt

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

Shfletuesi tani do ta lexoj stilin dhe do ta implementojë atë sa here që do të hasë në HTML instruksionet ,
apo
.

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 , 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.

32


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/

33


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: a { color: white; background-color: green; }

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,
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ë: .sidebar { text-align: right; color: red; padding: 10px; }

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:

34


#lajmi { color: green; size: 12px; }

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

Background

Vendos prapavijën

background-attachment

Përcakton nëse imazhi i prapavijës është i fiksuar ose lëviz deri në fund të faqes. Cakton ngjyrën e prapavijës në një element.

background-color

background-image background-position

16

Cakton një imazh si prapavijë. Cakton pozitën e një imazhi të prapavijës.

Vlera background-color background-image background-repeat background-attachment background-position scroll fixed

color-rgb color-hex color-name transparent url (URL) none top left; cener; right center left; center; right bottom left; center; right x% y% xpos ypos


35


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: body { background-image: url ( ‘logo.png’ ); background-repeat: no-repeat; background-attachment: fixed; }

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 Atributet Color Direction

Përshkrimi Cakton ngjyrën e tekstit. Rregullon drejtimin e tekstit.

Line-height

Rregullon distanën në mes vijave.

Letter-spacing

Zvogëlon dhe zmadhon hapsirën midis karaktereve. Cakton se nga cila anë do të vendoset teksti i çdo elementi.

Text-align

17

Vlera color ltr rtl normal number length normal length left right


36


Text-decoration

Shton dekorimin në tekst.

Text-indent

Praqitja e kryerreshtit.

Text-shadow

Përcakton hijen.

Text-transform

Kontrollon shkronjat në një element.

White-sapce

Vendos hapësirën e bardh brenda një elementi.

Word-spacing

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

center justify none underline overline linethrough blink Length % none color length none capitalize uppercase lowercase normal pre nowrap 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) }

37


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 Atributet

Përshkrimi

Font

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

font-family

Përcakton font family

font-size

Përcakton madhësin e fontit

18

Vlera font-style font-variant font-weight font-size line-height font-family caption icon menu family-name generic-family xx-small z-small

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

x-large xx-large


38


font-size-adjust font-stretch

Specifikon vlerën e një elementi Ngushton ose zgjeron font family

font-style

Përcakton stilin e fontit

font-variant

Paraqet tekstin në shkronja të vogla – të mëdha ose normale. Përcakton trashësinë e fontit.

font-weight

small medium large none number normal wider narrower ultra-condensed extra-condensed condensed normal italic oblique normal small-caps

smaller larger length

normal bold bolder lighter

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

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

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.

39


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 border

19 20

Përshkrimi Vetia për vendosjen e kufirit.

Vlera Border-width border-style border-color

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

40


Border-bottom

Vetia për vendosjen e kufirit të poshtëm me mundësi të vetisë për shkurtesa. Vendos ngjyrën në kufirin e poshtëm. Vendos stilin në kufirin e poshtëm. Vendos gjerësinë e kufirit të poshtëm.

Border-bottom-width border-style border-color Border-color

Vendos ngjyrën për katër kufijtë dhe mund të vendosen katër ngjyra të veçanta. Vetia për vendosjen e kufirit të majt me mundësi të vetisë për shkurtesa. Vendos ngjyrën për kufirin e majt. Vendos stilin për kufirin e majt. Vendos gjerësinë e kufirit të majt.

Color

Vetia për vendosjen e kufirit të djathtë me mundësi të vetisë për shkurtesa. Vendos ngjyrën për kufirin e djathtë. Vendos stilin për kufirin e djathtë. Vendos gjerësinë e kufirit të djathtë.

Border-right-width border-style border-color Border-color

Border-style

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

Border-top

Vetia përvendosjen e kufirit të sipërm me mundësi të vetisë për shkurtesa. Vendos ngjyrën për kufirin e lartë. Vendos stilin për kufirin e lartë.

None Groove dotted ridge dashed inset solid outset double Border-top-width border-style border-color Border-color Border-style

Border-bottom-color Border-bottom-style Border-bottom-width

Border-color

Border-left

Border-left-color Border-left-style Border-left-width

Border-right

Border-right-color Border-right-style Border-right-width

Border-top-color Border-top-style

Border-style Thin medium

thick length

Border-left-width border-style border-color Border-color Border-style Thin thick medium length

Border-style Thin thick medium length

41


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’.

42


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

Atributi margin

Përshkrimi Deklaron vendosjen e margjinës.

Margin-bottom

Vendos margjinën e poshtme të elementit

Margin-left

Vendos margjinën e majt të një elementi.

Margin-right

Vendos margjinën e djatht të një elementi.

Margin-top

Vendos margjinën e sipërme të një elementi.

Vlera Margin-top margin-right margin-bottom margin-left Auto length % Auto length % Auto length % 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:

20


43


h1 { margin: 10px 20px 10px 20px; }

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.

44


Atributi list-style

Përshkrimi Deklaron vendosjen e listës duke përkrahur edhe vetinë e shkurtesave për të definuar të gjithë vetitë në një deklarim. Vendos stilin – imazhin

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

marker-offset

Tregon vendodhjen e shenjës së listës në listën konkrete. Vendos tipin e shenjës – markuesit në listë.

Vlera list-style-type list-style-position list-style-image none url Inside outside none disc circle square decimal decimalleading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin auto length

upper-latin hebrew armenian georgian cjkideographic hiragana katakana hiraganairoha katakanairoha

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

45


Shembull: Ky shembull, demonstron se si të ndryshoni llojet e listave, duke përdorur CSS atributet për lista.

46


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.

47


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 në faqe. Në vazhdim, është dhënë struktura e sintaksës për deklarimin e JavaScrip në faqe:

JavaScript <script type=”text/javascript”> Këtu vendoset skripta

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.

22


48


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

// Ky është një koment

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:

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

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.

23


49


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:

var emri i variablës

Në tabelën e më poshtme janë dhënë disa deklarime të sakta dhe të pasakta të variablave: Emërtimi i saktë emri1 cmimi_fix _abc Abc_22 A23

Emërtimi i pasaktë 10 emri Cmimi.fix emri#mbiemri A-23 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: var sum = 2+9;

24

Learn JavaScript and Ajax with w3schools, faqe 27.

50


Variablën mund ta paraqesë edhe si vlerë numerike për të kryer operacionin aritmetikor: var numri = 6; var sum = numri +10;

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ë:

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

Zbritja(-) përbën një operacion aritmetikor që bënë zbritjen e madhësisë së dytë nga madhësia e pare: var zbritja = 5-2;

Shumëzimi(*) përbën një operacion aritmetikor i cili shumëzon du madhësi: var prodhimi = 49*12;

Pjesëtimi(/) është një operacion aritmetikor që pjesëton madhësinë e pare me atë të dytë.

51


var numri1 = 45; var numri2 = 9; var herësi = numri1 / numri2;

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 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 } <script type=”text/javascript”> = 60 ) { document.write ( “Urime, ke marrë notën kaluese.” ) ; } else { document.write ( “Më vjen keq, nuk ke kaluar.” ) ; } // -- > 25


52


13. Kontrolli me ciklet përsëritëse – loops Ciklet, apo loops, tregojnë se një pjesë e komandave të programit do të përsëriten një apo më shumë here, derisa të jetë i vlefshëm kushti i caktuar. Cikli ‘for’ ( for loop ) Ciklet for përdoren atëherë kur saktë e dime sa here do të përsëritet një komandë. Sintaksa e përgjithshme është:

for ( vlera fillestare; kushti logjik që testohet; shtuesi i vlerës ) { /* komandat apo deklarimi që do të përsëritet deri atëherë kur kushti do të bëhet jo i saktë */ }

13.1 Funksionet Në JavaScript hasen dy lloje të funksioneve. Funksionet e paracaktuara në JavaScript dhe ata të cilët përcaktohen drejtpërdrejt nga përdoruesit. Nga funksionet e paracaktuara në JavaScript do të përmendim ato të cilat përdorin dritaret e dialogut ( ang.dialog boxes ). Janë tre të tilla dhe atë:26 Dritarja alarmuese ( Alert Box ) – window.alert() Dritarja alarmuese, apo ajo e vigjilencës, që njihet me emrin alert box, në të shumtën e rasteve përdoret për t’u siguruar nëse informata ka kaluar nga ana e përdoruesit të faqes. Në vazhdim, do të jepet shembulli kur dritarja do të hapet menjëherë pasi të fillojë shfaqja e faqes: <script type=”text/javascript”> window.alert (“Mirë se erdhe në JavaScript”);

26

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

53


Dritarja konfirmuese ( Confirm Box ) – window.confirm() Dritarja për konfirmim, zakonisht përdoret kur dëshirohet të verifikohet, apo pranohet ndonjë informatë, apo e dhënë, nga ana e përdoruesit të faqes. Në vazhdim, është dhënë skripta, e cila duke përdorur dritaren konfirmuese do të përcaktojë ‘disponimin’ e përdoruesit, në varësi të përgjigjes që do të jape:

<script type=”text/javascript”> var përgjigje; përgjigje=window.confirm(“A është çdo gjë në rregull?”); if ( përgjigje ); { window.alert(“Shumë mirë”); } else { window.alert(“Hmm… Jo mirë”); }

Dritarja nxitëse ( Prompt Box ) – window.prompt() Dritarja nxitëse, zakonisht përdoret kur kërkohet nga përdoruesi të vendosë një vlerë parase të hyjë në faqe. Në vazhdim, do të japim skriptën për përdorimin e dritares nxitëse kur prej përdoruesit do të kërkojmë të shkruaj emrin e tij dhe pastaj do ta shfaqim atë me një dritare tjetër:

<script type=”text/javascript”> var y=window.prompt (“Ju lutemi shkruani emrin tuaj”); alert (y);

54


14. Zhvillimi i Ueb-it Ne kapituj 2,3 dhe 4 kemi sqaruar gjerat elementare per ndertimin e nje ueb faqe, po ashtu i kemi ilustruar me shembuj te ndryshem. Ne kuader te ketij punim ne kemi dizajnuar nje ueb faqe te cilen do e sqarojm me posht kodin te cilin kemi perdorur per funksione te ndryshme. E para që duhet bërë tek dizajnimi i një ueb faqeje është përcaktimi i dimensioneve të trupit të ueb faqes, prapavijes si dhe fontit që do ta përdorim në të. Për përcakimin e këtyre gjërave kemi shfrytëzuar kodin të cilin do ta paraqesim në vazhdim:

Shqip | English

55


body { background-color: #CCC; margin: 0; padding: 2; background-image:url (../images/1.jpg); background-repeat: repeat-x; line-height: 1.4; font-family: Verdana, Geneva, sans-serif; font-size: 14px; } .trungu {/* Korniza e faqes*/ width: 960px; background-color: #FFF; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; height:2425px; border:1px solid; } .search { margin-left: 742px; margin-top: -26px;} .gjuhet{ margin-left: 850px;} .gjuhet a{ text-decoration: none;} .gjuhet :hover{ color: red; }

56


Fig.1.26 Praqitja e header-it në shfletues.

Menu-n e kemi ndarë në 8 kategori: Ballina, Dekanati, Programet, Lajme & ngjarje, Bëhu pjesë e edukimit, Studentët, Galeria dhe Kontakt. Kodin HTML të cilin e kemi përdorur tek pjesa e menu-s mund të shihni në vijim:

BALLINA

DEKANATI

PROGRAMET

LAJME & NGJARJE

BËHU PJESË E EDUKIMIT

STUDENTËT

GALERIA

KONTAKT

()
DEKANATI

PROGRAMET

LAJME & NGJARJE
Kurse kodin CSS mund të shihni më posht:
BËHU PJESË E EDUKIMIT

STUDENTËT

GALERIA

KONTAKT

57


.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%); }

58


.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; }

Fig.1.27 Paraqitja e menus

59


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ë:

Rektori Gashi bëri inaugurimin e infoterminaleve

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

60


61


.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; }

62


.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); }

63


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.

64


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.

Titulli i lajmit
Permbajtja e lajmit permbajtja e lajmit permabjtja e lajmit




65


.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; }

66


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.

67


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

Rezultatet e provimit master

Rezultatet : Programim në rrjeta dhe www

Rezultatet : Burimet e ripertritshme te energjis

Rezultatet : Algoritme dhe programim

Rezultatet : Konstruksion dhe dizajn

68


.rezultatet-logo{

.rezultatet h3:hover{

padding:5px;

background-color:#CCC;

}

}

.rezultatet{

.rezultatet a{

border:1px solid #e4e5e0;

text-decoration:none;

border-radius:10px;

color:#000;

width:650px;

font-size:12px;

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; }

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/

69


70


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.

71


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.

72

Report "Punim Diplome Bachelor - Dizajnimi i Ueb Faqeve HTML CSS JavaScript"

Your name

Email

Reason

Description

Copyright © 2025 IDOC.TIPS. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

Punim Diplome Bachelor - Dizajnimi i Ueb Faqeve HTML CSS JavaScript

Recommend Documents

Welcome

Teksti ketu

Teksti ketu

Rektori Gashi bëri inaugurimin e infoterminaleve

Rezultatet e provimit master

Rezultatet : Programim në rrjeta dhe www

Rezultatet : Burimet e ripertritshme te energjis

Rezultatet : Algoritme dhe programim

Rezultatet : Konstruksion dhe dizajn