Iki šiol jūsų vaizdo apibrėžimas turėtų atrodyti maždaug taip:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Tačiau img elementui turėtų būti priskiriami (ir turėtų būti) tam tikri atributai. Pirmiausia tai būtų alt. Čia nurodytas tekstas bus rodomas naršyklėje, jei vaizdas - dėl bet kokių priežasčių - negalėjo būti įkeltas.
Deja, susijus su alt atributu kartais kyla nesusipratimų. Alt atributas iš tikrųjų skirtas tik tuo atveju, jei vaizdas nerodomas. Kai kurios naršyklės rodo alt atributo reikšmę informacinėje žymėje, kai užvedamas pelės žymeklis ant vaizdo.
Šis elgesys yra neteisingas. Tokioms informacijoms skirtas atributas yra title. Atitinkama apibrėžtis būtų taip:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logotipas" />
Šiuo atveju title reikšmė pakeičia alt reikšmę.
Dydis
HTML dabar daugiausiai dydžio nustatymų nebeapima atributais, o sprendžiama naudojant CSS. Tačiau dydžio nustatymas čia netenkina. Aukštis ir plotis yra nustatomi nepakeičiami naudojant du atributus width ir height. Dar vienas pavyzdys:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logotipas" width="200" height="150" />
Jeigu nenurodoma matavimo vieneto width ar height, naršyklė interpretuos skaičių vertes kaip pikselių matavimus. Taigi, pavyzdžiui, ankstesniame pavyzdyje vaizdas yra 200 pikselių pločio ir 150 pikselių aukščio. Taip pat galima nurodyti procentine išraiška.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logotipas" width="20%" height="15%" />
Procentinės išraiškos tiesiogiai susijusios su turimu rodymo plotu. Jei nėra nurodyti dydžio duomenys, naršyklė rodo grafiką jo originalaus dydžio.
Vaizdai ir teksto paragrafai
Kai dedate vaizdus kartu su tekstu, turite būti atsargūs.
<p><img src="logo.png" alt="" width="180" height="150" /> Šį tekstą rodo šalia vaizdo.</p>
Img yra vadinamasis išorinis elementas. Taigi, grafika gali būti tiesiogiai įdėta į tekstą. Jei grafika aukštesnė nei eilutės aukštis, naršyklė teksto išlygins per eilutę. Numatytasis teksto prilyginimas prie apačios pasikeičia į teksto prilyginimą prie apačios prieš grafiką.
Galite keisti prilyginimą senesnėse HTML versijose naudodami atributą align. Prašome daugiau jo nebenaudoti, nes jis pašalintas iš HTML5 standarto. Vietoj to naudokite galimybes, kurias jums siūlo CSS. Taip galite, pavyzdžiui, leisti teksto apsupti vaizdą.
Išsamus aprašymas
HTML suteikia jums galimybę nurodyti išsamų aprašymą vaizdui. Tai visada naudinga, kai vaizdui iš tikrųjų reikalingi paaiškinimai. Jūs galite saugoti papildomą informaciją skirtingose vietose ir nurodyti į ją.
Papildomą informaciją galima pateikti skirtingose vietose.
<img src="bild1.png" alt="Diagrama 1" title="Diagrama 1" longdesc="#diagramm" />
Čia priimama, kad puslapyje yra vieta su ID diagramm.
Dažniausiai naudojama variacija, kur informacija saugoma išorinėje byloje.
<img src="bild1.png" alt="Diagrama 1" longdesc="diagramm1.htm" />
Tačiau šiuo metu naršyklės nepalaiko šio metodo. Be to, atrodo, kad šis atributas sugalvoti naršyklės gamintojams, kaip jį paprastai įgyvendinti.
Iš tikrųjų šis sprendimas yra nepatrauklus ir neaiškus, pavyzdžiui, „Firefox“. Jei vaizdas turi longdesc atributą, įprasti puslapių lankytojai iš pradžių to nepastebi. Jie turi spustelėti vaizdą dešiniuoju pelės mygtuku.
Tada kontekstinėje sąsajoje matomas „Rodyti aprašymą“ punktas. Jį paspaudus bus rodoma papildoma informacija, nurodyta longdesc. Kaip minėta, „Firefox“ taip veikia, bet elegantiška tai tikrai nėra.
Opera tai jau išsprendė gan panašiu būdu. Spustelėjus šio naršyklės puslapį dešinįja pelės mygtuku, matomas įrašas Ilgas aprašymas.
Tai veda prie nurodytų papildomų informacijų.
WC3 taip pat siūlo nurodyti ilgąją aprašymą naudojant Data-URL formatą.
<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" />
Jei dar neturite patirties su šiomis Data-URL, rasite išsamią informaciją adresu http://de.wikipedia.org/wiki/Data-URL.
Apibrėžti paveikslėlių aprašymus
HTML iki šiol neturėjo jokių galimybių pavadinimų ir paveikslėlių grupių apibrėžimui. Tikslingai tai pasikeitė su HTML5. Čia buvo įvesti du nauji elementai figure ir figcaption.
Prieš pradedant: figure nėra skirtas išskirtinai naudojimui su grafikomis. Iš tikrųjų, šis elementas gali būti naudojamas visiems elementams, kurie papildo dokumentą. Tai gali būti ne tik paveikslėliai, bet pavyzdžiui, diagramos, kodavimo pavyzdžiai ir vaizdo įrašai.
Be figure yra ir figcaption. Jįgalima aprūpinti turinius, kurie neįrašomi tam tikriems vartotojų grupių, su alternatyviu aprašymu.
Čia yra pavyzdys kaip naudoti du elementus figure ir figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Tai yra mūsų naujas logotipas.</figcaption> </figure>
Pažvelgus į naršyklės rezultatą, matysite šį rezultatą:
Kaip naršyklės tvarko šiuos du elementus, lieka pačioms nuspręsti. Principialiai galite vėl paveikti išvaizdą naudodami CSS.Figure elemente galite įdėti tiek daug paveikslėlių ar kitų elementų, kiek jums reikia. Tačiau figure elemente gali būti tik vienas figcaption elementas. Vėlgi, pateikiamas pavyzdys:
<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>Tai yra mūsų naujas logotipas.</figcaption> </figure>
Taip galite įdėti keletą paveikslėlių į figure elementą.
Ypač kalbant apie tinklalapių ar turinio loginį struktūrizavimą, HTML5 siūlo daugybę naujovių. Šias naujoves žinote išsamiuose šios serijos skyriuose.
