Tutorial HTML – Imagini

Tutorial HTML – Imagini

În acest al patrulea tutorial HTML – imagini vom aborda o temă largă despre folosirea imaginilor în HTML. Vom vedea câteva formate de imagini și avantajele lor și cum se pot insera acestea în paginile web.

Imaginile vorbesc cât o mie de cuvinte. Ele sunt sufletul unui articol. Ajută mult la sintetizarea informațiilor sau la analiză. Și mai ales în ziua de azi, când mulți dintre noi dorim să cunoaștem cât mai în detaliu dar și să nu stăruim prea mult pe o pagină.

Astfel, imaginile și în general conținutul media, au devenit un aspect fundamental pe internet.

Formate de fișiere imagini

Dintre cele mai folosite formate de imagini folosite sunt .jpg .png și .gif, acestea deosebindu-se prin anumite aspecte.

Formatul de tip .jpg este cel mai des folosit pentru afișarea imaginilor mai mari și care nu ar trebui să-și piardă foarte mult din claritate. Pe de altă parte, celelalte două formate sunt oarecum asemănătoare prin faptul că pot avea dimensiuni foarte mici ca fișier, însă ele pierd mult din calitatea imaginii. Din acest motiv ele sunt folosite în general pentru logo-uri sau alte imagini decorațiuni pe site.

Există totuși diferențe între formatele de tip .png și .gif. În primul rând ele diferă prin modalitatea de compresie. În al doilea rând formatul de tip .png poate avea un background transparent, în timp de formatul .gif poate conține o succesiune scurtă de mai multe imagini.

Inserarea imaginilor

Înainte de a insera imaginile într-o pagină HTML este bine să le ajustăm în mod potrivit dimensiunile în pixeli pentru ca încărcarea lor să fie mult mai facilă.

Instrucțiunile pentru inserarea imaginilor este:

Ca rezulat vom avea:

sky full of stars
stars

Eticheta <figure> are rolul de a grupa elementele unei imagini sau mai multe imagini.

Eticheta prin care se inserează o imagine este <img> și ea poate avea mai multe atribute.

Eticheta <figcaption> are rolul de a oferi o explicație a imaginii sau imaginilor incluse în eticheta <figure> și va fi afișată sub imagine ca o legendă.

Atributele lui <img>:

  • src=”” indică adresa relativă sau absolută a imaginii (în acest caz este adresa absolută);
  • alt=””  conține explicația imaginii ce va fi afișată în locul imaginii (până la încărcarea ei sau dacă nu e disponibilă);
  • title=”” afișează o scurt text la deplasarea cursorului deasupra imaginii;
  • width=”” și height=”” vor ajusta dimensiunile în pixeli a imaginii pentru a se încadra în pagina noastră.

Important!

Este foarte important să folosim atributele width și height chiar dacă imaginea noastră are deja dimensiunile potrivite.

De asemenea, atributul alt este obligatoriu de folosit din mai mult motive, unul dintre ele având legătură cu optimizarea paginii.

Spune-ti parerea