Kaip įterpti ir formatuoti paveikslėlius HTML puslapyje

Paveikslėliai padeda pagerinti tinklalapio išvaizdą, suskaidydami tekstą ir pritraukdami dėmesį. Naršyklė rodo paveikslėlį, tačiau tai iš tiesų yra nuoroda į atskirą failą – vietinį serveryje arba nuotolinį.

Paveikslėlio įterpimo pagrindai

Norint rodyti paveikslėlį, reikia nurodyti jo vietą <img> žymoje naudojant atributą src.

Kuriame paveikslėlį

Jei paveikslėlis yra tame pačiame serveryje kaip ir puslapis, pakanka nurodyti jo failo pavadinimą arba santykinį kelią:

<img src="paveikslelis.jpg" alt="Aprašymas">

Jei paveikslėlis yra kitame serveryje, reikia įrašyti pilną URL:

<img src="https://example.com/paveikslelis.jpg" alt="Aprašymas">

Vaizdo lygiavimas

Norint horizontaliai lygiuoti paveikslėlį, galima naudoti atributą align su reikšmėmis left, right arba center. Pavyzdžiui, paveikslėlį dešinėje:

<img src="paveikslelis.jpg" align="right" alt="Aprašymas">

Vertikaliam lygiavimui naudojamas atributas valign su reikšmėmis top, bottom arba middle. Pavyzdžiui, paveikslėlis viršutiniame dešiniajame kampe:

<img src="paveikslelis.jpg" align="right" valign="top" alt="Aprašymas">

„Alt“ atributas

„Alt“ (alternatyvus tekstas) rodomas, kai lankytojas naudoja teksto naršyklę arba kai paveikslėlio nuoroda neveikia. Jis taip pat padeda paieškos sistemoms ir prieinamumo įrankiams.

Paveikslėlio paversti nuoroda

Norint, kad paveikslėlis veiktų kaip nuoroda, jį reikia supakuoti į <a> žymą:

<a href="https://example.com/daugiau-informacijos.html">
    <img src="paveikslelis.jpg" alt="Aprašymas">
</a>

Taip lankytojas spustelėdamas paveikslėlį bus nukreiptas į nurodytą puslapį arba tiesiai į didesnę nuotrauką.