Faqe Web 

Faqe Web

Faqe Web (Lidhjet, URL ose Links)

Lidhjet janë mënyra e vetme që vizitorët e faqes tuaj arrijnë të gjejnë informacionet që po kërkojnë. Dështoni në prezantimin e mirë të tyre dhe do përfundoni me informacion të pagjetshëm. Në këtë guidë do ju mësoj si ti shfaqni lidhjet në mënyrën më të mirë të mundshme përmes teorisë, kodeve dhe shembujve konkretë. Shihni shembujt edhe futini në zbatim edhe në faqet tuaja.  Faqe Web 

Lidhjet (aka Links) janë esenca e një faqeje web, duke qenë se lidhin informacionet me njëra tjetrën. Krijoni lidhje të shëmtuara dhe do përfundoni me një faqe që është e vështirë për tu shfletuar e me informacione që gjenden me vështirësi. Ndiqni këtë guidë me kujdes dhe përfitoni për të ndërtuar faqe më të përdorshme (aka usability).

Çfarë janë lidhjet?

Për ata që jetojnë nën një gur dhe nuk kanë klikuar ndonjëherë në to (pyes veten, pse po lexoni këtë guidë?), lidhjet janë një mënyrë për t’ju dërguar në një faqe nga një faqe tjetër. Nëse jeni në faqen x.com dhe doni të lexoni lajmet e fundit të një aktori (hmm Leo di Caprio? lol), atëherë klikoni në një lidhje. Kaq e thjeshtë. Tani ta mbyllim me shpjegimet elementare sepse vizitorët me eksperiencë po trashen që tani.

Në gjuhën tonë të dashur HTML, lidhjet krijohen në këtë mënyrë:

?

1

2

<a href=”faqja.html”>Kjo lidhje te drejton diku</a>

<a href=”http://www.faqja.com” target=”_blank”>Kjo lidhje te drejton ne nje faqe duke hapur dritare/tab te re</a>

Tani që mësuat si të bëni një lidhje në HTML (turp! nëse nuk e dinit), do eksplorojmë mënyrat se si ti bëni ato më të bukura e më të dukshme.

Pseudo Klasat në CSS

Pseudo klasat në CSS janë disa klasa të paracaktuara që na lejojnë të “ngjyrosim” (aka style) elementët HTML për veprime të caktuara. Çfarë na intereson ne janë lidhjet, e pikërisht këto pseudo klasa do ti përdorim për lidhjet. Më saktësisht, ne na interesojnë këto pseudo klasa: Faqe Web 

a:link
Aktivizohet për lidhjet e pa vizituara

a:hover
Aktivizohet kur vendosim mouse-in sipër një lidhjeje

a:visited
Aktivizohet për lidhje që janë vizituar të paktën një herë

a:active
Aktivizohet kur një lidhje është klikuar

Imagjinoj që po pyesni veten si përdoren këto pseudo klasa! Spo ju lë ta vrisni trurin më tej. Kodi më poshtë është një shembull “real” në përdorimin e pseudo klasave në CSS. Faqe Web 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

a:link{

color:red; /* tekstet normale te pavizituara kane ngjyre te kuqe */

}

 

a:visited{

color:blue; /* tekstet e vizituara kane ngjyre blu */

}

 

a:hover{

color:yellow; /* kur vendosim mouse-in siper lidhja merr ngjyre te verdhe */

}

 

a:active{

color:green; /* kur e klikojme lidhjen, ajo merr ngjyre jeshile */

}

Mos më bëj si i zgjuar sepse nuk jam i verbër! E di që ngjyrat e mësipërme në një faqe të vërtetë do çudisnin edhe një lopë që shfleton internetin (nëse ka kuptohet), por është thjeshtë një SHEMBULL!

Lidhjet duhet të dallohen!

Me këtë 2 pika informacion që keni marrë deri tani duhet tashmë ta keni vrarë mendjen se si ti përdorim për të krijuar lidhje më të bukura e më të përdorshme. Gjëja kryesore që duhet të keni parasysh kur ndërtoni një website (përveç faktit që duhet ta ndërtoni) është që lidhjet të dallohen nga pjesa tjetër e informacionit. Faqe Web 

Besoj se nuk doni që vizitorët tuaj të mos dinë kush klikohet e kush jo? Pra, logjika këtu është që lidhjet të kenë ngjyrë të dallueshme nga pjesa që nuk klikohet e mundësisht edhe vijë poshtë (aka underline).

Imazhi më sipër s’ka nevojë për shpjegime. Lidhjet janë të dallueshme dhe të ftojnë të klikosh. Kjo është më e rëndësishmja dhe pikë. Faqe Web 

Shtoni interaksionin me :hover

Deri tani kemi lidhje që dallohen dhe me këtë jemi në rregull. JO! Pse mos ti japim përdoruesve më tepër interaktivitet duke ndryshuar ngjyrën apo diçka tjetër tek lidhjet kur mouse-i vendoset sipër? Sigurisht, kursori shndërrohet në “dora me gisht tregues të ngritur” kur mouse-i vendoset mbi një lidhje, por kjo s’është e mjaftueshme. Konsideroni kodin CSS më poshtë, i cili percakton stile për lidhjet normale dhe ato që i vendoset mouse-i sipër. Faqe Web 

?

1

2

3

