Begiratu web orrialde bat gaur egun, eta zenbait gauza komunean partekatzen dituzula nabarituko duzu. Partekatutako ezaugarri horietako bat irudiak da. Irudi egokiak hainbeste gehitzen dira webgune baten aurkezpenera. Irudi horietako batzuk, konpainiaren logotipo bat bezala, laguntzen du marka gunea eta erakunde digital hori zure enpresa fisiko batera konektatzea.
Irudi, ikono edo grafiko bat zure webgunera gehitzeko, etiketa orriaren HTML kodean erabili behar duzu. IMG etiketa zure HTMLan jarriko duzu pantailan nahi duzun lekuan zehazki. Orriaren kodea errendatzen duen web arakatzaileak orrialde hori orri bakoitzaren ondoan grafiko egokiarekin ordezkatuko du etiketa hau. Gure enpresaren logotipoari jarraituz, hemen nola gehitu dezakezu irudia zure webgunera:
Irudiaren atributuak
Goiko HTML kodean begiratuz, elementuek bi atributu biltzen dituzte. Horietako bakoitzak irudia behar du.
Lehen atributua "src" da. Hau nahiko literalki orrian agertzen den irudia. Gure adibidean "logo.png" izeneko fitxategia erabiltzen ari gara. Webguneak webgunea erakustea bistaratuko duen grafikoa da.
Fitxategi izen hau baino lehenago ere nabarituko duzu, "/ images /" informazio gehigarri bat gehitu dugu. Fitxategi bide hau da. Hasierako barrako barra honek zerbitzariari direktorioaren erroa bilatzeko begiratu. Ondoren, "irudiak" izeneko karpeta bat bilatzen du eta, azkenik, "logo.png" izeneko fitxategia. "Irudiak" izeneko karpeta bat erabiliz gune guztien grafikoak gordetzeko nahiko ohikoa da praktika, baina zure fitxategiaren bidea zure gunearentzat garrantzitsua den edozein lekutan aldatu beharko litzateke.
Bigarren eskatutako atributua "alt" testua da. Hau "ordezko testua" da, irudian kargatzen ez bada arrazoi batengatik. Testu hau, gure adibidean, "Enpresa logotipoa" irakurtzen denean, irudia kargatzen ez bada agertuko litzateke. Zergatik gertatuko litzateke hori? Hainbat arrazoirengatik:
- Fitxategi bide okerra
- Fitxategi izen hutsa edo oker idatzia
- Transmisioaren errorea
- Fitxategia zerbitzaritik ezabatu da
Horiek aukera batzuk besterik ez dira zergatik gure zehaztutako irudia falta izan daitekeen. Kasu horietan, gure alt testua horren ordez agertuko litzateke.
Pantaila irakurlearen softwarea ere testua altua da, "irakurri" irudia ikusmen urritasuna duten bisitarientzat. Gustatzen zaigun irudia ikusi ezin dutenez, testu honek aukera ematen die irudia zein den jakiteko. Horregatik alt testu beharrezkoa da eta zergatik argi eta garbi egon behar du irudia zer den!
Alt text gaizki ulertu bat da, bilatzaileen helburuetarako. Hau ez da egia. Google-k eta beste bilatzaile batzuek testu hau irakurtzen dute irudia zer den zehazteko (gogoratu, ezin dute "ikusi" irudia bai), ez daukazu alt texturik idatzi bilatzaileei soilik erantzuteko. Egileak gizakientzat ekarriko duen alt testua. Hitz gako batzuk gehitu nahi badituzu bilatzaileei erakargarria iruditzen zaizkienean, ongi dago, baina beti ziurtatu alt testua bere helburu nagusia zerbitzatzen duen irudia grafiko fitxategia ikus dezakeen edonorentzat.
Beste atributuak
IMG etiketek ere zure webguneko grafikoa jartzen duzunean erabilitako beste bi atributuak ditu: zabalera eta altuera. Adibidez, Dreamweaver bezalako WYSIWYG editorea erabiltzen baduzu, zure informazioa automatikoki gehitzen du. Hona hemen adibide bat:
WIDTH eta HEIGHT atributuak nabigatzailearen irudiaren tamaina esaten diote. Arakatzaileak orduan daki zenbat kokapeneko esleitutako espazioa, eta joan daiteke hurrengo orriko elementuan, irudiak deskargatzen diren bitartean. Zure HTML HTML informazio hau erabiltzearen arazoa ez da beti nahi duzun irudia tamaina zehatza erakusteko. Esate baterako, bisitarien pantailan eta gailuaren tamainaren araberako erantzuna duen webgune sentikor bat baduzu, zure irudiak malguak izango dira. Tamaina finkoa duen HTMLan esaten baduzu, oso zaila izango da CSS komunikazioen erantzunak sentiberak izatea . Hori dela eta, estiloaren banaketa (CSS) eta egitura (HTML) bereizteko, gomendagarria da EZ EZ da gehitu zure altuera eta altuera atributuak HTML kodean.
Ohar bat: Kalkulu-argibideak hauetatik askatzen ez badituzu eta CSS-en tamaina ez zehazten baduzu, arakatzaileak hala ere erakutsiko du irudia bere jatorrizko tamaina lehenetsian.
Jeremy Girard-ek editatua