HTML: irudiak

Irudiak Webeko bigarren baliabide garrantzitsuena izan daitezke.

HTMLk honako elementu hauek ditu gure dokumentuetan irudiak sartzeko eta apaintzeko euren kokapenean.

• <img> — Elementu horrek irudi bat txertatzen du dokumentuan. Elementuak src atributua behar du fitxategiaren URLa eta erantsi nahi dugun irudia zehazteko.
• <picture> — Elementu horrek irudi bat txertatzen du dokumentuan.
• <source> elementuarekin batera lan egiten du, hainbat bereizmenetan irudi ugari eskaintzeko. Erabilgarria da webgune moldagarriak sortzeko, 5. kapituluan ikusiko dugun bezala.
• <figure> — Elementu honek eduki nagusiarekin lotutako edukia adierazten du, baina ezabatu egin daiteke eraginik izan gabe, hala nola argazkiak, bideoak, etab.
• <figcaption> — Elementu honek <figure> elementurako izenburu bat sartzen du. Dokumentuan irudi bat sartzeko, <img>elementua baino ez dugu adierazi behar, eta fitxategiaren URLa src atributuari esleitu.

<article>
    <p>Heriotza kimera bat da: ni existitzen naizen bitartean, ez baita heriotzarik; <br> eta heriotza dagoenean, ez da ni existitzen. <br> Samoseko Epikuroa </p >
      <img src="nireIrudia.jpg"> 
</article>

Goiko kodeak “nireIrudia.jpg”artxiboaren irudia kargatzen du, eta pantailan erakusten du jatorrizko tamainan, 2-15 irudiak erakusten duen bezala. Irudia jatorrizko tamainan irudikatzen da, baina tamaina pertsonalizatua eta konfigurazio-parametro batzuk defini ditzakegu.

• width atributuak esaterako irudiaren zabalera adierazten du.
• height atributuak irudiaren altuera adierazten du.
• alt atributuak irudia kargatu ezin denean erakusten den testua zehazten du.
• Srcset atributuak nabigatzaileak elementu bererako karga ditzakeen bereizmen desberdinetako irudien zerrenda bat zehazteko aukera ematen digu.
• Sizes atributuak queries erdiko zerrenda bat (bitartekoen kontsulta) eta irudi tamaina desberdinak zehazten ditu, nabigatzaileak pantailaren bereizmenaren arabera zer erakutsi erabaki dezan. ‘Media queries’ eta web diseinu moldagarria 5. kapituluan aztertuko ditugu.
• crossorigin atributuak jatorri gurutzatuko (jatorri anitzeko) irudietarako kredentzialak ezartzen ditu. Balio posibleak anonymous (kredentzialik gabe) eta usecredentials (kredentzialak behar ditu) dira. CORS teknologia eta jatorri desberdinetako irudiekin nola lan egin 11. kapituluan aztertuko dugu.

Width eta height atributuek irudiaren dimentsioak zehazten dituzte, baina ez dute harremana kontuan hartzen.

Bi balioak irudiaren jatorrizko proportzioa kontuan hartu gabe adierazten baditugu, nabigatzaileak irudia luzatu edo xaxatu beharko du, zehaztutako dimentsioetara egokitzeko.

Irudia jatorrizko proportzioa aldatu gabe murrizteko, atributu bakar bat zehaztu dezakegu, eta nabigatzaileari bestea kalkulatzen utzi.

<article>
 <p>Heriotza kimera bat da: ni existitzen naizen bitartean, ez baita heriotzarik; <br> eta heriotza dagoenean, ez da ni existitzen. <br> Samoseko Epikuroa </p >
      <img src="nireIrudia.jpg"> <img src="koadrilaPerdidon.jpg" width="600" alt="Koadrilakoak Perdidon">
</article>

Goiko kodeak aurreko adibidean sartutako <img > elementuari 600 balioa gehitzen dio. Horrek irudiaren zabalera 600 pixelera murrizten du, eta height atributua adierazi ez denez, irudiaren altuera automatikoki kalkulatzen da irudiaren jatorrizko proportzioak kontuan hartuta.

Horra emaitza:

HTML-irudizerren(1): <img> elementua.

Egin ezazu zuk zeuk: deskargatu nireIrudia.jpg irudia gure webgunetik. Ordeztu <article></article> elementua index.html fitxategian, goiko kodearekin, eta ireki dokumentua zure nabigatzailean. Goiko irudiaren antzeko zerbait ikusi beharko zenuke. Errepikatu prozesua 2-32 zerrendaren kodearekin. Orain irudia murriztuta ikusi beharko zenuke, 2-16 irudian ikus daitekeenez. 2-32 zerrendaren kodeko <img> elementuak alt atributua ere barne hartzen du. Atributu hori probatzeko, ezabatu miimagen.jpg fitxategia eta eguneratu dokumentua zure nabigatzailean. Nabigatzaileak jada ezin duenez irudiaren fitxategia aurkitu, alt atributuari dagokion testua erakutsiko du haren ordez.

Irudi batzuk, ikonoak adibidez, garrantzitsuak dira gainerako edukiari esanahi bat ematen diotelako, baina beste batzuk, adibide horien irudia kasu, osagarri gisa jokatzen dute eta ezabatu egin daitezke informazio-fluxuari eragin gabe. Informazio mota hori presente dagoenean, <figure></figure> elementua erabil daiteke identifikatzeko.

Elementu hori <figcaption></figcaption> elementuarekin batera ezarri ohi da, testu deskribatzailea sartzea. Hurrengo adibidean bi elementu horiek erabiltzen ditugu gure irudia eta erabiltzaileari bere izenburua erakustea.

<article>
     <p>Heriotza kimera bat da: ni existitzen naizen bitartean, ez baita heriotzarik; <br> eta heriotza dagoenean, ez da ni existitzen. <br> Samoseko Epikuroa </p >
    <figure>
          <img src="koadrilaPerdidon.jpg" width="600" alt="Koadrilakoak Perdidon">
          <figcaption>Koadrilakoak Perdidon</figcaption>
    </figure>
</article>

HTML-irudizerren(2): <figcaption></figcaption> elementua.