4

5

6

7

8

9

a:link{

color:red;

text-decoration:none; /* ja heqim vijen poshte e cila vendoset by default */

}

 

a:hover{

color:blue;

text-decoration:underline; /* kur mouse-i vendoset siper, lidhja behet blu dhe shfaq vizen poshte */

}

Mos e harroni asnjëherë pseudo klasën :hover se mund të jetë miku jot më i mirë (ose jo, por kush do t’ja di?!). E rëndësishme është ta përdorni për lidhjet e ti ofroni vizitorëve një eksperiencë më të këndshme.

Po lidhjet e vizituara?  Faqe Web 

Kjo është një çështje që varet nga ju dhe nga tipi i faqes. Faqet e vogla që kanë pak lidhje nuk kanë nevojë për diferencim të të vizituarave, ndërsa faqet e mëdha me shumë lidhje mund të kenë në mënyrë që vizitori ta kuptojë çfarë ka parë (apo do të rishohë) e çfarë jo. Për rastin e dytë do ja u këshilloja, por mos egzagjeroni me diferencimin sepse mund të prishni dizenjimin. Faqe Web 

Një ngjyrë më e zbehtë e bën punën. Kini parasysh që lidhjet e përdorura për navigim (qoftë menuja kryesore apo ajo dytësore) s’kanë nevojë të diferencohen. Vizitorët e dallojnë lehtësisht (nëse keni bërë punën e duhur) kush është menuja, prandaj ska nevojë ti diferenconi lidhjet. Faqe Web 

Për një web më të mirë, përdorni Title dhe Alt Faqe Web 

Para shumë vitesh asnjeri s’donte t’ja dinte për webin sipas standarteve (sepse atëherë ishte vetëm IE6) apo për vizitorët me aftësi të kufizuara në shikim. Sot webi ka ndryshuar shumë e të gjithë duam t’ja dimë për to (ndoshta ti jo, por NE të tjerët po), prandaj dhe punojmë për ta bërë një ambjent më të mirë për vizitorët. Faqe Web 

Tagu ALT (aka ALTERNATE) lexohet nga motorët e kërkimit apo nga lexuesit zanorë të ekraneve (që përdoren nga njerëzit me probleme në shikim) për të kuptuar se çfarë funksioni ka një lidhje dhe ku të drejton. Në fotografi, tagu ALT shërben gjithashtu si alternativë për shfletuesit që i kanë të çaktivizuara (nga vetë përdoruesi) imazhet  apo nëse foto nuk egizston. Faqe Web 

Tagu TITLE shfaqet kur e vendosni mouse-in sipër një lidhjejë për të dhënë informacione se ku të dërgon lidhja. Në varësi të kontekstit, një titull mund të mos jetë i nevojshëm nëse lidhja është e qartë se për çfarë shërben, por në pjesën më të madhe të rasteve është e nevojshme. Shpesh herë mund të jetë i njëjtë me tagun ALT.

Pra, krijojini lidhjet në HTML si më poshtë:

?

1 <a href=”faqja.html” title=”Shiko Lady Gaga nudo” alt=”Nuk ja vlen, mos te ngelet pishman”>Klikoni ketu ju lutem</a>

Përdorni ikonë për lidhjet e jashtme Faqe Web 

Sa herë na ka qëlluar të klikojmë në një lidhje, vetëm të na hapet një dritare e re? Unë personalisht nuk e duroj dot. Nëse dua ta hap një lidhje në faqe të re, e hap vetë! Minimumi që mund të bëjmë për mos ti acaruar vizitorët është ti vendosim një ikonë lidhjeve të jashtme që të tregojnë se hapen në faqe të re. Kodi CSS më poshtë ju tregon si ta arrini këtë.

?

1 <a href=”http://www.google.com/” target=”_blank”>Shko ne Google</a>

?

1

2

3

4

a[target=”_blank”]{ /* i drejtohemi te gjitha lidhjeve qe kane target=”_blank” */

background:url(ikona.png) no-repeat center right; /* vendosim ikonen si background ne cepin e djathte te lidhjes */

padding-right:15px; /* i bejme vend ikones */

}

Kjo është ikona që kam përdorur në imazhin më sipër: Faqe Web 

Disa këshilla të tjera që në varësi të faqes mund të jenë po aq të rëndësishme sa ato më sipër janë:

  1. Përdorni lidhje që e përshkruajnë veten të paktën pjesërisht. Lidhje si “kliko këtu” apo “lexo më shumë” jo gjithmonë e bëjnë punën.
  2. Për lidhjet në menu përdorni edhe pseudo klasën :active sepse jep një efekt të këndshëm Faqe Web 
  3. Në rastet kur lidhja drejton në një PDF, dokument Word apo në një site social (aka Facebook) përdorni ikonat përkatëse krahas lidhjes. Kjo do ti bëjë lidhjet shumë më interesante.
  4. Nëse s’doni tja dini për vizitorët që nuk përdorin mouse, shtoni një style: a:focus{ outline:0}. Kjo do heqë atë konturin e shëmtuar që shfaqet në lidhje kur klikohen.

Faqe Interneti

Leave a Reply

Your email address will not be published. Required fields are marked *

five × 3 =

Recent Posts

Chat with us
Need help!
Greetings, I am here to help you with any Questions you have regarding our services.