Shikoni çdo faqe në internet sot dhe do të vini re se ata ndajnë gjëra të përbashkëta të përbashkëta. Një nga këto tipare të përbashkëta është imazhet. Imazhet e duhura shtojnë aq shumë në prezantimin e një faqeje interneti. Disa nga ato imazhe, si logoja e një kompanie, ndihmojnë të markës së faqes dhe të lidheni atë entitet dixhital me kompaninë tuaj fizike.
Për të shtuar një imazh, ikonë ose grafikë në faqen tuaj web, duhet të përdorni tagin në kodin HTML të një faqeje. Ju vendosni tag IMG në HTML tuaj pikërisht aty ku dëshironi që grafiku të shfaqet. Shfletuesi i internetit që po jep kodin e faqes do ta zëvendësojë këtë tag me grafikun përkatës sapo të shihet faqja. Duke u kthyer në shembullin e kompanisë tonë të kompanisë, këtu është se si ju mund të shtoni atë imazh në faqen tuaj:
Cilësitë e imazhit
Duke parë kodin HTML më lart, do të shihni se elementi përfshin dy atribute. Secili prej tyre kërkohet për imazhin.
Atributi i parë është "src". Kjo është mjaft fjalë për fjalë skedar imazhi që dëshironi të shfaqet në faqe. Në shembullin tonë po përdorim një skedar të quajtur "logo.png". Kjo është grafiku që do të shfaqte shfletuesi i internetit kur të krijohej faqja.
Ju gjithashtu do të vëreni se para këtij emri të skedarit, ne kemi shtuar disa informacione shtesë, "/ images /". Ky është rruga e skedarit. Prerja e parë fillestare tregon serverin të shikojë në rrënjën e direktorisë. Pastaj do të kërkojë një dosje të quajtur "imazhe" dhe së fundi skedari i quajtur "logo.png". Përdorimi i një dosjeje të quajtur "imazhe" për të ruajtur të gjithë grafikat e një faqeje është një praktikë shumë e zakonshme, por rruga e dosjes tënde do të ndryshohet në çdo gjë që është e rëndësishme për faqen tënde.
Atributi i dytë i kërkuar është teksti "alt". Ky është "teksti alternativ" që shfaqet nëse imazhi nuk arrin të ngarkojë për ndonjë arsye. Ky tekst, i cili në shembullin tonë lexon "Logo e kompanisë" do të shfaqet nëse imazhi nuk arrin të ngarkojë. Pse do të ndodhte kjo? Një sërë arsyesh:
- Rruga e gabuar e skedarit
- Emër i skedarit të gabuar ose gabim shkrimi
- Gabimi i transmetimit
- Skeda u fshi nga serveri
Këto janë vetëm disa mundësi përse imazhi ynë i specifikuar mund të mungojë. Në këto raste, teksti i alt tonë do të shfaqte në vend të kësaj.
Teksti i Alt është përdorur gjithashtu nga softueri i lexuesit të ekranit për të "lexuar" imazhin tek një vizitor i dëmtuar nga shikimi. Meqenëse nuk mund ta shohin imazhin si ne, ky tekst u lejon atyre të dinë se çfarë është vetë imazhi. Kjo është arsyeja pse teksti i alt është i nevojshëm dhe pse duhet të tregohet qartë se çfarë është imazhi!
Një keqkuptim i përbashkët i tekstit të alt është se ajo është menduar për qëllime motor kërkimi. Kjo nuk eshte e vertete. Ndërsa Google dhe motorët e tjerë të kërkimit lexojnë këtë tekst për të përcaktuar se çfarë është imazhi (mos harroni, ata nuk mund ta "shohin" imazhin tuaj), nuk duhet të shkruani alt tekst për t'u ankuar vetëm në motorët e kërkimit. Teksti i autorit është i qartë për njerëzit. Nëse mund të shtoni edhe disa fjalë kyçe në tag që apelojnë tek motorët e kërkimit, kjo është e mirë, por gjithnjë sigurohuni që teksti i alt të shërbejë qëllimit të tij primar duke deklaruar se çfarë është imazhi për këdo që nuk mund ta shohë skedarin grafik.
Atribute të tjera
Etiketa IMG gjithashtu ka dy atribute të tjera që mund t'i shihni në përdorim kur vendosni një grafik në faqen tuaj të internetit - gjerësia dhe lartësia. Për shembull, nëse përdorni një redaktor WYSIWYG si Dreamweaver, ai automatikisht shton këtë informacion për ju. Ja një shembull:
Atributet WIDTH dhe HEIGHT i tregojnë shfletuesit madhësinë e imazhit. Shfletuesi atëherë e di saktësisht se sa hapësirë duhet të ndahet në faqosje dhe ai mund të kalojë tek elementi tjetër në faqe ndërsa shkarkimet e imazhit. Problemi me përdorimin e këtij informacioni në HTML është që ju nuk mund të dëshironi gjithmonë që imazhi juaj të shfaqet në atë madhësi të saktë. Për shembull, nëse keni një faqe të përgjegjshme ndryshimet e të cilave në bazë të ekranit të vizitorëve dhe madhësisë së pajisjes, gjithashtu do të dëshironi që imazhet tuaja të jenë fleksibël. Nëse e deklaroni në HTML se çfarë është madhësia fikse, do ta gjeni shumë të vështirë të anashkaloni pyetjet e reagimit të medias CSS . Për këtë arsye, dhe për të ruajtur ndarjen e stilit (CSS) dhe strukturës (HTML), rekomandohet që NUK të shtoni atribute të gjerësisë dhe lartësisë në kodin HTML.
Një shënim: Nëse largoheni nga këto udhëzime të përmasave dhe nuk specifikoni një madhësi në CSS, shfletuesi do të tregojë imazhin në madhësinë e parazgjedhur të saj, gjithsesi.
Redaktuar nga Jeremy Girard