Până acum, definiția imaginii dvs. ar trebui să arate aproximativ așa:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Elementului img i se pot (și ar trebui să) atribui câteva atribute. Primul ar fi alt. Textul definit aici va fi afișat de browser atunci când imaginea - din orice motiv - nu poate fi încărcată.
Din păcate, există mereu confuzii legate de atributul alt. Acesta servește într-adevăr exclusiv cazului în care imaginea nu poate fi afișată. Cu toate acestea, unii browsere afișează valoarea atributului alt într-o fereastră pop-up atunci când mouse-ul este plasat pe imagine.
Acest comportament este greșit. Pentru astfel de tooltip-uri, destinat este de fapt atributul title. O definiție corespunzătoare arată astfel:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo-ul de la PSD-Tutorials.de" />
În acest caz, valoarea atributului title se suprapune celei a lui alt.
Specificări despre dimensiuni
În HTML, foarte multe lucruri sunt rezolvate acum prin CSS, dar specificarea dimensiunilor nu face parte din acestea. În continuare, înălțimea și lățimea sunt definite nealterate prin cele două atribute width și height. Iată și un exemplu în acest sens:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo-ul de la PSD-Tutorials.de" width="200" height="150" />
Dacă nu se specifică o unitate de măsură pentru width sau height, valorile numerice sunt interpretate de browser ca fiind date în pixeli. În exemplul anterior, imaginea are deci 200 de pixeli lățime și 150 de pixeli înălțime. De asemenea, este posibilă specificarea procentuală.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo-ul de la PSD-Tutorials.de" width="20%" height="15%" />
Procentele se referă la spațiul de afișare disponibil. Dacă nu se specifică dimensiunea, browserele afișează imaginile la dimensiunea lor originală.
Imagini și paragrafe de text
Când plasați imagini în combinație cu text flux, trebuie să aveți grijă.
<p><img src="logo.png" alt="" width="180" height="150" /> Acest text va fi afișat lângă imagine.</p>
Cu elementul img avem de-a face cu un așa-numit element inline. Imaginile pot fi plasate direct în text. Dacă imaginea este mai înaltă decât înălțimea liniei, textul va fi aliniat în cadrul liniei de către browser. În mod implicit, textul este aliniat în jos față de imagine.
Acest aliniament putea fi influențat în versiunile anterioare ale HTML-ului prin atributul align. Vă rugăm să nu-l mai folosiți, deoarece a fost eliminat din standardul HTML5. Folosiți în schimb posibilitățile oferite de CSS pentru a vă permite, de exemplu, să înconjurați imaginea cu text.
O descriere lungă
HTML vă oferă posibilitatea de a atașa o descriere detaliată unei imagini. Acest lucru este întotdeauna util atunci când, într-adevăr, imaginea necesită anumite explicații. Informațiile suplimentare pot fi stocate în diferite locuri și să se facă referire la acestea.
Informațiile suplimentare pot fi plasate în diferite locuri.
<img src="bild1.png" alt="Diagrama 1" title="Diagrama 1" longdesc="#diagramm" />
Aici se presupune că există în pagină o zonă cu ID-ul diagramm.
Cea mai întâlnită variantă este cu siguranță aceea în care informațiile sunt stocate într-un fișier extern.
<img src="bild1.png" alt="Diagrama 1" longdesc="diagramm1.htm" />
Cu toate acestea, există încă dificultăți legate de suportul browser-ului. De asemenea, acest atribut pare să pună producătorii de browsere în situația de a se întreba cum să-l implementeze într-un mod simplu.
Frumos și intuitiv nu este într-adevăr implementat de exemplu în Firefox. Dacă o imagine are atributul longdesc, vizitatorii obișnuiți de pagini nu îl recunosc la început. Mai degrabă, aceștia trebuie să facă clic pe imagine cu butonul drept al mouse-ului.
În meniul contextual, apare opțiunea Afișați descrierea. Dacă se face clic pe aceasta, informația suplimentară specificată în longdesc este afișată. Așadar, așa funcționează în Firefox, însă cu siguranță nu este elegant.
Opera a rezolvat situația într-un mod similar. Dacă dați clic pe imagine cu butonul dreapta al mouse-ului în acest browser, va apărea Descriere lungă.
Aceasta vă va duce către informațiile suplimentare indicate.
W3C recomandă să specificați descrierea lungă sub formă de URL de date.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3>Descriere%20a%20logo-ului%20W3C%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EUn%20„W”%20albastru%20cu%20„3”%20albastru%20urmat%20de%20o%20umbra%20neagră%20a%20unui%20„C”%20alb%20pe%20fond%20alb%3C/body%3E%3C/html%3E" />
Dacă nu ați avut încă experiențe cu aceste URL-uri de date, veți găsi informații detaliate despre ele la adresa http://de.wikipedia.org/wiki/Data-URL.
Definirea descrierilor de imagini
Până acum, în HTML nu existau posibilități pentru definirea de legende și grupuri de imagini. Acest aspect s-a schimbat odată cu HTML5. Au fost introduse două elemente noi, figure și figcaption.
Pentru a clarifica, figure nu este destinat exclusiv pentru utilizare în asociere cu grafice. De fapt, elementul poate fi folosit pentru orice element care completează un document. Acest lucru poate include și, pe lângă imagini, de exemplu, diagrame, exemple de cod și videoclipuri.
În afară de figure, există și figcaption. Prin acesta se pot furniza descrieri alternative pentru conținutul care nu este citibil pentru anumite grupuri de utilizatori.
Iată un exemplu pentru utilizarea celor două elemente figure și figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Aceasta este noua noastră siglă.</figcaption> </figure>
Vizualizarea rezultatului în browser oferă următoarele: 
Felul în care browserele gestionează cele două elemente rămâne în definitiv la latitudinea lor. În principiu, desigur, puteți influența din nou afișarea cu CSS.
În cadrul unui element figure puteți insera oricâte imagini sau alte elemente doriți. Cu toate acestea, într-un element figure poate exista doar un element figcaption. Iată un alt exemplu:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Aceasta este noua noastră siglă.</figcaption> </figure>
În acest mod puteți adăuga mai multe imagini într-un element figure.
Mai ales în ceea ce privește structurarea logică a paginilor web sau a conținutului, HTML5 aduce numeroase inovații. Acestea vor fi dezvăluite pe parcursul acestei serii și detaliate, desigur.
