Punim Diplome Bachelor - Dizajnimi i Ueb Faqeve HTML CSS JavaScript
February 11, 2017 | Author: Ferid Shaqiri | Category: N/A
Short Description
Download Punim Diplome Bachelor - Dizajnimi i Ueb Faqeve HTML CSS JavaScript...
Description
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 149.
4
Ismail Kuksi, Programimi në HTML, Prizeren, 2012, faqe 3.
lidhje
në
Internet.
4
6
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
elementit kemi elementin Welcome. Si fillim do të punojmë në trupin e dokumentit pra brenda elementeve 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ë: dhe dhe 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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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 , 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 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.
Titulli i faqes suaj këtu E gjithë përmbajtja e faqes suaj shkruhet këtu..!
10
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 170.
21
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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 dhe . Etiketa 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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
Rezultati në shfletues, pas ekzekutimit të kodimit.
26
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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 , mbasi shfletuesi e shfaq dokumentin duke e lexuar kodin e tij rresht për rresht. Rreshti i tregon shfletuesit se në vazhdim pasojnë instruksione të shkruara me sintaksën dhe rregullat e CSS, si në vijim:
31
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
hr {color: red} p {margin-left: 20px} body {background-image: url(“foto/logo.png”)}
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: 25
Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 301.
52
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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: window.alert (“Mirë se erdhe në JavaScript”);
26
Z.Dika, A.Luma, Dizajnimi dhe zhvillimi i ueb-it, Shkup, 2007, faqe 306, 307.
53
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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:
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:
var y=window.prompt (“Ju lutemi shkruani emrin tuaj”); alert (y);
54
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
.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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
.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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
61
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
.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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
.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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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 Titulli i lajmit Permbajtja e lajmit permbajtja e lajmit permabjtja e lajmit
Titulli i lajmit Permbajtja e lajmit permbajtja e lajmit permabjtja e lajmit Titulli i lajmit Permbajtja e lajmit permbajtja e lajmit permabjtja e lajmit
65
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
.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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
.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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
70
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
DIZAJNIMI I WEB FAQEVE ME HTML, CSS DHE JAVASCRIPT
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
View more...
Comments
