Punim Diplome Bachelor - Dizajnimi i Ueb Faqeve HTML CSS JavaScript

(1)

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

(2)

ii 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. _______________________.

(3)

iii

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.

(4)

iv

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.

(5)

v

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

(6)

vi 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

(7)

vii Kapitulli V

14. Zhvillimi i ueb-it ...55 15. Konkluzione ...71 16. Literatura ...72

(8)

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

(9)

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.

(10)

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

(11)

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.

(12)

5

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

(13)

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

(14)

7

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

(15)

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

<title>Faqja ime e pare</title> </head>

<body>

<h1>Welcome</h1> </body>

(16)

9

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

(17)

10

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>

<body>

E gjithë përmbajtja e faqes suaj shkruhet këtu..! </body>

(18)

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

(19)

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.

(20)

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.

(21)

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.

(22)

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.

(23)

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

(24)

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

(25)

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.

(26)

19

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.

(27)

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.

(28)

21

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

(29)

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.

(30)

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:

(31)

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.

(32)

25

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

(33)

26

Rezultati në shfletues, pas ekzekutimit të kodimit.

(34)

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.

(35)

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.

(36)

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

(37)

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

(38)

31

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:

(39)

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>

body {background-image: url(“foto/logo.png”)} </style>

</head>

<head>

(40)

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

(41)

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

(42)

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

16_{Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 229.} #lajmi {

color: green; size: 12px; }

(43)

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

17_{Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 232.} body {

background-image: url ( ‘logo.png’ ); background-repeat: no-repeat; background-attachment: fixed; }

(44)

37

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

(45)

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

(46)

39

medium large 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

(47)

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

(48)

41

poshtëm me mundësi të vetisë

për shkurtesa.

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

(49)

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

(50)

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:

(51)

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

(52)

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.

(53)

46

Shembull:

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

(54)

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.

(55)

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.

22_{Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 293.} <html>

<head>

<title>JavaScript</title>

</script> </head>

(56)

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.

23_{Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 294.} // Ky është një koment

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

(57)

50

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

(58)

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;

(59)

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

25_{Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 301.} 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 }

var nota = 70 ; if ( nota >= 60 ) {

document.write ( “Urime, ke marrë notën kaluese.” ) ; } else {

document.write ( “Më vjen keq, nuk ke kaluar.” ) ; } // -- >

(60)

53

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

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:

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

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ë */ }

<body>

window.alert (“Mirë se erdhe në JavaScript”); </script>

(61)

54

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:

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:

<body>

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

var y=window.prompt (“Ju lutemi shkruani emrin tuaj”); alert (y);

</script> </body>

(62)

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

<body>

<a link href="#">Shqip </a>| <a link href="#">English</a> </div>

(63)

56

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