Atidarykite tinklalapio, prie kurio norite pridėti vaizdą, HTML failą teksto rengyklėje, pvz., Notepad arba žiniatinklio kūrimo programinėje įrangoje.
Pridėkite žymą prie failo. Įdėkite žymą po elemento, po kurio norite matyti vaizdą, kai HTML failas atidaromas naršyklėje. Žyma neturi atskiros uždarymo žymos. Žymėje turite nurodyti vaizdo, kurį norite rodyti, šaltinį, įvesdami vaizdo vietą internete su src atributas. Jei vaizdas saugomas tame pačiame aplanke kaip ir HTML failas, įveskite vaizdo pavadinimą ir plėtinį. Jei vaizdas saugomas kitur, įveskite visą vaizdo URL.
Pridėkite alt atributas jūsų žymai. HTML5 yra būtinas alt atributas. Naudokite šį atributą vaizdui apibūdinti, jei jo nepavyktų įkelti. Jei vaizdo įkelti nepavyksta, naršyklė rodo įvestą tekstą po alt atributo. Be to, alt atributas svarbus ekrano skaitytuvo programinei įrangai, kurią naudoja žmonės su regėjimo negalia. Programinė įranga nuskaito tekstą alt atribute, kad asmuo, turintis regėjimo negalią, žiūrintis jūsų svetainę, galėtų išgirsti, kas yra paveikslėlyje, net jei to nemato.
Nurodykite vaizdo matmenis pikseliais naudodami aukščio ir plotis atributai. Jei nenurodysite matmenų, įkeliant puslapį naršyklė nežino, kiek vietos palikti vaizdui. Dėl to puslapis įkeliamas netvarkingai, nes tekstas įkeliamas pirmiausia, paliekant mažą erdvę vaizdui, o tada, kai vaizdas įkeliamas, išsiskleidžia ir erdvė plečiasi. Nurodytus matmenis naršyklė palieka tiksliai reikiamą tarpą tarp kitų puslapio elementų, kad vaizdas būtų užpildytas baigus įkelti.
Išbandykite kodą, kad įsitikintumėte, jog vaizdas rodomas tinkamoje vietoje, naršyklėje atidarę HTML failą.
Naudokite CSS norėdami perkelti vaizdą į kairę arba dešinę ekrano pusę arba apvynioti jį tekstu. Pavyzdžiui, galite naudoti style="float: left;" arba style="float: right;" žymos viduje.
Jei nežinote vaizdo aukščio ir pločio, galite naudoti tik aukščio arba pločio atributą. Taip pat galite naudoti CSS norėdami nurodyti aukštį ir plotį; pavyzdžiui, 100 x 100 pikselių paveikslėlyje naudokite stiliaus atributą: style="height: 100px; plotis: 100 piks.
Paverskite vaizdą spustelėjama nuoroda įdėdami žymą į „a href“ žymų porą. Pavyzdžiui, jei norite, kad vaizdas būtų susietas su „Facebook“, įveskite toliau pateiktą informaciją.
Nenaudokite atributo alt, kad pagerintumėte savo puslapio SEO. Paieškos sistemos jau seniai žinojo, kad kai kurie interneto dizaineriai bando užpildyti alt atributą papildomais raktiniais žodžiais, todėl ignoruoja alt atributo tekstą.
