Līdz šim jūsu attēla definīcija izskatījās aptuveni šādi:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Tomēr img elementam var (un vajadzētu) piešķirt dažas atribūtus. Pirmkārt, tas būtu alt. Šis definētais teksts tiks rādīts pārlūkā, ja attēls - no kādēļi vien - nevar tikt ielādēts.
Dienā, kad tiek precizēts alt atribūts, bieži rodas neskaidrības. Īstenībā alt atribūts tiek izmantots tikai gadījumā, ja attēls netiek parādīts. Tomēr daži pārlūki rāda alt atribūta vērtību rīka padomslogs, ja virs attēla paliec ar peles rādītāju.
Šī rīcība ir nepareiza. Šādiem rīka padomlogiem jābūt īpašībai title. Attiecīgā definīcija būtu šāda:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logotips" />
Šajā gadījumā title vērtība pārkāpj alt vērtību.
Izmēri
HTML tagadānībā daudzējādā ziņā tiek atrisināts nevis caur atribūtiem, bet gan caur CSS. Tomēr izmēru definēšana šeit nav iekļauta. Augstumu un platumu neizmainīti definē cauri diviem atribūtiem width un height. Piemērs atkal:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logotips" width="200" height="150" />
Ja nav norādīta mērvienība width vai height, skaitļi tiek interpretēti kā pikseļu norādījumi no pārlūka. Iepriekšējā piemērā attēls ir 200 pikseļus plats un 150 pikseļus augsts. Iespējama arī procentuālā norāde.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logotips" width="20%" height="15%" />
Procenti attiecas uz pieejamo ekrāna vietu. Ja nav norādītas izmērvērtības, pārlūki attēlos grafikas to sākotnējā lielumā.
Attēli un teksta rindkopas
Ja ievietojat attēlus kombinācijā ar tekstu plūstošā tekstā, jums jābūt uzmanīgiem.
<p><img src="logo.png" alt="" width="180" height="150" /> Šis teksts tiks rādīts attēla blakus.</p>
Ar img ir parasts iekšējais elements. Tādēļ attēlus var ievietot tieši tekstā. Ja attēls ir augstāks par rindiņas augstumu, pārlūki tekstu iekšēji rindkopās izlīdzina. Parasti teksts tiek izlīdzināts zemāk attēlam.
Ietekmi uz izlīdzināšanu varēja mainīt agrākās HTML versijas ar atribūtu align. Lūdzu, to vairs nepielietojiet, jo tas ir izņemts no HTML5 standarta. Vietojā tam izmantojiet iespējas, ko piedāvā CSS. Tādējādi, piemēram, attēlu var apskalot ar tekstu.
Garais apraksts
HTML jums dod iespēju pie attēla norādīt detalizētu aprakstu. Tas vienmēr ir noderīgi attiecīgajiem attēliem, kam nepieciešamas skaidrojumi. Papildinformācijas var saglabāt dažādos veidos un uz to norādīt.
Papildinformācija var būt dažādās vietās.
<img src="bild1.png" alt="Diagramma 1" title="Diagramma 1" longdesc="#diagramm" />
Šeit tiek pieņemts, ka lapā ir joma ar ID diagramm.
<img src="bild1.png" alt="Diagramma 1" longdesc="diagramm1.htm" />
Taču šeit vēl ir pārāk maza pārlūka atbalsts. Turklāt šķiet, ka šis atribūts uzdeva pārlūku ražotājiem jautājumu, kā vienkārši to īstenot.
Pi gadījumā, ja attēlam ir longdesc atribūts, Firefox to nenosaka pārlūka lietotāji tieši nepamana. Viņiem drīzāk jānorāda uz attēlu ar labo peles taustiņu.
Kontekstizvēlnī tad rādīsies opcija Rādīt aprakstu. To noklikšķinot, tiks rādīta papildinformācija, kas norādīta pie longdesc. Kā teikts, tā darbojas Firefox, bet eleganti tas noteikti nav.
Opera to ir risinājis līdzīgi. Ja šajā pārlūkprogrammā noklikšķināt uz attēla ar labo peles taustiņu, tiks attēlots ieraksts Garš apraksts.
Pēc tam tas novirzīs jūs uz norādītajām papildinformācijām.
WC3 ieteikums ir norādīt garo aprakstu formātā Data-URL.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Ja jums vēl nav pieredze ar šiem Data-URL, jūs varat atrast detalizētu informāciju par tiem vietnē http://de.wikipedia.org/wiki/Data-URL.
Definēt attēla aprakstus
Līdz šim HTML nebija nekādu iespēju definēt attēlu apakšvirsrakstus un attēlu grupēšanu. Tieši šis aspekts mainījies ar HTML5. Šeit tika ieviesti divi jauni elementi - figure un figcaption.
Lai iepriekš pasacītu: Figure nav paredzēts tikai grafiku kombinācijai. Patiesībā šo elementu var izmantot visiem elementiem, kas papildina dokumentu. To var būt attēli, piemēram, diagrammas, koda piemēri un video.
Papildus elementam figure ir arī figcaption. To var izmantot, lai noteiktas auditorijas nesaprotamiem saturam piešķirtu alternatīvu aprakstu.
Šeit ir piemērs par abu elementu figure un figcaption izmantošanu:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Tas ir mūsu jaunais logotips.</figcaption> </figure>
Pārlūkprogrammā iegūtais rezultāts izskatās šādi:
Respektīvi, pārlūkprogrammā tiek parādīti abiem elementiem, taču gala rezultāts ir pārlūkprogrammas ziņā. Pamatā jūs varat ietekmēt izskatu ar CSS.
Iekšpusē figure elementā var ievietot neierobežotu skaitu attēlu vai citus elementus. Tomēr vienā figure elementā drīkst būt tikai viens figcaption elements. Arī šeit piemērs:
<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>Tas ir mūsu jaunais logotips.</figcaption> </figure>
Tādā veidā ir iespējams ievietot vairākus attēlus vienā figure elementā.
It īpaši HTML5 radīšanai ir daudz jauninājumu attiecībā uz tīmekļa lapu vai satura loģisko struktūrēšanu. Par to jūs detalizēti uzzināsiet šajā sērijā.
